Upload 7 files

backend/main.py

@@ -1,75 +1,119 @@
-import uvicorn
-from fastapi import FastAPI, File, UploadFile, Form, HTTPException
-from fastapi.responses import FileResponse
-from fastapi.staticfiles import StaticFiles
-from typing import Optional
-import services.vertex_service as vertex_service
-import services.video_service as video_service
-import os
-
-app = FastAPI()
-
-@app.post("/api/generate_video")
-async def generate_video(
-    api_key: str = Form(...),
-    prompt: str = Form(...),
-    negative_prompt: Optional[str] = Form(None),
-    model: str = Form(...),
-    aspect_ratio: str = Form(...),
-    duration: int = Form(...),
-    resolution: str = Form(...),
-    sample_count: int = Form(...),
-    seed: Optional[int] = Form(None),
-    person_generation: str = Form(...),
-    generate_audio: bool = Form(...),
-    enhance_prompt: bool = Form(...),
-    image: Optional[UploadFile] = File(None),
-    video: Optional[UploadFile] = File(None),
-):
-    try:
-        project_id = await vertex_service.get_project_id(api_key)
-        
-        params = {
-            "prompt": prompt,
-            "negativePrompt": negative_prompt,
-            "model": model,
-            "aspectRatio": aspect_ratio,
-            "durationSeconds": duration,
-            "resolution": resolution,
-            "sampleCount": sample_count,
-            "seed": seed,
-            "personGeneration": person_generation,
-            "generateAudio": generate_audio,
-            "enhancePrompt": enhance_prompt,
-        }
-
-        if image:
-            params["image"] = await image.read()
-            params["image_mime_type"] = image.content_type
-        
-        if video:
-            params["video"] = await video.read()
-            params["video_mime_type"] = video.content_type
-
-        model_id = params["model"]
-        operation_name = await vertex_service.start_video_generation(project_id, api_key, params)
-        video_data = await vertex_service.poll_video_status(project_id, model_id, operation_name, api_key)
-        
-        video_paths = await video_service.save_videos(video_data)
-        
-        video_urls = [f"/api/video/{os.path.basename(p)}" for p in video_paths]
-        return {"video_urls": video_urls}
-    except Exception as e:
-        raise HTTPException(status_code=400, detail=str(e))
-
-@app.get("/api/video/{video_id}")
-async def get_video(video_id: str):
-    video_path = os.path.join(video_service.VIDEO_DIR, video_id)
-    if os.path.exists(video_path):
-        return FileResponse(video_path)
-    raise HTTPException(status_code=404, detail="Video not found")
-
-app.mount("/", StaticFiles(directory="../frontend", html=True), name="static")
-
-if __name__ == "__main__":
+import uvicorn
+from fastapi import FastAPI, File, UploadFile, Form, HTTPException
+from fastapi.responses import FileResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
+from typing import Optional
+import services.vertex_service as vertex_service
+import services.video_service as video_service
+import services.image_service as image_service # Import the new service
+import os
+import shutil
+from datetime import datetime
+
+app = FastAPI()
+
+@app.post("/api/generate_video")
+async def generate_video(
+    api_key: str = Form(...),
+    prompt: str = Form(...),
+    negative_prompt: Optional[str] = Form(None),
+    model: str = Form(...),
+    aspect_ratio: str = Form(...),
+    duration: int = Form(...),
+    resolution: str = Form(...),
+    sample_count: int = Form(...),
+    seed: Optional[int] = Form(None),
+    person_generation: str = Form(...),
+    generate_audio: bool = Form(...),
+    enhance_prompt: bool = Form(...),
+    image: Optional[UploadFile] = File(None),
+    video: Optional[UploadFile] = File(None),
+    # Add new form fields for image processing
+    image_process_mode: Optional[str] = Form(None),
+    image_fill_color: Optional[str] = Form("#000000"),
+):
+    try:
+        project_id = await vertex_service.get_project_id(api_key)
+        
+        params = {
+            "prompt": prompt,
+            "negativePrompt": negative_prompt,
+            "model": model,
+            "aspectRatio": aspect_ratio,
+            "durationSeconds": duration,
+            "resolution": resolution,
+            "sampleCount": sample_count,
+            "seed": seed,
+            "personGeneration": person_generation,
+            "generateAudio": generate_audio,
+            "enhancePrompt": enhance_prompt,
+        }
+
+        if image:
+            image_bytes = await image.read()
+            # 现在所有宽高比都支持图片处理
+            if image_process_mode and image_process_mode != 'none':
+                # Process the image if a mode is selected
+                processed_image_bytes = image_service.process_image(
+                    image_bytes=image_bytes,
+                    mode=image_process_mode,
+                    fill_color=image_fill_color,
+                    target_aspect_ratio=aspect_ratio  # 传递目标宽高比
+                )
+                params["image"] = processed_image_bytes
+                params["image_mime_type"] = "image/jpeg" # Service always returns JPEG
+            else:
+                # Otherwise, use the original image
+                params["image"] = image_bytes
+                params["image_mime_type"] = image.content_type
+        
+        if video:
+            params["video"] = await video.read()
+            params["video_mime_type"] = video.content_type
+
+        model_id = params["model"]
+        operation_name = await vertex_service.start_video_generation(project_id, api_key, params)
+        video_data = await vertex_service.poll_video_status(project_id, model_id, operation_name, api_key)
+        
+        video_paths = await video_service.save_video(video_data)
+        
+        # Create a list of URLs for the frontend
+        video_urls = [f"/api/video/{os.path.basename(p)}" for p in video_paths]
+        
+        return {"video_urls": video_urls}
+    except Exception as e:
+        raise HTTPException(status_code=400, detail=str(e))
+
+@app.get("/api/video/{video_id}")
+async def get_video(video_id: str):
+    video_path = os.path.join(video_service.VIDEO_DIR, video_id)
+    if os.path.exists(video_path):
+        return FileResponse(video_path)
+    raise HTTPException(status_code=404, detail="Video not found")
+
+@app.post("/api/save_video")
+async def save_video_to_server(video_url: str = Form(...)):
+    try:
+        video_id = os.path.basename(video_url)
+        source_path = os.path.join(video_service.VIDEO_DIR, video_id)
+
+        if not os.path.exists(source_path):
+            raise HTTPException(status_code=404, detail="Video not found")
+
+        output_dir = "output"
+        os.makedirs(output_dir, exist_ok=True)
+
+        timestamp = datetime.now().strftime("%Y-%m-%d_%H-%M-%S")
+        filename = f"{timestamp}.mp4"
+        destination_path = os.path.join(output_dir, filename)
+
+        shutil.copy(source_path, destination_path)
+
+        return JSONResponse(content={"message": "Video saved successfully", "path": destination_path})
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+app.mount("/", StaticFiles(directory="../frontend", html=True), name="static")
+
+if __name__ == "__main__":
     uvicorn.run(app, host="0.0.0.0", port=8000)

backend/services/image_service.py

@@ -0,0 +1,129 @@
+from PIL import Image, ImageOps
+import io
+
+def parse_aspect_ratio(aspect_ratio_str: str) -> float:
+    """
+    Parse aspect ratio string like "16:9" or "9:16" to float.
+    """
+    parts = aspect_ratio_str.split(':')
+    if len(parts) == 2:
+        return float(parts[0]) / float(parts[1])
+    return 16.0 / 9.0  # fallback
+
+def _parse_hex_color(fill_color: str) -> tuple:
+    """
+    Safely parse hex color like "#RRGGBB" to an RGB tuple for PIL.
+    Falls back to black if parsing fails.
+    """
+    if not fill_color:
+        return (0, 0, 0)
+    s = fill_color.strip()
+    try:
+        if s.startswith("#"):
+            s = s[1:]
+        if len(s) == 6:
+            r = int(s[0:2], 16)
+            g = int(s[2:4], 16)
+            b = int(s[4:6], 16)
+            return (r, g, b)
+    except Exception:
+        pass
+    return (0, 0, 0)
+
+def process_image(image_bytes: bytes, mode: str, fill_color: str = "#000000", target_aspect_ratio: str = "16:9") -> bytes:
+    """
+    Processes an image to fit the specified aspect ratio.
+
+    Args:
+        image_bytes: The original image in bytes.
+        mode: The processing mode ('stretch_to_fill', 'compress_to_fit', 'fill').
+        fill_color: The hex color code for the 'fill' mode background.
+        target_aspect_ratio: The target aspect ratio string like "16:9" or "9:16".
+
+    Returns:
+        The processed image in bytes (JPEG format).
+    """
+    if not mode or mode == 'none':
+        return image_bytes
+
+    try:
+        target_ratio = parse_aspect_ratio(target_aspect_ratio)
+        image = Image.open(io.BytesIO(image_bytes))
+        # Normalize EXIF orientation to ensure width/height reflect actual display
+        try:
+            image = ImageOps.exif_transpose(image)
+        except Exception:
+            pass
+        original_width, original_height = image.size
+        original_aspect_ratio = original_width / original_height
+
+        # If aspect ratio is already correct, no processing needed
+        if abs(original_aspect_ratio - target_ratio) < 1e-6:
+            return image_bytes
+
+        if mode == 'stretch_to_fill':
+            if original_aspect_ratio > target_ratio: # Wider than target
+                # Height is relatively too short, stretch it
+                new_width = original_width
+                new_height = int(new_width / target_ratio)
+                processed_image = image.resize((new_width, new_height), Image.Resampling.LANCZOS)
+            else: # Taller than target
+                # Width is relatively too short, stretch it
+                new_height = original_height
+                new_width = int(new_height * target_ratio)
+                processed_image = image.resize((new_width, new_height), Image.Resampling.LANCZOS)
+
+        elif mode == 'compress_to_fit':
+            if original_aspect_ratio > target_ratio: # Wider than target
+                # Width is relatively too long, compress it
+                new_height = original_height
+                new_width = int(new_height * target_ratio)
+                processed_image = image.resize((new_width, new_height), Image.Resampling.LANCZOS)
+            else: # Taller than target
+                # Height is relatively too long, compress it
+                new_width = original_width
+                new_height = int(new_width / target_ratio)
+                processed_image = image.resize((new_width, new_height), Image.Resampling.LANCZOS)
+
+        elif mode == 'fill':
+            # Pad with color to meet target aspect ratio without scaling the source
+            if original_aspect_ratio > target_ratio:
+                # Wider than target -> pad top/bottom
+                new_width = original_width
+                new_height = int(round(new_width / target_ratio))
+                paste_x, paste_y = 0, (new_height - original_height) // 2
+            else:
+                # Taller than target -> pad left/right
+                new_height = original_height
+                new_width = int(round(new_height * target_ratio))
+                paste_x, paste_y = (new_width - original_width) // 2, 0
+
+            # Use parsed RGB to avoid mode issues and ensure consistent color
+            fill_rgb = _parse_hex_color(fill_color or "#000000")
+            background = Image.new('RGB', (new_width, new_height), fill_rgb)
+
+            # Preserve alpha if present so the background color shows through transparent regions
+            if image.mode in ('RGBA', 'LA') or (image.mode == 'P' and 'transparency' in image.info):
+                if image.mode != 'RGBA':
+                    image = image.convert('RGBA')
+                background.paste(image, (paste_x, paste_y), image)
+            else:
+                background.paste(image, (paste_x, paste_y))
+            processed_image = background
+        else:
+             # If mode is unknown, return original image
+            return image_bytes
+
+
+        # Save the processed image to a byte buffer
+        byte_arr = io.BytesIO()
+        # Ensure image is in RGB mode before saving as JPEG
+        if processed_image.mode != 'RGB':
+            processed_image = processed_image.convert('RGB')
+        processed_image.save(byte_arr, format='JPEG')
+        return byte_arr.getvalue()
+
+    except Exception as e:
+        print(f"Error processing image: {e}")
+        # In case of error, return the original image bytes
+        return image_bytes

