Merge pull request #159 from 6174/0.0.4-alpha

0.0.4 alpha
6174 · Jan 26, 2024 · c469deb · c469deb
2 parents c9b10ee + 6466dd7
commit c469deb
Show file tree

Hide file tree

Showing 67 changed files with 948 additions and 8,300 deletions.
diff --git a/.npmrc b/.npmrc
@@ -1 +1,2 @@
 auto-install-peers = true
+ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/
diff --git a/apps/electron-backend/layers/main/src/auto-update.ts b/apps/electron-backend/layers/main/src/auto-update.ts
@@ -18,10 +18,10 @@ export function startAutoUpdater() {
             // showMessage("Update Available", "A new version " + info.version + " is available")
 
             try {
-                autoUpdater.downloadUpdate();
+                await autoUpdater.downloadUpdate();
             } catch(err: any) {
                 logger.error("download update error: " + err.message);
-                showMessage("Update App Error", "There was a problem updating the application: " + err.message)
+                // showMessage("Update App Error", "There was a problem updating the application: " + err.message)
             }
         });
 
@@ -55,19 +55,23 @@ export function startAutoUpdater() {
     }
 }
 
-function startUpdateCheck(timeInterval: number) {
+async function startUpdateCheck(timeInterval: number) {
     try {
         if (!findAvaliableUpdate) {
-            autoUpdater.checkForUpdates();
+            await autoUpdater.checkForUpdates();
         }
-        updateCheckIntervaId = setInterval(() => {
+        updateCheckIntervaId = setInterval(async () => {
             if (!findAvaliableUpdate) {
-                autoUpdater.checkForUpdates();
+                try {
+                    await autoUpdater.checkForUpdates();
+                } catch(err: any) {
+                    logger.error("auto update error: " + err.message)   
+                }
             }
         }, timeInterval);
     } catch(err: any) {
         logger.error("auto update error: " + err.message)   
-        showMessage("Update App Error", "There was a problem updating the application: " + err.message)
+        // showMessage("Update App Error", "There was a problem updating the application: " + err.message)
     }
 }
 

diff --git a/apps/electron-backend/package.json b/apps/electron-backend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "comflowy",
-  "version": "0.0.3-alpha",
+  "version": "0.0.4-alpha",
   "private": true,
   "main": "layers/main/dist/index.js",
   "scripts": {

diff --git a/apps/electron-frontend/.env b/apps/electron-frontend/.env
@@ -1 +1 @@
-NEXT_PUBLIC_APP_VERSION=0.0.3-alpha
+NEXT_PUBLIC_APP_VERSION=0.0.4-alpha
diff --git a/apps/electron-frontend/package.json b/apps/electron-frontend/package.json
@@ -30,7 +30,13 @@
     "reactflow": "^11.10.1",
     "ui": "workspace:*",
     "xterm": "^5.3.0",
+    "xterm-addon-canvas": "^0.5.0",
     "xterm-addon-fit": "^0.8.0",
+    "xterm-addon-image": "^0.5.0",
+    "xterm-addon-search": "^0.13.0",
+    "xterm-addon-serialize": "^0.11.0",
+    "xterm-addon-unicode11": "^0.6.0",
+    "xterm-addon-webgl": "^0.16.0",
     "y-indexeddb": "^9.0.12",
     "yjs": "^13.6.10",
     "zustand": "^4.4.6"

diff --git a/apps/electron-frontend/src/components/comfyui-process-manager/comfyui-process-manager.tsx b/apps/electron-frontend/src/components/comfyui-process-manager/comfyui-process-manager.tsx
@@ -52,9 +52,29 @@ const ComfyUIProcessManager = () => {
       await new Promise(resolve => setTimeout(resolve, 300));
       const {Terminal} = await import('xterm')
       const {FitAddon} = await import ('xterm-addon-fit');
+      const {CanvasAddon} = await import ('xterm-addon-canvas');
+      const {ImageAddon} = await import ('xterm-addon-image');
+      const {SearchAddon} = await import ('xterm-addon-search');
+      const {SerializeAddon} = await import ('xterm-addon-serialize');
+      const {Unicode11Addon} = await import ('xterm-addon-unicode11');
+      const {WebglAddon} = await import ('xterm-addon-webgl');
       const fitAddon = new FitAddon();
-      term.current = new Terminal();
+      const canvasAddon = new CanvasAddon();
+      const imageAddon = new ImageAddon();
+      const searchAddon = new SearchAddon();
+      const serializeAddon = new SerializeAddon();
+      const unicode11Addon = new Unicode11Addon();
+      const webglAddon = new WebglAddon();
+      term.current = new Terminal({
+        allowProposedApi: true
+      });
       term.current.loadAddon(fitAddon);
+      term.current.loadAddon(canvasAddon);
+      term.current.loadAddon(imageAddon);
+      term.current.loadAddon(searchAddon);
+      term.current.loadAddon(serializeAddon);
+      term.current.loadAddon(unicode11Addon);
+      term.current.loadAddon(webglAddon);
       term.current.open(termRef.current);
       fitAddon.fit();
       const messages = useComfyUIProcessManagerState.getState().messages;
@@ -70,7 +90,11 @@ const ComfyUIProcessManager = () => {
       resizeObserver.observe(termRef.current);
 
       return () => {
-        term.current.dispose();
+        try {
+          term.current && term.current.dispose();
+        } catch(err) {
+          console.log(err);
+        }
       };
     }
     if (visible) {
@@ -139,10 +163,17 @@ const ComfyUIProcessManager = () => {
         restart();
       }
     });
-
+
+    const dispose3 = SlotGlobalEvent.on((ev) => {
+      if (ev.type === GlobalEvents.show_comfyprocess_manager) {
+        showModal();
+      }
+    });
+
     return () => {
       dispose();
       dispose2.dispose();
+      dispose3.dispose();
     }
   }, [])
 

diff --git a/apps/electron-frontend/src/components/extension-manager/disable-extension-button.tsx b/apps/electron-frontend/src/components/extension-manager/disable-extension-button.tsx
@@ -9,7 +9,8 @@ export function DisableExtensionButton(props: {extension: Extension}) {
     const [running, setRunning] = useState(false);
     const disable_api = getBackendUrl("/api/disable_extensions");
     const enable_api = getBackendUrl("/api/enable_extensions");
-    const {onInit} = useExtensionsState()
+    const onInit = useExtensionsState(st => st.onInit);
+    const onDisableExtension = useExtensionsState(st => st.onDisableExtension);
     const diableExtension = useCallback(async (disable: boolean) => {
         try {
             setRunning(true);
@@ -24,16 +25,16 @@ export function DisableExtensionButton(props: {extension: Extension}) {
             });
             const ret = await res.json();
             if (ret.success) {
+                onDisableExtension(extension, disable);
                 message.success("Success");
-                await onInit();
             } else {
                 message.error(ret.error)
             }
         } catch(err) {
             message.error("Unexpected error: ", err);
         }
         setRunning(false);
-    }, [extension]);
+    }, [extension, onInit, onDisableExtension]);
 
     if (!extension.installed) {
         return null

diff --git a/apps/electron-frontend/src/components/extension-manager/extension-manager.tsx b/apps/electron-frontend/src/components/extension-manager/extension-manager.tsx
@@ -37,13 +37,13 @@ function ExtensionManager() {
         }}>
           <h2> Installed Extensions </h2>
           <div className="actions">
