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="https://github.com/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://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"