From f1505bdf00dd0e23e4036e98766101e4c6fda331 Mon Sep 17 00:00:00 2001 From: Feenix <25067102+NayamAmarshe@users.noreply.github.com> Date: Mon, 1 May 2023 12:51:47 +0530 Subject: [PATCH] Added logit on renderer process and LeftPaneImageSteps --- renderer/components/LeftPaneImageSteps.tsx | 85 ++++------------------ renderer/pages/index.tsx | 76 ++++++++++--------- 2 files changed, 56 insertions(+), 105 deletions(-) diff --git a/renderer/components/LeftPaneImageSteps.tsx b/renderer/components/LeftPaneImageSteps.tsx index 233cccb..021f1c5 100644 --- a/renderer/components/LeftPaneImageSteps.tsx +++ b/renderer/components/LeftPaneImageSteps.tsx @@ -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 - 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 (
{/* BATCH OPTION */} diff --git a/renderer/pages/index.tsx b/renderer/pages/index.tsx index 26afa6d..390e45b 100644 --- a/renderer/pages/index.tsx +++ b/renderer/pages/index.tsx @@ -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])