Initial Fix

electron/commands/double-upscayl.ts

@@ -4,6 +4,7 @@ import {
   childProcesses,
   customModelsFolderPath,
   customWidth,
+  folderPath,
   noImageProcessing,
   outputFolderPath,
   saveOutputFolder,

renderer/atoms/userSettingsAtom.ts

@@ -7,7 +7,10 @@ export const customModelsPathAtom = atomWithStorage<string | null>(
 );
 export const scaleAtom = atomWithStorage<"2" | "3" | "4">("scale", "4");
 export const batchModeAtom = atom<boolean>(false);
-export const outputPathAtom = atom<string | null>("");
+export const outputPathAtom = atomWithStorage<string | null>(
+  "lastOutputFolderPath",
+  null,
+);
 export const progressAtom = atom<string>("");
 
 export const rememberOutputFolderAtom = atomWithStorage<boolean>(

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 = {
+export function SaveOutputFolderToggle() {
-  rememberOutputFolder: boolean;
+  const [outputPath, setOutputPath] = useAtom(outputPathAtom);
-  setRememberOutputFolder: (arg: any) => void;
+  const [rememberOutputFolder, setRememberOutputFolder] = useAtom(
-};
+    rememberOutputFolderAtom,
-
+  );
-export function SaveOutputFolderToggle({
-  rememberOutputFolder,
-  setRememberOutputFolder,
-}: SaveOutputFolderToggleProps) {
   return (
     <div className="flex flex-col gap-2">
       <p className="text-sm font-medium">SAVE OUTPUT FOLDER</p>
       <p className="text-xs text-base-content/80">
         If enabled, the output folder will be remembered between sessions.
       </p>
+
+      <p>{outputPath}</p>
       <input
         type="checkbox"
         className="toggle"
@@ -22,13 +24,13 @@ export function SaveOutputFolderToggle({
         onClick={() => {
           setRememberOutputFolder((oldValue) => {
             if (oldValue === true) {
-              localStorage.removeItem("lastOutputFolderPath");
+              setOutputPath("");
             }
             return !oldValue;
           });
           localStorage.setItem(
             "rememberOutputFolder",
-            JSON.stringify(!rememberOutputFolder)
+            JSON.stringify(!rememberOutputFolder),
           );
         }}
       />

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({
         </>
       )}
 
-      <SaveOutputFolderToggle
+      <SaveOutputFolderToggle />
-        rememberOutputFolder={rememberOutputFolder}
-        setRememberOutputFolder={setRememberOutputFolder}
-      />
 
       <OverwriteToggle />
       <TurnOffNotificationsToggle />

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<void>;
   selectFolderHandler: () => Promise<void>;
   handleModelChange: (e: any) => void;
-  outputHandler: () => Promise<void>;
   upscaylHandler: () => Promise<void>;
   batchMode: boolean;
   setBatchMode: React.Dispatch<React.SetStateAction<boolean>>;
@@ -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<number>(null);
   const [targetHeight, setTargetHeight] = useState<number>(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={() => {
+            if (!rememberOutputFolder) {
               setOutputPath("");
+            }
             setProgress("");
             setBatchMode((oldValue) => !oldValue);
           }}

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

@@ -1,107 +0,0 @@
-import React from "react";
-import Select from "react-select";
-
-interface IProps {
-  progress: string;
-  selectVideoHandler: () => Promise<void>;
-  handleModelChange: (e: any) => void;
-  handleDrop: (e: any) => void;
-  outputHandler: () => Promise<void>;
-  upscaylHandler: () => Promise<void>;
-  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 <Control />
-      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 (
-    <div className="animate-step-in animate flex h-screen flex-col gap-7 overflow-y-auto p-5 overflow-x-hidden">
-      {/* STEP 1 */}
-      <div data-tip={videoPath}>
-        <p className="step-heading">Step 1</p>
-        <button className="btn-primary btn" onClick={selectVideoHandler}>
-          Select Video
-        </button>
-      </div>
-
-      {/* STEP 2 */}
-      <div className="animate-step-in">
-        <p className="step-heading">Step 2</p>
-        <p className="mb-2 text-sm">Select Scaling</p>
-
-        <Select
-          options={modelOptions}
-          components={{
-            IndicatorSeparator: () => null,
-            DropdownIndicator: () => null,
-          }}
-          onChange={handleModelChange}
-          className="react-select-container"
-          classNamePrefix="react-select"
-          defaultValue={modelOptions[0]}
-        />
-      </div>
-
-      {/* STEP 3 */}
-      <div className="animate-step-in" data-tip={outputPath}>
-        <p className="step-heading">Step 3</p>
-        <p className="mb-2 text-sm">Defaults to Video's path</p>
-        <button className="btn-primary btn" onClick={outputHandler}>
-          Set Output Folder
-        </button>
-      </div>
-
-      {/* STEP 4 */}
-      <div className="animate-step-in">
-        <p className="step-heading">Step 4</p>
-        <button
-          className="btn-accent btn"
-          onClick={upscaylHandler}
-          disabled={progress.length > 0}>
-          {progress.length > 0 ? "Upscayling⏳" : "Upscayl"}
-        </button>
-      </div>
-    </div>
-  );
-}
-
-export default LeftPaneVideoSteps;

renderer/pages/index.tsx

@@ -24,6 +24,7 @@ import {
   progressAtom,
   scaleAtom,
   viewTypeAtom,
+  rememberOutputFolderAtom,
 } from "../atoms/userSettingsAtom";
 import useLog from "../components/hooks/useLog";
 import { UpscaylCloudModal } from "../components/UpscaylCloudModal";
@@ -81,6 +82,7 @@ const Home = () => {
   const [showNewsModal, setShowNewsModal] = useAtom(showNewsModalAtom);
   const viewType = useAtomValue(viewTypeAtom);
   const lensSize = useAtomValue(lensSizeAtom);
+  const rememberOutputFolder = useAtomValue(rememberOutputFolderAtom);
 
   const { logit } = useLog();
 
@@ -275,19 +277,6 @@ const Home = () => {
     }
   }, [news]);
 
-  // CONFIGURE SAVED OUTPUT PATH
-  useEffect(() => {
-    const rememberOutputFolder = localStorage.getItem("rememberOutputFolder");
-    const lastOutputFolderPath = localStorage.getItem("lastOutputFolderPath");
-    if (rememberOutputFolder === "true") {
-      logit("🧠 Recalling Output Folder: ", lastOutputFolderPath);
-      setOutputPath(lastOutputFolderPath);
-    } else {
-      setOutputPath("");
-      localStorage.removeItem("lastOutputFolderPath");
-    }
-  }, []);
-
   // LOADING STATE
   useEffect(() => {
     setIsLoading(false);
@@ -340,8 +329,10 @@ const Home = () => {
     var dirname = path.match(/(.*)[\/\\]/)[1] || "";
     logit("📁 Selected Image Directory: ", dirname);
     if (!featureFlags.APP_STORE_BUILD) {
+      if (!rememberOutputFolder) {
         setOutputPath(dirname);
       }
+    }
     validateImagePath(path);
   };
 
@@ -351,12 +342,16 @@ const Home = () => {
     if (path !== null) {
       logit("🖼 Selected Folder Path: ", path);
       setBatchFolderPath(path);
+      if (!rememberOutputFolder) {
         setOutputPath(path);
+      }
     } else {
       logit("🚫 Folder selection cancelled");
       setBatchFolderPath("");
+      if (!rememberOutputFolder) {
         setOutputPath("");
       }
+    }
   };
 
   const handleModelChange = (e: any) => {
@@ -412,7 +407,11 @@ const Home = () => {
       setImagePath(filePath);
       var dirname = filePath.match(/(.*)[\/\\]/)[1] || "";
       logit("🗂 Setting output path: ", dirname);
-      if (!featureFlags.APP_STORE_BUILD) setOutputPath(dirname);
+      if (!featureFlags.APP_STORE_BUILD) {
+        if (!rememberOutputFolder) {
+          setOutputPath(dirname);
+        }
+      }
       validateImagePath(filePath);
     }
   };
@@ -433,22 +432,9 @@ const Home = () => {
       setImagePath(filePath);
       var dirname = filePath.match(/(.*)[\/\\]/)[1] || "";
       logit("🗂 Setting output path: ", dirname);
+      if (!rememberOutputFolder) {
         setOutputPath(dirname);
       }
-  };
-
-  const outputHandler = async () => {
-    var path = await window.electron.invoke(COMMAND.SELECT_FOLDER);
-    if (path !== null) {
-      logit("🗂 Setting Output Path: ", path);
-      setOutputPath(path);
-      const rememberOutputFolder = localStorage.getItem("rememberOutputFolder");
-      if (rememberOutputFolder) {
-        logit("🧠 Remembering Output Folder: ", path);
-        localStorage.setItem("lastOutputFolderPath", path);
-      }
-    } else {
-      setOutputPath("");
     }
   };
 
@@ -564,7 +550,6 @@ const Home = () => {
             selectImageHandler={selectImageHandler}
             selectFolderHandler={selectFolderHandler}
             handleModelChange={handleModelChange}
-            outputHandler={outputHandler}
             upscaylHandler={upscaylHandler}
             batchMode={batchMode}
             setBatchMode={setBatchMode}
@@ -674,7 +659,7 @@ const Home = () => {
           )}
         {/* BATCH UPSCALE DONE INFO */}
         {batchMode && upscaledBatchFolderPath.length > 0 && (
-          <>
+          <div className="z-50 flex flex-col items-center">
             <p className="select-none py-4 font-bold text-base-content">
               All done!
             </p>
@@ -684,7 +669,7 @@ const Home = () => {
             >
               Open Upscayled Folder
             </button>
-          </>
+          </div>
         )}
         <ImageOptions
           zoomAmount={zoomAmount}