import React, { useEffect, useState } from "react"; import { themeChange } from "theme-change"; import commands from "../../electron/commands"; import { useAtom } from "jotai"; import { customModelsPathAtom, scaleAtom } from "../atoms/userSettingsAtom"; import { modelsListAtom } from "../atoms/modelsListAtom"; interface IProps { batchMode: boolean; setModel: React.Dispatch>; saveImageAs: string; setSaveImageAs: React.Dispatch>; gpuId: string; setGpuId: React.Dispatch>; logData: string[]; } function SettingsTab({ batchMode, setModel, gpuId, setGpuId, saveImageAs, setSaveImageAs, logData, }: IProps) { // STATES const [currentModel, setCurrentModel] = useState<{ label: string; value: string; }>({ label: null, value: null, }); const [isCopied, setIsCopied] = useState(false); const [customModelsPath, setCustomModelsPath] = useAtom(customModelsPathAtom); const [modelOptions, setModelOptions] = useAtom(modelsListAtom); const [scale, setScale] = useAtom(scaleAtom); const [rememberOutputFolder, setRememberOutputFolder] = useState(false); useEffect(() => { themeChange(false); if (!localStorage.getItem("saveImageAs")) { localStorage.setItem("saveImageAs", "png"); } else { const currentlySavedImageFormat = localStorage.getItem("saveImageAs"); setSaveImageAs(currentlySavedImageFormat); } if (!localStorage.getItem("model")) { setCurrentModel(modelOptions[0]); setModel(modelOptions[0].value); localStorage.setItem("model", JSON.stringify(modelOptions[0])); } else { const currentlySavedModel = JSON.parse( localStorage.getItem("model") ) as typeof modelOptions[0]; setCurrentModel(currentlySavedModel); setModel(currentlySavedModel.value); } if (!localStorage.getItem("gpuId")) { localStorage.setItem("gpuId", ""); } else { const currentlySavedGpuId = localStorage.getItem("gpuId"); setGpuId(currentlySavedGpuId); } if (!localStorage.getItem("rememberOutputFolder")) { localStorage.setItem("rememberOutputFolder", "false"); } else { const currentlySavedRememberOutputFolder = localStorage.getItem( "rememberOutputFolder" ); console.log( "🚀 => file: SettingsTab.tsx:80 => currentlySavedRememberOutputFolder:", currentlySavedRememberOutputFolder ); setRememberOutputFolder( currentlySavedRememberOutputFolder === "true" ? true : false ); } }, []); useEffect(() => { console.log("Current Model: ", currentModel); }, [currentModel]); // HANDLERS const setExportType = (format: string) => { setSaveImageAs(format); localStorage.setItem("saveImageAs", format); }; const handleGpuIdChange = (e) => { setGpuId(e.target.value); localStorage.setItem("gpuId", e.target.value); }; const copyOnClickHandler = () => { navigator.clipboard.writeText(logData.join("\n")); setIsCopied(true); setTimeout(() => { setIsCopied(false); }, 2000); }; const availableThemes = [ { label: "light", value: "light" }, { label: "dark", value: "dark" }, { label: "cupcake", value: "cupcake" }, { label: "bumblebee", value: "bumblebee" }, { label: "emerald", value: "emerald" }, { label: "corporate", value: "corporate" }, { label: "synthwave", value: "synthwave" }, { label: "retro", value: "retro" }, { label: "cyberpunk", value: "cyberpunk" }, { label: "valentine", value: "valentine" }, { label: "halloween", value: "halloween" }, { label: "garden", value: "garden" }, { label: "forest", value: "forest" }, { label: "aqua", value: "aqua" }, { label: "lofi", value: "lofi" }, { label: "pastel", value: "pastel" }, { label: "fantasy", value: "fantasy" }, { label: "wireframe", value: "wireframe" }, { label: "black", value: "black" }, { label: "luxury", value: "luxury" }, { label: "dracula", value: "dracula" }, { label: "cmyk", value: "cmyk" }, { label: "autumn", value: "autumn" }, { label: "business", value: "business" }, { label: "acid", value: "acid" }, { label: "lemonade", value: "lemonade" }, { label: "night", value: "night" }, { label: "coffee", value: "coffee" }, { label: "winter", value: "winter" }, ]; return (
{/* THEME SELECTOR */}

UPSCAYL THEME

SAVE OUTPUT FOLDER (PERMANENTLY)

{ setRememberOutputFolder((oldValue) => { if (oldValue === true) { localStorage.removeItem("lastOutputFolderPath"); } return !oldValue; }); localStorage.setItem( "rememberOutputFolder", JSON.stringify(!rememberOutputFolder) ); }} />
{/* GPU ID INPUT */}

GPU ID

{/* GPU ID INPUT */}

ADD CUSTOM MODELS

{customModelsPath}

{/* IMAGE FORMAT BUTTONS */}

SAVE IMAGE AS

EXPERIMENTAL

{batchMode && (

Only PNG is supported in Batch Upscale

)}
{/* PNG */} {/* JPG */} {/* WEBP */}
{/* IMAGE SCALE */}

IMAGE SCALE

EXPERIMENTAL

{ setScale(e.target.value.toString()); }} step="1" className="range range-primary mt-2" />
2x 3x 4x

LOGS

{logData.length === 0 && (

No logs to show

)} {logData.map((logLine) => { console.log(logData); return

{logLine}

; })}
{/* DONATE BUTTON */}

If you like what we do :)

); } export default SettingsTab;