Add tilesize and add compression in arguments

common/types/types.d.ts

@@ -12,6 +12,7 @@ export type ImageUpscaylPayload = {
   noImageProcessing: boolean;
   customWidth: string;
   useCustomWidth: boolean;
+  tileSize: number;
 };
 
 export type DoubleUpscaylPayload = {
@@ -28,6 +29,7 @@ export type DoubleUpscaylPayload = {
   noImageProcessing: boolean;
   customWidth: string;
   useCustomWidth: boolean;
+  tileSize: number;
 };
 
 export type BatchUpscaylPayload = {
@@ -41,4 +43,5 @@ export type BatchUpscaylPayload = {
   noImageProcessing: boolean;
   customWidth: string;
   useCustomWidth: boolean;
+  tileSize: number;
 };

electron/commands/batch-upscayl.ts

@@ -20,6 +20,8 @@ const batchUpscayl = async (event, payload: BatchUpscaylPayload) => {
   const mainWindow = getMainWindow();
   if (!mainWindow) return;
 
+  const tileSize = payload.tileSize;
+  const compression = payload.compression;
   const scale = payload.scale;
   const useCustomWidth = payload.useCustomWidth;
   const customWidth = useCustomWidth ? payload.customWidth : "";
@@ -54,6 +56,8 @@ const batchUpscayl = async (event, payload: BatchUpscaylPayload) => {
       saveImageAs,
       scale,
       customWidth,
+      compression,
+      tileSize,
     }),
     logit,
   );

electron/commands/double-upscayl.ts

@@ -27,6 +27,7 @@ const doubleUpscayl = async (event, payload: DoubleUpscaylPayload) => {
   const mainWindow = getMainWindow();
   if (!mainWindow) return;
 
+  const tileSize = payload.tileSize;
   const compression = payload.compression;
   const scale = parseInt(payload.scale) ** 2;
   const useCustomWidth = payload.useCustomWidth;
@@ -66,6 +67,7 @@ const doubleUpscayl = async (event, payload: DoubleUpscaylPayload) => {
       model,
       gpuId,
       saveImageAs,
+      tileSize,
     }),
     logit,
   );
@@ -172,6 +174,7 @@ const doubleUpscayl = async (event, payload: DoubleUpscaylPayload) => {
           scale: scale.toString(),
           customWidth,
           compression,
+          tileSize,
         }),
         logit,
       );

electron/commands/image-upscayl.ts

@@ -30,6 +30,7 @@ const imageUpscayl = async (event, payload: ImageUpscaylPayload) => {
   }
 
   // GET VARIABLES
+  const tileSize = payload.tileSize;
   const compression = payload.compression;
   const scale = payload.scale;
   const useCustomWidth = payload.useCustomWidth;
@@ -75,6 +76,9 @@ const imageUpscayl = async (event, payload: ImageUpscaylPayload) => {
         fileName,
         scale,
         compression,
+        customWidth,
+        useCustomWidth,
+        tileSize,
       }),
     );
     const upscayl = spawnUpscayl(
@@ -90,6 +94,8 @@ const imageUpscayl = async (event, payload: ImageUpscaylPayload) => {
         gpuId,
         saveImageAs,
         customWidth,
+        compression,
+        tileSize,
       }),
       logit,
     );

electron/utils/get-arguments.ts

