Fix commands

electron/commands/custom-models-select.ts

@@ -1,20 +1,22 @@
 import { MessageBoxOptions, dialog } from "electron";
-import mainWindow from "../main-window";
 import {
-  getCustomModelsFolderPath,
+  customModelsFolderPath,
   setCustomModelsFolderPath,
 } from "../utils/config-variables";
 import logit from "../utils/logit";
 import slash from "../utils/slash";
 import COMMAND from "../constants/commands";
 import getModels from "../utils/get-models";
+import { getMainWindow } from "../main-window";
+
+const mainWindow = getMainWindow();
 
 const customModelsSelect = async (event, message) => {
   if (!mainWindow) return;
   const { canceled, filePaths: folderPaths } = await dialog.showOpenDialog({
     properties: ["openDirectory"],
     title: "Select Custom Models Folder",
-    defaultPath: getCustomModelsFolderPath(),
+    defaultPath: customModelsFolderPath,
   });
   if (canceled) {
     logit("🚫 Select Custom Models Folder Operation Cancelled");
@@ -40,11 +42,11 @@ const customModelsSelect = async (event, message) => {
 
     mainWindow.webContents.send(
       COMMAND.CUSTOM_MODEL_FILES_LIST,
-      getModels(getCustomModelsFolderPath())
+      getModels(customModelsFolderPath)
     );
 
-    logit("📁 Custom Folder Path: ", getCustomModelsFolderPath());
+    logit("📁 Custom Folder Path: ", customModelsFolderPath);
-    return getCustomModelsFolderPath();
+    return customModelsFolderPath;
   }
 };
 

electron/commands/get-models-list.ts

@@ -1,18 +1,20 @@
 import COMMAND from "../constants/commands";
-import mainWindow from "../main-window";
+import { getMainWindow } from "../main-window";
 import {
-  getCustomModelsFolderPath,
+  customModelsFolderPath,
   setCustomModelsFolderPath,
 } from "../utils/config-variables";
 import getModels from "../utils/get-models";
 import logit from "../utils/logit";
 
+const mainWindow = getMainWindow();
+
 const getModelsList = async (event, payload) => {
   if (!mainWindow) return;
   if (payload) {
     setCustomModelsFolderPath(payload);
 
-    logit("📁 Custom Models Folder Path: ", getCustomModelsFolderPath());
+    logit("📁 Custom Models Folder Path: ", customModelsFolderPath);
 
     mainWindow.webContents.send(
       COMMAND.CUSTOM_MODEL_FILES_LIST,

electron/commands/image-upscayl.ts

@@ -1,17 +1,16 @@
 import fs from "fs";
 import { modelsPath } from "../binaries";
 import COMMAND from "../constants/commands";
-import mainWindow from "../main-window";
 import {
-  getCustomModelsFolderPath,
+  customModelsFolderPath,
-  getFolderPath,
+  folderPath,
-  getOutputFolderPath,
+  outputFolderPath,
-  getOverwrite,
+  overwrite,
-  getSaveOutputFolder,
+  saveOutputFolder,
-  getStop,
   setChildProcesses,
   setOverwrite,
-  setStop,
+  setStopped,
+  stopped,
 } from "../utils/config-variables";
 import convertAndScale from "../utils/convert-and-scale";
 import { getSingleImageArguments } from "../utils/get-arguments";
@@ -20,9 +19,20 @@ import slash from "../utils/slash";
 import { spawnUpscayl } from "../utils/spawn-upscayl";
 import { parse } from "path";
 import DEFAULT_MODELS from "../constants/models";
+import { getMainWindow } from "../main-window";
+import stop from "./stop";
 
 const imageUpscayl = async (event, payload) => {
-  if (!mainWindow) return;
+  const mainWindow = getMainWindow();
+
+  if (!mainWindow) {
+    console.log("No main window");
+    return;
+  }
+  console.log({
+    overwrite: payload.overwrite,
+  });
+
   setOverwrite(payload.overwrite);
   const model = payload.model as string;
   const gpuId = payload.gpuId as string;
@@ -30,10 +40,10 @@ const imageUpscayl = async (event, payload) => {
 
   let inputDir = (payload.imagePath.match(/(.*)[\/\\]/)[1] || "") as string;
   let outputDir: string | undefined =
-    getFolderPath() || (payload.outputPath as string);
+    folderPath || (payload.outputPath as string);
 
-  if (getSaveOutputFolder() === true && getOutputFolderPath()) {
+  if (saveOutputFolder === true && outputFolderPath) {
-    outputDir = getOutputFolderPath();
+    outputDir = outputFolderPath;
   }
 
   const isDefaultModel = DEFAULT_MODELS.includes(model);
@@ -63,6 +73,7 @@ const imageUpscayl = async (event, payload) => {
     saveImageAs;
 
   // GET OVERWRITE SETTINGS FROM LOCAL STORAGE
+
   mainWindow.webContents
     .executeJavaScript('localStorage.getItem("overwrite");', true)
     .then((lastSavedOverwrite: boolean | null) => {
@@ -73,7 +84,7 @@ const imageUpscayl = async (event, payload) => {
     });
 
   // UPSCALE
-  if (fs.existsSync(outFile) && getOverwrite() === false) {
+  if (fs.existsSync(outFile) && overwrite === false) {
     // If already upscayled, just output that file
     logit("✅ Already upscayled at: ", outFile);
     mainWindow.webContents.send(
@@ -90,7 +101,7 @@ const imageUpscayl = async (event, payload) => {
         inputDir,
         fullfileName,
         outFile,
-        isDefaultModel ? modelsPath : getCustomModelsFolderPath() ?? modelsPath,
+        isDefaultModel ? modelsPath : customModelsFolderPath ?? modelsPath,
         model,
         scale,
         gpuId,
@@ -101,12 +112,11 @@ const imageUpscayl = async (event, payload) => {
 
     setChildProcesses(upscayl);
 
-    setStop(false);
+    setStopped(false);
     let isAlpha = false;
     let failed = false;
 
     const onData = (data: string) => {
-      if (!mainWindow) return;
       logit("image upscayl: ", data.toString());
       mainWindow.setProgressBar(parseFloat(data.slice(0, data.length)) / 100);
       data = data.toString();
@@ -130,15 +140,13 @@ const imageUpscayl = async (event, payload) => {
       return;
     };
     const onClose = async () => {
-      if (!failed && !getStop()) {
+      if (!failed && !stopped) {
         logit("💯 Done upscaling");
         logit("♻ Scaling and converting now...");
-        mainWindow &&
+        mainWindow.webContents.send(COMMAND.SCALING_AND_CONVERTING);
-          mainWindow.webContents.send(COMMAND.SCALING_AND_CONVERTING);
         // Free up memory
         upscayl.kill();
         try {
-          if (!mainWindow) return;
           await convertAndScale(
             inputDir + slash + fullfileName,
             isAlpha ? outFile + ".png" : outFile,
@@ -161,11 +169,10 @@ const imageUpscayl = async (event, payload) => {
             error
           );
           upscayl.kill();
-          mainWindow &&
+          mainWindow.webContents.send(
-            mainWindow.webContents.send(
+            COMMAND.UPSCAYL_ERROR,
-              COMMAND.UPSCAYL_ERROR,
+            "Error processing (scaling and converting) the image. Please report this error on Upscayl GitHub Issues page."
-              "Error processing (scaling and converting) the image. Please report this error on Upscayl GitHub Issues page."
+          );
-            );
         }
       }
     };

electron/commands/select-file.ts

@@ -1,14 +1,15 @@
 import { MessageBoxOptions, dialog } from "electron";
-import mainWindow from "../main-window";
+import { getMainWindow } from "../main-window";
-import { getImagePath, setImagePath } from "../utils/config-variables";
+import { imagePath, setImagePath } from "../utils/config-variables";
 import logit from "../utils/logit";
 
+const mainWindow = getMainWindow();
+
 const selectFile = async () => {
-  if (!mainWindow) return;
   const { canceled, filePaths } = await dialog.showOpenDialog({
     properties: ["openFile", "multiSelections"],
     title: "Select Image",
-    defaultPath: getImagePath(),
+    defaultPath: imagePath,
   });
 
   if (canceled) {
@@ -43,6 +44,7 @@ const selectFile = async () => {
         message:
           "The selected file is not a valid image. Make sure you select a '.png', '.jpg', or '.webp' file.",
       };
+      if (!mainWindow) return null;
       dialog.showMessageBoxSync(mainWindow, options);
       return null;
     }

electron/commands/select-folder.ts

@@ -1,11 +1,11 @@
 import { dialog } from "electron";
-import { getFolderPath, setFolderPath } from "../utils/config-variables";
+import { folderPath, setFolderPath } from "../utils/config-variables";
 import logit from "../utils/logit";
 
 const selectFolder = async (event, message) => {
   const { canceled, filePaths: folderPaths } = await dialog.showOpenDialog({
     properties: ["openDirectory"],
-    defaultPath: getFolderPath(),
+    defaultPath: folderPath,
   });
 
   if (canceled) {
@@ -13,7 +13,7 @@ const selectFolder = async (event, message) => {
     return null;
   } else {
     setFolderPath(folderPaths[0]);
-    logit("📁 Selected Folder Path: ", getFolderPath());
+    logit("📁 Selected Folder Path: ", folderPath);
     return folderPaths[0];
   }
 };

electron/commands/stop.ts

@@ -1,11 +1,13 @@
-import mainWindow from "../main-window";
+import { getMainWindow } from "../main-window";
-import { getChildProcesses, setStop } from "../utils/config-variables";
+import { childProcesses, setStopped } from "../utils/config-variables";
 import logit from "../utils/logit";
 
+const mainWindow = getMainWindow();
+
 const stop = async (event, payload) => {
-  setStop(true);
+  setStopped(true);
   mainWindow && mainWindow.setProgressBar(-1);
-  getChildProcesses().forEach((child) => {
+  childProcesses.forEach((child) => {
     logit("🛑 Stopping Upscaling Process", child.process.pid);
     child.kill();
   });

electron/index.ts

@@ -1,6 +1,15 @@
+import prepareNext from "electron-next";
 import { autoUpdater } from "electron-updater";
 import log from "electron-log";
-import { app, ipcMain, dialog, MessageBoxOptions } from "electron";
+import {
+  app,
+  ipcMain,
+  dialog,
+  MessageBoxOptions,
+  shell,
+  protocol,
+  net,
+} from "electron";
 import COMMAND from "./constants/commands";
 import logit from "./utils/logit";
 import openFolder from "./commands/open-folder";
@@ -10,19 +19,41 @@ import selectFile from "./commands/select-file";
 import getModelsList from "./commands/get-models-list";
 import customModelsSelect from "./commands/custom-models-select";
 import imageUpscayl from "./commands/image-upscayl";
-import { setStop } from "./utils/config-variables";
+import {
+  setCustomModelsFolderPath,
+  setFolderPath,
+  setImagePath,
+  setOutputFolderPath,
+  setQuality,
+  setSaveOutputFolder,
+  setStopped,
+} from "./utils/config-variables";
+import { createMainWindow, getMainWindow } from "./main-window";
+import electronIsDev from "electron-is-dev";
+import { getPlatform } from "./get-device-specs";
+import { join } from "path";
+import { execPath, modelsPath } from "./binaries";
 
 // INITIALIZATION
-setStop(false);
 log.initialize({ preload: true });
+logit("🚃 App Path: ", app.getAppPath());
 
-function escapeRegExp(string) {
+app.whenReady().then(async () => {
-  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $& means the whole matched string
+  await prepareNext("./renderer");
-}
+  createMainWindow();
+  log.info("🚀 UPSCAYL EXEC PATH: ", execPath("realesrgan"));
+  log.info("🚀 MODELS PATH: ", modelsPath);
+  protocol.handle("file:", (request) => {
+    const pathname = decodeURI(request.url);
+    return net.fetch(pathname);
+  });
+  if (!electronIsDev) {
+    autoUpdater.checkForUpdates();
+  }
+});
 
 // Quit the app once all windows are closed
 app.on("window-all-closed", app.quit);
-logit("🚃 App Path: ", app.getAppPath());
 
 //------------------------Open Folder-----------------------------//
 ipcMain.on(COMMAND.OPEN_FOLDER, openFolder);

electron/main-window.ts

@@ -1,63 +1,46 @@
-import prepareNext from "electron-next";
+import { BrowserWindow, shell } from "electron";
-import { BrowserWindow, app, net, protocol, shell } from "electron";
-import COMMAND from "./constants/commands";
 import { getPlatform } from "./get-device-specs";
 import { join } from "path";
-import { execPath, modelsPath } from "./binaries";
-import log from "electron-log";
-import isDev from "electron-is-dev";
-import { autoUpdater } from "electron-updater";
 import {
   setCustomModelsFolderPath,
   setFolderPath,
   setImagePath,
   setOutputFolderPath,
+  setOverwrite,
   setQuality,
   setSaveOutputFolder,
 } from "./utils/config-variables";
+import COMMAND from "./constants/commands";
+import electronIsDev from "electron-is-dev";
 
-// Prepare the renderer once the app is ready
+let mainWindow: BrowserWindow | null;
-let _mainWindow: BrowserWindow | null = null;
 
-const getMainWindow = () => {
+const createMainWindow = () => {
-  if (!_mainWindow) {
+  mainWindow = new BrowserWindow({
-    _mainWindow = new BrowserWindow({
+    icon: join(__dirname, "build", "icon.png"),
-      icon: join(__dirname, "build", "icon.png"),
+    width: 1300,
-      width: 1300,
+    height: 940,
-      height: 940,
+    minHeight: 500,
-      minHeight: 500,
+    minWidth: 500,
-      minWidth: 500,
+    show: false,
-      show: false,
+    backgroundColor: "#171717",
-      backgroundColor: "#171717",
+    webPreferences: {
-      webPreferences: {
+      nodeIntegration: true,
-        nodeIntegration: true,
+      nodeIntegrationInWorker: true,
-        nodeIntegrationInWorker: true,
+      webSecurity: false,
-        webSecurity: false,
+      preload: join(__dirname, "preload.js"),
-        preload: join(__dirname, "preload.js"),
+    },
-      },
+    titleBarStyle: getPlatform() === "mac" ? "hiddenInset" : "default",
-      titleBarStyle: getPlatform() === "mac" ? "hiddenInset" : "default",
+  });
-    });
-  }
 
-  return _mainWindow;
+  mainWindow.setMenuBarVisibility(false);
-};
 
-const mainWindow = getMainWindow();
+  const url = electronIsDev
-
-app.on("ready", async () => {
-  await prepareNext("./renderer");
-
-  log.info("🚀 UPSCAYL EXEC PATH: ", execPath("realesrgan"));
-  log.info("🚀 MODELS PATH: ", modelsPath);
-
-  const url = isDev
     ? "http://localhost:8000"
     : (new URL("file:///").pathname = join(
         __dirname,
         "../renderer/out/index.html"
       )).toString();
-
-  mainWindow.setMenuBarVisibility(false);
   mainWindow.loadURL(url);
 
   mainWindow.webContents.setWindowOpenHandler(({ url }) => {
@@ -68,21 +51,8 @@ app.on("ready", async () => {
   mainWindow.once("ready-to-show", () => {
     if (!mainWindow) return;
     mainWindow.show();
-    mainWindow.webContents.setZoomFactor(1);
   });
 
-  app.whenReady().then(() => {
-    protocol.handle("file", (request) => {
-      const pathname = decodeURI(request.url.replace("file:///", ""));
-      return net.fetch(pathname);
-    });
-  });
-
-  if (!isDev) {
-    autoUpdater.checkForUpdates();
-  }
-
-  // <------------------------Save Last Paths----------------------------->
   // GET LAST IMAGE PATH TO LOCAL STORAGE
   mainWindow.webContents
     .executeJavaScript('localStorage.getItem("lastImagePath");', true)
@@ -138,7 +108,19 @@ app.on("ready", async () => {
         }
       }
     });
+  // GET IMAGE QUALITY (NUMBER) TO LOCAL STORAGE
+  mainWindow.webContents
+    .executeJavaScript('localStorage.getItem("overwrite");', true)
+    .then((lastSavedOverwrite: string | null) => {
+      if (lastSavedOverwrite !== null) {
+        setOverwrite(lastSavedOverwrite === "true");
+      }
+    });
   mainWindow.webContents.send(COMMAND.OS, getPlatform());
-});
+};
 
-export default mainWindow;
+const getMainWindow = () => {
+  return mainWindow;
+};
+
+export { createMainWindow, getMainWindow };

electron/utils/config-variables.ts

@@ -1,89 +1,49 @@
 import { ChildProcessWithoutNullStreams } from "child_process";
 
-let _imagePath: string | undefined = undefined;
+export let imagePath: string | undefined = "";
-let _folderPath: string | undefined = undefined;
+export let folderPath: string | undefined = undefined;
-let _customModelsFolderPath: string | undefined = undefined;
+export let customModelsFolderPath: string | undefined = undefined;
-let _outputFolderPath: string | undefined = undefined;
+export let outputFolderPath: string | undefined = undefined;
-let _saveOutputFolder = false;
+export let saveOutputFolder = false;
-let _quality = 0;
+export let quality = 0;
-let _overwrite = false;
+export let overwrite = false;
-let _stop = false;
+export let stopped = false;
-let childProcesses: {
+export let childProcesses: {
   process: ChildProcessWithoutNullStreams;
   kill: () => boolean;
 }[] = [];
 
-// GETTERS
-export function getImagePath(): string | undefined {
-  return _imagePath;
-}
-
 export function setImagePath(value: string | undefined): void {
-  _imagePath = value;
+  imagePath = value;
-}
-
-export function getFolderPath(): string | undefined {
-  return _folderPath;
 }
 
 export function setFolderPath(value: string | undefined): void {
-  _folderPath = value;
+  folderPath = value;
-}
-
-export function getCustomModelsFolderPath(): string | undefined {
-  return _customModelsFolderPath;
 }
 
 export function setCustomModelsFolderPath(value: string | undefined): void {
-  _customModelsFolderPath = value;
+  customModelsFolderPath = value;
-}
-
-export function getOutputFolderPath(): string | undefined {
-  return _outputFolderPath;
-}
-
-export function getStop(): boolean {
-  return _stop;
-}
-
-export function getChildProcesses(): {
-  process: ChildProcessWithoutNullStreams;
-  kill: () => boolean;
-}[] {
-  return childProcesses;
 }
 
 // SETTERS
 export function setOutputFolderPath(value: string | undefined): void {
-  _outputFolderPath = value;
+  outputFolderPath = value;
-}
-
-export function getSaveOutputFolder(): boolean {
-  return _saveOutputFolder;
 }
 
 export function setSaveOutputFolder(value: boolean): void {
-  _saveOutputFolder = value;
+  saveOutputFolder = value;
-}
-
-export function getQuality(): number {
-  return _quality;
 }
 
 export function setQuality(value: number): void {
-  _quality = value;
+  quality = value;
-}
-
-export function getOverwrite(): boolean {
-  return _overwrite;
 }
 
 export function setOverwrite(value: boolean): void {
-  _overwrite = value;
+  overwrite = value;
 }
 
-export function setStop(value: boolean): void {
+export function setStopped(value: boolean): void {
-  _stop = value;
+  stopped = value;
 }
 
 export function setChildProcesses(value: {

electron/utils/convert-and-scale.ts

@@ -1,7 +1,7 @@
 import sharp from "sharp";
-import mainWindow from "../main-window";
-import { getQuality } from "./config-variables";
 import logit from "./logit";
+import { getMainWindow } from "../main-window";
+import { quality } from "./config-variables";
 
 const convertAndScale = async (
   originalImagePath: string,
@@ -11,6 +11,8 @@ const convertAndScale = async (
   saveImageAs: string,
   onError: (error: any) => void
 ) => {
+  const mainWindow = getMainWindow();
+
   const originalImage = await sharp(originalImagePath).metadata();
   if (!mainWindow || !originalImage) {
     throw new Error("Could not grab the original image!");
@@ -24,10 +26,10 @@ const convertAndScale = async (
     .withMetadata(); // Keep metadata
   // Change the output according to the saveImageAs
   if (saveImageAs === "png") {
-    newImage.png({ quality: 100 - getQuality() });
+    newImage.png({ quality: 100 - quality });
   } else if (saveImageAs === "jpg") {
-    console.log("Quality: ", getQuality());
+    console.log("Quality: ", quality);
-    newImage.jpeg({ quality: 100 - getQuality() });
+    newImage.jpeg({ quality: 100 - quality });
   }
   // Save the image
   const buffer = await newImage.toBuffer();

electron/utils/logit.ts

@@ -1,10 +1,11 @@
-import Logger from "electron-log";
+import log from "electron-log";
-import mainWindow from "../main-window";
 import COMMAND from "../constants/commands";
+import { getMainWindow } from "../main-window";
 
 const logit = (...args: any) => {
-  Logger.log(...args);
+  const mainWindow = getMainWindow();
   if (!mainWindow) return;
+  log.log(...args);
   mainWindow.webContents.send(COMMAND.LOG, args.join(" "));
 };
 

renderer/firebase.ts

@@ -20,7 +20,6 @@ const firebaseConfig = {
 // Initialize Firebase
 const app = initializeApp(firebaseConfig);
 export const db = getFirestore(app);
-console.log("🚀 => file: firebase.ts:23 => db:", db);
 
 const createCollection = <T = DocumentData>(collectionName: string) => {
   return collection(db, collectionName) as CollectionReference<T>;

renderer/pages/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { useState, useEffect, useCallback } from "react";
-import commands from "../../electron/constants/commands";
+import COMMAND from "../../electron/constants/commands";
 import { ReactCompareSlider } from "react-compare-slider";
 import Header from "../components/Header";
 import Footer from "../components/Footer";
@@ -89,7 +89,7 @@ const Home = () => {
     };
 
     window.electron.on(
-      commands.OS,
+      COMMAND.OS,
       (_, data: "linux" | "mac" | "win" | undefined) => {
         if (data) {
           setOs(data);
@@ -98,21 +98,21 @@ const Home = () => {
     );
 
     // LOG
-    window.electron.on(commands.LOG, (_, data: string) => {
+    window.electron.on(COMMAND.LOG, (_, data: string) => {
       logit(`🐞 BACKEND REPORTED: `, data);
     });
 
-    window.electron.on(commands.SCALING_AND_CONVERTING, (_, data: string) => {
+    window.electron.on(COMMAND.SCALING_AND_CONVERTING, (_, data: string) => {
       setProgress("Processing the image...");
     });
 
-    window.electron.on(commands.UPSCAYL_ERROR, (_, data: string) => {
+    window.electron.on(COMMAND.UPSCAYL_ERROR, (_, data: string) => {
       alert(data);
       resetImagePaths();
     });
 
     // UPSCAYL PROGRESS
-    window.electron.on(commands.UPSCAYL_PROGRESS, (_, data: string) => {
+    window.electron.on(COMMAND.UPSCAYL_PROGRESS, (_, data: string) => {
       if (data.length > 0 && data.length < 10) {
         setProgress(data);
       } else if (data.includes("converting")) {
@@ -123,7 +123,7 @@ const Home = () => {
     });
 
     // FOLDER UPSCAYL PROGRESS
-    window.electron.on(commands.FOLDER_UPSCAYL_PROGRESS, (_, data: string) => {
+    window.electron.on(COMMAND.FOLDER_UPSCAYL_PROGRESS, (_, data: string) => {
       if (data.length > 0 && data.length < 10) {
         setProgress(data);
       }
@@ -132,7 +132,7 @@ const Home = () => {
     });
 
     // DOUBLE UPSCAYL PROGRESS
-    window.electron.on(commands.DOUBLE_UPSCAYL_PROGRESS, (_, data: string) => {
+    window.electron.on(COMMAND.DOUBLE_UPSCAYL_PROGRESS, (_, data: string) => {
       if (data.length > 0 && data.length < 10) {
         if (data === "0.00%") {
           setDoubleUpscaylCounter(doubleUpscaylCounter + 1);
@@ -144,7 +144,7 @@ const Home = () => {
     });
 
     // UPSCAYL DONE
-    window.electron.on(commands.UPSCAYL_DONE, (_, data: string) => {
+    window.electron.on(COMMAND.UPSCAYL_DONE, (_, data: string) => {
       setProgress("");
       setTimeout(() => setUpscaledImagePath(data), 500);
       logit("upscaledImagePath: ", data);
@@ -152,14 +152,14 @@ const Home = () => {
     });
 
     // FOLDER UPSCAYL DONE
-    window.electron.on(commands.FOLDER_UPSCAYL_DONE, (_, data: string) => {
+    window.electron.on(COMMAND.FOLDER_UPSCAYL_DONE, (_, data: string) => {
       setProgress("");
       setUpscaledBatchFolderPath(data);
       logit(`💯 FOLDER_UPSCAYL_DONE: `, data);
     });
 
     // DOUBLE UPSCAYL DONE
-    window.electron.on(commands.DOUBLE_UPSCAYL_DONE, (_, data: string) => {
+    window.electron.on(COMMAND.DOUBLE_UPSCAYL_DONE, (_, data: string) => {
       setProgress("");
       setDoubleUpscaylCounter(0);
       setUpscaledImagePath(data);
@@ -167,27 +167,24 @@ const Home = () => {
     });
 
     // CUSTOM FOLDER LISTENER
-    window.electron.on(
+    window.electron.on(COMMAND.CUSTOM_MODEL_FILES_LIST, (_, data: string[]) => {
-      commands.CUSTOM_MODEL_FILES_LIST,
+      logit(`📜 CUSTOM_MODEL_FILES_LIST: `, data);
-      (_, data: string[]) => {
+      const newModelOptions = data.map((model) => {
-        logit(`📜 CUSTOM_MODEL_FILES_LIST: `, data);
+        return {
-        const newModelOptions = data.map((model) => {
+          value: model,
-          return {
+          label: model,
-            value: model,
+        };
-            label: model,
+      });
-          };
-        });
 
-        // Add newModelsList to modelOptions and remove duplicates
+      // Add newModelsList to modelOptions and remove duplicates
-        const combinedModelOptions = [...modelOptions, ...newModelOptions];
+      const combinedModelOptions = [...modelOptions, ...newModelOptions];
-        const uniqueModelOptions = combinedModelOptions.filter(
+      const uniqueModelOptions = combinedModelOptions.filter(
-          // Check if any model in the array appears more than once
+        // Check if any model in the array appears more than once
-          (model, index, array) =>
+        (model, index, array) =>
-            array.findIndex((t) => t.value === model.value) === index
+          array.findIndex((t) => t.value === model.value) === index
-        );
+      );
-        setModelOptions(uniqueModelOptions);
+      setModelOptions(uniqueModelOptions);
-      }
+    });
-    );
     if (!localStorage.getItem("upscaylCloudModalShown")) {
       logit("⚙️ upscayl cloud show to true");
       localStorage.setItem("upscaylCloudModalShown", "true");
@@ -201,7 +198,7 @@ const Home = () => {
     );
 
     if (customModelsPath !== null) {
-      window.electron.send(commands.GET_MODELS_LIST, customModelsPath);
+      window.electron.send(COMMAND.GET_MODELS_LIST, customModelsPath);
       logit("🎯 GET_MODELS_LIST: ", customModelsPath);
     }
   }, []);
@@ -267,7 +264,7 @@ const Home = () => {
   const selectImageHandler = async () => {
     resetImagePaths();
 
-    var path = await window.electron.invoke(commands.SELECT_FILE);
+    var path = await window.electron.invoke(COMMAND.SELECT_FILE);
 
     if (path !== null) {
       logit("🖼 Selected Image Path: ", path);
@@ -281,7 +278,7 @@ const Home = () => {
   const selectFolderHandler = async () => {
     resetImagePaths();
 
-    var path = await window.electron.invoke(commands.SELECT_FOLDER);
+    var path = await window.electron.invoke(COMMAND.SELECT_FOLDER);
 
     if (path !== null) {
       logit("🖼 Selected Folder Path: ", path);
@@ -319,7 +316,7 @@ const Home = () => {
 
   const openFolderHandler = (e) => {
     logit("📂 OPEN_FOLDER: ", upscaledBatchFolderPath);
-    window.electron.send(commands.OPEN_FOLDER, upscaledBatchFolderPath);
+    window.electron.send(COMMAND.OPEN_FOLDER, upscaledBatchFolderPath);
   };
 
   const handleDrop = (e) => {
@@ -380,7 +377,7 @@ const Home = () => {
   };
 
   const outputHandler = async () => {
-    var path = await window.electron.invoke(commands.SELECT_FOLDER);
+    var path = await window.electron.invoke(COMMAND.SELECT_FOLDER);
     if (path !== null) {
       logit("🗂 Setting Output Path: ", path);
       setOutputPath(path);
@@ -405,7 +402,7 @@ const Home = () => {
       setProgress("Hold on...");
 
       if (doubleUpscayl) {
-        window.electron.send(commands.DOUBLE_UPSCAYL, {
+        window.electron.send(COMMAND.DOUBLE_UPSCAYL, {
           imagePath,
           outputPath,
           model,
@@ -416,7 +413,7 @@ const Home = () => {
         logit("🏁 DOUBLE_UPSCAYL");
       } else if (batchMode) {
         setDoubleUpscayl(false);
-        window.electron.send(commands.FOLDER_UPSCAYL, {
+        window.electron.send(COMMAND.FOLDER_UPSCAYL, {
           scaleFactor,
           batchFolderPath,
           outputPath,
@@ -427,7 +424,7 @@ const Home = () => {
         });
         logit("🏁 FOLDER_UPSCAYL");
       } else {
-        window.electron.send(commands.UPSCAYL, {
+        window.electron.send(COMMAND.UPSCAYL, {
           scaleFactor,
           imagePath,
           outputPath,
@@ -457,7 +454,7 @@ const Home = () => {
   };
 
   const stopHandler = () => {
-    window.electron.send(commands.STOP);
+    window.electron.send(COMMAND.STOP);
     logit("🛑 Stopping Upscayl");
     resetImagePaths();
   };
@@ -588,10 +585,7 @@ const Home = () => {
                 hideZoomOptions={true}
               />
               <img
-                src={
+                src={`file:///${imagePath}`}
-                  "file://" +
-                  `${upscaledImagePath ? upscaledImagePath : imagePath}`
-                }
                 onLoad={(e: any) => {
                   setDimensions({
                     width: e.target.naturalWidth,