Update functions

common/types/types.d.ts

@@ -0,0 +1,30 @@
+export type ImageUpscaylPayload = {
+  imagePath: string;
+  outputPath?: string;
+  scale: string;
+  model: string;
+  gpuId: string;
+  saveImageAs: string;
+  overwrite: boolean;
+  noImageProcessing: boolean;
+};
+
+export type DoubleUpscaylPayload = {
+  model: string;
+  imagePath: string;
+  outputPath: string;
+  scale: string;
+  gpuId: string;
+  saveImageAs: string;
+  noImageProcessing: boolean;
+};
+
+export type BatchUpscaylPayload = {
+  batchFolderPath: string;
+  outputPath: string;
+  model: string;
+  gpuId: string;
+  saveImageAs: string;
+  scale: string;
+  noImageProcessing: boolean;
+};

electron/commands/batch-upscayl.ts

@@ -6,6 +6,7 @@ import {
   noImageProcessing,
   outputFolderPath,
   saveOutputFolder,
+  setNoImageProcessing,
   setStopped,
   stopped,
 } from "../utils/config-variables";
@@ -17,8 +18,9 @@ import { modelsPath } from "../utils/get-resource-paths";
 import COMMAND from "../constants/commands";
 import convertAndScale from "../utils/convert-and-scale";
 import DEFAULT_MODELS from "../constants/models";
+import { BatchUpscaylPayload } from "../../common/types/types";
 