-            <div className="refresh-button">
+            {/* <div className="refresh-button">
               <Button size='small' loading={loading} disabled={loading} onClick={() => {
                 restartComfyUI();
               }}>
                 <ReloadIcon /> Restart ComfyUI
               </Button>
-            </div>
+            </div> */}
           </div>
         </div>
         <p className="sub">Extensions already installed on your device</p>

diff --git a/apps/electron-frontend/src/components/extension-manager/install-extension-button.tsx b/apps/electron-frontend/src/components/extension-manager/install-extension-button.tsx
@@ -9,11 +9,11 @@ export function InstallExtensionButton(props: {extension: Extension}) {
     const {onInit} = useExtensionsState()
     const {startTask, running, messages} = useRemoteTask({
         api: getBackendUrl(`/api/install_extension`),
-        onMessage: (msg) => {
+        onMessage: async (msg) => {
             console.log(msg);
             if (msg.type === "SUCCESS") {
+                await onInit();
                 message.success("Extension installed successfully");
-                onInit();
             }
         }
     });

diff --git a/apps/electron-frontend/src/components/extension-manager/remove-extension-button.tsx b/apps/electron-frontend/src/components/extension-manager/remove-extension-button.tsx
@@ -6,7 +6,8 @@ import { useCallback, useState } from "react";
 export function RemoveExtensionButton(props: {extension: Extension}) {
     const {extension} = props;
     const disabled = extension.disabled
-    const {onInit} = useExtensionsState()
+    const onInit = useExtensionsState(st => st.onInit);
+    const onRemoveExtension = useExtensionsState(st => st.removeExtension);
     const [running, setRunning] = useState(false);
     const api = getBackendUrl("/api/remove_extensions");
     const removeExtension = useCallback(async () => {
@@ -23,16 +24,16 @@ export function RemoveExtensionButton(props: {extension: Extension}) {
             });
             const ret = await res.json();
             if (ret.success) {
+                onRemoveExtension(extension);
                 message.success("Success");
-                await onInit();
             } else {
                 message.error(ret.error)
             }
         } catch(err) {
             message.error("Unexpected error: ", err);
         }
         setRunning(false);
-    }, [extension]);
+    }, [extension, onInit, onRemoveExtension]);
 
     if (!extension.installed) {
         return null

diff --git a/apps/electron-frontend/src/components/extension-manager/update-extension-button.tsx b/apps/electron-frontend/src/components/extension-manager/update-extension-button.tsx
@@ -22,16 +22,16 @@ export function UpdateExtensionButton(props: {extension: Extension}) {
             });
             const ret = await res.json();
             if (ret.success) {
-                message.success("Success");
                 await onInit();
+                message.success("Success");
             } else {
                 message.error(ret.error)
             }
         } catch(err) {
             message.error("Unexpected error: ", err);
         }
         setRunning(false);
