mirror of
https://github.com/upscayl/upscayl.git
synced 2024-11-30 18:24:27 +01:00
Added batch mode option
This commit is contained in:
parent
f9308b5c9d
commit
956f96481a
@ -141,6 +141,7 @@
|
|||||||
"image-size": "^1.0.2",
|
"image-size": "^1.0.2",
|
||||||
"react-compare-slider": "^2.2.0",
|
"react-compare-slider": "^2.2.0",
|
||||||
"react-dropzone": "^14.2.2",
|
"react-dropzone": "^14.2.2",
|
||||||
|
"react-tooltip": "^4.2.21",
|
||||||
"tailwind-scrollbar": "^1.3.1"
|
"tailwind-scrollbar": "^1.3.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,93 +1,156 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
import ReactTooltip from "react-tooltip";
|
||||||
|
|
||||||
function LeftPaneSteps(props) {
|
function LeftPaneSteps(props) {
|
||||||
|
const handleBatchMode = () => {
|
||||||
|
props.setBatchMode((oldValue) => !oldValue);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="animate-step-in animate flex h-screen flex-col gap-10 overflow-auto p-5">
|
<div className="animate-step-in animate flex h-screen flex-col gap-7 overflow-auto p-5">
|
||||||
{/* STEP 1 */}
|
{/* BATCH OPTION */}
|
||||||
<div className="">
|
<div className="flex flex-row items-end">
|
||||||
<p className="mb-2 font-medium text-neutral-100">Step 1</p>
|
<p
|
||||||
<button
|
className="mr-1 inline-block cursor-help text-sm text-neutral-400"
|
||||||
className="rounded-lg bg-rose-400 p-3 transition-colors hover:bg-rose-300"
|
data-tip="This will let you upscale all files in a folder at once"
|
||||||
onClick={props.selectImageHandler}
|
|
||||||
>
|
>
|
||||||
Select Image
|
Batch Upscale:
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* STEP 2 */}
|
|
||||||
<div className="animate-step-in">
|
|
||||||
<p className="font-medium text-neutral-100">Step 2</p>
|
|
||||||
<p className="mb-2 text-sm text-neutral-400">Select Upscaling Type</p>
|
|
||||||
<select
|
|
||||||
name="select-model"
|
|
||||||
onDrop={(e) => props.handleDrop(e)}
|
|
||||||
className="rounded-lg bg-slate-300 p-3 hover:bg-slate-200"
|
|
||||||
onChange={props.handleModelChange}
|
|
||||||
>
|
|
||||||
<option value="realesrgan-x4plus">General Photo</option>
|
|
||||||
<option value="realesrgan-x4plus-anime">Digital Art</option>
|
|
||||||
<option value="models-DF2K">Sharpen</option>
|
|
||||||
<option value="models-DF2K_JPEG">Sharpen JPEG</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* STEP 3
|
|
||||||
<div className="mt-10">
|
|
||||||
<p className="font-medium text-neutral-100">Step 3</p>
|
|
||||||
<p className="mb-2 text-sm text-neutral-400">Select Scale Factor</p>
|
|
||||||
<div className="animate flex flex-row gap-2">
|
|
||||||
<button
|
|
||||||
className={`h-12 w-12 rounded-lg ${
|
|
||||||
scaleFactor === 2 ? "bg-yellow-400" : "bg-neutral-400"
|
|
||||||
}`}
|
|
||||||
onClick={() => setScaleFactor(2)}
|
|
||||||
>
|
|
||||||
2x
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
className={`h-12 w-12 rounded-lg ${
|
|
||||||
scaleFactor === 3 ? "bg-yellow-400" : "bg-neutral-400"
|
|
||||||
}`}
|
|
||||||
onClick={() => setScaleFactor(3)}
|
|
||||||
>
|
|
||||||
3x
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
className={`h-12 w-12 rounded-lg ${
|
|
||||||
scaleFactor === 4 ? "bg-yellow-400" : "bg-neutral-400"
|
|
||||||
}`}
|
|
||||||
onClick={() => setScaleFactor(4)}
|
|
||||||
>
|
|
||||||
4x
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div> */}
|
|
||||||
|
|
||||||
{/* STEP 3 */}
|
|
||||||
<div className="animate-step-in">
|
|
||||||
<p className="font-medium text-neutral-100">Step 3</p>
|
|
||||||
<p className="mb-2 text-sm text-neutral-400">
|
|
||||||
Defaults to Image's path
|
|
||||||
</p>
|
</p>
|
||||||
<button
|
<div
|
||||||
className="mt-1 rounded-lg bg-teal-400 p-3 transition-colors hover:bg-teal-300"
|
className={`animate relative inline-block h-5 w-8 cursor-pointer rounded-full ${
|
||||||
onClick={props.outputHandler}
|
props.batchMode ? "bg-red-500" : "bg-neutral-500"
|
||||||
|
}`}
|
||||||
|
onClick={handleBatchMode}
|
||||||
>
|
>
|
||||||
Set Output Folder
|
<div
|
||||||
</button>
|
className={`${
|
||||||
|
props.batchMode ? "right-1" : "left-1"
|
||||||
|
} animate absolute top-1/2 h-3 w-3 -translate-y-1/2 rounded-full bg-neutral-100`}
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* STEP 4 */}
|
{!props.batchMode ? (
|
||||||
<div className="animate-step-in">
|
<>
|
||||||
<p className="mb-2 font-medium text-neutral-100">Step 4</p>
|
{/* STEP 1 */}
|
||||||
<button
|
<div data-tip={props.imagePath}>
|
||||||
className="rounded-lg bg-sky-400 p-3 transition-colors hover:bg-sky-300"
|
<p className="mb-2 font-medium text-neutral-100">Step 1</p>
|
||||||
onClick={props.upscaylHandler}
|
<button
|
||||||
disabled={props.progress.length > 0}
|
className="rounded-lg bg-rose-400 p-3 transition-colors hover:bg-rose-300"
|
||||||
>
|
onClick={props.selectImageHandler}
|
||||||
{props.progress.length > 0 ? "Upscayling⏳" : "Upscayl"}
|
>
|
||||||
</button>
|
Select Image
|
||||||
</div>
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* STEP 2 */}
|
||||||
|
<div className="animate-step-in">
|
||||||
|
<p className="font-medium text-neutral-100">Step 2</p>
|
||||||
|
<p className="mb-2 text-sm text-neutral-400">
|
||||||
|
Select Upscaling Type
|
||||||
|
</p>
|
||||||
|
<select
|
||||||
|
name="select-model"
|
||||||
|
onDrop={(e) => props.handleDrop(e)}
|
||||||
|
className="rounded-lg bg-slate-300 p-3 hover:bg-slate-200"
|
||||||
|
onChange={props.handleModelChange}
|
||||||
|
>
|
||||||
|
<option value="realesrgan-x4plus">General Photo</option>
|
||||||
|
<option value="realesrgan-x4plus-anime">Digital Art</option>
|
||||||
|
<option value="models-DF2K">Sharpen</option>
|
||||||
|
<option value="models-DF2K_JPEG">Sharpen JPEG</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* STEP 3 */}
|
||||||
|
<div className="animate-step-in" data-tip={props.outputPath}>
|
||||||
|
<p className="font-medium text-neutral-100">Step 3</p>
|
||||||
|
<p className="mb-2 text-sm text-neutral-400">
|
||||||
|
Defaults to Image's path
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
className="mt-1 rounded-lg bg-teal-400 p-3 transition-colors hover:bg-teal-300"
|
||||||
|
onClick={props.outputHandler}
|
||||||
|
>
|
||||||
|
Set Output Folder
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* STEP 4 */}
|
||||||
|
<div className="animate-step-in">
|
||||||
|
<p className="mb-2 font-medium text-neutral-100">Step 4</p>
|
||||||
|
<button
|
||||||
|
className="rounded-lg bg-sky-400 p-3 transition-colors hover:bg-sky-300"
|
||||||
|
onClick={props.upscaylHandler}
|
||||||
|
disabled={props.progress.length > 0}
|
||||||
|
>
|
||||||
|
{props.progress.length > 0 ? "Upscayling⏳" : "Upscayl"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{/* STEP 1 */}
|
||||||
|
<div className="">
|
||||||
|
<p className="mb-2 font-medium text-neutral-100">Step 1</p>
|
||||||
|
<button
|
||||||
|
className="rounded-lg bg-rose-400 p-3 transition-colors hover:bg-rose-300"
|
||||||
|
onClick={props.selectFolderHandler}
|
||||||
|
>
|
||||||
|
Select Folder
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* STEP 2 */}
|
||||||
|
<div className="animate-step-in">
|
||||||
|
<p className="font-medium text-neutral-100">Step 2</p>
|
||||||
|
<p className="mb-2 text-sm text-neutral-400">
|
||||||
|
Select Upscaling Type
|
||||||
|
</p>
|
||||||
|
<select
|
||||||
|
name="select-model"
|
||||||
|
onDrop={(e) => props.handleDrop(e)}
|
||||||
|
className="rounded-lg bg-slate-300 p-3 hover:bg-slate-200"
|
||||||
|
onChange={props.handleModelChange}
|
||||||
|
>
|
||||||
|
<option value="realesrgan-x4plus">General Photo</option>
|
||||||
|
<option value="realesrgan-x4plus-anime">Digital Art</option>
|
||||||
|
<option value="models-DF2K">Sharpen</option>
|
||||||
|
<option value="models-DF2K_JPEG">Sharpen JPEG</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* STEP 3 */}
|
||||||
|
<div className="animate-step-in">
|
||||||
|
<p className="font-medium text-neutral-100">Step 3</p>
|
||||||
|
<p className="mb-2 text-sm text-neutral-400">
|
||||||
|
Defaults to Folder's Path
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
className="mt-1 rounded-lg bg-teal-400 p-3 transition-colors hover:bg-teal-300"
|
||||||
|
onClick={props.outputHandler}
|
||||||
|
>
|
||||||
|
Set Output Folder
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* STEP 4 */}
|
||||||
|
<div className="animate-step-in">
|
||||||
|
<p className="mb-2 font-medium text-neutral-100">Step 4</p>
|
||||||
|
<button
|
||||||
|
className="rounded-lg bg-sky-400 p-3 transition-colors hover:bg-sky-300"
|
||||||
|
onClick={props.upscaylHandler}
|
||||||
|
disabled={props.progress.length > 0}
|
||||||
|
>
|
||||||
|
{props.progress.length > 0 ? "Upscayling⏳" : "Upscayl"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<ReactTooltip
|
||||||
|
className="max-w-72 break-words bg-neutral-900 text-neutral-50"
|
||||||
|
place="top"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -20,6 +20,7 @@ const Home = () => {
|
|||||||
const [model, setModel] = useState("realesrgan-x4plus");
|
const [model, setModel] = useState("realesrgan-x4plus");
|
||||||
const [loaded, setLoaded] = useState(false);
|
const [loaded, setLoaded] = useState(false);
|
||||||
const [version, setVersion] = useState("");
|
const [version, setVersion] = useState("");
|
||||||
|
const [batchMode, setBatchMode] = useState(false);
|
||||||
|
|
||||||
const resetImagePaths = () => {
|
const resetImagePaths = () => {
|
||||||
setProgress("");
|
setProgress("");
|
||||||
@ -39,6 +40,7 @@ const Home = () => {
|
|||||||
resetImagePaths();
|
resetImagePaths();
|
||||||
} else if (data.includes("failed")) {
|
} else if (data.includes("failed")) {
|
||||||
alert(
|
alert(
|
||||||
|
data.includes("encode") ? "ENCODING ERROR => " : "DECODING ERROR => ",
|
||||||
"This image is possibly corrupt or not supported by Upscayl. You could try converting the image into another format and upscaling again. Otherwise, make sure that the output path is correct and you have the proper write permissions for the directory. If not, then unfortuantely this image is not supported by Upscayl, sorry."
|
"This image is possibly corrupt or not supported by Upscayl. You could try converting the image into another format and upscaling again. Otherwise, make sure that the output path is correct and you have the proper write permissions for the directory. If not, then unfortuantely this image is not supported by Upscayl, sorry."
|
||||||
);
|
);
|
||||||
resetImagePaths();
|
resetImagePaths();
|
||||||
@ -70,12 +72,10 @@ const Home = () => {
|
|||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
console.log("drag enter");
|
console.log("drag enter");
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDragLeave = (e) => {
|
const handleDragLeave = (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
console.log("drag leave");
|
console.log("drag leave");
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDragOver = (e) => {
|
const handleDragOver = (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
console.log("drag over");
|
console.log("drag over");
|
||||||
@ -168,6 +168,10 @@ const Home = () => {
|
|||||||
handleDrop={handleDrop}
|
handleDrop={handleDrop}
|
||||||
outputHandler={outputHandler}
|
outputHandler={outputHandler}
|
||||||
upscaylHandler={upscaylHandler}
|
upscaylHandler={upscaylHandler}
|
||||||
|
batchMode={batchMode}
|
||||||
|
setBatchMode={setBatchMode}
|
||||||
|
imagePath={imagePath}
|
||||||
|
outputPath={outputPath}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Footer />
|
<Footer />
|
||||||
|
15
yarn.lock
15
yarn.lock
@ -1993,7 +1993,7 @@ progress@^2.0.3:
|
|||||||
resolved "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz"
|
resolved "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz"
|
||||||
integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
|
integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
|
||||||
|
|
||||||
prop-types@^15.8.1:
|
prop-types@^15.7.2, prop-types@^15.8.1:
|
||||||
version "15.8.1"
|
version "15.8.1"
|
||||||
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
|
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
|
||||||
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
|
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
|
||||||
@ -2082,6 +2082,14 @@ react-is@^16.13.1:
|
|||||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
|
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
|
||||||
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
|
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
|
||||||
|
|
||||||
|
react-tooltip@^4.2.21:
|
||||||
|
version "4.2.21"
|
||||||
|
resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-4.2.21.tgz#840123ed86cf33d50ddde8ec8813b2960bfded7f"
|
||||||
|
integrity sha512-zSLprMymBDowknr0KVDiJ05IjZn9mQhhg4PRsqln0OZtURAJ1snt1xi5daZfagsh6vfsziZrc9pErPTDY1ACig==
|
||||||
|
dependencies:
|
||||||
|
prop-types "^15.7.2"
|
||||||
|
uuid "^7.0.3"
|
||||||
|
|
||||||
react@^17.0.2:
|
react@^17.0.2:
|
||||||
version "17.0.2"
|
version "17.0.2"
|
||||||
resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
|
resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
|
||||||
@ -2544,6 +2552,11 @@ util-deprecate@^1.0.2:
|
|||||||
resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
|
resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
|
||||||
integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
|
integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
|
||||||
|
|
||||||
|
uuid@^7.0.3:
|
||||||
|
version "7.0.3"
|
||||||
|
resolved "https://registry.yarnpkg.com/uuid/-/uuid-7.0.3.tgz#c5c9f2c8cf25dc0a372c4df1441c41f5bd0c680b"
|
||||||
|
integrity sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==
|
||||||
|
|
||||||
verror@^1.10.0:
|
verror@^1.10.0:
|
||||||
version "1.10.1"
|
version "1.10.1"
|
||||||
resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.1.tgz#4bf09eeccf4563b109ed4b3d458380c972b0cdeb"
|
resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.1.tgz#4bf09eeccf4563b109ed4b3d458380c972b0cdeb"
|
||||||
|
Loading…
Reference in New Issue
Block a user