initial download-folder-selector interface

src/components/dialog/content/MissingModelsWarning.vue

@@ -4,6 +4,14 @@
     <p class="warning-description">
       When loading the graph, the following models were not found:
     </p>
+    <p class="warning-options">
+      <Checkbox
+        v-model="showFolderSelect"
+        label="Show folder selector"
+        :binary="true"
+      />
+      Show folder selector
+    </p>
     <ListBox
       :options="missingModels"
       optionLabel="label"
@@ -29,6 +37,20 @@
             </div>
           </div>
           <div class="model-action">
+            <Select
+              class="model-path-select"
+              v-if="
+                slotProps.option.action &&
+                !slotProps.option.downloading &&
+                !slotProps.option.completed &&
+                !slotProps.option.error &&
+                slotProps.option.paths.length > 1 &&
+                showFolderSelect
+              "
+              v-model="slotProps.option.folderPath"
+              :options="slotProps.option.paths"
+              @change="updateFolderPath(slotProps.option, $event)"
+            />
             <Button
               v-if="
                 slotProps.option.action &&
@@ -60,12 +82,17 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
+import Checkbox from 'primevue/checkbox'
 import ListBox from 'primevue/listbox'
+import Select from 'primevue/select'
+import { SelectChangeEvent } from 'primevue/select'
 import Button from 'primevue/button'
 import { api } from '@/scripts/api'
 import { DownloadModelStatus } from '@/types/apiTypes'
 import { useSettingStore } from '@/stores/settingStore'
 
