Added folder path buttons

electron/commands.ts

@@ -1,6 +1,7 @@
 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",

electron/index.ts

@@ -89,11 +89,17 @@ app.on("window-all-closed", app.quit);
 
 log.log(app.getAppPath());
 
+let imagePath: string | undefined = undefined;
+let folderPath: string | undefined = undefined;
+let customModelsFolderPath: string | undefined = undefined;
+
 //------------------------Select File-----------------------------//
 // ! DONT FORGET TO RESTART THE APP WHEN YOU CHANGE CODE HERE
 ipcMain.handle(commands.SELECT_FILE, async () => {
   const { canceled, filePaths } = await dialog.showOpenDialog({
     properties: ["openFile", "multiSelections"],
+    title: "Select Image",
+    defaultPath: imagePath,
   });
 
   if (canceled) {
@@ -101,6 +107,7 @@ ipcMain.handle(commands.SELECT_FILE, async () => {
     return "cancelled";
   } else {
     log.log("Selected File Path: ", filePaths[0]);
+    imagePath = filePaths[0];
     // CREATE input AND upscaled FOLDER
     return filePaths[0];
   }
@@ -108,15 +115,34 @@ ipcMain.handle(commands.SELECT_FILE, async () => {
 
 //------------------------Select Folder-----------------------------//
 ipcMain.handle(commands.SELECT_FOLDER, async (event, message) => {
-  const { canceled, filePaths } = await dialog.showOpenDialog({
+  const { canceled, filePaths: folderPaths } = await dialog.showOpenDialog({
     properties: ["openDirectory"],
+    defaultPath: folderPath,
   });
   if (canceled) {
     log.log("operation cancelled");
     return "cancelled";
   } else {
-    log.log(filePaths[0]);
-    return filePaths[0];
+    log.log("Selected Folder Path: ", folderPaths[0]);
+    folderPath = folderPaths[0];
+    return folderPaths[0];
+  }
+});
+
+//------------------------Select Custom Models Folder---------------------//
+ipcMain.handle(commands.SELECT_CUSTOM_MODEL_FOLDER, async (event, message) => {
+  const { canceled, filePaths: folderPaths } = await dialog.showOpenDialog({
+    properties: ["openDirectory"],
+    title: "Select Custom Models Folder",
+    defaultPath: customModelsFolderPath,
+  });
+  if (canceled) {
+    log.log("operation cancelled");
+    return "cancelled";
+  } else {
+    log.log("Custom Folder Path: ", folderPaths[0]);
+    customModelsFolderPath = folderPaths[0];
+    return folderPaths[0];
   }
 });
 

main/commands.js

@@ -3,6 +3,7 @@ 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",

main/index.js

@@ -105,6 +105,20 @@ electron_1.ipcMain.handle(commands_1.default.SELECT_FOLDER, (event, message) =>
         return filePaths[0];
     }
 }));
+//------------------------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 } = yield electron_1.dialog.showOpenDialog({
+        properties: ["openDirectory"],
+    });
+    if (canceled) {
+        electron_log_1.default.log("operation cancelled");
+        return "cancelled";
+    }
+    else {
+        electron_log_1.default.log(filePaths[0]);
+        return filePaths[0];
+    }
+}));
 //------------------------Open Folder-----------------------------//
 electron_1.ipcMain.on(commands_1.default.OPEN_FOLDER, (event, payload) => __awaiter(void 0, void 0, void 0, function* () {
     electron_log_1.default.log(payload);

renderer/components/SettingsTab.tsx

@@ -3,59 +3,29 @@ import Select from "react-select";
 import ReactTooltip from "react-tooltip";
 import { themeChange } from "theme-change";
 import log from "electron-log/renderer";
+import commands from "../../electron/commands";
 
 interface IProps {
-  progress: string;
-  selectImageHandler: () => Promise<void>;
-  selectFolderHandler: () => Promise<void>;
-  handleModelChange: (e: any) => void;
-  handleDrop: (e: any) => void;
-  outputHandler: () => Promise<void>;
-  upscaylHandler: () => Promise<void>;
   batchMode: boolean;
   setBatchMode: React.Dispatch<React.SetStateAction<boolean>>;
   imagePath: string;
-  outputPath: string;
-  doubleUpscayl: boolean;
-  setDoubleUpscayl: React.Dispatch<React.SetStateAction<boolean>>;
-  model: string;
   setModel: React.Dispatch<React.SetStateAction<string>>;
-  isVideo: boolean;
-  setIsVideo: React.Dispatch<React.SetStateAction<boolean>>;
   saveImageAs: string;
   setSaveImageAs: React.Dispatch<React.SetStateAction<string>>;
   gpuId: string;
   setGpuId: React.Dispatch<React.SetStateAction<string>>;
-  dimensions: {
-    width: number | null;
-    height: number | null;
-  };
   logData: string[];
 }
 
 function SettingsTab({
-  progress,
-  selectImageHandler,
-  selectFolderHandler,
-  handleModelChange,
-  handleDrop,
-  outputHandler,
-  upscaylHandler,
   batchMode,
   setBatchMode,
   imagePath,
-  outputPath,
-  doubleUpscayl,
-  setDoubleUpscayl,
-  model,
   setModel,
-  isVideo,
-  setIsVideo,
   gpuId,
   setGpuId,
   saveImageAs,
   setSaveImageAs,
-  dimensions,
   logData,
 }: IProps) {
   const [currentModel, setCurrentModel] = useState<{
@@ -252,6 +222,21 @@ function SettingsTab({
         />
       </div>
 
+      {/* 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>
+        <button
+          className="btn-primary btn"
+          onClick={async () => {
+            const customModelPath = window.electron.invoke(
+              commands.SELECT_CUSTOM_MODEL_FOLDER
+            );
+          }}>
+          Select Folder
+        </button>
+      </div>
+
       <div className="relative flex flex-col gap-2">
         <button
           className="btn-primary btn-xs btn absolute top-10 right-2 z-10"
@@ -259,7 +244,7 @@ function SettingsTab({
           {isCopied ? <span>Copied 📋</span> : <span>Copy 📋</span>}
         </button>
         <p className="text-sm font-medium">Logs</p>
-        <code className="max-h-84 rounded-btn min-h-16 relative flex h-80 flex-col gap-3 overflow-y-auto break-all bg-base-200 p-4 text-xs">
+        <code className="rounded-btn relative flex h-52 max-h-52 flex-col gap-3 overflow-y-auto break-all bg-base-200 p-4 text-xs">
           {logData.length === 0 && (
             <p className="text-base-content/70">No logs to show</p>
           )}

renderer/pages/index.tsx

@@ -477,28 +477,14 @@ const Home = () => {
 
         {selectedTab === 1 && (
           <SettingsTab
-            progress={progress}
-            selectImageHandler={selectImageHandler}
-            selectFolderHandler={selectFolderHandler}
-            handleModelChange={handleModelChange}
-            handleDrop={handleDrop}
-            outputHandler={outputHandler}
-            upscaylHandler={upscaylHandler}
             batchMode={batchMode}
             setBatchMode={setBatchMode}
             imagePath={imagePath}
-            outputPath={outputPath}
-            doubleUpscayl={doubleUpscayl}
-            setDoubleUpscayl={setDoubleUpscayl}
-            model={model}
             setModel={setModel}
-            isVideo={isVideo}
-            setIsVideo={setIsVideo}
             gpuId={gpuId}
             setGpuId={setGpuId}
             saveImageAs={saveImageAs}
             setSaveImageAs={setSaveImageAs}
-            dimensions={dimensions}
             logData={logData}
           />
         )}