[backport cloud/1.36] fix(upload-model): UI/UX improvements for Upload Model Dialog (#7976)

Backport of #7969 to `cloud/1.36`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7976-backport-cloud-1-36-fix-upload-model-UI-UX-improvements-for-Upload-Model-Dialog-2e76d73d365081d49320d6edadb06736)
by [Unito](https://www.unito.io)

Co-authored-by: Alexander Brown <drjkl@comfy.org>

src/locales/en/main.json

@@ -2279,6 +2279,7 @@
     "filterBy": "Filter by",
     "findInLibrary": "Find it in the {type} section of the models library.",
     "finish": "Finish",
+    "importAnother": "Import Another",
     "genericLinkPlaceholder": "Paste link here",
     "jobId": "Job ID",
     "loadingModels": "Loading {type}...",

src/platform/assets/components/UploadModelConfirmation.vue

@@ -5,7 +5,7 @@
         {{ $t('assetBrowser.modelAssociatedWithLink') }}
       </p>
       <div
-        class="flex items-center gap-3 rounded-lg bg-secondary-background p-3"
+        class="flex items-center gap-3 rounded-lg bg-secondary-background px-4 py-2"
       >
         <img
           v-if="previewImage"
@@ -21,9 +21,15 @@
 
     <!-- Model Type Selection -->
     <div class="flex flex-col gap-2">
-      <label class="">
-        {{ $t('assetBrowser.modelTypeSelectorLabel') }}
-      </label>
+      <div class="flex items-center gap-2">
+        <label>
+          {{ $t('assetBrowser.modelTypeSelectorLabel') }}
+        </label>
+        <i class="icon-[lucide--circle-question-mark] text-muted-foreground" />
+        <span class="text-muted-foreground">
+          {{ $t('assetBrowser.notSureLeaveAsIs') }}
+        </span>
+      </div>
       <SingleSelect
         v-model="modelValue"
         :label="
@@ -35,10 +41,6 @@
         :disabled="isLoading"
         data-attr="upload-model-step2-type-selector"
       />
-      <div class="flex items-center gap-2">
-        <i class="icon-[lucide--circle-question-mark]" />
-        <span>{{ $t('assetBrowser.notSureLeaveAsIs') }}</span>
-      </div>
     </div>
   </div>
 </template>

src/platform/assets/components/UploadModelDialog.vue

@@ -48,6 +48,7 @@
       @fetch-metadata="handleFetchMetadata"
       @upload="handleUploadModel"
       @close="handleClose"
+      @import-another="resetWizard"
     />
   </div>
 </template>
@@ -85,7 +86,8 @@ const {
   canUploadModel,
   fetchMetadata,
   uploadModel,
-  goToPreviousStep
+  goToPreviousStep,
+  resetWizard
 } = useUploadModelWizard(modelTypes)
 
 async function handleFetchMetadata() {

src/platform/assets/components/UploadModelFooter.vue

@@ -80,21 +80,33 @@
       <i v-if="isUploading" class="icon-[lucide--loader-circle] animate-spin" />
       <span>{{ $t('assetBrowser.upload') }}</span>
     </Button>
-    <Button
+    <template
       v-else-if="
         currentStep === 3 &&
         (uploadStatus === 'success' || uploadStatus === 'processing')
       "
-      variant="secondary"
-      data-attr="upload-model-step3-finish-button"
-      @click="emit('close')"
     >
-      {{
-        uploadStatus === 'processing'
-          ? $t('g.close')
-          : $t('assetBrowser.finish')
-      }}
-    </Button>
+      <Button
+        variant="muted-textonly"
+        size="lg"
+        data-attr="upload-model-step3-import-another-button"
+        @click="emit('importAnother')"
+      >
+        {{ $t('assetBrowser.importAnother') }}
+      </Button>
+      <Button
+        variant="secondary"
+        size="lg"
+        data-attr="upload-model-step3-finish-button"
+        @click="emit('close')"
+      >
+        {{
+          uploadStatus === 'processing'
+            ? $t('g.close')
+            : $t('assetBrowser.finish')
+        }}
+      </Button>
+    </template>
     <VideoHelpDialog
       v-model="showCivitaiHelp"
       video-url="https://media.comfy.org/compressed_768/civitai_howto.webm"
@@ -134,5 +146,6 @@ const emit = defineEmits<{
   (e: 'fetchMetadata'): void
   (e: 'upload'): void
   (e: 'close'): void
+  (e: 'importAnother'): void
 }>()
 </script>

src/platform/assets/components/UploadModelUrlInput.vue

@@ -20,7 +20,7 @@
                 :href="civitaiUrl"
                 target="_blank"
                 rel="noopener noreferrer"
-                class="text-muted underline"
+                class="text-muted-foreground underline"
               >
                 {{ $t('assetBrowser.providerCivitai') }}</a
               ><span>,</span>
@@ -35,7 +35,7 @@
                 :href="huggingFaceUrl"
                 target="_blank"
                 rel="noopener noreferrer"
-                class="text-muted underline"
+                class="text-muted-foreground underline"
               >
                 {{ $t('assetBrowser.providerHuggingFace') }}
               </a>
@@ -58,7 +58,7 @@
             class="icon-[lucide--circle-check-big] absolute top-1/2 right-3 size-5 -translate-y-1/2 text-green-500"
           />
         </div>
-        <p v-if="error" class="text-xs text-error">
+        <p v-if="error" class="text-sm text-error">
           {{ error }}
         </p>
         <p v-else-if="!flags.asyncModelUploadEnabled" class="text-foreground">

src/platform/assets/components/UploadModelUrlInputCivitai.vue

@@ -11,7 +11,7 @@
               <a
                 href="https://civitai.com/models"
                 target="_blank"
-                class="text-muted-foreground"
+                class="text-muted-foreground underline"
               >
                 {{ $t('assetBrowser.uploadModelDescription2Link') }}
               </a>
@@ -51,14 +51,14 @@
           class="icon-[lucide--circle-check-big] absolute top-1/2 right-3 size-5 -translate-y-1/2 text-green-500"
         />
       </div>
-      <p v-if="error" class="text-xs text-error">
+      <p v-if="error" class="text-sm text-error">
         {{ error }}
       </p>
       <i18n-t
         v-else
         keypath="assetBrowser.civitaiLinkExample"
         tag="p"
-        class="text-xs"
+        class="text-sm"
       >
         <template #example>
           <strong>{{ $t('assetBrowser.civitaiLinkExampleStrong') }}</strong>
@@ -67,7 +67,7 @@
           <a
             href="https://civitai.com/models/10706/luisap-z-image-and-qwen-pixel-art-refiner?modelVersionId=2225295"
             target="_blank"
-            class="text-muted-foreground"
+            class="text-muted-foreground underline"
           >
             {{ $t('assetBrowser.civitaiLinkExampleUrl') }}
           </a>

src/platform/assets/composables/useUploadModelWizard.ts

@@ -284,6 +284,20 @@ export function useUploadModelWizard(modelTypes: Ref<ModelTypeOption[]>) {
     }
   }
 
+  function resetWizard() {
+    currentStep.value = 1
+    isFetchingMetadata.value = false
+    isUploading.value = false
+    uploadStatus.value = undefined
+    uploadError.value = ''
+    wizardData.value = {
+      url: '',
+      name: '',
+      tags: []
+    }
+    selectedModelType.value = undefined
+  }
+
   return {
     // State
     currentStep,
@@ -302,6 +316,7 @@ export function useUploadModelWizard(modelTypes: Ref<ModelTypeOption[]>) {
     // Actions
     fetchMetadata,
     uploadModel,
-    goToPreviousStep
+    goToPreviousStep,
+    resetWizard
   }
 }