1
0
mirror of https://github.com/upscayl/upscayl.git synced 2024-12-05 04:17:56 +01:00
upscayl/renderer/components/upscayl-tab/config/LeftPaneImageSteps.tsx
2023-07-22 16:37:53 +05:30

248 lines
7.4 KiB
TypeScript

import { useAtom, useAtomValue } from "jotai";
import React, { useEffect, useState } from "react";
import Select from "react-select";
import ReactTooltip from "react-tooltip";
import { themeChange } from "theme-change";
import { modelsListAtom } from "../../../atoms/modelsListAtom";
import useLog from "../../hooks/useLog";
interface IProps {
progress: string;
selectImageHandler: () => Promise<void>;
selectFolderHandler: () => Promise<void>;
handleModelChange: (e: any) => void;
outputHandler: () => Promise<void>;
upscaylHandler: () => Promise<void>;
batchMode: boolean;
setBatchMode: React.Dispatch<React.SetStateAction<boolean>>;
imagePath: string;
outputPath: string;
doubleUpscayl: boolean;
setDoubleUpscayl: React.Dispatch<React.SetStateAction<boolean>>;
dimensions: {
width: number | null;
height: number | null;
};
setSaveImageAs: React.Dispatch<React.SetStateAction<string>>;
setModel: React.Dispatch<React.SetStateAction<string>>;
setGpuId: React.Dispatch<React.SetStateAction<string>>;
}
function LeftPaneImageSteps({
progress,
selectImageHandler,
selectFolderHandler,
handleModelChange,
outputHandler,
upscaylHandler,
batchMode,
setBatchMode,
imagePath,
outputPath,
doubleUpscayl,
setDoubleUpscayl,
dimensions,
setSaveImageAs,
setModel,
setGpuId,
}: IProps) {
const [currentModel, setCurrentModel] = useState<{
label: string;
value: string;
}>({
label: null,
value: null,
});
const modelOptions = useAtomValue(modelsListAtom);
const { logit } = useLog();
useEffect(() => {
themeChange(false);
if (!localStorage.getItem("saveImageAs")) {
logit("⚙️ Setting saveImageAs to png");
localStorage.setItem("saveImageAs", "png");
} else {
const currentlySavedImageFormat = localStorage.getItem("saveImageAs");
logit(
"⚙️ Getting saveImageAs from localStorage",
currentlySavedImageFormat
);
setSaveImageAs(currentlySavedImageFormat);
}
if (!localStorage.getItem("model")) {
setCurrentModel(modelOptions[0]);
setModel(modelOptions[0].value);
localStorage.setItem("model", JSON.stringify(modelOptions[0]));
logit("🔀 Setting model to", modelOptions[0].value);
} else {
const currentlySavedModel = JSON.parse(
localStorage.getItem("model")
) as (typeof modelOptions)[0];
setCurrentModel(currentlySavedModel);
setModel(currentlySavedModel.value);
logit(
"⚙️ Getting model from localStorage",
JSON.stringify(currentlySavedModel)
);
}
if (!localStorage.getItem("gpuId")) {
localStorage.setItem("gpuId", "");
logit("⚙️ Setting gpuId to empty string");
} else {
const currentlySavedGpuId = localStorage.getItem("gpuId");
setGpuId(currentlySavedGpuId);
logit("⚙️ Getting gpuId from localStorage", currentlySavedGpuId);
}
}, []);
useEffect(() => {
logit("🔀 Setting model to", currentModel.value);
}, [currentModel]);
const getUpscaleResolution = () => {
const newDimensions = {
width: dimensions.width,
height: dimensions.height,
};
if (doubleUpscayl) {
newDimensions.width = dimensions.width * 16;
newDimensions.height = dimensions.height * 16;
} else {
newDimensions.width = dimensions.width * 4;
newDimensions.height = dimensions.height * 4;
}
if (newDimensions.width > 32768) {
logit("🚫 Upscale width is too large, setting to a maximum of 32768px");
newDimensions.width = 32384;
}
if (newDimensions.height > 32768) {
logit("🚫 Upscale height is too large, setting to a maximum of 32768px");
newDimensions.height = 32384;
}
return newDimensions;
};
return (
<div className="animate-step-in animate flex h-screen flex-col gap-7 overflow-y-auto p-5 overflow-x-hidden">
{/* BATCH OPTION */}
<div className="flex flex-row items-center gap-2">
<input
type="checkbox"
className="toggle"
defaultChecked={batchMode}
onClick={() => setBatchMode((oldValue) => !oldValue)}></input>
<p
className="mr-1 inline-block cursor-help text-sm"
data-tip="This will let you Upscayl all files in a folder at once">
Batch Upscayl
</p>
</div>
{/* STEP 1 */}
<div data-tip={imagePath}>
<p className="step-heading">Step 1</p>
<button
className="btn-primary btn"
onClick={!batchMode ? selectImageHandler : selectFolderHandler}>
Select {batchMode ? "Folder" : "Image"}
</button>
</div>
{/* STEP 2 */}
<div className="animate-step-in">
<p className="step-heading">Step 2</p>
<p className="mb-2 text-sm">Select Upscayling Type</p>
<Select
options={modelOptions}
components={{
IndicatorSeparator: () => null,
DropdownIndicator: () => null,
}}
onChange={(e) => {
handleModelChange(e);
setCurrentModel({ label: e.label, value: e.value });
}}
className="react-select-container"
classNamePrefix="react-select"
value={currentModel}
/>
{!batchMode && (
<div className="mt-4 flex items-center gap-1">
<input
type="checkbox"
className="checkbox"
checked={doubleUpscayl}
onChange={(e) => {
if (e.target.checked) {
setDoubleUpscayl(true);
} else {
setDoubleUpscayl(false);
}
}}
/>
<p
className="cursor-pointer text-sm"
onClick={(e) => {
setDoubleUpscayl(!doubleUpscayl);
}}>
Double Upscayl
</p>
<button
className="badge-info badge cursor-help"
data-tip="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.">
i
</button>
</div>
)}
</div>
{/* STEP 3 */}
<div className="animate-step-in" data-tip={outputPath}>
<p className="step-heading">Step 3</p>
<p className="mb-2 text-sm">
Defaults to {!batchMode ? "Image's" : "Folder's"} path
</p>
<button className="btn-primary btn" onClick={outputHandler}>
Set Output Folder
</button>
</div>
{/* STEP 4 */}
<div className="animate-step-in">
<p className="step-heading">Step 4</p>
{dimensions.width && dimensions.height && (
<p className="mb-2 text-sm">
Upscayl from{" "}
<span className="font-bold">
{dimensions.width}x{dimensions.height}
</span>{" "}
to{" "}
<span className="font-bold">
{getUpscaleResolution().width}x{getUpscaleResolution().height}
</span>
</p>
)}
<button
className="btn-accent btn"
onClick={upscaylHandler}
disabled={progress.length > 0}>
{progress.length > 0 ? "Upscayling⏳" : "Upscayl"}
</button>
</div>
<ReactTooltip class="max-w-sm" />
</div>
);
}
export default LeftPaneImageSteps;