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/api.ts

@@ -1,5 +1,6 @@
 import { ComfyWorkflowJSON } from '@/types/comfyWorkflow'
 import {
+  DownloadModelStatus,
   HistoryTaskItem,
   PendingTaskItem,
   RunningTaskItem,
@@ -216,6 +217,11 @@ class ComfyApi extends EventTarget {
                 new CustomEvent('execution_cached', { detail: msg.data })
               )
               break
+            case 'download_progress':
+              this.dispatchEvent(
+                new CustomEvent('download_progress', { detail: msg.data })
+              )
+              break
             default:
               if (this.#registered.has(msg.type)) {
                 this.dispatchEvent(
@@ -319,6 +325,47 @@ class ComfyApi extends EventTarget {
     return await res.json()
   }
 
+  /**
+   * Gets a list of models in the specified folder
+   * @param {string} folder The folder to list models from, such as 'checkpoints'
+   * @returns The list of model filenames within the specified folder
+   */
+  async getModels(folder: string) {
+    const res = await this.fetchApi(`/models/${folder}`)
+    if (res.status === 404) {
+      return null
+    }
+    return await res.json()
+  }
+
+  /**
+   * Tells the server to download a model from the specified URL to the specified directory and filename
+   * @param {string} url The URL to download the model from
+   * @param {string} model_directory The main directory (eg 'checkpoints') to save the model to
+   * @param {string} model_filename The filename to save the model as
+   * @param {number} progress_interval The interval in seconds at which to report download progress (via 'download_progress' event)
+   */
+  async internalDownloadModel(
+    url: string,
+    model_directory: string,
+    model_filename: string,
+    progress_interval: number
+  ): Promise<DownloadModelStatus> {
+    const res = await this.fetchApi('/internal/models/download', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        url,
+        model_directory,
+        model_filename,
+        progress_interval
+      })
+    })
+    return await res.json()
+  }
+
   /**
    * Loads a list of items (queue or history)
    * @param {string} type The type of items to load, queue or history

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) {

src/scripts/defaultGraph.ts

@@ -133,14 +133,5 @@ export const defaultGraph: ComfyWorkflowJSON = {
   groups: [],
   config: {},
   extra: {},
-  version: 0.4,
-  models: [
-    {
-      name: 'v1-5-pruned-emaonly.ckpt',
-      url: 'https://huggingface.co/runwayml/stable-diffusion-v1-5/resolve/main/v1-5-pruned-emaonly.ckpt',
-      hash: 'cc6cb27103417325ff94f52b7a5d2dde45a7515b25c255d8e396c90014281516',
-      hash_type: 'SHA256',
-      directory: 'checkpoints'
-    }
-  ]
+  version: 0.4
 }