Added models list population

electron/commands.ts

@@ -1,7 +1,6 @@
 const commands = {
   SELECT_FILE: "Select a File",
   SELECT_FOLDER: "Select a Folder",
-  SELECT_CUSTOM_MODEL_FOLDER: "Select a Custom Model Folder",
   UPSCAYL: "Upscale the Image",
   UPSCAYL_DONE: "Upscaling Done",
   UPSCAYL_PROGRESS: "Send Progress from Main to Renderer",
@@ -18,7 +17,9 @@ const commands = {
   UPSCAYL_VIDEO_PROGRESS: "Send Video Upscale Progress from Main to Renderer",
   FFMPEG_VIDEO_DONE: "Ran FFMpeg successfully",
   FFMPEG_VIDEO_PROGRESS: "Running FFMpeg for frame extraction",
-  CUSTOM_MODEL_FILES_LIST: "Get custom model files list",
+  SELECT_CUSTOM_MODEL_FOLDER: "Select a Custom Model Folder",
+  GET_MODELS_LIST: "Send models list from main to renderer",
+  CUSTOM_MODEL_FILES_LIST: "Send custom model files list to renderer",
 };
 
 export default commands;

electron/index.ts

@@ -196,6 +196,15 @@ const getModels = (folderPath: string) => {
   return models;
 };
 
+ipcMain.on(commands.GET_MODELS_LIST, async (event, payload) => {
+  if (payload) {
+    mainWindow.webContents.send(
+      commands.CUSTOM_MODEL_FILES_LIST,
+      getModels(payload)
+    );
+  }
+});
+
 //------------------------Select Custom Models Folder---------------------//
 ipcMain.handle(commands.SELECT_CUSTOM_MODEL_FOLDER, async (event, message) => {
   const { canceled, filePaths: folderPaths } = await dialog.showOpenDialog({

main/commands.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const commands = {
     SELECT_FILE: "Select a File",
     SELECT_FOLDER: "Select a Folder",
-    SELECT_CUSTOM_MODEL_FOLDER: "Select a Custom Model Folder",
     UPSCAYL: "Upscale the Image",
     UPSCAYL_DONE: "Upscaling Done",
     UPSCAYL_PROGRESS: "Send Progress from Main to Renderer",
@@ -19,6 +18,8 @@ const commands = {
     UPSCAYL_VIDEO_PROGRESS: "Send Video Upscale Progress from Main to Renderer",
     FFMPEG_VIDEO_DONE: "Ran FFMpeg successfully",
     FFMPEG_VIDEO_PROGRESS: "Running FFMpeg for frame extraction",
-    CUSTOM_MODEL_FILES_LIST: "Get custom model files list",
+    SELECT_CUSTOM_MODEL_FOLDER: "Select a Custom Model Folder",
+    GET_MODELS_LIST: "Send models list from main to renderer",
+    CUSTOM_MODEL_FILES_LIST: "Send custom model files list to renderer",
 };
 exports.default = commands;

main/index.js

@@ -167,6 +167,11 @@ const getModels = (folderPath) => {
     }
     return models;
 };
+electron_1.ipcMain.on(commands_1.default.GET_MODELS_LIST, (event, payload) => __awaiter(void 0, void 0, void 0, function* () {
+    if (payload) {
+        mainWindow.webContents.send(commands_1.default.CUSTOM_MODEL_FILES_LIST, getModels(payload));
+    }
+}));
 //------------------------Select Custom Models Folder---------------------//
 electron_1.ipcMain.handle(commands_1.default.SELECT_CUSTOM_MODEL_FOLDER, (event, message) => __awaiter(void 0, void 0, void 0, function* () {
     const { canceled, filePaths: folderPaths } = yield electron_1.dialog.showOpenDialog({

renderer/components/SettingsTab.tsx

@@ -45,19 +45,6 @@ function SettingsTab({
   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);
 
@@ -223,6 +210,7 @@ function SettingsTab({
 
             if (customModelPath !== null) {
               setCustomModelsPath(customModelPath);
+              window.electron.send(commands.GET_MODELS_LIST, customModelPath);
             }
           }}>
           Select Folder

renderer/pages/index.tsx

@@ -11,6 +11,8 @@ import Tabs from "../components/Tabs";
 import SettingsTab from "../components/SettingsTab";
 import { useAtom } from "jotai";
 import { logAtom } from "../atoms/logAtom";
+import { modelsListAtom } from "../atoms/modelsListAtom";
+import { customModelsPathAtom } from "../atoms/userSettingsAtom";
 
 const Home = () => {
   // STATES
@@ -40,6 +42,8 @@ const Home = () => {
   });
   const [selectedTab, setSelectedTab] = useState(0);
   const [logData, setLogData] = useAtom(logAtom);
+  const [customModelsPath, setCustomModelsPath] = useAtom(customModelsPathAtom);
+  const [modelOptions, setModelOptions] = useAtom(modelsListAtom);
 
   // (function () {
   //   let info = console.info;
@@ -151,6 +155,28 @@ const Home = () => {
       setUpscaledVideoPath(data);
       addToLog(data);
     });
+
+    // CUSTOM FOLDER LISTENER
+    window.electron.on(
+      commands.CUSTOM_MODEL_FILES_LIST,
+      (_, modelsList: string[]) => {
+        console.log("🚀 => file: index.tsx:161 => modelsList:", modelsList);
+
+        modelsList.forEach((model: string) => {
+          setModelOptions((prev) => [...prev, { label: model, value: model }]);
+        });
+      }
+    );
+  }, []);
+
+  useEffect(() => {
+    const customModelsPath = JSON.parse(
+      localStorage.getItem("customModelsPath")
+    );
+
+    if (customModelsPath !== null) {
+      window.electron.send(commands.GET_MODELS_LIST, customModelsPath);
+    }
   }, []);
 
   useEffect(() => {