Minor fixes

mattcurfman · Dec 17, 2024 · 9a5e068 · 9a5e068
1 parent 2a539e2
commit 9a5e068
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 52 deletions.
diff --git a/WebUI/src/assets/js/store/backendServices.ts b/WebUI/src/assets/js/store/backendServices.ts
@@ -25,18 +25,15 @@ export const useBackendServices = defineStore("backendServices", () => {
         });
     }, 5000)
     window.electronAPI.onServiceInfoUpdate(updatedInfo => {
-        console.info(`received service update: ${updatedInfo}`)
         currentServiceInfo.value = currentServiceInfo.value.map(oldInfo => oldInfo.serviceName === updatedInfo.serviceName ? updatedInfo : oldInfo);
     });
 
     window.electronAPI.onServiceSetUpProgress(async (data) => {
-        console.log(`attemping to add data to listener ${data.serviceName}`)
         const associatedListener = serviceListeners.get(data.serviceName)
-         if (!associatedListener) {
-             console.warn(`received unexpected setup update for service ${data.serviceName}`)
-             return
-         }
-        console.log(`adding data to listener ${associatedListener!.associatedServiceName}`)
+        if (!associatedListener) {
+            console.warn(`received unexpected setup update for service ${data.serviceName}`)
+            return
+        }
         associatedListener.addData(data)
     })
 
