feat: add gated Hugging Face model access hints

Author: jaeone94

packages/comfyui-desktop-bridge-types/comfyDesktopBridge.d.ts

@@ -70,6 +70,9 @@ export interface ComfyDesktop2TelemetryBridge {
 
 export interface ComfyDesktop2Bridge {
   isRemote(): boolean
+  /** Opens a model provider access page in the hosted frontend's browser session.
+   *  Resolves `true` when the host accepts the request. */
+  openModelAccessPage?: (url: string) => Promise<boolean>
   downloadModel?: (
     url: string,
     filename: string,

packages/comfyui-desktop-bridge-types/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-desktop-bridge-types",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "TypeScript definitions for the Comfy Desktop hosted frontend bridge",
   "homepage": "https://comfy.org",
   "license": "MIT",

src/locales/en/main.json

@@ -3991,7 +3991,10 @@
       "importNotSupported": "Import Not Supported",
       "copyModelName": "Copy model name",
       "copyUrl": "Copy URL",
+      "gatedModelsHint": "Some models are gated. To download them, sign in to Hugging Face and accept the model license agreement.",
+      "gatedModelTooltip": "This model is gated and requires you to be logged in to Hugging Face and to accept its license agreement.",
       "locateNode": "Locate node on canvas",
+      "openHuggingFaceRepo": "Open Hugging Face repo",
       "expandNodes": "Show referencing nodes",
       "collapseNodes": "Hide referencing nodes",
       "unknownCategory": "Unknown",

src/platform/missingModel/components/MissingModelCard.test.ts

@@ -3,13 +3,28 @@ import { render, screen, within } from '@testing-library/vue'
 import userEvent from '@testing-library/user-event'
 import PrimeVue from 'primevue/config'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import enMessages from '@/locales/en/main.json' with { type: 'json' }
 import type {
   MissingModelGroup,
   MissingModelViewModel
 } from '@/platform/missingModel/types'
+import type * as MissingModelDownload from '@/platform/missingModel/missingModelDownload'
+import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
+
+const mockDownloadModel = vi.hoisted(() => vi.fn())
+
+vi.mock('@/platform/missingModel/missingModelDownload', async () => {
+  const actual = await vi.importActual<typeof MissingModelDownload>(
+    '@/platform/missingModel/missingModelDownload'
+  )
+  return {
+    ...actual,
+    downloadModel: mockDownloadModel
+  }
+})
 
 vi.mock('./MissingModelRow.vue', () => ({
   default: {
@@ -131,6 +146,7 @@ function getRowsIn(testId: string) {
 
 describe('MissingModelCard', () => {
   beforeEach(() => {
+    vi.clearAllMocks()
     mockIsCloud.value = true
   })
 
@@ -241,6 +257,21 @@ describe('MissingModelCard', () => {
         screen.queryByTestId('missing-model-actions')
       ).not.toBeInTheDocument()
     })
+
+    it('does not show gated model guidance in cloud', async () => {
+      const group = makeGroup({ withDownloadUrls: true })
+      const url =
+        'https://huggingface.co/comfy/test/resolve/main/model.safetensors'
+      mountCard({ missingModelGroups: [group] })
+
+      useMissingModelStore().gatedRepoUrls[url] =
+        'https://huggingface.co/comfy/test'
+      await nextTick()
+
+      expect(
+        screen.queryByTestId('missing-model-gated-hint')
+      ).not.toBeInTheDocument()
+    })
   })
 
   describe('Event Handling', () => {
@@ -256,6 +287,7 @@ describe('MissingModelCard', () => {
 
 describe('MissingModelCard (OSS)', () => {
   beforeEach(() => {
+    vi.clearAllMocks()
     mockIsCloud.value = false
   })
 
@@ -293,6 +325,38 @@ describe('MissingModelCard (OSS)', () => {
     ).toBeVisible()
   })
 
+  it('shows gated model guidance in OSS', async () => {
+    const group = makeGroup({ withDownloadUrls: true })
+    const url =
+      'https://huggingface.co/comfy/test/resolve/main/model.safetensors'
+    mountCard({ missingModelGroups: [group] })
+
+    useMissingModelStore().gatedRepoUrls[url] =
+      'https://huggingface.co/comfy/test'
+    await nextTick()
+
+    expect(screen.getByTestId('missing-model-gated-hint')).toHaveTextContent(
+      'Some models are gated. To download them, sign in to Hugging Face and accept the model license agreement.'
+    )
+  })
+
+  it('routes Download all through the shared missing-model download handler', async () => {
+    mountCard({
+      missingModelGroups: [makeGroup({ withDownloadUrls: true })]
+    })
+
+    await userEvent.click(screen.getByTestId('missing-model-download-all'))
+
+    expect(mockDownloadModel).toHaveBeenCalledWith(
+      {
+        name: 'model.safetensors',
+        url: 'https://huggingface.co/comfy/test/resolve/main/model.safetensors',
+        directory: 'checkpoints'
+      },
+      {}
+    )
+  })
+
   it('hides Download all when no model is downloadable', () => {
     mountCard()
 

src/platform/missingModel/components/MissingModelCard.vue

@@ -1,5 +1,20 @@
 <template>
   <div class="px-3">
+    <div
+      v-if="showGatedModelsHint"
+      data-testid="missing-model-gated-hint"
+      role="alert"
+      class="mb-2 flex gap-2 rounded-md border border-warning-background/30 bg-warning-background/10 p-2.5"
+    >
+      <i
+        aria-hidden="true"
+        class="mt-0.5 icon-[lucide--lock] size-4 shrink-0 text-warning-background"
+      />
+      <p class="m-0 text-xs/relaxed text-warning-background">
+        {{ t('rightSidePanel.missingModels.gatedModelsHint') }}
+      </p>
+    </div>
+
     <div
       v-if="importableModelRows.length > 0"
       data-testid="missing-model-importable-rows"
@@ -68,7 +83,7 @@ import type { MissingModelGroup } from '@/platform/missingModel/types'
 import { isCloud } from '@/platform/distribution/types'
 import MissingModelRow from '@/platform/missingModel/components/MissingModelRow.vue'
 import Button from '@/components/ui/button/Button.vue'
-import { downloadModel } from '@/platform/missingModel/missingModelDownload'
+import { useMissingModelDownload } from '@/platform/missingModel/composables/useMissingModelDownload'
 import { getDownloadableModels } from '@/platform/missingModel/missingModelViewUtils'
 import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
 import { formatSize } from '@/utils/formatUtil'
@@ -100,6 +115,7 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 const missingModelStore = useMissingModelStore()
+const { downloadMissingModel } = useMissingModelDownload()
 
 const sortedModelRows = computed(() =>
   missingModelGroups
@@ -122,6 +138,15 @@ const unsupportedModelRows = computed(() =>
   isCloud ? sortedModelRows.value.filter((row) => !canCloudImport(row)) : []
 )
 
+const showGatedModelsHint = computed(
+  () =>
+    !isCloud &&
+    sortedModelRows.value.some((row) => {
+      const url = row.model.representative.url
+      return !!url && !!missingModelStore.gatedRepoUrls[url]
+    })
+)
+
 const downloadableModels = computed(() => {
   if (isCloud) return []
 
@@ -139,7 +164,7 @@ const downloadAllLabel = computed(() => {
 
 function downloadAllModels() {
   for (const model of downloadableModels.value) {
-    downloadModel(model, missingModelStore.folderPaths)
+    downloadMissingModel(model)
   }
 }
 

src/platform/missingModel/components/MissingModelRow.test.ts

@@ -19,6 +19,8 @@ const mockIsCloud = vi.hoisted(() => ({ value: true }))
 const mockShowUploadDialog = vi.hoisted(() => vi.fn())
 const mockCopyToClipboard = vi.hoisted(() => vi.fn())
 const mockDownloadModel = vi.hoisted(() => vi.fn())
+const mockFetchModelMetadata = vi.hoisted(() => vi.fn())
+const mockOpenGatedRepoPage = vi.hoisted(() => vi.fn())
 const mockRootGraph = vi.hoisted<{
   value: Record<string, never> | null
 }>(() => ({ value: null }))
@@ -104,10 +106,8 @@ vi.mock('@/platform/missingModel/missingModelDownload', async () => {
   return {
     ...actual,
     downloadModel: mockDownloadModel,
-    fetchModelMetadata: vi.fn().mockResolvedValue({
-      fileSize: null,
-      gatedRepoUrl: null
-    })
+    fetchModelMetadata: mockFetchModelMetadata,
+    openGatedRepoPage: mockOpenGatedRepoPage
   }
 })
 
@@ -177,12 +177,17 @@ function renderRow(
 describe('MissingModelRow', () => {
   beforeEach(() => {
     vi.clearAllMocks()
+    delete window.__comfyDesktop2
     mockIsCloud.value = true
     mockRootGraph.value = null
     mockApiListeners.clear()
     mockGetNodeByExecutionId.mockReset()
     mockUploadContext.resolver = undefined
     mockUploadCallbacks.onUploadSuccess = undefined
+    mockFetchModelMetadata.mockResolvedValue({
+      fileSize: null,
+      gatedRepoUrl: null
+    })
   })
 
   it('opens the model import dialog from the cloud row', async () => {
@@ -401,6 +406,96 @@ describe('MissingModelRow', () => {
     )
   })
 
+  it('shows a gated HuggingFace access action without replacing download', async () => {
+    mockIsCloud.value = false
+    const model = makeModel([{ nodeId: '1', widgetName: 'ckpt_name' }])
+    model.representative.url =
+      'https://huggingface.co/bfl/FLUX.1/resolve/main/model.safetensors'
+    mockFetchModelMetadata.mockResolvedValueOnce({
+      fileSize: null,
+      gatedRepoUrl: 'https://huggingface.co/bfl/FLUX.1'
+    })
+
+    renderRow(model, vi.fn(), false)
+    const store = useMissingModelStore()
+
+    await waitFor(() => {
+      expect(store.gatedRepoUrls[model.representative.url!]).toBe(
+        'https://huggingface.co/bfl/FLUX.1'
+      )
+    })
+
+    const gatedModelTooltip =
+      'This model is gated and requires you to be logged in to Hugging Face and to accept its license agreement.'
+    expect(screen.getByTestId('missing-model-gated-access')).toHaveAttribute(
+      'title',
+      gatedModelTooltip
+    )
+    expect(screen.getByTestId('missing-model-download')).toHaveAttribute(
+      'title',
+      gatedModelTooltip
+    )
+  })
+
+  it('opens gated repo action separately from the download action', async () => {
+    mockIsCloud.value = false
+    const user = userEvent.setup()
+    const model = makeModel([{ nodeId: '1', widgetName: 'ckpt_name' }])
+    model.representative.url =
+      'https://huggingface.co/bfl/FLUX.1/resolve/main/model.safetensors'
+
+    renderRow(model, vi.fn(), false)
+    const store = useMissingModelStore()
+    store.setGatedRepoUrl(
+      model.representative.url,
+      'https://huggingface.co/bfl/FLUX.1'
+    )
+    await nextTick()
+
+    await user.click(screen.getByTestId('missing-model-gated-access'))
+    expect(mockOpenGatedRepoPage).toHaveBeenCalledWith(
+      'https://huggingface.co/bfl/FLUX.1'
+    )
+
+    await user.click(screen.getByTestId('missing-model-download'))
+    expect(mockDownloadModel).toHaveBeenCalledWith(
+      {
+        name: 'model.safetensors',
+        url: 'https://huggingface.co/bfl/FLUX.1/resolve/main/model.safetensors',
+        directory: 'checkpoints'
+      },
+      {}
+    )
+  })
+
+  it('delegates the gated repo action to the Desktop bridge when available', async () => {
+    mockIsCloud.value = false
+    const user = userEvent.setup()
+    const openModelAccessPage = vi.fn().mockResolvedValue(true)
+    window.__comfyDesktop2 = {
+      isRemote: () => false,
+      openModelAccessPage
+    }
+    const model = makeModel([{ nodeId: '1', widgetName: 'ckpt_name' }])
+    model.representative.url =
+      'https://huggingface.co/bfl/FLUX.1/resolve/main/model.safetensors'
+
+    renderRow(model, vi.fn(), false)
+    const store = useMissingModelStore()
+    store.setGatedRepoUrl(
+      model.representative.url,
+      'https://huggingface.co/bfl/FLUX.1'
+    )
+    await nextTick()
+
+    await user.click(screen.getByTestId('missing-model-gated-access'))
+
+    expect(openModelAccessPage).toHaveBeenCalledWith(
+      'https://huggingface.co/bfl/FLUX.1'
+    )
+    expect(mockOpenGatedRepoPage).not.toHaveBeenCalled()
+  })
+
   it('shows unknown category metadata for models without a directory', () => {
     renderRow(
       makeModel([{ nodeId: '1', widgetName: 'ckpt_name' }]),