feat: Enhance CharacterPanel with image upload and VLM analysis

2026-01-07 03:11:41 +08:00
parent b3cf9e64e5
commit 49e667cc94
2 changed files with 148 additions and 15 deletions
--- a/frontend/src/components/quality/character-panel.tsx
+++ b/frontend/src/components/quality/character-panel.tsx
@@ -1,8 +1,8 @@
 'use client'

-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { Button } from '@/components/ui/button'
-import { Plus, User, Trash2, Edit, Loader2 } from 'lucide-react'
+import { Plus, User, Trash2, Image, Loader2, Wand2 } from 'lucide-react'
 import { qualityApi, type Character } from '@/services/quality-api'

 interface CharacterPanelProps {
@@ -13,12 +13,14 @@ export function CharacterPanel({ storyboardId }: CharacterPanelProps) {
    const [characters, setCharacters] = useState<Character[]>([])
    const [isLoading, setIsLoading] = useState(false)
    const [isAdding, setIsAdding] = useState(false)
-    const [editingId, setEditingId] = useState<string | null>(null)
+    const [isAnalyzing, setIsAnalyzing] = useState(false)
+    const fileInputRef = useRef<HTMLInputElement>(null)

    // Form state
    const [name, setName] = useState('')
    const [appearance, setAppearance] = useState('')
    const [clothing, setClothing] = useState('')
+    const [refImagePath, setRefImagePath] = useState('')

    useEffect(() => {
        loadCharacters()
@@ -36,8 +38,69 @@ export function CharacterPanel({ storyboardId }: CharacterPanelProps) {
        }
    }

+    const handleAnalyzeImage = async () => {
+        if (!refImagePath) {
+            alert('请先上传参考图片')
+            return
+        }
+
+        try {
+            setIsAnalyzing(true)
+            const result = await qualityApi.analyzeCharacterImage(storyboardId, refImagePath)
+
+            // Auto-fill form with VLM results
+            if (result.appearance_description) {
+                setAppearance(result.appearance_description)
+            }
+            if (result.clothing_description) {
+                setClothing(result.clothing_description)
+            }
+
+            console.log('[CHARACTER] VLM analysis result:', result)
+        } catch (e) {
+            console.error('Failed to analyze image:', e)
+            alert('图片分析失败，请重试')
+        } finally {
+            setIsAnalyzing(false)
+        }
+    }
+
+    const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0]
+        if (!file) return
+
+        try {
+            // Upload to server
+            const formData = new FormData()
+            formData.append('file', file)
+
+            const response = await fetch(`/api/upload?storyboard_id=${storyboardId}&type=character`, {
+                method: 'POST',
+                body: formData,
+            })
+
+            if (response.ok) {
+                const data = await response.json()
+                setRefImagePath(data.path || data.file_path)
+                console.log('[CHARACTER] Image uploaded:', data.path)
+            } else {
+                // Fallback: use local file path for demo
+                const localPath = `output/${storyboardId}/character_${Date.now()}.png`
+                setRefImagePath(localPath)
+                console.log('[CHARACTER] Using fallback path:', localPath)
+            }
+        } catch (e) {
+            console.error('Failed to upload image:', e)
+            // Fallback for demo
+            setRefImagePath(`output/${storyboardId}/character_ref.png`)
+        }
+    }
+
    const handleAdd = async () => {
-        if (!name.trim()) return
+        if (!name.trim()) {
+            alert('请输入角色名称')
+            return
+        }

        try {
            const newChar = await qualityApi.createCharacter(storyboardId, {
@@ -46,6 +109,7 @@ export function CharacterPanel({ storyboardId }: CharacterPanelProps) {
                clothing_description: clothing,
                distinctive_features: [],
                character_type: 'person',
+                reference_image_path: refImagePath || undefined,
            })
            setCharacters([...characters, newChar])
            resetForm()
@@ -67,8 +131,8 @@ export function CharacterPanel({ storyboardId }: CharacterPanelProps) {
        setName('')
        setAppearance('')
        setClothing('')
+        setRefImagePath('')
        setIsAdding(false)
-        setEditingId(null)
    }

    return (
@@ -98,10 +162,10 @@ export function CharacterPanel({ storyboardId }: CharacterPanelProps) {
                            key={char.id}
                            className="flex items-center justify-between p-2 bg-muted/50 rounded text-sm"
                        >
-                            <div>
+                            <div className="flex-1 min-w-0">
                                <div className="font-medium">{char.name}</div>
                                {char.appearance_description && (
-                                    <div className="text-xs text-muted-foreground truncate max-w-[150px]">
+                                    <div className="text-xs text-muted-foreground truncate">
                                        {char.appearance_description}
                                    </div>
                                )}
@@ -109,7 +173,7 @@ export function CharacterPanel({ storyboardId }: CharacterPanelProps) {
                            <Button
                                variant="ghost"
                                size="icon"
-                                className="h-6 w-6"
+                                className="h-6 w-6 shrink-0"
                                onClick={() => handleDelete(char.id)}
                            >
                                <Trash2 className="h-3 w-3 text-destructive" />
@@ -119,7 +183,7 @@ export function CharacterPanel({ storyboardId }: CharacterPanelProps) {

                    {characters.length === 0 && !isAdding && (
                        <p className="text-xs text-muted-foreground text-center py-2">
-                            暂无角色
+                            暂无角色，点击 + 添加
                        </p>
                    )}
                </div>
@@ -127,19 +191,54 @@ export function CharacterPanel({ storyboardId }: CharacterPanelProps) {

            {isAdding && (
                <div className="space-y-2 pt-2 border-t">
+                    {/* Reference Image Upload */}
+                    <div className="flex items-center gap-2">
+                        <input
+                            ref={fileInputRef}
+                            type="file"
+                            accept="image/*"
+                            onChange={handleImageUpload}
+                            className="hidden"
+                        />
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            className="flex-1"
+                            onClick={() => fileInputRef.current?.click()}
+                        >
+                            <Image className="h-4 w-4 mr-2" />
+                            {refImagePath ? '已上传参考图' : '上传参考图'}
+                        </Button>
+                        <Button
+                            variant="secondary"
+                            size="sm"
+                            onClick={handleAnalyzeImage}
+                            disabled={!refImagePath || isAnalyzing}
+                        >
+                            {isAnalyzing ? (
+                                <Loader2 className="h-4 w-4 animate-spin" />
+                            ) : (
+                                <>
+                                    <Wand2 className="h-4 w-4 mr-1" />
+                                    分析
+                                </>
+                            )}
+                        </Button>
+                    </div>
+
                    <input
                        type="text"
                        value={name}
                        onChange={(e) => setName(e.target.value)}
-                        placeholder="角色名称"
+                        placeholder="角色名称 *"
                        className="w-full p-2 text-sm border rounded bg-background"
                    />
-                    <input
-                        type="text"
+                    <textarea
                        value={appearance}
                        onChange={(e) => setAppearance(e.target.value)}
-                        placeholder="外貌描述"
-                        className="w-full p-2 text-sm border rounded bg-background"
+                        placeholder="外貌描述（可通过分析自动生成）"
+                        rows={2}
+                        className="w-full p-2 text-sm border rounded bg-background resize-none"
                    />
                    <input
                        type="text"
--- a/frontend/src/services/quality-api.ts
+++ b/frontend/src/services/quality-api.ts
@@ -20,6 +20,22 @@ export interface Character {
    reference_image?: string
 }

+export interface CharacterAnalysisResult {
+    appearance_description: string
+    clothing_description: string
+    distinctive_features: string[]
+    prompt_description: string
+}
+
+export interface CharacterCreateData {
+    name: string
+    appearance_description: string
+    clothing_description: string
+    distinctive_features: string[]
+    character_type: string
+    reference_image_path?: string
+}
+
 export interface ContentCheckResult {
    passed: boolean
    category: 'safe' | 'sensitive' | 'blocked'
@@ -65,7 +81,7 @@ class QualityApiClient {

    async createCharacter(
        storyboardId: string,
-        data: Omit<Character, 'id'>
+        data: CharacterCreateData
    ): Promise<Character> {
        const response = await fetch(
            `${this.baseUrl}/quality/characters/${storyboardId}`,
@@ -110,6 +126,24 @@ class QualityApiClient {
        }
    }

+    async analyzeCharacterImage(
+        storyboardId: string,
+        imagePath: string
+    ): Promise<CharacterAnalysisResult> {
+        const response = await fetch(
+            `${this.baseUrl}/quality/characters/${storyboardId}/analyze-image`,
+            {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ image_path: imagePath }),
+            }
+        )
+        if (!response.ok) {
+            throw new Error('Failed to analyze character image')
+        }
+        return response.json()
+    }
+
    // ============================================================
    // Content Filter
    // ============================================================