Cool_Tools/upscayl
1
0
Fork 0
mirror of https://github.com/upscayl/upscayl.git synced 2024-09-24 03:18:28 +02:00
Code Releases Wiki Activity

Add scale on main screen

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
renderer/atoms/userSettingsAtom.ts
View File

@ -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);

4
renderer/components/settings-tab/CompressionInput.tsx
View File

@ -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
some images.
PNG compression is lossless, so it might not reduce the file size
significantly. JPG and WebP compression is lossy.
</p>
)}
<input

51
renderer/components/settings-tab/ImageScaleSelect.tsx
View File

@ -1,30 +1,55 @@
import { useCustomWidthAtom } from "@/atoms/userSettingsAtom";
import { useAtom } from "jotai";
import { useAtom, useAtomValue } from "jotai";
type ImageScaleSelectProps = {
scale: "4" | "2" | "3";
setScale: (arg: "4" | "2" | "3") => void;
scale: string;
setScale: React.Dispatch<React.SetStateAction<string>>;
hideInfo?: boolean;
};
export function ImageScaleSelect({ scale, setScale }: ImageScaleSelectProps) {
const [useCustomWidth, setUseCustomWidth] = useAtom(useCustomWidthAtom);
export function ImageScaleSelect({
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">
IMAGE SCALE ({scale}X) {useCustomWidth && "DISABLED"}
</p>
{hideInfo ? (
<>
<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">
Anything above 4X (except 16X Double Upscayl) only resizes the image and
does not use AI upscaling.
</p>
{parseInt(scale) >= 6 && (
{!hideInfo && (
<p className="text-xs text-base-content/80">
Anything above 4X (except 16X Double Upscayl) only resizes the image
and does not use AI upscaling.
</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"

53
renderer/components/upscayl-tab/config/LeftPaneImageSteps.tsx
View File

@ -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">
<p className="step-heading">Step 2</p>
<p className="mb-2 text-sm">Select Model</p>
<div className="animate-step-in group flex flex-col gap-4">
<div>
<p className="step-heading">Step 2</p>
<p className="mb-2 text-sm">Select Model</p>
<Select
onMenuOpen={() => setOpen(true)}
onMenuClose={() => setOpen(false)}
options={modelOptions}
components={{
IndicatorSeparator: () => null,
DropdownIndicator: () => null,
}}
onChange={(e) => {
handleModelChange(e);
setCurrentModel({ label: e.label, value: e.value });
}}
className={cn(
"react-select-container transition-all group-hover:w-full group-active:w-full focus:w-full",
open && "!w-full",
)}
classNamePrefix="react-select"
value={currentModel}
/>
<Select
onMenuOpen={() => setOpen(true)}
onMenuClose={() => setOpen(false)}
options={modelOptions}
components={{
IndicatorSeparator: () => null,
DropdownIndicator: () => null,
}}
onChange={(e) => {
handleModelChange(e);
setCurrentModel({ label: e.label, value: e.value });
}}
className={cn(
"react-select-container transition-all group-hover:w-full group-active:w-full focus:w-full",
open && "!w-full",
)}
classNamePrefix="react-select"
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 */}