Cool_Tools/upscayl
1
0
Fork 0
mirror of https://github.com/upscayl/upscayl.git synced 2025-02-25 22:47:59 +01:00
Code Releases Wiki Activity

Fixed UI

Browse Source
This commit is contained in:
Nayam Amarshe 2022-09-01 20:28:11 +05:30
parent cee6639332
commit e88100e802
7 changed files with 72 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
main/index.js
View File

@ -125,51 +125,51 @@ ipcMain.on(commands.UPSCAYL, async (event, payload) => {
// UPSCALE // UPSCALE
console.log("PRODUCTION? :", isDev); console.log("PRODUCTION? :", isDev);
console.log("EXEC: ", execPath); console.log("EXEC: ", execPath);
console.log("MODEL: ", modelsPath + "/" + model) console.log("MODEL: ", modelsPath + "/" + model);
if (fs.existsSync(outFile)) { if (fs.existsSync(outFile)) {
mainWindow.webContents.send(commands.UPSCAYL_DONE, outFile); mainWindow.webContents.send(commands.UPSCAYL_DONE, outFile);
} else { } else {
let upscayl = model.includes("realesrgan") ? let upscayl = model.includes("realesrgan")
spawn( ? spawn(
execPath + '-realesrgan', execPath + "-realesrgan",
[ [
"-i", "-i",
inputDir + "/" + fullfileName, inputDir + "/" + fullfileName,
"-o", "-o",
outFile, outFile,
"-s", "-s",
scale === 2 ? 4 : scale, scale === 2 ? 4 : scale,
"-m", "-m",
modelsPath, modelsPath,
"-n", "-n",
model, model,
], ],
{ {
cwd: null, cwd: null,
detached: false, detached: false,
} }
) )
: : spawn(
spawn( execPath + "-realsr",
execPath + '-realsr', [
[ "-i",
"-i", inputDir + "/" + fullfileName,
inputDir + "/" + fullfileName, "-o",
"-o", outFile,
outFile, "-s",
"-s", 4,
scale === 2 ? 4 : scale, "-x",
"-m", "-m",
modelsPath+ "/" + model, modelsPath + "/" + model,
], ],
{ {
cwd: null, cwd: null,
detached: false, detached: false,
} }
) );
;
let failed = false; let failed = false;
upscayl.stderr.on("data", (stderr) => { upscayl.stderr.on("data", (stderr) => {
console.log(stderr.toString()); console.log(stderr.toString());
stderr = stderr.toString(); stderr = stderr.toString();

15
renderer/components/LeftPaneSteps.jsx
View File

@ -2,9 +2,9 @@ import React from "react";
function LeftPaneSteps(props) { function LeftPaneSteps(props) {
return ( return (
<div className="h-screen overflow-auto p-5"> <div className="animate-step-in flex h-screen flex-col gap-10 overflow-auto p-5">
{/* STEP 1 */} {/* STEP 1 */}
<div className="mt-0"> <div className="">
<p className="mb-2 font-medium text-neutral-100">Step 1</p> <p className="mb-2 font-medium text-neutral-100">Step 1</p>
<button <button
className="rounded-lg bg-rose-400 p-3 transition-colors hover:bg-rose-300" className="rounded-lg bg-rose-400 p-3 transition-colors hover:bg-rose-300"
@ -13,8 +13,9 @@ function LeftPaneSteps(props) {
Select Image Select Image
</button> </button>
</div> </div>
{/* STEP 2 */} {/* STEP 2 */}
<div className="animate-step-in mt-5"> <div className="animate-step-in">
<p className="font-medium text-neutral-100">Step 2</p> <p className="font-medium text-neutral-100">Step 2</p>
<p className="mb-2 text-sm text-neutral-400">Select Upscaling Type</p> <p className="mb-2 text-sm text-neutral-400">Select Upscaling Type</p>
<select <select
@ -25,8 +26,8 @@ function LeftPaneSteps(props) {
> >
<option value="realesrgan-x4plus">General Photo</option> <option value="realesrgan-x4plus">General Photo</option>
<option value="realesrgan-x4plus-anime">Digital Art</option> <option value="realesrgan-x4plus-anime">Digital Art</option>
<option value="models-DF2K">DF2K</option> <option value="models-DF2K">Sharpen Image</option>
<option value="models-DF2K_JPEG">DF2K_JPEG</option> <option value="models-DF2K_JPEG">Sharpen JPEG</option>
</select> </select>
</div> </div>
@ -63,7 +64,7 @@ function LeftPaneSteps(props) {
</div> */} </div> */}
{/* STEP 3 */} {/* STEP 3 */}
<div className="animate-step-in mt-5"> <div className="animate-step-in">
<p className="font-medium text-neutral-100">Step 3</p> <p className="font-medium text-neutral-100">Step 3</p>
<p className="mb-2 text-sm text-neutral-400"> <p className="mb-2 text-sm text-neutral-400">
Defaults to Image's path Defaults to Image's path
@ -77,7 +78,7 @@ function LeftPaneSteps(props) {
</div> </div>
{/* STEP 4 */} {/* STEP 4 */}
<div className="animate-step-in mt-5"> <div className="animate-step-in">
<p className="mb-2 font-medium text-neutral-100">Step 4</p> <p className="mb-2 font-medium text-neutral-100">Step 4</p>
<button <button
className="rounded-lg bg-sky-400 p-3 transition-colors hover:bg-sky-300" className="rounded-lg bg-sky-400 p-3 transition-colors hover:bg-sky-300"

11
renderer/components/RightPaneInfo.jsx
View File

@ -1,10 +1,13 @@
import React from "react"; import React from "react";
function RightPaneInfo() { function RightPaneInfo({ version }) {
return ( return (
<p className="p-5 text-lg font-medium text-neutral-400"> <>
Select an Image to Upscale <p className="p-5 text-lg font-medium text-neutral-400">
</p> Select an Image to Upscale
</p>
<p className="text-neutral-600">Upscayl v{version}</p>
</>
); );
} }

8
renderer/pages/index.jsx
View File

@ -11,9 +11,6 @@ import ResetButton from "../components/ResetButton";
import LeftPaneSteps from "../components/LeftPaneSteps"; import LeftPaneSteps from "../components/LeftPaneSteps";
import RightPaneInfo from "../components/RightPaneInfo"; import RightPaneInfo from "../components/RightPaneInfo";
import Animated from "../public/loading.svg";
import Image from "next/image";
const Home = () => { const Home = () => {
const [imagePath, SetImagePath] = useState(""); const [imagePath, SetImagePath] = useState("");
const [upscaledImagePath, setUpscaledImagePath] = useState(""); const [upscaledImagePath, setUpscaledImagePath] = useState("");
@ -94,7 +91,9 @@ const Home = () => {
resetImagePaths(); resetImagePaths();
const type = e.dataTransfer.items[0].type; const type = e.dataTransfer.items[0].type;
console.log("🚀 => handleDrop => type", type);
const filePath = e.dataTransfer.files[0].path; const filePath = e.dataTransfer.files[0].path;
console.log("🚀 => handleDrop => filePath", filePath);
const extension = e.dataTransfer.files[0].name.split(".").at(-1); const extension = e.dataTransfer.files[0].name.split(".").at(-1);
console.log("🚀 => handleDrop => extension", extension); console.log("🚀 => handleDrop => extension", extension);
@ -106,8 +105,8 @@ const Home = () => {
} else { } else {
SetImagePath(filePath); SetImagePath(filePath);
var dirname = filePath.match(/(.*)[\/\\]/)[1] || ""; var dirname = filePath.match(/(.*)[\/\\]/)[1] || "";
console.log("🚀 => handleDrop => dirname", dirname);
SetOutputPath(dirname); SetOutputPath(dirname);
window.electron.invoke(commands.SET_FILE, { original: filePath });
} }
}; };
@ -141,6 +140,7 @@ const Home = () => {
}; };
const upscaylHandler = async () => { const upscaylHandler = async () => {
setUpscaledImagePath("");
if (imagePath !== "") { if (imagePath !== "") {
setProgress("Hold on..."); setProgress("Hold on...");
await window.electron.send(commands.UPSCAYL, { await window.electron.send(commands.UPSCAYL, {

19
renderer/styles/globals.css
View File

@ -18,7 +18,6 @@
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
@apply rounded-full bg-neutral-400; @apply rounded-full bg-neutral-400;
} }
} }
@layer utilities { @layer utilities {
@ -28,11 +27,19 @@
} }
.animate-step-in { .animate-step-in {
animation: animate-step-in 0.35s cubic-bezier(0.07, 0.43, 0.02, 1); animation: animate-step-in 0.6s cubic-bezier(0.07, 0.43, 0.02, 1);
} }
@keyframes animate-step-in { @keyframes animate-step-in {
0% { opacity: 0; transform: translateY(-10px); } 0% {
80% { opacity: 1; } opacity: 0;
100% { opacity: 1; transform: translateY(0px); } transform: translateY(-10px);
} }
80% {
opacity: 1;
}
100% {
opacity: 1;
transform: translateY(0px);
}
}

0
resources/linux/bin/upscayl-realesrgan Normal file → Executable file
View File

0
resources/linux/bin/upscayl-realsr Normal file → Executable file
View File