1
0
mirror of https://github.com/upscayl/upscayl.git synced 2025-02-20 20:51:49 +01:00

Added zoom code

This commit is contained in:
Feenix 2022-12-16 21:50:46 +05:30
parent 0f19e669d6
commit 8868167e4b
11 changed files with 459 additions and 270 deletions

View File

@ -120,6 +120,8 @@ ipcMain.on(commands.DOUBLE_UPSCAYL, async (event, payload) => {
const model = payload.model;
let inputDir = payload.imagePath.match(/(.*)[\/\\]/)[1] || "";
let outputDir = payload.outputPath;
const gpuId = payload.gpuId;
const saveImageAs = payload.saveImageAs;
// COPY IMAGE TO TMP FOLDER
const platform = getPlatform();
@ -129,7 +131,8 @@ ipcMain.on(commands.DOUBLE_UPSCAYL, async (event, payload) => {
: payload.imagePath.split("/").slice(-1)[0];
const fileName = parse(fullfileName).name;
const fileExt = parse(fullfileName).ext;
const outFile = outputDir + "/" + fileName + "_upscayl_8x_" + model + fileExt;
const outFile =
outputDir + "/" + fileName + "_upscayl_8x_" + model + "." + saveImageAs;
// UPSCALE
let upscayl = spawn(
@ -145,6 +148,9 @@ ipcMain.on(commands.DOUBLE_UPSCAYL, async (event, payload) => {
modelsPath,
"-n",
model,
gpuId ? `-g ${gpuId}` : "",
"-f",
saveImageAs,
],
{
cwd: undefined,
@ -163,7 +169,10 @@ ipcMain.on(commands.DOUBLE_UPSCAYL, async (event, payload) => {
"-m",
modelsPath,
"-n",
model
model,
gpuId ? `-g ${gpuId}` : "",
"-f",
saveImageAs
);
let failed = false;
@ -198,7 +207,21 @@ ipcMain.on(commands.DOUBLE_UPSCAYL, async (event, payload) => {
// UPSCALE
let upscayl2 = spawn(
execPath("realesrgan"),
["-i", outFile, "-o", outFile, "-s", 4, "-m", modelsPath, "-n", model],
[
"-i",
outFile,
"-o",
outFile,
"-s",
4,
"-m",
modelsPath,
"-n",
model,
gpuId ? `-g ${gpuId}` : "",
"-f",
saveImageAs,
],
{
cwd: undefined,
detached: false,
@ -244,6 +267,8 @@ ipcMain.on(commands.DOUBLE_UPSCAYL, async (event, payload) => {
ipcMain.on(commands.UPSCAYL, async (event, payload) => {
const model = payload.model;
const scale = payload.scaleFactor;
const gpuId = payload.gpuId;
const saveImageAs = payload.saveImageAs;
let inputDir = payload.imagePath.match(/(.*)[\/\\]/)[1] || "";
let outputDir = payload.outputPath;
@ -261,8 +286,17 @@ ipcMain.on(commands.UPSCAYL, async (event, payload) => {
scale +
"x_" +
model +
fileExt
: outputDir + "/" + fileName + "_upscayl_" + scale + "x_" + model + fileExt;
"." +
saveImageAs
: outputDir +
"/" +
fileName +
"_upscayl_" +
scale +
"x_" +
model +
"." +
saveImageAs;
// UPSCALE
if (fs.existsSync(outFile)) {
@ -285,6 +319,9 @@ ipcMain.on(commands.UPSCAYL, async (event, payload) => {
modelsPath,
"-n",
model,
gpuId ? `-g ${gpuId}` : "",
"-f",
saveImageAs,
],
{
cwd: undefined,
@ -302,7 +339,10 @@ ipcMain.on(commands.UPSCAYL, async (event, payload) => {
"-m",
modelsPath,
"-n",
model
model,
gpuId ? `-g ${gpuId}` : "",
"-f",
saveImageAs
);
break;
case "models-DF2K":
@ -318,6 +358,9 @@ ipcMain.on(commands.UPSCAYL, async (event, payload) => {
"-x",
"-m",
modelsPath + "/" + model,
gpuId ? `-g ${gpuId}` : "",
"-f",
saveImageAs,
],
{
cwd: undefined,
@ -334,7 +377,10 @@ ipcMain.on(commands.UPSCAYL, async (event, payload) => {
scale,
"-x",
"-m",
modelsPath + "/" + model
modelsPath + "/" + model,
gpuId ? `-g ${gpuId}` : "",
"-f",
saveImageAs
);
break;
}
@ -368,6 +414,143 @@ ipcMain.on(commands.UPSCAYL, async (event, payload) => {
}
});
//------------------------Upscayl Folder-----------------------------//
ipcMain.on(commands.FOLDER_UPSCAYL, async (event, payload) => {
// GET THE MODEL
const model = payload.model;
const gpuId = payload.gpuId;
const saveImageAs = payload.saveImageAs;
// GET THE IMAGE DIRECTORY
let inputDir = payload.batchFolderPath;
console.log("🚀 => file: index.ts => line 471 => inputDir", inputDir);
// GET THE OUTPUT DIRECTORY
let outputDir = model.includes("models-DF2K")
? payload.outputPath + "_sharpened"
: payload.outputPath;
console.log("🚀 => file: index.ts => line 474 => outputDir", outputDir);
if (!fs.existsSync(outputDir)) {
fs.mkdirSync(outputDir, { recursive: true });
}
// UPSCALE
let upscayl: ChildProcessWithoutNullStreams | null = null;
switch (model) {
default:
upscayl = spawn(
execPath("realesrgan"),
[
"-i",
inputDir,
"-o",
outputDir,
"-s",
4,
"-m",
modelsPath,
"-n",
model,
gpuId ? `-g ${gpuId}` : "",
"-f",
saveImageAs,
],
{
cwd: undefined,
detached: false,
}
);
console.log(
"🆙 COMMAND:",
"-i",
inputDir,
"-o",
outputDir,
"-s",
4,
"-m",
modelsPath,
"-n",
model,
gpuId ? `-g ${gpuId}` : "",
"-f",
saveImageAs
);
break;
case "models-DF2K":
upscayl = spawn(
execPath("realsr"),
[
"-i",
inputDir,
"-o",
outputDir,
"-s",
4,
"-x",
"-m",
modelsPath + "/" + model,
gpuId ? `-g ${gpuId}` : "",
"-f",
saveImageAs,
],
{
cwd: undefined,
detached: false,
}
);
console.log(
"🆙 COMMAND:",
"-i",
inputDir,
"-o",
outputDir,
"-s",
4,
"-x",
"-m",
modelsPath + "/" + model,
gpuId ? `-g ${gpuId}` : "",
"-f",
saveImageAs
);
break;
}
let failed = false;
upscayl?.stderr.on("data", (data) => {
console.log(
"🚀 => upscayl.stderr.on => stderr.toString()",
data.toString()
);
data = data.toString();
mainWindow.webContents.send(
commands.FOLDER_UPSCAYL_PROGRESS,
data.toString()
);
if (data.includes("invalid gpu") || data.includes("failed")) {
failed = true;
}
});
upscayl?.on("error", (data) => {
mainWindow.webContents.send(
commands.FOLDER_UPSCAYL_PROGRESS,
data.toString()
);
failed = true;
return;
});
// Send done comamnd when
upscayl?.on("close", (code) => {
if (failed !== true) {
console.log("Done upscaling");
mainWindow.webContents.send(commands.FOLDER_UPSCAYL_DONE, outputDir);
}
});
});
//------------------------Video Upscayl-----------------------------//
ipcMain.on(commands.UPSCAYL_VIDEO, async (event, payload) => {
// Extract the model
@ -475,129 +658,6 @@ ipcMain.on(commands.UPSCAYL_VIDEO, async (event, payload) => {
});
});
//------------------------Upscayl Folder-----------------------------//
ipcMain.on(commands.FOLDER_UPSCAYL, async (event, payload) => {
// GET THE MODEL
const model = payload.model;
// GET THE IMAGE DIRECTORY
let inputDir = payload.batchFolderPath;
console.log("🚀 => file: index.ts => line 471 => inputDir", inputDir);
// GET THE OUTPUT DIRECTORY
let outputDir = model.includes("models-DF2K")
? payload.outputPath + "_sharpened"
: payload.outputPath;
console.log("🚀 => file: index.ts => line 474 => outputDir", outputDir);
if (!fs.existsSync(outputDir)) {
fs.mkdirSync(outputDir, { recursive: true });
}
// UPSCALE
let upscayl: ChildProcessWithoutNullStreams | null = null;
switch (model) {
default:
upscayl = spawn(
execPath("realesrgan"),
[
"-i",
inputDir,
"-o",
outputDir,
"-s",
4,
"-m",
modelsPath,
"-n",
model,
],
{
cwd: undefined,
detached: false,
}
);
console.log(
"🆙 COMMAND:",
"-i",
inputDir,
"-o",
outputDir,
"-s",
4,
"-m",
modelsPath,
"-n",
model
);
break;
case "models-DF2K":
upscayl = spawn(
execPath("realsr"),
[
"-i",
inputDir,
"-o",
outputDir,
"-s",
4,
"-x",
"-m",
modelsPath + "/" + model,
],
{
cwd: undefined,
detached: false,
}
);
console.log(
"🆙 COMMAND:",
"-i",
inputDir,
"-o",
outputDir,
"-s",
4,
"-x",
"-m",
modelsPath + "/" + model
);
break;
}
let failed = false;
upscayl?.stderr.on("data", (data) => {
console.log(
"🚀 => upscayl.stderr.on => stderr.toString()",
data.toString()
);
data = data.toString();
mainWindow.webContents.send(
commands.FOLDER_UPSCAYL_PROGRESS,
data.toString()
);
if (data.includes("invalid gpu") || data.includes("failed")) {
failed = true;
}
});
upscayl?.on("error", (data) => {
mainWindow.webContents.send(
commands.FOLDER_UPSCAYL_PROGRESS,
data.toString()
);
failed = true;
return;
});
// Send done comamnd when
upscayl?.on("close", (code) => {
if (failed !== true) {
console.log("Done upscaling");
mainWindow.webContents.send(commands.FOLDER_UPSCAYL_DONE, outputDir);
}
});
});
//------------------------Auto-Update Code-----------------------------//
// ! AUTO UPDATE STUFF
autoUpdater.on("update-available", ({ releaseNotes, releaseName }) => {

View File

@ -112,6 +112,8 @@ electron_1.ipcMain.on(commands_1.default.DOUBLE_UPSCAYL, (event, payload) => __a
const model = payload.model;
let inputDir = payload.imagePath.match(/(.*)[\/\\]/)[1] || "";
let outputDir = payload.outputPath;
const gpuId = payload.gpuId;
const saveImageAs = payload.saveImageAs;
// COPY IMAGE TO TMP FOLDER
const platform = (0, getPlatform_1.default)();
const fullfileName = platform === "win"
@ -119,7 +121,7 @@ electron_1.ipcMain.on(commands_1.default.DOUBLE_UPSCAYL, (event, payload) => __a
: payload.imagePath.split("/").slice(-1)[0];
const fileName = (0, path_1.parse)(fullfileName).name;
const fileExt = (0, path_1.parse)(fullfileName).ext;
const outFile = outputDir + "/" + fileName + "_upscayl_8x_" + model + fileExt;
const outFile = outputDir + "/" + fileName + "_upscayl_8x_" + model + "." + saveImageAs;
// UPSCALE
let upscayl = (0, child_process_1.spawn)((0, binaries_1.execPath)("realesrgan"), [
"-i",
@ -132,11 +134,14 @@ electron_1.ipcMain.on(commands_1.default.DOUBLE_UPSCAYL, (event, payload) => __a
binaries_1.modelsPath,
"-n",
model,
gpuId ? `-g ${gpuId}` : "",
"-f",
saveImageAs,
], {
cwd: undefined,
detached: false,
});
console.log("🆙 COMMAND:", "-i", inputDir + "/" + fullfileName, "-o", outFile, "-s", 4, "-m", binaries_1.modelsPath, "-n", model);
console.log("🆙 COMMAND:", "-i", inputDir + "/" + fullfileName, "-o", outFile, "-s", 4, "-m", binaries_1.modelsPath, "-n", model, gpuId ? `-g ${gpuId}` : "", "-f", saveImageAs);
let failed = false;
// TAKE UPSCAYL OUTPUT
upscayl.stderr.on("data", (data) => {
@ -165,7 +170,21 @@ electron_1.ipcMain.on(commands_1.default.DOUBLE_UPSCAYL, (event, payload) => __a
// IF NOT FAILED
if (!failed) {
// UPSCALE
let upscayl2 = (0, child_process_1.spawn)((0, binaries_1.execPath)("realesrgan"), ["-i", outFile, "-o", outFile, "-s", 4, "-m", binaries_1.modelsPath, "-n", model], {
let upscayl2 = (0, child_process_1.spawn)((0, binaries_1.execPath)("realesrgan"), [
"-i",
outFile,
"-o",
outFile,
"-s",
4,
"-m",
binaries_1.modelsPath,
"-n",
model,
gpuId ? `-g ${gpuId}` : "",
"-f",
saveImageAs,
], {
cwd: undefined,
detached: false,
});
@ -205,6 +224,8 @@ electron_1.ipcMain.on(commands_1.default.DOUBLE_UPSCAYL, (event, payload) => __a
electron_1.ipcMain.on(commands_1.default.UPSCAYL, (event, payload) => __awaiter(void 0, void 0, void 0, function* () {
const model = payload.model;
const scale = payload.scaleFactor;
const gpuId = payload.gpuId;
const saveImageAs = payload.saveImageAs;
let inputDir = payload.imagePath.match(/(.*)[\/\\]/)[1] || "";
let outputDir = payload.outputPath;
// COPY IMAGE TO TMP FOLDER
@ -220,8 +241,17 @@ electron_1.ipcMain.on(commands_1.default.UPSCAYL, (event, payload) => __awaiter(
scale +
"x_" +
model +
fileExt
: outputDir + "/" + fileName + "_upscayl_" + scale + "x_" + model + fileExt;
"." +
saveImageAs
: outputDir +
"/" +
fileName +
"_upscayl_" +
scale +
"x_" +
model +
"." +
saveImageAs;
// UPSCALE
if (fs_1.default.existsSync(outFile)) {
// If already upscayled, just output that file
@ -242,11 +272,14 @@ electron_1.ipcMain.on(commands_1.default.UPSCAYL, (event, payload) => __awaiter(
binaries_1.modelsPath,
"-n",
model,
gpuId ? `-g ${gpuId}` : "",
"-f",
saveImageAs,
], {
cwd: undefined,
detached: false,
});
console.log("🆙 COMMAND: ", "-i", inputDir + "/" + fullfileName, "-o", outFile, "-s", scale === 2 ? 4 : scale, "-m", binaries_1.modelsPath, "-n", model);
console.log("🆙 COMMAND: ", "-i", inputDir + "/" + fullfileName, "-o", outFile, "-s", scale === 2 ? 4 : scale, "-m", binaries_1.modelsPath, "-n", model, gpuId ? `-g ${gpuId}` : "", "-f", saveImageAs);
break;
case "models-DF2K":
upscayl = (0, child_process_1.spawn)((0, binaries_1.execPath)("realsr"), [
@ -259,11 +292,14 @@ electron_1.ipcMain.on(commands_1.default.UPSCAYL, (event, payload) => __awaiter(
"-x",
"-m",
binaries_1.modelsPath + "/" + model,
gpuId ? `-g ${gpuId}` : "",
"-f",
saveImageAs,
], {
cwd: undefined,
detached: false,
});
console.log("🆙 COMMAND: ", "-i", inputDir + "/" + fullfileName, "-o", outFile, "-s", scale, "-x", "-m", binaries_1.modelsPath + "/" + model);
console.log("🆙 COMMAND: ", "-i", inputDir + "/" + fullfileName, "-o", outFile, "-s", scale, "-x", "-m", binaries_1.modelsPath + "/" + model, gpuId ? `-g ${gpuId}` : "", "-f", saveImageAs);
break;
}
let failed = false;
@ -289,6 +325,90 @@ electron_1.ipcMain.on(commands_1.default.UPSCAYL, (event, payload) => __awaiter(
});
}
}));
//------------------------Upscayl Folder-----------------------------//
electron_1.ipcMain.on(commands_1.default.FOLDER_UPSCAYL, (event, payload) => __awaiter(void 0, void 0, void 0, function* () {
// GET THE MODEL
const model = payload.model;
const gpuId = payload.gpuId;
const saveImageAs = payload.saveImageAs;
// GET THE IMAGE DIRECTORY
let inputDir = payload.batchFolderPath;
console.log("🚀 => file: index.ts => line 471 => inputDir", inputDir);
// GET THE OUTPUT DIRECTORY
let outputDir = model.includes("models-DF2K")
? payload.outputPath + "_sharpened"
: payload.outputPath;
console.log("🚀 => file: index.ts => line 474 => outputDir", outputDir);
if (!fs_1.default.existsSync(outputDir)) {
fs_1.default.mkdirSync(outputDir, { recursive: true });
}
// UPSCALE
let upscayl = null;
switch (model) {
default:
upscayl = (0, child_process_1.spawn)((0, binaries_1.execPath)("realesrgan"), [
"-i",
inputDir,
"-o",
outputDir,
"-s",
4,
"-m",
binaries_1.modelsPath,
"-n",
model,
gpuId ? `-g ${gpuId}` : "",
"-f",
saveImageAs,
], {
cwd: undefined,
detached: false,
});
console.log("🆙 COMMAND:", "-i", inputDir, "-o", outputDir, "-s", 4, "-m", binaries_1.modelsPath, "-n", model, gpuId ? `-g ${gpuId}` : "", "-f", saveImageAs);
break;
case "models-DF2K":
upscayl = (0, child_process_1.spawn)((0, binaries_1.execPath)("realsr"), [
"-i",
inputDir,
"-o",
outputDir,
"-s",
4,
"-x",
"-m",
binaries_1.modelsPath + "/" + model,
gpuId ? `-g ${gpuId}` : "",
"-f",
saveImageAs,
], {
cwd: undefined,
detached: false,
});
console.log("🆙 COMMAND:", "-i", inputDir, "-o", outputDir, "-s", 4, "-x", "-m", binaries_1.modelsPath + "/" + model, gpuId ? `-g ${gpuId}` : "", "-f", saveImageAs);
break;
}
let failed = false;
upscayl === null || upscayl === void 0 ? void 0 : upscayl.stderr.on("data", (data) => {
console.log("🚀 => upscayl.stderr.on => stderr.toString()", data.toString());
data = data.toString();
mainWindow.webContents.send(commands_1.default.FOLDER_UPSCAYL_PROGRESS, data.toString());
if (data.includes("invalid gpu") || data.includes("failed")) {
failed = true;
}
});
upscayl === null || upscayl === void 0 ? void 0 : upscayl.on("error", (data) => {
mainWindow.webContents.send(commands_1.default.FOLDER_UPSCAYL_PROGRESS, data.toString());
failed = true;
return;
});
// Send done comamnd when
upscayl === null || upscayl === void 0 ? void 0 : upscayl.on("close", (code) => {
if (failed !== true) {
console.log("Done upscaling");
mainWindow.webContents.send(commands_1.default.FOLDER_UPSCAYL_DONE, outputDir);
}
});
}));
//------------------------Video Upscayl-----------------------------//
electron_1.ipcMain.on(commands_1.default.UPSCAYL_VIDEO, (event, payload) => __awaiter(void 0, void 0, void 0, function* () {
// Extract the model
@ -360,82 +480,6 @@ electron_1.ipcMain.on(commands_1.default.UPSCAYL_VIDEO, (event, payload) => __aw
}
});
}));
//------------------------Upscayl Folder-----------------------------//
electron_1.ipcMain.on(commands_1.default.FOLDER_UPSCAYL, (event, payload) => __awaiter(void 0, void 0, void 0, function* () {
// GET THE MODEL
const model = payload.model;
// GET THE IMAGE DIRECTORY
let inputDir = payload.batchFolderPath;
console.log("🚀 => file: index.ts => line 471 => inputDir", inputDir);
// GET THE OUTPUT DIRECTORY
let outputDir = model.includes("models-DF2K")
? payload.outputPath + "_sharpened"
: payload.outputPath;
console.log("🚀 => file: index.ts => line 474 => outputDir", outputDir);
if (!fs_1.default.existsSync(outputDir)) {
fs_1.default.mkdirSync(outputDir, { recursive: true });
}
// UPSCALE
let upscayl = null;
switch (model) {
default:
upscayl = (0, child_process_1.spawn)((0, binaries_1.execPath)("realesrgan"), [
"-i",
inputDir,
"-o",
outputDir,
"-s",
4,
"-m",
binaries_1.modelsPath,
"-n",
model,
], {
cwd: undefined,
detached: false,
});
console.log("🆙 COMMAND:", "-i", inputDir, "-o", outputDir, "-s", 4, "-m", binaries_1.modelsPath, "-n", model);
break;
case "models-DF2K":
upscayl = (0, child_process_1.spawn)((0, binaries_1.execPath)("realsr"), [
"-i",
inputDir,
"-o",
outputDir,
"-s",
4,
"-x",
"-m",
binaries_1.modelsPath + "/" + model,
], {
cwd: undefined,
detached: false,
});
console.log("🆙 COMMAND:", "-i", inputDir, "-o", outputDir, "-s", 4, "-x", "-m", binaries_1.modelsPath + "/" + model);
break;
}
let failed = false;
upscayl === null || upscayl === void 0 ? void 0 : upscayl.stderr.on("data", (data) => {
console.log("🚀 => upscayl.stderr.on => stderr.toString()", data.toString());
data = data.toString();
mainWindow.webContents.send(commands_1.default.FOLDER_UPSCAYL_PROGRESS, data.toString());
if (data.includes("invalid gpu") || data.includes("failed")) {
failed = true;
}
});
upscayl === null || upscayl === void 0 ? void 0 : upscayl.on("error", (data) => {
mainWindow.webContents.send(commands_1.default.FOLDER_UPSCAYL_PROGRESS, data.toString());
failed = true;
return;
});
// Send done comamnd when
upscayl === null || upscayl === void 0 ? void 0 : upscayl.on("close", (code) => {
if (failed !== true) {
console.log("Done upscaling");
mainWindow.webContents.send(commands_1.default.FOLDER_UPSCAYL_DONE, outputDir);
}
});
}));
//------------------------Auto-Update Code-----------------------------//
// ! AUTO UPDATE STUFF
electron_updater_1.autoUpdater.on("update-available", ({ releaseNotes, releaseName }) => {

View File

@ -1,16 +1,50 @@
import React from "react";
const ImageOptions = () => {
const ImageOptions = ({
zoomAmount,
setZoomAmount,
}: {
zoomAmount: number;
setZoomAmount: (arg: any) => void;
}) => {
const handleZoom = (direction: number) => {
console.log(zoomAmount + direction * 25);
if (direction === 0) {
setZoomAmount("");
} else {
setZoomAmount("zoom-125");
}
};
return (
<div className="animate rounded-btn collapse absolute top-0 z-50 m-2 w-96 opacity-25 hover:opacity-100">
<div className="animate rounded-btn collapse absolute top-0 z-50 m-2 opacity-25 hover:opacity-100">
<input type="checkbox" className="peer" />
<div className="collapse-title bg-base-100 text-center text-sm font-semibold uppercase text-primary-content peer-checked:bg-base-300 peer-checked:text-base-content">
Show/Hide Image Settings
</div>
<div className="collapse-content bg-base-100 text-base-content">
<div className="p-5">
<button className="btn-primary btn">Start Again</button>
<div className="flex max-h-96 flex-col justify-center gap-5 overflow-auto p-5">
<button className="btn-primary btn">Reset Image</button>
<div className="flex flex-row items-center gap-2">
<p className="w-20">Zoom:</p>
<button className="btn-primary btn" onClick={() => handleZoom(-1)}>
- 25%
</button>
<button className="btn-primary btn" onClick={() => handleZoom(0)}>
100%
</button>
<button className="btn-primary btn" onClick={() => handleZoom(1)}>
+ 25%
</button>
</div>
<div className="flex flex-row items-center gap-2">
<p className="w-20">Position:</p>
<button className="btn-primary btn">Top</button>
<button className="btn-primary btn">Bottom</button>
<button className="btn-primary btn">Right</button>
<button className="btn-primary btn">Left</button>
</div>
</div>
</div>
</div>

View File

@ -20,6 +20,10 @@ interface IProps {
model: string;
isVideo: boolean;
setIsVideo: (arg: boolean) => void;
saveImageAs: string;
setSaveImageAs: (arg: string) => void;
gpuId: string;
setGpuId: (arg: string) => void;
}
function LeftPaneImageSteps({
@ -39,10 +43,11 @@ function LeftPaneImageSteps({
model,
isVideo,
setIsVideo,
gpuId,
setGpuId,
saveImageAs,
setSaveImageAs,
}: IProps) {
const [saveImageAs, setSaveImageAs] = useState("png");
const [gpuId, setGpuId] = useState("0");
useEffect(() => {
themeChange(false);
if (!localStorage.getItem("saveImageAs")) {
@ -94,35 +99,35 @@ function LeftPaneImageSteps({
];
const availableThemes = [
"light",
"dark",
"cupcake",
"bumblebee",
"emerald",
"corporate",
"synthwave",
"retro",
"cyberpunk",
"valentine",
"halloween",
"garden",
"forest",
"aqua",
"lofi",
"pastel",
"fantasy",
"wireframe",
"black",
"luxury",
"dracula",
"cmyk",
"autumn",
"business",
"acid",
"lemonade",
"night",
"coffee",
"winter",
{ label: "light", value: "light" },
{ label: "dark", value: "dark" },
{ label: "cupcake", value: "cupcake" },
{ label: "bumblebee", value: "bumblebee" },
{ label: "emerald", value: "emerald" },
{ label: "corporate", value: "corporate" },
{ label: "synthwave", value: "synthwave" },
{ label: "retro", value: "retro" },
{ label: "cyberpunk", value: "cyberpunk" },
{ label: "valentine", value: "valentine" },
{ label: "halloween", value: "halloween" },
{ label: "garden", value: "garden" },
{ label: "forest", value: "forest" },
{ label: "aqua", value: "aqua" },
{ label: "lofi", value: "lofi" },
{ label: "pastel", value: "pastel" },
{ label: "fantasy", value: "fantasy" },
{ label: "wireframe", value: "wireframe" },
{ label: "black", value: "black" },
{ label: "luxury", value: "luxury" },
{ label: "dracula", value: "dracula" },
{ label: "cmyk", value: "cmyk" },
{ label: "autumn", value: "autumn" },
{ label: "business", value: "business" },
{ label: "acid", value: "acid" },
{ label: "lemonade", value: "lemonade" },
{ label: "night", value: "night" },
{ label: "coffee", value: "coffee" },
{ label: "winter", value: "winter" },
];
return (
@ -253,8 +258,8 @@ function LeftPaneImageSteps({
<option value="dark">Default</option>
{availableThemes.map((theme) => {
return (
<option value={theme} key={theme}>
{theme.toLocaleUpperCase()}
<option value={theme.value} key={theme.value}>
{theme.label.toLocaleUpperCase()}
</option>
);
})}
@ -263,7 +268,7 @@ function LeftPaneImageSteps({
<div className="flex flex-col gap-2">
<p>GPU ID:</p>
<input
type="number"
type="text"
placeholder="Type here"
className="input w-full max-w-xs"
value={gpuId}

View File

@ -15,6 +15,7 @@ import LeftPaneVideoSteps from "../components/LeftPaneVideoSteps";
import LeftPaneImageSteps from "../components/LeftPaneImageSteps";
const Home = () => {
// STATES
const [imagePath, SetImagePath] = useState("");
const [upscaledImagePath, setUpscaledImagePath] = useState("");
const [outputPath, setOutputPath] = useState("");
@ -31,20 +32,11 @@ const Home = () => {
const [videoPath, setVideoPath] = useState("");
const [upscaledVideoPath, setUpscaledVideoPath] = useState("");
const [doubleUpscaylCounter, setDoubleUpscaylCounter] = useState(0);
const [gpuId, setGpuId] = useState("");
const [saveImageAs, setSaveImageAs] = useState("png");
const [zoomAmount, setZoomAmount] = useState("");
const resetImagePaths = () => {
setProgress("");
SetImagePath("");
setUpscaledImagePath("");
setBatchFolderPath("");
setUpscaledBatchFolderPath("");
setVideoPath("");
setUpscaledVideoPath("");
};
// EFFECTS
useEffect(() => {
setLoaded(true);
@ -73,6 +65,7 @@ const Home = () => {
}
};
// UPSCAYL PROGRESS
window.electron.on(commands.UPSCAYL_PROGRESS, (_, data) => {
console.log(
"🚀 => file: index.jsx => line 61 => window.electron.on => data",
@ -84,12 +77,16 @@ const Home = () => {
}
handleErrors(data);
});
// FOLDER UPSCAYL PROGRESS
window.electron.on(commands.FOLDER_UPSCAYL_PROGRESS, (_, data) => {
if (data.length > 0 && data.length < 10) {
setProgress(data);
}
handleErrors(data);
});
// DOUBLE UPSCAYL PROGRESS
window.electron.on(commands.DOUBLE_UPSCAYL_PROGRESS, (_, data) => {
if (data.length > 0 && data.length < 10) {
if (data === "0.00%") {
@ -99,6 +96,8 @@ const Home = () => {
}
handleErrors(data);
});
// VIDEO UPSCAYL PROGRESS
window.electron.on(commands.UPSCAYL_VIDEO_PROGRESS, (_, data) => {
if (data.length > 0 && data.length < 10) {
setProgress(data);
@ -106,19 +105,26 @@ const Home = () => {
handleErrors(data);
});
// UPSCAYL DONE
window.electron.on(commands.UPSCAYL_DONE, (_, data) => {
setProgress("");
setUpscaledImagePath(data);
});
// FOLDER UPSCAYL DONE
window.electron.on(commands.FOLDER_UPSCAYL_DONE, (_, data) => {
setProgress("");
setUpscaledBatchFolderPath(data);
});
// DOUBLE UPSCAYL DONE
window.electron.on(commands.DOUBLE_UPSCAYL_DONE, (_, data) => {
setProgress("");
setDoubleUpscaylCounter(0);
setUpscaledImagePath(data);
});
// VIDEO UPSCAYL DONE
window.electron.on(commands.UPSCAYL_VIDEO_DONE, (_, data) => {
setProgress("");
setUpscaledVideoPath(data);
@ -165,6 +171,20 @@ const Home = () => {
}
}, [imagePath, videoPath]);
const resetImagePaths = () => {
setProgress("");
SetImagePath("");
setUpscaledImagePath("");
setBatchFolderPath("");
setUpscaledBatchFolderPath("");
setVideoPath("");
setUpscaledVideoPath("");
};
// HANDLERS
const selectVideoHandler = async () => {
resetImagePaths();
@ -207,6 +227,7 @@ const Home = () => {
}
};
// DRAG AND DROP HANDLERS
const handleDragEnter = (e) => {
e.preventDefault();
console.log("drag enter");
@ -219,13 +240,11 @@ const Home = () => {
e.preventDefault();
console.log("drag over");
};
const openFolderHandler = (e) => {
window.electron.send(commands.OPEN_FOLDER, upscaledBatchFolderPath);
};
const allowedFileTypes = ["png", "jpg", "jpeg", "webp"];
const allowedVideoFileTypes = ["webm", "mp4", "mkv"];
const handleDrop = (e) => {
e.preventDefault();
resetImagePaths();
@ -302,6 +321,8 @@ const Home = () => {
imagePath,
outputPath,
model,
gpuId: gpuId.length === 0 ? null : gpuId,
saveImageAs,
});
} else if (batchMode) {
setDoubleUpscayl(false);
@ -310,6 +331,8 @@ const Home = () => {
batchFolderPath,
outputPath,
model,
gpuId: gpuId.length === 0 ? null : gpuId,
saveImageAs,
});
} else {
await window.electron.send(commands.UPSCAYL, {
@ -317,6 +340,8 @@ const Home = () => {
imagePath,
outputPath,
model,
gpuId: gpuId.length === 0 ? null : gpuId,
saveImageAs,
});
}
} else if (isVideo && videoPath !== "") {
@ -325,12 +350,17 @@ const Home = () => {
videoPath,
outputPath,
model,
gpuId: gpuId.length === 0 ? null : gpuId,
saveImageAs,
});
} else {
alert(`Please select ${isVideo ? "a video" : "an image"} to upscale`);
}
};
const allowedFileTypes = ["png", "jpg", "jpeg", "webp"];
const allowedVideoFileTypes = ["webm", "mp4", "mkv"];
return (
<div className="flex h-screen w-screen flex-row overflow-hidden bg-base-300">
<div className="flex h-screen w-128 flex-col rounded-r-3xl bg-base-100">
@ -397,6 +427,10 @@ const Home = () => {
model={model}
isVideo={isVideo}
setIsVideo={setIsVideo}
gpuId={gpuId}
setGpuId={setGpuId}
saveImageAs={saveImageAs}
setSaveImageAs={setSaveImageAs}
/>
)}
<Footer />
@ -484,7 +518,10 @@ const Home = () => {
imagePath.length > 0 &&
upscaledImagePath.length > 0 && (
<>
<ImageOptions />
<ImageOptions
zoomAmount={zoomAmount}
setZoomAmount={setZoomAmount}
/>
<ReactCompareSlider
itemOne={
<>
@ -497,7 +534,7 @@ const Home = () => {
style={{
objectFit: "contain",
}}
className="bg-[#1d1c23]"
className={`bg-[#1d1c23] ${zoomAmount}`}
/>
</>
}

View File

@ -120,6 +120,10 @@
}
}
.zoom-125 {
transform: scale(1.25);
}
.animate-step-in {
animation: animate-step-in 0.6s cubic-bezier(0.07, 0.43, 0.02, 1);
}

View File

@ -3,6 +3,11 @@ module.exports = {
"./renderer/pages/**/*.{js,ts,jsx,tsx}",
"./renderer/components/**/*.{js,ts,jsx,tsx}",
],
safelist: [
{
pattern: /scale-/,
},
],
theme: {
extend: {
spacing: {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 580 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 743 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.9 MiB