Upload 28 files

app.py

@@ -0,0 +1,57 @@
+"""
+Veo3 AI Video Generator - 主应用文件
+重构后的模块化版本
+"""
+
+import sys
+import os
+import socket
+import random
+
+# 添加src目录到Python路径
+sys.path.insert(0, os.path.join(os.path.dirname(__file__), 'src'))
+
+from src.ui import Veo3Interface
+from src.utils import start_cleanup_scheduler
+
+
+def find_free_port(start_port=55555, max_attempts=10):
+    """查找可用端口"""
+    for i in range(max_attempts):
+        port = start_port + i
+        try:
+            with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as s:
+                s.bind(('127.0.0.1', port))
+                return port
+        except OSError:
+            continue
+    return None
+
+
+def main():
+    """主函数"""
+    print("🎬 Starting Veo3 AI Video Generator...")
+
+    # 启动定时清理任务
+    start_cleanup_scheduler()
+    print("✅ Cleanup scheduler started")
+    
+    # 创建界面
+    interface = Veo3Interface()
+    interface.create_interface()
+    print("✅ Interface created")
+    
+    # 查找可用端口
+    free_port = find_free_port()
+    if free_port is None:
+        return
+    # 启动应用
+    print("🚀 Launching application...")
+    try:
+        interface.launch(share=False, server_name="127.0.0.1", server_port=free_port)
+    except Exception as e:
+        print(f"❌ 启动失败: {e}")
+
+
+if __name__ == "__main__":
+    main()

readme.md

