Add batch progress counter

electron/index.ts

@@ -517,6 +517,8 @@ ipcMain.on(commands.UPSCAYL, async (event, payload) => {
       if (!failed && !stopped) {
         logit("💯 Done upscaling");
         logit("♻ Scaling and converting now...");
+        mainWindow &&
+          mainWindow.webContents.send(commands.SCALING_AND_CONVERTING);
         // Free up memory
         upscayl.kill();
         try {
@@ -644,6 +646,8 @@ ipcMain.on(commands.FOLDER_UPSCAYL, async (event, payload) => {
       logit("💯 Done upscaling");
       logit("♻ Scaling and converting now...");
       upscayl.kill();
+      mainWindow &&
+        mainWindow.webContents.send(commands.SCALING_AND_CONVERTING);
       // Get number of files in output folder
       const files = fs.readdirSync(inputDir);
       try {

renderer/components/upscayl-tab/view/ProgressBar.tsx

@@ -7,12 +7,20 @@ function ProgressBar({
   stopHandler,
   batchMode,
 }) {
+  const [batchProgress, setBatchProgress] = React.useState(0);
+
+  React.useEffect(() => {
+    if (progress.includes("0.00%")) {
+      setBatchProgress((prev) => prev + 1);
+    }
+  }, [progress]);
+
   return (
     <div className="absolute flex h-full w-full flex-col items-center justify-center bg-base-300/50 backdrop-blur-lg">
       <div className="flex flex-col items-center gap-2">
         <Spinner />
         <p className="rounded-full bg-base-300 px-2 py-1 font-bold">
-          {batchMode && "In Progress"}
+          {batchMode && "Batch Upscale In Progress: " + batchProgress}
           {!batchMode &&
             (doubleUpscaylCounter > 0
               ? `${progress}\nPass ${doubleUpscaylCounter}`

renderer/pages/index.tsx

@@ -102,6 +102,10 @@ const Home = () => {
       logit(`🐞 BACKEND REPORTED: `, data);
     });
 
+    window.electron.on(commands.SCALING_AND_CONVERTING, (_, data: string) => {
+      setProgress("Processing the image...");
+    });
+
     window.electron.on(commands.UPSCAYL_ERROR, (_, data: string) => {
       alert(data);
       resetImagePaths();