Fixed scale

renderer/atoms/userSettingsAtom.ts

@@ -4,3 +4,5 @@ export const customModelsPathAtom = atomWithStorage<string | null>(
   "customModelsPath",
   null
 );
+
+export const scaleAtom = atomWithStorage<number>("scale", 4);

renderer/components/LeftPaneImageSteps.tsx

@@ -241,21 +241,6 @@ function LeftPaneImageSteps({
             </button>
           </div>
         )}
-
-        <p className="mb-2 text-sm">Set Scale</p>
-        <input
-          type="range"
-          min="2"
-          max="4"
-          value="4"
-          step="1"
-          className="range range-primary mt-2"
-        />
-        <div className="flex w-full justify-between px-2 text-xs">
-          <span>|</span>
-          <span>|</span>
-          <span>|</span>
-        </div>
       </div>
 
       {/* STEP 3 */}

renderer/components/SettingsTab.tsx

@@ -5,8 +5,9 @@ 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 { customModelsPathAtom, scaleAtom } from "../atoms/userSettingsAtom";
 import { TModelsList, modelsListAtom } from "../atoms/modelsListAtom";
+import { atomWithStorage } from "jotai/utils";
 
 interface IProps {
   batchMode: boolean;
@@ -45,6 +46,8 @@ function SettingsTab({
   const [customModelOptions, setCustomModelOptions] = useState<TModelsList>([]);
   const [modelOptions, setModelOptions] = useAtom(modelsListAtom);
 
+  const [scale, setScale] = useAtom(scaleAtom);
+
   useEffect(() => {
     themeChange(false);
 
@@ -217,6 +220,26 @@ function SettingsTab({
         </button>
       </div>
 
+      <div>
+        <p className="text-sm font-medium">Custom Model Scale:</p>
+        <input
+          type="range"
+          min="2"
+          max="4"
+          value={scale}
+          onChange={(e: any) => {
+            setScale(e.target.value);
+          }}
+          step="1"
+          className="range range-primary mt-2"
+        />
+        <div className="flex w-full justify-between px-2 text-xs font-semibold text-base-content">
+          <span>2x</span>
+          <span>3x</span>
+          <span>4x</span>
+        </div>
+      </div>
+
       <div className="relative flex flex-col gap-2">
         <button
           className="btn-primary btn-xs btn absolute top-10 right-2 z-10"