feat: add loader image, edit upscayl script

README.md

@@ -1,5 +1,5 @@
 <p align="center">
- <img src="./assets/logo.svg" alt="Super resolution logo" width="128" height="128">
+ <img src="./assets/logo.png" alt="Super resolution logo" width="128" height="128">
  <h1 align="center">Super resolution</h1>
 </p>
 <p align="center">

main/background.js

@@ -77,7 +77,7 @@ app.on('ready', async () => {
  preload: path.join(__dirname, 'preload.js'),
  },
  });
- // mainWindow.webContents.openDevTools();
+ mainWindow.webContents.openDevTools();
  mainWindow.removeMenu();
  mainWindow.once('ready-to-show', () => {
  setTimeout(() => {
@@ -95,10 +95,10 @@ app.on('ready', async () => {
 
  ipcMain.on('upscayl', async () => {
  const index = 0;
- if (!flag && files.length > 0 && saveDirectory.length > 0) {
+ if (!flag && files.length > 0) {
  flag = true;
  for (const file of files) {
- await upscayl(file, saveDirectory[0], mainWindow, index);
+ await upscayl(file, null, mainWindow, index);
  index++;
  }
  flag = false;

main/helpers/upscayl.js

@@ -3,17 +3,25 @@ const fs = require('fs');
 const path = require('path');
 const { modelsPath, execPath } = require('./binaries');
 
-const upscayl = (inputDir, outputDir, mainWindow, index) => {
+const upscayl = (inputDir, outputDir = null, mainWindow, index) => {
  mainWindow.setProgressBar(0.01);
+ mainWindow.webContents.send('upscayl-progress', 1);
  let failed = false;
  let outFile = '';
  let stats = fs.statSync(inputDir);
+ let outputDirectory = '';
+ if (outputDir) {
+ outputDirectory = outputDir;
+ } else {
+ outputDirectory = path.dirname(inputDir);
+ }
+ console.log(outputDirectory);
  if (stats.isDirectory()) {
- outFile = outputDir;
+ outFile = outputDirectory;
  } else {
  const fileName = path.parse(inputDir).name;
  const fileExt = path.parse(inputDir).ext;
- outFile = `${outputDir}/${fileName}_upscayl${fileExt}`;
+ outFile = `${outputDirectory}/${fileName}_upscayl${fileExt}`;
  }
  const upscayl = spawn(
  execPath('realesrgan'),
@@ -28,18 +36,18 @@ const upscayl = (inputDir, outputDir, mainWindow, index) => {
  const percentString = data.match(/\d+,\d+%/) || [];
  if (percentString.length) {
  let percent = parseFloat(percentString[0].slice(0, -1)) / 100;
- mainWindow.setProgressBar(percent);
- mainWindow.webContents.send('upscayl-progress', percent * 100);
+ if (percent > 0.01) {
+ mainWindow.setProgressBar(percent);
+ mainWindow.webContents.send('upscayl-progress', percent * 100);
+ }
  }
  if (data.includes('invalid gpu') || data.includes('failed')) {
- mainWindow.setProgressBar(-1);
  failed = true;
  }
  });
 
  upscayl.on('error', (data) => {
  data.toString();
- mainWindow.setProgressBar(-1);
  console.log('error');
  failed = true;
  return;

package.json

@@ -1,50 +1,58 @@
 {
- "private": true,
- "name": "super-resolution",
- "description": "Free and open source AI image upscaler. It uses the latest AI technology to upscale images to higher resolutions.",
- "version": "1.2.0",
- "author": "Urij Horuzij",
- "homepage": "https://github.com/UrijHoruzij/super-resolution",
- "license": "MIT",
- "main": "main/background.js",
- "scripts": {
- "dev": "next dev",
- "electron": "electron .",
- "build": "next build && next export",
- "dist": "npm run build && electron-builder ",
- "dist:deb": "electron-builder build -l deb",
- "dist:rpm": "electron-builder build -l rpm",
- "dist:dmg": "electron-builder build -m dmg",
- "dist:pkg": "electron-builder build -m pkg",
- "dist:msi": "electron-builder build -w nsis",
- "publish-linux-app": "electron-builder -l --publish always",
- "publish-win-app": "electron-builder -w --publish always",
- "publish-mac-app": "electron-builder -m --publish always",
- "postinstall": "electron-builder install-app-deps",
- "prepare": "husky install"
- },
- "dependencies": {
- "classnames": "^2.3.2",
- "electron-is-dev": "^2.0.0",
- "electron-reload": "^2.0.0-alpha.1",
- "electron-serve": "^1.1.0",
- "electron-settings": "^4.0.2",
- "electron-store": "^8.1.0",
- "electron-updater": "^5.2.1",
- "ui-forest": "^1.11.4"
- },
- "devDependencies": {
- "@commitlint/cli": "^17.0.0",
- "@commitlint/config-conventional": "^17.0.0",
- "@semantic-release/changelog": "^6.0.2",
- "@semantic-release/git": "^10.0.1",
- "@semantic-release/npm": "^9.0.1",
- "electron": "^20.1.0",
- "electron-builder": "^23.3.3",
- "husky": "^8.0.1",
- "next": "^13.1.1",
- "next-transpile-modules": "^10.0.0",
- "react": "^18.2.0",
- "react-dom": "^18.2.0"
- }
+ "private": true,
+ "name": "super-resolution",
+ "description": "Free and open source AI image upscaler. It uses the latest AI technology to upscale images to higher resolutions.",
+ "version": "1.2.0",
+ "author": "Urij Horuzij",
+ "homepage": "https://github.com/UrijHoruzij/super-resolution",
+ "license": "MIT",
+ "main": "main/background.js",
+ "scripts": {
+ "dev": "next dev",
+ "electron": "electron .",
+ "build": "next build && next export",
+ "dist": "npm run build && electron-builder ",
+ "dist:deb": "electron-builder build -l deb",
+ "dist:rpm": "electron-builder build -l rpm",
+ "dist:dmg": "electron-builder build -m dmg",
+ "dist:pkg": "electron-builder build -m pkg",
+ "dist:msi": "electron-builder build -w nsis",
+ "publish-linux-app": "electron-builder -l --publish always",
+ "publish-win-app": "electron-builder -w --publish always",
+ "publish-mac-app": "electron-builder -m --publish always",
+ "postinstall": "electron-builder install-app-deps",
+ "prepare": "husky install"
+ },
+ "dependencies": {
+ "classnames": "^2.3.2",
+ "electron-is-dev": "^2.0.0",
+ "electron-reload": "^2.0.0-alpha.1",
+ "electron-serve": "^1.1.0",
+ "electron-settings": "^4.0.2",
+ "electron-store": "^8.1.0",
+ "electron-updater": "^5.2.1",
+ "ui-forest": "^1.11.4"
+ },
+ "devDependencies": {
+ "@commitlint/cli": "^17.0.0",
+ "@commitlint/config-conventional": "^17.0.0",
+ "@semantic-release/changelog": "^6.0.2",
+ "@semantic-release/git": "^10.0.1",
+ "@semantic-release/npm": "^9.0.1",
+ "electron": "^20.1.0",
+ "electron-builder": "^23.3.3",
+ "husky": "^8.0.1",
+ "next": "^13.1.1",
+ "next-transpile-modules": "^10.0.0",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/UrijHoruzij/super-resolution.git"
+ },
+ "keywords": [],
+ "bugs": {
+ "url": "https://github.com/UrijHoruzij/super-resolution/issues"
+ }
 }

src/components/Image/Image.module.css

@@ -0,0 +1,22 @@
+.wrapper {
+ position: relative;
+ width: fit-content;
+}
+.loader {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+.blur {
+ filter: blur(8px);
+}
+.percent {
+ margin-top: 12px;
+ font-size: 16px;
+ color: var(--white);
+}

src/components/Image/index.js

@@ -0,0 +1,29 @@
+import { SliderBeforeAfter } from 'ui-forest';
+import classnames from 'classnames';
+import { Spinner } from '../';
+import styles from './Image.module.css';
+
+const Image = (props) => {
+ const { after, before, progress, percent } = props;
+ return (
+ <div className={styles.wrapper}>
+ <div
+ className={classnames({
+ [styles.blur]: progress,
+ })}>
+ {after ? (
+ <SliderBeforeAfter size={250} urlFirstImage={before} urlSecondImage={after}></SliderBeforeAfter>
+ ) : (
+ <SliderBeforeAfter size={250} urlFirstImage={before}></SliderBeforeAfter>
+ )}
+ </div>
+ {progress && (
+ <div className={styles.loader}>
+ <Spinner />
+ <div className={styles.percent}>{percent.toFixed(0)}%</div>
+ </div>
+ )}
+ </div>
+ );
+};
+export default Image;

src/components/Spinner/Spinner.module.css

@@ -0,0 +1,18 @@
+.spinner {
+ display: block;
+ height: 50px;
+ width: 50px;
+ border: 4px rgba(255, 255, 255, 0.15) solid;
+ border-top: 4px white solid;
+ border-radius: 50%;
+ animation: spin 1s infinite linear;
+}
+
+@keyframes spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(359deg);
+ }
+}

src/components/Spinner/index.js

@@ -0,0 +1,6 @@
+import styles from './Spinner.module.css';
+
+const Spinner = () => {
+ return <div className={styles.spinner}></div>;
+};
+export default Spinner;

src/components/index.js

@@ -4,5 +4,7 @@ export { default as Header } from './Header';
 export { default as Sidebar } from './Sidebar';
 export { default as Main } from './Main';
 export { default as Splash } from './Splash';
+export { default as Spinner } from './Spinner';
+export { default as Image } from './Image';
 
 export { default as LangContext } from './Context';

src/pages/superResolution.js

@@ -1,14 +1,15 @@
 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 { Button } from 'ui-forest';
+import { Header, Sidebar, Main, LangContext, Image } from '../components';
 
 const superResolutionPage = () => {
  const [messages] = useContext(LangContext);
  const [images, setImages] = useState([]);
- const [progress, setProgress] = useState(0);
+ const [percent, setPercent] = useState(0);
+ const [progress, setProgress] = useState(false);
  const superResolution = () => {
- setProgress(1);
+ setProgress(true);
  window.electron.send('upscayl');
  };
  const openFile = () => {
@@ -41,47 +42,31 @@ const superResolutionPage = () => {
  };
  }),
  );
- setProgress(0);
+ setPercent(0);
+ setProgress(false);
  });
  window.electron.on('upscayl-error', (event) => {});
 
  window.electron.on('upscayl-progress', (event, percent) => {
- setProgress(percent);
+ setPercent(percent);
  });
  });
 
- const progressRender = () => {
- if (progress > 0) {
- return { filter: 'blur(8px)' };
- } else {
- return {};
- }
- };
  return (
  <>
  <Head />
  <Header title={messages.upscayl.title} />
  <Sidebar />
  <Main>
- <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>
+ {images
+ ? images.map((image, index) => {
+ return (
+ <Image key={index} after={image.after} before={image.before} progress={progress} percent={percent} />
+ );
+ })
+ : null}
  <Button onClick={openFile}>{messages.upscayl.openFile}</Button>
- <Button onClick={openDirectory}>{messages.upscayl.openDirectory}</Button>
+ {/* <Button onClick={openDirectory}>{messages.upscayl.openDirectory}</Button> */}
  <Button onClick={superResolution}>{messages.upscayl.upscayle}</Button>
  </Main>
  </>