Adding batch mode switch and function

package.json

@@ -118,6 +118,7 @@
     "image-size": "^1.0.2",
     "react-compare-slider": "^2.2.0",
     "react-dropzone": "^14.2.2",
+    "react-tooltip": "^4.2.21",
     "sharp": "^0.30.7",
     "tailwind-scrollbar": "^1.3.1"
   }

renderer/pages/index.jsx

@@ -4,6 +4,7 @@ import {
   ReactCompareSlider,
   ReactCompareSliderImage,
 } from "react-compare-slider";
+import ReactTooltip from "react-tooltip";
 
 import Animated from "../public/loading.svg";
 import Image from "next/image";
@@ -17,6 +18,7 @@ const Home = () => {
   const [model, setModel] = useState("realesrgan-x4plus");
   const [loaded, setLoaded] = useState(false);
   const [version, setVersion] = useState("");
+  const [batchMode, setBatchMode] = useState(false);
 
   useEffect(() => {
     setVersion(navigator.userAgent.match(/Upscayl\/([\d\.]+\d+)/)[1]);
@@ -59,6 +61,19 @@ const Home = () => {
     }
   };
 
+  const selectImagesFolderHandler = async () => {
+    SetImagePath("");
+    setUpscaledImagePath("");
+    setProgress("");
+    var path = await window.electron.invoke(commands.SELECT_FILE);
+
+    if (path !== "cancelled") {
+      SetImagePath(path);
+      var dirname = path.match(/(.*)[\/\\]/)[1] || "";
+      SetOutputPath(dirname);
+    }
+  };
+
   const handleModelChange = (e) => {
     setModel(e.target.value);
   };
@@ -124,6 +139,10 @@ const Home = () => {
     }
   };
 
+  const handleBatchMode = () => {
+    setBatchMode(!batchMode);
+  };
+
   const upscaylHandler = async () => {
     if (imagePath !== "") {
       setUpscaledImagePath("");
@@ -150,6 +169,29 @@ const Home = () => {
 
         {/* LEFT PANE */}
         <div className="h-screen overflow-auto p-5">
+          <div className="flex flex-row items-end">
+            <p
+              className="mr-1 inline-block cursor-help text-sm text-neutral-400"
+              data-tip="This will let you upscale all files in a folder at once"
+            >
+              Batch Upscale:
+            </p>
+            <div
+              className="animate relative inline-block h-5 w-8 cursor-pointer rounded-full bg-neutral-500"
+              onClick={handleBatchMode}
+            >
+              <div
+                className={`${
+                  batchMode ? "right-1 bg-blue-300" : "left-1 bg-neutral-300"
+                } animate absolute top-1/2 h-3 w-3 -translate-y-1/2 rounded-full`}
+              ></div>
+            </div>
+          </div>
+          <ReactTooltip
+            className="w-72 bg-neutral-900 text-neutral-50"
+            place="top"
+          />
+
           {/* STEP 1 */}
           <div className="mt-5">
             <p className="mb-2 font-medium text-neutral-100">Step 1</p>
@@ -157,7 +199,7 @@ const Home = () => {
               className="rounded-lg bg-rose-400 p-3"
               onClick={selectImageHandler}
             >
-              Select Image
+              Select {batchMode ? "Folder" : "Image"}
             </button>
           </div>
           {/* STEP 2 */}
@@ -223,7 +265,7 @@ const Home = () => {
           </div>
           {/* STEP 4 */}
           <div className="mt-10">
-            <p className="mb-2 font-medium text-neutral-100">Step 5</p>
+            <p className="mb-2 font-medium text-neutral-100">Step 4</p>
             <button
               className="rounded-lg bg-sky-400 p-3"
               onClick={upscaylHandler}

renderer/styles/globals.css

@@ -19,6 +19,7 @@
     @apply rounded-full bg-neutral-400;
   }
 
+  
 }
 
 @layer utilities {

yarn.lock

@@ -2100,7 +2100,7 @@ progress@^2.0.3:
   resolved "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
-prop-types@^15.8.1:
+prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -2189,6 +2189,14 @@ react-is@^16.13.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-tooltip@^4.2.21:
+  version "4.2.21"
+  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-4.2.21.tgz#840123ed86cf33d50ddde8ec8813b2960bfded7f"
+  integrity sha512-zSLprMymBDowknr0KVDiJ05IjZn9mQhhg4PRsqln0OZtURAJ1snt1xi5daZfagsh6vfsziZrc9pErPTDY1ACig==
+  dependencies:
+    prop-types "^15.7.2"
+    uuid "^7.0.3"
+
 react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
@@ -2735,6 +2743,11 @@ util-deprecate@^1.0.1, util-deprecate@^1.0.2:
   resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
+uuid@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-7.0.3.tgz#c5c9f2c8cf25dc0a372c4df1441c41f5bd0c680b"
+  integrity sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==
+
 verror@^1.10.0:
   version "1.10.1"
   resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.1.tgz#4bf09eeccf4563b109ed4b3d458380c972b0cdeb"