-const batchUpscayl = async (event, payload) => {
+const batchUpscayl = async (event, payload: BatchUpscaylPayload) => {
   const mainWindow = getMainWindow();
   if (!mainWindow) return;
   // GET THE MODEL
@@ -36,6 +38,8 @@ const batchUpscayl = async (event, payload) => {
     outputDir = outputFolderPath;
   }
 
+  setNoImageProcessing(payload.noImageProcessing);
+
   const isDefaultModel = DEFAULT_MODELS.includes(model);
 
   let scale = "4";

electron/commands/double-upscayl.ts

@@ -6,6 +6,7 @@ import {
   noImageProcessing,
   outputFolderPath,
   saveOutputFolder,
+  setNoImageProcessing,
   setStopped,
   stopped,
 } from "../utils/config-variables";
@@ -20,8 +21,9 @@ import { modelsPath } from "../utils/get-resource-paths";
 import logit from "../utils/logit";
 import COMMAND from "../constants/commands";
 import convertAndScale from "../utils/convert-and-scale";
+import { DoubleUpscaylPayload } from "../../common/types/types";
 
-const doubleUpscayl = async (event, payload) => {
+const doubleUpscayl = async (event, payload: DoubleUpscaylPayload) => {
   const mainWindow = getMainWindow();
   if (!mainWindow) return;
 
@@ -36,6 +38,8 @@ const doubleUpscayl = async (event, payload) => {
   const gpuId = payload.gpuId as string;
   const saveImageAs = payload.saveImageAs as string;
 
+  setNoImageProcessing(payload.noImageProcessing);
+
   const isDefaultModel = DEFAULT_MODELS.includes(model);
 
   // COPY IMAGE TO TMP FOLDER

electron/commands/image-upscayl.ts

@@ -10,6 +10,7 @@ import {
   overwrite,
   saveOutputFolder,
   setChildProcesses,
+  setNoImageProcessing,
   setOverwrite,
   setStopped,
   stopped,
@@ -22,8 +23,9 @@ import { spawnUpscayl } from "../utils/spawn-upscayl";
 import { parse } from "path";
 import DEFAULT_MODELS from "../constants/models";
 import { getMainWindow } from "../main-window";
+import { ImageUpscaylPayload } from "../../common/types/types";
 
-const imageUpscayl = async (event, payload) => {
+const imageUpscayl = async (event, payload: ImageUpscaylPayload) => {
   const mainWindow = getMainWindow();
 
   if (!mainWindow) {
@@ -32,12 +34,13 @@ const imageUpscayl = async (event, payload) => {
   }
 
   setOverwrite(payload.overwrite);
+  setNoImageProcessing(payload.noImageProcessing);
 
   const model = payload.model as string;
   const gpuId = payload.gpuId as string;
   const saveImageAs = payload.saveImageAs as string;
 
-  let inputDir = (payload.imagePath.match(/(.*)[\/\\]/)[1] || "") as string;
+  let inputDir = (payload.imagePath.match(/(.*)[\/\\]/)?.[1] || "") as string;
   let outputDir: string | undefined =
     folderPath || (payload.outputPath as string);
 

renderer/components/settings-tab/LogArea.tsx

@@ -13,13 +13,13 @@ export function LogArea({
 }: LogAreaProps) {
   return (
     <div className="relative flex flex-col gap-2">
-      <button
-        className="btn-primary btn-xs btn absolute right-2 top-10 z-10"
-        onClick={copyOnClickHandler}>
-        {isCopied ? <span>Copied 📋</span> : <span>Copy 📋</span>}
-      </button>
-      <p className="text-sm font-medium">LOGS</p>
-      <code className="rounded-btn relative flex h-52 max-h-52 flex-col gap-3 overflow-y-auto break-all bg-base-200 p-4 text-xs">
+      <div className="flex items-center gap-2">
+        <p className="text-sm font-medium">LOGS</p>
+        <button className="btn-primary btn-xs btn" onClick={copyOnClickHandler}>
+          {isCopied ? <span>Copied ✅</span> : <span>Copy Logs 📋</span>}
+        </button>
+      </div>
+      <code className="rounded-btn rounded-r-none relative flex h-52 max-h-52 flex-col gap-3 overflow-y-auto break-all bg-base-200 p-4 text-xs">
         {logData.length === 0 && (
           <p className="text-base-content/70">No logs to show</p>
         )}

renderer/components/settings-tab/ProcessImageToggle.tsx

@@ -12,16 +12,15 @@ const ProcessImageToggle = ({
       <p className="text-sm font-medium">DON'T POST-PROCESS IMAGE</p>
       <p className="text-xs text-base-content/80">
         If enabled, the image will not be converted or scaled or post-processed.
-        This will output the original AI upscaling result as-is (Restart
-        Required)
+        This will output the original AI upscaling result as-is. Use this if
+        you're having issues with file-size or color banding.
       </p>
       <input
         type="checkbox"
         className="toggle"
         checked={noImageProcessing}
         onClick={() => {
           setNoImageProcessing(!noImageProcessing);
-          alert("Please restart Upscayl for the changes to take effect.");
         }}
       />
     </div>

renderer/pages/index.tsx

@@ -10,36 +10,37 @@ import ImageOptions from "../components/upscayl-tab/view/ImageOptions";
 import LeftPaneImageSteps from "../components/upscayl-tab/config/LeftPaneImageSteps";
 import Tabs from "../components/Tabs";
 import SettingsTab from "../components/settings-tab";
-import { useAtom } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import { logAtom } from "../atoms/logAtom";
 import { modelsListAtom } from "../atoms/modelsListAtom";
 import {
   batchModeAtom,
   dontShowCloudModalAtom,
+  noImageProcessingAtom,
   outputPathAtom,
   progressAtom,
   scaleAtom,
 } from "../atoms/userSettingsAtom";
 import useLog from "../components/hooks/useLog";
 import { UpscaylCloudModal } from "../components/UpscaylCloudModal";
 import { featureFlags } from "@common/feature-flags";
+import {
+  BatchUpscaylPayload,
+  DoubleUpscaylPayload,
+  ImageUpscaylPayload,
+} from "@common/types/types";
 
 const Home = () => {
-  // STATES
+  // LOCAL STATES
   const [os, setOs] = useState<"linux" | "mac" | "win" | undefined>(undefined);
   const [imagePath, SetImagePath] = useState("");
   const [upscaledImagePath, setUpscaledImagePath] = useState("");
-  const [outputPath, setOutputPath] = useAtom(outputPathAtom);
-  const [scaleFactor] = useState(4);
-  const [progress, setProgress] = useAtom(progressAtom);
   const [model, setModel] = useState("realesrgan-x4plus");
-  const [loaded, setLoaded] = useState(false);
   const [version, setVersion] = useState("");
-  const [batchMode, setBatchMode] = useAtom(batchModeAtom);
   const [batchFolderPath, setBatchFolderPath] = useState("");
-  const [upscaledBatchFolderPath, setUpscaledBatchFolderPath] = useState("");
   const [doubleUpscayl, setDoubleUpscayl] = useState(false);
   const [overwrite, setOverwrite] = useState(false);
+  const [upscaledBatchFolderPath, setUpscaledBatchFolderPath] = useState("");
   const [doubleUpscaylCounter, setDoubleUpscaylCounter] = useState(0);
   const [compression, setCompression] = useState(0);
   const [gpuId, setGpuId] = useState("");
@@ -51,22 +52,25 @@ const Home = () => {
     height: null,
   });
   const [selectedTab, setSelectedTab] = useState(0);
+  const [isLoading, setIsLoading] = useState(true);
+  const [showCloudModal, setShowCloudModal] = useState(false);
+
+  // ATOMIC STATES
+  const [outputPath, setOutputPath] = useAtom(outputPathAtom);
+  const [progress, setProgress] = useAtom(progressAtom);
+  const [batchMode, setBatchMode] = useAtom(batchModeAtom);
   const [logData, setLogData] = useAtom(logAtom);
   const [modelOptions, setModelOptions] = useAtom(modelsListAtom);
   const [scale] = useAtom(scaleAtom);
   const [dontShowCloudModal, setDontShowCloudModal] = useAtom(
     dontShowCloudModalAtom
   );
-  const [isLoading, setIsLoading] = useState(true);
-
-  const [showCloudModal, setShowCloudModal] = useState(false);
+  const noImageProcessing = useAtomValue(noImageProcessingAtom);
 
   const { logit } = useLog();
 
   // EFFECTS
   useEffect(() => {
-    setLoaded(true);
-
     setVersion(navigator?.userAgent?.match(/Upscayl\/([\d\.]+\d+)/)[1]);
 
     const handleErrors = (data: string) => {
@@ -434,54 +438,46 @@ const Home = () => {
 
     if (imagePath !== "" || batchFolderPath !== "") {
       setProgress("Hold on...");
-
+      // Double Upscayl
       if (doubleUpscayl) {
-        window.electron.send(COMMAND.DOUBLE_UPSCAYL, {
+        window.electron.send<DoubleUpscaylPayload>(COMMAND.DOUBLE_UPSCAYL, {
           imagePath,
           outputPath,
           model,
           gpuId: gpuId.length === 0 ? null : gpuId,
           saveImageAs,
           scale,
+          noImageProcessing,
         });
         logit("🏁 DOUBLE_UPSCAYL");
       } else if (batchMode) {
+        // Batch Upscayl
         setDoubleUpscayl(false);
-        window.electron.send(COMMAND.FOLDER_UPSCAYL, {
-          scaleFactor,
+        window.electron.send<BatchUpscaylPayload>(COMMAND.FOLDER_UPSCAYL, {
           batchFolderPath,
           outputPath,
           model,
           gpuId: gpuId.length === 0 ? null : gpuId,
           saveImageAs,
           scale,
+          noImageProcessing,
         });
         logit("🏁 FOLDER_UPSCAYL");
       } else {
-        window.electron.send(COMMAND.UPSCAYL, {
-          scaleFactor,
+        // Single Image Upscayl
+        window.electron.send<ImageUpscaylPayload>(COMMAND.UPSCAYL, {
           imagePath,
           outputPath,
           model,
           gpuId: gpuId.length === 0 ? null : gpuId,
           saveImageAs,
           scale,
           overwrite,
+          noImageProcessing,
         });
         logit("🏁 UPSCAYL");
       }
-    }
-    // else if (isVideo && videoPath !== "") {
-    // window.electron.send(commands.UPSCAYL_VIDEO, {
-    //   scaleFactor,
-    //   videoPath,
-    //   outputPath,
-    //   model,
-    //   gpuId: gpuId.length === 0 ? null : gpuId,
-    //   saveImageAs,
-    // });
-    // }
-    else {
+    } else {
       alert(`Please select an image to upscale`);
       logit("🚫 No valid image selected");
     }

renderer/renderer.d.ts

@@ -2,7 +2,7 @@ import { IpcRenderer } from "electron";
 
 export interface IElectronAPI {
   on: (command, func?) => IpcRenderer;
-  send: (command, func?) => IpcRenderer;
+  send: <T>(command, func?: T) => IpcRenderer;
   invoke: (command, func?) => any;
   platform: "mac" | "win" | "linux";
 }