Added directory read and models list

renderer/atoms/modelsListAtom.ts

@@ -0,0 +1,14 @@
+import { atom } from "jotai";
+
+export type TModelsList = {
+  label: string;
+  value: string;
+}[];
+
+export const modelsListAtom = atom<TModelsList>([
+  { label: "General Photo (Real-ESRGAN)", value: "realesrgan-x4plus" },
+  { label: "General Photo (Remacri)", value: "remacri" },
+  { label: "General Photo (Ultramix Balanced)", value: "ultramix_balanced" },
+  { label: "General Photo (Ultrasharp)", value: "ultrasharp" },
+  { label: "Digital Art", value: "realesrgan-x4plus-anime" },
+]);

renderer/atoms/userSettingsAtom.ts

@@ -0,0 +1,6 @@
+import { atomWithStorage } from "jotai/utils";
+
+export const customModelsPathAtom = atomWithStorage<string | null>(
+  "customModelsPath",
+  null
+);

renderer/components/LeftPaneImageSteps.tsx

@@ -1,7 +1,9 @@
+import { useAtom } from "jotai";
 import React, { useEffect, useState } from "react";
 import Select from "react-select";
 import ReactTooltip from "react-tooltip";
 import { themeChange } from "theme-change";
+import { modelsListAtom } from "../atoms/modelsListAtom";
 
 interface IProps {
   progress: string;
@@ -63,6 +65,8 @@ function LeftPaneImageSteps({
     value: null,
   });
 
+  const [modelOptions, setModelOptions] = useAtom(modelsListAtom);
+
   useEffect(() => {
     themeChange(false);
 
@@ -130,14 +134,6 @@ function LeftPaneImageSteps({
     },
   };
 
-  const modelOptions = [
-    { label: "General Photo (Real-ESRGAN)", value: "realesrgan-x4plus" },
-    { label: "General Photo (Remacri)", value: "remacri" },
-    { label: "General Photo (Ultramix Balanced)", value: "ultramix_balanced" },
-    { label: "General Photo (Ultrasharp)", value: "ultrasharp" },
-    { label: "Digital Art", value: "realesrgan-x4plus-anime" },
-  ];
-
   const availableThemes = [
     { label: "light", value: "light" },
     { label: "dark", value: "dark" },

renderer/components/SettingsTab.tsx

@@ -4,6 +4,9 @@ import ReactTooltip from "react-tooltip";
 import { themeChange } from "theme-change";
 import log from "electron-log/renderer";
 import commands from "../../electron/commands";
+import { useAtom } from "jotai";
+import { customModelsPathAtom } from "../atoms/userSettingsAtom";
+import { TModelsList, modelsListAtom } from "../atoms/modelsListAtom";
 
 interface IProps {
   batchMode: boolean;
@@ -28,6 +31,7 @@ function SettingsTab({
   setSaveImageAs,
   logData,
 }: IProps) {
+  // STATES
   const [currentModel, setCurrentModel] = useState<{
     label: string;
     value: string;
@@ -37,6 +41,22 @@ function SettingsTab({
   });
 
   const [isCopied, setIsCopied] = useState(false);
+  const [customModelsPath, setCustomModelsPath] = useAtom(customModelsPathAtom);
+  const [customModelOptions, setCustomModelOptions] = useState<TModelsList>([]);
+  const [modelOptions, setModelOptions] = useAtom(modelsListAtom);
+
+  // EFFECTS
+  useEffect(() => {
+    // CUSTOM FOLDER LISTENER
+    window.electron.on(
+      commands.CUSTOM_MODEL_FILES_LIST,
+      (_, modelsList: string[]) => {
+        modelsList.forEach((model: string) => {
+          setModelOptions((prev) => [...prev, { label: model, value: model }]);
+        });
+      }
+    );
+  }, []);
 
   useEffect(() => {
     themeChange(false);
@@ -72,15 +92,12 @@ function SettingsTab({
     console.log("Current Model: ", currentModel);
   }, [currentModel]);
 
+  // HANDLERS
   const setExportType = (format: string) => {
     setSaveImageAs(format);
     localStorage.setItem("saveImageAs", format);
   };
 
-  const handleBatchMode = () => {
-    setBatchMode((oldValue) => !oldValue);
-  };
-
   const handleGpuIdChange = (e) => {
     setGpuId(e.target.value);
     localStorage.setItem("gpuId", e.target.value);
@@ -94,33 +111,6 @@ function SettingsTab({
     }, 2000);
   };
 
-  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: "General Photo (Real-ESRGAN)", value: "realesrgan-x4plus" },
-    { label: "General Photo (Remacri)", value: "remacri" },
-    { label: "General Photo (Ultramix Balanced)", value: "ultramix_balanced" },
-    { label: "General Photo (Ultrasharp)", value: "ultrasharp" },
-    { label: "Digital Art", value: "realesrgan-x4plus-anime" },
-  ];
-
   const availableThemes = [
     { label: "light", value: "light" },
     { label: "dark", value: "dark" },
@@ -153,8 +143,6 @@ function SettingsTab({
     { label: "winter", value: "winter" },
   ];
 
-  useEffect(() => {}, [imagePath]);
-
   return (
     <div className="animate-step-in animate flex h-screen flex-col gap-7 overflow-y-auto p-5 overflow-x-hidden">
       {/* IMAGE FORMAT BUTTONS */}
@@ -225,13 +213,17 @@ function SettingsTab({
       {/* GPU ID INPUT */}
       <div className="flex flex-col items-start gap-2">
         <p className="text-sm font-medium">Custom Models Path:</p>
-        <p className="text-sm text-base-content/60">/fasfas/asfasf/asf/saf</p>
+        <p className="text-sm text-base-content/60">{customModelsPath}</p>
         <button
           className="btn-primary btn"
           onClick={async () => {
-            const customModelPath = window.electron.invoke(
+            const customModelPath = await window.electron.invoke(
               commands.SELECT_CUSTOM_MODEL_FOLDER
             );
+
+            if (customModelPath !== null) {
+              setCustomModelsPath(customModelPath);
+            }
           }}>
           Select Folder
         </button>

renderer/pages/index.tsx

@@ -235,7 +235,7 @@ const Home = () => {
 
     var path = await window.electron.invoke(commands.SELECT_FILE);
 
-    if (path !== "cancelled") {
+    if (path !== null) {
       SetImagePath(path);
       var dirname = path.match(/(.*)[\/\\]/)[1] || "";
       setOutputPath(dirname);
@@ -247,7 +247,7 @@ const Home = () => {
 
     var path = await window.electron.invoke(commands.SELECT_FOLDER);
 
-    if (path !== "cancelled") {
+    if (path !== null) {
       setBatchFolderPath(path);
       setOutputPath(path + "_upscayled");
     }
@@ -339,7 +339,7 @@ const Home = () => {
 
   const outputHandler = async () => {
     var path = await window.electron.invoke(commands.SELECT_FOLDER);
-    if (path !== "cancelled") {
+    if (path !== null) {
       setOutputPath(path);
     } else {
       console.log("Getting output path from input file");