Added gradient style and batch mode function

main/commands.js

@@ -7,6 +7,10 @@ const commands = {
   DOUBLE_UPSCAYL: "Double Upscale the Image",
   DOUBLE_UPSCAYL_DONE: "Double Upscaling Done",
   DOUBLE_UPSCAYL_PROGRESS: "Send Double Upscayl Progress from Main to Renderer",
+  FOLDER_UPSCAYL: "Upscale a Folder",
+  FOLDER_UPSCAYL_DONE: "Folder upscaling successful",
+  FOLDER_UPSCAYL_PROGRESS:
+    "Send Folder Upscaling Progress from Main to Renderer",
 };
 
 module.exports = commands;

main/index.js

@@ -105,6 +105,7 @@ ipcMain.handle(commands.SELECT_FOLDER, async (event, message) => {
   }
 });
 
+//------------------------Double Upscayl-----------------------------//
 ipcMain.on(commands.DOUBLE_UPSCAYL, async (event, payload) => {
   const model = payload.model;
   let inputDir = payload.imagePath.match(/(.*)[\/\\]/)[1] || "";
@@ -216,6 +217,7 @@ ipcMain.on(commands.DOUBLE_UPSCAYL, async (event, payload) => {
   });
 });
 
+//------------------------Image Upscayl-----------------------------//
 ipcMain.on(commands.UPSCAYL, async (event, payload) => {
   const model = payload.model;
   const scale = payload.scaleFactor;
@@ -288,6 +290,58 @@ ipcMain.on(commands.UPSCAYL, async (event, payload) => {
   }
 });
 
+//------------------------Upscayl Folder-----------------------------//
+ipcMain.on(commands.FOLDER_UPSCAYL, async (event, payload) => {
+  const model = payload.model;
+  let inputDir = payload.imagePath;
+  let outputDir = payload.outputPath;
+  console.log(outputDir);
+
+  // UPSCALE
+  let upscayl = spawn(
+    execPath("realesrgan"),
+    ["-i", inputDir, "-o", outputDir, "-s", 4, "-m", modelsPath, "-n", model],
+    {
+      cwd: null,
+      detached: false,
+    }
+  );
+
+  let failed = false;
+  upscayl.stderr.on("data", (data) => {
+    console.log(
+      "🚀 => upscayl.stderr.on => stderr.toString()",
+      data.toString()
+    );
+    data = data.toString();
+    mainWindow.webContents.send(
+      commands.FOLDER_UPSCAYL_PROGRESS,
+      data.toString()
+    );
+    if (data.includes("invalid gpu") || data.includes("failed")) {
+      failed = true;
+    }
+  });
+
+  upscayl.on("error", (data) => {
+    mainWindow.webContents.send(
+      commands.FOLDER_UPSCAYL_PROGRESS,
+      data.toString()
+    );
+    failed = true;
+    return;
+  });
+
+  // Send done comamnd when
+  upscayl.on("close", (code) => {
+    if (failed !== true) {
+      console.log("Done upscaling");
+      mainWindow.webContents.send(commands.FOLDER_UPSCAYL_DONE, outFile);
+    }
+  });
+});
+
+//------------------------Auto-Update Code-----------------------------//
 // ! AUTO UPDATE STUFF
 autoUpdater.on("update-available", (_event, releaseNotes, releaseName) => {
   const dialogOpts = {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "upscayl",
   "private": true,
-  "version": "1.3.0",
+  "version": "1.5.0",
   "productName": "Upscayl",
   "homepage": "https://github.com/TGS963/upscayl",
   "contributors": [

renderer/components/LeftPaneSteps.jsx

@@ -18,7 +18,7 @@ function LeftPaneSteps(props) {
         </p>
         <div
           className={`animate relative inline-block h-5 w-8 cursor-pointer rounded-full ${
-            props.batchMode ? "bg-red-500" : "bg-neutral-500"
+            props.batchMode ? "bg-gradient-purple" : "bg-neutral-500"
           }`}
           onClick={handleBatchMode}
         >
@@ -34,9 +34,9 @@ function LeftPaneSteps(props) {
         <>
           {/* STEP 1 */}
           <div data-tip={props.imagePath}>
-            <p className="mb-2 font-medium text-neutral-100">Step 1</p>
+            <p className="mb-2 font-medium text-white/70">Step 1</p>
             <button
-              className="rounded-lg bg-rose-400 p-3 transition-colors hover:bg-rose-300"
+              className="bg-gradient-red rounded-lg p-3 font-medium text-white/90 transition-colors"
               onClick={props.selectImageHandler}
             >
               Select Image
@@ -53,14 +53,16 @@ function LeftPaneSteps(props) {
               <div className="mb-2 flex items-center gap-1">
                 <input
                   type="checkbox"
-                  className="h-4 w-4 cursor-pointer appearance-none rounded-sm bg-neutral-500 transition duration-200 checked:bg-green-400 focus:outline-none focus-visible:border focus-visible:border-green-400"
+                  className="checked:bg-gradient-white h-4 w-4 cursor-pointer appearance-none rounded-full bg-neutral-500 transition duration-200 focus:outline-none focus-visible:border focus-visible:border-green-400"
                   onChange={(e) => {
                     props.setDoubleUpscayl(e.target.checked);
                   }}
                 />
                 <p
-                  className={`inline-block text-sm font-medium ${
+                  className={`inline-block cursor-help rounded-full text-sm font-medium ${
-                    props.doubleUpscayl ? "text-green-400" : "text-neutral-500"
+                    props.doubleUpscayl
+                      ? "text-neutral-100"
+                      : "text-neutral-500"
                   }`}
                 >
                   Double Upscayl
@@ -70,7 +72,7 @@ function LeftPaneSteps(props) {
             <select
               name="select-model"
               onDrop={(e) => props.handleDrop(e)}
-              className="block rounded-lg bg-slate-300 p-3 hover:bg-slate-200"
+              className="animate bg-gradient-white block cursor-pointer rounded-lg p-3 font-medium text-black/90 hover:bg-slate-200"
               onChange={props.handleModelChange}
             >
               <option value="realesrgan-x4plus">General Photo</option>
@@ -86,7 +88,7 @@ function LeftPaneSteps(props) {
               Defaults to Image's path
             </p>
             <button
-              className="mt-1 rounded-lg bg-teal-400 p-3 transition-colors hover:bg-teal-300"
+              className="bg-gradient mt-1 rounded-lg p-3 font-medium text-white/90 transition-colors hover:bg-teal-300"
               onClick={props.outputHandler}
             >
               Set Output Folder
@@ -97,7 +99,7 @@ function LeftPaneSteps(props) {
           <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"
+              className="bg-gradient-upscayl rounded-lg p-3 font-medium text-white/90 transition-colors"
               onClick={props.upscaylHandler}
               disabled={props.progress.length > 0}
             >

renderer/pages/index.jsx

@@ -31,6 +31,8 @@ const Home = () => {
 
   useEffect(() => {
     setLoaded(true);
+    const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
+
     setVersion(navigator.userAgent.match(/Upscayl\/([\d\.]+\d+)/)[1]);
 
     const handleErrors = (data) => {
@@ -188,8 +190,8 @@ const Home = () => {
   };
 
   return (
-    <div className="flex h-screen w-screen flex-row overflow-hidden bg-neutral-900">
+    <div className="flex h-screen w-screen flex-row overflow-hidden bg-[#1d1c23]">
-      <div className="flex h-screen w-96 flex-col bg-neutral-800">
+      <div className="flex h-screen w-96 flex-col bg-[#26222c]">
         {imagePath.length > 0 && (
           <ResetButton resetImagePaths={resetImagePaths} />
         )}

renderer/styles/globals.css

@@ -3,6 +3,9 @@
 @tailwind utilities;
 
 @layer base {
+  * {
+    @apply transition-all duration-300 ease-in-out;
+  }
   ::-webkit-scrollbar {
     @apply w-3;
   }
@@ -24,6 +27,21 @@
   .animate {
     @apply transition-all duration-300 ease-in-out;
   }
+  .bg-gradient-purple {
+    @apply bg-gradient-to-br from-[#7741ff] to-[#af55ff] hover:from-[#af55ff] hover:to-[#7741ff];
+  }
+  .bg-gradient-red {
+    @apply bg-gradient-to-br from-rose-600 to-red-400 hover:from-red-400 hover:to-rose-600;
+  }
+  .bg-gradient-white {
+    @apply bg-gradient-to-br from-slate-400 to-neutral-100 hover:from-neutral-100 hover:to-slate-400;
+  }
+  .bg-gradient-upscayl {
+    @apply bg-gradient-to-br from-[#7741ff] to-[#af55ff] hover:from-[#af55ff] hover:to-[#7741ff];
+  }
+  .bg-gradient {
+    @apply bg-gradient-to-br from-cyan-400 to-blue-500 hover:from-blue-500 hover:to-cyan-400;
+  }
 }
 
 .animate-step-in {