mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-05 13:41:59 +00:00
14d0ec73f6
## Summary - Adds asynchronous model upload support with HTTP 202 responses - Implements WebSocket-based real-time download progress tracking via `asset_download` events - Creates `assetDownloadStore` for centralized download state management and toast notifications - Updates upload wizard UI to show "processing" state when downloads continue in background ## Changes - **Core**: New `assetDownloadStore` for managing async downloads with WebSocket events - **API**: Support for HTTP 202 async upload responses with task tracking - **UI**: Upload wizard now shows "processing" state and allows closing dialog during download - **Progress**: Periodic toast notifications (every 5s) during active downloads with completion/error toasts - **Schema**: Updated task statuses (`created`, `running`, `completed`, `failed`) and WebSocket message types ## Review Focus - WebSocket event handling and download state management in `assetDownloadStore` - Upload flow UX - users can now close the dialog and download continues in background - Toast notification frequency and timing - Schema alignment with backend async upload API Fixes #7748 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7746-feat-Add-async-model-upload-with-WebSocket-progress-tracking-2d36d73d3650811cb79ae06f470dcded) by [Unito](https://www.unito.io) --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: GitHub Action <action@github.com>
91 lines
2.8 KiB
Vue
91 lines
2.8 KiB
Vue
<template>
|
|
<div class="flex flex-1 flex-col gap-6 text-sm text-muted-foreground">
|
|
<!-- 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="result === 'success'" class="flex flex-col gap-2">
|
|
<p class="m-0 font-bold">
|
|
{{ $t('assetBrowser.modelUploaded') }}
|
|
</p>
|
|
<p class="m-0">
|
|
{{ $t('assetBrowser.findInLibrary', { type: modelType }) }}
|
|
</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">
|
|
<!-- Going to want to add another translation here to get a nice display name. -->
|
|
{{ modelType }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Error State -->
|
|
<div
|
|
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" />
|
|
<div class="text-center">
|
|
<p class="m-0 text-sm font-bold">
|
|
{{ $t('assetBrowser.uploadFailed') }}
|
|
</p>
|
|
<p v-if="error" class="text-sm text-muted mb-0">
|
|
{{ error }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { AssetMetadata } from '@/platform/assets/schemas/assetSchema'
|
|
|
|
const { result } = defineProps<{
|
|
result: 'processing' | 'success' | 'error'
|
|
error?: string
|
|
metadata?: AssetMetadata
|
|
modelType?: string
|
|
previewImage?: string
|
|
}>()
|
|
</script>
|