Fixed UI

main/index.js

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

renderer/components/LeftPaneSteps.jsx

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

renderer/components/RightPaneInfo.jsx

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

renderer/pages/index.jsx

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

renderer/styles/globals.css

@@ -18,7 +18,6 @@
   ::-webkit-scrollbar-thumb:hover {
     @apply rounded-full bg-neutral-400;
   }
-
 }
 
 @layer utilities {
@@ -28,11 +27,19 @@
 }
 
 .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 {
-  0% { opacity: 0; transform: translateY(-10px); }
-  80% { opacity: 1; }
-  100% { opacity: 1; transform: translateY(0px); }
+  0% {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  80% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
 }