From 4b4e5aeda0b0db99962fff224825d0d48f3c538d Mon Sep 17 00:00:00 2001 From: Kendal Cormany Date: Mon, 16 Sep 2024 16:46:49 -0700 Subject: [PATCH 1/3] Moved progress bar and refactored html code to use React --- index.html | 34 +----------- src/index.css | 2 - src/renderer.ts | 35 ++----------- src/renderer/index.tsx | 26 +++++++++ src/renderer/screens/ProgressOverlay.tsx | 67 ++++++++++++++++++++++++ vite.renderer.config.ts | 2 + 6 files changed, 100 insertions(+), 66 deletions(-) create mode 100644 src/renderer/index.tsx create mode 100644 src/renderer/screens/ProgressOverlay.tsx diff --git a/index.html b/index.html index 72931275..577ed180 100644 --- a/index.html +++ b/index.html @@ -3,41 +3,9 @@ ComfyUI - -
Initializing...
-
-
-
+
diff --git a/src/index.css b/src/index.css index 8ed16598..ae9ff37f 100644 --- a/src/index.css +++ b/src/index.css @@ -1,6 +1,4 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; margin: auto; - max-width: 38rem; - padding: 2rem; } diff --git a/src/renderer.ts b/src/renderer.ts index 3119e5bb..71f7be4d 100644 --- a/src/renderer.ts +++ b/src/renderer.ts @@ -27,35 +27,8 @@ */ import './index.css'; -import { ELECTRON_BRIDGE_API } from './constants'; -import log from 'electron-log/renderer'; +import ReactDOM from 'react-dom/client'; +import Home from './renderer/index'; -log.info('👋 This message is being logged by "renderer.ts", included via Vite'); - -interface ProgressUpdate { - percentage: number; - status: string; -} - -const progressBar = document.getElementById('progress') as HTMLElement; -const loadingText = document.getElementById('loading-text') as HTMLElement; - -function updateProgress({ percentage, status }: ProgressUpdate) { - log.info(`Updating progress: ${percentage}%, ${status}`); - progressBar.style.width = `${percentage}%`; - loadingText.textContent = status; - - if (percentage === 100) { - loadingText.textContent = 'ComfyUI is ready!'; - } -} - -if (ELECTRON_BRIDGE_API in window) { - log.info(`${ELECTRON_BRIDGE_API} found, setting up listeners`); - (window as any).electronAPI.onProgressUpdate((update: ProgressUpdate) => { - log.info('Received loading progress', update); - updateProgress(update); - }); -} else { - console.error(`${ELECTRON_BRIDGE_API} not found in window object`); -} +// Generate the the app then render the root +ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(Home()); diff --git a/src/renderer/index.tsx b/src/renderer/index.tsx new file mode 100644 index 00000000..f6b8b74c --- /dev/null +++ b/src/renderer/index.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import ProgressOverlay from './screens/ProgressOverlay'; + +const bodyStyle: React.CSSProperties = { + fontFamily: 'Arial, sans-serif', + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + height: '100vh', + margin: '0', + backgroundColor: '#f0f0f0', +}; + +// Main entry point for the front end renderer. +// Currently this serves as the overlay to show progress as the comfy backend is coming online. +// after coming online the main.ts will replace the renderer with comfy's internal index.html +function Home(): React.ReactElement { + return ( +
+ +
+ ); +} + +export default Home; diff --git a/src/renderer/screens/ProgressOverlay.tsx b/src/renderer/screens/ProgressOverlay.tsx new file mode 100644 index 00000000..0696bf5b --- /dev/null +++ b/src/renderer/screens/ProgressOverlay.tsx @@ -0,0 +1,67 @@ +import React, { useEffect } from 'react'; +import { ELECTRON_BRIDGE_API } from 'src/constants'; + +const loadingTextStyle: React.CSSProperties = { + marginBottom: '20px', + textAlign: 'center', +}; + +const progressBarStyle: React.CSSProperties = { + width: '300px', + height: '20px', + backgroundColor: '#e0e0e0', + borderRadius: '10px', + overflow: 'hidden', +}; + +const progressStyle: React.CSSProperties = { + width: '0%', + height: '100%', + backgroundColor: '#09f', + transition: 'width 0.5s ease', +}; + +interface ProgressUpdate { + percentage: number; + status: string; +} + +//Overlay that shows the progress bar +function ProgressOverlay(): React.ReactElement { + function updateProgress({ percentage, status }: ProgressUpdate) { + const progressBar = document.getElementById('progress') as HTMLElement; + const loadingText = document.getElementById('loading-text') as HTMLElement; + console.log(`Updating progress: ${percentage}%, ${status}`); + progressBar.style.width = `${percentage}%`; + loadingText.textContent = status; + + if (percentage === 100) { + loadingText.textContent = 'ComfyUI is ready!'; + } + } + + // Updates when internal items change + useEffect(() => { + if (ELECTRON_BRIDGE_API in window) { + console.log(`${ELECTRON_BRIDGE_API} found, setting up listeners`); + (window as any).electronAPI.onProgressUpdate((update: ProgressUpdate) => { + console.log('Received loading progress', update); + updateProgress(update); + }); + } else { + console.error(`${ELECTRON_BRIDGE_API} not found in window object`); + } + }); + return ( + <> +
+ Initializing... +
+
+
+
+ + ); +} + +export default ProgressOverlay; diff --git a/vite.renderer.config.ts b/vite.renderer.config.ts index e821a3bb..631eabbe 100644 --- a/vite.renderer.config.ts +++ b/vite.renderer.config.ts @@ -1,6 +1,7 @@ import type { ConfigEnv, UserConfig } from 'vite'; import { defineConfig } from 'vite'; import { pluginExposeRenderer } from './vite.base.config'; +import { resolve } from 'node:path'; // https://vitejs.dev/config export default defineConfig((env) => { @@ -17,6 +18,7 @@ export default defineConfig((env) => { }, plugins: [pluginExposeRenderer(name)], resolve: { + alias: [{ find: 'src', replacement: resolve(__dirname, './src/') }], preserveSymlinks: true, }, clearScreen: false, From d5d0c8153371fc1eef214cd9941ab7926db1e7e7 Mon Sep 17 00:00:00 2001 From: Kendal Cormany Date: Mon, 16 Sep 2024 16:51:58 -0700 Subject: [PATCH 2/3] Prettier didn't like these --- src/renderer/index.tsx | 4 ++-- src/renderer/screens/ProgressOverlay.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/renderer/index.tsx b/src/renderer/index.tsx index f6b8b74c..5d549444 100644 --- a/src/renderer/index.tsx +++ b/src/renderer/index.tsx @@ -12,8 +12,8 @@ const bodyStyle: React.CSSProperties = { backgroundColor: '#f0f0f0', }; -// Main entry point for the front end renderer. -// Currently this serves as the overlay to show progress as the comfy backend is coming online. +// Main entry point for the front end renderer. +// Currently this serves as the overlay to show progress as the comfy backend is coming online. // after coming online the main.ts will replace the renderer with comfy's internal index.html function Home(): React.ReactElement { return ( diff --git a/src/renderer/screens/ProgressOverlay.tsx b/src/renderer/screens/ProgressOverlay.tsx index 0696bf5b..d3214f6d 100644 --- a/src/renderer/screens/ProgressOverlay.tsx +++ b/src/renderer/screens/ProgressOverlay.tsx @@ -26,7 +26,7 @@ interface ProgressUpdate { status: string; } -//Overlay that shows the progress bar +//Overlay that shows the progress bar function ProgressOverlay(): React.ReactElement { function updateProgress({ percentage, status }: ProgressUpdate) { const progressBar = document.getElementById('progress') as HTMLElement; From 9939ae0681ea1612852262fa1b0e275958f366ca Mon Sep 17 00:00:00 2001 From: Kendal Cormany Date: Thu, 19 Sep 2024 15:36:38 -0700 Subject: [PATCH 3/3] =?UTF-8?q?Console=20logs=20=E2=86=92=20log.info?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/preload.ts | 3 ++- src/renderer/index.tsx | 1 + src/renderer/screens/ProgressOverlay.tsx | 9 +++++---- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/preload.ts b/src/preload.ts index b2d3ca0a..f4bf1655 100644 --- a/src/preload.ts +++ b/src/preload.ts @@ -2,11 +2,12 @@ import { contextBridge, ipcRenderer } from 'electron'; import { IPC_CHANNELS, ELECTRON_BRIDGE_API } from './constants'; +import log from 'electron-log/main'; const electronAPI = { onProgressUpdate: (callback: (update: { percentage: number; status: string }) => void) => { ipcRenderer.on(IPC_CHANNELS.LOADING_PROGRESS, (_event, value) => { - console.log(`Received ${IPC_CHANNELS.LOADING_PROGRESS} event`, value); + log.info(`Received ${IPC_CHANNELS.LOADING_PROGRESS} event`, value); callback(value); }); }, diff --git a/src/renderer/index.tsx b/src/renderer/index.tsx index 5d549444..158c4674 100644 --- a/src/renderer/index.tsx +++ b/src/renderer/index.tsx @@ -1,5 +1,6 @@ import React from 'react'; import ProgressOverlay from './screens/ProgressOverlay'; +import log from 'electron-log/renderer'; const bodyStyle: React.CSSProperties = { fontFamily: 'Arial, sans-serif', diff --git a/src/renderer/screens/ProgressOverlay.tsx b/src/renderer/screens/ProgressOverlay.tsx index d3214f6d..8c769853 100644 --- a/src/renderer/screens/ProgressOverlay.tsx +++ b/src/renderer/screens/ProgressOverlay.tsx @@ -1,5 +1,6 @@ import React, { useEffect } from 'react'; import { ELECTRON_BRIDGE_API } from 'src/constants'; +import log from 'electron-log/renderer'; const loadingTextStyle: React.CSSProperties = { marginBottom: '20px', @@ -31,7 +32,7 @@ function ProgressOverlay(): React.ReactElement { function updateProgress({ percentage, status }: ProgressUpdate) { const progressBar = document.getElementById('progress') as HTMLElement; const loadingText = document.getElementById('loading-text') as HTMLElement; - console.log(`Updating progress: ${percentage}%, ${status}`); + log.info(`Updating progress: ${percentage}%, ${status}`); progressBar.style.width = `${percentage}%`; loadingText.textContent = status; @@ -43,13 +44,13 @@ function ProgressOverlay(): React.ReactElement { // Updates when internal items change useEffect(() => { if (ELECTRON_BRIDGE_API in window) { - console.log(`${ELECTRON_BRIDGE_API} found, setting up listeners`); + log.info(`${ELECTRON_BRIDGE_API} found, setting up listeners`); (window as any).electronAPI.onProgressUpdate((update: ProgressUpdate) => { - console.log('Received loading progress', update); + log.info('Received loading progress', update); updateProgress(update); }); } else { - console.error(`${ELECTRON_BRIDGE_API} not found in window object`); + log.error(`${ELECTRON_BRIDGE_API} not found in window object`); } }); return (