From 479acfe30e0e27cfd46c402919b2e17d7aa5214a Mon Sep 17 00:00:00 2001 From: Nayam Amarshe <25067102+NayamAmarshe@users.noreply.github.com> Date: Sat, 8 Apr 2023 12:23:32 +0530 Subject: [PATCH] Added jotai and loggin --- electron/index.ts | 48 +++++++------- main/index.js | 42 ++++++------- package-lock.json | 23 +++++++ package.json | 1 + renderer/atoms/logAtom.ts | 3 + renderer/components/SettingsTab.tsx | 27 +++++--- renderer/pages/_app.tsx | 5 +- renderer/pages/index.tsx | 98 ++++++++++++++++------------- 8 files changed, 146 insertions(+), 101 deletions(-) create mode 100644 renderer/atoms/logAtom.ts diff --git a/electron/index.ts b/electron/index.ts index 7e2ea05..a5e2f52 100644 --- a/electron/index.ts +++ b/electron/index.ts @@ -97,10 +97,10 @@ ipcMain.handle(commands.SELECT_FILE, async () => { }); if (canceled) { - console.log("File Operation Cancelled"); + log.log("File Operation Cancelled"); return "cancelled"; } else { - console.log("Selected File Path: ", filePaths[0]); + log.log("Selected File Path: ", filePaths[0]); // CREATE input AND upscaled FOLDER return filePaths[0]; } @@ -112,17 +112,17 @@ ipcMain.handle(commands.SELECT_FOLDER, async (event, message) => { properties: ["openDirectory"], }); if (canceled) { - console.log("operation cancelled"); + log.log("operation cancelled"); return "cancelled"; } else { - console.log(filePaths[0]); + log.log(filePaths[0]); return filePaths[0]; } }); //------------------------Open Folder-----------------------------// ipcMain.on(commands.OPEN_FOLDER, async (event, payload) => { - console.log(payload); + log.log(payload); shell.openPath(payload); }); @@ -167,7 +167,7 @@ ipcMain.on(commands.DOUBLE_UPSCAYL, async (event, payload) => { // CONVERT DATA TO STRING data = data.toString(); // PRINT TO CONSOLE - console.log(data); + log.log(data); // SEND UPSCAYL PROGRESS TO RENDERER mainWindow.webContents.send(commands.DOUBLE_UPSCAYL_PROGRESS, data); // IF PROGRESS HAS ERROR, UPSCAYL FAILED @@ -190,7 +190,7 @@ ipcMain.on(commands.DOUBLE_UPSCAYL, async (event, payload) => { // CONVERT DATA TO STRING data = data.toString(); // PRINT TO CONSOLE - console.log(data); + log.log(data); // SEND UPSCAYL PROGRESS TO RENDERER mainWindow.webContents.send(commands.DOUBLE_UPSCAYL_PROGRESS, data); // IF PROGRESS HAS ERROR, UPSCAYL FAILED @@ -208,7 +208,7 @@ ipcMain.on(commands.DOUBLE_UPSCAYL, async (event, payload) => { }; const onClose2 = (code) => { if (!failed2) { - console.log("Done upscaling"); + log.log("Done upscaling"); mainWindow.webContents.send( commands.DOUBLE_UPSCAYL_DONE, isAlpha ? outFile + ".png" : outFile @@ -254,10 +254,10 @@ ipcMain.on(commands.UPSCAYL, async (event, payload) => { const fullfileName = payload.imagePath.replace(/^.*[\\\/]/, "") as string; const fileName = parse(fullfileName).name; - console.log("🚀 => fileName", fileName); + log.log("🚀 => fileName", fileName); const fileExt = parse(fullfileName).ext; - console.log("🚀 => fileExt", fileExt); + log.log("🚀 => fileExt", fileExt); const outFile = outputDir + @@ -293,17 +293,14 @@ ipcMain.on(commands.UPSCAYL, async (event, payload) => { let failed = false; const onData = (data: string) => { - console.log( - "🚀 => upscayl.stderr.on => stderr.toString()", - data.toString() - ); + log.log("image upscayl: ", data.toString()); data = data.toString(); mainWindow.webContents.send(commands.UPSCAYL_PROGRESS, data.toString()); if (data.includes("invalid gpu") || data.includes("failed")) { failed = true; } if (data.includes("has alpha channel")) { - console.log("INCLUDES ALPHA CHANNEL, CHANGING OUTFILE NAME!"); + log.log("INCLUDES ALPHA CHANNEL, CHANGING OUTFILE NAME!"); isAlpha = true; } }; @@ -314,7 +311,7 @@ ipcMain.on(commands.UPSCAYL, async (event, payload) => { }; const onClose = () => { if (failed !== true) { - console.log("Done upscaling"); + log.log("Done upscaling"); mainWindow.webContents.send( commands.UPSCAYL_DONE, isAlpha ? outFile + ".png" : outFile @@ -359,10 +356,7 @@ ipcMain.on(commands.FOLDER_UPSCAYL, async (event, payload) => { let failed = false; const onData = (data: any) => { - console.log( - "🚀 => upscayl.stderr.on => stderr.toString()", - data.toString() - ); + log.log("🚀 => upscayl.stderr.on => stderr.toString()", data.toString()); data = data.toString(); mainWindow.webContents.send( commands.FOLDER_UPSCAYL_PROGRESS, @@ -382,7 +376,7 @@ ipcMain.on(commands.FOLDER_UPSCAYL, async (event, payload) => { }; const onClose = () => { if (failed !== true) { - console.log("Done upscaling"); + log.log("Done upscaling"); mainWindow.webContents.send(commands.FOLDER_UPSCAYL_DONE, outputDir); } }; @@ -430,15 +424,15 @@ autoUpdater.on("update-downloaded", (event) => { // const justFileName = parse(videoFileName).name; // let inputDir = payload.videoPath.match(/(.*)[\/\\]/)[1] || ""; -// console.log("🚀 => file: index.ts => line 337 => inputDir", inputDir); +// log.log("🚀 => file: index.ts => line 337 => inputDir", inputDir); // // Set the output directory // let outputDir = payload.outputPath + "_frames"; -// console.log("🚀 => file: index.ts => line 340 => outputDir", outputDir); +// log.log("🚀 => file: index.ts => line 340 => outputDir", outputDir); // let frameExtractionPath = join(inputDir, justFileName + "_f"); // let frameUpscalePath = join(inputDir, justFileName + "_u"); -// console.log( +// log.log( // "🚀 => file: index.ts => line 342 => frameExtractionPath", // frameExtractionPath, // frameUpscalePath @@ -467,7 +461,7 @@ autoUpdater.on("update-downloaded", (event) => { // let failed = false; // ffmpegProcess?.stderr.on("data", (data: string) => { -// console.log("🚀 => file: index.ts:420 => data", data.toString()); +// log.log("🚀 => file: index.ts:420 => data", data.toString()); // data = data.toString(); // mainWindow.webContents.send( // commands.FFMPEG_VIDEO_PROGRESS, @@ -487,7 +481,7 @@ autoUpdater.on("update-downloaded", (event) => { // // Send done comamnd when // ffmpegProcess?.on("close", (code: number) => { // if (failed !== true) { -// console.log("Frame extraction successful!"); +// log.log("Frame extraction successful!"); // mainWindow.webContents.send(commands.FFMPEG_VIDEO_DONE, outputDir); // // UPSCALE @@ -513,7 +507,7 @@ autoUpdater.on("update-downloaded", (event) => { // ); // upscayl?.stderr.on("data", (data) => { -// console.log( +// log.log( // "🚀 => upscayl.stderr.on => stderr.toString()", // data.toString() // ); diff --git a/main/index.js b/main/index.js index d55cc4e..41a5972 100644 --- a/main/index.js +++ b/main/index.js @@ -82,11 +82,11 @@ electron_1.ipcMain.handle(commands_1.default.SELECT_FILE, () => __awaiter(void 0 properties: ["openFile", "multiSelections"], }); if (canceled) { - console.log("File Operation Cancelled"); + electron_log_1.default.log("File Operation Cancelled"); return "cancelled"; } else { - console.log("Selected File Path: ", filePaths[0]); + electron_log_1.default.log("Selected File Path: ", filePaths[0]); // CREATE input AND upscaled FOLDER return filePaths[0]; } @@ -97,17 +97,17 @@ electron_1.ipcMain.handle(commands_1.default.SELECT_FOLDER, (event, message) => properties: ["openDirectory"], }); if (canceled) { - console.log("operation cancelled"); + electron_log_1.default.log("operation cancelled"); return "cancelled"; } else { - console.log(filePaths[0]); + electron_log_1.default.log(filePaths[0]); return filePaths[0]; } })); //------------------------Open Folder-----------------------------// electron_1.ipcMain.on(commands_1.default.OPEN_FOLDER, (event, payload) => __awaiter(void 0, void 0, void 0, function* () { - console.log(payload); + electron_log_1.default.log(payload); electron_1.shell.openPath(payload); })); //------------------------Double Upscayl-----------------------------// @@ -134,7 +134,7 @@ electron_1.ipcMain.on(commands_1.default.DOUBLE_UPSCAYL, (event, payload) => __a // CONVERT DATA TO STRING data = data.toString(); // PRINT TO CONSOLE - console.log(data); + electron_log_1.default.log(data); // SEND UPSCAYL PROGRESS TO RENDERER mainWindow.webContents.send(commands_1.default.DOUBLE_UPSCAYL_PROGRESS, data); // IF PROGRESS HAS ERROR, UPSCAYL FAILED @@ -157,7 +157,7 @@ electron_1.ipcMain.on(commands_1.default.DOUBLE_UPSCAYL, (event, payload) => __a // CONVERT DATA TO STRING data = data.toString(); // PRINT TO CONSOLE - console.log(data); + electron_log_1.default.log(data); // SEND UPSCAYL PROGRESS TO RENDERER mainWindow.webContents.send(commands_1.default.DOUBLE_UPSCAYL_PROGRESS, data); // IF PROGRESS HAS ERROR, UPSCAYL FAILED @@ -175,7 +175,7 @@ electron_1.ipcMain.on(commands_1.default.DOUBLE_UPSCAYL, (event, payload) => __a }; const onClose2 = (code) => { if (!failed2) { - console.log("Done upscaling"); + electron_log_1.default.log("Done upscaling"); mainWindow.webContents.send(commands_1.default.DOUBLE_UPSCAYL_DONE, isAlpha ? outFile + ".png" : outFile); } }; @@ -203,9 +203,9 @@ electron_1.ipcMain.on(commands_1.default.UPSCAYL, (event, payload) => __awaiter( // COPY IMAGE TO TMP FOLDER const fullfileName = payload.imagePath.replace(/^.*[\\\/]/, ""); const fileName = (0, path_1.parse)(fullfileName).name; - console.log("🚀 => fileName", fileName); + electron_log_1.default.log("🚀 => fileName", fileName); const fileExt = (0, path_1.parse)(fullfileName).ext; - console.log("🚀 => fileExt", fileExt); + electron_log_1.default.log("🚀 => fileExt", fileExt); const outFile = outputDir + "/" + fileName + @@ -225,14 +225,14 @@ electron_1.ipcMain.on(commands_1.default.UPSCAYL, (event, payload) => __awaiter( let isAlpha = false; let failed = false; const onData = (data) => { - console.log("🚀 => upscayl.stderr.on => stderr.toString()", data.toString()); + electron_log_1.default.log("image upscayl: ", data.toString()); data = data.toString(); mainWindow.webContents.send(commands_1.default.UPSCAYL_PROGRESS, data.toString()); if (data.includes("invalid gpu") || data.includes("failed")) { failed = true; } if (data.includes("has alpha channel")) { - console.log("INCLUDES ALPHA CHANNEL, CHANGING OUTFILE NAME!"); + electron_log_1.default.log("INCLUDES ALPHA CHANNEL, CHANGING OUTFILE NAME!"); isAlpha = true; } }; @@ -243,7 +243,7 @@ electron_1.ipcMain.on(commands_1.default.UPSCAYL, (event, payload) => __awaiter( }; const onClose = () => { if (failed !== true) { - console.log("Done upscaling"); + electron_log_1.default.log("Done upscaling"); mainWindow.webContents.send(commands_1.default.UPSCAYL_DONE, isAlpha ? outFile + ".png" : outFile); } }; @@ -269,7 +269,7 @@ electron_1.ipcMain.on(commands_1.default.FOLDER_UPSCAYL, (event, payload) => __a const upscayl = (0, upscayl_1.spawnUpscayl)("realesrgan", (0, getArguments_1.getBatchArguments)(inputDir, outputDir, binaries_1.modelsPath, model, gpuId, saveImageAs)); let failed = false; const onData = (data) => { - console.log("🚀 => upscayl.stderr.on => stderr.toString()", data.toString()); + electron_log_1.default.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")) { @@ -283,7 +283,7 @@ electron_1.ipcMain.on(commands_1.default.FOLDER_UPSCAYL, (event, payload) => __a }; const onClose = () => { if (failed !== true) { - console.log("Done upscaling"); + electron_log_1.default.log("Done upscaling"); mainWindow.webContents.send(commands_1.default.FOLDER_UPSCAYL_DONE, outputDir); } }; @@ -324,13 +324,13 @@ electron_updater_1.autoUpdater.on("update-downloaded", (event) => { // let videoFileName = payload.videoPath.replace(/^.*[\\\/]/, ""); // const justFileName = parse(videoFileName).name; // let inputDir = payload.videoPath.match(/(.*)[\/\\]/)[1] || ""; -// console.log("🚀 => file: index.ts => line 337 => inputDir", inputDir); +// log.log("🚀 => file: index.ts => line 337 => inputDir", inputDir); // // Set the output directory // let outputDir = payload.outputPath + "_frames"; -// console.log("🚀 => file: index.ts => line 340 => outputDir", outputDir); +// log.log("🚀 => file: index.ts => line 340 => outputDir", outputDir); // let frameExtractionPath = join(inputDir, justFileName + "_f"); // let frameUpscalePath = join(inputDir, justFileName + "_u"); -// console.log( +// log.log( // "🚀 => file: index.ts => line 342 => frameExtractionPath", // frameExtractionPath, // frameUpscalePath @@ -356,7 +356,7 @@ electron_updater_1.autoUpdater.on("update-downloaded", (event) => { // ); // let failed = false; // ffmpegProcess?.stderr.on("data", (data: string) => { -// console.log("🚀 => file: index.ts:420 => data", data.toString()); +// log.log("🚀 => file: index.ts:420 => data", data.toString()); // data = data.toString(); // mainWindow.webContents.send( // commands.FFMPEG_VIDEO_PROGRESS, @@ -374,7 +374,7 @@ electron_updater_1.autoUpdater.on("update-downloaded", (event) => { // // Send done comamnd when // ffmpegProcess?.on("close", (code: number) => { // if (failed !== true) { -// console.log("Frame extraction successful!"); +// log.log("Frame extraction successful!"); // mainWindow.webContents.send(commands.FFMPEG_VIDEO_DONE, outputDir); // // UPSCALE // let upscayl: ChildProcessWithoutNullStreams | null = null; @@ -398,7 +398,7 @@ electron_updater_1.autoUpdater.on("update-downloaded", (event) => { // } // ); // upscayl?.stderr.on("data", (data) => { -// console.log( +// log.log( // "🚀 => upscayl.stderr.on => stderr.toString()", // data.toString() // ); diff --git a/package-lock.json b/package-lock.json index 7e383d3..e946a28 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "electron-root-path": "^1.1.0", "electron-updater": "^5.3.0", "image-size": "^1.0.2", + "jotai": "^2.0.3", "react-compare-slider": "^2.2.0", "react-dropzone": "^14.2.3", "react-image-zoom": "^1.3.1", @@ -4936,6 +4937,22 @@ "node": ">=10" } }, + "node_modules/jotai": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/jotai/-/jotai-2.0.3.tgz", + "integrity": "sha512-MMjhSPAL3RoeZD9WbObufRT2quThEAEknHHridf2ma8Ml7ZVQmUiHk0ssdbR3F0h3kcwhYqSGJ59OjhPge7RRg==", + "engines": { + "node": ">=12.20.0" + }, + "peerDependencies": { + "react": ">=17.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + } + } + }, "node_modules/js-image-zoom": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/js-image-zoom/-/js-image-zoom-0.7.0.tgz", @@ -11365,6 +11382,12 @@ "minimatch": "^3.0.4" } }, + "jotai": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/jotai/-/jotai-2.0.3.tgz", + "integrity": "sha512-MMjhSPAL3RoeZD9WbObufRT2quThEAEknHHridf2ma8Ml7ZVQmUiHk0ssdbR3F0h3kcwhYqSGJ59OjhPge7RRg==", + "requires": {} + }, "js-image-zoom": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/js-image-zoom/-/js-image-zoom-0.7.0.tgz", diff --git a/package.json b/package.json index 9301cd2..4d4a33c 100644 --- a/package.json +++ b/package.json @@ -164,6 +164,7 @@ "electron-root-path": "^1.1.0", "electron-updater": "^5.3.0", "image-size": "^1.0.2", + "jotai": "^2.0.3", "react-compare-slider": "^2.2.0", "react-dropzone": "^14.2.3", "react-image-zoom": "^1.3.1", diff --git a/renderer/atoms/logAtom.ts b/renderer/atoms/logAtom.ts new file mode 100644 index 0000000..a23b6e1 --- /dev/null +++ b/renderer/atoms/logAtom.ts @@ -0,0 +1,3 @@ +import { atom } from "jotai"; + +export const logAtom = atom([]); diff --git a/renderer/components/SettingsTab.tsx b/renderer/components/SettingsTab.tsx index e01a5c9..6ecb3cb 100644 --- a/renderer/components/SettingsTab.tsx +++ b/renderer/components/SettingsTab.tsx @@ -30,6 +30,7 @@ interface IProps { width: number | null; height: number | null; }; + logData: string[]; } function SettingsTab({ @@ -55,6 +56,7 @@ function SettingsTab({ saveImageAs, setSaveImageAs, dimensions, + logData, }: IProps) { const [currentModel, setCurrentModel] = useState<{ label: string; @@ -64,6 +66,8 @@ function SettingsTab({ value: null, }); + const [isCopied, setIsCopied] = useState(false); + useEffect(() => { themeChange(false); @@ -112,6 +116,14 @@ function SettingsTab({ localStorage.setItem("gpuId", e.target.value); }; + const copyOnClickHandler = () => { + navigator.clipboard.writeText(logData.join("\n")); + setIsCopied(true); + setTimeout(() => { + setIsCopied(false); + }, 2000); + }; + const customStyles = { option: (provided, state) => ({ ...provided, @@ -242,15 +254,16 @@ function SettingsTab({

Logs

- - {log.info("Hello World")} + + {logData.map((logLine) => { + console.log(logData); + return

{logLine}

; + })}
diff --git a/renderer/pages/_app.tsx b/renderer/pages/_app.tsx index 2e19c60..54c0af8 100644 --- a/renderer/pages/_app.tsx +++ b/renderer/pages/_app.tsx @@ -4,6 +4,7 @@ import { AppProps } from "next/app"; import { useEffect } from "react"; import { themeChange } from "theme-change"; import log from "electron-log/renderer"; +import { Provider } from "jotai"; const MyApp = ({ Component, pageProps }: AppProps) => { return ( @@ -11,7 +12,9 @@ const MyApp = ({ Component, pageProps }: AppProps) => { Upscayl - + + + ); }; diff --git a/renderer/pages/index.tsx b/renderer/pages/index.tsx index 89ade9b..f49b5cb 100644 --- a/renderer/pages/index.tsx +++ b/renderer/pages/index.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect, useRef, useCallback } from "react"; +import { useState, useEffect, useCallback } from "react"; import commands from "../../electron/commands"; import { ReactCompareSlider } from "react-compare-slider"; import Header from "../components/Header"; @@ -6,12 +6,11 @@ import Footer from "../components/Footer"; import ProgressBar from "../components/ProgressBar"; import RightPaneInfo from "../components/RightPaneInfo"; import ImageOptions from "../components/ImageOptions"; -import LeftPaneVideoSteps from "../components/LeftPaneVideoSteps"; import LeftPaneImageSteps from "../components/LeftPaneImageSteps"; import Tabs from "../components/Tabs"; import SettingsTab from "../components/SettingsTab"; - -let logData = []; +import { useAtom } from "jotai"; +import { logAtom } from "../atoms/logAtom"; const Home = () => { // STATES @@ -40,17 +39,21 @@ const Home = () => { height: null, }); const [selectedTab, setSelectedTab] = useState(0); - const [logData, setLogData] = useState([]); + const [logData, setLogData] = useAtom(logAtom); - (function () { - let info = console.info; + // (function () { + // let info = console.info; - console.log = function () { - var args = Array.prototype.slice.call(arguments); - info.apply(this, args); - setLogData([...logData, { level: "info", arguments: args }]); - }; - })(); + // console.log = function () { + // var args = Array.prototype.slice.call(arguments); + // info.apply(this, args); + // }; + // })(); + + const addToLog = (data: string) => { + console.log("🚀 => file: index.tsx:52 => data:", data); + setLogData((prevLogData) => [...prevLogData, data]); + }; // EFFECTS useEffect(() => { @@ -58,7 +61,7 @@ const Home = () => { setVersion(navigator?.userAgent?.match(/Upscayl\/([\d\.]+\d+)/)[1]); - const handleErrors = (data) => { + const handleErrors = (data: string) => { if (data.includes("invalid gpu")) { alert( "Error. Please make sure you have a Vulkan compatible GPU (Most modern GPUs support Vulkan). Upscayl does not work with CPU or iGPU sadly." @@ -82,28 +85,25 @@ const Home = () => { }; // UPSCAYL PROGRESS - window.electron.on(commands.UPSCAYL_PROGRESS, (_, data) => { - console.log( - "🚀 => file: index.jsx => line 61 => window.electron.on => data", - data - ); - + window.electron.on(commands.UPSCAYL_PROGRESS, (_, data: string) => { if (data.length > 0 && data.length < 10) { setProgress(data); } handleErrors(data); + addToLog(data); }); // FOLDER UPSCAYL PROGRESS - window.electron.on(commands.FOLDER_UPSCAYL_PROGRESS, (_, data) => { + window.electron.on(commands.FOLDER_UPSCAYL_PROGRESS, (_, data: string) => { if (data.length > 0 && data.length < 10) { setProgress(data); } handleErrors(data); + addToLog(data); }); // DOUBLE UPSCAYL PROGRESS - window.electron.on(commands.DOUBLE_UPSCAYL_PROGRESS, (_, data) => { + window.electron.on(commands.DOUBLE_UPSCAYL_PROGRESS, (_, data: string) => { if (data.length > 0 && data.length < 10) { if (data === "0.00%") { setDoubleUpscaylCounter(doubleUpscaylCounter + 1); @@ -111,39 +111,45 @@ const Home = () => { setProgress(data); } handleErrors(data); + addToLog(data); }); // VIDEO UPSCAYL PROGRESS - window.electron.on(commands.UPSCAYL_VIDEO_PROGRESS, (_, data) => { + window.electron.on(commands.UPSCAYL_VIDEO_PROGRESS, (_, data: string) => { if (data.length > 0 && data.length < 10) { setProgress(data); } handleErrors(data); + addToLog(data); }); // UPSCAYL DONE - window.electron.on(commands.UPSCAYL_DONE, (_, data) => { + window.electron.on(commands.UPSCAYL_DONE, (_, data: string) => { setProgress(""); setUpscaledImagePath(data); + addToLog(data); }); // FOLDER UPSCAYL DONE - window.electron.on(commands.FOLDER_UPSCAYL_DONE, (_, data) => { + window.electron.on(commands.FOLDER_UPSCAYL_DONE, (_, data: string) => { setProgress(""); setUpscaledBatchFolderPath(data); + addToLog(data); }); // DOUBLE UPSCAYL DONE - window.electron.on(commands.DOUBLE_UPSCAYL_DONE, (_, data) => { + window.electron.on(commands.DOUBLE_UPSCAYL_DONE, (_, data: string) => { setProgress(""); setDoubleUpscaylCounter(0); setUpscaledImagePath(data); + addToLog(data); }); // VIDEO UPSCAYL DONE - window.electron.on(commands.UPSCAYL_VIDEO_DONE, (_, data) => { + window.electron.on(commands.UPSCAYL_VIDEO_DONE, (_, data: string) => { setProgress(""); setUpscaledVideoPath(data); + addToLog(data); }); }, []); @@ -205,24 +211,24 @@ const Home = () => { }; // HANDLERS - const handleMouseMove = (e) => { + const handleMouseMove = useCallback((e: any) => { const { left, top, width, height } = e.target.getBoundingClientRect(); const x = ((e.pageX - left) / width) * 100; const y = ((e.pageY - top) / height) * 100; setBackgroundPosition(`${x}% ${y}%`); - }; + }, []); - const selectVideoHandler = async () => { - resetImagePaths(); + // const selectVideoHandler = async () => { + // resetImagePaths(); - var path = await window.electron.invoke(commands.SELECT_FILE); + // var path = await window.electron.invoke(commands.SELECT_FILE); - if (path !== "cancelled") { - setVideoPath(path); - var dirname = path.match(/(.*)[\/\\]/)[1] || ""; - setOutputPath(dirname); - } - }; + // if (path !== "cancelled") { + // setVideoPath(path); + // var dirname = path.match(/(.*)[\/\\]/)[1] || ""; + // setOutputPath(dirname); + // } + // }; const selectImageHandler = async () => { resetImagePaths(); @@ -247,14 +253,15 @@ const Home = () => { } }; - const imageLoadHandler = ({ target: img }) => { - const image = img; - console.log("imageLoadHandler", { - image, - }); - }; + // ? What's this for + // const imageLoadHandler = ({ target: img }) => { + // const image = img; + // console.log("imageLoadHandler", { + // image, + // }); + // }; - const handleModelChange = (e) => { + const handleModelChange = (e: any) => { setModel(e.value); localStorage.setItem( "model", @@ -492,6 +499,7 @@ const Home = () => { saveImageAs={saveImageAs} setSaveImageAs={setSaveImageAs} dimensions={dimensions} + logData={logData} /> )} {/* )} */}