Added new models

renderer/components/LeftPaneImageSteps.tsx

@@ -63,7 +63,10 @@ function LeftPaneImageSteps({
   };
 
   const modelOptions = [
-    { label: "General Photo", value: "realesrgan-x4plus" },
+    { label: "General Photo (Remacri)", value: "remacri" },
+    { label: "General Photo (Ultramix Balanced)", value: "ultramix_balanced" },
+    { label: "General Photo (Real-ESRGAN)", value: "realesrgan-x4plus" },
+    { label: "General Photo (Ultrasharp)", value: "ultrasharp" },
     { label: "Digital Art", value: "realesrgan-x4plus-anime" },
     { label: "Sharpen Image", value: "models-DF2K" },
   ];

renderer/components/ProgressBar.tsx

@@ -2,16 +2,17 @@ import React from "react";
 import Animated from "../public/loading.svg";
 import Image from "next/image";
 
-function ProgressBar(props) {
-  console.log(props.sharpening);
+function ProgressBar({ progress, doubleUpscaylCounter }) {
   return (
     <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} alt="Progress Bar" />
-        <p className="font-bold text-neutral-50">{props.progress}</p>
-        <p className="text-sm font-medium text-neutral-200">
-          Doing the Upscayl magic...
+        <p className="font-bold">
+          {doubleUpscaylCounter > 0
+            ? `${progress}\nPass ${doubleUpscaylCounter}`
+            : `${progress}`}
         </p>
+        <p className="text-sm font-medium">Doing the Upscayl magic...</p>
       </div>
     </div>
   );

renderer/pages/index.tsx

@@ -20,7 +20,7 @@ const Home = () => {
   const [outputPath, setOutputPath] = useState("");
   const [scaleFactor, setScaleFactor] = useState(4);
   const [progress, setProgress] = useState("");
-  const [model, setModel] = useState("realesrgan-x4plus");
+  const [model, setModel] = useState("remacri");
   const [loaded, setLoaded] = useState(false);
   const [version, setVersion] = useState("");
   const [batchMode, setBatchMode] = useState(false);
@@ -30,6 +30,7 @@ const Home = () => {
   const [isVideo, setIsVideo] = useState(false);
   const [videoPath, setVideoPath] = useState("");
   const [upscaledVideoPath, setUpscaledVideoPath] = useState("");
+  const [doubleUpscaylCounter, setDoubleUpscaylCounter] = useState(0);
 
   const resetImagePaths = () => {
     setProgress("");
@@ -91,6 +92,9 @@ const Home = () => {
     });
     window.electron.on(commands.DOUBLE_UPSCAYL_PROGRESS, (_, data) => {
       if (data.length > 0 && data.length < 10) {
+        if (data === "0.00%") {
+          setDoubleUpscaylCounter(doubleUpscaylCounter + 1);
+        }
         setProgress(data);
       }
       handleErrors(data);
@@ -111,9 +115,12 @@ const Home = () => {
       setUpscaledBatchFolderPath(data);
     });
     window.electron.on(commands.DOUBLE_UPSCAYL_DONE, (_, data) => {
+      setProgress("");
+      setDoubleUpscaylCounter(0);
       setUpscaledImagePath(data);
     });
     window.electron.on(commands.UPSCAYL_VIDEO_DONE, (_, data) => {
+      setProgress("");
       setUpscaledVideoPath(data);
     });
   }, []);
@@ -407,7 +414,10 @@ const Home = () => {
         upscaledImagePath.length === 0 &&
         upscaledBatchFolderPath.length === 0 &&
         upscaledVideoPath.length === 0 ? (
-          <ProgressBar progress={progress} />
+          <ProgressBar
+            progress={progress}
+            doubleUpscaylCounter={doubleUpscaylCounter}
+          />
         ) : null}
 
         {/* DEFAULT PANE INFO */}
@@ -502,7 +512,7 @@ const Home = () => {
                       style={{
                         objectFit: "contain",
                       }}
-                      className="origin-bottom scale-[200%] bg-[#1d1c23]"
+                      className="bg-[#1d1c23]"
                     />
                   </>
                 }