backend/services/vertex_service.py

@@ -1,107 +1,107 @@
-import aiohttp
-import asyncio
-import base64
-import re
-import logging
-from typing import Dict, Any
-
-logging.basicConfig(level=logging.INFO)
-
-# A simple in-memory cache for project IDs
-project_id_cache = {}
-
-async def get_project_id(api_key: str) -> str:
-    if api_key in project_id_cache:
-        return project_id_cache[api_key]
-
-    url = f"https://aiplatform.googleapis.com/v1/publishers/google/models/gemini-2.6:streamGenerateContent?key={api_key}"
-    headers = {"Content-Type": "application/json"}
-    data = {}
-
-    async with aiohttp.ClientSession() as session:
-        async with session.post(url, headers=headers, json=data) as response:
-            error_data = await response.json()
-            message = error_data[0]["error"]["message"]
-            match = re.search(r"projects/(\d+)/", message)
-            if match:
-                project_id = match.group(1)
-                project_id_cache[api_key] = project_id
-                return project_id
-            else:
-                raise Exception("Could not extract project ID")
-
-async def start_video_generation(project_id: str, api_key: str, params: Dict[str, Any]) -> str:
-    location = "us-central1" # Or make this a parameter
-    model_id = params.pop("model")
-    url = f"https://{location}-aiplatform.googleapis.com/v1/projects/{project_id}/locations/{location}/publishers/google/models/{model_id}:predictLongRunning?key={api_key}"
-    
-    instances = [{"prompt": params.get("prompt")}]
-    if "image" in params and params["image"]:
-        instances[0]["image"] = {
-            "bytesBase64Encoded": base64.b64encode(params["image"]).decode("utf-8"),
-            "mimeType": params["image_mime_type"]
-        }
-    if "video" in params and params["video"]:
-        instances[0]["video"] = {
-            "bytesBase64Encoded": base64.b64encode(params["video"]).decode("utf-8"),
-            "mimeType": params["video_mime_type"]
-        }
-        
-    parameters = {
-        "aspectRatio": params.get("aspectRatio"),
-        "durationSeconds": params.get("durationSeconds"),
-        "resolution": params.get("resolution"),
-        "generateAudio": params.get("generateAudio"),
-        "enhancePrompt": params.get("enhancePrompt"),
-        "negativePrompt": params.get("negativePrompt"),
-        "personGeneration": params.get("personGeneration"),
-        "sampleCount": params.get("sampleCount"),
-        "seed": params.get("seed"),
-        "safetySetting": "block_none"
-    }
-    
-    # Remove None values from parameters
-    parameters = {k: v for k, v in parameters.items() if v is not None}
-
-    payload = {
-        "instances": instances,
-        "parameters": parameters
-    }
-
-    logging.info(f"Sending video generation request to {url} with payload: {payload}")
-    async with aiohttp.ClientSession() as session:
-        async with session.post(url, json=payload) as response:
-            data = await response.json()
-            logging.info(f"Received response: {data}")
-            response.raise_for_status()
-            return data["name"]
-
-async def poll_video_status(project_id: str, model_id: str, operation_name: str, api_key: str) -> Dict[str, Any]:
-    location = "us-central1"
-    url = f"https://{location}-aiplatform.googleapis.com/v1/projects/{project_id}/locations/{location}/publishers/google/models/{model_id}:fetchPredictOperation?key={api_key}"
-    
-    payload = {"operationName": operation_name}
-
-    async with aiohttp.ClientSession() as session:
-        while True:
-            logging.info(f"Polling status from {url} with payload: {payload}")
-            async with session.post(url, json=payload) as response:
-                data = await response.json()
-                logging.info(f"Received polling response: {data}")
-                response.raise_for_status()
-                if data.get("done"):
-                    if "error" in data:
-                        raise Exception(data['error']['message'])
-                    
-                    response_data = data.get("response", {})
-                    
-                    # If videos are present, return them, even if some were filtered.
-                    if "videos" in response_data:
-                        return response_data
-
-                    # If no videos, but filtering reasons exist, then all were blocked.
-                    if "raiMediaFilteredReasons" in response_data:
-                        raise Exception(response_data['raiMediaFilteredReasons'][0])
-
-                    return response_data
+import aiohttp
+import asyncio
+import base64
+import re
+import logging
+from typing import Dict, Any
+
+logging.basicConfig(level=logging.INFO)
+
+# A simple in-memory cache for project IDs
+project_id_cache = {}
+
+async def get_project_id(api_key: str) -> str:
+    if api_key in project_id_cache:
+        return project_id_cache[api_key]
+
+    url = f"https://aiplatform.googleapis.com/v1/publishers/google/models/gemini-2.6:streamGenerateContent?key={api_key}"
+    headers = {"Content-Type": "application/json"}
+    data = {}
+
+    async with aiohttp.ClientSession() as session:
+        async with session.post(url, headers=headers, json=data) as response:
+            error_data = await response.json()
+            message = error_data[0]["error"]["message"]
+            match = re.search(r"projects/(\d+)/", message)
+            if match:
+                project_id = match.group(1)
+                project_id_cache[api_key] = project_id
+                return project_id
+            else:
+                raise Exception("Could not extract project ID")
+
+async def start_video_generation(project_id: str, api_key: str, params: Dict[str, Any]) -> str:
+    location = "us-central1" # Or make this a parameter
+    model_id = params.pop("model")
+    url = f"https://{location}-aiplatform.googleapis.com/v1/projects/{project_id}/locations/{location}/publishers/google/models/{model_id}:predictLongRunning?key={api_key}"
+    
+    instances = [{"prompt": params.get("prompt")}]
+    if "image" in params and params["image"]:
+        instances[0]["image"] = {
+            "bytesBase64Encoded": base64.b64encode(params["image"]).decode("utf-8"),
+            "mimeType": params["image_mime_type"]
+        }
+    if "video" in params and params["video"]:
+        instances[0]["video"] = {
+            "bytesBase64Encoded": base64.b64encode(params["video"]).decode("utf-8"),
+            "mimeType": params["video_mime_type"]
+        }
+        
+    parameters = {
+        "aspectRatio": params.get("aspectRatio"),
+        "durationSeconds": params.get("durationSeconds"),
+        "resolution": params.get("resolution"),
+        "generateAudio": params.get("generateAudio"),
+        "enhancePrompt": params.get("enhancePrompt"),
+        "negativePrompt": params.get("negativePrompt"),
+        "personGeneration": params.get("personGeneration"),
+        "sampleCount": params.get("sampleCount"),
+        "seed": params.get("seed"),
+        "safetySetting": "block_none"
+    }
+    
+    # Remove None values from parameters
+    parameters = {k: v for k, v in parameters.items() if v is not None}
+
+    payload = {
+        "instances": instances,
+        "parameters": parameters
+    }
+
+    logging.info(f"Sending video generation request to {url} with payload: {payload}")
+    async with aiohttp.ClientSession() as session:
+        async with session.post(url, json=payload) as response:
+            data = await response.json()
+            logging.info(f"Received response: {data}")
+            response.raise_for_status()
+            return data["name"]
+
+async def poll_video_status(project_id: str, model_id: str, operation_name: str, api_key: str) -> Dict[str, Any]:
+    location = "us-central1"
+    url = f"https://{location}-aiplatform.googleapis.com/v1/projects/{project_id}/locations/{location}/publishers/google/models/{model_id}:fetchPredictOperation?key={api_key}"
+    
+    payload = {"operationName": operation_name}
+
+    async with aiohttp.ClientSession() as session:
+        while True:
+            logging.info(f"Polling status from {url} with payload: {payload}")
+            async with session.post(url, json=payload) as response:
+                data = await response.json()
+                logging.info(f"Received polling response: {data}")
+                response.raise_for_status()
+                if data.get("done"):
+                    if "error" in data:
+                        raise Exception(data['error']['message'])
+                    
+                    response_data = data.get("response", {})
+                    
+                    # If videos are present, return them, even if some were filtered.
+                    if "videos" in response_data:
+                        return response_data
+
+                    # If no videos, but filtering reasons exist, then all were blocked.
+                    if "raiMediaFilteredReasons" in response_data:
+                        raise Exception(response_data['raiMediaFilteredReasons'][0])
+
+                    return response_data
             await asyncio.sleep(5) # Poll every 5 seconds

backend/services/video_service.py

@@ -1,37 +1,48 @@
-import os
-import uuid
-import base64
-import aiohttp
-from typing import Dict, Any, List
-
-VIDEO_DIR = "/tmp/generated_videos"
-
-async def save_videos(video_data: Dict[str, Any]) -> List[str]:
-    os.makedirs(VIDEO_DIR, exist_ok=True)
-    video_paths = []
-
-    if "videos" not in video_data:
-        raise Exception("No video data found in response")
-
-    for video_item in video_data["videos"]:
-        video_filename = f"{uuid.uuid4()}.mp4"
-        video_path = os.path.join(VIDEO_DIR, video_filename)
-
-        if "gcsUri" in video_item:
-            gcs_uri = video_item["gcsUri"]
-            async with aiohttp.ClientSession() as session:
-                async with session.get(gcs_uri) as response:
-                    response.raise_for_status()
-                    with open(video_path, "wb") as f:
-                        f.write(await response.read())
-        elif "bytesBase64Encoded" in video_item:
-            video_bytes = base64.b64decode(video_item["bytesBase64Encoded"])
-            with open(video_path, "wb") as f:
-                f.write(video_bytes)
-        else:
-            # Skip this video if it has no content, but don't fail the whole request
-            continue
-        
-        video_paths.append(video_path)
-
-    return video_paths
+import os
+import uuid
+import base64
+import aiohttp
+from typing import Dict, Any, List
+
+VIDEO_DIR = "/tmp/generated_videos"
+
+async def save_video(video_data: Dict[str, Any]) -> List[str]:
+    """
+    Saves all videos from a response object and returns a list of their local paths.
+    """
+    os.makedirs(VIDEO_DIR, exist_ok=True)
+    saved_paths = []
+
+    video_list = video_data.get("videos", [])
+    if not video_list:
+        raise Exception("No 'videos' array found in the response data.")
+
+    for video_item in video_list:
+        video_filename = f"{uuid.uuid4()}.mp4"
+        video_path = os.path.join(VIDEO_DIR, video_filename)
+        
+        saved = False
+        try:
+            if "gcsUri" in video_item:
+                gcs_uri = video_item["gcsUri"]
+                async with aiohttp.ClientSession() as session:
+                    async with session.get(gcs_uri) as response:
+                        response.raise_for_status()
+                        with open(video_path, "wb") as f:
+                            f.write(await response.read())
+                        saved_paths.append(video_path)
+                        saved = True
+            elif "bytesBase64Encoded" in video_item:
+                video_bytes = base64.b64decode(video_item["bytesBase64Encoded"])
+                with open(video_path, "wb") as f:
+                    f.write(video_bytes)
+                saved_paths.append(video_path)
+                saved = True
+        except Exception as e:
+            # Log the error but continue trying to process other videos
+            print(f"Warning: Failed to save a video. Error: {e}")
+
+    if not saved_paths:
+        raise Exception("Failed to save any videos from the provided data.")
+
+    return saved_paths

