feat(video): add WAN 2.2/2.5 T2V/I2V with queue + status polling

新增视频生成功能，接入 WAN 2.5 I2V 和 WAN 2.2 T2V/I2V 模型：

【后端改造】
- /api/generate 扩展视频参数透传（resolution/duration/fps/num_frames/negative_prompt等）
- WAN 2.2 暴露 enable_safety_checker 开关（默认 true）
- WAN 2.5 不提供安全开关（平台策略决定）
- 保持现有异步队列范式与轮询机制

【前端功能】
- 模型选择新增「🎬 视频生成」分组：
* WAN 2.5 - Image to Video (480p/720p/1080p, 5s/10s)
* WAN 2.2 - Image to Video (A14B) (480p/580p/720p, fps/frames)
* WAN 2.2 - Text to Video (A14B)
- 动态参数面板：根据模型显示对应参数
- 价格预估：
* WAN 2.5: 按分辨率 × 时长（0.05/0.10/0.15 $/s）
* WAN 2.2: 按 16FPS 计费秒数 × 费率（0.04/0.06/0.08 $/s）
- 视频结果展示：<video> 标签 + MP4 下载按钮
- I2V 模式：首帧图像上传并作为 image_url 传递
- T2V 模式：仅需 prompt

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app.py

@@ -282,13 +282,39 @@ def generate():
             if 'max_images' in data:
                 fal_arguments['max_images'] = data['max_images']
         
-        # Add common optional parameters
+        # Add common optional parameters (images)
         if 'image_size' in data:
             fal_arguments['image_size'] = data['image_size']
         if 'num_images' in data:
             fal_arguments['num_images'] = data['num_images']
         if 'seed' in data:
             fal_arguments['seed'] = data['seed']
+
+        # Video-related passthrough (WAN 2.2 / 2.5)
+        for key in [
+            'image_url',              # I2V: single first frame
+            'resolution',             # e.g. "480p" | "580p" | "720p" | "1080p"
+            'duration',               # "5" | "10" (WAN 2.5)
+            'frames_per_second',      # (WAN 2.2)
+            'num_frames',             # (WAN 2.2)
+            'negative_prompt',
+            'video_quality',          # (WAN 2.2)
+            'video_write_mode',       # (WAN 2.2)
+            'acceleration',           # (WAN 2.2)
+            'guidance_scale',         # (WAN 2.2)
+            'guidance_scale_2',       # (WAN 2.2)
+            'interpolator_model',     # (WAN 2.2)
+            'num_interpolated_frames',# (WAN 2.2)
+            'adjust_fps_for_interpolation',  # (WAN 2.2)
+            'aspect_ratio',           # (WAN 2.2)
+            'end_image_url',          # (WAN 2.2 optional)
+            'audio_url',              # (WAN 2.5 optional: audio track)
+            'enable_prompt_expansion' # both 2.5 and 2.2 (2.5 defaults to true)
+        ]:
+            if key in data:
+                fal_arguments[key] = data[key]
+
+        # WAN 2.2 exclusive safety switch: passthrough if provided (for uncensored use false)
         if 'enable_safety_checker' in data:
             fal_arguments['enable_safety_checker'] = data['enable_safety_checker']
         

static/script.js