+const showFolderSelect = ref(false)
+
 const settingStore = useSettingStore()
 const allowedSources = settingStore.get(
   'Comfy.Workflow.ModelDownload.AllowedSources'
@@ -83,19 +110,26 @@ interface ModelInfo {
   completed?: boolean
   progress?: number
   error?: string
+  folder_path?: string
 }
 
 const props = defineProps<{
   missingModels: ModelInfo[]
+  paths: Record<string, string[]>
   maximized: boolean
 }>()
 
 const modelDownloads = ref<Record<string, ModelInfo>>({})
 let lastModel: string | null = null
 
+const updateFolderPath = (model: any, event: SelectChangeEvent) => {
+  const downloadInfo = modelDownloads.value[model.name]
+  downloadInfo.folder_path = event.value
+  return false
+}
 const handleDownloadProgress = (detail: DownloadModelStatus) => {
   if (detail.download_path) {
-    lastModel = detail.download_path.split('/', 2)[1]
+    lastModel = detail.download_path
   }
   if (!lastModel) return
   if (detail.status === 'in_progress') {
@@ -134,7 +168,8 @@ const handleDownloadProgress = (detail: DownloadModelStatus) => {
 const triggerDownload = async (
   url: string,
   directory: string,
-  filename: string
+  filename: string,
+  folder_path: string
 ) => {
   modelDownloads.value[filename] = {
     name: filename,
@@ -143,7 +178,14 @@ const triggerDownload = async (
     downloading: true,
     progress: 0
   }
-  const download = await api.internalDownloadModel(url, directory, filename, 1)
+  const download = await api.internalDownloadModel(
+    url,
+    directory,
+    filename,
+    1,
+    folder_path
+  )
+  lastModel = filename
   handleDownloadProgress(download)
 }
 
@@ -153,39 +195,59 @@ api.addEventListener('download_progress', (event) => {
 
 const missingModels = computed(() => {
   return props.missingModels.map((model) => {
-    const downloadInfo = modelDownloads.value[model.name]
-    if (!allowedSources.some((source) => model.url.startsWith(source))) {
+    const paths = props.paths[model.directory]
+    if (model.directory_invalid || !paths) {
       return {
         label: `${model.directory} / ${model.name}`,
         hint: model.url,
-        error:
-          'Download not allowed from this source: ' + allowedSources.join(', ')
+        error: 'Invalid directory specified (does this require custom nodes?)'
       }
     }
-    if (!allowedSuffixes.some((suffix) => model.name.endsWith(suffix))) {
+    const downloadInfo: ModelInfo = modelDownloads.value[model.name] ?? {
+      downloading: false,
+      completed: false,
+      progress: 0,
+      error: null,
+      name: model.name,
+      directory: model.directory,
+      url: model.url,
+      folder_path: paths[0]
+    }
+    modelDownloads.value[model.name] = downloadInfo
+    if (!allowedSources.some((source) => model.url.startsWith(source))) {
       return {
         label: `${model.directory} / ${model.name}`,
         hint: model.url,
-        error: 'Only allowed suffixes are ' + allowedSuffixes.join(', ')
+        error:
+          'Download not allowed from this source: ' + allowedSources.join(', ')
       }
     }
-    if (model.directory_invalid) {
+    if (!allowedSuffixes.some((suffix) => model.name.endsWith(suffix))) {
       return {
         label: `${model.directory} / ${model.name}`,
         hint: model.url,
-        error: 'Invalid directory specified (does this require custom nodes?)'
+        error: 'Only allowed suffixes are ' + allowedSuffixes.join(', ')
       }
     }
     return {
       label: `${model.directory} / ${model.name}`,
       hint: model.url,
-      downloading: downloadInfo?.downloading ?? false,
-      completed: downloadInfo?.completed ?? false,
-      progress: downloadInfo?.progress ?? 0,
-      error: downloadInfo?.error,
+      downloading: downloadInfo.downloading,
+      completed: downloadInfo.completed,
+      progress: downloadInfo.progress,
+      error: downloadInfo.error,
+      name: model.name,
+      paths: paths,
+      folderPath: downloadInfo.folder_path,
       action: {
         text: 'Download',
-        callback: () => triggerDownload(model.url, model.directory, model.name)
+        callback: () =>
+          triggerDownload(
+            model.url,
+            model.directory,
+            model.name,
+            downloadInfo.folder_path
+          )
       }
     }
   })
@@ -218,6 +280,10 @@ const missingModels = computed(() => {
   margin-bottom: 1rem;
 }
 
+.warning-options {
+  color: var(--fg-color);
+}
+
 .missing-models-list {
   max-height: 300px;
   overflow-y: auto;

src/scripts/api.ts

@@ -368,7 +368,8 @@ class ComfyApi extends EventTarget {
     url: string,
     model_directory: string,
     model_filename: string,
-    progress_interval: number
+    progress_interval: number,
+    folder_path: string
   ): Promise<DownloadModelStatus> {
     const res = await this.fetchApi('/internal/models/download', {
       method: 'POST',
@@ -379,7 +380,8 @@ class ComfyApi extends EventTarget {
         url,
         model_directory,
         model_filename,
-        progress_interval
+        progress_interval,
+        folder_path
       })
     })
     return await res.json()
@@ -688,6 +690,10 @@ class ComfyApi extends EventTarget {
   async getLogs(): Promise<string> {
     return (await axios.get(this.internalURL('/logs'))).data
   }
+
+  async getFolderPaths(): Promise<Record<string, string[]>> {
+    return (await axios.get(this.internalURL('/folder_paths'))).data
+  }
 }
 
 export const api = new ComfyApi()

src/scripts/app.ts

@@ -2184,10 +2184,11 @@ export class ComfyApp {
     })
   }
 
-  showMissingModelsError(missingModels) {
+  showMissingModelsError(missingModels, paths) {
     if (useSettingStore().get('Comfy.Workflow.ShowMissingModelsWarning')) {
       showMissingModelsWarning({
         missingModels,
+        paths,
         maximizable: true
       })
     }
@@ -2409,7 +2410,8 @@ export class ComfyApp {
       this.showMissingNodesError(missingNodeTypes)
     }
     if (missingModels.length && showMissingModelsDialog) {
-      this.showMissingModelsError(missingModels)
+      const paths = await api.getFolderPaths()
+      this.showMissingModelsError(missingModels, paths)
     }
     await this.#invokeExtensionsAsync('afterConfigureGraph', missingNodeTypes)
     requestAnimationFrame(() => {

src/services/dialogService.ts

@@ -23,6 +23,7 @@ export function showLoadWorkflowWarning(props: {
 
 export function showMissingModelsWarning(props: {
   missingModels: any[]
+  paths: Record<string, string[]>
   [key: string]: any
 }) {
   const dialogStore = useDialogStore()