mirror of
https://github.com/upscayl/upscayl.git
synced 2025-02-17 11:18:36 +01:00
Add target width
This commit is contained in:
Nayam Amarshe
parent
4590a202c5
commit
3f8fa3a563
@ -66,6 +66,9 @@ function LeftPaneImageSteps({
|
||||
const [outputPath, setOutputPath] = useAtom(outputPathAtom);
|
||||
const [progress, setProgress] = useAtom(progressAtom);
|
||||
|
||||
const [targetWidth, setTargetWidth] = useState<number>(null);
|
||||
const [targetHeight, setTargetHeight] = useState<number>(null);
|
||||
|
||||
const { logit } = useLog();
|
||||
|
||||
useEffect(() => {
|
||||
@ -78,7 +81,7 @@ function LeftPaneImageSteps({
|
||||
const currentlySavedImageFormat = localStorage.getItem("saveImageAs");
|
||||
logit(
|
||||
"⚙️ Getting saveImageAs from localStorage: ",
|
||||
currentlySavedImageFormat
|
||||
currentlySavedImageFormat,
|
||||
);
|
||||
setSaveImageAs(currentlySavedImageFormat);
|
||||
}
|
||||
@ -90,13 +93,13 @@ function LeftPaneImageSteps({
|
||||
logit("🔀 Setting model to", modelOptions[0].value);
|
||||
} else {
|
||||
const currentlySavedModel = JSON.parse(
|
||||
localStorage.getItem("model")
|
||||
localStorage.getItem("model"),
|
||||
) as (typeof modelOptions)[0];
|
||||
setCurrentModel(currentlySavedModel);
|
||||
setModel(currentlySavedModel.value);
|
||||
logit(
|
||||
"⚙️ Getting model from localStorage: ",
|
||||
JSON.stringify(currentlySavedModel)
|
||||
JSON.stringify(currentlySavedModel),
|
||||
);
|
||||
}
|
||||
|
||||
@ -114,6 +117,11 @@ function LeftPaneImageSteps({
|
||||
logit("🔀 Setting model to", currentModel.value);
|
||||
}, [currentModel]);
|
||||
|
||||
useEffect(() => {
|
||||
setTargetWidth(getUpscaleResolution().width);
|
||||
setTargetHeight(getUpscaleResolution().height);
|
||||
}, [dimensions.width, dimensions.height, doubleUpscayl, scale]);
|
||||
|
||||
const getUpscaleResolution = useCallback(() => {
|
||||
const newDimensions = {
|
||||
width: dimensions.width,
|
||||
@ -149,7 +157,8 @@ function LeftPaneImageSteps({
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`animate-step-in animate flex h-screen flex-col gap-7 overflow-y-auto p-5 overflow-x-hidden`}>
|
||||
className={`animate-step-in animate flex h-screen flex-col gap-7 overflow-y-auto overflow-x-hidden p-5`}
|
||||
>
|
||||
{/* BATCH OPTION */}
|
||||
<div className="flex flex-row items-center gap-2">
|
||||
<input
|
||||
@ -160,11 +169,13 @@ function LeftPaneImageSteps({
|
||||
setOutputPath("");
|
||||
setProgress("");
|
||||
setBatchMode((oldValue) => !oldValue);
|
||||
}}></input>
|
||||
}}
|
||||
></input>
|
||||
<p
|
||||
className="mr-1 inline-block cursor-help text-sm"
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content="This will let you Upscayl all files in a folder at once">
|
||||
data-tooltip-content="This will let you Upscayl all files in a folder at once"
|
||||
>
|
||||
Batch Upscayl
|
||||
</p>
|
||||
</div>
|
||||
@ -173,8 +184,9 @@ function LeftPaneImageSteps({
|
||||
<div data-tooltip-id="tooltip" data-tooltip-content={imagePath}>
|
||||
<p className="step-heading">Step 1</p>
|
||||
<button
|
||||
className="btn-primary btn"
|
||||
onClick={!batchMode ? selectImageHandler : selectFolderHandler}>
|
||||
className="btn btn-primary"
|
||||
onClick={!batchMode ? selectImageHandler : selectFolderHandler}
|
||||
>
|
||||
Select {batchMode ? "Folder" : "Image"}
|
||||
</button>
|
||||
</div>
|
||||
@ -194,7 +206,7 @@ function LeftPaneImageSteps({
|
||||
handleModelChange(e);
|
||||
setCurrentModel({ label: e.label, value: e.value });
|
||||
}}
|
||||
className="react-select-container group-active:w-full focus:w-full group-hover:w-full transition-all"
|
||||
className="react-select-container transition-all group-hover:w-full group-active:w-full focus:w-full"
|
||||
classNamePrefix="react-select"
|
||||
value={currentModel}
|
||||
/>
|
||||
@ -217,13 +229,15 @@ function LeftPaneImageSteps({
|
||||
className="cursor-pointer text-sm"
|
||||
onClick={(e) => {
|
||||
setDoubleUpscayl(!doubleUpscayl);
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
Double Upscayl
|
||||
</p>
|
||||
<button
|
||||
className="badge badge-sm badge-neutral cursor-help"
|
||||
className="badge badge-neutral badge-sm cursor-help"
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content="Enable this option to get a 16x upscayl (we just run upscayl twice). Note that this may not always work properly with all images, for example, images with really large resolutions.">
|
||||
data-tooltip-content="Enable this option to get a 16x upscayl (we just run upscayl twice). Note that this may not always work properly with all images, for example, images with really large resolutions."
|
||||
>
|
||||
?
|
||||
</button>
|
||||
</div>
|
||||
@ -234,25 +248,27 @@ function LeftPaneImageSteps({
|
||||
<div
|
||||
className="animate-step-in"
|
||||
data-tooltip-content={outputPath}
|
||||
data-tooltip-id="tooltip">
|
||||
data-tooltip-id="tooltip"
|
||||
>
|
||||
<div className="flex flex-col pb-2">
|
||||
<div className="step-heading flex items-center gap-2">
|
||||
<span className="leading-none">Step 3</span>
|
||||
{featureFlags.APP_STORE_BUILD && (
|
||||
<button
|
||||
className="badge badge-sm badge-outline cursor-pointer"
|
||||
className="badge badge-outline badge-sm cursor-pointer"
|
||||
onClick={() =>
|
||||
alert(
|
||||
"Due to MacOS App Store security restrictions, Upscayl requires you to select an output folder everytime you start it.\n\nTo avoid this, you can permanently save a default output folder in the Upscayl 'Settings' tab."
|
||||
"Due to MacOS App Store security restrictions, Upscayl requires you to select an output folder everytime you start it.\n\nTo avoid this, you can permanently save a default output folder in the Upscayl 'Settings' tab.",
|
||||
)
|
||||
}>
|
||||
}
|
||||
>
|
||||
?
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{!outputPath && featureFlags.APP_STORE_BUILD && (
|
||||
<div className="text-xs">
|
||||
<span className="bg-base-200 font-medium uppercase text-base-content/50 rounded-btn px-2">
|
||||
<span className="rounded-btn bg-base-200 px-2 font-medium uppercase text-base-content/50">
|
||||
Not selected
|
||||
</span>
|
||||
</div>
|
||||
@ -263,7 +279,7 @@ function LeftPaneImageSteps({
|
||||
Defaults to {!batchMode ? "Image's" : "Folder's"} path
|
||||
</p>
|
||||
)}
|
||||
<button className="btn-primary btn" onClick={outputHandler}>
|
||||
<button className="btn btn-primary" onClick={outputHandler}>
|
||||
Set Output Folder
|
||||
</button>
|
||||
</div>
|
||||
@ -273,23 +289,39 @@ function LeftPaneImageSteps({
|
||||
<p className="step-heading">Step 4</p>
|
||||
{dimensions.width && dimensions.height && (
|
||||
<p className="mb-2 text-sm">
|
||||
Upscayl from{" "}
|
||||
Upscayl from <br />
|
||||
<span className="font-bold">
|
||||
{dimensions.width}x{dimensions.height}
|
||||
</span>{" "}
|
||||
to{" "}
|
||||
<span className="font-bold">
|
||||
to
|
||||
<div className="flex items-center gap-1">
|
||||
<input
|
||||
className="input input-primary h-8 w-16 px-2 py-0 text-sm font-bold"
|
||||
defaultValue={getUpscaleResolution().width}
|
||||
value={targetWidth}
|
||||
onChange={(e) => setTargetWidth(parseInt(e.target.value))}
|
||||
/>{" "}
|
||||
x{" "}
|
||||
<input
|
||||
className="input input-primary h-8 w-16 px-2 py-0 text-sm font-bold"
|
||||
defaultValue={getUpscaleResolution().width}
|
||||
value={targetHeight}
|
||||
onChange={(e) => setTargetHeight(parseInt(e.target.value))}
|
||||
/>
|
||||
</div>
|
||||
{/* <span className="font-bold">
|
||||
{getUpscaleResolution().width}x{getUpscaleResolution().height}
|
||||
</span>
|
||||
</span> */}
|
||||
</p>
|
||||
)}
|
||||
<button
|
||||
className="btn-accent btn"
|
||||
className="btn btn-accent"
|
||||
onClick={
|
||||
progress.length > 0 || !outputPath
|
||||
? () => alert("Please select an output folder first")
|
||||
: upscaylHandler
|
||||
}>
|
||||
}
|
||||
>
|
||||
{progress.length > 0 ? "Upscayling⏳" : "Upscayl"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user