diff --git a/renderer/components/hooks/use-custom-models.ts b/renderer/components/hooks/use-custom-models.ts new file mode 100644 index 0000000..c2de2f0 --- /dev/null +++ b/renderer/components/hooks/use-custom-models.ts @@ -0,0 +1,17 @@ +import ELECTRON_COMMANDS from "@common/commands"; +import { useEffect } from "react"; +import useLog from "./useLog"; + +export const initCustomModels = () => { + const { logit } = useLog(); + + useEffect(() => { + const customModelsPath = JSON.parse( + localStorage.getItem("customModelsPath"), + ); + if (customModelsPath !== null) { + window.electron.send(ELECTRON_COMMANDS.GET_MODELS_LIST, customModelsPath); + logit("🎯 GET_MODELS_LIST: ", customModelsPath); + } + }, []); +}; diff --git a/renderer/components/hooks/use-electron.ts b/renderer/components/hooks/use-electron.ts index 14f81bc..a3549d1 100644 --- a/renderer/components/hooks/use-electron.ts +++ b/renderer/components/hooks/use-electron.ts @@ -1,8 +1,5 @@ import { useEffect } from "react"; -import { useAtomValue } from "jotai"; -import { translationAtom } from "@/atoms/translations-atom"; import ELECTRON_COMMANDS from "@common/commands"; -import useLog from "./useLog"; const useElectron = ({ command, diff --git a/renderer/components/main-content/index.tsx b/renderer/components/main-content/index.tsx index 701ad39..ea9b0e9 100644 --- a/renderer/components/main-content/index.tsx +++ b/renderer/components/main-content/index.tsx @@ -1,24 +1,14 @@ import useLog from "../hooks/useLog"; import { useState, useCallback, useMemo, useRef } from "react"; import ELECTRON_COMMANDS from "../../../common/commands"; -import { useAtom, useAtomValue, useSetAtom } from "jotai"; -import { logAtom } from "../../atoms/logAtom"; -import { modelsListAtom } from "../../atoms/modelsListAtom"; +import { useAtomValue, useSetAtom } from "jotai"; import { batchModeAtom, lensSizeAtom, - compressionAtom, - dontShowCloudModalAtom, - noImageProcessingAtom, savedOutputPathAtom, progressAtom, - scaleAtom, viewTypeAtom, rememberOutputFolderAtom, - customWidthAtom, - useCustomWidthAtom, - tileSizeAtom, - showSidebarAtom, } from "../../atoms/userSettingsAtom"; import { useToast } from "@/components/ui/use-toast"; import { sanitizePath } from "@common/sanitize-path"; @@ -45,10 +35,28 @@ const MainContent = ({ batchFolderPath, doubleUpscaylCounter, setDimensions, +}: { + imagePath: string; + resetImagePaths: () => void; + upscaledBatchFolderPath: string; + setImagePath: React.Dispatch>; + validateImagePath: (path: string) => void; + selectFolderHandler: () => void; + selectImageHandler: () => void; + upscaledImagePath: string; + batchFolderPath: string; + doubleUpscaylCounter: number; + setDimensions: React.Dispatch< + React.SetStateAction<{ + width: number; + height: number; + }> + >; }) => { const t = useAtomValue(translationAtom); const { logit } = useLog(); const { toast } = useToast(); + const version = useUpscaylVersion(); const upscaledImageRef = useRef(null); @@ -63,7 +71,6 @@ const MainContent = ({ const lensSize = useAtomValue(lensSizeAtom); const rememberOutputFolder = useAtomValue(rememberOutputFolderAtom); const [zoomAmount, setZoomAmount] = useState("100"); - const version = useUpscaylVersion(); const sanitizedUpscaledImagePath = useMemo( () => sanitizePath(upscaledImagePath), diff --git a/renderer/components/sidebar/index.tsx b/renderer/components/sidebar/index.tsx index 1b0892d..534e7e6 100644 --- a/renderer/components/sidebar/index.tsx +++ b/renderer/components/sidebar/index.tsx @@ -1,9 +1,8 @@ "use client"; import { useState } from "react"; -import { useAtom, useAtomValue } from "jotai"; +import { useAtom, useAtomValue, useSetAtom } from "jotai"; import { batchModeAtom, - lensSizeAtom, compressionAtom, dontShowCloudModalAtom, noImageProcessingAtom, @@ -11,8 +10,6 @@ import { overwriteAtom, progressAtom, scaleAtom, - viewTypeAtom, - rememberOutputFolderAtom, customWidthAtom, useCustomWidthAtom, tileSizeAtom, @@ -37,11 +34,10 @@ import Header from "../Header"; import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"; import { cn } from "@/lib/utils"; import { logAtom } from "@/atoms/logAtom"; -import { modelsListAtom } from "@/atoms/modelsListAtom"; import ELECTRON_COMMANDS from "@common/commands"; +import useUpscaylVersion from "../hooks/use-upscayl-version"; const Sidebar = ({ - upscaledImagePath, setUpscaledImagePath, batchFolderPath, setUpscaledBatchFolderPath, @@ -50,7 +46,6 @@ const Sidebar = ({ selectImageHandler, selectFolderHandler, }: { - upscaledImagePath: string; setUpscaledImagePath: React.Dispatch>; batchFolderPath: string; setUpscaledBatchFolderPath: React.Dispatch>; @@ -65,11 +60,12 @@ const Sidebar = ({ const t = useAtomValue(translationAtom); const { logit } = useLog(); const { toast } = useToast(); + const version = useUpscaylVersion(); // LOCAL STATES + // TODO: Add electron handler for os const [os, setOs] = useState<"linux" | "mac" | "win" | undefined>(undefined); const [model, setModel] = useState("realesrgan-x4plus"); - const [version, setVersion] = useState(""); const [doubleUpscayl, setDoubleUpscayl] = useState(false); const overwrite = useAtomValue(overwriteAtom); const [gpuId, setGpuId] = useState(""); @@ -79,22 +75,16 @@ const Sidebar = ({ const [showCloudModal, setShowCloudModal] = useState(false); // ATOMIC STATES - const [outputPath, setOutputPath] = useAtom(savedOutputPathAtom); + const outputPath = useAtomValue(savedOutputPathAtom); const [compression, setCompression] = useAtom(compressionAtom); - const [progress, setProgress] = useAtom(progressAtom); + const setProgress = useSetAtom(progressAtom); const [batchMode, setBatchMode] = useAtom(batchModeAtom); - const [logData, setLogData] = useAtom(logAtom); - const [modelOptions, setModelOptions] = useAtom(modelsListAtom); + const logData = useAtomValue(logAtom); const [scale] = useAtom(scaleAtom); - const [dontShowCloudModal, setDontShowCloudModal] = useAtom( - dontShowCloudModalAtom, - ); + const setDontShowCloudModal = useSetAtom(dontShowCloudModalAtom); const noImageProcessing = useAtomValue(noImageProcessingAtom); const [news, setNews] = useAtom(newsAtom); const [showNewsModal, setShowNewsModal] = useAtom(showNewsModalAtom); - const viewType = useAtomValue(viewTypeAtom); - const lensSize = useAtomValue(lensSizeAtom); - const rememberOutputFolder = useAtomValue(rememberOutputFolderAtom); const customWidth = useAtomValue(customWidthAtom); const useCustomWidth = useAtomValue(useCustomWidthAtom); const tileSize = useAtomValue(tileSizeAtom); diff --git a/renderer/pages/index.tsx b/renderer/pages/index.tsx index a5731c2..a151230 100644 --- a/renderer/pages/index.tsx +++ b/renderer/pages/index.tsx @@ -1,7 +1,7 @@ "use client"; import { useState, useEffect } from "react"; import ELECTRON_COMMANDS from "../../common/commands"; -import { useAtom, useAtomValue } from "jotai"; +import { useAtom, useAtomValue, useSetAtom } from "jotai"; import { modelsListAtom } from "../atoms/modelsListAtom"; import { batchModeAtom, @@ -21,32 +21,38 @@ import MainContent from "@/components/main-content"; import getDirectoryFromPath from "@common/get-directory-from-path"; import { FEATURE_FLAGS } from "@common/feature-flags"; import { VALID_IMAGE_FORMATS } from "@/lib/valid-formats"; +import { initCustomModels } from "@/components/hooks/use-custom-models"; const Home = () => { const t = useAtomValue(translationAtom); const { logit } = useLog(); const { toast } = useToast(); - // * SHARED HOOKS AND STATES + initCustomModels(); + + const [isLoading, setIsLoading] = useState(true); + const [imagePath, setImagePath] = useState(""); - const rememberOutputFolder = useAtomValue(rememberOutputFolderAtom); - const [outputPath, setOutputPath] = useAtom(savedOutputPathAtom); + const [upscaledImagePath, setUpscaledImagePath] = useState(""); const [dimensions, setDimensions] = useState({ width: null, height: null, }); - const [progress, setProgress] = useAtom(progressAtom); - const [upscaledImagePath, setUpscaledImagePath] = useState(""); + const setOutputPath = useSetAtom(savedOutputPathAtom); + const rememberOutputFolder = useAtomValue(rememberOutputFolderAtom); + + const batchMode = useAtomValue(batchModeAtom); const [batchFolderPath, setBatchFolderPath] = useState(""); const [upscaledBatchFolderPath, setUpscaledBatchFolderPath] = useState(""); - const [isLoading, setIsLoading] = useState(true); + + const setProgress = useSetAtom(progressAtom); const [doubleUpscaylCounter, setDoubleUpscaylCounter] = useState(0); + const [modelOptions, setModelOptions] = useAtom(modelsListAtom); + const [news, setNews] = useAtom(newsAtom); const [showNewsModal, setShowNewsModal] = useAtom(showNewsModalAtom); - const [batchMode, setBatchMode] = useAtom(batchModeAtom); - // * SHARED FUNCTIONS const selectImageHandler = async () => { resetImagePaths(); var path = await window.electron.invoke(ELECTRON_COMMANDS.SELECT_FILE); @@ -62,22 +68,7 @@ const Home = () => { } validateImagePath(path); }; - const validateImagePath = (path: string) => { - if (path.length > 0) { - logit("🖼 imagePath: ", path); - const extension = path.toLocaleLowerCase().split(".").pop(); - logit("🔤 Extension: ", extension); - if (!VALID_IMAGE_FORMATS.includes(extension.toLowerCase())) { - toast({ - title: t("ERRORS.INVALID_IMAGE_ERROR.TITLE"), - description: t("ERRORS.INVALID_IMAGE_ERROR.DESCRIPTION"), - }); - resetImagePaths(); - } - } else { - resetImagePaths(); - } - }; + const selectFolderHandler = async () => { resetImagePaths(); var path = await window.electron.invoke(ELECTRON_COMMANDS.SELECT_FOLDER); @@ -96,6 +87,23 @@ const Home = () => { } }; + const validateImagePath = (path: string) => { + if (path.length > 0) { + logit("🖼 imagePath: ", path); + const extension = path.toLocaleLowerCase().split(".").pop(); + logit("🔤 Extension: ", extension); + if (!VALID_IMAGE_FORMATS.includes(extension.toLowerCase())) { + toast({ + title: t("ERRORS.INVALID_IMAGE_ERROR.TITLE"), + description: t("ERRORS.INVALID_IMAGE_ERROR.DESCRIPTION"), + }); + resetImagePaths(); + } + } else { + resetImagePaths(); + } + }; + // ELECTRON EVENT LISTENERS useEffect(() => { const handleErrors = (data: string) => { @@ -271,17 +279,6 @@ const Home = () => { ); }, []); - // FETCH CUSTOM MODELS FROM CUSTOM MODELS PATH - useEffect(() => { - const customModelsPath = JSON.parse( - localStorage.getItem("customModelsPath"), - ); - if (customModelsPath !== null) { - window.electron.send(ELECTRON_COMMANDS.GET_MODELS_LIST, customModelsPath); - logit("🎯 GET_MODELS_LIST: ", customModelsPath); - } - }, []); - // FETCH NEWS useEffect(() => { // TODO: ADD AN ABOUT TAB @@ -342,10 +339,6 @@ const Home = () => { setUpscaledBatchFolderPath(""); }; - // UTILS - - // HANDLERS - if (isLoading) { return ( @@ -357,7 +350,6 @@ const Home = () => {