Update compression

electron/main-window.ts

@@ -9,7 +9,7 @@ import {
   setImagePath,
   setOutputFolderPath,
   setOverwrite,
-  setQuality,
+  setCompression,
   setSaveOutputFolder,
 } from "./utils/config-variables";
 import electronIsDev from "electron-is-dev";
@@ -104,9 +104,9 @@ const createMainWindow = () => {
     .then((lastSavedQuality: string | null) => {
       if (lastSavedQuality !== null) {
         if (parseInt(lastSavedQuality) === 100) {
-          setQuality(99);
+          setCompression(99);
         } else {
-          setQuality(parseInt(lastSavedQuality));
+          setCompression(parseInt(lastSavedQuality));
         }
       }
     });

electron/utils/config-variables.ts

@@ -5,7 +5,7 @@ export let folderPath: string | undefined = undefined;
 export let customModelsFolderPath: string | undefined = undefined;
 export let outputFolderPath: string | undefined = undefined;
 export let saveOutputFolder = false;
-export let quality = 0;
+export let compression = 0;
 export let overwrite = false;
 export let stopped = false;
 export let childProcesses: {
@@ -34,8 +34,8 @@ export function setSaveOutputFolder(value: boolean): void {
   saveOutputFolder = value;
 }
 
-export function setQuality(value: number): void {
-  quality = value;
+export function setCompression(value: number): void {
+  compression = value;
 }
 
 export function setOverwrite(value: boolean): void {

electron/utils/convert-and-scale.ts

@@ -1,7 +1,7 @@
 import sharp from "sharp";
 import logit from "./logit";
 import { getMainWindow } from "../main-window";
-import { quality } from "./config-variables";
+import { compression } from "./config-variables";
 
 const convertAndScale = async (
   originalImagePath: string,
@@ -26,10 +26,10 @@ const convertAndScale = async (
     .withMetadata(); // Keep metadata
   // Change the output according to the saveImageAs
   if (saveImageAs === "png") {
-    newImage.png({ quality: 100 - quality });
+    newImage.png({ quality: 100 - compression });
   } else if (saveImageAs === "jpg") {
-    console.log("Quality: ", quality);
-    newImage.jpeg({ quality: 100 - quality });
+    console.log("Quality: ", compression);
+    newImage.jpeg({ quality: 100 - compression });
   }
   // Save the image
   const buffer = await newImage.toBuffer();

package.json

@@ -46,6 +46,10 @@
     "dist:dmg": "tsc && npm run build && cross-env DEBUG=* electron-builder build -m dmg",
     "dist:msi": "tsc && npm run build && cross-env DEBUG=* electron-builder build -w nsis",
     "dist:pkg": "tsc && npm run build && cross-env DEBUG=* electron-builder build -m pkg",
+    "dist:mac": "tsc && npm run build && electron-builder --mac --universal",
+    "dist:mac-arm64": "tsc && npm run build && electron-builder --mac --arm64",
+    "dist:win": "tsc && npm run build && electron-builder --win",
+    "dist:linux": "tsc && npm run build && electron-builder --linux",
     "publish-app": "tsc && npm run build && electron-builder -wl --publish always",
     "publish-linux-app": "tsc && npm run build && electron-builder -l --publish always",
     "publish-win-app": "tsc && npm run build && electron-builder -w --publish always",

renderer/components/settings-tab/QualityInput.tsx

@@ -1,18 +1,18 @@
 import React, { useEffect, useState } from "react";
 
 type QualityInputProps = {
-  quality: number;
+  compression: number;
   handleQualityChange: (arg: any) => void;
 };
 
 export function QualityInput({
-  quality,
+  compression,
   handleQualityChange,
 }: QualityInputProps) {
   return (
     <div className="flex flex-col gap-2">
       <div className="flex gap-1 text-sm font-medium uppercase">
-        <p className="shrink-0">Image Compression ({quality}%)</p>
+        <p className="shrink-0">Image Compression ({compression}%)</p>
         <p className="badge-primary badge text-[10px] font-medium">
           EXPERIMENTAL
         </p>
@@ -23,7 +23,7 @@ export function QualityInput({
         className="range range-primary w-full max-w-xs"
         min={0}
         max={100}
-        value={quality}
+        value={compression}
         onChange={handleQualityChange}
       />
     </div>

renderer/components/settings-tab/index.tsx

@@ -22,8 +22,8 @@ interface IProps {
   setModel: React.Dispatch<React.SetStateAction<string>>;
   saveImageAs: string;
   setSaveImageAs: React.Dispatch<React.SetStateAction<string>>;
-  quality: number;
-  setQuality: React.Dispatch<React.SetStateAction<number>>;
+  compression: number;
+  setCompression: React.Dispatch<React.SetStateAction<number>>;
   gpuId: string;
   setGpuId: React.Dispatch<React.SetStateAction<string>>;
   logData: string[];
@@ -38,8 +38,8 @@ interface IProps {
 function SettingsTab({
   batchMode,
   setModel,
-  quality,
-  setQuality,
+  compression,
+  setCompression,
   gpuId,
   setGpuId,
   saveImageAs,
@@ -78,7 +78,7 @@ function SettingsTab({
     } else {
       const currentlySavedImageFormat = localStorage.getItem("saveImageAs");
       logit(
-        "⚙️ Getting saveImageAs from localStorage",
+        "⚙️ Getting saveImageAs from localStorage: ",
         currentlySavedImageFormat
       );
       setSaveImageAs(currentlySavedImageFormat);
@@ -96,7 +96,7 @@ function SettingsTab({
       setCurrentModel(currentlySavedModel);
       setModel(currentlySavedModel.value);
       logit(
-        "⚙️ Getting model from localStorage",
+        "⚙️ Getting model from localStorage: ",
         JSON.stringify(currentlySavedModel)
       );
     }
@@ -107,7 +107,7 @@ function SettingsTab({
     } else {
       const currentlySavedGpuId = localStorage.getItem("gpuId");
       setGpuId(currentlySavedGpuId);
-      logit("⚙️ Getting gpuId from localStorage", currentlySavedGpuId);
+      logit("⚙️ Getting gpuId from localStorage: ", currentlySavedGpuId);
     }
 
     if (!localStorage.getItem("rememberOutputFolder")) {
@@ -118,24 +118,22 @@ function SettingsTab({
         "rememberOutputFolder"
       );
       logit(
-        "⚙️ Getting rememberOutputFolder from localStorage",
+        "⚙️ Getting rememberOutputFolder from localStorage: ",
         currentlySavedRememberOutputFolder
       );
       setRememberOutputFolder(
         currentlySavedRememberOutputFolder === "true" ? true : false
       );
     }
-  }, []);
 
-  useEffect(() => {
     if (!localStorage.getItem("quality")) {
       logit("⚙️ Setting quality to 100%");
-      localStorage.setItem("quality", JSON.stringify(quality));
+      localStorage.setItem("quality", JSON.stringify(compression));
     } else {
       const currentlySavedQuality = localStorage.getItem("quality");
-      logit("⚙️ Getting quality from localStorage", quality);
+      logit("⚙️ Getting quality from localStorage", compression);
       if (currentlySavedQuality) {
-        setQuality(JSON.parse(currentlySavedQuality));
+        setCompression(JSON.parse(currentlySavedQuality));
       }
     }
   }, []);
@@ -147,7 +145,7 @@ function SettingsTab({
   };
 
   const handleQualityChange = (e) => {
-    setQuality(e.target.value);
+    setCompression(e.target.value);
     localStorage.setItem("quality", e.target.value);
   };
 
@@ -197,7 +195,7 @@ function SettingsTab({
       <ImageScaleSelect scale={scale} setScale={setScale} />
 
       <QualityInput
-        quality={quality}
+        compression={compression}
         handleQualityChange={handleQualityChange}
       />
 

renderer/components/upscayl-tab/config/LeftPaneImageSteps.tsx

@@ -69,7 +69,7 @@ function LeftPaneImageSteps({
     } else {
       const currentlySavedImageFormat = localStorage.getItem("saveImageAs");
       logit(
-        "⚙️ Getting saveImageAs from localStorage",
+        "⚙️ Getting saveImageAs from localStorage: ",
         currentlySavedImageFormat
       );
       setSaveImageAs(currentlySavedImageFormat);
@@ -87,7 +87,7 @@ function LeftPaneImageSteps({
       setCurrentModel(currentlySavedModel);
       setModel(currentlySavedModel.value);
       logit(
-        "⚙️ Getting model from localStorage",
+        "⚙️ Getting model from localStorage: ",
         JSON.stringify(currentlySavedModel)
       );
     }
@@ -98,7 +98,7 @@ function LeftPaneImageSteps({
     } else {
       const currentlySavedGpuId = localStorage.getItem("gpuId");
       setGpuId(currentlySavedGpuId);
-      logit("⚙️ Getting gpuId from localStorage", currentlySavedGpuId);
+      logit("⚙️ Getting gpuId from localStorage: ", currentlySavedGpuId);
     }
   }, []);
 

renderer/pages/index.tsx

@@ -38,7 +38,7 @@ const Home = () => {
   const [doubleUpscayl, setDoubleUpscayl] = useState(false);
   const [overwrite, setOverwrite] = useState(false);
   const [doubleUpscaylCounter, setDoubleUpscaylCounter] = useState(0);
-  const [quality, setQuality] = useState(0);
+  const [compression, setCompression] = useState(0);
   const [gpuId, setGpuId] = useState("");
   const [saveImageAs, setSaveImageAs] = useState("png");
   const [zoomAmount, setZoomAmount] = useState("100%");
@@ -531,8 +531,8 @@ const Home = () => {
           <SettingsTab
             batchMode={batchMode}
             setModel={setModel}
-            quality={quality}
-            setQuality={setQuality}
+            compression={compression}
+            setCompression={setCompression}
             gpuId={gpuId}
             setGpuId={setGpuId}
             saveImageAs={saveImageAs}