@@ -0,0 +1,62 @@
+---
+title: Veo3 AI Video Generator
+emoji: 🎬
+colorFrom: blue
+colorTo: purple
+sdk: gradio
+sdk_version: 5.44.0
+app_file: app.py
+pinned: false
+license: apache-2.0
+short_description: AI-powered video generation with Google's Veo3 model
+tags:
+- video-generation
+- ai-video
+- text-to-video
+- image-to-video
+- gradio
+- computer-vision
+---
+
+# 🎬 Veo3 AI Video Generator
+
+**AI-Powered Video Generation & Creation**
+
+Generate high-quality videos with cutting-edge AI technology using Google's Veo3 model. Create videos from text prompts or transform images into dynamic videos with various aspect ratios and intelligent fallback options.
+
+## ✨ Features
+
+- 🎥 **Text-to-Video**: Generate videos from text descriptions
+- 🖼️ **Image-to-Video**: Transform images into dynamic videos
+- 📐 **Multiple Aspect Ratios**: Support for 16:9 and 9:16 formats
+- 🔄 **Intelligent Fallback**: Enhanced success rates with fallback mechanism
+- 🚀 **High Quality**: Professional-grade video generation
+- 🌐 **Easy to Use**: Simple web interface with real-time progress
+- 📱 **Mobile Friendly**: Works on all devices
+
+## 🚀 How to Use
+
+1. **Get API Key**: Visit [KIE.AI](https://kie.ai/veo3) to get your Veo3 API key
+2. **Enter Prompt**: Describe the video you want to generate
+3. **Upload Image (Optional)**: Add 1 reference image for image-to-video
+4. **Configure Settings**: Choose aspect ratio, watermark, and other options
+5. **Generate**: Click start and wait for AI video creation!
+
+## 🎯 Example Prompts
+
+- "A dog playing in a park with beautiful sunset lighting"
+- "A cat walking through a magical forest with glowing mushrooms"
+- "Ocean waves crashing against rocks during a storm"
+- "A futuristic city with flying cars and neon lights"
+- "A peaceful mountain landscape with snow falling gently"
+
+## ⚙️ Advanced Features
+
+- **Aspect Ratio Control**: Choose between 16:9 (landscape) and 9:16 (portrait)
+- **Watermark Support**: Add custom watermarks to your videos
+- **Seed Control**: Use specific seeds for reproducible results
+- **Fallback Mechanism**: Automatic retry with alternative backend for better success rates
+
+---
+
+*Powered by Google's Veo3 model via KIE.AI*

requirements.txt

@@ -0,0 +1,5 @@
+gradio
+replicate
+huggingface_hub
+pillow
+requests

src/__init__.py

@@ -0,0 +1,11 @@
+"""
+Veo3 AI Video Generator - 主模块
+"""
+
+from .config import *
+from .api import *
+from .ui import *
+from .utils import *
+
+__version__ = "1.0.0"
+__author__ = "Veo3 AI Video Generator Team"

src/api/__init__.py

@@ -0,0 +1,11 @@
+"""
+API模块
+"""
+
+from .veo3_client import Veo3Client
+from .video_processor import VideoProcessor
+
+__all__ = [
+    'Veo3Client',
+    'VideoProcessor'
+]

src/api/veo3_client.py

@@ -0,0 +1,181 @@
+"""
+Veo3 API客户端
+"""
+
+import json
+import time
+import os
+import uuid
+import base64
+import requests
+from typing import List, Tuple, Optional
+
+from ..config import API_CONFIG, MIME_TYPES
+
+
+class Veo3Client:
+    """Veo3 API客户端类"""
+    
+    def __init__(self, api_key: str):
+        self.api_key = api_key
+        self.headers = {
+            "Authorization": f"Bearer {api_key}",
+            "Content-Type": "application/json"
+        }
+    
+    def upload_file(self, file_path: str) -> Tuple[bool, str]:
+        """
+        上传文件到 KIE AI 的文件存储服务（使用Base64上传）
+        返回文件的公开访问URL
+        """
+        url = API_CONFIG["FILE_UPLOAD_URL"]
+        headers = self.headers.copy()
+
+        # 获取文件名和扩展名
+        file_name = os.path.basename(file_path)
+        file_ext = os.path.splitext(file_name)[1].lower()
+        if file_ext is None or file_ext == "":
+            file_ext = ".jpg"
+        file_name = uuid.uuid4().hex + file_ext
+
+        # 根据文件扩展名确定MIME类型
+        mime_type = MIME_TYPES.get(file_ext, 'image/jpeg')
+
+        try:
+            print("hellow")
+            with open(file_path, 'rb') as file_handle:
+                # 读取文件并转换为Base64
+                file_data = file_handle.read()
+                base64_data = base64.b64encode(file_data).decode('utf-8')
+                
+                # 构建data URL格式
+                data_url = f"data:{mime_type};base64,{base64_data}"
+                
+                # 准备请求数据
+                payload = {
+                    "base64Data": data_url,
+                    "uploadPath": "images/veo3",
+                    "fileName": file_name
+                }
+
+                response = requests.post(
+                    url, 
+                    headers=headers, 
+                    json=payload,
+                    timeout=API_CONFIG["TIMEOUT"]
+                )
+            print(response.status_code)
+            if response.status_code == 200:
+                resp_json = response.json()
+                print(resp_json)
+                if resp_json.get("success") and resp_json.get("data"):
+                    # 返回下载URL
+                    return True, resp_json["data"]["downloadUrl"]
+                else:
+                    return False, resp_json.get("msg", "Upload failed")
+            else:
+                return False, f"Upload error, please try again later"
+        except Exception as e:
+            return False, f"Upload error: {str(e)}"
+
+    def create_task(
+        self, 
+        prompt: str, 
+        image_urls: List[str] = None,
+        aspect_ratio: str = "16:9", 
+        watermark: str = "", 
+        seeds: Optional[int] = None, 
+        enable_fallback: bool = False
+    ) -> Tuple[int, str]:
+        """
+        创建Veo3视频生成任务
+        """
+        headers = {
+            "Content-Type": "application/json",
+            "Authorization": f"Bearer {self.api_key}"
+        }
+        url = API_CONFIG["VEO3_GENERATE_URL"]
+        
+        # 构建Veo3 API请求参数
+        payload = {
+            "prompt": prompt,
+            "model": "veo3",
+            "aspectRatio": aspect_ratio,
+            "enableFallback": enable_fallback
+        }
+        
+        # 添加可选参数
+        if image_urls:
+            payload["imageUrls"] = image_urls
+        if watermark:
+            payload["watermark"] = watermark
+        if seeds is not None and seeds > 0:
+            payload["seeds"] = seeds
+        print(json.dumps(payload), headers)
+        try:
+            response = requests.post(
+                url, 
+                headers=headers, 
+                data=json.dumps(payload), 
+                timeout=30
+            )
+            if response.status_code == 200:
+                resp_json = response.json()
+                print(resp_json)
+                if resp_json.get("code") == 200:
+                    return 200, resp_json["data"]["taskId"]
+                else:
+                    return 500, resp_json.get("msg", "API request failed")
+            else:
+                return response.status_code, f"HTTP {response.status_code}: {response.text}"
+        except Exception as e:
+            return 500, f"Request failed: {str(e)}"
+
+    def get_task_result(self, task_id: str) -> Tuple[int, str]:
+        """
+        获取任务结果
+        """
+        start_time = time.time()
+        url = API_CONFIG["VEO3_DETAILS_URL"]
+        params = {"taskId": task_id}
+        headers = {"Authorization": f"Bearer {self.api_key}"}
+        
+        while time.time() - start_time < API_CONFIG["TASK_TIMEOUT"]:
+            try:
+                response = requests.get(
+                    url, 
+                    headers=headers, 
+                    params=params, 
+                    timeout=API_CONFIG["TIMEOUT"]
+                )
+                if response.status_code == 200:
+                    resp_json = response.json()
+                    print(resp_json)
+                    if resp_json.get("code") == 200:
+                        data = resp_json.get('data', {})
+                        success_flag = data.get('successFlag')
+                        
+                        if success_flag == 1:  # 成功
+                            # 获取视频URL
+                            response_data = data.get('response', {})
+                            result_urls = response_data.get('resultUrls', [])
+                            if result_urls:
+                                video_url = result_urls[0]  # 取第一个视频URL
+                                return 200, video_url
+                            else:
+                                return 500, "Video URL not found in response"
+                        elif success_flag == 2 or success_flag == 3:  # 失败
+                            error_msg = data.get('errorMessage', 'Task failed')
+                            return 500, error_msg
+                        else:  # success_flag == 0 或 None，任务仍在处理中
+                            time.sleep(API_CONFIG["POLL_INTERVAL"])
+                            continue
+                    else:
+                        return 500, resp_json.get("msg", "API request failed")
+                else:
+                    return response.status_code, f"HTTP {response.status_code}: {response.text}"
+            except Exception as e:
+                pass
+            time.sleep(API_CONFIG["POLL_INTERVAL"])
+        
+        return 500, "Task timeout, please try again later"

src/api/video_processor.py

@@ -0,0 +1,125 @@
+"""
+视频处理模块
+"""
+
+import gradio as gr
+from typing import List, Tuple, Optional
+
+from .veo3_client import Veo3Client
+from ..utils.file_utils import cleanup_temp_file
+
+
+class VideoProcessor:
+    """视频处理器类"""
+    
+    def __init__(self):
+        self.client = None
+    
+    def set_api_key(self, api_key: str):
+        """设置API密钥"""
+        self.client = Veo3Client(api_key)
+    
+    def process_veo3_video(
+        self, 
+        prompt: str, 
+        uploaded_files: List[str], 
+        api_key: str, 
+        aspect_ratio: str = "16:9", 
+        watermark: str = "", 
+        seeds: Optional[int] = None, 
+        enable_fallback: bool = False, 
+        progress: gr.Progress = None
+    ) -> Tuple[Optional[str], str]:
+        """
+        处理Veo3视频生成的主函数
+        """
+        # 验证输入
+        if not api_key or not api_key.strip():
+            return None, "❌ Please enter API Key"
+
+        if not prompt or not prompt.strip():
+            return None, "❌ Please enter a prompt"
+
+        # 设置客户端
+        self.set_api_key(api_key.strip())
+
+        # 图片是可选的，用于image-to-video
+        image_urls = []
+        file_paths = []
+        
+        print(f"DEBUG: uploaded_files = {uploaded_files}, type = {type(uploaded_files)}")
+        
+        if uploaded_files:
+            # 确保是列表格式
+            file_paths = uploaded_files if isinstance(uploaded_files, list) else [uploaded_files]
+            # 验证图片数量
+            if len(file_paths) > 1:
+                return None, "❌ Maximum 1 image allowed for video generation"
+
+        try:
+            if progress:
+                progress(0.1, desc="📤 Processing input...")
+
+            # 如果有图片，上传到 KIE AI 并获取公开URL
+            if file_paths:
+                for i, file_path in enumerate(file_paths):
+                    if progress:
+                        progress(0.1 + (0.2 * i / len(file_paths)), desc=f"📤 Uploading image {i + 1}/{len(file_paths)}...")
+
+                    success, result = self.client.upload_file(file_path)
+                    if success:
+                        image_urls.append(result)
+                        # 上传成功后删除本地临时文件
+                        cleanup_temp_file(file_path)
+                    else:
+                        return None, f"❌ Failed to upload image {i + 1}: {result}"
+
+            if progress:
+                progress(0.3, desc="🚀 Creating video generation task...")
+
+            # 创建Veo3任务
+            status_code, result = self.client.create_task(
+                prompt.strip(), 
+                image_urls, 
+                aspect_ratio=aspect_ratio,
+                watermark=watermark,
+                seeds=seeds,
+                enable_fallback=enable_fallback
+            )
+
+            if status_code != 200:
+                return None, f"❌ Failed to create task: {result}"
+
+            task_id = result
+            if progress:
+                progress(0.4, desc=f"📋 Task ID: {task_id}")
+
+            if progress:
+                progress(0.5, desc="⏳ Generating video, please wait...")
+
+            # 轮询获取结果
+            status_code, result = self.client.get_task_result(task_id)
+
+            if status_code != 200:
+                return None, f"❌ Video generation failed: {result}"
+
+            if progress:
+                progress(0.9, desc="📥 Processing video...")
+
+            # 处理返回的视频URL
+            if result:
+                if progress:
+                    progress(1.0, desc="✅ Complete!")
+                return result, f"✅ Successfully generated video! Task ID: {task_id}"
+            else:
+                return None, "❌ No video URL received"
+
+        except Exception as e:
+            return None, f"❌ Error occurred during processing: {str(e)}"
+        finally:
+            # 最终清理：删除任何剩余的临时文件
+            try:
+                for file_path in file_paths:
+                    cleanup_temp_file(file_path)
+            except:
+                pass

src/config/__init__.py

@@ -0,0 +1,21 @@
+"""
+配置模块
+"""
+
+from .settings import (
+    API_CONFIG,
+    FILE_CONFIG,
+    UI_CONFIG,
+    EXAMPLE_PROMPTS,
+    ASPECT_RATIOS,
+    MIME_TYPES
+)
+
+__all__ = [
+    'API_CONFIG',
+    'FILE_CONFIG', 
+    'UI_CONFIG',
+    'EXAMPLE_PROMPTS',
+    'ASPECT_RATIOS',
+    'MIME_TYPES'
+]

src/config/settings.py

@@ -0,0 +1,56 @@
+"""
+Veo3 AI Video Generator - 配置文件
+"""
+
+# API配置
+API_CONFIG = {
+    "VEO3_GENERATE_URL": "https://api.kie.ai/api/v1/veo/generate",
+    "VEO3_DETAILS_URL": "https://api.kie.ai/api/v1/veo/record-info",
+    "FILE_UPLOAD_URL": "https://kieai.redpandaai.co/api/file-base64-upload",
+    "TIMEOUT": 60,
+    "TASK_TIMEOUT": 600,  # 10分钟
+    "POLL_INTERVAL": 5,   # 5秒轮询间隔
+}
+
+# 文件配置
+FILE_CONFIG = {
+    "MAX_IMAGE_SIZE": 10 * 1024 * 1024,  # 10MB
+    "ALLOWED_IMAGE_TYPES": ['.jpg', '.jpeg', '.png', '.gif', '.webp'],
+    "MAX_IMAGES": 1,  # Veo3只支持1张图片
+    "TEMP_CLEANUP_INTERVAL": 1800,  # 30分钟清理间隔
+}
+
+# UI配置
+UI_CONFIG = {
+    "APP_TITLE": "🎬 Veo3 AI Video Generator",
+    "APP_SUBTITLE": "Powered by Google's Official Veo3 AI Video Model",
+    "APP_DESCRIPTION": "🎥 Veo3 AI generates high-quality videos from text prompts and images. Support for 16:9 and 9:16 aspect ratios with intelligent fallback.",
+    "DEFAULT_PROMPT": "A dog playing in a park with beautiful sunset lighting",
+    "DEFAULT_ASPECT_RATIO": "16:9",
+    "SERVER_PORT": 7860,
+    "SERVER_HOST": "0.0.0.0",
+}
+
+# 示例提示词
+EXAMPLE_PROMPTS = [
+    "A dog playing in a park with beautiful sunset lighting",
+    "A cat walking through a magical forest with glowing mushrooms",
+    "Ocean waves crashing against rocks during a storm",
+    "A futuristic city with flying cars and neon lights",
+    "A peaceful mountain landscape with snow falling gently",
+]
+
+# 支持的宽高比
+ASPECT_RATIOS = [
+    "16:9",
+    "9:16",
+]
+
+# MIME类型映射
+MIME_TYPES = {
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.png': 'image/png',
+    '.gif': 'image/gif',
+    '.webp': 'image/webp'
+}

src/ui/__init__.py

@@ -0,0 +1,11 @@
+"""
+UI模块
+"""
+
+from .components import UIComponents
+from .interface import Veo3Interface
+
+__all__ = [
+    'UIComponents',
+    'Veo3Interface'
+]

src/ui/components.py

@@ -0,0 +1,183 @@
+"""
+UI组件模块
+"""
+
+import gradio as gr
+from typing import List, Tuple
+
+from ..config import (
+    UI_CONFIG, 
+    EXAMPLE_PROMPTS, 
+    ASPECT_RATIOS
+)
+from ..utils import handle_file_upload, create_image_html
+
+
+class UIComponents:
+    """UI组件类"""
+    
+    def __init__(self):
+        self.delete_buttons = []
+    
+    def create_header(self) -> gr.HTML:
+        """创建页面头部"""
+        return gr.HTML(f"""
+            <h1 class="logo-text">{UI_CONFIG['APP_TITLE']}</h1>
+            <p class="subtitle">{UI_CONFIG['APP_SUBTITLE']}</p>
+            <div class="mode-indicator">
+                {UI_CONFIG['APP_DESCRIPTION']}
+            </div>
+        """)
+    
+    def create_info_box(self) -> gr.HTML:
+        """创建信息提示框"""
+        return gr.HTML("""
+            <div class="info-box">
+                <strong>Usage Instructions:</strong><br>
+                • Get your Veo3 API Key   <a href="https://kie.ai/veo3" target="_blank">👉 here 👈</a><br>
+                • Enter a text prompt to generate video from text, or upload 1 image for image-to-video.<br>
+                • Upload 1 reference image (Max 10MB, formats: JPG, PNG, WebP) for image-to-video<br>
+                • Click Generate and wait ~2–5 minutes for video processing
+            </div>
+        """)
+    
+    def create_input_components(self) -> Tuple[gr.Textbox, gr.Textbox, gr.HTML, gr.File, List[gr.Button], gr.Dropdown, gr.Number, gr.Button]:
+        """创建输入组件"""
+        # API Key输入
+        api_key = gr.Textbox(
+            label="API Key",
+            placeholder="Please enter your KIE AI API Key",
+            type="password",
+            elem_classes="api-key-input"
+        )
+
+        # 提示词输入
+        prompt = gr.Textbox(
+            label="Video Prompt",
+            placeholder="Describe the video you want to generate, e.g.: A dog playing in a park...",
+            lines=3,
+            value=UI_CONFIG["DEFAULT_PROMPT"],
+            elem_classes="prompt-input"
+        )
+        
+        # 图片上传区域 - 放在提示词和宽高比之间
+        with gr.Group(elem_classes="image-upload-container"):
+            gr.Markdown("### 📸 Image Upload (Optional)")
+            gr.Markdown("*Upload 1 image for image-to-video generation, or leave empty for text-to-video*")
+
+            # 自定义图片展示区
+            image_display = gr.HTML(
+                value="<div id='image-display-area'><div class='no-images'>No image uploaded - will generate from text only</div></div>",
+                elem_id="image-display"
+            )
+
+            # 上传按钮
+            file_upload = gr.File(
+                show_label=False,
+                file_count="single",
+                file_types=["image"],
+                type="filepath",
+                height=120,
+            )
+
+            # 删除按钮组
+            with gr.Row(elem_id="delete-buttons-row"):
+                delete_label = gr.Markdown("**Delete Images:**", visible=True, elem_id="delete-label")
+                delete_buttons = []
+                for i in range(1):  # 最多支持1张图片
+                    btn = gr.Button(f"Delete {i + 1}", visible=True, size="sm", elem_id=f"delete-btn-{i}")
+                    delete_buttons.append(btn)
+        
+        # 宽高比选择
+        aspect_ratio = gr.Dropdown(
+            choices=ASPECT_RATIOS,
+            value=UI_CONFIG["DEFAULT_ASPECT_RATIO"],
+            label="Aspect Ratio",
+            info="16:9 for landscape, 9:16 for portrait"
+        )
+        
+        # 种子输入区域 - 使用Row让按钮在输入框右边
+        with gr.Row():
+            seeds = gr.Number(
+                label="Seed (Optional)",
+                value=10001,
+                info="Random seed for reproducible results (10000-99999)",
+                scale=4
+            )
+            random_seed_btn = gr.Button(
+                "🎲",
+                size="sm",
+                scale=1,
+                elem_id="random-seed-btn"
+            )
+        
+        # 添加一个状态来保存上传的文件路径
+        uploaded_file_state = gr.State(None)
+        
+        return api_key, prompt, image_display, file_upload, delete_buttons, aspect_ratio, seeds, random_seed_btn, uploaded_file_state
+
+    def create_output_section(self) -> Tuple[gr.Video, gr.Textbox]:
+        """创建输出区域"""
+        # 输出视频
+        output_video = gr.Video(
+            show_label=False,
+            elem_id="output-video",
+            height=400,
+            container=True
+        )
+
+        # 状态信息
+        status = gr.Textbox(
+            label="Processing Status",
+            interactive=False,
+            lines=2,
+            value="Ready, please enter a prompt to generate video..."
+        )
+        
+        return output_video, status
+    
+    def create_examples(self) -> gr.Examples:
+        """创建示例"""
+        return gr.Examples(
+            examples=[[prompt, None] for prompt in EXAMPLE_PROMPTS],
+            inputs=[],  # 将在主应用中设置
+            label="Video Prompt Examples"
+        )
+    
+    def create_generate_button(self) -> gr.Button:
+        """创建生成按钮"""
+        return gr.Button(
+            "🚀 Start Generation",
+            variant="primary",
+            size="lg"
+        )
+    
+    def setup_file_upload_handlers(self, file_upload, image_display, delete_buttons, uploaded_file_state):
+        """设置文件上传处理器"""
+        def on_file_upload(new_files):
+            if not new_files:
+                return gr.update(value=None), "<div id='image-display-area'><div class='no-images'>No image uploaded - will generate from text only</div></div>", gr.update(visible=False), None
+            
+            # 只处理第一张图片
+            file_path = new_files[0] if isinstance(new_files, list) else new_files
+            
+            # 显示图片预览，实际上传在生成时进行
+            html_content = create_image_html([file_path])
+            return gr.update(value=None), html_content, gr.update(visible=True, value="Delete Image 1"), file_path
+
+        file_upload.upload(
+            fn=on_file_upload,
+            inputs=[file_upload],
+            outputs=[file_upload, image_display, delete_buttons[0], uploaded_file_state]
+        )
+    
+    def setup_delete_handlers(self, delete_buttons, image_display, uploaded_file_state):
+        """设置删除按钮处理器"""
+        def delete_image():
+            return "<div id='image-display-area'><div class='no-images'>No image uploaded - will generate from text only</div></div>", gr.update(visible=False), None
+
+        # 绑定删除按钮事件
+        delete_buttons[0].click(
+            fn=delete_image,
+            outputs=[image_display, delete_buttons[0], uploaded_file_state]
+        )

src/ui/interface.py

@@ -0,0 +1,291 @@
+"""
+UI界面模块
+"""
+
+import gradio as gr
+from typing import List, Tuple, Optional
+
+from .components import UIComponents
+from ..api import VideoProcessor
+from ..config import UI_CONFIG
+
+
+class Veo3Interface:
+    """Veo3界面类"""
+    
+    def __init__(self):
+        self.components = UIComponents()
+        self.video_processor = VideoProcessor()
+        self.demo = None
+    
+    def create_interface(self) -> gr.Blocks:
+        """创建完整的界面"""
+        # 读取CSS样式
+        with open("static/css/styles.css", "r", encoding="utf-8") as f:
+            css = f.read()
+        
+        with gr.Blocks(css=css, theme=gr.themes.Base()) as demo:
+            self.demo = demo
+            
+            # 页面头部
+            with gr.Column(elem_classes="header-container"):
+                self.components.create_header()
+
+            with gr.Column(elem_classes="main-content"):
+                # 信息提示框
+                self.components.create_info_box()
+
+                with gr.Row(equal_height=True):
+                    # 左侧 - 输入区域
+                    with gr.Column(scale=1):
+                        # 输入组件（包含图片上传）
+                        api_key, prompt, image_display, file_upload, delete_buttons, aspect_ratio, seeds, random_seed_btn, uploaded_file_state = self.components.create_input_components()
+                        
+                        # 生成按钮
+                        generate_btn = self.components.create_generate_button()
+
+                    # 右侧 - 输出区域
+                    with gr.Column(scale=1):
+                        # 输出区域
+                        output_video, status = self.components.create_output_section()
+
+                # 示例
+                examples = self.components.create_examples()
+                examples.inputs = [prompt, api_key]
+
+            # 设置事件处理器
+            self._setup_event_handlers(
+                generate_btn, prompt, api_key, aspect_ratio, seeds, random_seed_btn,
+                file_upload, image_display, delete_buttons, output_video, status, uploaded_file_state
+            )
+            
+            # 添加JavaScript代码
+            self._add_javascript()
+        
+        return demo
+    
+    def _setup_event_handlers(
+        self, 
+        generate_btn, 
+        prompt, 
+        api_key, 
+        aspect_ratio, 
+        seeds, 
+        random_seed_btn,
+        file_upload, 
+        image_display, 
+        delete_buttons, 
+        output_video, 
+        status,
+        uploaded_file_state
+    ):
+        """设置事件处理器"""
+        
+        # 文件上传处理器
+        self.components.setup_file_upload_handlers(file_upload, image_display, delete_buttons, uploaded_file_state)
+        
+        # 删除按钮处理器
+        self.components.setup_delete_handlers(delete_buttons, image_display, uploaded_file_state)
+        
+        # 随机种子按钮处理器
+        def generate_random_seed():
+            """生成随机种子"""
+            import random
+            return random.randint(10000, 99999)  # API要求的范围
+        
+        random_seed_btn.click(
+            fn=generate_random_seed,
+            outputs=[seeds]
+        )
+        
+        # 生成按钮事件
+        def prepare_and_generate(prompt, api_key, aspect_ratio, seeds, saved_file_path, progress=gr.Progress()):
+            """生成视频的主函数"""
+            # 处理文件上传参数，如果为None则转换为空列表
+            file_paths = [saved_file_path] if saved_file_path is not None else []
+            return self.video_processor.process_veo3_video(
+                prompt, file_paths, api_key, aspect_ratio, None, seeds, False, progress
+            )
+
+        generate_btn.click(
+            fn=prepare_and_generate,
+            inputs=[prompt, api_key, aspect_ratio, seeds, uploaded_file_state],
+            outputs=[output_video, status]
+        )
+    
+    def _add_javascript(self):
+        """添加JavaScript代码"""
+        self.demo.load(None, None, None, js="""
+        () => {
+            // 创建全局删除函数
+            window.deleteImageByIndex = function(index) {
+                // Gradio的elem_id设置在包装器上，需要找到内部的button
+                let deleteBtn = null;
+
+                // 方法1: 通过ID找到包装器，然后找内部的button
+                const wrapper = document.getElementById(`delete-btn-${index}`);
+                if (wrapper) {
+                    deleteBtn = wrapper.querySelector('button');
+                }
+
+                // 方法2: 如果方法1失败，查找所有按钮并通过文本内容匹配
+                if (!deleteBtn) {
+                    const allButtons = document.querySelectorAll('button');
+                    for (let btn of allButtons) {
+                        if (btn.textContent.includes(`Delete Image ${index + 1}`)) {
+                            deleteBtn = btn;
+                            break;
+                        }
+                    }
+                }
+
+                if (deleteBtn) {
+                    deleteBtn.click();
+                } else {
+                    // 调试信息
+                    document.querySelectorAll('[id^="delete-btn-"]').forEach(elem => {
+                        console.log(elem.id, elem.tagName, elem.querySelector('button'));
+                    });
+                }
+            };
+
+            // 美化文件上传区域
+            function enhanceFileUpload() {
+                const fileInputs = document.querySelectorAll('.gr-file');
+                fileInputs.forEach(input => {
+                    // 替换中文文本为英文
+                    const textElements = input.querySelectorAll('.wrap > div');
+                    textElements.forEach((element, index) => {
+                        const text = element.textContent.trim();
+                        // 替换各种可能的中文文本
+                        if (text.includes('将文件拖放到此处') || text.includes('拖放文件到此处')) {
+                            element.textContent = 'Drag and drop files here';
+                        } else if (text.includes('点击上传') || text.includes('点击选择文件')) {
+                            element.textContent = 'or click to upload';
+                        } else if (text.includes('- 或 -') || text.includes('或')) {
+                            element.textContent = '- or -';
+                        }
+                    });
+                    
+                    // 如果还有中文文本，直接替换整个内容
+                    const wrap = input.querySelector('.wrap');
+                    if (wrap) {
+                        const allText = wrap.textContent;
+                        if (allText.includes('将文件') || allText.includes('点击上传')) {
+                            wrap.innerHTML = `
+                                <div style="font-size: 0.9rem; font-weight: 500; color: #4a5568; margin: 0.5rem 0;">Drag and drop files here</div>
+                                <div style="font-size: 0.8rem; color: #718096; margin: 0.3rem 0;">- or -</div>
+                                <div style="font-size: 0.8rem; color: #718096; margin: 0.3rem 0;">or click to upload</div>
+                            `;
+                        }
+                    }
+
+                    // 添加拖拽事件监听
+                    input.addEventListener('dragover', function(e) {
+                        e.preventDefault();
+                        this.classList.add('dragover');
+                    });
+
+                    input.addEventListener('dragleave', function(e) {
+                        e.preventDefault();
+                        this.classList.remove('dragover');
+                    });
+
+                    input.addEventListener('drop', function(e) {
+                        e.preventDefault();
+                        this.classList.remove('dragover');
+                    });
+
+                    // 监听文件选择
+                    const fileInput = input.querySelector('input[type="file"]');
+                    if (fileInput) {
+                        fileInput.addEventListener('change', function() {
+                            if (this.files && this.files.length > 0) {
+                                input.classList.add('has-file');
+                            } else {
+                                input.classList.remove('has-file');
+                            }
+                        });
+                    }
+                });
+            }
+
+            // 初始化美化
+            enhanceFileUpload();
+
+            // 使用定时器确保文本被替换
+            const textReplacer = setInterval(function() {
+                const fileInputs = document.querySelectorAll('.gr-file');
+                let hasChineseText = false;
+                
+                fileInputs.forEach(input => {
+                    const wrap = input.querySelector('.wrap');
+                    if (wrap) {
+                        const allText = wrap.textContent;
+                        if (allText.includes('将文件') || allText.includes('点击上传') || allText.includes('拖放')) {
+                            hasChineseText = true;
+                            wrap.innerHTML = `
+                                <div style="font-size: 0.9rem; font-weight: 500; color: #4a5568; margin: 0.5rem 0;">Drag and drop files here</div>
+                                <div style="font-size: 0.8rem; color: #718096; margin: 0.3rem 0;">- or -</div>
+                                <div style="font-size: 0.8rem; color: #718096; margin: 0.3rem 0;">or click to upload</div>
+                            `;
+                        }
+                    }
+                });
+                
+                // 如果没有中文文本了，停止定时器
+                if (!hasChineseText) {
+                    clearInterval(textReplacer);
+                }
+            }, 100);
+
+            // 监听DOM变化，处理动态添加的元素
+            const observer = new MutationObserver(function(mutations) {
+                mutations.forEach(function(mutation) {
+                    if (mutation.type === 'childList') {
+                        mutation.addedNodes.forEach(function(node) {
+                            if (node.nodeType === 1 && node.classList && node.classList.contains('gr-file')) {
+                                enhanceFileUpload();
+                            }
+                        });
+                    }
+                });
+            });
+
+            observer.observe(document.body, {
+                childList: true,
+                subtree: true
+            });
+        }
+        """)
+    
+    def launch(self, share: bool = False, server_name: str = None, server_port: int = None):
+        """启动应用"""
+        if server_name is None:
+            server_name = UI_CONFIG["SERVER_HOST"]
+        if server_port is None:
+            server_port = UI_CONFIG["SERVER_PORT"]
+            
+        try:
+            self.demo.launch(
+                share=share,
+                server_name=server_name,
+                server_port=server_port,
+                show_error=True,
+                quiet=False
+            )
+        except Exception as e:
+            print(f"❌ Launch failed: {e}")
+            print("🔄 Trying to restart with default configuration...")
+            try:
+                self.demo.launch(
+                    share=False,
+                    server_name="127.0.0.1",
+                    server_port=7861,
+                    show_error=True,
+                    quiet=False
+                )
+            except Exception as e2:
+                print(f"❌ Restart also failed: {e2}")
+                print("💡 Please check if the port is occupied, or try another port")
+                raise

src/utils/__init__.py

@@ -0,0 +1,26 @@
+"""
+工具函数模块
+"""
+
+from .file_utils import (
+    cleanup_temp_files,
+    start_cleanup_scheduler,
+    handle_file_upload,
+    cleanup_temp_file,
+    get_temp_dirs
+)
+
+from .image_utils import (
+    get_image_list,
+    create_image_html
+)
+
+__all__ = [
+    'cleanup_temp_files',
+    'start_cleanup_scheduler', 
+    'handle_file_upload',
+    'cleanup_temp_file',
+    'get_temp_dirs',
+    'get_image_list',
+    'create_image_html'
+]

src/utils/file_utils.py

@@ -0,0 +1,130 @@
+"""
+文件处理工具函数
+"""
+
+import os
+import time
+import threading
+from typing import List, Set
+
+
+# 全局变量记录使用过的临时目录
+used_temp_dirs: Set[str] = set()
+
+
+def cleanup_temp_files(temp_dirs=None):
+    """
+    清理指定的临时文件夹中的旧文件
+    temp_dirs: 要清理的目录列表，如果为None则只清理记录的目录
+    """
+    try:
+        # 如果没有指定目录，只清理我们记录的目录
+        if temp_dirs is None:
+            temp_dirs = []
+
+        current_time = time.time()
+        cleaned_count = 0
+
+        for temp_dir in temp_dirs:
+            try:
+                # 确保目录存在且是目录
+                if not os.path.exists(temp_dir) or not os.path.isdir(temp_dir):
+                    continue
+
+                # 遍历目录中的文件
+                for root, dirs, files in os.walk(temp_dir):
+                    for file_name in files:
+                        file_path = os.path.join(root, file_name)
+                        try:
+                            # 检查文件修改时间
+                            file_mtime = os.path.getmtime(file_path)
+                            # 如果文件超过30分钟未修改，则删除
+                            if current_time - file_mtime > 1800:  # 1800秒 = 30分钟
+                                # 检查是否是图片文件或临时文件
+                                if any(file_path.lower().endswith(ext) for ext in
+                                       ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.tmp']):
+                                    os.remove(file_path)
+                                    cleaned_count += 1
+                                    print(f"Cleaned old temp file: {file_path}")
+                        except Exception as e:
+                            print(f"Error cleaning {file_path}: {e}")
+
+                    # 清理空目录
+                    for dir_name in dirs:
+                        dir_path = os.path.join(root, dir_name)
+                        try:
+                            if os.path.exists(dir_path) and not os.listdir(dir_path):
+                                os.rmdir(dir_path)
+                                print(f"Removed empty temp directory: {dir_path}")
+                        except Exception as e:
+                            print(f"Error removing directory {dir_path}: {e}")
+
+            except Exception as e:
+                print(f"Error processing directory {temp_dir}: {e}")
+
+        if cleaned_count > 0:
+            print(f"Cleanup completed: removed {cleaned_count} temporary files")
+
+    except Exception as e:
+        print(f"Error during temp cleanup: {e}")
+
+
+def start_cleanup_scheduler():
+    """
+    启动定时清理任务
+    """
+    def cleanup_worker():
+        while True:
+            try:
+                # 每30分钟清理一次
+                time.sleep(1800)  # 1800秒 = 30分钟
+                print("Starting scheduled cleanup...")
+                # 只清理我们记录的临时目录
+                cleanup_temp_files(list(used_temp_dirs))
+            except Exception as e:
+                print(f"Error in cleanup scheduler: {e}")
+
+    # 创建守护线程
+    cleanup_thread = threading.Thread(target=cleanup_worker, daemon=True)
+    cleanup_thread.start()
+
+
+def handle_file_upload(current_files, new_files):
+    """简化的文件上传处理 - 支持单张图片"""
+    if not new_files:
+        return [], "No image uploaded - will generate from text only"
+
+    # 确保是列表格式
+    current_list = current_files or []
+    new_list = new_files if isinstance(new_files, list) else [new_files]
+
+    # 合并并限制数量为1张图片
+    all_files = current_list + [f for f in new_list if f]
+    if len(all_files) > 1:
+        all_files = all_files[:1]
+        message = f"Uploaded 1 image (limit reached)"
+    else:
+        message = f"Uploaded {len(all_files)} image"
+
+    return all_files, message
+
+
+def cleanup_temp_file(file_path: str):
+    """
+    清理单个临时文件
+    """
+    try:
+        if os.path.exists(file_path):
+            # 记录文件所在的目录
+            temp_dir = os.path.dirname(file_path)
+            used_temp_dirs.add(temp_dir)
+            os.remove(file_path)
+    except Exception as e:
+        print(f"Error cleaning temp file {file_path}: {e}")
+
+
+def get_temp_dirs() -> Set[str]:
+    """
+    获取所有使用过的临时目录
+    """
+    return used_temp_dirs.copy()

src/utils/image_utils.py

@@ -0,0 +1,68 @@
+"""
+图片处理工具函数
+"""
+
+import base64
+from typing import List
+from PIL import Image
+
+
+def get_image_list(file_paths: List[str]) -> List[Image.Image]:
+    """从文件路径列表获取PIL图片列表用于展示"""
+    if not file_paths:
+        return []
+
+    images = []
+    for path in file_paths:
+        try:
+            img = Image.open(path)
+            images.append(img)
+        except Exception:
+            continue
+    return images
+
+
+def create_image_html(file_paths: List[str]) -> str:
+    """创建图片展示的HTML代码"""
+    if not file_paths:
+        return "<div id='image-display-area'><div class='no-images'>No image uploaded - will generate from text only</div></div>"
+
+    html_items = []
+    for i, path in enumerate(file_paths):
+        try:
+            # 将图片转换为base64编码
+            with open(path, "rb") as img_file:
+                img_data = base64.b64encode(img_file.read()).decode()
+                img_ext = path.split('.')[-1].lower()
+                if img_ext in ['jpg', 'jpeg']:
+                    mime_type = 'image/jpeg'
+                elif img_ext == 'png':
+                    mime_type = 'image/png'
+                elif img_ext == 'gif':
+                    mime_type = 'image/gif'
+                elif img_ext == 'webp':
+                    mime_type = 'image/webp'
+                else:
+                    mime_type = 'image/jpeg'
+
+                img_src = f"data:{mime_type};base64,{img_data}"
+
+                html_items.append(f"""
+                <div class="image-item" data-index="{i}">
+                    <img src="{img_src}" alt="Uploaded image {i + 1}">
+                    <div class="delete-btn" onclick="deleteImageByIndex({i})" data-index="{i}">×</div>
+                </div>
+                """)
+        except:
+            continue
+
+    if not html_items:
+        return "<div id='image-display-area'><div class='no-images'>No image uploaded - will generate from text only</div></div>"
+
+    html_content = f"""
+    <div id='image-display-area'>
+        {''.join(html_items)}
+    </div>
+    """
+
+    return html_content

static/css/styles.css

@@ -0,0 +1,699 @@
+/* Veo3 AI Video Generator - 现代美观CSS样式 */
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
+
+:root {
+    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+    --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+    --warning-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+    --dark-gradient: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
+    --glass-bg: rgba(255, 255, 255, 0.85);
+    --glass-border: rgba(255, 255, 255, 0.3);
+    --shadow-light: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+    --shadow-heavy: 0 20px 60px rgba(102, 126, 234, 0.25);
+    --border-radius: 20px;
+    --border-radius-small: 12px;
+    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+* {
+    box-sizing: border-box;
+}
+
+.gradio-container {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+    background-size: 400% 400%;
+    animation: gradientShift 15s ease infinite;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    min-height: 100vh;
+    padding: 20px;
+    position: relative;
+    overflow-x: hidden;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+}
+
+@keyframes gradientShift {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+.gradio-container::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
+    pointer-events: none;
+    z-index: 0;
+}
+
+.header-container {
+    background: #ffffff;
+    backdrop-filter: none;
+    border: 1px solid #e2e8f0;
+    padding: 3rem 2.5rem;
+    border-radius: var(--border-radius);
+    margin-bottom: 2rem;
+    box-shadow: var(--shadow-light);
+    position: relative;
+    z-index: 1;
+    text-align: center;
+    overflow: hidden;
+}
+
+.header-container::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: var(--primary-gradient);
+    border-radius: var(--border-radius) var(--border-radius) 0 0;
+}
+
+.logo-text {
+    font-size: 3.5rem;
+    font-weight: 900;
+    color: #2d3436;
+    text-align: center;
+    margin: 0;
+    letter-spacing: -2px;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    filter: none;
+}
+
+@keyframes textGlow {
+    from { filter: brightness(1); }
+    to { filter: brightness(1.2); }
+}
+
+.subtitle {
+    color: #4a5568;
+    text-align: center;
+    font-size: 1.1rem;
+    margin-top: 1rem;
+    font-weight: 500;
+    text-shadow: none;
+}
+
+.main-content {
+    background: #ffffff;
+    backdrop-filter: none;
+    border: 1px solid #e2e8f0;
+    border-radius: var(--border-radius);
+    padding: 2.5rem;
+    box-shadow: var(--shadow-light);
+    position: relative;
+    z-index: 1;
+    margin-bottom: 2rem;
+}
+
+.mode-indicator {
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(4px);
+    border-radius: 12px;
+    padding: 0.8rem 1.2rem;
+    margin-top: 1rem;
+    text-align: center;
+    font-weight: 600;
+    color: #2d3436;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.gr-button-primary {
+    background: var(--primary-gradient) !important;
+    border: none !important;
+    color: white !important;
+    font-weight: 700 !important;
+    font-size: 1.1rem !important;
+    padding: 1.2rem 2rem !important;
+    border-radius: var(--border-radius-small) !important;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    width: 100%;
+    margin-top: 1rem !important;
+    position: relative;
+    overflow: hidden;
+    transition: var(--transition);
+    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
+}
+
+.gr-button-primary::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transition: left 0.5s;
+}
+
+.gr-button-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
+}
+
+.gr-button-primary:hover::before {
+    left: 100%;
+}
+
+.gr-button-primary:active {
+    transform: translateY(0);
+}
+
+.gr-input, .gr-textarea {
+    background: #ffffff !important;
+    backdrop-filter: none !important;
+    border: 2px solid #e2e8f0 !important;
+    border-radius: var(--border-radius-small) !important;
+    color: #1a1a1a !important;
+    font-size: 1rem !important;
+    padding: 1rem 1.2rem !important;
+    transition: var(--transition) !important;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
+}
+
+.gr-input:focus, .gr-textarea:focus {
+    border-color: rgba(102, 126, 234, 0.6) !important;
+    outline: none !important;
+    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2) !important;
+    transform: translateY(-1px) !important;
+}
+
+.gr-input:hover, .gr-textarea:hover {
+    border-color: rgba(102, 126, 234, 0.4) !important;
+    transform: translateY(-1px) !important;
+}
+
+.gr-form {
+    background: transparent !important;
+    border: none !important;
+}
+
+.gr-panel {
+    background: #ffffff !important;
+    backdrop-filter: none !important;
+    border: 1px solid #e2e8f0 !important;
+    border-radius: var(--border-radius) !important;
+    padding: 2rem !important;
+    box-shadow: var(--shadow-light) !important;
+    transition: var(--transition) !important;
+}
+
+.gr-panel:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
+}
+
+.gr-box {
+    border-radius: var(--border-radius-small) !important;
+    border-color: rgba(255, 255, 255, 0.2) !important;
+    background: rgba(255, 255, 255, 0.1) !important;
+    backdrop-filter: blur(10px) !important;
+}
+
+label {
+    color: #2d3436 !important;
+    font-weight: 600 !important;
+    font-size: 0.9rem !important;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 0.8rem !important;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.status-text {
+    font-family: 'SF Mono', 'Monaco', monospace;
+    font-size: 0.95rem;
+}
+
+.image-container {
+    border-radius: 14px !important;
+    overflow: hidden;
+    border: 2px solid #e1e8ed !important;
+    background: #fafbfc !important;
+}
+
+footer {
+    display: none !important;
+}
+
+.info-box {
+    background: #ffffff;
+    backdrop-filter: none;
+    border: 1px solid #e2e8f0;
+    border-radius: var(--border-radius-small);
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+    border-left: 4px solid #667eea;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    color: #2d3436;
+    position: relative;
+    overflow: hidden;
+    font-weight: 500;
+    line-height: 1.6;
+}
+
+.info-box strong {
+    color: #1a202c;
+    font-weight: 700;
+    font-size: 1.1rem;
+    text-shadow: none;
+    filter: none;
+}
+
+.info-box a {
+    color: #3182ce;
+    text-decoration: underline;
+    font-weight: 600;
+    text-shadow: none;
+    filter: none;
+}
+
+.info-box a:hover {
+    color: #2c5282;
+    text-decoration: underline;
+}
+
+.info-box::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: var(--primary-gradient);
+}
+
+.warning-box {
+    background: #fff3cd;
+    border-radius: 12px;
+    padding: 1rem;
+    margin-top: 1rem;
+    border-left: 4px solid #ffc107;
+    color: #856404;
+}
+
+/* 简化的图片展示区域 */
+.image-upload-container {
+    background: #ffffff !important;
+    backdrop-filter: none !important;
+    border: 1px solid #e2e8f0 !important;
+    border-radius: var(--border-radius) !important;
+    padding: 2rem !important;
+    box-shadow: var(--shadow-light) !important;
+    transition: var(--transition) !important;
+}
+
+.image-upload-container:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
+}
+
+/* 自定义图片展示区 - 无边框设计 */
+#image-display-area {
+    display: flex !important;
+    flex-wrap: nowrap !important;
+    gap: 12px !important;
+    padding: 15px 5px !important;
+    overflow-x: auto !important;
+    overflow-y: hidden !important;
+    min-height: 120px !important;
+    max-height: 120px !important;
+    align-items: center !important;
+    background: transparent !important;
+}
+
+/* 无图片时的提示 */
+.no-images {
+    color: #6b7280 !important;
+    font-size: 14px !important;
+    text-align: center !important;
+    width: 100% !important;
+    padding: 20px !important;
+    font-weight: 500 !important;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+}
+
+/* 图片项容器 */
+.image-item {
+    position: relative !important;
+    flex-shrink: 0 !important;
+    width: 100px !important;
+    height: 100px !important;
+    border-radius: var(--border-radius-small) !important;
+    overflow: hidden !important;
+    cursor: pointer !important;
+    transition: var(--transition) !important;
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
+    border: 2px solid rgba(255, 255, 255, 0.2) !important;
+}
+
+.image-item:hover {
+    transform: scale(1.05) translateY(-2px) !important;
+    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2) !important;
+    border-color: rgba(102, 126, 234, 0.6) !important;
+}
+
+/* 图片样式 */
+.image-item img {
+    width: 100% !important;
+    height: 100% !important;
+    object-fit: cover !important;
+    border-radius: 8px !important;
+    display: block !important;
+}
+
+/* 删除按钮 */
+.image-item .delete-btn {
+    position: absolute !important;
+    top: -8px !important;
+    right: -8px !important;
+    width: 28px !important;
+    height: 28px !important;
+    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%) !important;
+    color: white !important;
+    border: 2px solid rgba(255, 255, 255, 0.9) !important;
+    border-radius: 50% !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    font-size: 14px !important;
+    font-weight: bold !important;
+    cursor: pointer !important;
+    opacity: 0 !important;
+    transition: var(--transition) !important;
+    z-index: 10 !important;
+    line-height: 1 !important;
+    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3) !important;
+}
+
+.image-item:hover .delete-btn {
+    opacity: 1 !important;
+}
+
+.image-item .delete-btn:hover {
+    background: linear-gradient(135deg, #ff5252 0%, #e53935 100%) !important;
+    transform: scale(1.15) !important;
+    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4) !important;
+}
+
+/* 隐藏独立的删除按钮组 */
+#delete-buttons-row {
+    display: none !important;
+}
+
+/* 滚动条样式 */
+#image-display-area::-webkit-scrollbar {
+    height: 6px !important;
+}
+
+#image-display-area::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.05) !important;
+    border-radius: 3px !important;
+}
+
+#image-display-area::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.2) !important;
+    border-radius: 3px !important;
+}
+
+#image-display-area::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 0, 0, 0.3) !important;
+}
+
+/* 美化的上传文件框 */
+.gr-file {
+    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
+    backdrop-filter: blur(10px) !important;
+    border: 2px dashed #cbd5e0 !important;
+    border-radius: var(--border-radius) !important;
+    padding: 2rem !important;
+    font-size: 1rem !important;
+    min-height: 120px !important;
+    height: auto !important;
+    max-width: 100% !important;
+    transition: var(--transition) !important;
+    color: #4a5568 !important;
+    position: relative !important;
+    overflow: hidden !important;
+    cursor: pointer !important;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
+}
+
+.gr-file::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
+    opacity: 0;
+    transition: var(--transition);
+    z-index: 0;
+}
+
+.gr-file:hover {
+    border-color: #667eea !important;
+    background: linear-gradient(135deg, #ffffff 0%, #f7fafc 100%) !important;
+    transform: translateY(-3px) !important;
+    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.2) !important;
+}
+
+.gr-file:hover::before {
+    opacity: 1;
+}
+
+.gr-file .wrap {
+    min-height: 80px !important;
+    padding: 0 !important;
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    justify-content: center !important;
+    position: relative !important;
+    z-index: 1 !important;
+    text-align: center !important;
+}
+
+.gr-file .wrap > div {
+    font-size: 0.9rem !important;
+    color: #4a5568 !important;
+    line-height: 1.5 !important;
+    font-weight: 500 !important;
+    margin: 0.5rem 0 !important;
+}
+
+/* 上传图标样式 */
+.gr-file .wrap::before {
+    content: '📁';
+    font-size: 2.5rem !important;
+    margin-bottom: 0.5rem !important;
+    opacity: 0.7 !important;
+    transition: var(--transition) !important;
+}
+
+.gr-file:hover .wrap::before {
+    content: '📤';
+    opacity: 1 !important;
+    transform: scale(1.1) !important;
+}
+
+/* 上传区域文字样式 */
+.gr-file .wrap > div:first-of-type {
+    font-size: 1.1rem !important;
+    font-weight: 600 !important;
+    color: #2d3748 !important;
+    margin-bottom: 0.3rem !important;
+}
+
+.gr-file .wrap > div:last-of-type {
+    font-size: 0.85rem !important;
+    color: #718096 !important;
+    font-weight: 400 !important;
+}
+
+/* 文本样式保持原样，通过JavaScript替换内容 */
+
+/* 拖拽状态 */
+.gr-file.dragover {
+    border-color: #667eea !important;
+    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%) !important;
+    transform: scale(1.02) !important;
+}
+
+/* 文件已选择状态 */
+.gr-file.has-file {
+    border-color: #48bb78 !important;
+    background: linear-gradient(135deg, rgba(72, 187, 120, 0.1) 0%, rgba(56, 178, 172, 0.1) 100%) !important;
+}
+
+.gr-file.has-file .wrap::before {
+    content: '✅';
+    color: #48bb78 !important;
+}
+
+/* 输出标题样式 */
+.output-title {
+    margin-bottom: 1rem !important;
+    margin-top: 0 !important;
+}
+
+.output-title h3 {
+    margin: 0 !important;
+    padding: 0 !important;
+    font-size: 1.3rem !important;
+    color: #2d3436 !important;
+    font-weight: 700 !important;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+}
+
+/* 输出视频容器 */
+#output-video {
+    border: 2px solid #e2e8f0 !important;
+    border-radius: var(--border-radius) !important;
+    padding: 1.5rem !important;
+    background: #ffffff !important;
+    backdrop-filter: none !important;
+    height: 400px !important;
+    overflow: hidden !important;
+    position: relative !important;
+    box-shadow: var(--shadow-light) !important;
+    transition: var(--transition) !important;
+}
+
+#output-video:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
+}
+
+#output-video::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: var(--primary-gradient);
+    border-radius: var(--border-radius) var(--border-radius) 0 0;
+}
+
+.gr-group {
+    background: #ffffff !important;
+    backdrop-filter: none !important;
+    border: 1px solid #e2e8f0 !important;
+    border-radius: var(--border-radius) !important;
+    padding: 1.5rem !important;
+    margin-bottom: 1.5rem !important;
+    box-shadow: var(--shadow-light) !important;
+    transition: var(--transition) !important;
+}
+
+.gr-group:hover {
+    transform: translateY(-1px) !important;
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .gradio-container {
+        padding: 10px;
+    }
+    
+    .header-container {
+        padding: 2rem 1.5rem;
+    }
+    
+    .logo-text {
+        font-size: 2.5rem;
+    }
+    
+    .main-content {
+        padding: 1.5rem;
+    }
+    
+    .gr-panel {
+        padding: 1.5rem;
+    }
+    
+    .gr-group {
+        padding: 1rem;
+    }
+}
+
+/* 加载动画 */
+@keyframes pulse {
+    0% { opacity: 1; }
+    50% { opacity: 0.5; }
+    100% { opacity: 1; }
+}
+
+.loading {
+    animation: pulse 2s infinite;
+}
+
+/* 成功状态 */
+.success {
+    background: var(--success-gradient) !important;
+    color: white !important;
+}
+
+/* 错误状态 */
+.error {
+    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%) !important;
+    color: white !important;
+}
+
+/* 自定义滚动条 */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--primary-gradient);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
+}
+
+/* 随机种子按钮样式 - 在Row中显示 */
+#random-seed-btn {
+    background: var(--primary-gradient) !important;
+    border: none !important;
+    color: white !important;
+    font-weight: 600 !important;
+    font-size: 1.2rem !important;
+    padding: 0.5rem !important;
+    border-radius: var(--border-radius-small) !important;
+    transition: var(--transition) !important;
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;
+    min-width: 50px !important;
+    height: 40px !important;
+    margin-top: 20px !important; /* 与输入框对齐 */
+}
+
+#random-seed-btn:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important;
+}
+
+#random-seed-btn:active {
+    transform: translateY(0) !important;
+}