From 3f76011ba53ebf8913db5513d898175328892065 Mon Sep 17 00:00:00 2001 From: Nayam Amarshe <25067102+NayamAmarshe@users.noreply.github.com> Date: Thu, 25 Apr 2024 01:10:48 +0530 Subject: [PATCH] Add tilesize and add compression in arguments --- common/types/types.d.ts | 3 ++ electron/commands/batch-upscayl.ts | 4 +++ electron/commands/double-upscayl.ts | 3 ++ electron/commands/image-upscayl.ts | 6 ++++ electron/utils/get-arguments.ts | 34 ++++++++++++++++++ renderer/atoms/userSettingsAtom.ts | 2 ++ .../components/settings-tab/TileSizeInput.tsx | 36 +++++++++++++++++++ renderer/components/settings-tab/index.tsx | 3 ++ renderer/pages/index.tsx | 5 +++ 9 files changed, 96 insertions(+) create mode 100644 renderer/components/settings-tab/TileSizeInput.tsx diff --git a/common/types/types.d.ts b/common/types/types.d.ts index cf4c3eb..e631866 100644 --- a/common/types/types.d.ts +++ b/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; }; diff --git a/electron/commands/batch-upscayl.ts b/electron/commands/batch-upscayl.ts index 9384ac6..5065548 100644 --- a/electron/commands/batch-upscayl.ts +++ b/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, ); diff --git a/electron/commands/double-upscayl.ts b/electron/commands/double-upscayl.ts index f196642..da3959e 100644 --- a/electron/commands/double-upscayl.ts +++ b/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, ); diff --git a/electron/commands/image-upscayl.ts b/electron/commands/image-upscayl.ts index 9373877..f330171 100644 --- a/electron/commands/image-upscayl.ts +++ b/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, ); diff --git a/electron/utils/get-arguments.ts b/electron/utils/get-arguments.ts index 6d3408e..3cf47b0 100644 --- a/electron/utils/get-arguments.ts +++ b/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() : "", ]; }; diff --git a/renderer/atoms/userSettingsAtom.ts b/renderer/atoms/userSettingsAtom.ts index f704eb9..a4f1e60 100644 --- a/renderer/atoms/userSettingsAtom.ts +++ b/renderer/atoms/userSettingsAtom.ts @@ -59,5 +59,7 @@ export const useCustomWidthAtom = atomWithStorage( false, ); +export const tileSizeAtom = atomWithStorage("tileSize", null); + // CLIENT SIDE ONLY export const showSidebarAtom = atomWithStorage("showSidebar", true); diff --git a/renderer/components/settings-tab/TileSizeInput.tsx b/renderer/components/settings-tab/TileSizeInput.tsx new file mode 100644 index 0000000..aa83281 --- /dev/null +++ b/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 ( +
+
+

CUSTOM TILE SIZE

+

+
+ Use a custom tile size for segmenting the image. This can help process + images faster by reducing the number of tiles generated. +

+
+
+ { + 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" + /> +
+
+ ); +} diff --git a/renderer/components/settings-tab/index.tsx b/renderer/components/settings-tab/index.tsx index a3ef051..65995bf 100644 --- a/renderer/components/settings-tab/index.tsx +++ b/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 */} + + {/* CUSTOM MODEL */} { 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"); }