added STOP button

electron/commands.ts

@@ -21,6 +21,7 @@ const commands = {
   GET_MODELS_LIST: "Send models list from main to renderer",
   CUSTOM_MODEL_FILES_LIST: "Send custom model files list to renderer",
   LOG: "Log",
+  STOP: "Stop the current operation",
 };
 
 export default commands;

electron/index.ts

@@ -14,7 +14,6 @@ import { format } from "url";
 import fs from "fs";
 
 import { execPath, modelsPath } from "./binaries";
-
 // Packages
 import {
   BrowserWindow,
@@ -29,6 +28,9 @@ import { spawnUpscayl } from "./upscayl";
 import prepareNext from "electron-next";
 import isDev from "electron-is-dev";
 import commands from "./commands";
+import { ChildProcessWithoutNullStreams } from "child_process";
+
+let ChildProcess : { process: ChildProcessWithoutNullStreams; kill: () => boolean; }[] = []
 
 log.initialize({ preload: true });
 
@@ -314,6 +316,12 @@ ipcMain.on(commands.OPEN_FOLDER, async (event, payload) => {
   shell.openPath(payload);
 });
 
+ipcMain.on(commands.STOP, async (event, payload) => {
+  ChildProcess.forEach((child) => {
+    child.kill();
+  })
+});
+
 //------------------------Double Upscayl-----------------------------//
 ipcMain.on(commands.DOUBLE_UPSCAYL, async (event, payload) => {
   const model = payload.model as string;
@@ -359,6 +367,8 @@ ipcMain.on(commands.DOUBLE_UPSCAYL, async (event, payload) => {
   let isAlpha = false;
   let failed2 = false;
 
+  ChildProcess.push(upscayl)
+
   const onData = (data) => {
     // CONVERT DATA TO STRING
     data = data.toString();
@@ -427,6 +437,8 @@ ipcMain.on(commands.DOUBLE_UPSCAYL, async (event, payload) => {
         )
       );
 
+      ChildProcess.push(upscayl2)
+
       upscayl2.process.stderr.on("data", onData2);
       upscayl2.process.on("error", onError2);
       upscayl2.process.on("close", onClose2);
@@ -493,6 +505,8 @@ ipcMain.on(commands.UPSCAYL, async (event, payload) => {
     let isAlpha = false;
     let failed = false;
 
+    ChildProcess.push(upscayl)
+
     const onData = (data: string) => {
       logit("image upscayl: ", data.toString());
       data = data.toString();
@@ -564,6 +578,8 @@ ipcMain.on(commands.FOLDER_UPSCAYL, async (event, payload) => {
     )
   );
 
+  ChildProcess.push(upscayl)
+
   let failed = false;
   const onData = (data: any) => {
     logit("🚀 => upscayl.stderr.on => stderr.toString()", data.toString());

renderer/components/ProgressBar.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Spinner from "./icons/Spinner";
 
-function ProgressBar({ progress, doubleUpscaylCounter }) {
+function ProgressBar({ progress, doubleUpscaylCounter, stopHandler }) {
   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">
@@ -14,6 +14,7 @@ function ProgressBar({ progress, doubleUpscaylCounter }) {
         <p className="rounded-full bg-base-300 px-2 py-1 text-sm font-medium">
           Doing the Upscayl magic...
         </p>
+        <button onClick={stopHandler}>STOP</button>
       </div>
     </div>
   );

renderer/pages/index.tsx

@@ -141,6 +141,7 @@ const Home = () => {
     window.electron.on(commands.UPSCAYL_DONE, (_, data: string) => {
       setProgress("");
       setUpscaledImagePath(data);
+      console.log("upscaledImagePath: ", upscaledImagePath)
       addToLog(data);
     });
 
@@ -472,6 +473,11 @@ const Home = () => {
     }
   };
 
+  const stopHandler = () => {
+    window.electron.send(commands.STOP);
+    resetImagePaths();
+  }
+
   const allowedFileTypes = ["png", "jpg", "jpeg", "webp"];
   const allowedVideoFileTypes = ["webm", "mp4", "mkv"];
 
@@ -573,6 +579,7 @@ const Home = () => {
           <ProgressBar
             progress={progress}
             doubleUpscaylCounter={doubleUpscaylCounter}
+            stopHandler={stopHandler}
           />
         ) : null}