mirror of
https://github.com/upscayl/upscayl.git
synced 2024-11-24 07:30:19 +01:00
Added logit on renderer process and LeftPaneImageSteps
This commit is contained in:
Feenix
parent
45b7f5f82a
commit
f1505bdf00
@ -4,6 +4,7 @@ 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;
|
||||
@ -53,15 +54,22 @@ function LeftPaneImageSteps({
|
||||
value: null,
|
||||
});
|
||||
|
||||
const [modelOptions, setModelOptions] = useAtom(modelsListAtom);
|
||||
const [modelOptions] = useAtom(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);
|
||||
}
|
||||
|
||||
@ -69,93 +77,30 @@ function LeftPaneImageSteps({
|
||||
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];
|
||||
) as (typeof modelOptions)[0];
|
||||
setCurrentModel(currentlySavedModel);
|
||||
setModel(currentlySavedModel.value);
|
||||
logit("ℹ Getting model from localStorage", currentlySavedModel.value);
|
||||
}
|
||||
|
||||
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(() => {
|
||||
console.log("Current Model: ", currentModel);
|
||||
logit("ℹ Setting model to", currentModel.value);
|
||||
}, [currentModel]);
|
||||
|
||||
const setExportType = (format: string) => {
|
||||
setSaveImageAs(format);
|
||||
localStorage.setItem("saveImageAs", format);
|
||||
};
|
||||
|
||||
const handleBatchMode = () => {
|
||||
setBatchMode((oldValue) => !oldValue);
|
||||
};
|
||||
|
||||
const handleGpuIdChange = (e) => {
|
||||
setGpuId(e.target.value);
|
||||
localStorage.setItem("gpuId", e.target.value);
|
||||
};
|
||||
|
||||
const customStyles = {
|
||||
option: (provided, state) => ({
|
||||
...provided,
|
||||
borderBottom: "1px dotted pink",
|
||||
color: state.isSelected ? "red" : "blue",
|
||||
padding: 20,
|
||||
}),
|
||||
control: () => ({
|
||||
// none of react-select's styles are passed to <Control />
|
||||
width: 200,
|
||||
}),
|
||||
singleValue: (provided, state) => {
|
||||
const opacity = state.isDisabled ? 0.5 : 1;
|
||||
const transition = "opacity 300ms";
|
||||
|
||||
return { ...provided, opacity, transition };
|
||||
},
|
||||
};
|
||||
|
||||
const availableThemes = [
|
||||
{ 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" },
|
||||
];
|
||||
|
||||
useEffect(() => {}, [imagePath]);
|
||||
|
||||
return (
|
||||
<div className="animate-step-in animate flex h-screen flex-col gap-7 overflow-y-auto p-5 overflow-x-hidden">
|
||||
{/* BATCH OPTION */}
|
||||
|
||||
@ -48,15 +48,6 @@ const Home = () => {
|
||||
|
||||
const { logit } = useLog();
|
||||
|
||||
// (function () {
|
||||
// let info = console.info;
|
||||
|
||||
// console.log = function () {
|
||||
// var args = Array.prototype.slice.call(arguments);
|
||||
// info.apply(this, args);
|
||||
// };
|
||||
// })();
|
||||
|
||||
// EFFECTS
|
||||
useEffect(() => {
|
||||
setLoaded(true);
|
||||
@ -88,7 +79,7 @@ const Home = () => {
|
||||
|
||||
// LOG
|
||||
window.electron.on(commands.LOG, (_, data: string) => {
|
||||
logit(data);
|
||||
logit(`ℹ BACKEND REPORTED: `, data);
|
||||
});
|
||||
|
||||
// UPSCAYL PROGRESS
|
||||
@ -97,7 +88,7 @@ const Home = () => {
|
||||
setProgress(data);
|
||||
}
|
||||
handleErrors(data);
|
||||
logit(data);
|
||||
logit(`ℹ UPSCAYL_PROGRESS: `, data);
|
||||
});
|
||||
|
||||
// FOLDER UPSCAYL PROGRESS
|
||||
@ -106,7 +97,7 @@ const Home = () => {
|
||||
setProgress(data);
|
||||
}
|
||||
handleErrors(data);
|
||||
logit(data);
|
||||
logit(`ℹ FOLDER_UPSCAYL_PROGRESS: `, data);
|
||||
});
|
||||
|
||||
// DOUBLE UPSCAYL PROGRESS
|
||||
@ -118,7 +109,7 @@ const Home = () => {
|
||||
setProgress(data);
|
||||
}
|
||||
handleErrors(data);
|
||||
logit(data);
|
||||
logit(`ℹ DOUBLE_UPSCAYL_PROGRESS: `, data);
|
||||
});
|
||||
|
||||
// VIDEO UPSCAYL PROGRESS
|
||||
@ -127,7 +118,7 @@ const Home = () => {
|
||||
setProgress(data);
|
||||
}
|
||||
handleErrors(data);
|
||||
logit(data);
|
||||
logit(`ℹ UPSCAYL_VIDEO_PROGRESS: `, data);
|
||||
});
|
||||
|
||||
// UPSCAYL DONE
|
||||
@ -135,14 +126,14 @@ const Home = () => {
|
||||
setProgress("");
|
||||
setUpscaledImagePath(data);
|
||||
logit("upscaledImagePath: ", upscaledImagePath);
|
||||
logit(data);
|
||||
logit(`ℹ UPSCAYL_DONE: `, data);
|
||||
});
|
||||
|
||||
// FOLDER UPSCAYL DONE
|
||||
window.electron.on(commands.FOLDER_UPSCAYL_DONE, (_, data: string) => {
|
||||
setProgress("");
|
||||
setUpscaledBatchFolderPath(data);
|
||||
logit(data);
|
||||
logit(`ℹ FOLDER_UPSCAYL_DONE: `, data);
|
||||
});
|
||||
|
||||
// DOUBLE UPSCAYL DONE
|
||||
@ -150,20 +141,21 @@ const Home = () => {
|
||||
setProgress("");
|
||||
setDoubleUpscaylCounter(0);
|
||||
setUpscaledImagePath(data);
|
||||
logit(data);
|
||||
logit(`ℹ DOUBLE_UPSCAYL_DONE: `, data);
|
||||
});
|
||||
|
||||
// VIDEO UPSCAYL DONE
|
||||
window.electron.on(commands.UPSCAYL_VIDEO_DONE, (_, data: string) => {
|
||||
setProgress("");
|
||||
setUpscaledVideoPath(data);
|
||||
logit(data);
|
||||
logit(`ℹ UPSCAYL_VIDEO_DONE: `, data);
|
||||
});
|
||||
|
||||
// CUSTOM FOLDER LISTENER
|
||||
window.electron.on(
|
||||
commands.CUSTOM_MODEL_FILES_LIST,
|
||||
(_, data: string[]) => {
|
||||
logit(`ℹ CUSTOM_MODEL_FILES_LIST: `, data);
|
||||
const newModelOptions = data.map((model) => {
|
||||
return {
|
||||
value: model,
|
||||
@ -190,6 +182,7 @@ const Home = () => {
|
||||
|
||||
if (customModelsPath !== null) {
|
||||
window.electron.send(commands.GET_MODELS_LIST, customModelsPath);
|
||||
logit("ℹ GET_MODELS_LIST: ", customModelsPath);
|
||||
}
|
||||
}, []);
|
||||
|
||||
@ -211,17 +204,10 @@ const Home = () => {
|
||||
|
||||
useEffect(() => {
|
||||
if (imagePath.length > 0 && !isVideo) {
|
||||
const filePath = imagePath;
|
||||
console.log(
|
||||
"🚀 => file: index.jsx => line 109 => useEffect => filePath",
|
||||
filePath
|
||||
);
|
||||
logit("ℹ imagePath: ", imagePath);
|
||||
|
||||
const extension = imagePath.toLocaleLowerCase().split(".").pop();
|
||||
console.log(
|
||||
"🚀 => file: index.jsx => line 111 => useEffect => extension",
|
||||
extension
|
||||
);
|
||||
logit("ℹ Extension: ", extension);
|
||||
|
||||
if (!allowedFileTypes.includes(extension.toLowerCase())) {
|
||||
alert("Please select an image");
|
||||
@ -230,12 +216,8 @@ const Home = () => {
|
||||
} else if (videoPath.length > 0 && isVideo) {
|
||||
const filePath = videoPath;
|
||||
|
||||
console.log("🚀 => file: index.tsx => line 146 => filePath", filePath);
|
||||
|
||||
const extension = videoPath.toLocaleLowerCase().split(".").pop();
|
||||
|
||||
console.log("🚀 => file: index.tsx => line 150 => extension", extension);
|
||||
|
||||
if (!allowedVideoFileTypes.includes(extension.toLowerCase())) {
|
||||
alert("Please select an MP4, WebM or MKV video");
|
||||
resetImagePaths();
|
||||
@ -246,6 +228,8 @@ const Home = () => {
|
||||
}, [imagePath, videoPath]);
|
||||
|
||||
const resetImagePaths = () => {
|
||||
logit("ℹ Resetting image paths");
|
||||
|
||||
setDimensions({
|
||||
width: null,
|
||||
height: null,
|
||||
@ -289,8 +273,10 @@ const Home = () => {
|
||||
var path = await window.electron.invoke(commands.SELECT_FILE);
|
||||
|
||||
if (path !== null) {
|
||||
logit("ℹ Selected Image Path: ", path);
|
||||
SetImagePath(path);
|
||||
var dirname = path.match(/(.*)[\/\\]/)[1] || "";
|
||||
logit("ℹ Selected Image Directory: ", dirname);
|
||||
setOutputPath(dirname);
|
||||
}
|
||||
};
|
||||
@ -301,9 +287,11 @@ const Home = () => {
|
||||
var path = await window.electron.invoke(commands.SELECT_FOLDER);
|
||||
|
||||
if (path !== null) {
|
||||
logit("ℹ Selected Folder Path: ", path);
|
||||
setBatchFolderPath(path);
|
||||
setOutputPath(path + "_upscayled");
|
||||
} else {
|
||||
logit("ℹ Folder selection cancelled");
|
||||
setBatchFolderPath("");
|
||||
setOutputPath("");
|
||||
}
|
||||
@ -319,6 +307,7 @@ const Home = () => {
|
||||
|
||||
const handleModelChange = (e: any) => {
|
||||
setModel(e.value);
|
||||
logit("ℹ Model changed: ", e.value);
|
||||
localStorage.setItem(
|
||||
"model",
|
||||
JSON.stringify({ label: e.label, value: e.value })
|
||||
@ -340,6 +329,7 @@ const Home = () => {
|
||||
};
|
||||
|
||||
const openFolderHandler = (e) => {
|
||||
logit("ℹ OPEN_FOLDER: ", upscaledBatchFolderPath);
|
||||
window.electron.send(commands.OPEN_FOLDER, upscaledBatchFolderPath);
|
||||
};
|
||||
|
||||
@ -351,43 +341,47 @@ const Home = () => {
|
||||
e.dataTransfer.items.length === 0 ||
|
||||
e.dataTransfer.files.length === 0
|
||||
) {
|
||||
logit("ℹ No valid files dropped");
|
||||
alert("Please drag and drop an image");
|
||||
return;
|
||||
}
|
||||
|
||||
const type = e.dataTransfer.items[0].type;
|
||||
console.log("🚀 => handleDrop => type", type);
|
||||
const filePath = e.dataTransfer.files[0].path;
|
||||
console.log("🚀 => handleDrop => filePath", filePath);
|
||||
const extension = e.dataTransfer.files[0].name.split(".").at(-1);
|
||||
console.log("🚀 => handleDrop => extension", extension);
|
||||
logit("ℹ Dropped file: ", JSON.stringify({ type, filePath, extension }));
|
||||
|
||||
if (
|
||||
(!type.includes("image") && !type.includes("video")) ||
|
||||
(!allowedFileTypes.includes(extension.toLowerCase()) &&
|
||||
!allowedVideoFileTypes.includes(extension.toLowerCase()))
|
||||
) {
|
||||
logit("ℹ Invalid file dropped");
|
||||
alert("Please drag and drop an image");
|
||||
} else {
|
||||
if (isVideo) {
|
||||
setVideoPath(filePath);
|
||||
} else {
|
||||
logit("ℹ Setting image path: ", filePath);
|
||||
SetImagePath(filePath);
|
||||
}
|
||||
|
||||
var dirname = filePath.match(/(.*)[\/\\]/)[1] || "";
|
||||
logit("ℹ Setting output path: ", dirname);
|
||||
setOutputPath(dirname);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePaste = (e) => {
|
||||
console.log(e);
|
||||
resetImagePaths();
|
||||
e.preventDefault();
|
||||
|
||||
const type = e.clipboardData.items[0].type;
|
||||
const filePath = e.clipboardData.files[0].path;
|
||||
const extension = e.clipboardData.files[0].name.split(".").at(-1);
|
||||
|
||||
logit("ℹ Pasted file: ", JSON.stringify({ type, filePath, extension }));
|
||||
|
||||
if (
|
||||
!type.includes("image") &&
|
||||
!allowedFileTypes.includes(extension.toLowerCase())
|
||||
@ -396,6 +390,7 @@ const Home = () => {
|
||||
} else {
|
||||
SetImagePath(filePath);
|
||||
var dirname = filePath.match(/(.*)[\/\\]/)[1] || "";
|
||||
logit("ℹ Setting output path: ", dirname);
|
||||
setOutputPath(dirname);
|
||||
}
|
||||
};
|
||||
@ -403,9 +398,13 @@ const Home = () => {
|
||||
const outputHandler = async () => {
|
||||
var path = await window.electron.invoke(commands.SELECT_FOLDER);
|
||||
if (path !== null) {
|
||||
logit("ℹ Setting Output Path: ", path);
|
||||
setOutputPath(path);
|
||||
|
||||
const rememberOutputFolder = localStorage.getItem("rememberOutputFolder");
|
||||
|
||||
if (rememberOutputFolder) {
|
||||
logit("ℹ Remembering Output Folder: ", path);
|
||||
localStorage.setItem("lastOutputFolderPath", path);
|
||||
}
|
||||
} else {
|
||||
@ -417,6 +416,7 @@ const Home = () => {
|
||||
if (isVideo) {
|
||||
setUpscaledVideoPath("");
|
||||
} else {
|
||||
logit("ℹ Resetting Upscaled Image Path");
|
||||
setUpscaledImagePath("");
|
||||
}
|
||||
|
||||
@ -432,6 +432,7 @@ const Home = () => {
|
||||
saveImageAs,
|
||||
scale,
|
||||
});
|
||||
logit("ℹ DOUBLE_UPSCAYL");
|
||||
} else if (batchMode) {
|
||||
setDoubleUpscayl(false);
|
||||
window.electron.send(commands.FOLDER_UPSCAYL, {
|
||||
@ -443,6 +444,7 @@ const Home = () => {
|
||||
saveImageAs,
|
||||
scale,
|
||||
});
|
||||
logit("ℹ FOLDER_UPSCAYL");
|
||||
} else {
|
||||
window.electron.send(commands.UPSCAYL, {
|
||||
scaleFactor,
|
||||
@ -453,6 +455,7 @@ const Home = () => {
|
||||
saveImageAs,
|
||||
scale,
|
||||
});
|
||||
logit("ℹ UPSCAYL");
|
||||
}
|
||||
}
|
||||
// else if (isVideo && videoPath !== "") {
|
||||
@ -467,16 +470,19 @@ const Home = () => {
|
||||
// }
|
||||
else {
|
||||
alert(`Please select ${isVideo ? "a video" : "an image"} to upscale`);
|
||||
logit("ℹ No valid image selected");
|
||||
}
|
||||
};
|
||||
|
||||
const stopHandler = () => {
|
||||
window.electron.send(commands.STOP);
|
||||
logit("ℹ Stopping Upscayl");
|
||||
resetImagePaths();
|
||||
};
|
||||
|
||||
const formatPath = (path) => {
|
||||
//USE REGEX TO GET THE FILENAME AND ENCODE IT INTO PROPER FORM IN ORDER TO AVOID ERRORS DUE TO SPECIAL CHARACTERS
|
||||
logit("ℹ Formatting path: ", path);
|
||||
return path.replace(
|
||||
/([^/\\]+)$/i,
|
||||
encodeURIComponent(path.match(/[^/\\]+$/i)[0])
|
||||
|
||||
Loading…
Reference in New Issue
Block a user