ArSrNaUI ESRGAN图像超分辨率软件

构建本软件

平台：node v18.13.0 ；npm v8.19.3

clone源代码


git clone https://github.com/ArSrNa/ArESRGAN-GUI.git

安装依赖


cd ArESRGAN-GUI
npm i

中国大陆用户注意：由于dddd的原因，安装过程不一定顺利，因为electron某些依赖使用镜像会报错，所以建议不要换镜像下载，使用npm默认镜像即可

安装完成后即可启动


npm run start

源代码内容

目录	内容
./src	主应用资源
./backres	依赖平台文件

./src目录内容如下

文件	内容
js/	前端代码
res/	前端依赖
index.css	前端样式
index.html	前端结构
index.js	后端主应用

实现方式与原理

前后端通讯

前端通过ipc消息，ipcMain与ipcRender之间前后端实时交流

前端方式如下


import { ipcRenderer } from 'electron';
ipcRenderer.send(channel,'我永远喜欢菲谢尔');

ipcRenderer.on(channel,(evt,msg)=>{
    // 接收后端信息
    // msg 即为后端消息
})

后端使用express与express-ws处理前端请求后端处理如下


import { ipcMain } from 'electron';

ipcMain.on(channel,(evt,msg)=>{
    // msg为前端消息
})

mainWindow.webContents.send(channel,msg)

Child_Process

node中有这么一个模块，可以调用子进程，通过这个方式实现调用编译后的ESRGAN


var spawn = require('child_process').spawn;

esrgan = spawn(esrganPath,[
    '-i',file,
    '-o',`${file}_optimization.png`,
    '-n',model
  ]);

简单地封装起来


function optimization(data){
  var file = data.file;
  var model = data.model;
  esrgan = spawn(esrganPath,[
    '-i',file,
    '-o',`${file}_optimization.png`,
    '-n',model
  ]); 
  esrgan.stderr.on('data', function (data) {
    console.log(data.toString('utf8'));
    var progressSet = parseInt(data)/100
    if(typeof progressSet=='number') mainWindow.setProgressBar(progressSet)
    mainWindow.webContents.send('esrgan',{
      type:'log',
      data:data.toString('utf8')
    });
    }); 
    esrgan.on('exit', function (code, signal) { 
    mainWindow.setProgressBar(-1)
    console.log('child process eixt ,exit:' + code); 
    mainWindow.webContents.send('esrgan',{
      type:'exit',
      code:'exit'+code
    });
    return code
    });
  }