@@ -320,20 +320,77 @@ function handleImageSizeChange() {
 
 // Handle model dropdown change
 function handleModelChange() {
-    const isTextToImage = modelSelect.value === 'fal-ai/bytedance/seedream/v4/text-to-image';
-    
-    if (isTextToImage) {
+    const modelValue = modelSelect.value;
+    const isTextToImage = modelValue === 'fal-ai/bytedance/seedream/v4/text-to-image';
+    const isVideoModel = modelValue.includes('wan-25-preview') || modelValue.includes('wan/v2.2');
+    const isWan25 = modelValue.includes('wan-25-preview');
+    const isWan22 = modelValue.includes('wan/v2.2');
+    const isT2V = modelValue.includes('text-to-video');
+
+    // Toggle video params visibility
+    const videoParams = document.getElementById('videoParams');
+    const settingsGrid = document.querySelector('.settings-grid');
+    if (videoParams) {
+        videoParams.style.display = isVideoModel ? 'block' : 'none';
+    }
+    if (settingsGrid) {
+        settingsGrid.style.display = isVideoModel ? 'none' : 'grid';
+    }
+
+    // Show/hide WAN-specific params
+    const wan25Params = document.querySelectorAll('.video-param-wan25');
+    const wan22Params = document.querySelectorAll('.video-param-wan22');
+    wan25Params.forEach(el => el.style.display = isWan25 ? 'block' : 'none');
+    wan22Params.forEach(el => el.style.display = isWan22 ? 'block' : 'none');
+
+    // Update UI labels based on model type
+    if (isVideoModel) {
+        if (isT2V) {
+            promptTitle.textContent = '✏️ 视频提示词';
+            promptLabel.textContent = '提示词';
+            document.getElementById('prompt').placeholder = '例如：moody cyberpunk alley, steady cam forward, rain reflections';
+            imageInputCard.style.display = 'none';
+            uploadedImages = [];
+            renderImagePreviews();
+        } else {
+            promptTitle.textContent = '✏️ 视频提示词';
+            promptLabel.textContent = '提示词';
+            document.getElementById('prompt').placeholder = '例如：cinematic slow push-in on the subject, volumetric light beams';
+            imageInputCard.style.display = 'block';
+        }
+        document.getElementById('generateBtn').querySelector('.btn-text').textContent = '生成视频';
+        updateVideoPriceEstimate();
+    } else if (isTextToImage) {
         promptTitle.textContent = '生成提示词';
         promptLabel.textContent = '提示词';
         document.getElementById('prompt').placeholder = '例如：美丽的山水风景，湖泊和夕阳';
         imageInputCard.style.display = 'none';
         uploadedImages = [];
         renderImagePreviews();
+        document.getElementById('generateBtn').querySelector('.btn-text').textContent = '生成图像';
     } else {
         promptTitle.textContent = '编辑指令';
         promptLabel.textContent = '编辑提示词';
         document.getElementById('prompt').placeholder = '例如：给模特穿上衣服和鞋子';
         imageInputCard.style.display = 'block';
+        document.getElementById('generateBtn').querySelector('.btn-text').textContent = '生成图像';
+    }
+
+    // Add event listeners for video params to update price
+    if (isVideoModel) {
+        const videoResolution = document.getElementById('videoResolution');
+        const videoDuration = document.getElementById('videoDuration');
+        const videoFPS = document.getElementById('videoFPS');
+        const videoNumFrames = document.getElementById('videoNumFrames');
+
+        [videoResolution, videoDuration, videoFPS, videoNumFrames].forEach(el => {
+            if (el) {
+                el.removeEventListener('change', updateVideoPriceEstimate);
+                el.removeEventListener('input', updateVideoPriceEstimate);
+                el.addEventListener('change', updateVideoPriceEstimate);
+                el.addEventListener('input', updateVideoPriceEstimate);
+            }
+        });
     }
 }
 
@@ -1080,7 +1137,9 @@ async function generateEdit() {
     
     const selectedModel = modelSelect.value;
     const isTextToImage = selectedModel === 'fal-ai/bytedance/seedream/v4/text-to-image';
-    
+    const isVideo = isVideoModel(selectedModel);
+    const isVideoI2V = isVideo && !selectedModel.includes('text-to-video');
+
     // Prepare upload progress UI early if there are base64 uploads
     const base64Images = uploadedImages.filter(img => img.src.startsWith('data:'));
     const totalUploads = base64Images.length;
@@ -1121,9 +1180,15 @@ async function generateEdit() {
         showStatus(`上传错误: ${error.message || error}`, 'error');
         return;
     }
-    if (!isTextToImage && imageUrlsArray.length === 0) {
+    // Check image requirements based on model type
+    if (!isTextToImage && !isVideo && imageUrlsArray.length === 0) {
         showStatus('请上传图像或提供图像URL进行图像编辑', 'error');
-        // Clean up any progress UI if present
+        const pc = document.getElementById('uploadProgressContainer');
+        if (pc && pc.parentNode) pc.parentNode.removeChild(pc);
+        return;
+    }
+    if (isVideoI2V && imageUrlsArray.length === 0) {
+        showStatus('视频 I2V 模式需要上传首帧图像', 'error');
         const pc = document.getElementById('uploadProgressContainer');
         if (pc && pc.parentNode) pc.parentNode.removeChild(pc);
         return;
@@ -1162,18 +1227,28 @@ async function generateEdit() {
     }
     
     const requestData = {
-        prompt: prompt,
-        image_size: getImageSize(),
-        num_images: parseInt(document.getElementById('numImages').value),
-        enable_safety_checker: false
+        prompt: prompt
     };
-    
-    if (!isTextToImage) {
-        // Note: imageUrlsArray will now contain FAL URLs after upload
-        requestData.image_urls = imageUrlsArray;
-        requestData.max_images = parseInt(document.getElementById('maxImages').value);
+
+    if (isVideo) {
+        // Video generation parameters
+        if (isVideoI2V && imageUrlsArray.length > 0) {
+            requestData.image_url = imageUrlsArray[0]; // Use first image as frame
+        }
+        // Add video-specific params from buildVideoParams()
+        Object.assign(requestData, buildVideoParams());
+    } else {
+        // Image generation parameters
+        requestData.image_size = getImageSize();
+        requestData.num_images = parseInt(document.getElementById('numImages').value);
+        requestData.enable_safety_checker = false;
+
+        if (!isTextToImage) {
+            requestData.image_urls = imageUrlsArray;
+            requestData.max_images = parseInt(document.getElementById('maxImages').value);
+        }
     }
-    
+
     const seed = document.getElementById('seed').value;
     if (seed) {
         requestData.seed = parseInt(seed);
@@ -1378,13 +1453,46 @@ async function callFalAPI(apiKey, requestData, model, signal) {
 
 // Display current results
 function displayCurrentResults(response) {
+    // Handle video results
+    if (response && response.video) {
+        currentResults.innerHTML = '';
+        const videoUrl = response.video.url || '';
+        const videoId = `current-video-${Date.now()}`;
+
+        const item = document.createElement('div');
+        item.className = 'generation-item video-item';
+        item.innerHTML = `
+            <video id="${videoId}" controls style="width: 100%; border-radius: var(--radius-md);">
+                <source src="${videoUrl}" type="video/mp4">
+                您的浏览器不支持视频播放。
+            </video>
+            <div class="generation-footer">
+                <div class="generation-timestamp">刚刚生成</div>
+                <div class="generation-actions-bar">
+                    <button class="action-icon" onclick="downloadVideo('${videoUrl}', 'video'); event.stopPropagation();" title="下载视频">
+                        ⬇️ MP4
+                    </button>
+                </div>
+            </div>
+        `;
+        currentResults.appendChild(item);
+
+        if (response.seed) {
+            currentInfo.innerHTML = `<strong>随机种子:</strong> ${response.seed}`;
+            addLog(`使用的随机种子: ${response.seed}`);
+        }
+        addLog('视频生成完成');
+        return;
+    }
+
+    // Handle image results
     if (!response || !response.images || response.images.length === 0) {
         currentResults.innerHTML = '<div class="empty-state"><p>未生成图像</p></div>';
         return;
     }
-    
+
     currentResults.innerHTML = '';
-    
+
     response.images.forEach((image, index) => {
         const imgSrc = image.url || image.file_data || '';
         const imageId = `current-img-${Date.now()}-${index}`;
@@ -1408,13 +1516,13 @@ function displayCurrentResults(response) {
         `;
         currentResults.appendChild(item);
     });
-    
+
     // Display generation info
     if (response.seed) {
         currentInfo.innerHTML = `<strong>随机种子:</strong> ${response.seed}`;
         addLog(`使用的随机种子: ${response.seed}`);
     }
-    
+
     addLog(`已生成 ${response.images.length} 张图像`);
 }
 
@@ -2675,3 +2783,103 @@ document.addEventListener('keydown', function(e) {
         closeSettingsModal();
     }
 });
+
+// ============================= //
+// Video Generation Support (WAN 2.2 / 2.5) //
+// ============================= //
+
+function updateVideoPriceEstimate() {
+    const modelValue = modelSelect.value;
+    const priceValueEl = document.getElementById('videoPriceValue');
+    if (!priceValueEl) return;
+
+    const isWan25 = modelValue.includes('wan-25-preview');
+    const isWan22 = modelValue.includes('wan/v2.2');
+
+    if (isWan25) {
+        // WAN 2.5 pricing: based on resolution and duration
+        const resolution = document.getElementById('videoResolution')?.value || '1080p';
+        const duration = parseInt(document.getElementById('videoDuration')?.value || '5');
+
+        const resolutionPrices = {
+            '480p': 0.05,
+            '720p': 0.10,
+            '1080p': 0.15
+        };
+
+        const pricePerSecond = resolutionPrices[resolution] || 0.10;
+        const totalPrice = (pricePerSecond * duration).toFixed(2);
+        priceValueEl.textContent = `$${totalPrice} (${resolution} × ${duration}s)`;
+
+    } else if (isWan22) {
+        // WAN 2.2 pricing: based on video seconds calculated from frames/fps
+        // FAL uses 16 FPS for billing calculation
+        const numFrames = parseInt(document.getElementById('videoNumFrames')?.value || 81);
+        const fps = parseInt(document.getElementById('videoFPS')?.value || 16);
+        const resolution = document.getElementById('videoResolution')?.value || '720p';
+
+        const videoSeconds = numFrames / fps;
+        const billingSeconds = numFrames / 16; // FAL uses 16 FPS for billing
+
+        const resolutionRates = {
+            '480p': 0.04,
+            '580p': 0.06,
+            '720p': 0.08
+        };
+
+        const rate = resolutionRates[resolution] || 0.06;
+        const totalPrice = (rate * billingSeconds).toFixed(2);
+        priceValueEl.textContent = `$${totalPrice} (${resolution}, ~${videoSeconds.toFixed(1)}s 实际 / ${billingSeconds.toFixed(1)}s 计费@16FPS)`;
+    }
+}
+
+function isVideoModel(modelValue) {
+    return modelValue.includes('wan-25-preview') || modelValue.includes('wan/v2.2');
+}
+
+function buildVideoParams() {
+    const modelValue = modelSelect.value;
+    const isWan25 = modelValue.includes('wan-25-preview');
+    const isWan22 = modelValue.includes('wan/v2.2');
+    const params = {};
+
+    // Common video params
+    const resolution = document.getElementById('videoResolution')?.value;
+    if (resolution) params.resolution = resolution;
+
+    const negativePrompt = document.getElementById('videoNegativePrompt')?.value;
+    if (negativePrompt) params.negative_prompt = negativePrompt;
+
+    if (isWan25) {
+        // WAN 2.5 specific params
+        const duration = document.getElementById('videoDuration')?.value;
+        if (duration) params.duration = duration;
+
+        const audioUrl = document.getElementById('videoAudioUrl')?.value;
+        if (audioUrl) params.audio_url = audioUrl;
+
+        params.enable_prompt_expansion = true; // WAN 2.5 defaults to true
+    } else if (isWan22) {
+        // WAN 2.2 specific params
+        const fps = document.getElementById('videoFPS')?.value;
+        if (fps) params.frames_per_second = parseInt(fps);
+
+        const numFrames = document.getElementById('videoNumFrames')?.value;
+        if (numFrames) params.num_frames = parseInt(numFrames);
+
+        const safetyChecker = document.getElementById('videoSafetyChecker')?.checked;
+        params.enable_safety_checker = safetyChecker !== undefined ? safetyChecker : true;
+    }
+
+    return params;
+}
+
+function downloadVideo(videoUrl, filename) {
+    const link = document.createElement('a');
+    link.href = videoUrl;
+    link.download = `${filename || 'video'}-${Date.now()}.mp4`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    showToast('视频下载已开始', 'success', 2000);
+}

templates/index.html

@@ -54,9 +54,16 @@
                         <div class="form-group">
                             <label for="drawerModelSelect">模型选择</label>
                             <select id="drawerModelSelect" onchange="syncModelSelection()">
-                                <option value="fal-ai/bytedance/seedream/v4/edit">图像编辑</option>
-                                <option value="fal-ai/qwen-image-edit-plus">图像编辑 (通义千问)</option>
-                                <option value="fal-ai/bytedance/seedream/v4/text-to-image">文本生成图像</option>
+                                <optgroup label="📷 图像生成">
+                                    <option value="fal-ai/bytedance/seedream/v4/edit">图像编辑</option>
+                                    <option value="fal-ai/qwen-image-edit-plus">图像编辑 (通义千问)</option>
+                                    <option value="fal-ai/bytedance/seedream/v4/text-to-image">文本生成图像</option>
+                                </optgroup>
+                                <optgroup label="🎬 视频生成">
+                                    <option value="fal-ai/wan-25-preview/image-to-video">WAN 2.5 - Image to Video</option>
+                                    <option value="fal-ai/wan/v2.2-a14b/image-to-video">WAN 2.2 - Image to Video (A14B)</option>
+                                    <option value="fal-ai/wan/v2.2-a14b/text-to-video">WAN 2.2 - Text to Video (A14B)</option>
+                                </optgroup>
                             </select>
                         </div>
                         <div class="form-group">
@@ -283,6 +290,74 @@
                             <!-- Safety checker is disabled by default and hidden from UI -->
                             <input type="hidden" id="safetyChecker" value="false" />
                         </div>
+
+                        <!-- Video-specific parameters (WAN 2.2 / 2.5) -->
+                        <div class="video-params" id="videoParams" style="display: none;">
+                            <h3 style="margin-top: var(--spacing-4); margin-bottom: var(--spacing-3); color: var(--text-secondary); font-size: 0.9rem;">视频参数</h3>
+
+                            <div class="form-group">
+                                <label for="videoResolution">分辨率</label>
+                                <select id="videoResolution">
+                                    <option value="1080p">1080p (WAN 2.5)</option>
+                                    <option value="720p" selected>720p</option>
+                                    <option value="580p">580p (WAN 2.2)</option>
+                                    <option value="480p">480p</option>
+                                </select>
+                            </div>
+
+                            <div class="form-group video-param-wan25" style="display: none;">
+                                <label for="videoDuration">时长</label>
+                                <select id="videoDuration">
+                                    <option value="5" selected>5秒</option>
+                                    <option value="10">10秒</option>
+                                </select>
+                            </div>
+
+                            <div class="form-group video-param-wan22" style="display: none;">
+                                <label for="videoFPS">帧率 (FPS)</label>
+                                <input type="number" id="videoFPS" min="4" max="60" value="16" inputmode="numeric" step="1" />
+                                <small class="help-text">4-60，默认16</small>
+                            </div>
+
+                            <div class="form-group video-param-wan22" style="display: none;">
+                                <label for="videoNumFrames">帧数</label>
+                                <input type="number" id="videoNumFrames" min="17" max="161" value="81" inputmode="numeric" step="1" />
+                                <small class="help-text">17-161，默认81。视频秒数 = 帧数 / 帧率</small>
+                            </div>
+
+                            <div class="form-group">
+                                <label for="videoNegativePrompt">负向提示词</label>
+                                <textarea id="videoNegativePrompt" rows="2" placeholder="描述不想要的内容..."></textarea>
+                            </div>
+
+                            <div class="form-group video-param-wan25" style="display: none;">
+                                <label for="videoAudioUrl">音频URL (可选)</label>
+                                <input type="text" id="videoAudioUrl" placeholder="https://your.audio/file.mp3" />
+                                <small class="help-text">MP3/WAV，≤15MB，3-30秒；过长会被截断</small>
+                            </div>
+
+                            <div class="form-group video-param-wan22" style="display: none;">
+                                <div class="checkbox-group">
+                                    <input type="checkbox" id="videoSafetyChecker" checked />
+                                    <label for="videoSafetyChecker">启用安全检查</label>
+                                </div>
+                                <small class="help-text">取消勾选可能产生平台不允许的输出</small>
+                            </div>
+
+                            <div class="video-param-wan25" style="display: none; margin-top: var(--spacing-3); padding: var(--spacing-2); background: var(--surface-secondary); border-radius: var(--radius-sm);">
+                                <small style="color: var(--text-tertiary);">
+                                    ℹ️ WAN 2.5 接口不提供安全检查开关，是否筛查由平台策略决定
+                                </small>
+                            </div>
+
+                            <div class="form-group">
+                                <div id="videoPriceEstimate" style="margin-top: var(--spacing-2); padding: var(--spacing-2); background: var(--surface-tertiary); border-radius: var(--radius-sm);">
+                                    <small style="color: var(--text-secondary);">
+                                        💰 预估价格：<span id="videoPriceValue">--</span>
+                                    </small>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
 
@@ -396,9 +471,16 @@
                 <div class="form-group">
                     <label for="modelSelect">模型选择</label>
                     <select id="modelSelect">
-                        <option value="fal-ai/bytedance/seedream/v4/edit">图像编辑</option>
-                        <option value="fal-ai/qwen-image-edit-plus">图像编辑 (通义千问)</option>
-                        <option value="fal-ai/bytedance/seedream/v4/text-to-image">文本生成图像</option>
+                        <optgroup label="📷 图像生成">
+                            <option value="fal-ai/bytedance/seedream/v4/edit">图像编辑</option>
+                            <option value="fal-ai/qwen-image-edit-plus">图像编辑 (通义千问)</option>
+                            <option value="fal-ai/bytedance/seedream/v4/text-to-image">文本生成图像</option>
+                        </optgroup>
+                        <optgroup label="🎬 视频生成">
+                            <option value="fal-ai/wan-25-preview/image-to-video">WAN 2.5 - Image to Video</option>
+                            <option value="fal-ai/wan/v2.2-a14b/image-to-video">WAN 2.2 - Image to Video (A14B)</option>
+                            <option value="fal-ai/wan/v2.2-a14b/text-to-video">WAN 2.2 - Text to Video (A14B)</option>
+                        </optgroup>
                     </select>
                     <small class="help-text">选择用于生成的模型</small>
                 </div>