Remove unnecessary options

renderer/components/settings-tab/CompressionInput.tsx

@@ -11,15 +11,10 @@ export function CompressionInput({
     <div className="flex flex-col gap-2">
       <div className="flex gap-1 text-sm font-medium uppercase">
         <p className="shrink-0">Image Compression ({compression}%)</p>
-        <p className="badge-primary badge text-[10px] font-medium">
-          EXPERIMENTAL
-        </p>
       </div>
       {compression > 0 && (
         <p className="text-xs text-base-content/80">
-          This option can cause color issues with some images. For PNGs, if you
-          use compression, they'll use indexed colors. Keep compression to 0 for
-          PNGs for lossless quality.
+          PNG compression is not supported at the moment.
         </p>
       )}
       <input

renderer/components/settings-tab/CustomResolutionInput.tsx

@@ -1,51 +0,0 @@
-import { customWidthAtom, useCustomWidthAtom } from "@/atoms/userSettingsAtom";
-import { useAtom } from "jotai";
-import React, { useState } from "react";
-
-export function CustomResolutionInput() {
-  const [useCustomWidth, setUseCustomWidth] = useAtom(useCustomWidthAtom);
-  const [customWidth, setCustomWidth] = useAtom(customWidthAtom);
-
-  return (
-    <div>
-      <div className="flex flex-col gap-1">
-        <p className="text-sm font-medium">CUSTOM OUTPUT WIDTH</p>
-        <p className="text-xs text-base-content/80">
-          <b>REQUIRES RESTART</b>
-          <br />
-          Use a custom width for the output images. The height will be adjusted
-          automatically. Enabling this will override the scale setting.
-        </p>
-      </div>
-      <div className="flex items-center gap-2">
-        <input
-          type="checkbox"
-          className="toggle"
-          checked={useCustomWidth}
-          onClick={(e) => {
-            if (!e.currentTarget.checked) {
-              localStorage.removeItem("customWidth");
-            }
-            setUseCustomWidth(!useCustomWidth);
-          }}
-        />
-        <input
-          type="number"
-          value={customWidth}
-          disabled={!useCustomWidth}
-          onChange={(e) => {
-            if (e.currentTarget.value === "") {
-              setUseCustomWidth(false);
-              setCustomWidth(null);
-              localStorage.removeItem("customWidth");
-              return;
-            }
-            setCustomWidth(parseInt(e.currentTarget.value));
-          }}
-          step="1"
-          className="input input-primary mt-2 w-full"
-        />
-      </div>
-    </div>
-  );
-}

renderer/components/settings-tab/ImageScaleSelect.tsx

@@ -8,24 +8,19 @@ type ImageScaleSelectProps = {
 };
 
 export function ImageScaleSelect({ scale, setScale }: ImageScaleSelectProps) {
-  const [useCustomWidth, setUseCustomWidth] = useAtom(useCustomWidthAtom);
-
   return (
-    <div className={`${useCustomWidth && "opacity-50"}`}>
+    <div>
       <div className="flex flex-row gap-1">
-        <p className="text-sm font-medium">
-          IMAGE SCALE {useCustomWidth && "DISABLED"}
-        </p>
+        <p className="text-sm font-medium">IMAGE SCALE ({scale}X)</p>
         {/* 
         <p className="badge-primary badge text-[10px] font-medium">
           EXPERIMENTAL
         </p> */}
       </div>
       <input
-        disabled={useCustomWidth}
         type="range"
         min="1"
-        max="4"
+        max="16"
         value={scale}
         onChange={(e: any) => {
           setScale(e.target.value.toString());
@@ -34,10 +29,11 @@ export function ImageScaleSelect({ scale, setScale }: ImageScaleSelectProps) {
         className="range range-primary mt-2"
       />
       <div className="flex w-full justify-between px-2 text-xs font-semibold text-base-content">
-        <span>1x</span>
-        <span>2x</span>
-        <span>3x</span>
-        <span>4x</span>
+        <span>1</span>
+        <span>4</span>
+        <span>8</span>
+        <span>12</span>
+        <span>16</span>
       </div>
     </div>
   );

renderer/components/settings-tab/ProcessImageToggle.tsx

@@ -1,30 +0,0 @@
-type ProcessImageToggleProps = {
-  noImageProcessing: boolean;
-  setNoImageProcessing: (arg: any) => void;
-};
-
-const ProcessImageToggle = ({
-  noImageProcessing,
-  setNoImageProcessing,
-}: ProcessImageToggleProps) => {
-  return (
-    <div className="flex flex-col gap-2">
-      <p className="text-sm font-medium">DON'T POST-PROCESS IMAGE</p>
-      <p className="text-xs text-base-content/80">
-        If enabled, the image will not be converted or scaled or post-processed.
-        This will output the original AI upscaling result as-is. Use this if
-        you're having issues with file-size or color banding.
-      </p>
-      <input
-        type="checkbox"
-        className="toggle"
-        checked={noImageProcessing}
-        onClick={() => {
-          setNoImageProcessing(!noImageProcessing);
-        }}
-      />
-    </div>
-  );
-};
-
-export default ProcessImageToggle;

renderer/components/settings-tab/index.tsx

@@ -21,10 +21,8 @@ import { CompressionInput } from "./CompressionInput";
 import OverwriteToggle from "./OverwriteToggle";
 import { UpscaylCloudModal } from "../UpscaylCloudModal";
 import { ResetSettings } from "./ResetSettings";
-import ProcessImageToggle from "./ProcessImageToggle";
 import { featureFlags } from "@common/feature-flags";
 import TurnOffNotificationsToggle from "./TurnOffNotificationsToggle";
-import { CustomResolutionInput } from "./CustomResolutionInput";
 
 interface IProps {
   batchMode: boolean;
@@ -193,25 +191,14 @@ function SettingsTab({
         setExportType={setExportType}
       />
 
-      <ProcessImageToggle
-        noImageProcessing={noImageProcessing}
-        setNoImageProcessing={setNoImageProcessing}
+      {/* IMAGE SCALE */}
+      <ImageScaleSelect scale={scale} setScale={setScale} />
+
+      <CompressionInput
+        compression={compression}
+        handleCompressionChange={handleCompressionChange}
       />
 
-      {!noImageProcessing && (
-        <>
-          {/* IMAGE SCALE */}
-          <ImageScaleSelect scale={scale} setScale={setScale} />
-
-          <CustomResolutionInput />
-
-          <CompressionInput
-            compression={compression}
-            handleCompressionChange={handleCompressionChange}
-          />
-        </>
-      )}
-
       <SaveOutputFolderToggle />
 
       <OverwriteToggle />