feat: Enhance CharacterPanel with image upload and VLM analysis

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
+                    <textarea
-                        type="text"
                         value={appearance}
                         onChange={(e) => setAppearance(e.target.value)}
-                        placeholder="外貌描述"
+                        placeholder="外貌描述（可通过分析自动生成）"
-                        className="w-full p-2 text-sm border rounded bg-background"
+                        rows={2}
+                        className="w-full p-2 text-sm border rounded bg-background resize-none"
                     />
                     <input
                         type="text"

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
     // ============================================================