From c9e7565609cde288be6ffda3ffbeea1354f48d72 Mon Sep 17 00:00:00 2001
From: Luke Mino-Altherr <luke@comfy.org>
Date: Thu, 4 Dec 2025 19:57:57 -0800
Subject: [PATCH 1/3] [feat] Add video help dialog to Upload Model flow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add reusable VideoHelpDialog component with tutorial video for finding
CivitAI model URLs in the Upload Model wizard.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../assets/components/UploadModelFooter.vue   | 27 +++---
 .../assets/components/VideoHelpDialog.vue     | 86 +++++++++++++++++++
 2 files changed, 103 insertions(+), 10 deletions(-)
 create mode 100644 src/platform/assets/components/VideoHelpDialog.vue

diff --git a/src/platform/assets/components/UploadModelFooter.vue b/src/platform/assets/components/UploadModelFooter.vue
index 7bb4cc966d..9afea97c8d 100644
--- a/src/platform/assets/components/UploadModelFooter.vue
+++ b/src/platform/assets/components/UploadModelFooter.vue
@@ -1,18 +1,14 @@
 <template>
   <div class="flex justify-end gap-2 w-full">
-    <span
+    <button
       v-if="currentStep === 1"
-      class="text-muted-foreground mr-auto underline flex items-center gap-2"
+      class="text-muted-foreground mr-auto underline flex items-center gap-2 cursor-pointer bg-transparent border-0 p-0"
+      data-attr="upload-model-step1-help-link"
+      @click="showVideoHelp = true"
     >
       <i class="icon-[lucide--circle-question-mark]" />
-      <a
-        href="#"
-        target="_blank"
-        class="text-muted-foreground"
-        data-attr="upload-model-step1-help-link"
-        >{{ $t('How do I find this?') }}</a
-      >
-    </span>
+      <span>{{ $t('How do I find this?') }}</span>
+    </button>
     <TextButton
       v-if="currentStep === 1"
       :label="$t('g.cancel')"
@@ -73,12 +69,23 @@
       data-attr="upload-model-step3-finish-button"
       @click="emit('close')"
     />
+    <VideoHelpDialog
+      v-model="showVideoHelp"
+      video-url="https://media.comfy.org/compressed_768/civitai_howto.webm"
+      loop
+      :show-controls="false"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
+
 import IconTextButton from '@/components/button/IconTextButton.vue'
 import TextButton from '@/components/button/TextButton.vue'
+import VideoHelpDialog from '@/platform/assets/components/VideoHelpDialog.vue'
+
+const showVideoHelp = ref(false)
 
 defineProps<{
   currentStep: number
diff --git a/src/platform/assets/components/VideoHelpDialog.vue b/src/platform/assets/components/VideoHelpDialog.vue
new file mode 100644
index 0000000000..759c92beeb
--- /dev/null
+++ b/src/platform/assets/components/VideoHelpDialog.vue
@@ -0,0 +1,86 @@
+<template>
+  <Dialog
+    v-model:visible="isVisible"
+    modal
+    :closable="false"
+    :close-on-escape="false"
+    :dismissable-mask="true"
+    :pt="{
+      root: { class: 'video-help-dialog' },
+      header: { class: '!hidden' },
+      content: { class: '!p-0' },
+      mask: { class: '!bg-black/70' }
+    }"
+    :style="{ width: '90vw', maxWidth: '800px' }"
+  >
+    <div class="relative">
+      <IconButton
+        class="absolute top-4 right-6 z-10"
+        :aria-label="$t('g.close')"
+        @click="isVisible = false"
+      >
+        <i class="pi pi-times text-sm" />
+      </IconButton>
+      <video
+        :controls="showControls"
+        autoplay
+        :loop="loop"
+        class="w-full rounded-lg"
+        :src="videoUrl"
+      >
+        {{ $t('g.videoFailedToLoad') }}
+      </video>
+    </div>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import Dialog from 'primevue/dialog'
+import { computed, onUnmounted, watch } from 'vue'
+
+import IconButton from '@/components/button/IconButton.vue'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    videoUrl: string
+    loop?: boolean
+    showControls?: boolean
+  }>(),
+  {
+    loop: true,
+    showControls: false
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+const isVisible = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+})
+
+const handleEscapeKey = (event: KeyboardEvent) => {
+  if (event.key === 'Escape' && isVisible.value) {
+    event.stopImmediatePropagation()
+    event.stopPropagation()
+    event.preventDefault()
+    isVisible.value = false
+  }
+}
+
+watch(isVisible, (visible) => {
+  if (visible) {
+    // Add listener with capture phase to intercept before parent dialogs
+    document.addEventListener('keydown', handleEscapeKey, { capture: true })
+  } else {
+    document.removeEventListener('keydown', handleEscapeKey, { capture: true })
+  }
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleEscapeKey, { capture: true })
+})
+</script>

