feat: add slider before-after

README.md

@@ -0,0 +1,16 @@
+<p align="center">
+ <img src="./assets/logo.svg" alt="Super resolution logo" width="128" height="128">
+ <h1 align="center">Super resolution</h1>
+</p>
+<p align="center">
+ <a aria-label="GitHub release" href="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/UrijHoruzij/super-resolution/">
+  <img alt="GitHub release (latest by date)" src="https://img.shields.io/github/v/release/UrijHoruzij/super-resolution?color=62c089">
+ </a>
+ <a aria-label="License" href="https://github.com/UrijHoruzij/super-resolution/blob/master/LICENSE">
+  <img alt="GitHub" src="https://img.shields.io/github/license/UrijHoruzij/super-resolution?color=62c089">
+ </a>
+ </p>
+
+## License
+
+Super resolution is released under the [MIT License](https://github.com/UrijHoruzij/super-resolution/blob/master/LICENSE).

electron-builder.json

@@ -1,6 +1,7 @@
 {
  "productName": "Super resolution",
  "appId": "org.upscayl.superresolution",
+ "copyright": "Copyright © 2023 ${author}",
  "artifactName": "${name}-${version}-${os}.${ext}",
  "asar": true,
  "extraFiles": [

main/background.js

@@ -41,20 +41,21 @@ app.on('ready', async () => {
  splashWindow = createWindow(
  'splash',
  {
+ icon: path.join(__dirname, '../resources/icon.png'),
  width: 750,
  height: 500,
  show: false,
  center: true,
  frame: false,
  resizable: false,
- title: 'Super resolution',
+ backgroundColor: '#171918',
  webPreferences: {
  preload: path.join(__dirname, 'preload.js'),
  },
  },
  true,
  );
- splashWindow.on('ready-to-show', () => {
+ splashWindow.once('ready-to-show', () => {
  splashWindow.show();
  });
  if (isDev) {
@@ -64,11 +65,12 @@ app.on('ready', async () => {
  }
 
  mainWindow = createWindow('main', {
- // icon: join(__dirname, '../resources/icon.png'),
+ icon: path.join(__dirname, '../resources/icon.png'),
  width: 1000,
  height: 600,
  show: false,
  frame: false,
+ backgroundColor: '#171918',
  webPreferences: {
  nodeIntegration: true,
  webSecurity: false,
@@ -77,11 +79,11 @@ app.on('ready', async () => {
  });
  // mainWindow.webContents.openDevTools();
  mainWindow.removeMenu();
- mainWindow.on('ready-to-show', () => {
+ mainWindow.once('ready-to-show', () => {
  setTimeout(() => {
  splashWindow.close();
  mainWindow.show();
- }, 1000);
+ }, 4000);
  });
  if (isDev) {
  await mainWindow.loadURL(`http:https://localhost:3000/`);
@@ -92,12 +94,13 @@ app.on('ready', async () => {
  autoUpdater.checkForUpdatesAndNotify();
 
  ipcMain.on('upscayl', async () => {
+ const index = 0;
  if (!flag && files.length > 0 && saveDirectory.length > 0) {
  flag = true;
- await upscayl(files[0], saveDirectory[0], mainWindow);
- const fileName = path.parse(files[0]).name;
- const fileExt = path.parse(files[0]).ext;
- const outFile = `${saveDirectory[0]}/${fileName}_upscayl${fileExt}`;
+ for (const file of files) {
+  await upscayl(file, saveDirectory[0], mainWindow, index);
+  index++;
+ }
  flag = false;
  }
  });
@@ -124,7 +127,7 @@ app.on('ready', async () => {
  ipcMain.on('open-files', async (e) => {
  const { filePaths } = await dialog.showOpenDialog({
  filters: [{ name: 'Изображения', extensions: ['jpg', 'png', 'gif'] }],
- properties: ['openFile', 'multiSelections'],
+ properties: ['openFile'],
  });
  files = [...filePaths];
  const filesPathsPosix = filePaths.map((file) => file.split(path.sep).join(path.posix.sep));

main/helpers/upscayl.js

@@ -3,7 +3,7 @@ const fs = require('fs');
 const path = require('path');
 const { modelsPath, execPath } = require('./binaries');
 
-const upscayl = (inputDir, outputDir, mainWindow) => {
+const upscayl = (inputDir, outputDir, mainWindow, index) => {
  mainWindow.setProgressBar(0.01);
  let failed = false;
  let outFile = '';
@@ -29,6 +29,7 @@ const upscayl = (inputDir, outputDir, mainWindow) => {
  if (percentString.length) {
  let percent = parseFloat(percentString[0].slice(0, -1)) / 100;
  mainWindow.setProgressBar(percent);
+ mainWindow.webContents.send('upscayl-progress', percent * 100);
  }
  if (data.includes('invalid gpu') || data.includes('failed')) {
  mainWindow.setProgressBar(-1);
@@ -45,7 +46,11 @@ const upscayl = (inputDir, outputDir, mainWindow) => {
  });
  upscayl.on('close', (code) => {
  mainWindow.setProgressBar(-1);
- if (failed) {
+ if (!failed) {
+ const out = outFile.split(path.sep).join(path.posix.sep);
+ mainWindow.webContents.send('upscayl-done', { after: out, index });
+ } else {
+ mainWindow.webContents.send('upscayl-error');
  }
  });
 };

package.json

@@ -31,7 +31,7 @@
  "electron-settings": "^4.0.2",
  "electron-store": "^8.1.0",
  "electron-updater": "^5.2.1",
- "ui-forest": "^1.11.1"
+ "ui-forest": "^1.11.4"
  },
  "devDependencies": {
  "@commitlint/cli": "^17.0.0",

src/components/Splash/index.js

@@ -9,7 +9,7 @@ const Splash = (props) => {
  <div className={styles.splash}>
  <div className={styles.wrapper}>
  <div className={styles.logo}>
- <Image src={logo} alt={messages.splash.title} width={72} height={72} />
+ <Image src={logo} priority alt={messages.splash.title} width={72} height={72} />
  <div className={styles.name}>{messages.splash.title}</div>
  </div>
  <div className={styles.copyright}>

src/pages/settings.js

@@ -6,6 +6,9 @@ import { Button } from 'ui-forest';
 function Settings() {
  const [messages, changeLang, lang, setLang] = useContext(LangContext);
  const [updateStatus, setUpdateStatus] = useState(null);
+ const [downloadProgress, setDownloadProgress] = useState(0);
+ const [bytesPerSecond, setbytesPerSecond] = useState(0);
+
  const firstUpdate = useRef(true);
  const toggleLang = (e) => {
  changeLang(e.target.value);
@@ -45,8 +48,12 @@ function Settings() {
  }
  };
  useEffect(() => {
- window.electron.on('update-status', (event, status) => {
+ window.electron.on('update-status', ({ status, bytesPerSecond, percent, totalevent }) => {
  setUpdateStatus(status);
+ if (status === 'download-progress') {
+ setDownloadProgress(percent);
+ setbytesPerSecond(bytesPerSecond);
+ }
  });
  });
  return (
@@ -70,7 +77,14 @@ function Settings() {
  <td></td>
  </tr>
  <tr>
- <td>{updateMessages()}</td>
+ <td>
+ {updateMessages()}
+ {updateStatus === 'download-progress' ? (
+ <div>
+ {bytesPerSecond / 1024}kB/s-{downloadProgress}%
+ </div>
+ ) : null}
+ </td>
  <td>
  {updateStatus === 'update-downloaded' ? (
  <Button onClick={updateClick}>{messages.settings.autoUpdater.updateBtn}</Button>

src/pages/superResolution.js

@@ -1,14 +1,14 @@
-import React, { useEffect, useState, useContext } from 'react';
+import { useEffect, useState, useContext } from 'react';
 import Head from 'next/head';
 import { Button, SliderBeforeAfter } from 'ui-forest';
 import { Header, Sidebar, Main, LangContext } from '../components';
-import Image from 'next/image';
 
 const superResolutionPage = () => {
  const [messages] = useContext(LangContext);
  const [images, setImages] = useState([]);
- const [outImages, setOutImages] = useState([]);
+ const [progress, setProgress] = useState(0);
  const superResolution = () => {
+ setProgress(1);
  window.electron.send('upscayl');
  };
  const openFile = () => {
@@ -19,30 +19,67 @@ const superResolutionPage = () => {
  };
  useEffect(() => {
  window.electron.on('open-files', (event, files) => {
- setImages(files);
+ setImages(
+ files.map((file) => {
+ return {
+ before: file,
+ };
+ }),
+ );
+ });
+ window.electron.on('upscayl-done', (event, upscaylImg) => {
+ setImages(
+ images.map((image, i) => {
+ if (i === upscaylImg.index) {
+ return {
+ before: image.before,
+ after: upscaylImg.after,
+ };
+ }
+ return {
+ before: image.before,
+ };
+ }),
+ );
+ setProgress(0);
+ });
+ window.electron.on('upscayl-error', (event) => {});
+
+ window.electron.on('upscayl-progress', (event, percent) => {
+ setProgress(percent);
  });
  });
 
+ const progressRender = () => {
+ if (progress > 0) {
+ return { filter: 'blur(8px)' };
+ } else {
+ return {};
+ }
+ };
  return (
  <>
  <Head />
  <Header title={messages.upscayl.title} />
  <Sidebar />
  <Main>
- {images
- ? images.map((image, index) => {
- return (
- <SliderBeforeAfter
- key={index}
- width={400}
- height={250}
- urlSecondImage=""
- urlFirstImage={image}></SliderBeforeAfter>
- );
-
- return <Image key={index} alt={index} width={150} height={150} src={image} />;
- })
- : null}
+ <div style={progressRender()}>
+ {images
+ ? images.map((image, index) => {
+ if (image.after) {
+ return (
+ <SliderBeforeAfter
+ key={index}
+ size={250}
+ urlFirstImage={image.before}
+ urlSecondImage={image.after}></SliderBeforeAfter>
+ );
+ } else {
+ return <SliderBeforeAfter key={index} size={250} urlFirstImage={image.before}></SliderBeforeAfter>;
+ }
+ })
+ : null}
+ </div>
  <Button onClick={openFile}>{messages.upscayl.openFile}</Button>
  <Button onClick={openDirectory}>{messages.upscayl.openDirectory}</Button>
  <Button onClick={superResolution}>{messages.upscayl.upscayle}</Button>

yarn.lock

@@ -4648,10 +4648,10 @@ typescript@^4.6.4:
  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.4.tgz#a2a3d2756c079abda241d75f149df9d561091e78"
  integrity sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==
 
-ui-forest@^1.11.1:
- version "1.11.1"
- resolved "https://registry.yarnpkg.com/ui-forest/-/ui-forest-1.11.1.tgz#663390935286d7f52c60d3250c9ac7b6711b753f"
- integrity sha512-37nZBwMKwSsuh3t85oJexG8tv6G7XQfIrHL7IxKm1ty2/yfPY8PC1JcUpw/g5TquhDVWxdJNmd9awHm747roEA==
+ui-forest@^1.11.4:
+ version "1.11.4"
+ resolved "https://registry.yarnpkg.com/ui-forest/-/ui-forest-1.11.4.tgz#59572aef7386503740645f83a1fab3d297323d5e"
+ integrity sha512-6mik6+hZJQoSvkhlDOPMDYtKMwNXAsTunr6Mlr97q8UscjT32hdTKqXtXgUXlehrDA39nE79F9vwhnD4TjPzow==
  dependencies:
  classnames "^2.3.1"
  normalize.css "^8.0.1"