rolled back some changes

main/commands.js

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

main/index.js

@@ -4,7 +4,6 @@ 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");
 
@@ -22,7 +21,6 @@ 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;
@@ -73,16 +71,6 @@ app.on("ready", async () => {
 // Quit the app once all windows are closed
 app.on("window-all-closed", app.quit);
 
-// Fix file:// + ? by registering a new protocol
-app.whenReady().then(() => {
-  const { protocol } = require("electron");
-  protocol.registerFileProtocol('local', (request, callback) => {
-    const pathname = decodeURIComponent(request.url.replace('local://', ''));
-    const parts = pathname.split('?');
-    callback(parts[0]);
-  });
-});
-
 // ! DONT FORGET TO RESTART THE APP WHEN YOU CHANGE CODE HERE
 
 ipcMain.handle(commands.SELECT_FILE, async () => {
@@ -95,49 +83,21 @@ ipcMain.handle(commands.SELECT_FILE, async () => {
     return "cancelled";
   } else {
     console.log(filePaths[0]);
-    // CREATE original copy
+    // CREATE input AND upscaled FOLDER
-    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.SET_FILE, async (event, payload) => {
+ipcMain.handle(commands.SELECT_FOLDER, async (event, message) => {
-  const original = payload.original;
+  const { canceled, filePaths } = await dialog.showOpenDialog({
-  const fileExt = parse(original).ext;
+    properties: ["openDirectory"],
-  // 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(filePath);
+    console.log(filePaths[0]);
-    if(fs.existsSync(tmpPath + "scaled" + fileExt)) {
+    return filePaths[0];
-      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);
   }
 });
 
@@ -146,7 +106,7 @@ ipcMain.on(commands.UPSCAYL, async (event, payload) => {
   const scale = payload.scaleFactor;
 
   let inputDir = payload.imagePath.match(/(.*)[\/\\]/)[1] || "";
-  let outputDir = tmpPath
+  let outputDir = payload.outputPath;
   console.log("🚀 => ipcMain.on => outputDir", outputDir);
 
   // COPY IMAGE TO TMP FOLDER
@@ -157,48 +117,56 @@ ipcMain.on(commands.UPSCAYL, async (event, payload) => {
       : payload.imagePath.split("/").slice(-1)[0];
   const fileName = parse(fullfileName).name;
   const fileExt = parse(fullfileName).ext;
+  const outFile = outputDir + "/" + fileName + "_upscayled_" + scale + "x_" + model + fileExt;
 
   // UPSCALE
   console.log("PRODUCTION? :", isDev);
   console.log("EXEC: ", execPath);
-  let upscayl = spawn(
+  if (fs.existsSync(outFile)) {
-    execPath,
+    mainWindow.webContents.send(
-    [
+      commands.UPSCAYL_DONE,
-      "-i",
+      outFile
-      tmpPath + "original" + fileExt,
+    );
-      "-o",
+  }
-      tmpPath + "scaled" + fileExt,
+  else {
-      "-s",
+    let upscayl = spawn(
-      scale === 2 ? 4 : scale,
+      execPath,
-      "-m",
+      [
-      modelsPath,
+        "-i",
-      "-n",
+        inputDir + "/" + fullfileName,
-      model,
+        "-o",
-    ],
+        outFile,
-    {
+        "-s",
-      cwd: null,
+        scale === 2 ? 4 : scale,
-      detached: false,
+        "-m",
-    }
+        modelsPath,
-  );
+        "-n",
-  let failed = false;
+        model,
-  upscayl.stderr.on("data", (stderr) => {
+      ],
-    console.log(stderr.toString());
+      {
-    stderr = stderr.toString();
+        cwd: null,
-    if (stderr.includes("invalid gpu")) {
+        detached: false,
-      failed = true;
+      }
-    }
+    );
-    mainWindow.webContents.send(commands.UPSCAYL_PROGRESS, stderr.toString());
+    let failed = false;
-  });
+    upscayl.stderr.on("data", (stderr) => {
-
+      console.log(stderr.toString());
-  upscayl.on("close", (code) => {
+      stderr = stderr.toString();
-    if (failed !== true) {
+      if (stderr.includes("invalid gpu")) {
-      console.log("Done upscaling");
+        failed = true;
-      mainWindow.webContents.send(
+      }
-        commands.UPSCAYL_DONE,
+      mainWindow.webContents.send(commands.UPSCAYL_PROGRESS, stderr.toString());
-        outputDir + "scaled" + fileExt
+    });
-      );
+    upscayl.on("close", (code) => {
-    }
+      if (failed !== true) {
-  });
+        console.log("Done upscaling");
+        mainWindow.webContents.send(
+          commands.UPSCAYL_DONE,
+          outFile
+        );
+      }
+    });
+  }
 });
 
 autoUpdater.on("update-available", (_event, releaseNotes, releaseName) => {

renderer/pages/index.jsx

@@ -14,7 +14,6 @@ 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("");
@@ -23,13 +22,8 @@ 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]);
   }, []);
@@ -54,7 +48,6 @@ const Home = () => {
     window.electron.on(commands.UPSCAYL_DONE, (_, data) => {
       setProgress("");
       setUpscaledImagePath(data);
-      setStep(4);
     });
   }, []);
 
@@ -66,7 +59,6 @@ const Home = () => {
       SetImagePath(path);
       var dirname = path.match(/(.*)[\/\\]/)[1] || "";
       SetOutputPath(dirname);
-      setStep(3);
     }
   };
 
@@ -109,7 +101,6 @@ const Home = () => {
       SetImagePath(filePath);
       var dirname = filePath.match(/(.*)[\/\\]/)[1] || "";
       SetOutputPath(dirname);
-      setStep(3);
       window.electron.invoke(commands.SET_FILE, {original: filePath});
     }
   };
@@ -131,21 +122,11 @@ const Home = () => {
       SetImagePath(filePath);
       var dirname = filePath.match(/(.*)[\/\\]/)[1] || "";
       SetOutputPath(dirname);
-      setStep(3);
     }
   };
 
   const outputHandler = async () => {
-    var path = await window.electron.invoke(commands.SELECT_OUTPUT, { original: imagePath });
+    var path = await window.electron.invoke(commands.SELECT_FOLDER);
-    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 {
@@ -192,14 +173,14 @@ const Home = () => {
           <div className="mt-0">
             <p className="mb-2 font-medium text-neutral-100">Step 1</p>
             <button
-              className="rounded-lg bg-rose-400 hover:bg-rose-300 transition-colors p-3 w-full font-semibold"
+              className="rounded-lg bg-rose-400 hover:bg-rose-300 transition-colors p-3 font-semibold"
               onClick={selectImageHandler}
             >
               Select Image
             </button>
           </div>
           {/* STEP 2 */}
-          <div className="mt-5 animate-step-in" style={stepStyle(3)}>
+          <div className="mt-5 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
@@ -207,26 +188,14 @@ const Home = () => {
             <select
               name="select-model"
               onDrop={(e) => handleDrop(e)}
-              className="rounded-lg bg-slate-300 hover:bg-slate-200 p-3 w-full"
+              className="rounded-lg bg-slate-300 hover:bg-slate-200 p-3"
               onChange={handleModelChange}
             >
-              <option value="realesrgan-x4plus">Photos &amp; Realistic Art</option>
+              <option value="realesrgan-x4plus">General Photo</option>
-              <option value="realesrgan-x4plus-anime">2D &amp; Simple Art</option>
+              <option value="realesrgan-x4plus-anime">Digital 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>
@@ -259,27 +228,32 @@ const Home = () => {
             </div>
           </div> */}
 
-          {/* STEP 4 */}
+          {/* STEP 3 */}
-          <div className="mt-5 animate-step-in" style={stepStyle(4)}>
+          <div className="mt-5 animate-step-in">
-            <p className="font-medium text-neutral-100">Step 4</p>
+            <p className="font-medium text-neutral-100">Step 3</p>
             <p className="mb-2 text-sm text-neutral-400">
-              Save file
+              Defaults to Image's path
             </p>
             <button
-              className="rounded-lg bg-teal-400 hover:bg-teal-300 transition-colors p-3 w-full font-semibold"
+              className="rounded-lg bg-teal-400 hover:bg-teal-300 transition-colors p-3 mt-1 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}
             >
-              Save As
+              Set Output Folder
+            </button>
+          </div>
+
+          {/* STEP 4 */}
+          <div className="mt-5 animate-step-in">
+            <p className="mb-2 font-medium text-neutral-100">Step 4</p>
+            <button
+              className="rounded-lg bg-sky-400 hover:bg-sky-300 transition-colors p-3 font-semibold"
+              onClick={upscaylHandler}
+              disabled={progress.length > 0}
+            >
+              {progress.length > 0 ? "Upscayling⏳" : "Upscayl"}
             </button>
           </div>
         </div>
-
         <div className="p-2 text-center text-sm text-neutral-500">
           <p>
             Copyright © 2022 -{" "}
@@ -321,8 +295,8 @@ const Home = () => {
         onDragLeave={(e) => handleDragLeave(e)}
         onPaste={(e) => handlePaste(e)}
       >
-        {progress.length > 0 && (
+        {progress.length > 0 && upscaledImagePath.length === 0 && (
-          <div className="absolute flex h-full w-full flex-col items-center justify-center bg-black/50 backdrop-blur-lg z-10">
+          <div className="absolute flex h-full w-full flex-col items-center justify-center bg-black/50 backdrop-blur-lg">
             <div className="flex flex-col items-center gap-2">
               <Image src={Animated} />
               <p className="font-bold text-neutral-50">{progress}</p>
@@ -341,7 +315,7 @@ const Home = () => {
           <img
             className="h-full w-full object-contain"
             src={
-              "local://" + `${upscaledImagePath ? upscaledImagePath : imagePath}`
+              "file://" + `${upscaledImagePath ? upscaledImagePath : imagePath}`
             }
             draggable="false"
             alt=""
@@ -350,7 +324,7 @@ const Home = () => {
           <ReactCompareSlider
             itemOne={
               <ReactCompareSliderImage
-                src={"local://" + imagePath + "?" + Date.now()}
+                src={"file://" + imagePath}
                 alt="Original"
                 style={{
                   objectFit: "contain",
@@ -359,7 +333,7 @@ const Home = () => {
             }
             itemTwo={
               <ReactCompareSliderImage
-                src={"local://" + upscaledImagePath + "?" + Date.now()}
+                src={"file://" + upscaledImagePath}
                 alt="Upscayl"
                 style={{
                   objectFit: "contain",