frontend/app.js

@@ -1,70 +1,828 @@
-document.getElementById("video-form").addEventListener("submit", async (event) => {
-    event.preventDefault();
-
-    const form = event.target;
-    const formData = new FormData();
-    
-    formData.append("api_key", form["api-key"].value);
-    formData.append("prompt", form["prompt"].value);
-    formData.append("negative_prompt", form["negative-prompt"].value);
-    formData.append("model", form["model"].value);
-    formData.append("aspect_ratio", form["aspect-ratio"].value);
-    formData.append("duration", form["duration"].value);
-    formData.append("resolution", form["resolution"].value);
-    formData.append("sample_count", form["sample-count"].value);
-    if (form["seed"].value) {
-        formData.append("seed", form["seed"].value);
-    }
-    formData.append("person_generation", form["person-generation"].value);
-    formData.append("generate_audio", form["generate-audio"].checked);
-    formData.append("enhance_prompt", form["enhance-prompt"].checked);
-
-    const imageFile = form["image-prompt"].files[0];
-    if (imageFile) {
-        formData.append("image", imageFile);
-    }
-
-    const videoFile = form["video-prompt"].files[0];
-    if (videoFile) {
-        formData.append("video", videoFile);
-    }
-
-    const loader = document.getElementById("loader");
-    const videoResults = document.getElementById("video-results");
-    const errorContainer = document.getElementById("error-container");
-
-    loader.classList.remove("hidden");
-    videoResults.innerHTML = ""; // Clear previous videos
-    errorContainer.classList.add("hidden");
-
-    try {
-        const response = await fetch("/api/generate_video", {
-            method: "POST",
-            body: formData,
-        });
-
-        if (!response.ok) {
-            const errorData = await response.json();
-            throw new Error(errorData.detail || "An unknown error occurred");
-        }
-
-        const data = await response.json();
-        
-        if (data.video_urls && data.video_urls.length > 0) {
-            data.video_urls.forEach(videoUrl => {
-                const videoElement = document.createElement("video");
-                videoElement.src = videoUrl;
-                videoElement.controls = true;
-                videoResults.appendChild(videoElement);
-            });
-        } else {
-            throw new Error("No videos were generated.");
-        }
-
-    } catch (error) {
-        errorContainer.textContent = error.message;
-        errorContainer.classList.remove("hidden");
-    } finally {
-        loader.classList.add("hidden");
-    }
+document.addEventListener("DOMContentLoaded", () => {
+    // --- DOM Element Selection ---
+    const generateBtn = document.getElementById("generate-btn");
+    const saveVideoBtn = document.getElementById("save-video-btn");
+    const loader = document.getElementById("loader");
+    const errorContainer = document.getElementById("error-container");
+    const placeholder = document.querySelector(".video-container .placeholder");
+
+    // Form Inputs
+    const apiKeyInput = document.getElementById("api-key");
+    const promptInput = document.getElementById("prompt");
+    const negativePromptInput = document.getElementById("negative-prompt");
+    const modelSelect = document.getElementById("model");
+    const aspectRatioSelect = document.getElementById("aspect-ratio");
+    const resolutionSelect = document.getElementById("resolution");
+    const personGenSelect = document.getElementById("person-generation");
+    const seedInput = document.getElementById("seed");
+    const sampleCountInput = document.getElementById("sample-count");
+    const durationInput = document.getElementById("duration");
+    const generateAudioSwitch = document.getElementById("generate-audio");
+    const threadCountInput = document.getElementById("thread-count");
+    const enhancePromptSwitch = document.getElementById("enhance-prompt");
+    const imagePromptInput = document.getElementById("image-prompt");
+    const videoPromptInput = document.getElementById("video-prompt");
+    const imageProcessModeSelect = document.getElementById("image-process-mode");
+    const imageFillColorGroup = document.getElementById("image-fill-color-group");
+    const imageFillColorPicker = document.getElementById("image-fill-color-picker");
+    const imageFillColorInput = document.getElementById("image-fill-color");
+    
+    // Carousel Elements
+    const videoCarousel = document.getElementById("video-carousel");
+    const prevBtn = document.getElementById("prev-btn");
+    const nextBtn = document.getElementById("next-btn");
+    const carouselDots = document.getElementById("carousel-dots");
+
+    // Prompt Saving Elements
+    const savePromptBtn = document.getElementById("save-prompt-btn");
+    const savedPromptsToggle = document.getElementById("saved-prompts-toggle");
+    const savedPromptsList = document.getElementById("saved-prompts-list");
+
+   // Key Saving Elements
+   const saveKeyBtn = document.getElementById("save-key-btn");
+   const savedKeysToggle = document.getElementById("saved-keys-toggle");
+   const savedKeysList = document.getElementById("saved-keys-list");
+
+    // --- State ---
+    let currentIndex = 0;
+    let videoItems = [];
+    const SETTINGS_KEY = 'veoGeneratorSettings';
+    let currentPasteTarget = null; // 'image' or 'video'
+    let savedVideos = []; // To track URLs of saved videos
+    const SAVED_PROMPTS_KEY = 'veoGeneratorSavedPrompts';
+    const SAVED_KEYS_KEY = 'veoGeneratorSavedKeys';
+
+   const PRESET_KEYS = [
+   ];
+ 
+    // --- Functions ---
+
+    // --- Saved Prompts Logic ---
+    function updateSaveButtonState() {
+        const currentPrompt = promptInput.value.trim();
+        const prompts = getSavedPrompts();
+        if (currentPrompt && prompts.includes(currentPrompt)) {
+            savePromptBtn.innerHTML = feather.icons['check-circle'].toSvg();
+            savePromptBtn.title = "提示词已保存";
+            savePromptBtn.disabled = true;
+        } else {
+            savePromptBtn.innerHTML = feather.icons['plus-circle'].toSvg();
+            savePromptBtn.title = "保存当前提示词";
+            savePromptBtn.disabled = false;
+        }
+    }
+
+    function getSavedPrompts() {
+        return JSON.parse(localStorage.getItem(SAVED_PROMPTS_KEY)) || [];
+    }
+
+    function savePrompts(prompts) {
+        localStorage.setItem(SAVED_PROMPTS_KEY, JSON.stringify(prompts));
+    }
+
+    function renderSavedPrompts() {
+        const prompts = getSavedPrompts();
+        savedPromptsList.innerHTML = ''; // Clear the list first
+
+        if (prompts.length === 0) {
+            savedPromptsList.innerHTML = `<div class="saved-prompts-list-empty">没有已保存的提示词</div>`;
+            return;
+        }
+
+        prompts.forEach((promptText, index) => {
+            const item = document.createElement('div');
+            item.className = 'saved-prompt-item';
+            item.dataset.index = index;
+
+            const text = document.createElement('span');
+            text.className = 'saved-prompt-text';
+            text.textContent = promptText;
+            text.title = promptText; // Show full prompt on hover
+            text.addEventListener('click', () => {
+                promptInput.value = promptText;
+                saveSettings(); // Also save to main settings
+                savedPromptsList.classList.add('hidden');
+                updateSaveButtonState();
+            });
+
+            const deleteBtn = document.createElement('button');
+            deleteBtn.className = 'delete-prompt-btn';
+            deleteBtn.innerHTML = feather.icons['trash-2'].toSvg({ width: 14, height: 14 });
+            deleteBtn.title = '删除此提示词';
+            deleteBtn.addEventListener('click', (e) => {
+                e.stopPropagation(); // Prevent item click event
+                deletePrompt(index);
+            });
+
+            item.appendChild(text);
+            item.appendChild(deleteBtn);
+            savedPromptsList.appendChild(item);
+        });
+    }
+
+    function addNewPrompt() {
+        const currentPrompt = promptInput.value.trim();
+        if (!currentPrompt) {
+            // Silently return if prompt is empty
+            return;
+        }
+
+        let prompts = getSavedPrompts();
+        if (prompts.includes(currentPrompt)) {
+            // Silently return if prompt already exists
+            return;
+        }
+
+        prompts.unshift(currentPrompt); // Add to the beginning
+        savePrompts(prompts);
+        renderSavedPrompts();
+        updateSaveButtonState();
+    }
+
+    function deletePrompt(indexToDelete) {
+        let prompts = getSavedPrompts();
+        prompts.splice(indexToDelete, 1);
+        savePrompts(prompts);
+        renderSavedPrompts();
+        updateSaveButtonState();
+    }
+
+    savePromptBtn.addEventListener('click', addNewPrompt);
+
+    savedPromptsToggle.addEventListener('click', () => {
+        const isHidden = savedPromptsList.classList.toggle('hidden');
+        if (!isHidden) {
+            renderSavedPrompts(); // Re-render when opening
+        }
+    });
+
+    // Hide dropdown if clicked outside
+    document.addEventListener('click', (event) => {
+        if (!savedPromptsToggle.contains(event.target) && !savedPromptsList.contains(event.target)) {
+            savedPromptsList.classList.add('hidden');
+        }
+    });
+
+   // --- Saved Keys Logic ---
+   function getSavedKeys() {
+       return JSON.parse(localStorage.getItem(SAVED_KEYS_KEY)) || [];
+   }
+
+   function saveKeys(keys) {
+       localStorage.setItem(SAVED_KEYS_KEY, JSON.stringify(keys));
+   }
+
+   function getAllKeys() {
+       const customKeys = getSavedKeys();
+       // Add a 'preset' flag to distinguish them
+       const presetKeys = PRESET_KEYS.map(k => ({ ...k, preset: true }));
+       return [...presetKeys, ...customKeys];
+   }
+
+   function renderSavedKeys() {
+       const keys = getAllKeys();
+       savedKeysList.innerHTML = ''; // Clear the list
+
+       if (keys.length === 0) {
+           savedKeysList.innerHTML = `<div class="saved-keys-list-empty">没有已保存的 Key</div>`;
+           return;
+       }
+
+       keys.forEach((keyData, index) => {
+           const item = document.createElement('div');
+           item.className = 'saved-key-item';
+           if (keyData.preset) {
+               item.classList.add('preset');
+           }
+
+           const alias = document.createElement('span');
+           alias.className = 'saved-key-alias';
+           alias.textContent = keyData.alias;
+           alias.title = keyData.alias;
+
+           const value = document.createElement('span');
+           value.className = 'saved-key-value';
+           // Show partial key for preview
+           value.textContent = `...${keyData.value.slice(-6)}`;
+           value.title = keyData.value;
+           
+           const textContainer = document.createElement('div');
+           textContainer.style.display = 'flex';
+           textContainer.style.alignItems = 'center';
+           textContainer.style.overflow = 'hidden';
+           textContainer.style.flexGrow = '1';
+           textContainer.appendChild(alias);
+           textContainer.appendChild(value);
+
+           item.addEventListener('click', () => {
+               apiKeyInput.value = keyData.value;
+               saveSettings();
+               savedKeysList.classList.add('hidden');
+               updateSaveKeyButtonState();
+           });
+
+           const deleteBtn = document.createElement('button');
+           deleteBtn.className = 'delete-key-btn';
+           deleteBtn.innerHTML = feather.icons['trash-2'].toSvg({ width: 14, height: 14 });
+           deleteBtn.title = '删除此 Key';
+           deleteBtn.addEventListener('click', (e) => {
+               e.stopPropagation();
+               // We need to find the index in the *custom* keys array
+               const customKeys = getSavedKeys();
+               const customIndexToDelete = customKeys.findIndex(k => k.value === keyData.value);
+               if (customIndexToDelete > -1) {
+                   deleteKey(customIndexToDelete);
+               }
+           });
+
+           item.appendChild(textContainer);
+           item.appendChild(deleteBtn);
+           savedKeysList.appendChild(item);
+       });
+   }
+
+   function addNewKey() {
+       const currentKey = apiKeyInput.value.trim();
+       if (!currentKey) return;
+
+       const allKeys = getAllKeys();
+       if (allKeys.some(k => k.value === currentKey)) {
+           return; // Key already exists
+       }
+
+       const alias = prompt("为这个新的 Key 输入一个别名:", "");
+       if (alias === null || alias.trim() === "") {
+           return; // User cancelled or entered empty alias
+       }
+
+       let customKeys = getSavedKeys();
+       customKeys.unshift({ alias: alias.trim(), value: currentKey });
+       saveKeys(customKeys);
+       renderSavedKeys();
+       updateSaveKeyButtonState();
+   }
+
+   function deleteKey(indexToDelete) {
+       let customKeys = getSavedKeys();
+       customKeys.splice(indexToDelete, 1);
+       saveKeys(customKeys);
+       renderSavedKeys();
+       updateSaveKeyButtonState();
+   }
+   
+   function updateSaveKeyButtonState() {
+       const currentKey = apiKeyInput.value.trim();
+       const allKeys = getAllKeys();
+       if (currentKey && allKeys.some(k => k.value === currentKey)) {
+           saveKeyBtn.innerHTML = feather.icons['check-circle'].toSvg();
+           saveKeyBtn.title = "Key 已保存";
+           saveKeyBtn.disabled = true;
+       } else {
+           saveKeyBtn.innerHTML = feather.icons['plus-circle'].toSvg();
+           saveKeyBtn.title = "保存当前 Key";
+           saveKeyBtn.disabled = false;
+       }
+   }
+
+   saveKeyBtn.addEventListener('click', addNewKey);
+
+   savedKeysToggle.addEventListener('click', () => {
+       const isHidden = savedKeysList.classList.toggle('hidden');
+       if (!isHidden) {
+           renderSavedKeys();
+       }
+   });
+
+   document.addEventListener('click', (event) => {
+       if (!savedKeysToggle.contains(event.target) && !savedKeysList.contains(event.target)) {
+           savedKeysList.classList.add('hidden');
+       }
+   });
+
+    // --- Settings Persistence ---
+    function saveSettings() {
+        const settings = {
+            apiKey: apiKeyInput.value,
+            prompt: promptInput.value,
+            negativePrompt: negativePromptInput.value,
+            model: modelSelect.value,
+            aspectRatio: aspectRatioSelect.value,
+            resolution: resolutionSelect.value,
+            personGeneration: personGenSelect.value,
+            seed: seedInput.value,
+            sampleCount: sampleCountInput.value,
+            duration: durationInput.value,
+            generateAudio: generateAudioSwitch.checked,
+            enhancePrompt: enhancePromptSwitch.checked,
+            threadCount: threadCountInput.value,
+            imageProcessMode: imageProcessModeSelect.value,
+            imageFillColor: imageFillColorInput.value,
+        };
+        localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings));
+    }
+
+    function loadSettings() {
+        const savedSettings = localStorage.getItem(SETTINGS_KEY);
+        if (savedSettings) {
+            const settings = JSON.parse(savedSettings);
+            apiKeyInput.value = settings.apiKey || '';
+            promptInput.value = settings.prompt || '';
+            negativePromptInput.value = settings.negativePrompt || '';
+            modelSelect.value = settings.model || 'veo-3.0-generate-preview';
+            aspectRatioSelect.value = settings.aspectRatio || '16:9';
+            resolutionSelect.value = settings.resolution || '1080p';
+            personGenSelect.value = settings.personGeneration || 'allow_all';
+            seedInput.value = settings.seed || '';
+            sampleCountInput.value = settings.sampleCount || '1';
+            durationInput.value = settings.duration || '8';
+            generateAudioSwitch.checked = settings.generateAudio !== false; // default to true if undefined
+            enhancePromptSwitch.checked = settings.enhancePrompt !== false; // default to true if undefined
+            threadCountInput.value = settings.threadCount || '1';
+            imageProcessModeSelect.value = settings.imageProcessMode || 'none';
+            imageFillColorInput.value = settings.imageFillColor || '#000000';
+            imageFillColorPicker.value = settings.imageFillColor || '#000000';
+            // Update UI state based on loaded settings
+            updateImageProcessingState();
+            updateSaveButtonState();
+        }
+       updateSaveKeyButtonState(); // Also update key button state on load
+    }
+
+    // Attach listeners to save settings on change
+    const inputsToSave = [
+        apiKeyInput, promptInput, negativePromptInput, modelSelect, aspectRatioSelect,
+        resolutionSelect, personGenSelect, seedInput, sampleCountInput, durationInput,
+        generateAudioSwitch, threadCountInput, enhancePromptSwitch,
+        imageProcessModeSelect, imageFillColorInput
+    ];
+    inputsToSave.forEach(input => {
+        input.addEventListener('change', saveSettings);
+        // For text inputs, 'input' event is more responsive
+        if (input.type === 'textarea' || input.type === 'text' || input.type === 'password' || input.type === 'number') {
+            input.addEventListener('input', saveSettings);
+        }
+    });
+
+    promptInput.addEventListener('input', updateSaveButtonState);
+    apiKeyInput.addEventListener('input', updateSaveKeyButtonState);
+
+   // File Drop Zone Logic V2: With Preview and Delete
+   function setupFileDropZone(zoneId, inputId, previewId) {
+       const dropZone = document.getElementById(zoneId);
+       const fileInput = document.getElementById(inputId);
+       const previewContainer = document.getElementById(previewId);
+       let currentObjectURL = null;
+
+       const handleFile = (file) => {
+           if (currentObjectURL) {
+               URL.revokeObjectURL(currentObjectURL);
+           }
+
+           if (!file) {
+               previewContainer.innerHTML = '';
+               dropZone.classList.remove('has-file');
+               fileInput.value = ''; // Ensure file is cleared
+               return;
+           }
+
+           currentObjectURL = URL.createObjectURL(file);
+           previewContainer.innerHTML = ''; // Clear previous preview
+
+           let previewElement;
+           if (file.type.startsWith('image/')) {
+               previewElement = document.createElement('img');
+               previewElement.src = currentObjectURL;
+           } else if (file.type.startsWith('video/')) {
+               previewElement = document.createElement('video');
+               previewElement.src = currentObjectURL;
+               previewElement.muted = true;
+               previewElement.playsInline = true;
+               previewElement.setAttribute('preload', 'metadata'); // For poster frame
+           }
+           
+           if(previewElement) {
+               previewContainer.appendChild(previewElement);
+           }
+
+           const deleteBtn = document.createElement('button');
+           deleteBtn.className = 'delete-file-btn';
+           deleteBtn.innerHTML = feather.icons['x'].toSvg({ width: 16, height: 16 });
+           deleteBtn.setAttribute('aria-label', 'Remove file');
+           
+           deleteBtn.addEventListener('click', (e) => {
+               e.stopPropagation(); // VERY IMPORTANT: Prevents the click from bubbling up to the dropZone
+               e.preventDefault();
+               handleFile(null); // Clear the file
+           });
+
+           previewContainer.appendChild(deleteBtn);
+           dropZone.classList.add('has-file');
+       };
+
+       dropZone.addEventListener("click", (e) => {
+           // If the click is on the delete button, do nothing.
+           if (e.target.closest('.delete-file-btn')) {
+               return;
+           }
+           // If the click is on the file input itself, let the browser handle it.
+           if (e.target === fileInput) {
+               return;
+           }
+           // Otherwise, for any other part of the zone, trigger the file input.
+           fileInput.click();
+       });
+
+       dropZone.addEventListener("dragover", (e) => {
+           e.preventDefault();
+           dropZone.classList.add("dragover");
+       });
+
+       dropZone.addEventListener("dragleave", () => {
+           dropZone.classList.remove("dragover");
+       });
+
+       dropZone.addEventListener("drop", (e) => {
+           e.preventDefault();
+           dropZone.classList.remove("dragover");
+           if (e.dataTransfer.files.length) {
+               fileInput.files = e.dataTransfer.files;
+               handleFile(fileInput.files[0]);
+           }
+       });
+
+       fileInput.addEventListener("change", () => {
+            if (fileInput.files.length > 0) {
+               handleFile(fileInput.files[0]);
+           } else {
+               handleFile(null);
+           }
+       });
+   }
+
+   setupFileDropZone("image-drop-zone", "image-prompt", "image-preview");
+   setupFileDropZone("video-drop-zone", "video-prompt", "video-preview");
+
+   // --- Image Processing UI Logic ---
+   function updateImageProcessingState() {
+       const isFillMode = imageProcessModeSelect.value === 'fill';
+       const processGroup = imageProcessModeSelect.closest('.form-group');
+
+       // 移除了基于宽高比的禁用限制，现在所有宽高比都可以使用图片处理功能
+       processGroup.classList.remove('disabled');
+       imageProcessModeSelect.disabled = false;
+
+       // Color picker is enabled only in fill mode
+       if (isFillMode) {
+           imageFillColorGroup.classList.remove('disabled');
+           imageFillColorPicker.disabled = false;
+           imageFillColorInput.disabled = false;
+       } else {
+           imageFillColorGroup.classList.add('disabled');
+           imageFillColorPicker.disabled = true;
+           imageFillColorInput.disabled = true;
+       }
+   }
+
+   aspectRatioSelect.addEventListener('change', updateImageProcessingState);
+   imageProcessModeSelect.addEventListener('change', updateImageProcessingState);
+
+   imageFillColorPicker.addEventListener('input', () => {
+       imageFillColorInput.value = imageFillColorPicker.value;
+       saveSettings(); // Save on color change
+   });
+
+   imageFillColorInput.addEventListener('input', () => {
+       const value = imageFillColorInput.value;
+       // A simple regex to check for valid hex color format
+       if (/^#[0-9a-fA-F]{6}$/.test(value)) {
+           imageFillColorPicker.value = value;
+           saveSettings(); // Save on text input change
+       }
+   });
+
+   // Carousel Logic
+   function updateCarousel() {
+        videoCarousel.style.transform = `translateX(-${currentIndex * 100}%)`;
+        updateSaveVideoButtonState(); // Update save button state when carousel changes
+        
+        const dots = carouselDots.querySelectorAll('.carousel-dot');
+        dots.forEach((dot, index) => {
+            dot.classList.toggle('active', index === currentIndex);
+        });
+
+        const videos = videoCarousel.querySelectorAll('video');
+        videos.forEach((video, index) => {
+            if (index !== currentIndex) {
+                video.pause();
+            }
+        });
+    }
+
+    function resetCarousel() {
+        videoCarousel.innerHTML = '';
+        carouselDots.innerHTML = '';
+        videoItems = [];
+        currentIndex = 0;
+        prevBtn.classList.add('hidden');
+        nextBtn.classList.add('hidden');
+        placeholder.style.display = 'flex';
+        saveVideoBtn.disabled = true; // Disable button when there are no videos
+        savedVideos = []; // Reset saved videos tracker
+    }
+
+    prevBtn.addEventListener('click', () => {
+        currentIndex = (currentIndex > 0) ? currentIndex - 1 : videoItems.length - 1;
+        updateCarousel();
+    });
+
+    nextBtn.addEventListener('click', () => {
+        currentIndex = (currentIndex < videoItems.length - 1) ? currentIndex + 1 : 0;
+        updateCarousel();
+    });
+
+    // --- Video Handling ---
+    function addVideoToCarousel(videoUrl) {
+        const index = videoItems.length;
+        videoItems.push(videoUrl);
+
+        const item = document.createElement('div');
+        item.className = 'carousel-item';
+        const video = document.createElement('video');
+        video.src = videoUrl;
+        video.controls = true;
+        video.addEventListener('click', (e) => {
+            e.preventDefault();
+            if (video.paused) {
+                video.play();
+            } else {
+                video.pause();
+            }
+        });
+        item.appendChild(video);
+        videoCarousel.appendChild(item);
+
+        const dot = document.createElement('div');
+        dot.className = 'carousel-dot';
+        dot.addEventListener('click', () => {
+            currentIndex = index;
+            updateCarousel();
+        });
+        carouselDots.appendChild(dot);
+
+        if (videoItems.length > 1) {
+            prevBtn.classList.remove('hidden');
+            nextBtn.classList.remove('hidden');
+        }
+        
+        // If it's the first video, hide loader and update display
+        if (videoItems.length === 1) {
+            loader.classList.add("hidden");
+            placeholder.style.display = "none";
+            updateCarousel();
+            saveVideoBtn.disabled = false; // Enable the save button
+        }
+    }
+
+
+    // --- Form Submission ---
+    generateBtn.addEventListener("click", async () => {
+        resetCarousel();
+        loader.classList.remove("hidden");
+        placeholder.style.display = "none";
+        errorContainer.classList.add("hidden");
+
+        const threadCount = parseInt(threadCountInput.value, 10) || 1;
+        const sampleCount = parseInt(sampleCountInput.value, 10) || 1;
+
+        const baseFormData = () => {
+            const formData = new FormData();
+            formData.append("api_key", apiKeyInput.value);
+            formData.append("prompt", promptInput.value);
+            formData.append("negative_prompt", negativePromptInput.value);
+            formData.append("model", modelSelect.value);
+            formData.append("aspect_ratio", aspectRatioSelect.value);
+            formData.append("duration", durationInput.value);
+            formData.append("resolution", resolutionSelect.value);
+            if (seedInput.value) {
+                formData.append("seed", seedInput.value);
+            }
+            formData.append("person_generation", personGenSelect.value);
+            formData.append("generate_audio", generateAudioSwitch.checked);
+            formData.append("enhance_prompt", enhancePromptSwitch.checked);
+
+            if (imagePromptInput.files[0]) {
+                formData.append("image", imagePromptInput.files[0]);
+            }
+            if (videoPromptInput.files[0]) {
+                formData.append("video", videoPromptInput.files[0]);
+            }
+            
+            // 现在所有宽高比都支持图片处理参数
+            formData.append("image_process_mode", imageProcessModeSelect.value);
+            formData.append("image_fill_color", imageFillColorInput.value);
+
+            return formData;
+        };
+
+        if (threadCount > 1) {
+            const requests = [];
+            for (let i = 0; i < threadCount; i++) {
+                const formData = baseFormData();
+                formData.append("sample_count", String(sampleCount)); // 每个线程生成 sampleCount 个视频
+
+                const request = fetch("/api/generate_video", {
+                    method: "POST",
+                    body: formData,
+                })
+                .then(response => {
+                    if (!response.ok) {
+                        return response.json().then(err => Promise.reject(err));
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    if (data.video_urls && data.video_urls.length > 0) {
+                        // 将该线程返回的全部视频加入轮播
+                        data.video_urls.forEach(addVideoToCarousel);
+                    }
+                })
+                .catch(error => {
+                    console.error(`Thread ${i + 1} failed:`, error.detail || error.message);
+                });
+                requests.push(request);
+            }
+
+            Promise.allSettled(requests).then(() => {
+                if (videoItems.length === 0) {
+                    // All requests failed
+                    errorContainer.textContent = "所有视频生成请求均失败。";
+                    errorContainer.classList.remove("hidden");
+                    resetCarousel();
+                }
+                loader.classList.add("hidden");
+            });
+
+        } else {
+            // --- Single Request Logic (Original Flow) ---
+            const formData = baseFormData();
+            formData.append("sample_count", sampleCountInput.value);
+
+            try {
+                const response = await fetch("/api/generate_video", {
+                    method: "POST",
+                    body: formData,
+                });
+
+                const data = await response.json();
+                if (!response.ok) {
+                    throw new Error(data.detail || "发生未知错误。");
+                }
+                
+                const urls = data.video_urls;
+                if (!urls || !Array.isArray(urls) || urls.length === 0) {
+                    throw new Error("API响应格式不正确或未返回视频。");
+                }
+
+                urls.forEach(addVideoToCarousel);
+                
+                if (videoItems.length > 0) {
+                    currentIndex = 0;
+                    updateCarousel();
+                } else {
+                    resetCarousel(); // No videos were successfully added
+                }
+
+            } catch (error) {
+                errorContainer.textContent = error.message;
+                errorContainer.classList.remove("hidden");
+                resetCarousel();
+            } finally {
+                loader.classList.add("hidden");
+            }
+        }
+    });
+
+    // --- Save Video Logic ---
+    function updateSaveVideoButtonState() {
+        if (videoItems.length === 0) {
+            saveVideoBtn.disabled = true;
+            saveVideoBtn.classList.remove('saved');
+            saveVideoBtn.querySelector('span').textContent = '保存此视频到服务器';
+            return;
+        }
+
+        const currentVideoUrl = videoItems[currentIndex];
+        if (savedVideos.includes(currentVideoUrl)) {
+            saveVideoBtn.disabled = true;
+            saveVideoBtn.classList.add('saved');
+            saveVideoBtn.querySelector('span').textContent = '已保存至服务器';
+        } else {
+            saveVideoBtn.disabled = false;
+            saveVideoBtn.classList.remove('saved');
+            saveVideoBtn.querySelector('span').textContent = '保存此视频到服务器';
+        }
+    }
+
+    async function saveCurrentVideo() {
+        if (videoItems.length === 0) return;
+
+        const videoUrlToSave = videoItems[currentIndex];
+        if (savedVideos.includes(videoUrlToSave)) return;
+
+        // Temporarily disable to prevent double-clicking
+        saveVideoBtn.disabled = true;
+        const originalText = saveVideoBtn.querySelector('span').textContent;
+        saveVideoBtn.querySelector('span').textContent = '保存中...';
+
+        try {
+            const formData = new FormData();
+            formData.append('video_url', videoUrlToSave);
+
+            const response = await fetch('/api/save_video', {
+                method: 'POST',
+                body: formData,
+            });
+
+            const data = await response.json();
+
+            if (!response.ok) {
+                throw new Error(data.detail || '保存失败');
+            }
+
+            // Success
+            savedVideos.push(videoUrlToSave);
+            updateSaveVideoButtonState();
+
+        } catch (error) {
+            // Show a temporary error message on the button
+            saveVideoBtn.querySelector('span').textContent = '保存失败!';
+            console.error('Save video error:', error);
+            // Revert button state after a delay
+            setTimeout(() => {
+                saveVideoBtn.querySelector('span').textContent = originalText;
+                updateSaveVideoButtonState(); // Re-evaluates the correct state
+            }, 2000);
+        }
+    }
+
+    saveVideoBtn.addEventListener('click', saveCurrentVideo);
+
+
+
+    // --- Paste to Upload Logic ---
+    const imageDropZone = document.getElementById("image-drop-zone");
+    const videoDropZone = document.getElementById("video-drop-zone");
+
+    imageDropZone.addEventListener('mouseenter', () => currentPasteTarget = 'image');
+    imageDropZone.addEventListener('mouseleave', () => currentPasteTarget = null);
+
+    videoDropZone.addEventListener('mouseenter', () => currentPasteTarget = 'video');
+    videoDropZone.addEventListener('mouseleave', () => currentPasteTarget = null);
+
+    document.addEventListener('paste', (event) => {
+        if (!currentPasteTarget) return;
+
+        // Don't interfere with text inputs
+        const activeElement = document.activeElement;
+        if (activeElement && (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA')) {
+            return;
+        }
+
+        const items = event.clipboardData.items;
+        if (!items) return;
+
+        for (let i = 0; i < items.length; i++) {
+            if (items[i].kind === 'file') {
+                const file = items[i].getAsFile();
+                if (!file) continue;
+
+                event.preventDefault(); // Prevent default paste behavior
+
+                if (currentPasteTarget === 'image' && file.type.startsWith('image/')) {
+                    // Create a new FileList and assign it to the input
+                    const dataTransfer = new DataTransfer();
+                    dataTransfer.items.add(file);
+                    imagePromptInput.files = dataTransfer.files;
+                    // Manually trigger the change event to update the UI
+                    imagePromptInput.dispatchEvent(new Event('change'));
+                    break; // Handle only the first valid file
+                }
+
+                if (currentPasteTarget === 'video' && file.type.startsWith('video/')) {
+                    const dataTransfer = new DataTransfer();
+                    dataTransfer.items.add(file);
+                    videoPromptInput.files = dataTransfer.files;
+                    videoPromptInput.dispatchEvent(new Event('change'));
+                    break; // Handle only the first valid file
+                }
+            }
+        }
+    });
+
+    // --- Initial Load ---
+    loadSettings();
+    // Set initial state for image processing UI
+    updateImageProcessingState();
+    updateSaveButtonState();
+    renderSavedKeys(); // Initial render of the key list
 });

frontend/index.html

@@ -1,100 +1,222 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>VEO3 Video Generator</title>
-    <link rel="stylesheet" href="/style.css">
-</head>
-<body>
-    <header>
-        <h1>VEO3 Video Generator</h1>
-    </header>
-    <main>
-        <form id="video-form">
-            <div class="form-grid">
-                <div class="form-group">
-                    <label for="api-key">Vertex Express Key:</label>
-                    <input type="text" id="api-key" name="api-key" required>
-                </div>
-                <div class="form-group">
-                    <label for="model">Model:</label>
-                    <select id="model" name="model">
-                        <option value="veo-2.0-generate-001">veo-2.0-generate-001</option>
-                        <option value="veo-3.0-generate-001">veo-3.0-generate-001</option>
-                        <option value="veo-3.0-fast-generate-001">veo-3.0-fast-generate-001</option>
-                        <option value="veo-3.0-generate-preview" selected>veo-3.0-generate-preview</option>
-                        <option value="veo-3.0-fast-generate-preview">veo-3.0-fast-generate-preview</option>
-                    </select>
-                </div>
-                <div class="form-group full-width">
-                    <label for="prompt">Prompt:</label>
-                    <textarea id="prompt" name="prompt" rows="4" required></textarea>
-                </div>
-                <div class="form-group full-width">
-                    <label for="negative-prompt">Negative Prompt:</label>
-                    <textarea id="negative-prompt" name="negative-prompt" rows="2"></textarea>
-                </div>
-                <div class="form-group">
-                    <label for="aspect-ratio">Aspect Ratio:</label>
-                    <select id="aspect-ratio" name="aspect-ratio">
-                        <option value="16:9">16:9</option>
-                        <option value="9:16">9:16</option>
-                    </select>
-                </div>
-                <div class="form-group">
-                    <label for="duration">Duration (seconds):</label>
-                    <input type="number" id="duration" name="duration" value="8" min="5" max="8">
-                </div>
-                <div class="form-group">
-                    <label for="resolution">Resolution:</label>
-                    <select id="resolution" name="resolution">
-                        <option value="720p">720p</option>
-                        <option value="1080p">1080p</option>
-                    </select>
-                </div>
-                <div class="form-group">
-                    <label for="sample-count">Sample Count:</label>
-                    <input type="number" id="sample-count" name="sample-count" value="1" min="1" max="4">
-                </div>
-                <div class="form-group">
-                    <label for="seed">Seed:</label>
-                    <input type="number" id="seed" name="seed" min="0" max="4294967295">
-                </div>
-                <div class="form-group">
-                    <label for="person-generation">Person Generation:</label>
-                    <select id="person-generation" name="person-generation">
-                        <option value="allow_all">Allow All</option>
-                        <option value="allow_adult">Allow Adults</option>
-                        <option value="dont_allow">Don't Allow</option>
-                    </select>
-                </div>
-                <div class="form-group checkbox-group">
-                    <label for="generate-audio">Generate Audio:</label>
-                    <input type="checkbox" id="generate-audio" name="generate-audio" checked>
-                </div>
-                <div class="form-group checkbox-group">
-                    <label for="enhance-prompt">Enhance Prompt:</label>
-                    <input type="checkbox" id="enhance-prompt" name="enhance-prompt" checked>
-                </div>
-                <div class="form-group full-width">
-                    <label for="image-prompt">Image Prompt:</label>
-                    <input type="file" id="image-prompt" name="image-prompt" accept="image/jpeg,image/png">
-                </div>
-                <div class="form-group full-width">
-                    <label for="video-prompt">Video Prompt:</label>
-                    <input type="file" id="video-prompt" name="video-prompt" accept="video/mp4">
-                </div>
-            </div>
-            <button type="submit">Generate Video</button>
-        </form>
-
-        <div id="video-container">
-            <div id="loader" class="hidden"></div>
-            <div id="video-results"></div>
-            <div id="error-container" class="hidden"></div>
-        </div>
-    </main>
-    <script src="/app.js"></script>
-</body>
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VEO Video Generator</title>
+    <link rel="stylesheet" href="style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body>
+    <div class="app-container">
+        <header class="app-header">
+            <h1>VEO Video Generator</h1>
+            <div class="header-actions">
+                <button id="save-video-btn" class="save-button" disabled>
+                    <i data-feather="save"></i>
+                    <span>保存此视频到服务器</span>
+                </button>
+                <button id="generate-btn" class="generate-button">
+                    <i data-feather="play"></i>
+                    <span>生成视频</span>
+                </button>
+            </div>
+        </header>
+        <main class="main-content" id="video-form">
+            <div class="settings-panel-left">
+                <div class="panel">
+                    <h2 class="panel-title">核心参数</h2>
+                    <div class="form-group">
+                        <label for="api-key">Vertex Key</label>
+                        <div class="key-input-container">
+                            <input type="password" id="api-key" name="api-key" class="form-input" placeholder="选择或输入您的 Key">
+                            <div class="key-actions">
+                                <button id="save-key-btn" class="icon-btn" title="保存当前 Key">
+                                    <i data-feather="plus-circle"></i>
+                                </button>
+                                <div class="saved-keys-dropdown">
+                                    <button id="saved-keys-toggle" class="icon-btn" title="查看已保存的 Key">
+                                        <i data-feather="key"></i>
+                                    </button>
+                                    <div id="saved-keys-list" class="saved-prompts-list hidden">
+                                        <!-- Saved keys will be dynamically inserted here -->
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <div class="prompt-header">
+                            <label for="prompt">正向提示词 (Prompt)</label>
+                            <div class="prompt-actions">
+                                <button id="save-prompt-btn" class="icon-btn" title="保存当前提示词">
+                                    <i data-feather="plus-circle"></i>
+                                </button>
+                                <div class="saved-prompts-dropdown">
+                                    <button id="saved-prompts-toggle" class="icon-btn" title="查看已保存的提示词">
+                                        <i data-feather="bookmark"></i>
+                                    </button>
+                                    <div id="saved-prompts-list" class="saved-prompts-list hidden">
+                                        <!-- Saved prompts will be dynamically inserted here -->
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <textarea id="prompt" name="prompt" rows="5" class="form-input" placeholder="例如：一只穿着宇航服的猫在月球上行走"></textarea>
+                    </div>
+                    <div class="form-group">
+                        <label for="negative-prompt">反向提示词 (Negative Prompt)</label>
+                        <textarea id="negative-prompt" name="negative-prompt" rows="3" class="form-input" placeholder="例如：模糊, 低质量, 水印"></textarea>
+                    </div>
+                </div>
+
+                <div class="panel">
+                    <h2 class="panel-title">模型与画面</h2>
+                    <div class="grid-2-col" style="grid-template-columns: repeat(2, 1fr); align-items: end;">
+                        <div class="form-group">
+                            <label for="model">模型 (Model)</label>
+                            <select id="model" name="model" class="form-select">
+                                <option value="veo-3.0-generate-preview" selected>veo-3.0-generate-preview</option>
+                                <option value="veo-3.0-fast-generate-preview">veo-3.0-fast-generate-preview</option>
+                                <option value="veo-2.0-generate-001">veo-2.0-generate-001</option>
+                                <option value="veo-3.0-generate-001">veo-3.0-generate-001</option>
+                                <option value="veo-3.0-fast-generate-001">veo-3.0-fast-generate-001</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label for="resolution">分辨率 (Resolution)</label>
+                            <select id="resolution" name="resolution" class="form-select">
+                                <option value="1080p">1080p</option>
+                                <option value="720p">720p</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label for="aspect-ratio">宽高比 (Aspect Ratio)</label>
+                            <select id="aspect-ratio" name="aspect-ratio" class="form-select">
+                                <option value="16:9">16:9 (横屏)</option>
+                                <option value="9:16">9:16 (竖屏)</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                           <label for="image-process-mode">图片处理 (16:9)</label>
+                           <select id="image-process-mode" name="image-process-mode" class="form-select">
+                               <option value="none" selected>不作处理</option>
+                               <option value="fill">颜色填充</option>
+                               <option value="stretch_to_fill">拉伸填充 (仅放大)</option>
+                               <option value="compress_to_fit">压缩填充 (仅缩小)</option>
+                           </select>
+                       </div>
+                         <div class="form-group">
+                            <label for="person-generation">人物生成</label>
+                            <select id="person-generation" name="person-generation" class="form-select">
+                                <option value="allow_all">允许所有</option>
+                                <option value="allow_adult">仅成人</option>
+                                <option value="dont_allow">不允许</option>
+                            </select>
+                        </div>
+                        <div class="form-group" id="image-fill-color-group">
+                           <label for="image-fill-color">填充颜色</label>
+                           <div class="color-picker-wrapper">
+                               <input type="color" id="image-fill-color-picker" value="#000000">
+                               <input type="text" id="image-fill-color" name="image-fill-color" class="form-input color-input" value="#000000">
+                           </div>
+                        </div>
+                    </div>
+                </div>
+                 <div class="panel">
+                    <h2 class="panel-title">高级设置</h2>
+                    <div class="grid-3-col">
+                        <div class="form-group">
+                            <label for="seed">随机种子 (Seed)</label>
+                            <input type="number" id="seed" name="seed" class="form-input" placeholder="留空则随机" min="0" max="4294967295">
+                        </div>
+                        <div class="form-group">
+                            <label for="sample-count">单个线程生成数量</label>
+                            <input type="number" id="sample-count" name="sample-count" class="form-input" value="1" min="1" max="4">
+                        </div>
+                        <div class="form-group">
+                             <label for="duration">时长 (秒)</label>
+                             <input type="number" id="duration" name="duration" class="form-input" value="8" min="5" max="8">
+                        </div>
+                    </div>
+                    <div class="grid-3-col" style="margin-top: 16px;">
+                        <div class="form-group switch-group">
+                            <label for="generate-audio">生成音频</label>
+                            <label class="switch">
+                                <input type="checkbox" id="generate-audio" name="generate-audio" checked>
+                                <span class="switch-slider"></span>
+                            </label>
+                        </div>
+                        <div class="form-group switch-group">
+                            <label for="thread-count">线程数</label>
+                            <input type="number" id="thread-count" name="thread-count" class="form-input" value="1" min="1" step="1">
+                        </div>
+                        <div class="form-group switch-group">
+                            <label for="enhance-prompt">增强提示词</label>
+                            <label class="switch">
+                                <input type="checkbox" id="enhance-prompt" name="enhance-prompt" checked>
+                                <span class="switch-slider"></span>
+                            </label>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="content-area">
+                <div class="video-panel">
+                    <div id="video-container" class="video-container">
+                        <div id="video-carousel" class="carousel">
+                            <!-- Dynamically generated video items will go here -->
+                        </div>
+                        <div id="loader" class="loader hidden">
+                            <div class="spinner"></div>
+                            <p>正在生成视频...</p>
+                        </div>
+                        <div id="placeholder" class="placeholder">
+                             <i data-feather="film" style="width: 64px; height: 64px;"></i>
+                            <p>生成的视频将在此处显示</p>
+                        </div>
+                        <button id="prev-btn" class="carousel-btn prev hidden"><i data-feather="chevron-left"></i></button>
+                        <button id="next-btn" class="carousel-btn next hidden"><i data-feather="chevron-right"></i></button>
+                        <div id="carousel-dots" class="carousel-dots"></div>
+                        <div id="error-container" class="error-message hidden"></div>
+                    </div>
+                </div>
+                <div class="settings-panel-bottom">
+                     <div class="panel">
+                        <h2 class="panel-title">输入文件 (可选)</h2>
+                        <div class="grid-2-col">
+                            <div class="form-group file-drop-group">
+                                <label for="image-prompt">图像提示 (Image Prompt)</label>
+                                <div class="file-drop-zone" id="image-drop-zone">
+                                    <div class="file-drop-prompt">
+                                       <i data-feather="image"></i>
+                                       <p>拖放、粘贴图片文件至此或点击选择</p>
+                                    </div>
+                                    <div class="file-preview" id="image-preview"></div>
+                                    <input type="file" id="image-prompt" name="image-prompt" accept="image/jpeg,image/png" class="file-input">
+                                </div>
+                            </div>
+                            <div class="form-group file-drop-group">
+                                <label for="video-prompt">视频提示 (Video Prompt)</label>
+                                <div class="file-drop-zone" id="video-drop-zone">
+                                    <div class="file-drop-prompt">
+                                       <i data-feather="video"></i>
+                                       <p>拖放、粘贴视频文件至此或点击选择</p>
+                                    </div>
+                                    <div class="file-preview" id="video-preview"></div>
+                                    <input type="file" id="video-prompt" name="video-prompt" accept="video/mp4" class="file-input">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+    <script src="app.js"></script>
+    <script>
+      feather.replace()
+    </script>
+</body>
 </html>

frontend/style.css

@@ -1,150 +1,905 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
-
-body {
-    font-family: 'Roboto', sans-serif;
-    margin: 0;
-    background-color: #f0f2f5;
-    color: #333;
-    line-height: 1.6;
-}
-
-header {
-    background: linear-gradient(90deg, #4a90e2, #50e3c2);
-    color: #fff;
-    padding: 1.5rem;
-    text-align: center;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-
-h1 {
-    margin: 0;
-    font-weight: 700;
-}
-
-main {
-    max-width: 900px;
-    margin: 2rem auto;
-    padding: 2rem;
-    background-color: #fff;
-    border-radius: 8px;
-    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-}
-
-.form-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 1.5rem;
-}
-
-.form-group {
-    display: flex;
-    flex-direction: column;
-}
-
-.full-width {
-    grid-column: 1 / -1;
-}
-
-label {
-    font-weight: bold;
-    margin-bottom: 0.5rem;
-    color: #555;
-}
-
-input[type="text"],
-input[type="number"],
-textarea,
-select {
-    padding: 0.75rem;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    font-size: 1rem;
-    transition: border-color 0.3s;
-}
-
-input[type="text"]:focus,
-input[type="number"]:focus,
-textarea:focus,
-select:focus {
-    border-color: #4a90e2;
-    outline: none;
-}
-
-textarea {
-    resize: vertical;
-}
-
-.checkbox-group {
-    flex-direction: row;
-    align-items: center;
-}
-
-.checkbox-group label {
-    margin-bottom: 0;
-    margin-right: 0.5rem;
-}
-
-button {
-    grid-column: 1 / -1;
-    padding: 1rem;
-    background: linear-gradient(90deg, #50e3c2, #4a90e2);
-    color: #fff;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 1.1rem;
-    font-weight: bold;
-    transition: opacity 0.3s;
-    margin-top: 1rem;
-}
-
-button:hover {
-    opacity: 0.9;
-}
-
-#video-container {
-    margin-top: 2rem;
-    text-align: center;
-}
-
-#video-results {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1rem;
-    justify-content: center;
-}
-
-#video-results video {
-    width: calc(50% - 0.5rem);
-    max-width: 400px;
-    border-radius: 8px;
-    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-}
-
-.hidden {
-    display: none;
-}
-
-#loader {
-    border: 8px solid #f3f3f3;
-    border-top: 8px solid #4a90e2;
-    border-radius: 50%;
-    width: 60px;
-    height: 60px;
-    animation: spin 1s linear infinite;
-    margin: 2rem auto;
-}
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
-#error-container {
-    color: #e74c3c;
-    background-color: #fbeae5;
-    border: 1px solid #e74c3c;
-    padding: 1rem;
-    border-radius: 4px;
-    margin-top: 1rem;
+:root {
+    --bg-color-dark: #121212;
+    --bg-color-medium: #1e1e1e;
+    --bg-color-light: #2a2a2a;
+    --text-color-primary: #e0e0e0;
+    --text-color-secondary: #a0a0a0;
+    --accent-color: #00aaff;
+    --accent-color-hover: #0088cc;
+    --border-color: #383838;
+    --error-color: #ff4d4d;
+    --font-family: 'Inter', sans-serif;
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: var(--font-family);
+    background-color: var(--bg-color-dark);
+    color: var(--text-color-primary);
+    font-size: 14px;
+    line-height: 1.5;
+    overflow: hidden;
+}
+
+.app-container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+}
+
+.app-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 24px;
+    background-color: var(--bg-color-medium);
+    border-bottom: 1px solid var(--border-color);
+    flex-shrink: 0;
+}
+
+.app-header h1 {
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.header-actions {
+    display: flex;
+    align-items: center;
+}
+
+.save-button {
+    background-color: #4a4a4a; /* Gray when disabled */
+    color: #888;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 6px;
+    cursor: not-allowed;
+    font-size: 14px;
+    font-weight: 500;
+    transition: background-color 0.2s ease, color 0.2s ease, cursor 0.2s ease;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-right: 10px; /* Add some space between buttons */
+}
+
+.save-button:not(:disabled) {
+    background-color: #28a745; /* Green when enabled */
+    color: white;
+    cursor: pointer;
+}
+
+.save-button:not(:disabled):hover {
+    background-color: #218838;
+}
+
+.save-button.saved {
+    background-color: #dc3545; /* Red when saved */
+    color: white;
+    cursor: default;
+}
+
+.generate-button {
+    background-color: var(--accent-color);
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    transition: background-color 0.2s ease;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.generate-button:hover {
+    background-color: var(--accent-color-hover);
+}
+
+.main-content {
+    display: grid;
+    grid-template-columns: 50fr 50fr;
+    grid-template-rows: auto;
+    flex-grow: 1;
+    height: calc(100vh - 65px);
+}
+
+.settings-panel-left {
+    background-color: var(--bg-color-medium);
+    padding: 20px;
+    overflow-y: auto;
+    border-right: 1px solid var(--border-color);
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.content-area {
+    display: grid;
+    grid-template-rows: 55fr 45fr; /* 调整比例，为底部面板提供更多空间 */
+    overflow: hidden;
+}
+
+.video-panel {
+    background-color: var(--bg-color-dark);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+    position: relative;
+    overflow: hidden;
+}
+
+.video-container {
+    width: 100%;
+    height: 100%;
+    background-color: #000;
+    border-radius: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    overflow: hidden;
+}
+
+#generated-video { /* This ID is now deprecated */
+    display: none;
+}
+
+.carousel {
+    display: flex;
+    transition: transform 0.5s ease-in-out;
+    height: 100%;
+}
+
+.carousel-item {
+    min-width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.carousel-item video {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    border-radius: 8px;
+}
+
+.carousel-btn {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background-color: rgba(0, 0, 0, 0.4);
+    color: white;
+    border: none;
+    cursor: pointer;
+    padding: 10px;
+    border-radius: 50%;
+    z-index: 10;
+    transition: background-color 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.carousel-btn:hover {
+    background-color: rgba(0, 0, 0, 0.7);
+}
+
+.carousel-btn.prev {
+    left: 16px;
+}
+
+.carousel-btn.next {
+    right: 16px;
+}
+
+.carousel-dots {
+    position: absolute;
+    bottom: 0px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 8px;
+    z-index: 10;
+}
+
+.carousel-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.4);
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.carousel-dot.active {
+    background-color: white;
+}
+
+.placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    color: var(--text-color-secondary);
+}
+
+.placeholder i {
+    color: var(--text-color-secondary);
+}
+
+.loader {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 10;
+    color: white;
+    backdrop-filter: blur(5px);
+}
+
+.spinner {
+    border: 4px solid rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    border-top: 4px solid var(--accent-color);
+    width: 50px;
+    height: 50px;
+    animation: spin 1s linear infinite;
+    margin-bottom: 16px;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.hidden {
+    display: none !important;
+}
+
+.settings-panel-bottom {
+   background-color: var(--bg-color-medium);
+   padding: 20px;
+   border-top: 1px solid var(--border-color);
+   display: flex; /* Make it a flex container */
+   flex-direction: column;
+}
+
+.error-message {
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
+    right: 20px;
+    background-color: var(--error-color);
+    color: white;
+    padding: 12px;
+    border-radius: 6px;
+    font-size: 14px;
+    z-index: 20;
+}
+
+/* Form Styles */
+.panel {
+   background-color: var(--bg-color-light);
+   border-radius: 8px;
+   padding: 20px;
+   border: 1px solid var(--border-color);
+   transition: all 0.3s ease;
+   display: flex; /* Added */
+   flex-direction: column; /* Added */
+   flex-grow: 1; /* Added to make panel fill its parent */
+   overflow: visible; /* Allow dropdowns to overflow */
+}
+
+.panel:hover {
+    border-color: #4a4a4a;
+}
+
+.panel-title {
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 16px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.form-group {
+    margin-bottom: 16px;
+}
+
+.grid-2-col > .form-group,
+.grid-3-col > .form-group {
+    margin-bottom: 0;
+}
+
+.form-group:last-child {
+    margin-bottom: 0;
+}
+
+.form-group label {
+    display: block;
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 8px;
+    color: var(--text-color-secondary);
+}
+
+.form-input, .form-select, .form-textarea {
+    width: 100%;
+    background-color: var(--bg-color-medium);
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    padding: 10px;
+    color: var(--text-color-primary);
+    font-size: 14px;
+    transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+/* Thread count input specific styling */
+.switch-group .form-input {
+    width: 90px;
+    text-align: center;
+    padding: 8px;
+    flex-shrink: 0;
+}
+
+.form-input:focus, .form-select:focus, .form-textarea:focus {
+    outline: none;
+    border-color: var(--accent-color);
+    box-shadow: 0 0 0 2px rgba(0, 170, 255, 0.2);
+}
+
+textarea.form-input {
+    resize: vertical;
+}
+
+.grid-2-col {
+   display: grid;
+   grid-template-columns: 1fr 1fr;
+   gap: 16px;
+   flex-grow: 1; /* Added */
+}
+
+.grid-3-col {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 16px;
+}
+
+/* Switch */
+.switch-group {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 4px 0; /* Reduced vertical padding */
+}
+
+.grid-2-col .switch-group {
+    background-color: var(--bg-color-medium);
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    padding: 10px;
+    margin-bottom: 0;
+}
+
+.grid-3-col .switch-group {
+    background-color: var(--bg-color-medium);
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    padding: 10px;
+    margin-bottom: 0;
+}
+
+.switch-group > label {
+    margin-bottom: 0; /* Override default label margin */
+}
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 44px;
+    height: 24px;
+}
+
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.switch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--border-color);
+    transition: .4s;
+    border-radius: 24px;
+}
+
+.switch-slider:before {
+    position: absolute;
+    content: "";
+    height: 18px;
+    width: 18px;
+    left: 3px;
+    bottom: 3px;
+    background-color: white;
+    transition: .4s;
+    border-radius: 50%;
+}
+
+input:checked + .switch-slider {
+    background-color: var(--accent-color);
+}
+
+input:checked + .switch-slider:before {
+    transform: translateX(20px);
+}
+
+
+/* File Drop Zone */
+.file-drop-group {
+    display: flex;
+    flex-direction: column;
+    height: 100%; /* Ensure the group takes full height of grid cell */
+}
+
+.file-drop-zone {
+    border: 2px dashed var(--border-color);
+    border-radius: 8px;
+    padding: 20px;
+    text-align: center;
+    cursor: pointer;
+    transition: border-color 0.3s, background-color 0.3s;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    flex-grow: 1; /* Allow zone to grow and fill space */
+}
+
+.file-drop-zone.dragover {
+    border-color: var(--accent-color);
+    background-color: rgba(0, 170, 255, 0.1);
+}
+
+.file-drop-zone i {
+    color: var(--text-color-secondary);
+    margin-bottom: 8px;
+}
+
+.file-drop-zone p {
+    color: var(--text-color-secondary);
+    font-size: 12px;
+}
+
+.file-drop-prompt {
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+   justify-content: center;
+   gap: 8px;
+   transition: opacity 0.3s ease;
+}
+
+.file-input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+}
+
+.file-preview {
+   position: absolute;
+   top: 0;
+   left: 0;
+   width: 100%;
+   height: 100%;
+   padding: 8px;
+   display: none; /* Initially hidden */
+   justify-content: center;
+   align-items: center;
+}
+
+.file-preview img,
+.file-preview video {
+   max-width: 100%;
+   max-height: 100%;
+   border-radius: 4px;
+   object-fit: cover;
+}
+
+.delete-file-btn {
+   position: absolute;
+   top: 12px;
+   right: 12px;
+   width: 24px;
+   height: 24px;
+   background-color: rgba(0, 0, 0, 0.6);
+   color: white;
+   border: none;
+   border-radius: 50%;
+   cursor: pointer;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   padding: 0;
+   z-index: 10;
+   transition: background-color 0.2s, transform 0.2s;
+}
+
+.delete-file-btn:hover {
+   background-color: rgba(255, 77, 77, 0.9);
+   transform: scale(1.1);
+}
+
+.file-drop-zone.has-file .file-drop-prompt {
+   opacity: 0;
+   pointer-events: none;
+}
+
+.file-drop-zone.has-file .file-preview {
+   display: flex;
+}
+
+/* Scrollbar styles */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--bg-color-medium);
+}
+
+::-webkit-scrollbar-thumb {
+    background: #555;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #777;
+}
+
+@media (max-width: 820px) {
+   body {
+       overflow: auto; /* Allow scrolling on mobile */
+   }
+
+   .app-container {
+       height: auto;
+       min-height: 100vh;
+   }
+
+   .main-content {
+       display: flex;
+       flex-direction: column;
+       height: auto;
+   }
+
+   /* 移动端：重新排列顺序 - 视频面板优先 */
+   .main-content {
+       order: 0; /* 确保main-content在header之后 */
+   }
+
+   .content-area {
+       order: -1; /* 视频区域排在最前 */
+       display: flex;
+       flex-direction: column;
+       overflow: visible;
+   }
+
+   .settings-panel-left {
+       order: 1; /* 设置面板排在视频区域之后 */
+       border-right: none;
+       overflow-y: visible;
+       padding-bottom: 0;
+   }
+   
+   .video-panel {
+       width: 100%;
+       aspect-ratio: 16 / 9; /* Ensure a consistent aspect ratio */
+       flex-shrink: 0; /* Prevent the panel from shrinking */
+   }
+
+   .settings-panel-bottom {
+       border-top: 1px solid var(--border-color); /* Keep the border for separation */
+   }
+
+   .grid-2-col, .grid-3-col {
+       grid-template-columns: 1fr; /* Stack columns */
+   }
+
+   .grid-2-col .switch-group {
+       /* Adjust switch group to not look weird when stacked */
+       justify-content: flex-start;
+       gap: 16px;
+   }
+}
+.color-picker-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.color-picker-wrapper input[type="color"] {
+    width: 36px;
+    height: 36px;
+    border: none;
+    padding: 0;
+    border-radius: 4px;
+    cursor: pointer;
+    background-color: transparent;
+}
+
+.color-picker-wrapper input[type="color"]::-webkit-color-swatch-wrapper {
+    padding: 0;
+}
+
+.color-picker-wrapper input[type="color"]::-webkit-color-swatch {
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+}
+
+.color-picker-wrapper .color-input {
+    flex-grow: 1;
+}
+
+.hidden {
+    display: none !important;
+}
+.form-group.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+}
+
+/* Prompt Actions */
+.prompt-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+}
+
+.prompt-header label {
+    margin-bottom: 0; /* Override default */
+}
+
+.prompt-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.icon-btn {
+    background: none;
+    border: none;
+    color: var(--text-color-secondary);
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.2s, color 0.2s;
+}
+
+.icon-btn:hover {
+    background-color: var(--bg-color-light);
+    color: var(--text-color-primary);
+}
+
+.icon-btn:disabled {
+    color: var(--accent-color);
+    opacity: 0.7;
+    cursor: default;
+    background-color: transparent;
+}
+
+.saved-prompts-dropdown {
+    position: relative;
+}
+
+.saved-prompts-list {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    background-color: var(--bg-color-light);
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    width: 280px;
+    max-height: 300px;
+    overflow-y: auto;
+    z-index: 100;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    margin-top: 8px;
+}
+
+.saved-prompts-list.hidden {
+    display: none;
+}
+
+.saved-prompt-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 12px;
+    cursor: pointer;
+    border-bottom: 1px solid var(--border-color);
+    transition: background-color 0.2s;
+}
+
+.saved-prompt-item:last-child {
+    border-bottom: none;
+}
+
+.saved-prompt-item:hover {
+    background-color: var(--bg-color-medium);
+}
+
+.saved-prompt-text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex-grow: 1;
+    margin-right: 12px;
+    font-size: 13px;
+}
+
+.delete-prompt-btn {
+    background: none;
+    border: none;
+    color: var(--text-color-secondary);
+    cursor: pointer;
+    padding: 2px;
+    border-radius: 4px;
+    flex-shrink: 0;
+    transition: color 0.2s;
+}
+
+.delete-prompt-btn:hover {
+    color: var(--error-color);
+}
+
+.saved-prompts-list-empty {
+    padding: 20px;
+    text-align: center;
+    color: var(--text-color-secondary);
+    font-style: italic;
+}
+/* --- Key Input Container --- */
+.key-input-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    z-index: 2; /* Ensure this container is above its siblings */
+}
+
+.key-input-container .form-input {
+    padding-right: 80px; /* Make space for buttons */
+}
+
+.key-actions {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.saved-keys-dropdown {
+    position: relative;
+}
+
+/* Use the same styles as saved-prompts-list */
+.saved-keys-list {
+    position: absolute;
+    bottom: 120%; /* Position above the button */
+    right: 0;
+    width: 280px;
+    background-color: #3c3c3c;
+    border-radius: 8px;
+    border: 1px solid #555;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    z-index: 101;
+    max-height: 300px;
+    overflow-y: auto;
+    padding: 6px;
+}
+
+.saved-keys-list.hidden {
+    display: none;
+}
+
+.saved-key-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 12px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+.saved-key-item:hover {
+    background-color: #4a4a4a;
+}
+
+.saved-key-alias {
+    font-weight: 500;
+    color: #e0e0e0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex-grow: 1;
+}
+
+.saved-key-value {
+    font-size: 0.8em;
+    color: #999;
+    margin-left: 12px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100px; /* Adjust as needed */
+}
+
+.delete-key-btn {
+    background: none;
+    border: none;
+    color: #999;
+    cursor: pointer;
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    transition: color 0.2s ease, background-color 0.2s ease;
+}
+
+.delete-key-btn:hover {
+    color: #ff6b6b;
+    background-color: #4a4a4a;
+}
+
+.saved-keys-list-empty {
+    padding: 16px;
+    text-align: center;
+    color: #888;
+    font-size: 0.9em;
+}
+
+.saved-key-item.preset {
+    /* Style for preset keys, e.g., slightly different color */
+    /* background-color: #414a41; */
+}
+
+.saved-key-item.preset .delete-key-btn {
+    display: none; /* Hide delete button for presets */
 }