-    }, [extension]);
+    }, [extension, onInit]);
 
     if (!extension.need_update || extension.disabled) {
         return null

diff --git a/apps/electron-frontend/src/components/layout/layout.style.module.scss b/apps/electron-frontend/src/components/layout/layout.style.module.scss
@@ -53,6 +53,8 @@
                 box-sizing: border-box;
                 display: flex;
                 transition: var(--transition);
+                user-select: none;
+                cursor: pointer;
                 .icon {
                     display: flex;
                     justify-content: center;

diff --git a/apps/electron-frontend/src/components/layout/layout.tsx b/apps/electron-frontend/src/components/layout/layout.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useEffect } from 'react'
+import React, { ReactNode, useCallback, useEffect } from 'react'
 import Link from 'next/link'
 import Head from 'next/head'
 
@@ -10,7 +10,6 @@ import styles from "./layout.style.module.scss";
 import { useRouter } from 'next/router'
 import LogoIcon from 'ui/icons/logo'
 import { BulbIcon, ExtensionIcon, ModelIcon, WorkflowIcon } from 'ui/icons'
-import { AsyncComfyUIProcessManager } from '../comfyui-process-manager/comfyui-process-manager-async'
 import { useDashboardState } from '@comflowy/common/store/dashboard-state'
 import { useAppStore } from '@comflowy/common/store'
 import Bootstrap from '../bootstrap/bootstrap'
@@ -27,7 +26,6 @@ const Layout = ({ children, title = 'This is the default title' }: Props) => {
 
   return (
     <>
-      <AsyncComfyUIProcessManager />
       {!bootstraped ? (
         <Bootstrap />
       ) : (
@@ -52,6 +50,9 @@ const Layout = ({ children, title = 'This is the default title' }: Props) => {
 const WorkspaceNav = () => {
   const route = useRouter();
   const path = route.pathname;
+  const changeRoute = useCallback((url) => {
+    route.push(url);
+  }, [route])
   return (
     <div className="workspace-nav">
       <div className="logo">
@@ -60,37 +61,45 @@ const WorkspaceNav = () => {
       </div>
       <div className="sub">MENU</div>
       <div className="nav-list">
-        <div className={`workspace-nav-item ${path === "/" ? "active" : ""}`}>
+        <div className={`workspace-nav-item ${path === "/" ? "active" : ""}`} onClick={ev => {
+          changeRoute("/")
+        }}>
           <div className="icon">
             <WorkflowIcon/>
           </div>
-          <Link href="/">
+          <a>
             My workflows
-          </Link>
+          </a>
         </div>
-        <div className={`workspace-nav-item ${path === "/templates" ? "active" : ""}`}>
+        <div className={`workspace-nav-item ${path === "/templates" ? "active" : ""}`} onClick={ev => {
+          changeRoute("/templates")
+        }}>
           <div className="icon">
             <BulbIcon/>
           </div>
-          <Link href="/templates">
+          <a>
             Templates
-          </Link>
+          </a>
         </div>
-        <div className={`workspace-nav-item ${path === "/models" ? "active" : ""}`}>
+        <div className={`workspace-nav-item ${path === "/models" ? "active" : ""}`} onClick={ev => {
+          changeRoute("/models")
+        }}>
           <div className="icon">
             <ModelIcon/>
           </div>
-          <Link href="/models">
+          <a>
             Models
-          </Link>
+          </a>
         </div>
-        <div className={`workspace-nav-item ${path === "/extensions" ? "active" : ""}`}>
+        <div className={`workspace-nav-item ${path === "/extensions" ? "active" : ""}`} onClick={ev => {
+          changeRoute("/extensions")
+        }}>
           <div className="icon">
             <ExtensionIcon/>
           </div>
-          <Link href="/extensions">
+          <a>
             Extensions
-          </Link>
+          </a>
         </div>
       </div>
     </div>

diff --git a/apps/electron-frontend/src/components/model-manager/model-manager.tsx b/apps/electron-frontend/src/components/model-manager/model-manager.tsx
@@ -42,13 +42,13 @@ const ModelManagement = () => {
           </div>
         </div>
       </div>
-      <Tabs defaultActiveKey="installed">
-        <Tabs.TabPane tab="Installed" key="installed">
-          <InstalledModels/>
-        </Tabs.TabPane> 
+      <Tabs defaultActiveKey="available">
         <Tabs.TabPane tab="Available" key="available">
           <ModelMarket/>
         </Tabs.TabPane> 
+        <Tabs.TabPane tab="Installed" key="installed">
+          <InstalledModels/>
+        </Tabs.TabPane> 
       </Tabs>
     </div>
   );

diff --git a/apps/electron-frontend/src/components/my-workflows/my-workflows.style.module.scss b/apps/electron-frontend/src/components/my-workflows/my-workflows.style.module.scss
@@ -32,7 +32,7 @@
             display: grid;
             grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
             grid-gap: 10px;
-            padding: 10px;
+            padding: 10px 10px 10px 0;
         }
 
         .workflow-list-item {
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		auto-install-peers = true
		ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		NEXT_PUBLIC_APP_VERSION=0.0.3-alpha
		NEXT_PUBLIC_APP_VERSION=0.0.4-alpha