@@ -13,6 +13,8 @@ export const getSingleImageArguments = ({
   gpuId,
   saveImageAs,
   customWidth,
+  tileSize,
+  compression,
 }: {
   inputDir: string;
   fileNameWithExt: string;
@@ -23,6 +25,8 @@ export const getSingleImageArguments = ({
   gpuId: string;
   saveImageAs: ImageFormat;
   customWidth: string;
+  tileSize: number;
+  compression: string;
 }) => {
   const modelScale = getModelScale(model);
   let includeScale = modelScale !== scale && !customWidth;
@@ -51,6 +55,12 @@ export const getSingleImageArguments = ({
     // CUSTOM WIDTH
     customWidth ? `-w` : "",
     customWidth ? customWidth : "",
+    // COMPRESSION
+    "-c",
+    compression,
+    // TILE SIZE
+    tileSize ? `-t` : "",
+    tileSize ? tileSize.toString() : "",
   ];
 };
 
@@ -62,6 +72,7 @@ export const getDoubleUpscaleArguments = ({
   model,
   gpuId,
   saveImageAs,
+  tileSize,
 }: {
   inputDir: string;
   fullfileName: string;
@@ -70,6 +81,7 @@ export const getDoubleUpscaleArguments = ({
   model: string;
   gpuId: string;
   saveImageAs: ImageFormat;
+  tileSize: number;
 }) => {
   return [
     // INPUT IMAGE
@@ -90,6 +102,9 @@ export const getDoubleUpscaleArguments = ({
     // FORMAT
     "-f",
     saveImageAs,
+    // TILE SIZE
+    tileSize ? `-t` : "",
+    tileSize ? tileSize.toString() : "",
   ];
 };
 
@@ -101,6 +116,8 @@ export const getDoubleUpscaleSecondPassArguments = ({
   saveImageAs,
   scale,
   customWidth,
+  compression,
+  tileSize,
 }: {
   outFile: string;
   modelsPath: string;
@@ -110,6 +127,7 @@ export const getDoubleUpscaleSecondPassArguments = ({
   scale: string;
   customWidth: string;
   compression: string;
+  tileSize: number;
 }) => {
   const modelScale = (parseInt(getModelScale(model)) ** 2).toString();
   let includeScale = modelScale !== scale && !customWidth;
@@ -138,6 +156,12 @@ export const getDoubleUpscaleSecondPassArguments = ({
     // CUSTOM WIDTH
     customWidth ? `-w` : "",
     customWidth ? customWidth : "",
+    // COMPRESSION
+    "-c",
+    compression,
+    // TILE SIZE
+    tileSize ? `-t` : "",
+    tileSize ? tileSize.toString() : "",
   ];
 };
 
@@ -150,6 +174,8 @@ export const getBatchArguments = ({
   saveImageAs,
   scale,
   customWidth,
+  compression,
+  tileSize,
 }: {
   inputDir: string;
   outputDir: string;
@@ -159,6 +185,8 @@ export const getBatchArguments = ({
   saveImageAs: ImageFormat;
   scale: string;
   customWidth: string;
+  compression: string;
+  tileSize: number;
 }) => {
   const modelScale = getModelScale(model);
   let includeScale = modelScale !== scale && !customWidth;
@@ -188,5 +216,11 @@ export const getBatchArguments = ({
     // CUSTOM WIDTH
     customWidth ? `-w` : "",
     customWidth ? customWidth : "",
+    // COMPRESSION
+    "-c",
+    compression,
+    // TILE SIZE
+    tileSize ? `-t` : "",
+    tileSize ? tileSize.toString() : "",
   ];
 };

renderer/atoms/userSettingsAtom.ts

@@ -59,5 +59,7 @@ export const useCustomWidthAtom = atomWithStorage<boolean>(
   false,
 );
 
+export const tileSizeAtom = atomWithStorage<number | null>("tileSize", null);
+
 // CLIENT SIDE ONLY
 export const showSidebarAtom = atomWithStorage("showSidebar", true);

renderer/components/settings-tab/TileSizeInput.tsx

@@ -0,0 +1,36 @@
+import { tileSizeAtom } from "@/atoms/userSettingsAtom";
+import { useAtom } from "jotai";
+import React from "react";
+
+export function TileSizeInput() {
+  const [tileSize, setTileSize] = useAtom(tileSizeAtom);
+
+  return (
+    <div>
+      <div className="flex flex-col gap-1">
+        <p className="text-sm font-medium">CUSTOM TILE SIZE</p>
+        <p className="text-xs text-base-content/80">
+          <br />
+          Use a custom tile size for segmenting the image. This can help process
+          images faster by reducing the number of tiles generated.
+        </p>
+      </div>
+      <div className="mt-2 flex items-center gap-2">
+        <input
+          type="number"
+          value={tileSize}
+          onChange={(e) => {
+            if (e.currentTarget.value === "") {
+              setTileSize(null);
+              localStorage.removeItem("customWidth");
+              return;
+            }
+            setTileSize(parseInt(e.currentTarget.value));
+          }}
+          placeholder="0 = Auto"
+          className="input input-primary [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+        />
+      </div>
+    </div>
+  );
+}

renderer/components/settings-tab/index.tsx

@@ -20,6 +20,7 @@ import { featureFlags } from "@common/feature-flags";
 import TurnOffNotificationsToggle from "./TurnOffNotificationsToggle";
 import { cn } from "@/lib/utils";
 import { CustomResolutionInput } from "./CustomResolutionInput";
+import { TileSizeInput } from "./TileSizeInput";
 
 interface IProps {
   batchMode: boolean;
@@ -236,6 +237,8 @@ function SettingsTab({
       {/* GPU ID INPUT */}
       <GpuIdInput gpuId={gpuId} handleGpuIdChange={handleGpuIdChange} />
 
+      <TileSizeInput />
+
       {/* CUSTOM MODEL */}
       <CustomModelsFolderSelect
         customModelsPath={customModelsPath}

renderer/pages/index.tsx

@@ -28,6 +28,7 @@ import {
   showSidebarAtom,
   customWidthAtom,
   useCustomWidthAtom,
+  tileSizeAtom,
 } from "../atoms/userSettingsAtom";
 import useLog from "../components/hooks/useLog";
 import { UpscaylCloudModal } from "../components/UpscaylCloudModal";
@@ -96,6 +97,7 @@ const Home = () => {
   const [showSidebar, setShowSidebar] = useAtom(showSidebarAtom);
   const customWidth = useAtomValue(customWidthAtom);
   const useCustomWidth = useAtomValue(useCustomWidthAtom);
+  const tileSize = useAtomValue(tileSizeAtom);
 
   const { logit } = useLog();
   const { toast } = useToast();
@@ -540,6 +542,7 @@ const Home = () => {
           compression: compression.toString(),
           customWidth: customWidth > 0 ? customWidth.toString() : null,
           useCustomWidth,
+          tileSize,
         });
         logit("🏁 DOUBLE_UPSCAYL");
       } else if (batchMode) {
@@ -556,6 +559,7 @@ const Home = () => {
           compression: compression.toString(),
           customWidth: customWidth > 0 ? customWidth.toString() : null,
           useCustomWidth,
+          tileSize,
         });
         logit("🏁 FOLDER_UPSCAYL");
       } else {
@@ -572,6 +576,7 @@ const Home = () => {
           compression: compression.toString(),
           customWidth: customWidth > 0 ? customWidth.toString() : null,
           useCustomWidth,
+          tileSize,
         });
         logit("🏁 UPSCAYL");
       }