New save options, updated step order, CSS updates

main/commands.js

@@ -1,6 +1,8 @@
 const commands = {
   SELECT_FILE: "Select a File",
-  SELECT_FOLDER: "Select a Folder",
+  SELECT_OUTPUT: "Save as",
+  SET_FILE: "Set file",
+  REPLACE_ORIGINAL: "Replace original",
   UPSCAYL: "Upscale the Image",
   UPSCAYL_DONE: "Upscaling Done",
   UPSCAYL_PROGRESS: "Send Progress from Main to Renderer",

main/index.js

@@ -4,6 +4,7 @@ const { format } = require("url");
 const { spawn } = require("child_process");
 const fs = require("fs");
 const sizeOf = require("image-size");
+const path = require('path');
 const { autoUpdater } = require("electron-updater");
 const { getPlatform } = require("./getPlatform");
 
@@ -21,6 +22,7 @@ const {
 const isDev = require("electron-is-dev");
 const prepareNext = require("electron-next");
 const commands = require("./commands");
+const tmpPath = path.join(app.getPath("userData"), "\\tmp\\");
 
 // Prepare the renderer once the app is ready
 let mainWindow;
@@ -79,21 +81,49 @@ ipcMain.handle(commands.SELECT_FILE, async () => {
     return "cancelled";
   } else {
     console.log(filePaths[0]);
-    // CREATE input AND upscaled FOLDER
+    // CREATE original copy
+    if(!fs.existsSync(tmpPath)) {
+      fs.mkdirSync(tmpPath);
+    }
+    fs.copyFileSync(filePaths[0], path.join(tmpPath, "original" + parse(filePaths[0]).ext));
     return filePaths[0];
   }
 });
 
-ipcMain.handle(commands.SELECT_FOLDER, async (event, message) => {
+ipcMain.handle(commands.SET_FILE, async (event, payload) => {
-  const { canceled, filePaths } = await dialog.showOpenDialog({
+  const original = payload.original;
-    properties: ["openDirectory"],
+  const fileExt = parse(original).ext;
+  // CREATE original copy
+  if(!fs.existsSync(tmpPath)) {
+    fs.mkdirSync(tmpPath);
+  }
+  fs.copyFileSync(original, path.join(tmpPath, "original" + fileExt));
+
+})
+
+ipcMain.handle(commands.SELECT_OUTPUT, async (event, payload) => {
+  const original = payload.original;
+  const fileExt = parse(original).ext;
+  const { canceled, filePath } = await dialog.showSaveDialog({
+    filters: [{name: fileExt, extensions: [fileExt.substring(1)]}]
   });
   if (canceled) {
     console.log("operation cancelled");
     return "cancelled";
   } else {
-    console.log(filePaths[0]);
+    console.log(filePath);
-    return filePaths[0];
+    if(fs.existsSync(tmpPath + "/scaled" + fileExt)) {
+      fs.copyFileSync(tmpPath + "/scaled" + fileExt, filePath);
+    }
+    return filePath;
+  }
+});
+
+ipcMain.handle(commands.REPLACE_ORIGINAL, async (event, payload) => {
+  const original = payload.original;
+  const fileExt = parse(original).ext;
+  if(fs.existsSync(tmpPath + "/scaled" + fileExt)) {
+    fs.copyFileSync(tmpPath + "/scaled" + fileExt, original);
   }
 });
 
@@ -102,10 +132,10 @@ ipcMain.on(commands.UPSCAYL, async (event, payload) => {
   const scale = payload.scaleFactor;
 
   let inputDir = payload.imagePath.match(/(.*)[\/\\]/)[1] || "";
-  let outputDir = payload.outputPath;
+  let outputDir = tmpPath
   console.log("🚀 => ipcMain.on => outputDir", outputDir);
 
-  // COPY IMAGE TO upscaled FOLDER
+  // COPY IMAGE TO TMP FOLDER
   const platform = getPlatform();
   const fullfileName =
     platform === "win"
@@ -121,9 +151,9 @@ ipcMain.on(commands.UPSCAYL, async (event, payload) => {
     execPath,
     [
       "-i",
-      inputDir + "/" + fullfileName,
+      tmpPath + "/original" + fileExt,
       "-o",
-      outputDir + "/" + fileName + "_upscayled_" + scale + "x" + fileExt,
+      tmpPath + "/scaled" + fileExt,
       "-s",
       scale === 2 ? 4 : scale,
       "-m",
@@ -151,7 +181,7 @@ ipcMain.on(commands.UPSCAYL, async (event, payload) => {
       console.log("Done upscaling");
       mainWindow.webContents.send(
         commands.UPSCAYL_DONE,
-        outputDir + "/" + fileName + "_upscayled_" + scale + "x" + fileExt
+        outputDir + "/scaled" + fileExt
       );
     }
   });

renderer/pages/index.jsx

@@ -14,6 +14,7 @@ const Home = () => {
   const [outputPath, SetOutputPath] = useState("");
   const [scaleFactor, setScaleFactor] = useState(4);
   const [progress, setProgress] = useState("");
+  const [curStep, setStep] = useState(1);
   const [model, setModel] = useState("realesrgan-x4plus");
   const [loaded, setLoaded] = useState(false);
   const [version, setVersion] = useState("");
@@ -22,8 +23,13 @@ const Home = () => {
     setProgress("");
     SetImagePath("");
     setUpscaledImagePath("");
+    setStep(1);
   };
 
+  const stepStyle = (thisStep) => {
+    return { display: (thisStep > curStep ? "none" : "block") };
+  }
+
   useEffect(() => {
     setVersion(navigator.userAgent.match(/Upscayl\/([\d\.]+\d+)/)[1]);
   }, []);
@@ -48,6 +54,7 @@ const Home = () => {
     window.electron.on(commands.UPSCAYL_DONE, (_, data) => {
       setProgress("");
       setUpscaledImagePath(data);
+      setStep(4);
     });
   }, []);
 
@@ -59,6 +66,7 @@ const Home = () => {
       SetImagePath(path);
       var dirname = path.match(/(.*)[\/\\]/)[1] || "";
       SetOutputPath(dirname);
+      setStep(3);
     }
   };
 
@@ -101,6 +109,8 @@ const Home = () => {
       SetImagePath(filePath);
       var dirname = filePath.match(/(.*)[\/\\]/)[1] || "";
       SetOutputPath(dirname);
+      setStep(3);
+      window.electron.invoke(commands.SET_FILE, {original: filePath});
     }
   };
 
@@ -121,11 +131,21 @@ const Home = () => {
       SetImagePath(filePath);
       var dirname = filePath.match(/(.*)[\/\\]/)[1] || "";
       SetOutputPath(dirname);
+      setStep(3);
     }
   };
 
   const outputHandler = async () => {
-    var path = await window.electron.invoke(commands.SELECT_FOLDER);
+    var path = await window.electron.invoke(commands.SELECT_OUTPUT, { original: imagePath });
+    if (path !== "cancelled") {
+      SetOutputPath(path);
+    } else {
+      console.log("Getting output path from input file");
+    }
+  };
+
+  const replaceHandler = async () => {
+    var path = await window.electron.invoke(commands.REPLACE_ORIGINAL, { original: imagePath });
     if (path !== "cancelled") {
       SetOutputPath(path);
     } else {
@@ -169,17 +189,17 @@ const Home = () => {
         {/* LEFT PANE */}
         <div className="h-screen overflow-auto p-5">
           {/* STEP 1 */}
-          <div className="mt-5">
+          <div className="mt-0">
             <p className="mb-2 font-medium text-neutral-100">Step 1</p>
             <button
-              className="rounded-lg bg-rose-400 p-3"
+              className="rounded-lg bg-rose-400 hover:bg-rose-300 transition-colors p-3 w-full font-semibold"
               onClick={selectImageHandler}
             >
               Select Image
             </button>
           </div>
           {/* STEP 2 */}
-          <div className="mt-10">
+          <div className="mt-5 animate-step-in" style={stepStyle(3)}>
             <p className="font-medium text-neutral-100">Step 2</p>
             <p className="mb-2 text-sm text-neutral-400">
               Select Upscaling Type
@@ -187,14 +207,26 @@ const Home = () => {
             <select
               name="select-model"
               onDrop={(e) => handleDrop(e)}
-              className="rounded-lg bg-slate-300 p-3"
+              className="rounded-lg bg-slate-300 hover:bg-slate-200 p-3 w-full"
               onChange={handleModelChange}
             >
-              <option value="realesrgan-x4plus">General Photo</option>
+              <option value="realesrgan-x4plus">Photos &amp; Realistic Art</option>
-              <option value="realesrgan-x4plus-anime">Digital Art</option>
+              <option value="realesrgan-x4plus-anime">2D &amp; Simple Art</option>
             </select>
           </div>
 
+          {/* STEP 3 */}
+          <div className="mt-5 animate-step-in" style={stepStyle(3)}>
+            <p className="mb-2 font-medium text-neutral-100">Step 3</p>
+            <button
+              className="rounded-lg bg-sky-400 hover:bg-sky-300 transition-colors p-3 w-full font-semibold"
+              onClick={upscaylHandler}
+              disabled={progress.length > 0}
+            >
+              {progress.length > 0 ? "Upscayling⏳" : "Upscayl"}
+            </button>
+          </div>
+
           {/* STEP 3
           <div className="mt-10">
             <p className="font-medium text-neutral-100">Step 3</p>
@@ -227,29 +259,23 @@ const Home = () => {
             </div>
           </div> */}
 
-          {/* STEP 3 */}
+          {/* STEP 4 */}
-          <div className="mt-10">
+          <div className="mt-5 animate-step-in" style={stepStyle(4)}>
-            <p className="font-medium text-neutral-100">Step 3</p>
+            <p className="font-medium text-neutral-100">Step 4</p>
             <p className="mb-2 text-sm text-neutral-400">
-              Defaults to Image's path
+              Save file
             </p>
             <button
-              className="rounded-lg bg-teal-400 p-3"
+              className="rounded-lg bg-teal-400 hover:bg-teal-300 transition-colors p-3 w-full font-semibold"
+              onClick={replaceHandler}
+            >
+              Replace Original
+            </button>
+            <button
+              className="rounded-lg bg-teal-400 hover:bg-teal-300 transition-colors p-3 mt-1 w-full font-semibold"
               onClick={outputHandler}
             >
-              Set Output Folder
+              Save As
-            </button>
-          </div>
-
-          {/* STEP 4 */}
-          <div className="mt-10">
-            <p className="mb-2 font-medium text-neutral-100">Step 4</p>
-            <button
-              className="rounded-lg bg-sky-400 p-3"
-              onClick={upscaylHandler}
-              disabled={progress.length > 0}
-            >
-              {progress.length > 0 ? "Upscayling⏳" : "Upscayl"}
             </button>
           </div>
         </div>
@@ -295,8 +321,8 @@ const Home = () => {
         onDragLeave={(e) => handleDragLeave(e)}
         onPaste={(e) => handlePaste(e)}
       >
-        {progress.length > 0 && upscaledImagePath.length === 0 && (
+        {progress.length > 0 && (
-          <div className="absolute flex h-full w-full flex-col items-center justify-center bg-black/50 backdrop-blur-lg">
+          <div className="absolute flex h-full w-full flex-col items-center justify-center bg-black/50 backdrop-blur-lg z-10">
             <div className="flex flex-col items-center gap-2">
               <Image src={Animated} />
               <p className="font-bold text-neutral-50">{progress}</p>
@@ -309,7 +335,7 @@ const Home = () => {
             <p className="p-5 text-lg font-medium text-neutral-400">
               Select an Image to Upscale
             </p>
-            <p className="text-neutral-600">Upscale v{version}</p>
+            <p className="text-neutral-600">Upscayl v{version}</p>
           </>
         ) : upscaledImagePath.length === 0 ? (
           <img
@@ -324,7 +350,7 @@ const Home = () => {
           <ReactCompareSlider
             itemOne={
               <ReactCompareSliderImage
-                src={"file://" + imagePath}
+                src={"file://" + imagePath + "?" + Date.now()}
                 alt="Original"
                 style={{
                   objectFit: "contain",
@@ -333,7 +359,7 @@ const Home = () => {
             }
             itemTwo={
               <ReactCompareSliderImage
-                src={"file://" + upscaledImagePath}
+                src={"file://" + upscaledImagePath + "?" + Date.now()}
                 alt="Upscayl"
                 style={{
                   objectFit: "contain",

renderer/styles/globals.css

@@ -26,3 +26,13 @@
     @apply transition-all duration-300 ease-in-out;
   }
 }
+
+.animate-step-in {
+  animation: animate-step-in 0.35s 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); }
+}