Cool_Tools/upscayl
1
0
Fork 0
mirror of https://github.com/upscayl/upscayl.git synced 2024-11-12 01:40:53 +01:00
Code Releases Wiki Activity

Added batch mode option

Browse Source
This commit is contained in:
Nayam Amarshe 2022-09-08 12:22:00 +05:30
parent f9308b5c9d
commit 956f96481a
4 changed files with 165 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -141,6 +141,7 @@
"image-size": "^1.0.2",
"react-compare-slider": "^2.2.0",
"react-dropzone": "^14.2.2",
"react-tooltip": "^4.2.21",
"tailwind-scrollbar": "^1.3.1"
}
}

225
renderer/components/LeftPaneSteps.jsx
View File

@ -1,93 +1,156 @@
import React from "react";
import ReactTooltip from "react-tooltip";
function LeftPaneSteps(props) {
const handleBatchMode = () => {
props.setBatchMode((oldValue) => !oldValue);
};
return (
<div className="animate-step-in animate flex h-screen flex-col gap-10 overflow-auto p-5">
{/* 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.selectImageHandler}
<div className="animate-step-in animate flex h-screen flex-col gap-7 overflow-auto p-5">
{/* BATCH OPTION */}
<div className="flex flex-row items-end">
<p
className="mr-1 inline-block cursor-help text-sm text-neutral-400"
data-tip="This will let you upscale all files in a folder at once"
>
Select Image
</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
Batch Upscale:
</p>
<button
className="mt-1 rounded-lg bg-teal-400 p-3 transition-colors hover:bg-teal-300"
onClick={props.outputHandler}
<div
className={`animate relative inline-block h-5 w-8 cursor-pointer rounded-full ${
props.batchMode ? "bg-red-500" : "bg-neutral-500"
}`}
onClick={handleBatchMode}
>
Set Output Folder
</button>
<div
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>
{/* 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>
{!props.batchMode ? (
<>
{/* STEP 1 */}
<div data-tip={props.imagePath}>
<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.selectImageHandler}
>
Select Image
</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>
);
}

8
renderer/pages/index.jsx
View File

@ -20,6 +20,7 @@ const Home = () => {
const [model, setModel] = useState("realesrgan-x4plus");
const [loaded, setLoaded] = useState(false);
const [version, setVersion] = useState("");
const [batchMode, setBatchMode] = useState(false);
const resetImagePaths = () => {
setProgress("");
@ -39,6 +40,7 @@ const Home = () => {
resetImagePaths();
} else if (data.includes("failed")) {
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."
);
resetImagePaths();
@ -70,12 +72,10 @@ const Home = () => {
e.preventDefault();
console.log("drag enter");
};
const handleDragLeave = (e) => {
e.preventDefault();
console.log("drag leave");
};
const handleDragOver = (e) => {
e.preventDefault();
console.log("drag over");
@ -168,6 +168,10 @@ const Home = () => {
handleDrop={handleDrop}
outputHandler={outputHandler}
upscaylHandler={upscaylHandler}
batchMode={batchMode}
setBatchMode={setBatchMode}
imagePath={imagePath}
outputPath={outputPath}
/>
<Footer />

15
yarn.lock
View File

@ -1993,7 +1993,7 @@ progress@^2.0.3:
resolved "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz"
integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
prop-types@^15.8.1:
prop-types@^15.7.2, prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
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"
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:
version "17.0.2"
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"
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:
version "1.10.1"
resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.1.tgz#4bf09eeccf4563b109ed4b3d458380c972b0cdeb"