mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-29 18:52:19 +00:00
feat: display and upload Civitai preview images in model upload flow (#7274)
## Summary Stores and displays base64-encoded preview images from Civitai during the model upload flow, uploading the preview as a separate asset linked to the model. ## Changes - **Schema**: Added `preview_image` field to `AssetMetadata` schema - **Service**: Added `uploadAssetFromBase64` method to convert base64 data to blob and upload via FormData - **Upload Flow**: Modified wizard to first upload preview image as asset, then link it to model via `preview_id` - **UI**: Display 56x56px preview thumbnail alongside model filename in confirmation and success steps ## Review Focus - Base64 to blob conversion and FormData upload implementation - Sequential upload flow (preview first, then model with preview_id reference) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7274-feat-display-and-upload-Civitai-preview-images-in-model-upload-flow-2c46d73d365081ff9b74c1791d23f6dd) by [Unito](https://www.unito.io) --------- Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
committed by
GitHub
parent
2903560416
commit
ce4837a57c
@@ -1,13 +1,22 @@
|
||||
<template>
|
||||
<div class="flex flex-col gap-4 text-sm text-muted-foreground">
|
||||
<!-- Model Info Section -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<p class="m-0">
|
||||
{{ $t('assetBrowser.modelAssociatedWithLink') }}
|
||||
</p>
|
||||
<p class="mt-0 text-base-foreground rounded-lg">
|
||||
{{ metadata?.filename || metadata?.name }}
|
||||
</p>
|
||||
<div
|
||||
class="flex items-center gap-3 bg-secondary-background p-3 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"
|
||||
/>
|
||||
<p class="m-0 text-base-foreground">
|
||||
{{ metadata?.filename || metadata?.name }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Model Type Selection -->
|
||||
@@ -40,7 +49,8 @@ import { useModelTypes } from '@/platform/assets/composables/useModelTypes'
|
||||
import type { AssetMetadata } from '@/platform/assets/schemas/assetSchema'
|
||||
|
||||
defineProps<{
|
||||
metadata: AssetMetadata | null
|
||||
metadata?: AssetMetadata
|
||||
previewImage?: string
|
||||
}>()
|
||||
|
||||
const modelValue = defineModel<string | undefined>()
|
||||
|
||||
Reference in New Issue
Block a user