mirror of
https://github.com/upscayl/upscayl.git
synced 2024-11-12 01:40:53 +01:00
Add scale on main screen
This commit is contained in:
parent
8b2ca0238c
commit
bc63f8533e
@ -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);
|
||||||
|
|
||||||
|
@ -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
|
||||||
|
@ -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"
|
||||||
|
@ -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 */}
|
||||||
|
Loading…
Reference in New Issue
Block a user