Model downloader dialog (#569)

* API core for model downloader

* initial basic dialog for missing models

* app.ts handling for missing models

* don't explode if getModels is a 404

* actually track downloads in progress

* overall pile of improvements to the missing models view

* minor fixes

* add setting to disable missing models warning

* temporarily remove 'models' entry from default graph

to avoid missing model dialog causing issues. Also because ckpt autodownloading shouldn't be allowed

* swap the url to a title

* add model directory to display

* match settingStore commit

* check setting before scanning models list

ie avoid redundant calcs when setting is disabled anyway

src/scripts/app.ts

@@ -45,7 +45,8 @@ import { Vector2 } from '@comfyorg/litegraph'
 import _ from 'lodash'
 import {
   showExecutionErrorDialog,
-  showLoadWorkflowWarning
+  showLoadWorkflowWarning,
+  showMissingModelsWarning
 } from '@/services/dialogService'
 import { useSettingStore } from '@/stores/settingStore'
 import { useToastStore } from '@/stores/toastStore'
@@ -134,6 +135,7 @@ export class ComfyApp {
   bodyBottom: HTMLElement
   canvasContainer: HTMLElement
   menu: ComfyAppMenu
+  modelsInFolderCache: Record<string, string[]>
 
   constructor() {
     this.vueAppReady = false
@@ -148,6 +150,7 @@ export class ComfyApp {
       parent: document.body
     })
     this.menu = new ComfyAppMenu(this)
+    this.modelsInFolderCache = {}
 
     /**
      * List of extensions that are registered with the app
@@ -2175,6 +2178,22 @@ export class ComfyApp {
     })
   }
 
+  showMissingModelsError(missingModels) {
+    if (
+      this.vueAppReady &&
+      useSettingStore().get('Comfy.Workflow.ShowMissingModelsWarning')
+    ) {
+      showMissingModelsWarning({
+        missingModels,
+        maximizable: true
+      })
+    }
+    
+    this.logging.addEntry('Comfy.App', 'warn', {
+      MissingModels: missingModels
+    })
+  }
+
   async changeWorkflow(callback, workflow = null) {
     try {
       this.workflowManager.activeWorkflow?.changeTracker?.store()
@@ -2233,10 +2252,12 @@ export class ComfyApp {
     }
 
     const missingNodeTypes = []
+    const missingModels = []
     await this.#invokeExtensionsAsync(
       'beforeConfigureGraph',
       graphData,
       missingNodeTypes
+      // TODO: missingModels
     )
     for (let n of graphData.nodes) {
       // Patch T2IAdapterLoader to ControlNetLoader since they are the same node now
@@ -2251,6 +2272,19 @@ export class ComfyApp {
         n.type = sanitizeNodeName(n.type)
       }
     }
+    if (graphData.models && useSettingStore().get('Comfy.Workflow.ShowMissingModelsWarning')) {
+      for (let m of graphData.models) {
+        const models_available = await this.getModelsInFolderCached(m.directory)
+        if (models_available === null) {
+          // @ts-expect-error
+          m.directory_invalid = true
+          missingModels.push(m)
+        }
+        else if (!models_available.includes(m.name)) {
+          missingModels.push(m)
+        }
+      }
+    }
 
     try {
       this.graph.configure(graphData)
@@ -2366,9 +2400,13 @@ export class ComfyApp {
       this.#invokeExtensions('loadedGraphNode', node)
     }
 
+    // TODO: Properly handle if both nodes and models are missing (sequential dialogs?)
     if (missingNodeTypes.length) {
       this.showMissingNodesError(missingNodeTypes)
     }
+    if (missingModels.length) {
+      this.showMissingModelsError(missingModels)
+    }
     await this.#invokeExtensionsAsync('afterConfigureGraph', missingNodeTypes)
     requestAnimationFrame(() => {
       this.graph.setDirtyCanvas(true, true)
@@ -2837,6 +2875,19 @@ export class ComfyApp {
     app.graph.arrange()
   }
 
+  /**
+   * Gets the list of model names in a folder, using a temporary local cache
+   */
+  async getModelsInFolderCached(folder: string): Promise<string[]> {
+    if (folder in this.modelsInFolderCache) {
+      return this.modelsInFolderCache[folder]
+    }
+    // TODO: needs a lock to avoid overlapping calls
+    const models = await api.getModels(folder)
+    this.modelsInFolderCache[folder] = models
+    return models
+  }
+
   /**
    * Registers a Comfy web extension with the app
    * @param {ComfyExtension} extension
@@ -2862,6 +2913,8 @@ export class ComfyApp {
     }
     if (this.vueAppReady) useToastStore().add(requestToastMessage)
 
+    this.modelsInFolderCache = {}
+
     const defs = await api.getNodeDefs()
 
     for (const nodeId in defs) {