diff --git a/CHANGELOG.md b/CHANGELOG.md index 807a72f..e5e9e85 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,15 @@ +# [1.4.0](https://github.com/UrijHoruzij/super-resolution/compare/v1.3.0...v1.4.0) (2023-01-13) + + +### Bug Fixes + +* merge package.json ([83367ab](https://github.com/UrijHoruzij/super-resolution/commit/83367ab1af6135dc2db23eef041d65c92ec38af4)) + + +### Features + +* add loader image, edit upscayl script ([8351581](https://github.com/UrijHoruzij/super-resolution/commit/83515811a2e3299c9296e4d4a8bde42070815230)) + # [1.3.0](https://github.com/UrijHoruzij/super-resolution/compare/v1.2.0...v1.3.0) (2023-01-12) diff --git a/README.md b/README.md index 2f36d13..5b3594b 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@

- Super resolution logo + Super resolution logo

Super resolution

diff --git a/assets/logo.png b/assets/logo.png new file mode 100644 index 0000000..74da609 Binary files /dev/null and b/assets/logo.png differ diff --git a/assets/logo.svg b/assets/logo.svg deleted file mode 100644 index 1608322..0000000 --- a/assets/logo.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/build/icon.png b/build/icon.png new file mode 100644 index 0000000..8fa5457 Binary files /dev/null and b/build/icon.png differ diff --git a/main/background.js b/main/background.js index b143d84..9a4fc8a 100644 --- a/main/background.js +++ b/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; diff --git a/main/helpers/upscayl.js b/main/helpers/upscayl.js index f1db96e..b4ac9ab 100644 --- a/main/helpers/upscayl.js +++ b/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; diff --git a/package.json b/package.json index 99e6567..17b3096 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "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.3.0", + "version": "1.4.0", "author": "Urij Horuzij", "homepage": "https://github.com/UrijHoruzij/super-resolution", "license": "MIT", diff --git a/src/components/Image/Image.module.css b/src/components/Image/Image.module.css new file mode 100644 index 0000000..6103664 --- /dev/null +++ b/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); +} diff --git a/src/components/Image/index.js b/src/components/Image/index.js new file mode 100644 index 0000000..0849306 --- /dev/null +++ b/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 ( +

+
+ {after ? ( + + ) : ( + + )} +
+ {progress && ( +
+ +
{percent.toFixed(0)}%
+
+ )} +
+ ); +}; +export default Image; diff --git a/src/components/Spinner/Spinner.module.css b/src/components/Spinner/Spinner.module.css new file mode 100644 index 0000000..3e6446a --- /dev/null +++ b/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); + } +} diff --git a/src/components/Spinner/index.js b/src/components/Spinner/index.js new file mode 100644 index 0000000..6619fd6 --- /dev/null +++ b/src/components/Spinner/index.js @@ -0,0 +1,6 @@ +import styles from './Spinner.module.css'; + +const Spinner = () => { + return
; +}; +export default Spinner; diff --git a/src/components/index.js b/src/components/index.js index ffb52ba..d97f470 100644 --- a/src/components/index.js +++ b/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'; diff --git a/src/pages/superResolution.js b/src/pages/superResolution.js index ca2cc6c..550d3f9 100644 --- a/src/pages/superResolution.js +++ b/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 ( <>
-
- {images - ? images.map((image, index) => { - if (image.after) { - return ( - - ); - } else { - return ; - } - }) - : null} -
+ {images + ? images.map((image, index) => { + return ( + + ); + }) + : null} - + {/* */}