[backport cloud/1.36] [feat] Add async model upload with WebSocket progress tracking (#7887)

Backport of #7746 to `cloud/1.36`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7887-backport-cloud-1-36-feat-Add-async-model-upload-with-WebSocket-progress-tracking-2e26d73d365081c4a060e6e88f33016d)
by [Unito](https://www.unito.io)

Co-authored-by: Luke Mino-Altherr <luke@comfy.org>
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: GitHub Action <action@github.com>

Author: 4 people

src/composables/useFeatureFlags.ts

@@ -14,7 +14,8 @@ export enum ServerFeatureFlag {
   ASSET_UPDATE_OPTIONS_ENABLED = 'asset_update_options_enabled',
   PRIVATE_MODELS_ENABLED = 'private_models_enabled',
   ONBOARDING_SURVEY_ENABLED = 'onboarding_survey_enabled',
-  HUGGINGFACE_MODEL_IMPORT_ENABLED = 'huggingface_model_import_enabled'
+  HUGGINGFACE_MODEL_IMPORT_ENABLED = 'huggingface_model_import_enabled',
+  ASYNC_MODEL_UPLOAD_ENABLED = 'async_model_upload_enabled'
 }
 
 /**
@@ -65,14 +66,22 @@ export function useFeatureFlags() {
       )
     },
     get huggingfaceModelImportEnabled() {
-      // Check remote config first (from /api/features), fall back to websocket feature flags
       return (
         remoteConfig.value.huggingface_model_import_enabled ??
         api.getServerFeature(
           ServerFeatureFlag.HUGGINGFACE_MODEL_IMPORT_ENABLED,
           false
         )
       )
+    },
+    get asyncModelUploadEnabled() {
+      return (
+        remoteConfig.value.async_model_upload_enabled ??
+        api.getServerFeature(
+          ServerFeatureFlag.ASYNC_MODEL_UPLOAD_ENABLED,
+          false
+        )
+      )
     }
   })
 

src/locales/en/main.json

@@ -181,6 +181,7 @@
     "missing": "Missing",
     "inProgress": "In progress",
     "completed": "Completed",
+    "downloading": "Downloading",
     "interrupted": "Interrupted",
     "queued": "Queued",
     "running": "Running",
@@ -2275,14 +2276,16 @@
     "noAssetsFound": "No assets found",
     "noModelsInFolder": "No {type} available in this folder",
     "notSureLeaveAsIs": "Not sure? Just leave this as is",
+    "noValidSourceDetected": "No valid import source detected",
     "onlyCivitaiUrlsSupported": "Only Civitai URLs are supported",
     "ownership": "Ownership",
     "ownershipAll": "All",
     "ownershipMyModels": "My models",
     "ownershipPublicModels": "Public models",
+    "processingModel": "Download started",
+    "processingModelDescription": "You can close this dialog. The download will continue in the background.",
     "providerCivitai": "Civitai",
     "providerHuggingFace": "Hugging Face",
-    "noValidSourceDetected": "No valid import source detected",
     "selectFrameworks": "Select Frameworks",
     "selectModelType": "Select model type",
     "selectProjects": "Select Projects",
@@ -2307,8 +2310,8 @@
     "uploadModelDescription1": "Paste a Civitai model download link to add it to your library.",
     "uploadModelDescription1Generic": "Paste a model download link to add it to your library.",
     "uploadModelDescription2": "Only links from {link} are supported at the moment",
-    "uploadModelDescription2Link": "https://civitai.com/models",
     "uploadModelDescription2Generic": "Only URLs from the following providers are supported:",
+    "uploadModelDescription2Link": "https://civitai.com/models",
     "uploadModelDescription3": "Max file size: {size}",
     "uploadModelFailedToRetrieveMetadata": "Failed to retrieve metadata. Please check the link and try again.",
     "uploadModelFromCivitai": "Import a model from Civitai",
@@ -2332,6 +2335,11 @@
       "complete": "{assetName} has been deleted.",
       "failed": "{assetName} could not be deleted."
     },
+    "download": {
+      "complete": "Download complete",
+      "failed": "Download failed",
+      "inProgress": "Downloading {assetName}..."
+    },
     "rename": {
       "failed": "Could not rename asset."
     }

src/platform/assets/components/AssetBrowserModal.vue

@@ -83,6 +83,7 @@ import { useModelUpload } from '@/platform/assets/composables/useModelUpload'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { assetService } from '@/platform/assets/services/assetService'
 import { formatCategoryLabel } from '@/platform/assets/utils/categoryLabel'
+import { useAssetDownloadStore } from '@/stores/assetDownloadStore'
 import { useModelToNodeStore } from '@/stores/modelToNodeStore'
 import { OnCloseKey } from '@/types/widgetTypes'
 
@@ -132,6 +133,17 @@ watch(
   { immediate: true }
 )
 
+const assetDownloadStore = useAssetDownloadStore()
+
+watch(
+  () => assetDownloadStore.hasActiveDownloads,
+  async (currentlyActive, previouslyActive) => {
+    if (previouslyActive && !currentlyActive) {
+      await execute()
+    }
+  }
+)
+
 const {
   searchQuery,
   selectedCategory,

src/platform/assets/components/UploadModelDialog.vue

@@ -25,8 +25,8 @@
 
     <!-- Step 3: Upload Progress -->
     <UploadModelProgress
-      v-else-if="currentStep === 3"
-      :status="uploadStatus"
+      v-else-if="currentStep === 3 && uploadStatus != null"
+      :result="uploadStatus"
       :error="uploadError"
       :metadata="wizardData.metadata"
       :model-type="selectedModelType"

src/platform/assets/components/UploadModelFooter.vue

@@ -81,12 +81,19 @@
       <span>{{ $t('assetBrowser.upload') }}</span>
     </Button>
     <Button
-      v-else-if="currentStep === 3 && uploadStatus === 'success'"
+      v-else-if="
+        currentStep === 3 &&
+        (uploadStatus === 'success' || uploadStatus === 'processing')
+      "
       variant="secondary"
       data-attr="upload-model-step3-finish-button"
       @click="emit('close')"
     >
-      {{ $t('assetBrowser.finish') }}
+      {{
+        uploadStatus === 'processing'
+          ? $t('g.close')
+          : $t('assetBrowser.finish')
+      }}
     </Button>
     <VideoHelpDialog
       v-model="showCivitaiHelp"
@@ -119,7 +126,7 @@ defineProps<{
   isUploading: boolean
   canFetchMetadata: boolean
   canUploadModel: boolean
-  uploadStatus: 'idle' | 'uploading' | 'success' | 'error'
+  uploadStatus?: 'processing' | 'success' | 'error'
 }>()
 
 const emit = defineEmits<{

src/platform/assets/components/UploadModelProgress.vue

@@ -1,22 +1,36 @@
 <template>
   <div class="flex flex-1 flex-col gap-6 text-sm text-muted-foreground">
-    <!-- Uploading State -->
-    <div
-      v-if="status === 'uploading'"
-      class="flex flex-1 flex-col items-center justify-center gap-2"
-    >
-      <i
-        class="icon-[lucide--loader-circle] animate-spin text-6xl text-muted-foreground"
-      />
-      <div class="text-center">
-        <p class="m-0 font-bold">
-          {{ $t('assetBrowser.uploadingModel') }}
-        </p>
+    <!-- Processing State (202 async download in progress) -->
+    <div v-if="result === 'processing'" class="flex flex-col gap-2">
+      <p class="m-0 font-bold">
+        {{ $t('assetBrowser.processingModel') }}
+      </p>
+      <p class="m-0">
+        {{ $t('assetBrowser.processingModelDescription') }}
+      </p>
+
+      <div
+        class="flex flex-row items-center gap-3 p-4 bg-modal-card-background rounded-lg"
+      >
+        <img
+          v-if="previewImage"
+          :src="previewImage"
+          :alt="metadata?.filename || metadata?.name || 'Model preview'"
+          class="w-14 h-14 rounded object-cover flex-shrink-0"
+        />
+        <div class="flex flex-col justify-center items-start gap-1 flex-1">
+          <p class="text-base-foreground m-0">
+            {{ metadata?.filename || metadata?.name }}
+          </p>
+          <p class="text-sm text-muted m-0">
+            {{ modelType }}
+          </p>
+        </div>
       </div>
     </div>
 
     <!-- Success State -->
-    <div v-else-if="status === 'success'" class="flex flex-col gap-2">
+    <div v-else-if="result === 'success'" class="flex flex-col gap-2">
       <p class="m-0 font-bold">
         {{ $t('assetBrowser.modelUploaded') }}
       </p>
@@ -47,7 +61,7 @@
 
     <!-- Error State -->
     <div
-      v-else-if="status === 'error'"
+      v-else-if="result === 'error'"
       class="flex flex-1 flex-col items-center justify-center gap-6"
     >
       <i class="icon-[lucide--x-circle] text-6xl text-error" />
@@ -66,8 +80,8 @@
 <script setup lang="ts">
 import type { AssetMetadata } from '@/platform/assets/schemas/assetSchema'
 
-defineProps<{
-  status: 'idle' | 'uploading' | 'success' | 'error'
+const { result } = defineProps<{
+  result: 'processing' | 'success' | 'error'
   error?: string
   metadata?: AssetMetadata
   modelType?: string

src/platform/assets/components/UploadModelUrlInput.vue

@@ -55,7 +55,7 @@
         <p v-if="error" class="text-xs text-error">
           {{ error }}
         </p>
-        <p v-else class="text-foreground">
+        <p v-else-if="!flags.asyncModelUploadEnabled" class="text-foreground">
           <i18n-t keypath="assetBrowser.maxFileSize" tag="span">
             <template #size>
               <span class="font-bold italic">{{
@@ -77,6 +77,10 @@
 import InputText from 'primevue/inputtext'
 import { computed } from 'vue'
 
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
+
+const { flags } = useFeatureFlags()
+
 const props = defineProps<{
   modelValue: string
   error?: string

src/platform/assets/components/UploadModelUrlInputCivitai.vue

@@ -18,7 +18,7 @@
             </template>
           </i18n-t>
         </li>
-        <li>
+        <li v-if="!flags.asyncModelUploadEnabled">
           <i18n-t keypath="assetBrowser.uploadModelDescription3" tag="span">
             <template #size>
               <span class="font-bold italic">{{
@@ -74,6 +74,10 @@
 <script setup lang="ts">
 import InputText from 'primevue/inputtext'
 
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
+
+const { flags } = useFeatureFlags()
+
 defineProps<{
   error?: string
 }>()