From e9f653e00a619b3cf39439f84fdc031c59876002 Mon Sep 17 00:00:00 2001
From: Luke Mino-Altherr <luke@comfy.org>
Date: Thu, 4 Dec 2025 20:14:17 -0800
Subject: [PATCH 2/3] [feat] Add accessibility and robustness improvements to
 VideoHelpDialog
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add muted attribute to video for cross-browser autoplay support
- Add aria-label prop (optional) for screen reader accessibility
- Add i18n key assetBrowser.uploadModelHelpVideo
- Fix watcher with immediate:true to handle mount with modelValue=true
- Make ariaLabel optional with sensible default for better DX

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/locales/en/main.json                      |  1 +
 .../assets/components/UploadModelFooter.vue   |  1 +
 .../assets/components/VideoHelpDialog.vue     | 26 +++++++++++++------
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index cc2e62e9ba..0f3a9c9aff 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -2113,6 +2113,7 @@
     "uploadingModel": "Importing model...",
     "uploadSuccess": "Model imported successfully!",
     "uploadFailed": "Import failed",
+    "uploadModelHelpVideo": "Upload Model Help Video",
     "modelAssociatedWithLink": "The model associated with the link you provided:",
     "modelTypeSelectorLabel": "What type of model is this?",
     "modelTypeSelectorPlaceholder": "Select model type",
diff --git a/src/platform/assets/components/UploadModelFooter.vue b/src/platform/assets/components/UploadModelFooter.vue
index 9afea97c8d..84ede27a76 100644
--- a/src/platform/assets/components/UploadModelFooter.vue
+++ b/src/platform/assets/components/UploadModelFooter.vue
@@ -72,6 +72,7 @@
     <VideoHelpDialog
       v-model="showVideoHelp"
       video-url="https://media.comfy.org/compressed_768/civitai_howto.webm"
+      :aria-label="$t('assetBrowser.uploadModelHelpVideo')"
       loop
       :show-controls="false"
     />
diff --git a/src/platform/assets/components/VideoHelpDialog.vue b/src/platform/assets/components/VideoHelpDialog.vue
index 759c92beeb..9dc586d1b2 100644
--- a/src/platform/assets/components/VideoHelpDialog.vue
+++ b/src/platform/assets/components/VideoHelpDialog.vue
@@ -24,7 +24,9 @@
       <video
         :controls="showControls"
         autoplay
+        muted
         :loop="loop"
+        :aria-label="ariaLabel"
         class="w-full rounded-lg"
         :src="videoUrl"
       >
@@ -44,10 +46,12 @@ const props = withDefaults(
   defineProps<{
     modelValue: boolean
     videoUrl: string
+    ariaLabel?: string
     loop?: boolean
     showControls?: boolean
   }>(),
   {
+    ariaLabel: 'Help video',
     loop: true,
     showControls: false
   }
@@ -71,14 +75,20 @@ const handleEscapeKey = (event: KeyboardEvent) => {
   }
 }
 
-watch(isVisible, (visible) => {
-  if (visible) {
-    // Add listener with capture phase to intercept before parent dialogs
-    document.addEventListener('keydown', handleEscapeKey, { capture: true })
-  } else {
-    document.removeEventListener('keydown', handleEscapeKey, { capture: true })
-  }
-})
+watch(
+  isVisible,
+  (visible) => {
+    if (visible) {
+      // Add listener with capture phase to intercept before parent dialogs
+      document.addEventListener('keydown', handleEscapeKey, { capture: true })
+    } else {
+      document.removeEventListener('keydown', handleEscapeKey, {
+        capture: true
+      })
+    }
+  },
+  { immediate: true }
+)
 
 onUnmounted(() => {
   document.removeEventListener('keydown', handleEscapeKey, { capture: true })

From b0735b7221a757f1bc2a22b9dbe30117e9031600 Mon Sep 17 00:00:00 2001
From: Luke Mino-Altherr <luke@comfy.org>
Date: Thu, 4 Dec 2025 20:23:11 -0800
Subject: [PATCH 3/3] [feat] Move upload model help button text to i18n
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace raw string in $t('How do I find this?') with proper i18n key
assetBrowser.uploadModelHowDoIFindThis to follow localization pattern.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/locales/en/main.json                             | 1 +
 src/platform/assets/components/UploadModelFooter.vue | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index 0f3a9c9aff..c597f9b518 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -2114,6 +2114,7 @@
     "uploadSuccess": "Model imported successfully!",
     "uploadFailed": "Import failed",
     "uploadModelHelpVideo": "Upload Model Help Video",
+    "uploadModelHowDoIFindThis": "How do I find this?",
     "modelAssociatedWithLink": "The model associated with the link you provided:",
     "modelTypeSelectorLabel": "What type of model is this?",
     "modelTypeSelectorPlaceholder": "Select model type",
diff --git a/src/platform/assets/components/UploadModelFooter.vue b/src/platform/assets/components/UploadModelFooter.vue
index 84ede27a76..4fa502561d 100644
--- a/src/platform/assets/components/UploadModelFooter.vue
+++ b/src/platform/assets/components/UploadModelFooter.vue
@@ -7,7 +7,7 @@
       @click="showVideoHelp = true"
     >
       <i class="icon-[lucide--circle-question-mark]" />
-      <span>{{ $t('How do I find this?') }}</span>
+      <span>{{ $t('assetBrowser.uploadModelHowDoIFindThis') }}</span>
     </button>
     <TextButton
       v-if="currentStep === 1"