@@ -59,9 +56,9 @@ export const useBackendServices = defineStore("backendServices", () => {
     async function setUpService(serviceName: BackendServiceName): Promise<{success: boolean, logs: SetupProgress[]}> {
         console.log("starting setup")
         const listener = serviceListeners.get(serviceName)
-         if (!listener) {
-             new Error(`service name ${serviceName} not found.`)
-         }
+        if (!listener) {
+            new Error(`service name ${serviceName} not found.`)
+        }
         listener!.isActive = true
         window.electronAPI.sendSetUpSignal(serviceName)
         return listener!.awaitFinalizationAndResetData()

diff --git a/WebUI/src/assets/js/store/comfyUi.ts b/WebUI/src/assets/js/store/comfyUi.ts
@@ -10,32 +10,25 @@ const WEBSOCKET_OPEN = 1;
 
 export const useComfyUi = defineStore("comfyUi", () => {
 
-    const comfyUiState = ref<ApiServiceInformation>({ serviceName: "comfyui-backend", status: "uninitializedStatus" , baseUrl: "???", port: -1, isSetUp: false, isRequired: false });
     const imageGeneration = useImageGeneration();
     const globalSetup = useGlobalSetup();
     const i18nState = useI18N().state;
     const comfyPort = computed(() => comfyUiState.value.port)
     const comfyBaseUrl = computed(() => comfyUiState.value.baseUrl)
-    const isComfyRunning= computed(() => comfyUiState.value.status === "running")
 
     const websocket = ref<WebSocket | null>(null);
     const clientId = '12345';
     const loaderNodes = ref<string[]>([]);
 
     const backendServices = useBackendServices();
-    watch(
-        backendServices.info,
-        (newValue: ApiServiceInformation[]) => {
-            console.log('backendServices.info changed', newValue)
-            const newComfyState: ApiServiceInformation | undefined = newValue.find(x => x.serviceName === "comfyui-backend")
-            newComfyState && (comfyUiState.value = newComfyState)
-        },
-        { immediate: true }
-    );
+    const comfyUiState = computed(() => {
+        const comfyUiState = backendServices.info.find(item => item.serviceName === "comfyui-backend")?? { serviceName: "comfyui-backend", status: "uninitializedStatus" , baseUrl: "???", port: -1, isSetUp: false, isRequired: false }
+        return comfyUiState
+    });
 
     async function installCustomNodesForActiveWorkflowFully() {
-        const requiresServerReboot = await installCustomNodesForActiveWorkflow()
         await triggerInstallPythonPackagesForActiveWorkflow()
+        const requiresServerReboot = await installCustomNodesForActiveWorkflow()
         if (requiresServerReboot) {
             console.info("restarting comfyUI to finalize installation of required custom nodes")
             await backendServices.stopService('comfyui-backend')
@@ -50,22 +43,22 @@ export const useComfyUi = defineStore("comfyUi", () => {
     async function installCustomNodesForActiveWorkflow(): Promise<boolean> {
         const uniqueCustomNodes = new Set(imageGeneration.workflows.filter(w => w.name === imageGeneration.activeWorkflowName).filter(w => w.backend === 'comfyui').flatMap((item) => item.comfyUIRequirements.customNodes))
         const requiredCustomNodes: ComfyUICustomNodesRequestParameters[] =
-        [...uniqueCustomNodes].map((nodeName) => {
-            const [username, repoName, gitRef] = nodeName.replace(" ", "").split("/")
-            return {username: username, repoName: repoName, gitRef: gitRef}
-        })
+            [...uniqueCustomNodes].map((nodeName) => {
+                const [username, repoName, gitRef] = nodeName.replace(" ", "").split("/")
+                return {username: username, repoName: repoName, gitRef: gitRef}
+            })
         const response = await fetch(`${globalSetup.apiHost}/api/comfyUi/loadCustomNodes`, {
-          method: 'POST',
-          body: JSON.stringify({data: requiredCustomNodes}),
-          headers: {
-            "Content-Type": "application/json"
-          }
+            method: 'POST',
+            body: JSON.stringify({data: requiredCustomNodes}),
+            headers: {
+                "Content-Type": "application/json"
+            }
         })
         if (response.status !== 200) {
             throw new Error("Request Failure to install required comfyUINode");
         }
         const data = await response.json() as { node: string, success: boolean }[];
-        const notInstalledNodes = data.filter(item => {!item.success})
+        const notInstalledNodes = data.filter(item => !item.success)
         if (notInstalledNodes.length > 0) {
             throw new Error(`Failed to install required comfyUI custom nodes: ${notInstalledNodes}`)
         }
@@ -75,22 +68,22 @@ export const useComfyUi = defineStore("comfyUi", () => {
 
 
     async function triggerInstallPythonPackagesForActiveWorkflow() {
-      const uniquePackages = new Set(imageGeneration.workflows.filter(w => w.name === imageGeneration.activeWorkflowName).filter(w => w.backend === 'comfyui').flatMap((item) => item.comfyUIRequirements.pythonPackages))
-      const toBeInstalledPackages = [...uniquePackages]
-      console.info("Installing python packages", { toBeInstalledPackages })
-      const response = await fetch(`${globalSetup.apiHost}/api/comfyUi/installPythonPackage`, {
-        method: 'POST',
-        body: JSON.stringify({data: toBeInstalledPackages}),
-        headers: {
-          "Content-Type": "application/json"
+        const uniquePackages = new Set(imageGeneration.workflows.filter(w => w.name === imageGeneration.activeWorkflowName).filter(w => w.backend === 'comfyui').flatMap((item) => item.comfyUIRequirements.pythonPackages?? []))
+        const toBeInstalledPackages = [...uniquePackages]
+        console.info("Installing python packages", { toBeInstalledPackages })
+        const response = await fetch(`${globalSetup.apiHost}/api/comfyUi/installPythonPackage`, {
+            method: 'POST',
+            body: JSON.stringify({data: toBeInstalledPackages}),
+            headers: {
+                "Content-Type": "application/json"
+            }
+        })
+        if (response.status === 200) {
+            console.info("python package installation completed")
+            return;
         }
-      })
-      if (response.status === 200) {
-        console.info("python package installation completed")
-        return;
-      }
-      const data = await response.json();
-      throw new Error(data.error_message);
+        const data = await response.json();
+        throw new Error(data.error_message);
     }
 
     function connectToComfyUi() {
@@ -203,7 +196,7 @@ export const useComfyUi = defineStore("comfyUi", () => {
         for (let i = 0; i < bytes.length; i++) {
             intArray[i] = bytes.charCodeAt(i);
         }
-    
+
         return new Blob([intArray], {type:mimeType});
     }
 
@@ -251,7 +244,7 @@ export const useComfyUi = defineStore("comfyUi", () => {
             console.warn('Websocket not open');
             return;
         }
-        
+
         try {
             await installCustomNodesForActiveWorkflowFully()
 
@@ -274,7 +267,7 @@ export const useComfyUi = defineStore("comfyUi", () => {
 
             for (let i = 0; i < imageGeneration.batchSize; i++) {
                 modifySettingInWorkflow(mutableWorkflow, 'seed', `${(seed + i).toFixed(0)}`);
-                
+
                 const result = await fetch(`${comfyBaseUrl.value}/prompt`, {
                     method: 'POST',
                     headers: {

diff --git a/WebUI/src/components/SettingsImageGeneration.vue b/WebUI/src/components/SettingsImageGeneration.vue
@@ -7,7 +7,7 @@
             </div>
             <div class="flex items-center gap-5">
                 <p>{{ languages.SETTINGS_MODEL_IMAGE_PREVIEW }}</p>
-                <button v-show=true class="v-checkbox-control flex-none w-5 h-5"
+                <button class="v-checkbox-control flex-none w-5 h-5"
                     :class="{ 'v-checkbox-checked': imageGeneration.imagePreview }"
                     @click="() => imageGeneration.imagePreview = !imageGeneration.imagePreview">
                 </button>
@@ -123,7 +123,9 @@
             </div>
         </div>
         <ComfyDynamic></ComfyDynamic>
-        <button class="mt-4" @click="imageGeneration.resetActiveWorkflowSettings"><div class="svg-icon i-refresh">Reset</div>Load workflow defaults</button>
+        <div class="border-t border-color-spilter items-center flex-wrap grid grid-cols-1 gap-2">
+            <button class="mt-4" @click="imageGeneration.resetActiveWorkflowSettings"><div class="svg-icon i-refresh">Reset</div>Load workflow defaults</button>
+        </div>
     </div>
 </template>