From 9c4edb9a3f27b40629f66063f4e729bb41291aad Mon Sep 17 00:00:00 2001 From: KenCorma <37089104+KenCorma@users.noreply.github.com> Date: Thu, 19 Sep 2024 22:43:57 +0000 Subject: [PATCH] Refactor index.html (#33) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Moved progress bar and refactored html code to use React * Prettier didn't like these * Console logs → log.info --- index.html | 34 +----------- src/index.css | 2 - src/preload.ts | 3 +- src/renderer.ts | 35 ++---------- src/renderer/index.tsx | 27 ++++++++++ src/renderer/screens/ProgressOverlay.tsx | 68 ++++++++++++++++++++++++ vite.renderer.config.ts | 2 + 7 files changed, 104 insertions(+), 67 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/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.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..158c4674 --- /dev/null +++ b/src/renderer/index.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import ProgressOverlay from './screens/ProgressOverlay'; +import log from 'electron-log/renderer'; + +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..8c769853 --- /dev/null +++ b/src/renderer/screens/ProgressOverlay.tsx @@ -0,0 +1,68 @@ +import React, { useEffect } from 'react'; +import { ELECTRON_BRIDGE_API } from 'src/constants'; +import log from 'electron-log/renderer'; + +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; + log.info(`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) { + 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 { + log.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,