Extract comfyui container as component

src/renderer/components/ComfyUIContainer.tsx

@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from 'react';
+import LogViewer from './LogViewer';
+import { ElectronAPI } from 'src/preload';
+import { ELECTRON_BRIDGE_API } from 'src/constants';
+
+interface ComfyUIContainerProps {
+  comfyPort: number;
+  preloadScript: string;
+  showStreamingLogs: boolean;
+  onCloseLogViewer: () => void;
+}
+
+const iframeContainerStyle: React.CSSProperties = {
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100vh',
+  margin: '0',
+  padding: '0',
+};
+
+const iframeStyle: React.CSSProperties = {
+  flexGrow: 1,
+  border: 'none',
+  width: '100%',
+  height: '100%',
+};
+
+const logContainerStyle: React.CSSProperties = {
+  height: '300px',
+};
+
+const ComfyUIContainer: React.FC<ComfyUIContainerProps> = ({
+  comfyPort,
+  preloadScript,
+}) => {
+  const [showStreamingLogs, setShowStreamingLogs] = useState(false);
+
+  useEffect(() => {
+    const electronAPI: ElectronAPI = (window as any)[ELECTRON_BRIDGE_API];
+
+    electronAPI.onToggleLogsView(() => {
+      setShowStreamingLogs((prevState) => !prevState);
+    });
+  }, []);
+
+  return (
+    <div style={iframeContainerStyle}>
+      <webview
+        id="comfy-container"
+        src={`http://localhost:${comfyPort}`}
+        style={iframeStyle}
+        preload={`file://${preloadScript}`}
+      />
+      {showStreamingLogs && (
+        <div style={logContainerStyle}>
+          <LogViewer onClose={() => setShowStreamingLogs(false)} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ComfyUIContainer;

src/renderer/index.tsx

@@ -4,8 +4,8 @@ import log from 'electron-log/renderer';
 import FirstTimeSetup from './screens/FirstTimeSetup';
 import { ElectronAPI } from 'src/preload';
 import { ELECTRON_BRIDGE_API } from 'src/constants';
-import LogViewer from './screens/LogViewer';
-import path from 'path';
+import ComfyUIContainer from './components/ComfyUIContainer';
+
 export interface ProgressUpdate {
   status: string;
   overwrite?: boolean;
@@ -23,25 +23,6 @@ const bodyStyle: React.CSSProperties = {
   backgroundColor: '#1e1e1e',
 };
 
-const iframeStyle: React.CSSProperties = {
-  flexGrow: 1,
-  border: 'none',
-  width: '100%',
-  height: '100%',
-};
-
-const logContainerStyle: React.CSSProperties = {
-  height: '300px',
-};
-
-const iframeContainerStyle: React.CSSProperties = {
-  display: 'flex',
-  flexDirection: 'column',
-  height: '100vh',
-  margin: '0',
-  padding: '0',
-};
-
 // 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
@@ -50,7 +31,6 @@ const Home: React.FC = () => {
   const [status, setStatus] = useState('Starting...');
   const [logs, setLogs] = useState<string[]>([]);
   const [defaultInstallLocation, setDefaultInstallLocation] = useState<string>('');
-  const [showStreamingLogs, setShowStreamingLogs] = useState(false);
   const [comfyReady, setComfyReady] = useState(false);
   const [comfyPort, setComfyPort] = useState<number | null>(null);
   const [preloadScript, setPreloadScript] = useState<string>('');
@@ -81,11 +61,6 @@ const Home: React.FC = () => {
       setShowSetup(false);
     });
 
-    electronAPI.onToggleLogsView(() => {
-      log.info('Toggling logs view');
-      setShowStreamingLogs((prevState) => !prevState);
-    });
-
     electronAPI.onComfyUIReady((port: number) => {
       log.info('ComfyUI ready');
       setComfyPort(port);
@@ -130,19 +105,10 @@ const Home: React.FC = () => {
 
   if (comfyReady && comfyPort) {
     return (
-      <div style={iframeContainerStyle}>
-        <webview
-          id="comfy-container"
-          src={`http://localhost:${comfyPort}`}
-          style={iframeStyle}
-          preload={`file://${preloadScript}`}
-        />
-        {showStreamingLogs && (
-          <div style={logContainerStyle}>
-            <LogViewer onClose={() => setShowStreamingLogs(false)} />
-          </div>
-        )}
-      </div>
+      <ComfyUIContainer
+        comfyPort={comfyPort}
+        preloadScript={preloadScript}
+      />
     );
   }