Update version to 2.9.6, add overwriteAtom, and fix ImageFormatSelect button

electron/commands/batch-upscayl.ts

@@ -20,6 +20,7 @@ import COMMAND from "../constants/commands";
 import convertAndScale from "../utils/convert-and-scale";
 import DEFAULT_MODELS from "../constants/models";
 import { BatchUpscaylPayload } from "../../common/types/types";
+import { ImageFormat } from "../utils/types";
 
 const batchUpscayl = async (event, payload: BatchUpscaylPayload) => {
   const mainWindow = getMainWindow();
@@ -27,7 +28,7 @@ const batchUpscayl = async (event, payload: BatchUpscaylPayload) => {
   // GET THE MODEL
   const model = payload.model;
   const gpuId = payload.gpuId;
-  const saveImageAs = payload.saveImageAs;
+  const saveImageAs = payload.saveImageAs as ImageFormat;
 
   // GET THE IMAGE DIRECTORY
   let inputDir = payload.batchFolderPath;

electron/commands/double-upscayl.ts

@@ -23,6 +23,7 @@ import logit from "../utils/logit";
 import COMMAND from "../constants/commands";
 import convertAndScale from "../utils/convert-and-scale";
 import { DoubleUpscaylPayload } from "../../common/types/types";
+import { ImageFormat } from "../utils/types";
 
 const doubleUpscayl = async (event, payload: DoubleUpscaylPayload) => {
   const mainWindow = getMainWindow();
@@ -37,7 +38,7 @@ const doubleUpscayl = async (event, payload: DoubleUpscaylPayload) => {
     outputDir = outputFolderPath;
   }
   const gpuId = payload.gpuId as string;
-  const saveImageAs = payload.saveImageAs as string;
+  const saveImageAs = payload.saveImageAs as ImageFormat;
 
   setNoImageProcessing(payload.noImageProcessing);
   setCompression(parseInt(payload.compression));

electron/commands/image-upscayl.ts

@@ -7,12 +7,10 @@ import {
   folderPath,
   noImageProcessing,
   outputFolderPath,
-  overwrite,
   saveOutputFolder,
   setChildProcesses,
   setCompression,
   setNoImageProcessing,
-  setOverwrite,
   setStopped,
   stopped,
 } from "../utils/config-variables";
@@ -25,6 +23,7 @@ import { parse } from "path";
 import DEFAULT_MODELS from "../constants/models";
 import { getMainWindow } from "../main-window";
 import { ImageUpscaylPayload } from "../../common/types/types";
+import { ImageFormat } from "../utils/types";
 
 const imageUpscayl = async (event, payload: ImageUpscaylPayload) => {
   const mainWindow = getMainWindow();
@@ -34,13 +33,13 @@ const imageUpscayl = async (event, payload: ImageUpscaylPayload) => {
     return;
   }
 
-  setOverwrite(payload.overwrite);
   setNoImageProcessing(payload.noImageProcessing);
   setCompression(parseInt(payload.compression));
 
   const model = payload.model as string;
   const gpuId = payload.gpuId as string;
-  const saveImageAs = payload.saveImageAs as string;
+  const saveImageAs = payload.saveImageAs as ImageFormat;
+  const overwrite = payload.overwrite as boolean;
 
   let inputDir = (payload.imagePath.match(/(.*)[\/\\]/)?.[1] || "") as string;
   let outputDir: string | undefined =

electron/utils/config-variables.ts

@@ -8,7 +8,6 @@ export let customModelsFolderPath: string | undefined = undefined;
 export let outputFolderPath: string | undefined = undefined;
 export let saveOutputFolder = false;
 export let compression = 0;
-export let overwrite = false;
 export let stopped = false;
 export let childProcesses: {
   process: ChildProcessWithoutNullStreams;
@@ -47,11 +46,6 @@ export function setCompression(value: number): void {
   logit("📐 Updating Compression: ", compression);
 }
 
-export function setOverwrite(value: boolean): void {
-  overwrite = value;
-  logit("📝 Updating Overwrite: ", overwrite);
-}
-
 export function setStopped(value: boolean): void {
   stopped = value;
   logit("🛑 Updating Stopped: ", stopped);
@@ -132,14 +126,6 @@ export function fetchLocalStorage(): void {
         setCompression(parseInt(lastSavedCompression));
       }
     });
-  // GET OVERWRITE (BOOLEAN) FROM LOCAL STORAGE
-  mainWindow.webContents
-    .executeJavaScript('localStorage.getItem("overwrite");', true)
-    .then((lastSavedOverwrite: string | null) => {
-      if (lastSavedOverwrite !== null) {
-        setOverwrite(lastSavedOverwrite === "true");
-      }
-    });
   // GET PROCESS IMAGE (BOOLEAN) FROM LOCAL STORAGE
   mainWindow.webContents
     .executeJavaScript('localStorage.getItem("noImageProcessing");', true)

electron/utils/convert-and-scale.ts

@@ -3,13 +3,14 @@ import sharp, { FormatEnum, Metadata } from "sharp";
 import logit from "./logit";
 import { getMainWindow } from "../main-window";
 import { compression } from "./config-variables";
+import { ImageFormat } from "./types";
 
 const convertAndScale = async (
   originalImagePath: string,
   upscaledImagePath: string,
   processedImagePath: string,
   scale: string,
-  saveImageAs: string,
+  saveImageAs: ImageFormat,
   onError: (error: any) => void
 ) => {
   if (saveImageAs === "png" && scale === "4" && compression === 0) {

electron/utils/types.d.ts

@@ -0,0 +1 @@
+export type ImageFormat = "png" | "jpg" | "webp";

package.json

@@ -1,7 +1,7 @@
 {
   "name": "upscayl",
   "private": true,
-  "version": "2.9.5",
+  "version": "2.9.6",
   "productName": "Upscayl",
   "author": {
     "name": "Nayam Amarshe",

renderer/atoms/userSettingsAtom.ts

@@ -26,3 +26,5 @@ export const noImageProcessingAtom = atomWithStorage<boolean>(
 );
 
 export const compressionAtom = atomWithStorage<number>("compression", 0);
+
+export const overwriteAtom = atomWithStorage("overwrite", false);

renderer/components/settings-tab/ImageFormatSelect.tsx

@@ -51,14 +51,12 @@ export function ImageFormatSelect({
             disabled={noImageProcessing}>
             JPG
           </button>
-          {/* WEBP
+          {/* WEBP */}
           <button
-            className={`btn ${
-              saveImageAs === "webp" && "btn-primary"
-            }`}
+            className={`btn ${saveImageAs === "webp" && "btn-primary"}`}
             onClick={() => setExportType("webp")}>
             WEBP
-          </button> */}
+          </button>
         </div>
       </div>
     </div>

renderer/components/settings-tab/OverwriteToggle.tsx

@@ -1,21 +1,9 @@
+import { overwriteAtom } from "@/atoms/userSettingsAtom";
+import { useAtom } from "jotai";
 import React, { useEffect } from "react";
 
-type OverwriteToggleProps = {
-  overwrite: boolean;
-  setOverwrite: (arg: any) => void;
-};
-
-const OverwriteToggle = ({ overwrite, setOverwrite }: OverwriteToggleProps) => {
-  useEffect(() => {
-    if (!localStorage.getItem("overwrite")) {
-      localStorage.setItem("overwrite", JSON.stringify(overwrite));
-    } else {
-      const currentlySavedOverwrite = localStorage.getItem("overwrite");
-      if (currentlySavedOverwrite) {
-        setOverwrite(currentlySavedOverwrite === "true");
-      }
-    }
-  }, []);
+const OverwriteToggle = () => {
+  const [overwrite, setOverwrite] = useAtom(overwriteAtom);
 
   return (
     <div className="flex flex-col gap-2">

renderer/components/settings-tab/index.tsx

@@ -12,6 +12,7 @@ import { useAtom, useAtomValue } from "jotai";
 import {
   customModelsPathAtom,
   noImageProcessingAtom,
+  overwriteAtom,
   scaleAtom,
 } from "../../atoms/userSettingsAtom";
 import { modelsListAtom } from "../../atoms/modelsListAtom";
@@ -33,8 +34,6 @@ interface IProps {
   gpuId: string;
   setGpuId: React.Dispatch<React.SetStateAction<string>>;
   logData: string[];
-  overwrite: boolean;
-  setOverwrite: (arg: any) => void;
   os: "linux" | "mac" | "win" | undefined;
   show: boolean;
   setShow: React.Dispatch<React.SetStateAction<boolean>>;
@@ -51,8 +50,6 @@ function SettingsTab({
   saveImageAs,
   setSaveImageAs,
   logData,
-  overwrite,
-  setOverwrite,
   os,
   show,
   setShow,
@@ -219,7 +216,7 @@ function SettingsTab({
         setRememberOutputFolder={setRememberOutputFolder}
       />
 
-      <OverwriteToggle overwrite={overwrite} setOverwrite={setOverwrite} />
+      <OverwriteToggle />
 
       {/* GPU ID INPUT */}
       <GpuIdInput gpuId={gpuId} handleGpuIdChange={handleGpuIdChange} />

renderer/pages/index.tsx

@@ -19,6 +19,7 @@ import {
   dontShowCloudModalAtom,
   noImageProcessingAtom,
   outputPathAtom,
+  overwriteAtom,
   progressAtom,
   scaleAtom,
 } from "../atoms/userSettingsAtom";
@@ -45,7 +46,7 @@ const Home = () => {
   const [version, setVersion] = useState("");
   const [batchFolderPath, setBatchFolderPath] = useState("");
   const [doubleUpscayl, setDoubleUpscayl] = useState(false);
-  const [overwrite, setOverwrite] = useState(false);
+  const overwrite = useAtomValue(overwriteAtom);
   const [upscaledBatchFolderPath, setUpscaledBatchFolderPath] = useState("");
   const [doubleUpscaylCounter, setDoubleUpscaylCounter] = useState(0);
   const [gpuId, setGpuId] = useState("");
@@ -262,15 +263,6 @@ const Home = () => {
   useEffect(() => {
     const rememberOutputFolder = localStorage.getItem("rememberOutputFolder");
     const lastOutputFolderPath = localStorage.getItem("lastOutputFolderPath");
-    // GET OVERWRITE
-    if (!localStorage.getItem("overwrite")) {
-      localStorage.setItem("overwrite", JSON.stringify(overwrite));
-    } else {
-      const currentlySavedOverwrite = localStorage.getItem("overwrite");
-      if (currentlySavedOverwrite) {
-        setOverwrite(currentlySavedOverwrite === "true");
-      }
-    }
     if (rememberOutputFolder === "true") {
       logit("🧠 Recalling Output Folder: ", lastOutputFolderPath);
       setOutputPath(lastOutputFolderPath);
@@ -584,8 +576,6 @@ const Home = () => {
             saveImageAs={saveImageAs}
             setSaveImageAs={setSaveImageAs}
             logData={logData}
-            overwrite={overwrite}
-            setOverwrite={setOverwrite}
             os={os}
             show={showCloudModal}
             setShow={setShowCloudModal}