From 1755b26c4af155229d468ac2344d8b9aa5588b9d Mon Sep 17 00:00:00 2001 From: Nayam Amarshe <25067102+NayamAmarshe@users.noreply.github.com> Date: Wed, 14 Feb 2024 12:02:52 +0530 Subject: [PATCH] Initial Fix --- electron/commands/double-upscayl.ts | 1 + renderer/atoms/userSettingsAtom.ts | 5 +- .../settings-tab/SaveOutputFolderToggle.tsx | 26 +++-- renderer/components/settings-tab/index.tsx | 22 +--- .../upscayl-tab/config/LeftPaneImageSteps.tsx | 19 +++- .../upscayl-tab/config/LeftPaneVideoSteps.tsx | 107 ------------------ renderer/pages/index.tsx | 55 ++++----- 7 files changed, 56 insertions(+), 179 deletions(-) delete mode 100644 renderer/components/upscayl-tab/config/LeftPaneVideoSteps.tsx diff --git a/electron/commands/double-upscayl.ts b/electron/commands/double-upscayl.ts index 1f9630a..17e2a91 100644 --- a/electron/commands/double-upscayl.ts +++ b/electron/commands/double-upscayl.ts @@ -4,6 +4,7 @@ import { childProcesses, customModelsFolderPath, customWidth, + folderPath, noImageProcessing, outputFolderPath, saveOutputFolder, diff --git a/renderer/atoms/userSettingsAtom.ts b/renderer/atoms/userSettingsAtom.ts index 3e2b73d..595d917 100644 --- a/renderer/atoms/userSettingsAtom.ts +++ b/renderer/atoms/userSettingsAtom.ts @@ -7,7 +7,10 @@ export const customModelsPathAtom = atomWithStorage( ); export const scaleAtom = atomWithStorage<"2" | "3" | "4">("scale", "4"); export const batchModeAtom = atom(false); -export const outputPathAtom = atom(""); +export const outputPathAtom = atomWithStorage( + "lastOutputFolderPath", + null, +); export const progressAtom = atom(""); export const rememberOutputFolderAtom = atomWithStorage( diff --git a/renderer/components/settings-tab/SaveOutputFolderToggle.tsx b/renderer/components/settings-tab/SaveOutputFolderToggle.tsx index 0c76040..dd4b062 100644 --- a/renderer/components/settings-tab/SaveOutputFolderToggle.tsx +++ b/renderer/components/settings-tab/SaveOutputFolderToggle.tsx @@ -1,20 +1,22 @@ -import React from "react"; +import { + outputPathAtom, + rememberOutputFolderAtom, +} from "@/atoms/userSettingsAtom"; +import { useAtom } from "jotai"; -type SaveOutputFolderToggleProps = { - rememberOutputFolder: boolean; - setRememberOutputFolder: (arg: any) => void; -}; - -export function SaveOutputFolderToggle({ - rememberOutputFolder, - setRememberOutputFolder, -}: SaveOutputFolderToggleProps) { +export function SaveOutputFolderToggle() { + const [outputPath, setOutputPath] = useAtom(outputPathAtom); + const [rememberOutputFolder, setRememberOutputFolder] = useAtom( + rememberOutputFolderAtom, + ); return (

SAVE OUTPUT FOLDER

If enabled, the output folder will be remembered between sessions.

+ +

{outputPath}

{ setRememberOutputFolder((oldValue) => { if (oldValue === true) { - localStorage.removeItem("lastOutputFolderPath"); + setOutputPath(""); } return !oldValue; }); localStorage.setItem( "rememberOutputFolder", - JSON.stringify(!rememberOutputFolder) + JSON.stringify(!rememberOutputFolder), ); }} /> diff --git a/renderer/components/settings-tab/index.tsx b/renderer/components/settings-tab/index.tsx index 78f4921..1b0417d 100644 --- a/renderer/components/settings-tab/index.tsx +++ b/renderer/components/settings-tab/index.tsx @@ -65,7 +65,6 @@ function SettingsTab({ label: null, value: null, }); - const [rememberOutputFolder, setRememberOutputFolder] = useState(false); const [isCopied, setIsCopied] = useState(false); const [customModelsPath, setCustomModelsPath] = useAtom(customModelsPathAtom); @@ -126,22 +125,6 @@ function SettingsTab({ setGpuId(currentlySavedGpuId); logit("⚙️ Getting gpuId from localStorage: ", currentlySavedGpuId); } - - if (!localStorage.getItem("rememberOutputFolder")) { - logit("⚙️ Setting rememberOutputFolder to false"); - localStorage.setItem("rememberOutputFolder", "false"); - } else { - const currentlySavedRememberOutputFolder = localStorage.getItem( - "rememberOutputFolder", - ); - logit( - "⚙️ Getting rememberOutputFolder from localStorage: ", - currentlySavedRememberOutputFolder, - ); - setRememberOutputFolder( - currentlySavedRememberOutputFolder === "true" ? true : false, - ); - } }, []); // HANDLERS @@ -229,10 +212,7 @@ function SettingsTab({ )} - + diff --git a/renderer/components/upscayl-tab/config/LeftPaneImageSteps.tsx b/renderer/components/upscayl-tab/config/LeftPaneImageSteps.tsx index 1ea732f..5c3a287 100644 --- a/renderer/components/upscayl-tab/config/LeftPaneImageSteps.tsx +++ b/renderer/components/upscayl-tab/config/LeftPaneImageSteps.tsx @@ -9,16 +9,17 @@ import { noImageProcessingAtom, outputPathAtom, progressAtom, + rememberOutputFolderAtom, scaleAtom, } from "../../../atoms/userSettingsAtom"; import { featureFlags } from "@common/feature-flags"; import getModelScale from "@common/check-model-scale"; +import COMMAND from "@common/commands"; interface IProps { selectImageHandler: () => Promise; selectFolderHandler: () => Promise; handleModelChange: (e: any) => void; - outputHandler: () => Promise; upscaylHandler: () => Promise; batchMode: boolean; setBatchMode: React.Dispatch>; @@ -39,7 +40,6 @@ function LeftPaneImageSteps({ selectImageHandler, selectFolderHandler, handleModelChange, - outputHandler, upscaylHandler, batchMode, setBatchMode, @@ -65,12 +65,23 @@ function LeftPaneImageSteps({ const noImageProcessing = useAtomValue(noImageProcessingAtom); const [outputPath, setOutputPath] = useAtom(outputPathAtom); const [progress, setProgress] = useAtom(progressAtom); + const rememberOutputFolder = useAtomValue(rememberOutputFolderAtom); const [targetWidth, setTargetWidth] = useState(null); const [targetHeight, setTargetHeight] = useState(null); const { logit } = useLog(); + const outputHandler = async () => { + var path = await window.electron.invoke(COMMAND.SELECT_FOLDER); + if (path !== null) { + logit("🗂 Setting Output Path: ", path); + setOutputPath(path); + } else { + setOutputPath(null); + } + }; + useEffect(() => { themeChange(false); @@ -166,7 +177,9 @@ function LeftPaneImageSteps({ className="toggle" defaultChecked={batchMode} onClick={() => { - setOutputPath(""); + if (!rememberOutputFolder) { + setOutputPath(""); + } setProgress(""); setBatchMode((oldValue) => !oldValue); }} diff --git a/renderer/components/upscayl-tab/config/LeftPaneVideoSteps.tsx b/renderer/components/upscayl-tab/config/LeftPaneVideoSteps.tsx deleted file mode 100644 index 8343372..0000000 --- a/renderer/components/upscayl-tab/config/LeftPaneVideoSteps.tsx +++ /dev/null @@ -1,107 +0,0 @@ -import React from "react"; -import Select from "react-select"; - -interface IProps { - progress: string; - selectVideoHandler: () => Promise; - handleModelChange: (e: any) => void; - handleDrop: (e: any) => void; - outputHandler: () => Promise; - upscaylHandler: () => Promise; - videoPath: string; - outputPath: string; - model: string; - isVideo: boolean; - setIsVideo: (arg: boolean) => void; -} - -function LeftPaneVideoSteps({ - progress, - selectVideoHandler, - handleModelChange, - handleDrop, - outputHandler, - upscaylHandler, - videoPath, - outputPath, - model, - isVideo, - setIsVideo, -}: IProps) { - const customStyles = { - option: (provided, state) => ({ - ...provided, - borderBottom: "1px dotted pink", - color: state.isSelected ? "red" : "blue", - padding: 20, - }), - control: () => ({ - // none of react-select's styles are passed to - width: 200, - }), - singleValue: (provided, state) => { - const opacity = state.isDisabled ? 0.5 : 1; - const transition = "opacity 300ms"; - - return { ...provided, opacity, transition }; - }, - }; - - const modelOptions = [ - { label: "2x Digital Art", value: "realesr-animevideov3-x2" }, - { label: "3x Digital Art", value: "realesr-animevideov3-x3" }, - { label: "4x Digital Art", value: "realesr-animevideov3-x4" }, - ]; - - return ( -
- {/* STEP 1 */} -
-

Step 1

- -
- - {/* STEP 2 */} -
-

Step 2

-

Select Scaling

- -