Refactor index.html (#33)

* Moved progress bar and refactored html code to use React * Prettier didn't like these * Console logs → log.info
Comfy-Org · Sep 19, 2024 · 9c4edb9 · 9c4edb9
1 parent 2d999df
commit 9c4edb9
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 67 deletions.
diff --git a/index.html b/index.html
@@ -3,41 +3,9 @@
   <head>
     <meta charset="UTF-8" />
     <title>ComfyUI</title>
-    <style>
-      body {
-        font-family: Arial, sans-serif;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        height: 100vh;
-        margin: 0;
-        background-color: #f0f0f0;
-      }
-      #loading-text {
-        margin-bottom: 20px;
-        text-align: center;
-      }
-      #progress-bar {
-        width: 300px;
-        height: 20px;
-        background-color: #e0e0e0;
-        border-radius: 10px;
-        overflow: hidden;
-      }
-      #progress {
-        width: 0%;
-        height: 100%;
-        background-color: #09f;
-        transition: width 0.5s ease;
-      }
-    </style>
   </head>
   <body>
-    <div id="loading-text">Initializing...</div>
-    <div id="progress-bar">
-      <div id="progress"></div>
-    </div>
+    <div id="root"></div>
     <script type="module" src="/src/renderer.ts"></script>
   </body>
 </html>
diff --git 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
@@ -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
@@ -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
@@ -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 (
+    <div style={bodyStyle}>
+      <ProgressOverlay />
+    </div>
+  );
+}
+
+export default Home;
diff --git a/src/renderer/screens/ProgressOverlay.tsx 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 (
+    <>
+      <div style={loadingTextStyle} id="loading-text">
+        Initializing...
+      </div>
+      <div style={progressBarStyle} id="progress-bar">
+        <div style={progressStyle} id="progress"></div>
+      </div>
+    </>
+  );
+}
+
+export default ProgressOverlay;
diff --git 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,