1
0
mirror of https://github.com/upscayl/upscayl.git synced 2024-11-23 23:21:05 +01:00

Add scale on main screen

This commit is contained in:
Nayam Amarshe 2024-04-21 22:57:16 +05:30
parent 8b2ca0238c
commit bc63f8533e
4 changed files with 70 additions and 40 deletions

View File

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

View File

@ -14,8 +14,8 @@ export function CompressionInput({
</div> </div>
{compression > 0 && ( {compression > 0 && (
<p className="text-xs text-base-content/80"> <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> </p>
)} )}
<input <input

View File

@ -1,30 +1,55 @@
import { useCustomWidthAtom } from "@/atoms/userSettingsAtom"; import { useCustomWidthAtom } from "@/atoms/userSettingsAtom";
import { useAtom } from "jotai"; import { useAtom, useAtomValue } from "jotai";
type ImageScaleSelectProps = { 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 ( return (
<div className={`${useCustomWidth && "opacity-50"}`}> <div className={`${useCustomWidth && "opacity-50"}`}>
<div className="flex flex-row gap-1"> <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> </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"> <p className="text-xs text-base-content/80 text-red-500">
This may cause performance issues on some devices! This may cause performance issues on some devices!
</p> </p>
)} )}
<input <input
type="range" type="range"
min="1" min="1"

View File

@ -19,6 +19,7 @@ import COMMAND from "@common/commands";
import Select from "react-select"; import Select from "react-select";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { useToast } from "@/components/ui/use-toast"; import { useToast } from "@/components/ui/use-toast";
import { ImageScaleSelect } from "@/components/settings-tab/ImageScaleSelect";
interface IProps { interface IProps {
selectImageHandler: () => Promise<void>; selectImageHandler: () => Promise<void>;
@ -62,7 +63,7 @@ function LeftPaneImageSteps({
}); });
const modelOptions = useAtomValue(modelsListAtom); const modelOptions = useAtomValue(modelsListAtom);
const scale = useAtomValue(scaleAtom); const [scale, setScale] = useAtom(scaleAtom);
const noImageProcessing = useAtomValue(noImageProcessingAtom); const noImageProcessing = useAtomValue(noImageProcessingAtom);
const [outputPath, setOutputPath] = useAtom(savedOutputPathAtom); const [outputPath, setOutputPath] = useAtom(savedOutputPathAtom);
const [progress, setProgress] = useAtom(progressAtom); const [progress, setProgress] = useAtom(progressAtom);
@ -204,32 +205,34 @@ function LeftPaneImageSteps({
</div> </div>
{/* STEP 2 */} {/* 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 && ( {!batchMode && (
<div className="mt-4 flex items-center gap-1"> <div className="flex items-center gap-1">
<input <input
type="checkbox" type="checkbox"
className="checkbox" className="checkbox"
@ -259,6 +262,8 @@ function LeftPaneImageSteps({
</button> </button>
</div> </div>
)} )}
<ImageScaleSelect scale={scale} setScale={setScale} hideInfo />
</div> </div>
{/* STEP 3 */} {/* STEP 3 */}