Add scale on main screen

renderer/atoms/userSettingsAtom.ts

@@ -6,7 +6,7 @@ export const customModelsPathAtom = atomWithStorage<string | null>(
   null,
 );
 
-export const scaleAtom = atomWithStorage<"2" | "3" | "4">("scale", "4");
+export const scaleAtom = atomWithStorage<string>("scale", "4");
 
 export const batchModeAtom = atom<boolean>(false);
 

renderer/components/settings-tab/CompressionInput.tsx

@@ -14,8 +14,8 @@ export function CompressionInput({
       </div>
       {compression > 0 && (
         <p className="text-xs text-base-content/80">
-          PNG compression is lossless. It might not have a significant effect on
+          PNG compression is lossless, so it might not reduce the file size
-          some images.
+          significantly. JPG and WebP compression is lossy.
         </p>
       )}
       <input

renderer/components/settings-tab/ImageScaleSelect.tsx

@@ -1,30 +1,55 @@
 import { useCustomWidthAtom } from "@/atoms/userSettingsAtom";
-import { useAtom } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 
 type ImageScaleSelectProps = {
-  scale: "4" | "2" | "3";
+  scale: string;
-  setScale: (arg: "4" | "2" | "3") => void;
+  setScale: React.Dispatch<React.SetStateAction<string>>;
+  hideInfo?: boolean;
 };
 
-export function ImageScaleSelect({ scale, setScale }: ImageScaleSelectProps) {
+export function ImageScaleSelect({
-  const [useCustomWidth, setUseCustomWidth] = useAtom(useCustomWidthAtom);
+  scale,
+  setScale,
+  hideInfo,
+}: ImageScaleSelectProps) {
+  const useCustomWidth = useAtomValue(useCustomWidthAtom);
 
   return (
     <div className={`${useCustomWidth && "opacity-50"}`}>
       <div className="flex flex-row gap-1">
-        <p className="text-sm font-medium">
+        {hideInfo ? (
-          IMAGE SCALE ({scale}X) {useCustomWidth && "DISABLED"}
+          <>
-        </p>
+            <p className="text-sm">
+              Image Scale <span className="text-xs">({scale}X)</span>
+            </p>
+            {hideInfo && parseInt(scale) >= 6 && (
+              <p
+                className="badge badge-warning text-xs font-bold"
+                data-tooltip-id="tooltip"
+                data-tooltip-content="Anything above 5X may cause performance issues on some devices!"
+              >
+                !
+              </p>
+            )}
+          </>
+        ) : (
+          <p className="text-sm font-medium">
+            IMAGE SCALE ({scale}X) {useCustomWidth && "DISABLED"}
+          </p>
+        )}
       </div>
-      <p className="text-xs text-base-content/80">
+      {!hideInfo && (
-        Anything above 4X (except 16X Double Upscayl) only resizes the image and
+        <p className="text-xs text-base-content/80">
-        does not use AI upscaling.
+          Anything above 4X (except 16X Double Upscayl) only resizes the image
-      </p>
+          and does not use AI upscaling.
-      {parseInt(scale) >= 6 && (
+        </p>
+      )}
+      {!hideInfo && parseInt(scale) >= 6 && (
         <p className="text-xs text-base-content/80 text-red-500">
           This may cause performance issues on some devices!
         </p>
       )}
+
       <input
         type="range"
         min="1"

renderer/components/upscayl-tab/config/LeftPaneImageSteps.tsx

@@ -19,6 +19,7 @@ import COMMAND from "@common/commands";
 import Select from "react-select";
 import { cn } from "@/lib/utils";
 import { useToast } from "@/components/ui/use-toast";
+import { ImageScaleSelect } from "@/components/settings-tab/ImageScaleSelect";
 
 interface IProps {
   selectImageHandler: () => Promise<void>;
@@ -62,7 +63,7 @@ function LeftPaneImageSteps({
   });
 
   const modelOptions = useAtomValue(modelsListAtom);
-  const scale = useAtomValue(scaleAtom);
+  const [scale, setScale] = useAtom(scaleAtom);
   const noImageProcessing = useAtomValue(noImageProcessingAtom);
   const [outputPath, setOutputPath] = useAtom(savedOutputPathAtom);
   const [progress, setProgress] = useAtom(progressAtom);
@@ -204,32 +205,34 @@ function LeftPaneImageSteps({
       </div>
 
       {/* STEP 2 */}
-      <div className="animate-step-in group">
+      <div className="animate-step-in group flex flex-col gap-4">
-        <p className="step-heading">Step 2</p>
+        <div>
-        <p className="mb-2 text-sm">Select Model</p>
+          <p className="step-heading">Step 2</p>
+          <p className="mb-2 text-sm">Select Model</p>
 
-        <Select
+          <Select
-          onMenuOpen={() => setOpen(true)}
+            onMenuOpen={() => setOpen(true)}
-          onMenuClose={() => setOpen(false)}
+            onMenuClose={() => setOpen(false)}
-          options={modelOptions}
+            options={modelOptions}
-          components={{
+            components={{
-            IndicatorSeparator: () => null,
+              IndicatorSeparator: () => null,
-            DropdownIndicator: () => null,
+              DropdownIndicator: () => null,
-          }}
+            }}
-          onChange={(e) => {
+            onChange={(e) => {
-            handleModelChange(e);
+              handleModelChange(e);
-            setCurrentModel({ label: e.label, value: e.value });
+              setCurrentModel({ label: e.label, value: e.value });
-          }}
+            }}
-          className={cn(
+            className={cn(
-            "react-select-container transition-all group-hover:w-full group-active:w-full focus:w-full",
+              "react-select-container transition-all group-hover:w-full group-active:w-full focus:w-full",
-            open && "!w-full",
+              open && "!w-full",
-          )}
+            )}
-          classNamePrefix="react-select"
+            classNamePrefix="react-select"
-          value={currentModel}
+            value={currentModel}
-        />
+          />
+        </div>
 
         {!batchMode && (
-          <div className="mt-4 flex items-center gap-1">
+          <div className="flex items-center gap-1">
             <input
               type="checkbox"
               className="checkbox"
@@ -259,6 +262,8 @@ function LeftPaneImageSteps({
             </button>
           </div>
         )}
+
+        <ImageScaleSelect scale={scale} setScale={setScale} hideInfo />
       </div>
 
       {/* STEP 3 */}