Initial commit

Dockerfile

@@ -0,0 +1,45 @@
+# Use an official Python runtime as a parent image
+FROM python:3.10-slim
+
+# Install system dependencies first (as root)
+RUN apt update && apt install -y ffmpeg \
+    # Clean up apt cache to reduce image size
+    && rm -rf /var/lib/apt/lists/*
+
+# Create a non-root user 'appuser' with UID 1000 and a group 'appuser' with GID 1000
+# Create a home directory for the user
+RUN groupadd -r appuser -g 1000 && useradd -u 1000 -r -g appuser -m -s /bin/bash -c "App User" appuser
+
+# Set environment variables for the user's home and update PATH
+ENV HOME=/home/appuser \
+    PATH=/home/appuser/.local/bin:$PATH
+
+# Set the working directory *inside the user's home*
+WORKDIR $HOME/app
+
+# Change ownership of the working directory to the new user
+# Although WORKDIR creates it if it doesn't exist, explicitly ensuring ownership is good practice
+RUN chown appuser:appuser $HOME/app
+
+# Switch to the non-root user *before* copying files and installing packages
+USER appuser
+
+# Copy the requirements file (will be owned by appuser due to USER command)
+COPY --chown=appuser:appuser requirements.txt .
+
+# Install Python packages (as appuser)
+# Pip installs packages into user's site-packages or uses --user implicitly
+RUN pip install --no-cache-dir --user -r requirements.txt
+
+# Copy the rest of the application code (owned by appuser)
+COPY --chown=appuser:appuser . .
+
+# Create the directories for uploads and final output (as appuser)
+# These will automatically be owned by 'appuser' because we are running as that user
+RUN mkdir -p uploads output
+
+# Make port 7860 available
+EXPOSE 7860
+
+# Set the default command to run the application (runs as appuser)
+CMD ["python", "app.py"]

README.md

@@ -0,0 +1,206 @@
+# AVE - AI Video Editor
+
+AVE is an advanced AI-powered video editing platform designed to streamline the editing process for portrait-mode, aesthetic videos (such as Instagram Reels). The application leverages Google’s Gemini generative AI, MoviePy for video/audio manipulation, and Flask for the web interface to provide a semi-automated video production process with customizable editing plans.
+---
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Features](#features)
+- [Architecture & Workflow](#architecture--workflow)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Configuration](#configuration)
+- [File Structure](#file-structure)
+- [Contributing](#contributing)
+
+---
+
+## Overview
+
+AVE is built to help users generate short, high-quality, portrait-mode videos that are stylistically aligned with modern, aesthetic standards. It automatically analyzes the provided media files and leverages Google Gemini's 2.5 Pro to create a comprehensive JSON editing plan. This plan details which segments to include, when to apply effects, and how to arrange clips, thereby greatly reducing manual work.
+
+### How It Works
+
+1. **File Upload and Caching:**  
+   Users upload various media files (videos, audios, and images). Each file is hashed and either processed or retrieved from a cache if already available, ensuring efficient re-use of uploads.
+
+2. **Editing Plan Generation:**  
+   With the help of Google Gemini API, the system generates a detailed JSON editing plan. The plan follows a specified structure that includes clip order, start and end times, speed adjustments, optional muting, and overall color adjustments.
+
+3. **Video Assembly:**  
+   The application then processes the clips based on the generated plan. Using MoviePy and FFMPEG under the hood, clips are trimmed, adjusted (including speed and volume), concatenated, and optionally overlaid with transitions and filters.
+
+4. **Progress and Notifications:**  
+   During video processing, users can receive real-time progress updates. Additionally, the system logs all steps for debugging and auditing purposes.
+
+---
+
+## Features
+
+- **AI-Assisted Editing Plan:**  
+  Uses Gemini AI to generate a JSON-based editing plan that incorporates advanced parameters:
+  - Clip selection based on aesthetics
+  - Logical sequencing of clips
+  - Optional speed adjustments and mute settings
+  - Background audio specification and color adjustment hints
+
+- **Media Upload and Caching:**  
+  - Secure file uploads with configurable size limits
+  - SHA256-based file hashing for deduplication and caching
+  - Resilient file processing with automatic timeout handling
+
+- **Video Processing and Assembly:**  
+  - Uses MoviePy and FFMPEG for video processing
+  - Supports effects like speed adjustment, volume control, and color grading
+  - Designed for both low-resolution previews and full HQ processing
+
+- **Progress Monitoring and Logging:**  
+  - Detailed progress updates throughout the processing chain
+  - Logging of each step (file upload, processing progress, plan generation, etc.)
+  - Error handling with descriptive logging for better troubleshooting
+
+- **User Interface & Experience:**  
+  - Modern, responsive, and mobile-friendly web interface built with Flask and a custom HTML/CSS design 
+  - Real-time progress indicators and potential for WebSocket integration in future releases
+
+- **Extensibility:**  
+  - Well-defined modular structure for adding new editing effects and transitions
+  - Prepared for integration with asynchronous task queues (Celery/Redis) for scalability
+  - Possible user authentication modules and file storage enhancements in later versions
+
+---
+
+## Architecture & Workflow
+
+1. **Front-End:**  
+   - A clean and modern web interface served using Flask and rendered by Jinja2 templates.
+   - Supports file selection, form inputs for style description, target duration, and other processing parameters.
+
+2. **Back-End:**  
+   - **Flask Application:** Acts as the central point for handling API requests, file uploads, and processing triggers.
+   - **File Caching & Upload Worker:** Uses threading to manage file uploads and caching using a SHA256 hash.
+   - **Editing Plan Generation:** Interacts with the Gemini AI API to generate and validate a JSON editing plan based on the inputs.
+   - **Video Assembly Engine:** Processes individual clips as per the JSON plan using MoviePy and FFMPEG for final video assembly.
+
+3. **Logging & Cleanup:**  
+   - Comprehensive logging using Python’s logging framework.
+   - Cleanup functions are in place (or scheduled for future automation) for temporary files and cache entries.
+
+---
+
+## Installation
+
+### Prerequisites
+
+- Python 3.8 or above
+- [FFmpeg](https://ffmpeg.org/download.html) installed and available in your system’s PATH
+- A valid API key for the Gemini AI service
+
+### Clone the Repository
+
+```bash
+git clone https://github.com/yourusername/AVE.git
+cd AVE
+```
+
+### Create and Activate a Virtual Environment
+
+```bash
+python -m venv venv
+source venv/bin/activate  # On Windows use: venv\Scripts\activate
+```
+
+### Install Dependencies
+
+```bash
+pip install -r repos/AVE/requirements.txt
+```
+
+### Setting Up the API Key
+
+Edit the configuration in the source code (e.g., in `main.py` or via environment variables) and replace `"YOUR_API_KEY"` with your actual Gemini API key. You may also include other configuration details such as `MODEL_NAME`, `UPLOAD_FOLDER`, and target timeouts.
+
+---
+
+## Usage
+
+### Running the Application
+
+Once you have installed the dependencies and configured your API key, you can start the server with:
+
+```bash
+python repos/AVE/main.py
+```
+
+This will start the Flask server on the configured host/port (defaults to `localhost:7860`).
+
+### Uploading Files and Generating Videos
+
+1. **Navigate to the Web Interface:**  
+   Open your web browser and go to `http://localhost:7860`.
+
+2. **Upload Your Media Files:**  
+   Use the intuitive interface to upload videos, audio tracks, or images. Ensure the files meet the allowed formats (e.g., `mp4`, `mov`, `mp3`, `jpg`, etc.).
+
+3. **Enter Editing Details:**  
+   Fill out the form with your desired style description, target duration, and (optionally) provide a sample video to guide the AI.
+
+4. **Submit and Monitor:**  
+   Submit the form. The system will start processing, and you will receive updates about each stage:
+   - File upload
+   - Editing plan generation
+   - Video processing and assembly
+
+5. **Preview and Download:**  
+   After processing is complete, preview your generated video directly in the browser. Download the final edited video if satisfied with the result.
+
+---
+
+## Configuration
+
+- **File Uploads:**  
+  Configurable settings include allowed file types and maximum file sizes.
+
+- **Timeouts & Caching:**  
+  - `MAX_WAIT_TIME` controls how long the application waits for file processing.
+  - `CACHE_EXPIRY_SECONDS` determines the cache duration for uploaded files.
+
+- **Server Settings:**  
+  The Flask application configuration (like `SERVER_NAME`) is set for both local development and production deployment. Adjust as required when deploying behind proxy servers or on cloud platforms.
+
+- **Logging:**  
+  Adjust logging levels in the configuration. The current setup logs INFO and ERROR levels to give detailed runtime feedback while processing files.
+
+---
+
+## File Structure
+
+```
+AVE/
+├── repos/
+│   └── AVE/
+│       ├── main.py           # Main Flask application and processing code
+│       ├── requirements.txt  # Project dependencies
+│       └── ...               # Other Python modules and helper functions
+├── uploads/                  # Directory for user-uploaded files
+├── output/                   # Directory for generated and final video output
+├── templates/
+│   └── index.html            # Main web interface template
+└── README.md                 # This file
+```
+
+Each section of the code is modularized with clear responsibilities:
+- `main.py` handles the overall video editing process, including file upload, plan generation, and video assembly.
+- Templates and static files deliver a modern, responsive UI.
+- Helper functions manage caching, progress updates, and error handling.
+
+---
+
+## Contributing
+
+Contributions are welcome! If you want to contribute new features, improvements, or fixes:
+
+1. **Fork the Repository:** Create your own fork and clone it locally.
+2. **Create a Branch:** Use feature-specific branches (e.g., `feature-websocket-notifications`).
+3. **Submit a Pull Request:** Provide detailed explanations of your changes and new features.

main.py

@@ -0,0 +1,1315 @@
+import re
+import shutil
+import subprocess
+import tempfile
+import google.generativeai as genai
+from google.generativeai.types import GenerationConfig, File # Import File type
+from moviepy import *
+from moviepy.video.fx import *
+from moviepy.audio.fx.MultiplyVolume import MultiplyVolume
+# --- ADDED IMPORT ---
+from moviepy.audio.AudioClip import CompositeAudioClip
+
+import os, uuid
+import time
+import mimetypes
+import json
+import threading
+from pathlib import Path
+from flask import Flask, render_template, request, url_for, send_file, jsonify
+from werkzeug.utils import secure_filename
+import traceback
+import logging
+from typing import Dict, Any, List, Optional # Optional added
+import hashlib # For file hashing
+
+# Configure logging
+logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
+logger = logging.getLogger(__name__)
+
+# Configuration
+API_KEY = "YOUR_API_KEY" # Replace with your actual key if needed
+# Updated Model Name as requested - DO NOT CHANGE
+MODEL_NAME = "gemini-2.5-pro-exp-03-25"
+UPLOAD_FOLDER = 'uploads'
+FINAL_OUTPUT_FOLDER = 'output'
+ALLOWED_EXTENSIONS = {'mp4', 'mov', 'avi', 'mkv', 'mp3', 'wav', 'jpg', 'jpeg', 'png'}
+MAX_UPLOAD_SIZE = 1 * 1024 * 1024 * 1024  # 1 GB
+MAX_WAIT_TIME = 300  # seconds for Gemini file processing
+
+# --- Global State ---
+progress_updates: Dict[str, Dict[str, Any]] = {}
+background_tasks: Dict[str, threading.Thread] = {}
+intermediate_files_registry: Dict[str, List[str]] = {} # Track intermediate files per request (still needed for potential manual cleanup)
+
+# --- Feature 2: File Caching ---
+# Cache structure: { file_hash: {'file': GeminiFileObject, 'timestamp': float} }
+gemini_file_cache: Dict[str, Dict[str, Any]] = {}
+cache_lock = threading.Lock()
+CACHE_EXPIRY_SECONDS = 24 * 60 * 60 # Cache entries expire after 24 hours (adjust as needed)
+
+# --- Feature 3: HQ Generation ---
+# Stores details needed to re-run a request for HQ
+# Structure: { request_id: {'form_data': Dict, 'file_paths': Dict} }
+request_details_cache: Dict[str, Dict] = {}
+# -------------------------
+
+# Initialize API
+genai.configure(api_key=API_KEY)
+
+# Initialize Flask app
+app = Flask(__name__)
+app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
+app.config['FINAL_OUTPUT_FOLDER'] = FINAL_OUTPUT_FOLDER
+app.config['MAX_CONTENT_LENGTH'] = MAX_UPLOAD_SIZE
+# Ensure SERVER_NAME is set for url_for generation in background threads
+app.config['SERVER_NAME'] = 'localhost:7860' # Or your actual server name/IP if deployed
+
+# Create necessary directories
+os.makedirs(UPLOAD_FOLDER, exist_ok=True)
+os.makedirs(FINAL_OUTPUT_FOLDER, exist_ok=True)
+
+def allowed_file(filename):
+    """Check if the file has an allowed extension."""
+    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+
+# --- Feature 2: File Hashing Helper ---
+def get_file_hash(file_path: str) -> Optional[str]:
+    """Calculates the SHA256 hash of a file."""
+    if not os.path.exists(file_path):
+        return None
+    hasher = hashlib.sha256()
+    try:
+        with open(file_path, 'rb') as file:
+            while True:
+                chunk = file.read(4096) # Read in chunks
+                if not chunk:
+                    break
+                hasher.update(chunk)
+        return hasher.hexdigest()
+    except Exception as e:
+        logger.error(f"Error calculating hash for {file_path}: {e}")
+        return None
+# ------------------------------------
+
+def update_progress(request_id: str, stage: str, message: str, error: str | None = None, result: Dict | None = None):
+    """Update the progress status for a given request ID."""
+    if request_id not in progress_updates:
+        progress_updates[request_id] = {}
+    progress_updates[request_id]['stage'] = stage
+    progress_updates[request_id]['message'] = message
+    progress_updates[request_id]['error'] = error
+    progress_updates[request_id]['result'] = result
+    progress_updates[request_id]['timestamp'] = time.time()
+    logger.info(f"Progress Update [{request_id}] - Stage: {stage}, Message: {message}")
+    if error:
+        logger.error(f"Progress Error [{request_id}]: {error}")
+
+# --- Feature 1: Modified Cleanup ---
+# This function is kept for potential manual cleanup or future use,
+# but it's no longer called automatically in the main flow to delete source files.
+def cleanup_intermediate_files(request_id: str):
+    """Remove temporary files created during processing for a specific request."""
+    files_to_remove = intermediate_files_registry.pop(request_id, [])
+    removed_count = 0
+    failed_count = 0
+    if not files_to_remove:
+        logger.info(f"No intermediate files registered for cleanup for request ID: {request_id}.")
+        return
+
+    logger.info(f"Cleaning up {len(files_to_remove)} intermediate files for request ID: {request_id}...")
+    for file_path in files_to_remove:
+        try:
+            if os.path.exists(file_path):
+                os.remove(file_path)
+                logger.info(f"Removed intermediate file: {file_path} [{request_id}]")
+                removed_count += 1
+            else:
+                logger.warning(f"Intermediate file not found for removal: {file_path} [{request_id}]")
+        except Exception as e:
+            logger.error(f"Failed to remove intermediate file {file_path} [{request_id}]: {e}")
+            failed_count += 1
+    logger.info(f"Intermediate file cleanup for {request_id}: {removed_count} removed, {failed_count} failed.")
+# ---------------------------------
+
+def generate_output_path(base_folder, original_filename, suffix):
+    """Generate a unique output path for a file."""
+    base, ext = os.path.splitext(original_filename)
+    safe_base = "".join(c if c.isalnum() or c in ('_','-') else '_' for c in os.path.basename(base))
+    timestamp = int(time.time() * 1000)
+    os.makedirs(base_folder, exist_ok=True)
+    new_path = os.path.join(base_folder, f"{safe_base}_{suffix}_{timestamp}{ext}")
+    # Intermediate files are now tracked per request ID
+    return new_path
+
+# --- Feature 2: Modified Upload Worker (Now handles caching result) ---
+def upload_thread_worker(request_id: str, file_path: str, file_hash: str, upload_results: Dict[str, Any], upload_errors: Dict[str, str]):
+    """Uploads a file to Gemini API, storing results/errors. Updates cache on success."""
+    global gemini_file_cache, cache_lock # Access global cache and lock
+
+    path = Path(file_path)
+    if not path.exists():
+        error_msg = f"File not found: {file_path}"
+        logger.error(f"Upload Error [{request_id}]: {error_msg}")
+        upload_errors[file_path] = error_msg
+        return
+
+    logger.info(f"Starting upload thread for [{request_id}]: {file_path} (Hash: {file_hash[:8]}...)")
+    uploaded_file = None # Initialize
+    try:
+        mime_type, _ = mimetypes.guess_type(file_path)
+        if mime_type is None:
+            mime_type = "application/octet-stream" # Default fallback
+            logger.warning(f"Could not guess mime type for {file_path}. Using {mime_type}.")
+
+        uploaded_file = genai.upload_file(path=path, mime_type=mime_type)
+        logger.info(f"Upload initiated for [{request_id}]: {file_path}. URI: {uploaded_file.uri}, Name: {uploaded_file.name}")
+
+        logger.info(f"Waiting for processing of {uploaded_file.name} [{request_id}]...")
+        start_time = time.time()
+        while uploaded_file.state.name == "PROCESSING":
+            if time.time() - start_time > MAX_WAIT_TIME:
+                error_msg = f"File processing timed out after {MAX_WAIT_TIME}s for {uploaded_file.name}"
+                logger.error(f"Upload Error [{request_id}]: {error_msg}")
+                upload_errors[file_path] = error_msg
+                # --- Feature 1: No deletion on timeout ---
+                # try:
+                #     genai.delete_file(uploaded_file.name)
+                #     logger.info(f"Deleted timed-out file {uploaded_file.name} [{request_id}]")
+                # except Exception as e:
+                #     logger.error(f"Failed to delete timed-out file {uploaded_file.name} [{request_id}]: {e}")
+                # -----------------------------------------
+                return # Exit thread on timeout
+            time.sleep(5)
+            uploaded_file = genai.get_file(name=uploaded_file.name)
+            logger.info(f"File {uploaded_file.name} state [{request_id}]: {uploaded_file.state.name}")
+
+        if uploaded_file.state.name == "ACTIVE":
+            upload_results[file_path] = uploaded_file
+            logger.info(f"File {uploaded_file.name} is ACTIVE [{request_id}].")
+            # --- Feature 2: Update Cache ---
+            with cache_lock:
+                gemini_file_cache[file_hash] = {'file': uploaded_file, 'timestamp': time.time()}
+                logger.info(f"Added/Updated Gemini file cache for hash {file_hash[:8]}... [{request_id}]")
+            # -----------------------------
+        else:
+            error_msg = f"File processing failed for {uploaded_file.name}. State: {uploaded_file.state.name}"
+            logger.error(f"Upload Error [{request_id}]: {error_msg}")
+            upload_errors[file_path] = error_msg
+            # --- Feature 1: No deletion on failure ---
+            # try:
+            #     genai.delete_file(uploaded_file.name)
+            #     logger.info(f"Deleted failed file {uploaded_file.name} [{request_id}]")
+            # except Exception as e:
+            #     logger.error(f"Failed to delete failed file {uploaded_file.name} [{request_id}]: {e}")
+            # ---------------------------------------
+
+    except Exception as e:
+        error_msg = f"Upload/processing failed for {file_path}: {e}"
+        logger.error(f"Upload Error [{request_id}]: {error_msg}")
+        traceback.print_exc()
+        upload_errors[file_path] = error_msg
+        # --- Feature 1: No deletion on exception ---
+        # if uploaded_file and uploaded_file.name:
+        #     try:
+        #         genai.delete_file(uploaded_file.name)
+        #         logger.info(f"Attempted deletion of file {uploaded_file.name} after exception [{request_id}]")
+        #     except Exception as del_e:
+        #          logger.error(f"Failed to delete file {uploaded_file.name} after exception [{request_id}]: {del_e}")
+        # -----------------------------------------
+# ------------------------------------
+
+def generate_editing_plan(
+    request_id: str,
+    uploaded_file_references: Dict[str, File], # Use File type hint
+    source_media_paths: dict, # Dict mapping type -> list of local paths
+    style_description: str,
+    sample_video_path: str | None,
+    target_duration: float
+):
+    """Generates a JSON editing plan using the Gemini API."""
+    update_progress(request_id, "PLANNING", "Analyzing media and generating editing plan...")
+    logger.info(f"Generating Editing Plan with Gemini [{request_id}]")
+    logger.info(f"Model: {MODEL_NAME}")
+    logger.info(f"Source Media Paths: {source_media_paths}")
+    logger.info(f"Style Description: '{style_description}'")
+    logger.info(f"Sample Video Path: {sample_video_path}")
+    logger.info(f"Target Duration: {target_duration}s")
+
+    prompt_parts = [
+        "You are an AI video editor assistant specializing in creating short, aesthetic, portrait-mode videos (like Instagram Reels). Your task is to analyze the provided media files and generate a detailed JSON plan for creating a video.",
+        f"The user wants a video approximately {target_duration:.1f} seconds long, suitable for portrait display (e.g., 9:16 aspect ratio).",
+        f"The desired style is described as: '{style_description}'. Pay close attention to the request for *aesthetic and beautiful* shots only.",
+    ]
+
+    # Add sample video if available and successfully uploaded/cached
+    if sample_video_path and sample_video_path in uploaded_file_references:
+        sample_file = uploaded_file_references[sample_video_path]
+        prompt_parts.extend([
+            "\nHere is a sample video demonstrating the desired style:",
+            sample_file, # Pass the Gemini File object directly
+        ])
+    elif sample_video_path:
+        prompt_parts.append(f"\n(Note: A style sample video was provided '{os.path.basename(sample_video_path)}' but failed to upload/process or was not found in cache, rely on the text description.)")
+
+    prompt_parts.append("\nAvailable source media files (use these exact paths/keys in your plan):")
+    media_index = 1
+    source_keys = {} # Map generated key (e.g., video_1) back to local path
+
+    # Add videos to prompt
+    for path in source_media_paths.get('videos', []):
+        if path in uploaded_file_references:
+            key = f"video_{media_index}"
+            source_keys[key] = path
+            file_obj = uploaded_file_references[path] # Get the Gemini File object
+            prompt_parts.append(f"- {key}: (Video file '{os.path.basename(path)}')")
+            prompt_parts.append(file_obj) # Pass the Gemini File object
+            media_index += 1
+        else:
+            prompt_parts.append(f"- (Video file '{os.path.basename(path)}' failed upload/processing/cache, cannot use)")
+
+    # Add audio files to prompt
+    audio_index = 1
+    for path in source_media_paths.get('audios', []):
+        if path in uploaded_file_references:
+            key = f"audio_{audio_index}"
+            source_keys[key] = path
+            file_obj = uploaded_file_references[path]
+            prompt_parts.append(f"- {key}: (Audio file '{os.path.basename(path)}')")
+            prompt_parts.append(file_obj)
+            audio_index += 1
+        else:
+            prompt_parts.append(f"- (Audio file '{os.path.basename(path)}' failed upload/processing/cache, cannot use)")
+
+    # Add image files to prompt
+    image_index = 1
+    for path in source_media_paths.get('images', []):
+        if path in uploaded_file_references:
+            key = f"image_{image_index}"
+            source_keys[key] = path
+            file_obj = uploaded_file_references[path]
+            prompt_parts.append(f"- {key}: (Image file '{os.path.basename(path)}')")
+            prompt_parts.append(file_obj)
+            image_index += 1
+        else:
+            prompt_parts.append(f"- (Image file '{os.path.basename(path)}' failed upload/processing/cache, cannot use)")
+
+    prompt_parts.append(f"""
+Instruction: Create a JSON object representing the editing plan. The JSON object should strictly follow this structure:
+{{
+  "description": "A brief text description of the overall video edit.",
+  "clips": [
+    {{
+      "source": "string (key of the source video file, e.g., 'video_1')",
+      "start_time": "float (start time in seconds within the source video)",
+      "end_time": "float (end time in seconds within the source video)",
+      "order": "integer (sequence number, starting from 1)",
+      "mute": "boolean (optional, default false, set to true to mute this clip's audio)",
+      "speed_factor": "float (optional, default 1.0. e.g., 0.5 for slow-mo, 2.0 for fast-forward)"
+    }}
+    // ... more clip objects
+  ],
+  "background_audio": {{
+    "source": "string (key of the source audio file, e.g., 'audio_1', or null if no background audio)",
+    "volume_factor": "float (e.g., 0.7, or null if no audio)"
+  }},
+  "color_adjustments": {{ // Optional overall color adjustment
+    "brightness": "float (optional, e.g., 0.1 to add brightness, -0.1 to reduce. Default 0)",
+    "contrast": "float (optional, e.g., 1.1 for 10% more contrast, 0.9 for 10% less. Default 1.0)"
+  }}
+}}
+
+Guidelines:
+- Select ONLY short, relevant, and HIGHLY AESTHETIC/BEAUTIFUL segments from the source videos that match the style description and sample (if provided). Prioritize quality over quantity, especially for portrait display.
+- The total duration of the combined clips (considering speed adjustments) should be close to the target duration ({target_duration:.1f}s).
+- Order the clips logically using the 'order' field.
+- Use the optional 'speed_factor' field on clips to suggest slow-motion or fast-forward where it enhances the energetic/aesthetic style. Keep factors reasonable (e.g., 0.25 to 4.0).
+- Optionally suggest overall 'color_adjustments' (brightness, contrast) if it fits the mood (e.g., slightly brighter and more contrast for an energetic feel). Keep adjustments subtle.
+- Respond ONLY with the JSON object, nothing else. Ensure the JSON is valid.
+""")
+
+    model = genai.GenerativeModel(
+        MODEL_NAME,
+        generation_config=GenerationConfig(
+            response_mime_type="application/json",
+            temperature=0.5 # Adjust temperature as needed
+        )
+    )
+
+    raw_llm_output = None
+    json_plan_text = None
+
+    try:
+        logger.info(f"Sending Prompt to Gemini for JSON Plan [{request_id}]")
+        # Ensure all parts are strings or File objects
+        valid_prompt_parts = []
+        for part in prompt_parts:
+            if isinstance(part, (str, File)):
+                 valid_prompt_parts.append(part)
+            else:
+                 logger.warning(f"Skipping invalid type in prompt_parts: {type(part)} [{request_id}]")
+
+        response = model.generate_content(valid_prompt_parts)
+        raw_llm_output = response.text
+        logger.info(f"Received Raw LLM Output (length: {len(raw_llm_output)}) [{request_id}]")
+
+        # Attempt to directly parse as JSON first, as per response_mime_type
+        try:
+            plan = json.loads(raw_llm_output)
+            json_plan_text = raw_llm_output # Store for potential error logging
+            logger.info(f"Successfully parsed raw response as JSON [{request_id}].")
+        except json.JSONDecodeError:
+            logger.warning(f"Direct JSON parsing failed [{request_id}]. Trying regex extraction...")
+            # Fallback to regex if direct parsing fails (e.g., if model includes ``` markers despite mime type)
+            match = re.search(r"```(?:json)?\s*(.*?)\s*```", raw_llm_output, re.DOTALL | re.IGNORECASE)
+            if match:
+                json_plan_text = match.group(1).strip()
+                logger.info(f"Extracted JSON block using regex [{request_id}].")
+                plan = json.loads(json_plan_text)
+            else:
+                logger.error(f"Response is not valid JSON and does not contain ```json ... ``` markers [{request_id}].")
+                raise ValueError("LLM response is not valid JSON and could not be extracted.")
+
+        # --- Validation ---
+        if not isinstance(plan, dict):
+            raise ValueError("LLM response parsed, but it is not a JSON object (dictionary).")
+        if 'clips' not in plan or not isinstance(plan['clips'], list):
+            raise ValueError("Parsed JSON plan missing 'clips' list or it's not a list.")
+        if 'background_audio' not in plan or not isinstance(plan['background_audio'], dict):
+            raise ValueError("Parsed JSON plan missing 'background_audio' object or it's not an object.")
+        # Optional: Validate color_adjustments structure if present
+        if 'color_adjustments' in plan and not isinstance(plan['color_adjustments'], dict):
+             raise ValueError("Parsed JSON plan has 'color_adjustments' but it's not an object.")
+
+        logger.info(f"Gemini Plan Extracted and Parsed Successfully [{request_id}]")
+
+        # --- Map source keys back to local paths ---
+        for clip in plan.get('clips', []):
+            key = clip.get('source')
+            if key in source_keys:
+                clip['source_path'] = source_keys[key] # Add local path to the clip info
+            else:
+                available_keys_str = ", ".join(source_keys.keys())
+                raise ValueError(f"Invalid source key '{key}' found in plan['clips']. Available keys: [{available_keys_str}]")
+
+        bg_audio = plan.get('background_audio', {})
+        bg_audio_key = bg_audio.get('source')
+        if bg_audio_key:
+            if bg_audio_key in source_keys:
+                plan['background_audio']['source_path'] = source_keys[bg_audio_key] # Add local path
+            else:
+                available_keys_str = ", ".join(source_keys.keys())
+                raise ValueError(f"Invalid source key '{bg_audio_key}' found in plan['background_audio']. Available keys: [{available_keys_str}]")
+
+        logger.info(f"Source keys mapped successfully [{request_id}].")
+        update_progress(request_id, "PLANNING", "Editing plan generated successfully.")
+        return {'status': 'success', 'plan': plan}
+
+    except json.JSONDecodeError as e:
+        error_msg = f"Failed to parse AI's plan (invalid JSON): {e}"
+        logger.error(f"{error_msg} [{request_id}]")
+        logger.error(f"Text attempted for JSON parsing:\n{json_plan_text if json_plan_text is not None else 'N/A'}")
+        logger.error(f"Original Raw LLM Response was:\n{raw_llm_output if raw_llm_output is not None else 'Response not received'}")
+        update_progress(request_id, "FAILED", "Error generating plan.", error=error_msg)
+        return {'status': 'error', 'message': error_msg}
+
+    except ValueError as e:
+        error_msg = f"AI plan has invalid structure or processing failed: {e}"
+        logger.error(f"{error_msg} [{request_id}]")
+        logger.error(f"Original Raw LLM Response was:\n{raw_llm_output if raw_llm_output is not None else 'Response not received'}")
+        update_progress(request_id, "FAILED", "Error generating plan.", error=error_msg)
+        return {'status': 'error', 'message': error_msg}
+
+    except Exception as e:
+        error_msg = f"An unexpected error occurred during Gemini interaction or plan processing: {e}"
+        logger.error(f"{error_msg} [{request_id}]")
+        traceback.print_exc()
+        logger.error(f"Original Raw LLM Response was:\n{raw_llm_output if raw_llm_output is not None else 'Response not received'}")
+        update_progress(request_id, "FAILED", "Error generating plan.", error=error_msg)
+        return {'status': 'error', 'message': error_msg}
+
+# --- MODIFIED FUNCTION SIGNATURE ---
+def execute_editing_plan(request_id: str, plan: dict, output_filename: str, is_preview: bool = False, mute_all_clips: bool = False) -> dict:
+    """
+    Executes the editing plan by writing individual processed clips to temp files
+    and then concatenating them using FFMPEG for potentially faster processing.
+    """
+    update_progress(request_id, "STARTING", f"Starting video assembly {'(Preview Mode)' if is_preview else ''} (Global Mute: {mute_all_clips}, Method: Temp Files)...")
+    logger.info(f"Executing Editing Plan [{request_id}] {'(Preview Mode)' if is_preview else ''} (Global Mute: {mute_all_clips}, Method: Temp Files)")
+    logger.info(f"Output filename: {output_filename}")
+
+    clips_data = sorted(plan.get('clips', []), key=lambda x: x.get('order', 0))
+    if not clips_data:
+        error_msg = 'No clips found in the editing plan.'
+        update_progress(request_id, "FAILED", "Video assembly failed.", error=error_msg)
+        return {'status': 'error', 'message': error_msg}
+
+    temp_dir = None
+    temp_clip_paths = []
+    concat_list_path = None
+    target_resolution = None # Will be set by the first valid clip, expected portrait
+    target_fps = None # Will be set by the first clip, needed for consistency
+
+    try:
+        # Create a dedicated temporary directory for this request
+        temp_dir = tempfile.mkdtemp(prefix=f"autovideo_{request_id}_")
+        logger.info(f"Created temporary directory: {temp_dir} [{request_id}]")
+
+        num_clips = len(clips_data)
+        for i, clip_info in enumerate(clips_data):
+            source_path = clip_info.get('source_path')
+            start_time = clip_info.get('start_time')
+            end_time = clip_info.get('end_time')
+            order = clip_info.get('order')
+            mute_from_plan = clip_info.get('mute', False)
+            speed_factor = clip_info.get('speed_factor', 1.0)
+
+            update_progress(request_id, "PROCESSING_CLIP", f"Processing clip {i+1}/{num_clips} (Order: {order})...")
+            logger.info(f"Processing clip {order} [{request_id}]: Source='{os.path.basename(source_path)}', Start={start_time:.2f}s, End={end_time:.2f}s, PlanMute={mute_from_plan}, Speed={speed_factor:.2f}x")
+
+            # --- Basic Validation (same as before) ---
+            if not all([source_path, isinstance(start_time, (int, float)), isinstance(end_time, (int, float))]):
+                logger.error(f"Missing or invalid data for clip {order}. Skipping. [{request_id}]")
+                continue
+            if start_time >= end_time:
+                logger.warning(f"Start time ({start_time:.2f}s) >= end time ({end_time:.2f}s) for clip {order}. Skipping. [{request_id}]")
+                continue
+            if not os.path.exists(source_path):
+                logger.error(f"Source video file not found: {source_path} for clip {order}. Skipping. [{request_id}]")
+                continue
+            try:
+                if not isinstance(speed_factor, (int, float)) or speed_factor <= 0:
+                    logger.warning(f"Invalid speed_factor ({speed_factor}) for clip {order}. Using 1.0. [{request_id}]")
+                    speed_factor = 1.0
+            except Exception:
+                 logger.warning(f"Error processing speed_factor for clip {order}. Using 1.0. [{request_id}]")
+                 speed_factor = 1.0
+            # --- End Validation ---
+
+            video = None # Define video variable outside try block for finally clause
+            try:
+                video = VideoFileClip(source_path)
+
+                # --- Determine Target Resolution and FPS from first valid clip ---
+                if target_resolution is None:
+                    temp_res = video.size
+                    temp_fps = video.fps
+                    if temp_res[0] > temp_res[1]: # Landscape detected
+                         logger.warning(f"First clip ({order}) appears landscape ({temp_res[0]}x{temp_res[1]}). Applying portrait rotation fix by resizing.")
+                         # Set target as portrait
+                         target_resolution = (temp_res[1], temp_res[0])
+                    else: # Already portrait
+                         target_resolution = temp_res
+
+                    # Basic FPS check
+                    if not isinstance(temp_fps, (int, float)) or temp_fps <= 0:
+                         logger.warning(f"Could not determine valid FPS ({temp_fps}) from first clip {order}. Defaulting to 30. [{request_id}]")
+                         target_fps = 30.0
+                    else:
+                         target_fps = temp_fps
+
+                    logger.info(f"Target resolution set to {target_resolution[0]}x{target_resolution[1]} [{request_id}].")
+                    logger.info(f"Target FPS set to {target_fps:.2f} [{request_id}].")
+                # --- End Target Determination ---
+
+
+                # --- Apply Portrait Fix / Resize to Target ---
+                resized_clip = video # Start with original
+                if video.size[0] > video.size[1]: # Landscape source
+                    logger.warning(f"Clip {order} source is landscape ({video.size[0]}x{video.size[1]}). Resizing to target portrait {target_resolution}. [{request_id}]")
+                    resized_clip = video.resized(target_resolution)
+                elif video.size != target_resolution: # Portrait source but wrong size
+                    logger.warning(f"Clip {order} resolution {video.size} differs from target {target_resolution}. Resizing. [{request_id}]")
+                    resized_clip = video.resized(target_resolution)
+                # --- End Resize ---
+
+                vid_duration = resized_clip.duration
+                if vid_duration is None:
+                    logger.warning(f"Could not read duration for resized clip {order}. Skipping. [{request_id}]")
+                    continue
+
+                start_time = max(0, min(start_time, vid_duration))
+                end_time = max(start_time, min(end_time, vid_duration))
+
+                if start_time >= end_time:
+                    logger.warning(f"Clamped start time ({start_time:.2f}s) >= end time ({end_time:.2f}s) for clip {order}. Skipping. [{request_id}]")
+                    continue
+
+                original_subclip_duration = end_time - start_time
+                if original_subclip_duration <= 0.01: # Need a small duration
+                    logger.warning(f"Calculated clip duration ({original_subclip_duration:.2f}s) is too short for clip {order}. Skipping. [{request_id}]")
+                    continue
+
+                logger.info(f"Cutting clip {order} from {start_time:.2f}s to {end_time:.2f}s [{request_id}]")
+                subclip = resized_clip.subclipped(start_time, end_time)
+
+                # --- MoviePy v2.0 Effects Application ---
+                effects_to_apply = []
+
+                # Apply speed FIRST
+                if speed_factor != 1.0:
+                    logger.info(f"Applying speed factor {speed_factor:.2f}x to clip {order} [{request_id}]")
+                    speed_effect = MultiplySpeed(factor=speed_factor)
+                    effects_to_apply.append(speed_effect)
+
+                if effects_to_apply:
+                    subclip = subclip.with_effects(effects_to_apply)
+                    if subclip.duration is not None:
+                        logger.info(f"Clip {order} duration after effects: {subclip.duration:.2f}s [{request_id}]")
+                    else:
+                        logger.warning(f"Clip {order} duration unknown after effects. [{request_id}]")
+                # -----------------------------------------
+
+
+                # --- Write Processed Subclip to Temporary File ---
+                temp_filename = f"clip_{order:03d}_{uuid.uuid4().hex[:8]}.mp4"
+                temp_output_path = os.path.join(temp_dir, temp_filename)
+
+                # Define consistent write settings for temp files
+                # Crucial for ffmpeg -c copy to work later
+                temp_write_kwargs = {
+                    "codec": "libx264",         # Standard codec
+                    "audio_codec": "aac",       # Standard codec
+                    "temp_audiofile": os.path.join(temp_dir, f"temp_audio_{order}.m4a"), # Avoid conflicts
+                    "remove_temp": True,
+                    "fps": target_fps,          # Ensure consistent FPS
+                    "logger": "bar",             # Quieter logs for temp writes
+                    # Use preview settings for potentially faster *individual* writes
+                    "preset": 'ultrafast' if is_preview else 'medium',
+                    "bitrate": '1000k' if is_preview else '5000k' # Adjust bitrate as needed
+                }
+
+                update_progress(request_id, "WRITING_TEMP", f"Writing temp clip {i+1}/{num_clips} (Order: {order})...")
+                logger.info(f"Writing temporary clip {order} to {temp_output_path} with FPS={target_fps:.2f} [{request_id}]")
+
+                # Ensure the subclip has audio if it's supposed to
+                if not (mute_all_clips or mute_from_plan) and subclip.audio is None:
+                     logger.warning(f"Clip {order} was supposed to have audio but doesn't after processing. It will be silent in the temp file. [{request_id}]")
+                     # No need to explicitly add silence, ffmpeg handles missing audio streams
+
+                subclip.write_videofile(temp_output_path, **temp_write_kwargs)
+                temp_clip_paths.append(temp_output_path)
+                logger.info(f"Successfully wrote temporary clip {order}. [{request_id}]")
+
+            except Exception as e:
+                logger.error(f"Error processing or writing temp clip {order} from {source_path} [{request_id}]: {e}")
+                traceback.print_exc()
+                # Continue to the next clip
+            finally:
+                # Close the MoviePy objects for this clip *immediately* to free memory
+                if 'subclip' in locals() and subclip:
+                    try: subclip.close()
+                    except Exception as ce: logger.error(f"Error closing subclip object for clip {order} [{request_id}]: {ce}")
+                if 'resized_clip' in locals() and resized_clip != video: # Avoid double close if no resize happened
+                    try: resized_clip.close()
+                    except Exception as ce: logger.error(f"Error closing resized_clip object for clip {order} [{request_id}]: {ce}")
+                if video:
+                    try: video.close()
+                    except Exception as ce: logger.error(f"Error closing source video object for clip {order} [{request_id}]: {ce}")
+
+
+        # --- Concatenate Temporary Clips using FFMPEG ---
+        if not temp_clip_paths:
+            error_msg = 'No valid temporary clips could be created.'
+            update_progress(request_id, "FAILED", "Video assembly failed.", error=error_msg)
+            # Cleanup is handled in the main finally block
+            return {'status': 'error', 'message': error_msg}
+
+        update_progress(request_id, "CONCATENATING", f"Concatenating {len(temp_clip_paths)} temporary clips using FFMPEG...")
+        logger.info(f"Preparing to concatenate {len(temp_clip_paths)} temporary clips via FFMPEG. [{request_id}]")
+
+        # Create the FFMPEG concat list file (using absolute paths is safer)
+        concat_list_path = os.path.join(temp_dir, "concat_list.txt")
+        with open(concat_list_path, 'w') as f:
+            for clip_path in temp_clip_paths:
+                # FFMPEG requires forward slashes, even on Windows, in the concat file
+                # Also escape special characters if any (though uuids shouldn't have them)
+                safe_path = clip_path.replace("\\", "/").replace("'", "'\\''")
+                f.write(f"file '{safe_path}'\n")
+        logger.info(f"Generated FFMPEG concat list: {concat_list_path} [{request_id}]")
+
+        # Define the path for the *intermediate* concatenated video (before audio/color)
+        concatenated_video_path = os.path.join(temp_dir, f"concatenated_{request_id}.mp4")
+
+        # Build the FFMPEG command
+        ffmpeg_cmd = [
+            'ffmpeg',
+            '-y',  # Overwrite output without asking
+            '-f', 'concat',
+            '-safe', '0',  # Allow unsafe file paths (needed for concat demuxer)
+            '-i', concat_list_path,
+            '-c', 'copy',  # CRITICAL: Copy streams without re-encoding (FAST!)
+            '-fflags', '+igndts', # Ignore DTS issues that can arise from concat
+            '-map_metadata', '-1', # Avoid metadata issues from source clips
+            '-movflags', '+faststart', # Good practice for web video
+            concatenated_video_path
+        ]
+
+        logger.info(f"Executing FFMPEG command: {' '.join(ffmpeg_cmd)} [{request_id}]")
+        try:
+            # Use stderr=subprocess.PIPE to capture FFMPEG output for logging/debugging
+            process = subprocess.run(ffmpeg_cmd, check=True, capture_output=True, text=True)
+            logger.info(f"FFMPEG concatenation successful. Output:\n{process.stdout}\n{process.stderr} [{request_id}]")
+        except subprocess.CalledProcessError as e:
+            error_msg = f"FFMPEG concatenation failed with exit code {e.returncode}."
+            logger.error(error_msg + f" [{request_id}]")
+            logger.error(f"FFMPEG stderr:\n{e.stderr}")
+            logger.error(f"FFMPEG stdout:\n{e.stdout}")
+            update_progress(request_id, "FAILED", "FFMPEG concatenation failed.", error=error_msg + f" Details: {e.stderr[:200]}...") # Limit error length
+            # Cleanup handled in finally
+            return {'status': 'error', 'message': error_msg, 'details': e.stderr}
+        except FileNotFoundError:
+            error_msg = "FFMPEG command not found. Ensure FFMPEG is installed and in the system's PATH."
+            logger.error(error_msg + f" [{request_id}]")
+            update_progress(request_id, "FAILED", "FFMPEG not found.", error=error_msg)
+            return {'status': 'error', 'message': error_msg}
+
+
+        # --- Post-Processing: Background Audio & Color Adjustments ---
+        final_processed_path = concatenated_video_path # Start with the ffmpeg output
+        needs_final_write = False # Flag if we need another MoviePy write step
+
+        bg_audio_info = plan.get('background_audio')
+        color_adjustments = plan.get('color_adjustments')
+
+        if bg_audio_info or (color_adjustments and isinstance(color_adjustments, dict)):
+            needs_final_write = True
+            update_progress(request_id, "POST_PROCESSING", "Applying background audio and/or color adjustments...")
+            logger.info(f"Loading concatenated video for post-processing (BG Audio/Color). [{request_id}]")
+
+            post_process_clip = None
+            bg_audio_clip_to_close = None
+            try:
+                post_process_clip = VideoFileClip(concatenated_video_path)
+
+                # --- Background Audio ---
+                bg_audio_path = bg_audio_info.get('source_path') if bg_audio_info else None
+                final_audio = post_process_clip.audio # Get audio from the concatenated clip
+
+                if bg_audio_path and os.path.exists(bg_audio_path):
+                    volume = bg_audio_info.get('volume_factor', 0.7)
+                    if not isinstance(volume, (int, float)) or not (0 <= volume <= 1.5):
+                        logger.warning(f"Invalid background audio volume factor ({volume}). Using default 0.7. [{request_id}]")
+                        volume = 0.7
+
+                    logger.info(f"Adding background audio: '{os.path.basename(bg_audio_path)}' with volume {volume:.2f} [{request_id}]")
+                    try:
+                        bg_audio_clip = AudioFileClip(bg_audio_path)
+                        bg_audio_clip_to_close = bg_audio_clip # Ensure cleanup
+
+                        target_vid_duration = post_process_clip.duration
+                        if target_vid_duration is not None:
+                            if bg_audio_clip.duration > target_vid_duration:
+                                bg_audio_clip = bg_audio_clip.subclipped(0, target_vid_duration)
+                            # Ensure bg audio matches video duration exactly if possible
+                            bg_audio_clip = bg_audio_clip.set_duration(target_vid_duration)
+
+                        processed_bg_audio = bg_audio_clip.fx(MultiplyVolume, volume)
+
+                        if final_audio: # If the concatenated video has audio
+                            logger.info(f"Compositing background audio with existing clip audio. [{request_id}]")
+                            # Ensure original audio matches duration
+                            if final_audio.duration != target_vid_duration:
+                                logger.warning(f"Original concatenated audio duration ({final_audio.duration:.2f}s) doesn't match video duration ({target_vid_duration:.2f}s). Adjusting. [{request_id}]")
+                                final_audio = final_audio.set_duration(target_vid_duration)
+                            final_audio = CompositeAudioClip([final_audio, processed_bg_audio])
+                        else: # If concatenated video was silent
+                            logger.info(f"Setting background audio (concatenated video was silent). [{request_id}]")
+                            final_audio = processed_bg_audio
+
+                        if final_audio and target_vid_duration:
+                            final_audio = final_audio.set_duration(target_vid_duration) # Final duration check
+
+                        post_process_clip = post_process_clip.set_audio(final_audio)
+
+                    except Exception as audio_e:
+                        logger.warning(f"Failed to add background audio during post-processing [{request_id}]: {audio_e}. Proceeding without it.")
+                        traceback.print_exc()
+                        if post_process_clip.audio is None:
+                            logger.warning(f"Final video might be silent after failed BG audio add. [{request_id}]")
+
+                elif bg_audio_path:
+                    logger.warning(f"Background audio file specified ('{os.path.basename(bg_audio_path)}') not found. Skipping BG audio. [{request_id}]")
+                elif post_process_clip.audio is None:
+                     logger.warning(f"No background audio specified and concatenated video is silent. Final video will be silent. [{request_id}]")
+
+
+                # --- Apply Overall Color Adjustments ---
+                if color_adjustments and isinstance(color_adjustments, dict):
+                    raw_brightness = color_adjustments.get('brightness', 0)
+                    raw_contrast = color_adjustments.get('contrast', 1.0)
+                    lum_param = 0
+                    contrast_param = 0.0
+                    apply_color_fx = False
+                    try:
+                        if isinstance(raw_brightness, (int, float)) and -1.0 <= raw_brightness <= 1.0 and raw_brightness != 0:
+                            lum_param = int(raw_brightness * 255)
+                            apply_color_fx = True
+                        if isinstance(raw_contrast, (int, float)) and 0.1 <= raw_contrast <= 3.0 and raw_contrast != 1.0:
+                            contrast_param = raw_contrast - 1.0
+                            apply_color_fx = True
+
+                        if apply_color_fx:
+                            logger.info(f"Applying overall color adjustments: Brightness={raw_brightness:.2f}, Contrast={raw_contrast:.2f} [{request_id}]")
+                            # Moviepy 2.x syntax
+                            post_process_clip = post_process_clip.fx(LumContrast, lum=lum_param, contrast=contrast_param)
+                            # Moviepy 1.x was: post_process_clip = post_process_clip.fx(vfx.lum_contrast, lum=lum_param, contrast=contrast_param)
+
+                    except Exception as e:
+                        logger.error(f"Error applying color adjustments during post-processing: {e} [{request_id}]")
+                        traceback.print_exc()
+
+                # --- Define Final Output Path and Write ---
+                final_output_path = os.path.join(FINAL_OUTPUT_FOLDER, secure_filename(output_filename))
+                os.makedirs(os.path.dirname(final_output_path), exist_ok=True)
+                final_processed_path = final_output_path # Update the path to the *actual* final file
+
+                update_progress(request_id, "WRITING_FINAL", f"Writing final video with post-processing to {os.path.basename(final_output_path)} {'(Preview)' if is_preview else ''}...")
+                logger.info(f"Writing final video (post-processed) to: {final_output_path} [{request_id}] {'(Preview)' if is_preview else ''}")
+
+                final_write_kwargs = {
+                    "codec": "libx264",
+                    "audio_codec": "aac",
+                    "threads": 16,
+                    "logger": 'bar', # Show progress bar for final write
+                    "preset": 'ultrafast' if is_preview else 'medium',
+                    "bitrate": '500k' if is_preview else '50000k' # Use preview/final settings here
+                }
+                post_process_clip.write_videofile(final_output_path, **final_write_kwargs)
+                logger.info(f"Successfully wrote final post-processed video. [{request_id}]")
+
+            except Exception as post_e:
+                 error_msg = f"Failed during post-processing (audio/color) or final write: {post_e}"
+                 logger.error(f"Error during post-processing or final write [{request_id}]: {post_e}")
+                 traceback.print_exc()
+                 update_progress(request_id, "FAILED", "Post-processing/Final Write failed.", error=error_msg)
+                 # Cleanup handled in finally
+                 return {'status': 'error', 'message': error_msg}
+            finally:
+                 # Clean up post-processing clips
+                 if post_process_clip:
+                     try: post_process_clip.close()
+                     except Exception as ce: logger.error(f"Error closing post_process_clip [{request_id}]: {ce}")
+                 if bg_audio_clip_to_close:
+                     try: bg_audio_clip_to_close.close()
+                     except Exception as ce: logger.error(f"Error closing bg_audio_clip_to_close [{request_id}]: {ce}")
+
+        else:
+            # No post-processing needed, the FFMPEG output is the final output.
+            # Move/Rename it to the final destination.
+            final_output_path = os.path.join(FINAL_OUTPUT_FOLDER, secure_filename(output_filename))
+            os.makedirs(os.path.dirname(final_output_path), exist_ok=True)
+            logger.info(f"No post-processing needed. Moving concatenated file to final destination: {final_output_path} [{request_id}]")
+            try:
+                shutil.move(concatenated_video_path, final_output_path)
+                final_processed_path = final_output_path # Update to the final path
+                logger.info(f"Successfully moved concatenated video to final path. [{request_id}]")
+            except Exception as move_e:
+                error_msg = f"Failed to move concatenated video to final destination: {move_e}"
+                logger.error(error_msg + f" [{request_id}]")
+                update_progress(request_id, "FAILED", "Failed to finalize video.", error=error_msg)
+                # Cleanup handled in finally
+                return {'status': 'error', 'message': error_msg}
+
+
+        logger.info(f"Plan Execution Successful [{request_id}]")
+        update_progress(request_id, "COMPLETED", f"Video assembly complete: {os.path.basename(final_processed_path)}")
+        return {'status': 'success', 'output_path': final_processed_path}
+
+    except Exception as e:
+        # Catch-all for unexpected errors during setup or flow control
+        error_msg = f"An unexpected error occurred during video processing: {e}"
+        logger.error(f"Unexpected error in execute_editing_plan [{request_id}]: {e}")
+        logger.error(f"Error Type: {type(e).__name__}")
+        traceback.print_exc()
+        update_progress(request_id, "FAILED", "Unexpected processing error.", error=error_msg)
+        return {'status': 'error', 'message': error_msg}
+
+    finally:
+        # --- Cleanup Temporary Files and Directory ---
+        if temp_dir and os.path.exists(temp_dir):
+            logger.info(f"Cleaning up temporary directory: {temp_dir} [{request_id}]")
+            try:
+                shutil.rmtree(temp_dir)
+                logger.info(f"Successfully removed temporary directory. [{request_id}]")
+            except Exception as cleanup_e:
+                logger.error(f"Error removing temporary directory {temp_dir} [{request_id}]: {cleanup_e}")
+        # Note: MoviePy clip objects should have been closed within the loop or post-processing block
+        
+# --- Feature 2: Cache Cleanup Function ---
+def cleanup_expired_cache():
+    """Removes expired entries from the Gemini file cache."""
+    global gemini_file_cache, cache_lock
+    now = time.time()
+    expired_hashes = []
+    with cache_lock:
+        for file_hash, data in gemini_file_cache.items():
+            if now - data.get('timestamp', 0) > CACHE_EXPIRY_SECONDS:
+                expired_hashes.append(file_hash)
+
+        if expired_hashes:
+            logger.info(f"Cleaning up {len(expired_hashes)} expired Gemini cache entries...")
+            for file_hash in expired_hashes:
+                # --- Feature 1: No Deletion from Gemini API ---
+                # cached_file = gemini_file_cache[file_hash].get('file')
+                # if cached_file and hasattr(cached_file, 'name') and cached_file.name:
+                #     try:
+                #         genai.delete_file(cached_file.name)
+                #         logger.info(f"Deleted expired Gemini file from cache: {cached_file.name} (Hash: {file_hash[:8]}...)")
+                #     except Exception as del_e:
+                #         logger.error(f"Failed to delete expired Gemini file {cached_file.name} from cache: {del_e}")
+                # else:
+                #      logger.warning(f"Could not delete expired Gemini file for hash {file_hash[:8]}... (File object missing or invalid)")
+                # ---------------------------------------------
+                del gemini_file_cache[file_hash]
+                logger.info(f"Removed expired cache entry for hash: {file_hash[:8]}...")
+            logger.info("Expired Gemini cache cleanup finished.")
+# ------------------------------------
+
+# --- Feature 3: Request Details Cache Cleanup ---
+def cleanup_expired_request_details():
+    """Removes old request details from the cache."""
+    global request_details_cache
+    expiry_time = time.time() - (48 * 60 * 60)
+    ids_to_remove = [
+        req_id for req_id, details in request_details_cache.items()
+        if details.get('timestamp', 0) < expiry_time
+    ]
+    if ids_to_remove:
+        logger.info(f"Cleaning up {len(ids_to_remove)} expired request details entries...")
+        for req_id in ids_to_remove:
+            if req_id in request_details_cache:
+                del request_details_cache[req_id]
+                logger.info(f"Removed expired request details for ID: {req_id}")
+        logger.info("Expired request details cleanup finished.")
+# ------------------------------------------
+
+def process_video_request(request_id: str, form_data: Dict, file_paths: Dict, app: Flask):
+    """
+    The main logic for processing a video request, run in a background thread.
+    Handles file caching and avoids deleting files.
+    """
+    global intermediate_files_registry, progress_updates, gemini_file_cache, cache_lock
+
+    uploaded_file_references: Dict[str, File] = {}
+    upload_errors: Dict[str, str] = {}
+    upload_threads = []
+
+    try:
+        # Extract data needed for processing
+        style_description = form_data.get('style_desc', '')
+        target_duration = form_data.get('duration')
+        output_filename = form_data.get('output')
+        is_preview = form_data.get('is_preview', False)
+        # --- ADDED: Get the global mute flag ---
+        mute_all_clips_flag = form_data.get('mute_audio', False)
+        # ---------------------------------------
+        style_sample_path = file_paths.get('style_sample')
+        source_media_paths = file_paths.get('sources', {})
+
+        # --- 1. Identify files for Gemini API & Check Cache ---
+        files_to_upload_api = []
+        files_requiring_api = []
+        if style_sample_path:
+            files_requiring_api.append(style_sample_path)
+        files_requiring_api.extend(source_media_paths.get('videos', []))
+        files_requiring_api.extend(source_media_paths.get('audios', []))
+        files_requiring_api.extend(source_media_paths.get('images', []))
+
+        if not source_media_paths.get('videos'):
+             raise ValueError("No source videos provided for processing.")
+
+        logger.info(f"Checking cache for {len(files_requiring_api)} files potentially needing API processing [{request_id}]...")
+        update_progress(request_id, "PREPARING", "Checking file cache...")
+
+        # --- Feature 2: Cache Check ---
+        cleanup_expired_cache()
+        with cache_lock:
+            for file_path in files_requiring_api:
+                file_hash = get_file_hash(file_path)
+                if not file_hash:
+                    logger.warning(f"Could not calculate hash for {file_path}. Will attempt upload. [{request_id}]")
+                    files_to_upload_api.append((file_path, None))
+                    continue
+
+                cached_data = gemini_file_cache.get(file_hash)
+                if cached_data:
+                    cached_file = cached_data.get('file')
+                    try:
+                        retrieved_file = genai.get_file(name=cached_file.name)
+                        if retrieved_file.state.name == "ACTIVE":
+                            logger.info(f"Cache HIT: Using cached Gemini file '{cached_file.name}' for {os.path.basename(file_path)} (Hash: {file_hash[:8]}...) [{request_id}]")
+                            uploaded_file_references[file_path] = retrieved_file
+                            gemini_file_cache[file_hash]['timestamp'] = time.time()
+                        else:
+                            logger.warning(f"Cache INVALID: Cached Gemini file '{cached_file.name}' for {os.path.basename(file_path)} is no longer ACTIVE (State: {retrieved_file.state.name}). Will re-upload. [{request_id}]")
+                            files_to_upload_api.append((file_path, file_hash))
+                            del gemini_file_cache[file_hash]
+                    except Exception as get_err:
+                        logger.warning(f"Cache CHECK FAILED: Error verifying cached Gemini file '{cached_file.name}' for {os.path.basename(file_path)}: {get_err}. Will re-upload. [{request_id}]")
+                        files_to_upload_api.append((file_path, file_hash))
+                        if file_hash in gemini_file_cache:
+                             del gemini_file_cache[file_hash]
+                else:
+                    logger.info(f"Cache MISS: File {os.path.basename(file_path)} (Hash: {file_hash[:8]}...) not found in cache. Will upload. [{request_id}]")
+                    files_to_upload_api.append((file_path, file_hash))
+        # -----------------------------
+
+        # --- 2. Upload necessary files to Gemini API concurrently ---
+        if not files_to_upload_api:
+             logger.info(f"All required files found in cache. No API uploads needed for request {request_id}.")
+        else:
+            update_progress(request_id, "UPLOADING", f"Uploading {len(files_to_upload_api)} files to processing service...")
+            logger.info(f"Starting Gemini API uploads for {len(files_to_upload_api)} files [{request_id}]...")
+
+            for file_path, file_hash in files_to_upload_api:
+                if file_hash is None:
+                    file_hash = f"no_hash_{uuid.uuid4()}"
+                thread = threading.Thread(target=upload_thread_worker, args=(request_id, file_path, file_hash, uploaded_file_references, upload_errors))
+                upload_threads.append(thread)
+                thread.start()
+
+            for i, thread in enumerate(upload_threads):
+                thread.join()
+                update_progress(request_id, "UPLOADING", f"Processing uploaded files ({i+1}/{len(files_to_upload_api)} complete)...")
+
+            logger.info(f"All upload threads finished for [{request_id}].")
+
+            if upload_errors:
+                error_summary = "; ".join(f"{os.path.basename(k)}: {v}" for k, v in upload_errors.items())
+                for fp, err in upload_errors.items():
+                     logger.error(f"Upload/Processing Error for {os.path.basename(fp)} [{request_id}]: {err}")
+                all_source_videos = source_media_paths.get('videos', [])
+                available_source_videos = [p for p in all_source_videos if p in uploaded_file_references]
+                if not available_source_videos:
+                     raise ValueError(f"All source videos failed upload/processing or cache retrieval: {error_summary}")
+                else:
+                     logger.warning(f"Some files failed upload/processing, continuing if possible: {error_summary}")
+
+        if not any(p in uploaded_file_references for p in source_media_paths.get('videos', [])):
+             raise ValueError("API analysis requires source videos, but none are available via cache or successful upload.")
+
+        logger.info(f"Proceeding to plan generation. API references available for {len(uploaded_file_references)} files. [{request_id}].")
+
+        # --- 3. Generate Editing Plan ---
+        plan_result = generate_editing_plan(
+            request_id=request_id,
+            uploaded_file_references=uploaded_file_references,
+            source_media_paths=source_media_paths,
+            style_description=style_description,
+            sample_video_path=style_sample_path,
+            target_duration=target_duration
+        )
+
+        if plan_result['status'] != 'success':
+            raise ValueError(f"Failed to generate editing plan: {plan_result['message']}")
+
+        editing_plan = plan_result['plan']
+        logger.info(f"Generated Editing Plan Successfully [{request_id}]")
+
+        # --- 4. Execute Editing Plan ---
+        # --- MODIFIED: Pass the mute_all_clips_flag here ---
+        execution_result = execute_editing_plan(
+            request_id=request_id,
+            plan=editing_plan,
+            output_filename=output_filename,
+            is_preview=is_preview,
+            mute_all_clips=mute_all_clips_flag # Pass the flag
+        )
+        # -------------------------------------------------
+
+        # --- Handle Execution Result ---
+        if execution_result['status'] == 'success':
+            final_output_path = execution_result['output_path']
+            final_output_basename = os.path.basename(final_output_path)
+
+            logger.info(f"Video editing successful. Output path: {final_output_path} [{request_id}]")
+            logger.info(f"Preparing final result for request {request_id}. Filename: {final_output_basename}")
+
+            with app.app_context():
+                try:
+                    video_url = url_for('download_file', filename=final_output_basename, _external=False)
+                    logger.info(f"Download URL generated within context: {video_url} [{request_id}]")
+
+                    result_data = {
+                        'status': 'success',
+                        'message': f"Video {'preview ' if is_preview else ''}generated successfully!",
+                        'video_url': video_url,
+                        'output_filename': final_output_basename,
+                        'is_preview': is_preview,
+                        'request_id': request_id
+                    }
+                    update_progress(request_id, "COMPLETED", f"Video generation finished successfully {'(Preview)' if is_preview else ''}.", result=result_data)
+                    logger.info(f"Final success status updated for request {request_id}.")
+
+                except Exception as url_gen_e:
+                    logger.error(f"Error generating download URL within context for request {request_id}: {url_gen_e}")
+                    traceback.print_exc()
+                    update_progress(request_id, "FAILED", "Video generated, but failed to create download link.", error=str(url_gen_e))
+
+        else:
+            logger.error(f"Video execution plan failed for request {request_id}. Status should already be FAILED.")
+
+    except Exception as e:
+        logger.error(f"--- Unhandled Error in process_video_request Thread [{request_id}] ---")
+        logger.error(f"Error Type: {type(e).__name__}")
+        logger.error(f"Error Message: {e}")
+        traceback.print_exc()
+        current_status = progress_updates.get(request_id, {}).get('stage', 'UNKNOWN')
+        if current_status != "FAILED":
+             update_progress(request_id, "FAILED", "An unexpected error occurred during processing.", error=str(e))
+
+    finally:
+        # --- 5. Cleanup ---
+        logger.info(f"Initiating cleanup for request {request_id}...")
+        logger.info(f"Skipping deletion of Gemini API files for request {request_id} (Feature 1).")
+        logger.info(f"Skipping deletion of local intermediate files in '{UPLOAD_FOLDER}' for request {request_id} (Feature 1).")
+
+        if request_id in background_tasks:
+            try:
+                del background_tasks[request_id]
+                logger.info(f"Removed background task entry for completed/failed request {request_id}")
+            except KeyError:
+                 logger.warning(f"Tried to remove background task entry for {request_id}, but it was already gone.")
+
+        logger.info(f"Processing finished for request {request_id}.")
+
+
+# --- Flask Routes ---
+
+# Default style description constant
+DEFAULT_STYLE_DESCRIPTION = """Project Goal: Create a fast-paced, energetic, and aesthetically beautiful promotional video showcasing the product for an Instagram home decor/kitchen channel.
+
+Pacing: Fast, energetic, engaging.
+Editing: Quick cuts.
+Visuals: HIGHLY aesthetic, clean, beautiful shots ONLY. Focus on quality over quantity. Prioritize well-lit, well-composed footage. Do NOT use any mediocre or subpar shots, even if provided.
+
+Pacing and Cuts:
+Quick Cuts: Keep shot durations short (e.g., 0.5 seconds to 2 seconds max per clip).
+Transitions: Mostly hard cuts will work best for this style. Avoid slow fades or complex wipes unless one specifically enhances the aesthetic (e.g., a very quick, clean wipe or maybe a smooth match-cut if the footage allows).
+
+It's not a tutorial, it's a vibe."""
+
+
+@app.route('/', methods=['GET'])
+def index_get():
+    now = time.time()
+    ids_to_clean_progress = [rid for rid, data in list(progress_updates.items())
+                             if now - data.get('timestamp', 0) > 3600 * 48]
+    for rid in ids_to_clean_progress:
+        if rid not in background_tasks:
+            if rid in progress_updates:
+                del progress_updates[rid]
+                logger.info(f"Cleaned up old progress entry: {rid}")
+
+    cleanup_expired_request_details()
+    cleanup_expired_cache()
+
+    return render_template('index.html', default_style_desc=DEFAULT_STYLE_DESCRIPTION)
+
+@app.route('/generate', methods=['POST'])
+def generate_video_post():
+    global background_tasks, intermediate_files_registry, request_details_cache
+
+    request_id = str(uuid.uuid4())
+    intermediate_files_registry[request_id] = []
+
+    try:
+        # --- Form Data Validation ---
+        style_description = request.form.get('style_desc', '').strip()
+        target_duration_str = request.form.get('duration')
+        output_filename_base = secure_filename(request.form.get('output', f'ai_edited_video_{request_id[:8]}'))
+        output_filename_base = os.path.splitext(output_filename_base)[0]
+
+        if not style_description:
+            style_description = DEFAULT_STYLE_DESCRIPTION
+            logger.info(f"Using default style description for request {request_id}")
+
+        try:
+            target_duration = float(target_duration_str)
+            if target_duration <= 0: raise ValueError("Duration must be positive")
+        except (ValueError, TypeError):
+            return jsonify({'status': 'error', 'message': 'Invalid target duration. Please enter a positive number.'}), 400
+
+        is_preview = request.form.get('generate_preview') == 'on'
+        logger.info(f"Request {request_id} - Preview Mode: {is_preview}")
+
+        # --- ADDED: Get Mute flag ---
+        mute_audio_flag = request.form.get('mute_audio') == 'on'
+        logger.info(f"Request {request_id} - Mute Original Audio: {mute_audio_flag}")
+        # --------------------------
+
+        output_suffix = "_preview" if is_preview else "_hq"
+        output_filename = f"{output_filename_base}{output_suffix}.mp4"
+
+        # --- File Handling ---
+        saved_file_paths = {"sources": {"videos": [], "audios": [], "images": []}, "style_sample": None}
+        request_files = request.files
+
+        def save_file(file_storage, category, prefix="source"):
+            if file_storage and file_storage.filename:
+                if allowed_file(file_storage.filename):
+                    base, ext = os.path.splitext(file_storage.filename)
+                    safe_base = "".join(c if c.isalnum() or c in ('_','-','.') else '_' for c in base)
+                    filename = secure_filename(f"{prefix}_{safe_base}_{request_id[:8]}{ext}")
+                    save_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+                    try:
+                        file_storage.save(save_path)
+                        intermediate_files_registry[request_id].append(save_path)
+                        logger.info(f"Saved uploaded file [{request_id}]: {save_path}")
+
+                        if category == "style_sample":
+                            saved_file_paths["style_sample"] = save_path
+                        elif category in saved_file_paths["sources"]:
+                            saved_file_paths["sources"][category].append(save_path)
+                        return None
+                    except Exception as save_err:
+                        logger.error(f"Failed to save file {filename} to {save_path}: {save_err}")
+                        return f"Error saving file: {file_storage.filename}"
+                else:
+                    return f"Invalid file type for {category}: {file_storage.filename}"
+            return None
+
+        style_sample_error = save_file(request_files.get('style_sample'), "style_sample", prefix="style")
+        if style_sample_error: return jsonify({'status': 'error', 'message': style_sample_error}), 400
+
+        videos = request_files.getlist('videos[]')
+        if not videos or all(not f.filename for f in videos):
+            return jsonify({'status': 'error', 'message': 'Please upload at least one source video.'}), 400
+
+        for video in videos:
+            video_error = save_file(video, "videos")
+            if video_error:
+                return jsonify({'status': 'error', 'message': video_error}), 400
+
+        if not saved_file_paths["sources"]["videos"]:
+             return jsonify({'status': 'error', 'message': 'Failed to save any source videos. Check file types and permissions.'}), 400
+
+        for audio in request_files.getlist('audios[]'):
+            audio_error = save_file(audio, "audios")
+            if audio_error:
+                return jsonify({'status': 'error', 'message': audio_error}), 400
+
+        for image in request_files.getlist('images[]'):
+            image_error = save_file(image, "images")
+            if image_error:
+                return jsonify({'status': 'error', 'message': image_error}), 400
+
+        # --- Prepare Data for Background Thread ---
+        # --- MODIFIED: Added mute_audio flag ---
+        form_data_for_thread = {
+            'style_desc': style_description,
+            'duration': target_duration,
+            'output': output_filename,
+            'is_preview': is_preview,
+            'mute_audio': mute_audio_flag
+        }
+        # ---------------------------------------
+
+        # --- Feature 3: Store Request Details ---
+        request_details_cache[request_id] = {
+            'form_data': form_data_for_thread.copy(),
+            'file_paths': saved_file_paths.copy(),
+            'timestamp': time.time()
+        }
+        logger.info(f"Stored request details for potential HQ generation. ID: {request_id}")
+        # --------------------------------------
+
+        # --- Start Background Thread ---
+        update_progress(request_id, "RECEIVED", "Request received. Initializing processing...")
+        thread = threading.Thread(target=process_video_request, args=(request_id, form_data_for_thread, saved_file_paths, app))
+        background_tasks[request_id] = thread
+        thread.start()
+
+        logger.info(f"Started background processing thread for request ID: {request_id}")
+
+        # --- Return Immediate Response ---
+        return jsonify({
+            'status': 'processing_started',
+            'message': 'Video generation process started. You can monitor the progress.',
+            'request_id': request_id
+        })
+
+    except Exception as e:
+        logger.error(f"--- Error in /generate endpoint before starting thread [{request_id}] ---")
+        traceback.print_exc()
+        return jsonify({'status': 'error', 'message': f"An internal server error occurred during setup: {e}"}), 500
+
+# --- Feature 3: New Route for High-Quality Generation ---
+@app.route('/generate-hq/<preview_request_id>', methods=['POST'])
+def generate_high_quality_video(preview_request_id):
+    global background_tasks, request_details_cache
+
+    logger.info(f"Received request to generate High Quality video based on preview ID: {preview_request_id}")
+
+    original_details = request_details_cache.get(preview_request_id)
+    if not original_details:
+        logger.error(f"Original request details not found for preview ID: {preview_request_id}")
+        return jsonify({'status': 'error', 'message': 'Original request details not found. Cannot generate high-quality version.'}), 404
+
+    hq_request_id = str(uuid.uuid4())
+    logger.info(f"Generating HQ video with new request ID: {hq_request_id}")
+
+    hq_form_data = original_details['form_data'].copy()
+    hq_form_data['is_preview'] = False # Set to HQ mode
+
+    base_output_name = os.path.splitext(hq_form_data['output'])[0]
+    if base_output_name.endswith('_preview'):
+        base_output_name = base_output_name[:-len('_preview')]
+    hq_form_data['output'] = f"{base_output_name}_hq.mp4"
+
+    hq_file_paths = original_details['file_paths'].copy()
+
+    request_details_cache[hq_request_id] = {
+        'form_data': hq_form_data.copy(),
+        'file_paths': hq_file_paths.copy(),
+        'timestamp': time.time(),
+        'based_on_preview_id': preview_request_id
+    }
+
+    update_progress(hq_request_id, "RECEIVED", "High-Quality generation request received. Initializing...")
+    thread = threading.Thread(target=process_video_request, args=(hq_request_id, hq_form_data, hq_file_paths, app))
+    background_tasks[hq_request_id] = thread
+    thread.start()
+
+    logger.info(f"Started background processing thread for HQ request ID: {hq_request_id}")
+
+    return jsonify({
+        'status': 'processing_started',
+        'message': 'High-Quality video generation process started.',
+        'request_id': hq_request_id
+    })
+# ----------------------------------------------------
+
+@app.route('/progress/<request_id>', methods=['GET'])
+def get_progress(request_id):
+    """Endpoint for the client to poll for progress updates."""
+    progress_data = progress_updates.get(request_id)
+
+    if not progress_data:
+        return jsonify({"stage": "UNKNOWN", "message": "Request ID not found or expired.", "error": None, "result": None}), 404
+
+    return jsonify(progress_data)
+
+
+@app.route('/output/<path:filename>')
+def download_file(filename):
+    """Serves the final generated video file."""
+    safe_filename = secure_filename(filename)
+    if safe_filename != filename or '/' in filename or '\\' in filename:
+        logger.warning(f"Attempt to access potentially unsafe path rejected: {filename}")
+        return "Invalid filename", 400
+
+    file_path = os.path.join(app.config['FINAL_OUTPUT_FOLDER'], safe_filename)
+    logger.info(f"Attempting to send file: {file_path}")
+
+    if not os.path.exists(file_path):
+         logger.error(f"Download request: File not found at {file_path}")
+         return "File not found", 404
+
+    response = send_file(file_path, as_attachment=False)
+    return response
+
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860, debug=False, threaded=True)

requirements.txt

@@ -0,0 +1,3 @@
+Flask
+google-generativeai
+moviepy

templates/index.html

@@ -0,0 +1,385 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AVE - AI Video Editor</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Faculty+Glyphic&family=Funnel+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <style>
+        :root {
+            --primary-color: #20c997;
+            --secondary-color: #0dcaf0;
+            --dark-bg: #12141c;
+            --card-bg: #252a41;
+            --card-bg-transparent: rgba(37, 42, 65, 0.9);
+            --input-bg: rgba(0, 0, 0, 0.2);
+            --input-focus-bg: rgba(0, 0, 0, 0.3);
+            --input-border: rgba(255, 255, 255, 0.1);
+            --input-focus-border: var(--secondary-color);
+            --text-primary: #ffffff;
+            --text-secondary: #e5e7eb;
+            --text-muted: #9ca3af;
+            --success-color: #4ade80;
+            --success-bg: rgba(74, 222, 128, 0.1);
+            --error-color: #f87171;
+            --error-bg: rgba(248, 113, 113, 0.1);
+            --gradient-start: #0d6efd;
+            --gradient-mid: var(--primary-color);
+            --gradient-end: var(--secondary-color);
+            --secondary-color-rgb: 13, 202, 240;
+            --switch-bg-off: #4b5563;
+            --switch-bg-on: linear-gradient(135deg, var(--gradient-start), var(--gradient-mid));
+            --border-radius-lg: 16px;
+            --border-radius-md: 12px;
+            --border-radius-sm: 8px;
+            --border-radius-pill: 34px;
+        }
+        body { font-family: "Faculty Glyphic", serif; margin: 0; padding: 0; background-color: var(--dark-bg); color: var(--text-secondary); line-height: 1.7; overflow-x: hidden; overflow-y: auto; position: relative; }
+        #fluid-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
+        .container { background-color: var(--card-bg-transparent); padding: 25px 30px; border-radius: var(--border-radius-lg); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4); width: 100%; max-width: 1500px; box-sizing: border-box; position: relative; overflow: hidden; z-index: 1; margin: 40px auto; }
+        .container::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(to right, var(--gradient-start), var(--gradient-mid), var(--gradient-end)); border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0; opacity: 0.8; z-index: 2; }
+        .content-wrapper { position: relative; z-index: 1; }
+        h1, h2 { text-align: center; color: var(--text-primary); margin-bottom: 35px; font-family: "Faculty Glyphic", sans-serif; font-weight: 700; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); }
+        h1 { font-size: 2.4rem; margin-bottom: 45px; }
+        h2 { font-size: 1.8rem; margin-top: 45px; }
+        h1 i { margin-right: 12px; background: linear-gradient(to right, var(--gradient-start), var(--gradient-mid), var(--gradient-end)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; font-size: 0.9em; vertical-align: middle; }
+        .main-card { background: linear-gradient(135deg, rgba(13, 110, 253, 0.1), rgba(32, 201, 151, 0.1), rgba(13, 202, 240, 0.1)); padding: 25px 35px; border-radius: var(--border-radius-md); margin-bottom: 45px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); text-align: center; }
+        .main-title { color: var(--text-primary); font-size: 1.6rem; margin-bottom: 10px; font-family: "Funnel Sans", sans-serif; font-weight: 700; }
+        .main-subtitle { color: var(--text-secondary); font-size: 1.1rem; margin-bottom: 0; font-family: "Faculty Glyphic", serif; }
+        .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; margin-bottom: 35px; }
+        .form-group { margin-bottom: 0; background-color: rgba(255, 255, 255, 0.04); padding: 18px 18px 12px 18px; border-radius: var(--border-radius-md); transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; border: 1px solid transparent; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; min-height: 170px; }
+        .form-group-span-full { grid-column: 1 / -1; min-height: auto; margin-bottom: 20px; }
+        .form-group-span-full:last-of-type { margin-bottom: 0; }
+        .form-group:has(input[type="number"]), .form-group:has(select) { justify-content: center; text-align: center; min-height: auto; }
+        .form-group:focus-within:not(.switch-group-box) { background-color: rgba(255, 255, 255, 0.07); border-color: rgba(var(--secondary-color-rgb), 0.3); box-shadow: 0 0 15px rgba(var(--secondary-color-rgb), 0.1); }
+        .form-group:has(input[type="number"]) label, .form-group:has(select) label { justify-content: center; margin-bottom: 10px; }
+        .form-group:has(input[type="file"]) label:not(.file-input-label) { justify-content: flex-start; }
+        .form-group label:not(.switch-text-label):not(.file-input-label) { display: flex; align-items: center; margin-bottom: 12px; font-weight: 700; color: var(--text-secondary); font-size: 0.95rem; flex-shrink: 0; font-family: "Faculty Glyphic", serif; }
+        .form-group label:not(.switch-text-label):not(.file-input-label) i { margin-right: 10px; color: var(--text-muted); width: 1.1em; text-align: center; transition: color 0.3s ease; font-size: 1em; }
+        .form-group:focus-within:not(.switch-group-box) label:not(.switch-text-label):not(.file-input-label) i { color: var(--secondary-color); }
+        .form-group input[type="text"], .form-group input[type="number"], .form-group select, .form-group textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--input-border); border-radius: var(--border-radius-sm); box-sizing: border-box; font-size: 1rem; transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; background-color: var(--input-bg); color: var(--text-primary); flex-grow: 0; margin-bottom: 10px; font-family: "Faculty Glyphic", serif; }
+        .form-group input[type="number"] { text-align: center; }
+        .form-group select { appearance: none; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23cccccc%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C/svg%3E'); background-repeat: no-repeat; background-position: right 14px center; background-size: 11px auto; padding-right: 40px; }
+        .form-group:has(select) select { text-align: center; padding-left: 40px; }
+        .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-muted); opacity: 0.7; font-family: "Faculty Glyphic", serif; }
+        .form-group input[type="text"]:focus, .form-group input[type="number"]:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--input-focus-border); outline: none; box-shadow: 0 0 0 3px rgba(var(--secondary-color-rgb), 0.25); background-color: var(--input-focus-bg); }
+        .form-group input:focus, .form-group select:focus { box-shadow: 0 0 8px rgba(var(--secondary-color-rgb), 0.8); }
+        .form-group textarea { resize: vertical; flex-grow: 1; min-height: 70px; }
+        .form-group input[type="file"] { opacity: 0; position: absolute; z-index: -1; left: 0; top: 0; width: 1px; height: 1px; }
+        .file-input-label { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 15px; border: 1px dashed var(--input-border); border-radius: var(--border-radius-sm); background-color: var(--input-bg); color: var(--text-muted); cursor: pointer; transition: all 0.3s ease; font-size: 0.9rem; margin-bottom: 10px; text-align: center; width: 100%; box-sizing: border-box; min-height: 75px; flex-grow: 1; font-family: "Faculty Glyphic", serif; }
+        .file-input-label i { margin-right: 0; margin-bottom: 8px; font-size: 1.2em; }
+        .file-input-label span { display: block; }
+        .file-input-label:hover { border-color: var(--secondary-color); color: var(--secondary-color); background-color: var(--input-focus-bg); }
+        .file-name-display { font-size: 0.85rem; color: var(--text-muted); margin-top: 0px; margin-bottom: 10px; display: block; min-height: 1.2em; word-break: break-all; text-align: center; font-family: "Faculty Glyphic", serif; }
+        .form-group small { font-size: 0.8rem; color: var(--text-muted); display: block; margin-top: auto; padding-top: 8px; font-family: 'Faculty Glyphic', serif; font-style: italic; opacity: 0.8; flex-shrink: 0; text-align: left; line-height: 1.3; }
+        .form-group:has(input[type="number"]) small, .form-group:has(select) small, .form-group:has(input[type="file"]) small { text-align: center; }
+        .form-group:has(.switch-wrapper) { background-color: rgba(255, 255, 255, 0.04); padding: 15px 20px; border-radius: var(--border-radius-md); border: 1px solid transparent; transition: background-color 0.3s ease, border-color 0.3s ease; min-height: auto; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
+        .form-group:has(.switch-wrapper):focus-within { background-color: rgba(255, 255, 255, 0.07); border-color: rgba(var(--secondary-color-rgb), 0.3); }
+        .switch-wrapper { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 0; }
+        .switch-text-label { font-weight: 700; color: var(--text-secondary); font-size: 0.95rem; cursor: pointer; user-select: none; margin-right: 15px; font-family: "Faculty Glyphic", serif; }
+        .switch { position: relative; display: inline-block; width: 50px; height: 26px; flex-shrink: 0; }
+        .switch input { opacity: 0; width: 0; height: 0; }
+        .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--switch-bg-off); transition: .4s; border-radius: var(--border-radius-pill); }
+        .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
+        .switch input:checked + .slider { background: var(--switch-bg-on); }
+        .switch input:focus + .slider { box-shadow: 0 0 0 3px rgba(var(--secondary-color-rgb), 0.25); }
+        .switch input:checked + .slider:before { transform: translateX(24px); }
+        .button { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 35px; background: linear-gradient(135deg, var(--gradient-start), var(--gradient-mid), var(--gradient-end)); color: white; padding: 16px 28px; border: none; border-radius: var(--border-radius-sm); cursor: pointer; font-size: 1.15rem; font-family: "Funnel Sans", sans-serif; font-weight: 700; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(13, 110, 253, 0.3); position: relative; overflow: hidden; text-transform: uppercase; letter-spacing: 0.5px; }
+        .button::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%); transform: rotate(45deg); transition: opacity 0.5s ease; opacity: 0; }
+        .button:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 10px 25px rgba(13, 110, 253, 0.5); }
+        .button:hover::after { opacity: 1; }
+        .button:active { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3); }
+        .button i { margin-right: 12px; font-size: 1em; }
+        .button:disabled { background: #4b5563; cursor: not-allowed; transform: none; box-shadow: none; color: var(--text-muted); }
+        .button:disabled::after { display: none; }
+        .button:disabled i { color: var(--text-muted); }
+        .message { margin-top: 30px; padding: 20px 28px; border-radius: var(--border-radius-md); display: flex; align-items: center; animation: fadeIn 0.4s ease-out; border: 1px solid transparent; font-size: 1.05rem; font-family: "Faculty Glyphic", serif; position: relative; z-index: 2; }
+        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+        .message i { margin-right: 18px; font-size: 1.3em; flex-shrink: 0; }
+        .error { background-color: var(--error-bg); color: var(--error-color); border-color: rgba(248, 113, 113, 0.3); }
+        .error i { color: var(--error-color); }
+        .success { background-color: var(--success-bg); color: var(--success-color); border-color: rgba(74, 222, 128, 0.3); }
+        .success i { color: var(--success-color); }
+        #loading-indicator { display: none; text-align: center; margin: 25px 0 0 0; font-weight: 500; color: var(--text-muted); font-size: 0.95rem; font-family: "Faculty Glyphic", serif; position: relative; z-index: 2; }
+        #loading-indicator .spinner { display: inline-block; vertical-align: middle; border: 3px solid rgba(255, 255, 255, 0.1); border-top-color: var(--secondary-color); border-radius: 50%; width: 20px; height: 20px; animation: spin 0.8s linear infinite; margin-right: 10px; }
+        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+        #progress-area { display: none; margin-top: 35px; padding: 28px 35px; background-color: rgba(0, 0, 0, 0.2); border-radius: var(--border-radius-md); border: 1px solid var(--input-border); animation: fadeIn 0.5s ease-out; text-align: center; position: relative; z-index: 2; }
+        #progress-area .progress-spinner { display: inline-block; vertical-align: middle; border: 4px solid rgba(255, 255, 255, 0.1); border-top-color: var(--gradient-start); border-right-color: var(--gradient-mid); border-bottom-color: var(--gradient-end); border-left-color: transparent; border-radius: 50%; width: 32px; height: 32px; animation: spin 0.8s linear infinite; margin-bottom: 18px; }
+        #progress-stage { display: block; font-weight: 700; color: var(--text-primary); font-size: 1.2rem; margin-bottom: 10px; font-family: "Funnel Sans", sans-serif; }
+        #progress-message { display: block; color: var(--text-secondary); font-size: 1rem; min-height: 1.2em; font-family: "Faculty Glyphic", serif; }
+        #video-modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.7); align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; animation: fadeIn 0.3s ease-out; }
+        .modal-content { background-color: var(--card-bg); margin: auto; padding: 30px 35px; border-radius: var(--border-radius-lg); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); width: 90%; max-width: 800px; position: relative; border-top: 6px solid; border-image: linear-gradient(to right, var(--gradient-start), var(--gradient-mid), var(--gradient-end)) 1; text-align: center; }
+        .modal-close { color: var(--text-muted); position: absolute; top: 15px; right: 25px; font-size: 28px; font-weight: bold; transition: color 0.3s ease; }
+        .modal-close:hover, .modal-close:focus { color: var(--text-primary); text-decoration: none; cursor: pointer; }
+        .modal-content h2 { font-size: 1.6rem; margin-top: 0; margin-bottom: 25px; color: var(--text-primary); font-family: "Funnel Sans", sans-serif; }
+        .modal-video-container { margin-bottom: 30px; background-color: rgba(0, 0, 0, 0.25); padding: 15px; border-radius: var(--border-radius-md); box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.2); border: 1px solid var(--input-border); }
+        .modal-video-container video { max-width: 100%; height: auto; display: block; border-radius: var(--border-radius-sm); background-color: #000; }
+        .modal-download-link { display: inline-flex; align-items: center; justify-content: center; margin-top: 15px; background: linear-gradient(135deg, var(--secondary-color), var(--primary-color)); color: white; padding: 14px 24px; text-decoration: none; border-radius: var(--border-radius-sm); font-weight: 700; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(var(--secondary-color-rgb), 0.3); position: relative; overflow: hidden; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.5px; font-family: "Funnel Sans", sans-serif; }
+        .modal-download-link::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%); transform: rotate(45deg); transition: opacity 0.5s ease; opacity: 0; }
+        .modal-download-link:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(var(--secondary-color-rgb), 0.4); }
+        .modal-download-link:hover::after { opacity: 1; }
+        .modal-download-link:active { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--secondary-color-rgb), 0.3); }
+        .modal-download-link i { margin-right: 12px; font-size: 1em; }
+        #modal-hq-confirmation { display: none; margin-top: 30px; padding: 22px 28px; background-color: rgba(var(--secondary-color-rgb), 0.1); border: 1px solid rgba(var(--secondary-color-rgb), 0.3); border-radius: var(--border-radius-md); text-align: center; animation: fadeIn 0.4s ease-out; }
+        #modal-hq-confirmation p { margin: 0 0 18px 0; color: var(--text-secondary); font-size: 1rem; font-family: "Faculty Glyphic", serif; }
+        #modal-hq-confirmation .popup-buttons button { padding: 9px 20px; border-radius: var(--border-radius-sm); border: none; cursor: pointer; font-weight: 700; font-size: 0.95rem; transition: all 0.2s ease; margin: 0 10px; min-width: 90px; font-family: "Funnel Sans", sans-serif; }
+        #modal-hq-confirm-yes { background-color: var(--success-color); color: var(--dark-bg); }
+        #modal-hq-confirm-yes:hover { background-color: #6adf9a; transform: translateY(-1px); }
+        #modal-hq-confirm-no { background-color: var(--text-muted); color: var(--dark-bg); }
+        #modal-hq-confirm-no:hover { background-color: #b0b7c3; transform: translateY(-1px); }
+    </style>
+</head>
+<body>
+    <canvas id="fluid-canvas"></canvas>
+    <div class="container">
+        <div class="content-wrapper">
+            <h1><i class="fas fa-magic"></i>AI Video Editor</h1>
+            <div class="main-card">
+                <div class="main-title">Craft Your Vision Instantly</div>
+                <div class="main-subtitle">Let AI handle the edits. Just upload your files and describe the style.</div>
+            </div>
+            <form id="video-form">
+                <div class="form-grid">
+                    <div class="form-group">
+                        <label for="videos"><i class="fas fa-folder-open"></i>Source Videos</label>
+                        <label for="videos" class="file-input-label"><i class="fas fa-upload"></i><span>Choose Files...</span></label>
+                        <input type="file" id="videos" name="videos[]" accept="video/*" multiple required data-display-target="videos-display">
+                        <span class="file-name-display" id="videos-display">No files selected</span>
+                        <small>Select one or more video clips.</small>
+                    </div>
+                    <div class="form-group">
+                        <label for="audios"><i class="fas fa-music"></i>Source Audios</label>
+                        <label for="audios" class="file-input-label"><i class="fas fa-upload"></i><span>Choose Files...</span></label>
+                        <input type="file" id="audios" name="audios[]" accept="audio/*" multiple data-display-target="audios-display">
+                        <span class="file-name-display" id="audios-display">No files selected</span>
+                        <small>Optional background audio tracks.</small>
+                    </div>
+                    <div class="form-group">
+                        <label for="style_sample"><i class="fas fa-palette"></i>Style Sample</label>
+                        <label for="style_sample" class="file-input-label"><i class="fas fa-upload"></i><span>Choose File...</span></label>
+                        <input type="file" id="style_sample" name="style_sample" accept="video/*" data-display-target="style-sample-display">
+                        <span class="file-name-display" id="style-sample-display">No file selected</span>
+                        <small>Optional video to mimic style.</small>
+                    </div>
+                    <div class="form-group">
+                        <label for="duration"><i class="fas fa-clock"></i>Target Duration (s)</label>
+                        <input type="number" id="duration" name="duration" step="1" min="1" required placeholder="e.g., 30">
+                        <small>Desired final video length.</small>
+                    </div>
+                    <div class="form-group">
+                        <label for="variations"><i class="fas fa-random"></i>Variations</label>
+                        <select id="variations" name="variations">
+                            <option value="1" selected>1 Plan</option>
+                            <option value="2">2 Plans</option>
+                            <option value="3">3 Plans</option>
+                            <option value="4">4 Plans</option>
+                        </select>
+                        <small>Number of edit plans to generate.</small>
+                    </div>
+                    <div class="form-group">
+                        <div class="switch-wrapper">
+                            <label for="mute_audio" class="switch-text-label">Mute Audio</label>
+                            <label class="switch"><input type="checkbox" id="mute_audio" name="mute_audio"><span class="slider"></span></label>
+                        </div>
+                         <div class="switch-wrapper">
+                            <label for="generate_preview" class="switch-text-label">Generate Preview</label>
+                            <label class="switch"><input type="checkbox" id="generate_preview" name="generate_preview"><span class="slider"></span></label>
+                        </div>
+                        <small>Mute source audio / Generate low-res preview first.</small>
+                    </div>
+                    <div class="form-group">
+                        <label for="model_name"><i class="fas fa-brain"></i>AI Model</label>
+                        <select id="model_name" name="model_name">
+                            {% if available_models %}
+                                {% for model in available_models %}
+                                    <option value="{{ model }}" {% if model == default_model %}selected{% endif %}>{{ model }}</option>
+                                {% endfor %}
+                            {% else %}
+                                <option value="{{ default_model | escape }}" selected>{{ default_model | escape }}</option>
+                            {% endif %}
+                        </select>
+                        <small>Choose the AI editing model.</small>
+                    </div>
+                    <div class="form-group form-group-span-full">
+                        <label for="style_desc"><i class="fas fa-pen-alt"></i>Style Description</label>
+                        <textarea id="style_desc" name="style_desc" rows="2" required placeholder="Describe desired style, pacing, mood, effects, etc. Defaults to Instagram Reel style if left blank.">{{ default_style_desc | escape }}</textarea>
+                        <small>Describe the desired look and feel (e.g., "fast-paced, energetic, like a travel vlog").</small>
+                    </div>
+                     <div class="form-group form-group-span-full">
+                         <label for="output"><i class="fas fa-file-video"></i>Output File Name</label>
+                         <input type="text" id="output" name="output" value="ai_edited_video.mp4" required>
+                         <small>Name for the final generated video file.</small>
+                     </div>
+                </div>
+                <button type="submit" id="submit-button" class="button"><i class="fas fa-cogs"></i>Generate Video</button>
+            </form>
+            <div id="loading-indicator" style="display: none;"><div class="spinner"></div><span>Submitting request...</span></div>
+            <div id="progress-area" style="display: none;"><div class="progress-spinner"></div><span id="progress-stage">Starting...</span><span id="progress-message">Please wait while we process your request.</span></div>
+            <div id="message-area"></div>
+        </div>
+    </div>
+    <div id="video-modal">
+        <div class="modal-content">
+            <span class="modal-close" id="modal-close-button">×</span>
+            <h2 id="modal-title">Your Generated Video</h2>
+            <div class="modal-video-container">
+                <video id="modal-video" controls controlsList="nodownload">Your browser does not support the video tag.</video>
+            </div>
+            <a id="modal-download-link" href="#" class="modal-download-link" download><i class="fas fa-download"></i>Download Video</a>
+            <div id="modal-hq-confirmation" style="display: none;">
+                <p id="modal-hq-popup-message">Preview generated! Generate the high-quality version now?</p>
+                <div class="popup-buttons">
+                    <button id="modal-hq-confirm-yes">Yes, Generate HQ (Plan 1)</button>
+                    <button id="modal-hq-confirm-no">No, Thanks</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="./script.js"></script>
+
+    <script>
+        const form = document.getElementById('video-form');
+        const submitButton = document.getElementById('submit-button');
+        const loadingIndicator = document.getElementById('loading-indicator');
+        const progressArea = document.getElementById('progress-area');
+        const progressStage = document.getElementById('progress-stage');
+        const progressMessage = document.getElementById('progress-message');
+        const messageArea = document.getElementById('message-area');
+        const fileInputs = document.querySelectorAll('input[type="file"]');
+        const videoModal = document.getElementById('video-modal');
+        const modalTitle = document.getElementById('modal-title');
+        const modalVideo = document.getElementById('modal-video');
+        const modalDownloadLink = document.getElementById('modal-download-link');
+        const modalCloseButton = document.getElementById('modal-close-button');
+        const modalHqPopup = document.getElementById('modal-hq-confirmation');
+        const modalHqPopupMessage = document.getElementById('modal-hq-popup-message');
+        const modalHqConfirmYes = document.getElementById('modal-hq-confirm-yes');
+        const modalHqConfirmNo = document.getElementById('modal-hq-confirm-no');
+        const variationsSelect = document.getElementById('variations');
+        const modelSelect = document.getElementById('model_name');
+        const fluidCanvasElement = document.getElementById('fluid-canvas');
+
+        document.addEventListener('DOMContentLoaded', () => {
+            let currentRequestId = null;
+            let lastPreviewRequestId = null;
+            let numPlansGeneratedForLastPreview = 1;
+            let progressInterval = null;
+            const POLLING_INTERVAL = 2000;
+
+            function showMessage(type, text, area = messageArea) {
+                const iconClass = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-triangle';
+                area.innerHTML = `<div class="message ${type}"><i class="fas ${iconClass}"></i>${text}</div>`;
+                area.style.display = 'block';
+                area.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+            function hideModal() {
+                videoModal.style.display = 'none';
+                modalVideo.pause(); modalVideo.src = ''; modalDownloadLink.href = '#'; modalDownloadLink.removeAttribute('download'); modalHqPopup.style.display = 'none';
+            }
+            function clearState(clearForm = true) {
+                messageArea.innerHTML = ''; messageArea.style.display = 'none'; hideModal(); progressArea.style.display = 'none'; loadingIndicator.style.display = 'none';
+                if (progressInterval) { clearInterval(progressInterval); progressInterval = null; }
+                currentRequestId = null; lastPreviewRequestId = null; numPlansGeneratedForLastPreview = 1;
+                submitButton.disabled = false; submitButton.innerHTML = '<i class="fas fa-cogs"></i> Generate Video';
+                if (clearForm) {
+                    form.reset();
+                    fileInputs.forEach(input => {
+                        const displayTargetId = input.dataset.displayTarget; const displaySpan = document.getElementById(displayTargetId);
+                        if (displaySpan) { displaySpan.textContent = input.multiple ? 'No files selected' : 'No file selected'; displaySpan.style.color = 'var(--text-muted)'; }
+                    });
+                    const styleDescTextarea = document.getElementById('style_desc'); const tempEl = document.createElement('textarea'); tempEl.innerHTML = `{{ default_style_desc | escape }}`; const defaultDesc = tempEl.value; if (styleDescTextarea) styleDescTextarea.value = defaultDesc;
+                    const outputInput = document.getElementById('output'); if (outputInput) outputInput.value = 'ai_edited_video.mp4';
+                    if (variationsSelect) variationsSelect.value = '1';
+                    tempEl.innerHTML = `{{ default_model | escape }}`; const defaultModelValue = tempEl.value; if (modelSelect) modelSelect.value = defaultModelValue;
+                    document.getElementById('mute_audio').checked = false; document.getElementById('generate_preview').checked = false;
+                }
+            }
+            function updateProgressDisplay(stage, message) {
+                progressStage.textContent = stage.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase()); progressMessage.textContent = message || 'Processing...'; progressArea.style.display = 'block'; loadingIndicator.style.display = 'none'; hideModal();
+            }
+            fileInputs.forEach(input => {
+                input.addEventListener('change', (event) => {
+                    const displayTargetId = input.dataset.displayTarget; const displaySpan = document.getElementById(displayTargetId);
+                    if (displaySpan) {
+                        const files = input.files;
+                        if (files.length === 1) { displaySpan.textContent = files[0].name; displaySpan.style.color = 'var(--text-secondary)'; }
+                        else if (files.length > 1) { displaySpan.textContent = `${files.length} files selected`; displaySpan.style.color = 'var(--text-secondary)'; }
+                        else { displaySpan.textContent = input.multiple ? 'No files selected' : 'No file selected'; displaySpan.style.color = 'var(--text-muted)'; }
+                    }
+                });
+            });
+            async function triggerHqGeneration(previewRequestId) {
+                if (!previewRequestId) { showMessage('error', 'Cannot generate HQ: Original preview request ID is missing.'); submitButton.disabled = false; submitButton.innerHTML = '<i class="fas fa-cogs"></i> Generate Video'; return; }
+                console.log(`Requesting HQ generation based on preview ID: ${previewRequestId}`); hideModal(); messageArea.innerHTML = ''; messageArea.style.display = 'none'; updateProgressDisplay('STARTING_HQ', 'Initializing High-Quality generation (using Plan 1)...'); submitButton.disabled = true; submitButton.innerHTML = '<i class="fas fa-hourglass-half"></i> Processing HQ...';
+                try {
+                    const response = await fetch(`/generate-hq/${previewRequestId}`, { method: 'POST' }); const result = await response.json();
+                    if (!response.ok) { throw new Error(result.message || `Server error: ${response.status}`); }
+                    if (result.status === 'processing_started' && result.request_id) {
+                        currentRequestId = result.request_id; lastPreviewRequestId = null; numPlansGeneratedForLastPreview = 1; console.log("HQ Processing started with Request ID:", currentRequestId); updateProgressDisplay('RECEIVED_HQ', result.message || 'HQ Processing started...'); if (progressInterval) clearInterval(progressInterval); progressInterval = setInterval(pollProgress, POLLING_INTERVAL);
+                    } else { throw new Error(result.message || 'Received an unexpected response when starting HQ generation.'); }
+                } catch (error) {
+                    console.error('HQ Generation Start Error:', error); progressArea.style.display = 'none'; showMessage('error', `Failed to start HQ generation: ${error.message}`); submitButton.disabled = false; submitButton.innerHTML = '<i class="fas fa-cogs"></i> Generate Video';
+                }
+            }
+            async function pollProgress() {
+                if (!currentRequestId) { console.warn("Polling stopped: No active request ID."); if (progressInterval) clearInterval(progressInterval); progressInterval = null; return; }
+                try {
+                    const response = await fetch(`/progress/${currentRequestId}`);
+                    if (!response.ok) {
+                        if (response.status === 404) { console.error(`Polling failed: Request ID ${currentRequestId} not found.`); showMessage('error', `Polling error: Request ID not found or expired. Please start a new request.`); }
+                        else { console.error(`Polling failed with status: ${response.status}`); let errorMsg = `Polling error: Server returned status ${response.status}. Please try again later.`; try { const errorData = await response.json(); errorMsg = errorData.message || errorMsg; } catch (e) { } showMessage('error', errorMsg); }
+                        if (progressInterval) clearInterval(progressInterval); progressInterval = null; progressArea.style.display = 'none'; submitButton.disabled = false; submitButton.innerHTML = '<i class="fas fa-cogs"></i> Generate Video'; return;
+                    }
+                    const data = await response.json(); updateProgressDisplay(data.stage, data.message);
+                    if (data.stage === 'COMPLETED') {
+                        clearInterval(progressInterval); progressInterval = null; progressArea.style.display = 'none'; const resultData = data.result || {}; const isPreview = resultData.is_preview; const successMsg = data.message || `Video ${isPreview ? 'preview ' : ''}generated successfully!`; showMessage('success', successMsg, messageArea);
+                        if (resultData.video_url) {
+                            modalTitle.textContent = `Your Generated Video ${isPreview ? '(Preview)' : '(HQ)'}`; modalVideo.src = resultData.video_url; modalDownloadLink.href = resultData.video_url; modalDownloadLink.download = resultData.output_filename || `ai_edited_video${isPreview ? '_preview' : '_hq'}.mp4`; modalVideo.load();
+                            if (isPreview && resultData.request_id) {
+                                lastPreviewRequestId = resultData.request_id; numPlansGeneratedForLastPreview = resultData.num_plans_generated || 1;
+                                if (numPlansGeneratedForLastPreview > 1) { modalHqPopupMessage.textContent = `Preview generated using Plan 1/${numPlansGeneratedForLastPreview}. Generate the high-quality version using Plan 1?`; modalHqConfirmYes.textContent = `Yes, Generate HQ (Plan 1)`; }
+                                else { modalHqPopupMessage.textContent = `Preview generated! Generate the high-quality version now?`; modalHqConfirmYes.textContent = `Yes, Generate HQ`; }
+                                modalHqPopup.style.display = 'block'; submitButton.disabled = true; submitButton.innerHTML = '<i class="fas fa-check"></i> Preview Ready';
+                            } else { modalHqPopup.style.display = 'none'; submitButton.disabled = false; submitButton.innerHTML = '<i class="fas fa-cogs"></i> Generate Video'; }
+                            videoModal.style.display = 'flex';
+                        } else { showMessage('error', `Processing completed, but no video URL was returned.${isPreview ? ' (Preview)' : ''}`); submitButton.disabled = false; submitButton.innerHTML = '<i class="fas fa-cogs"></i> Generate Video'; }
+                    } else if (data.stage === 'FAILED') {
+                        clearInterval(progressInterval); progressInterval = null; progressArea.style.display = 'none'; showMessage('error', data.error || 'An unknown error occurred during processing.'); submitButton.disabled = false; submitButton.innerHTML = '<i class="fas fa-cogs"></i> Generate Video';
+                    } else if (data.stage === 'UNKNOWN') {
+                         clearInterval(progressInterval); progressInterval = null; progressArea.style.display = 'none'; showMessage('error', data.message || 'Request status is unknown or has expired.'); submitButton.disabled = false; submitButton.innerHTML = '<i class="fas fa-cogs"></i> Generate Video';
+                    }
+                } catch (error) {
+                    console.error('Polling Fetch Error:', error); if (progressInterval) clearInterval(progressInterval); progressInterval = null; progressArea.style.display = 'none'; showMessage('error', `Polling connection error: ${error.message}. Please check connection.`); submitButton.disabled = false; submitButton.innerHTML = '<i class="fas fa-cogs"></i> Generate Video';
+                }
+            }
+            form.addEventListener('submit', async (event) => {
+                event.preventDefault(); clearState(false);
+                const videosInput = document.getElementById('videos'); const durationInput = document.getElementById('duration'); const styleDescInput = document.getElementById('style_desc'); const outputInput = document.getElementById('output');
+                if (!videosInput.files || videosInput.files.length === 0) { showMessage('error', 'Please select at least one source video file.'); return; }
+                if (!durationInput.value || durationInput.value <= 0) { showMessage('error', 'Please enter a valid positive target duration.'); return; }
+                if (!styleDescInput.value.trim()) { showMessage('error', 'Please provide a style description.'); return; }
+                if (!outputInput.value.trim()) { showMessage('error', 'Please provide an output file name.'); return; }
+                loadingIndicator.style.display = 'block'; submitButton.disabled = true; submitButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Submitting...'; const formData = new FormData(form);
+                try {
+                    const response = await fetch('/generate', { method: 'POST', body: formData, }); const result = await response.json();
+                    if (!response.ok) { throw new Error(result.message || `Server error: ${response.status}`); }
+                    if (result.status === 'processing_started' && result.request_id) {
+                        currentRequestId = result.request_id; lastPreviewRequestId = null; numPlansGeneratedForLastPreview = 1; console.log("Processing started with Request ID:", currentRequestId); loadingIndicator.style.display = 'none'; updateProgressDisplay('RECEIVED', result.message || 'Processing started...'); if (progressInterval) clearInterval(progressInterval); progressInterval = setInterval(pollProgress, POLLING_INTERVAL); submitButton.innerHTML = '<i class="fas fa-hourglass-half"></i> Processing...';
+                    } else { throw new Error(result.message || 'Received an unexpected response from the server.'); }
+                } catch (error) {
+                    console.error('Form Submission Error:', error); showMessage('error', `Submission Failed: ${error.message || 'Could not connect.'}`); submitButton.disabled = false; submitButton.innerHTML = '<i class="fas fa-cogs"></i> Generate Video'; loadingIndicator.style.display = 'none';
+                }
+            });
+            modalCloseButton.addEventListener('click', () => { hideModal(); if (lastPreviewRequestId) { submitButton.disabled = false; submitButton.innerHTML = '<i class="fas fa-cogs"></i> Generate Video'; } });
+            videoModal.addEventListener('click', (event) => { if (event.target === videoModal) { hideModal(); if (lastPreviewRequestId) { submitButton.disabled = false; submitButton.innerHTML = '<i class="fas fa-cogs"></i> Generate Video'; } } });
+            modalHqConfirmYes.addEventListener('click', () => { triggerHqGeneration(lastPreviewRequestId); });
+            modalHqConfirmNo.addEventListener('click', () => { hideModal(); submitButton.disabled = false; submitButton.innerHTML = '<i class="fas fa-cogs"></i> Generate Video'; console.log("User declined HQ generation."); lastPreviewRequestId = null; });
+        });
+    </script>
+</body>
+</html>

templates/script.js

@@ -0,0 +1,1618 @@
+/*
+MIT License
+
+Copyright (c) 2017 Pavel Dobryakov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+
+'use strict';
+
+// Simulation section
+
+const canvas = document.getElementsByTagName('canvas')[0];
+resizeCanvas();
+
+let config = {
+    SIM_RESOLUTION: 128,
+    DYE_RESOLUTION: 1024,
+    CAPTURE_RESOLUTION: 512,
+    DENSITY_DISSIPATION: 1,
+    VELOCITY_DISSIPATION: 0.2,
+    PRESSURE: 0.8,
+    PRESSURE_ITERATIONS: 20,
+    CURL: 30,
+    SPLAT_RADIUS: 0.25,
+    SPLAT_FORCE: 6000,
+    SHADING: true,
+    COLORFUL: true,
+    COLOR_UPDATE_SPEED: 10,
+    PAUSED: false,
+    BACK_COLOR: { r: 0, g: 0, b: 0 },
+    TRANSPARENT: false,
+    BLOOM: true,
+    BLOOM_ITERATIONS: 8,
+    BLOOM_RESOLUTION: 256,
+    BLOOM_INTENSITY: 0.8,
+    BLOOM_THRESHOLD: 0.6,
+    BLOOM_SOFT_KNEE: 0.7,
+    SUNRAYS: true,
+    SUNRAYS_RESOLUTION: 196,
+    SUNRAYS_WEIGHT: 1.0,
+}
+
+function pointerPrototype () {
+    this.id = -1;
+    this.texcoordX = 0;
+    this.texcoordY = 0;
+    this.prevTexcoordX = 0;
+    this.prevTexcoordY = 0;
+    this.deltaX = 0;
+    this.deltaY = 0;
+    this.down = false;
+    this.moved = false;
+    this.color = [30, 0, 300];
+}
+
+let pointers = [];
+let splatStack = [];
+pointers.push(new pointerPrototype());
+
+const { gl, ext } = getWebGLContext(canvas);
+
+if (isMobile()) {
+    config.DYE_RESOLUTION = 512;
+}
+if (!ext.supportLinearFiltering) {
+    config.DYE_RESOLUTION = 512;
+    config.SHADING = false;
+    config.BLOOM = false;
+    config.SUNRAYS = false;
+}
+
+startGUI();
+
+function getWebGLContext (canvas) {
+    const params = { alpha: true, depth: false, stencil: false, antialias: false, preserveDrawingBuffer: false };
+
+    let gl = canvas.getContext('webgl2', params);
+    const isWebGL2 = !!gl;
+    if (!isWebGL2)
+        gl = canvas.getContext('webgl', params) || canvas.getContext('experimental-webgl', params);
+
+    let halfFloat;
+    let supportLinearFiltering;
+    if (isWebGL2) {
+        gl.getExtension('EXT_color_buffer_float');
+        supportLinearFiltering = gl.getExtension('OES_texture_float_linear');
+    } else {
+        halfFloat = gl.getExtension('OES_texture_half_float');
+        supportLinearFiltering = gl.getExtension('OES_texture_half_float_linear');
+    }
+
+    gl.clearColor(0.0, 0.0, 0.0, 1.0);
+
+    const halfFloatTexType = isWebGL2 ? gl.HALF_FLOAT : halfFloat.HALF_FLOAT_OES;
+    let formatRGBA;
+    let formatRG;
+    let formatR;
+
+    if (isWebGL2)
+    {
+        formatRGBA = getSupportedFormat(gl, gl.RGBA16F, gl.RGBA, halfFloatTexType);
+        formatRG = getSupportedFormat(gl, gl.RG16F, gl.RG, halfFloatTexType);
+        formatR = getSupportedFormat(gl, gl.R16F, gl.RED, halfFloatTexType);
+    }
+    else
+    {
+        formatRGBA = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);
+        formatRG = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);
+        formatR = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);
+    }
+
+    return {
+        gl,
+        ext: {
+            formatRGBA,
+            formatRG,
+            formatR,
+            halfFloatTexType,
+            supportLinearFiltering
+        }
+    };
+}
+
+function getSupportedFormat (gl, internalFormat, format, type)
+{
+    if (!supportRenderTextureFormat(gl, internalFormat, format, type))
+    {
+        switch (internalFormat)
+        {
+            case gl.R16F:
+                return getSupportedFormat(gl, gl.RG16F, gl.RG, type);
+            case gl.RG16F:
+                return getSupportedFormat(gl, gl.RGBA16F, gl.RGBA, type);
+            default:
+                return null;
+        }
+    }
+
+    return {
+        internalFormat,
+        format
+    }
+}
+
+function supportRenderTextureFormat (gl, internalFormat, format, type) {
+    let texture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, 4, 4, 0, format, type, null);
+
+    let fbo = gl.createFramebuffer();
+    gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+
+    let status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
+    return status == gl.FRAMEBUFFER_COMPLETE;
+}
+
+function startGUI () {
+}
+
+function isMobile () {
+    return /Mobi|Android/i.test(navigator.userAgent);
+}
+
+function captureScreenshot () {
+    let res = getResolution(config.CAPTURE_RESOLUTION);
+    let target = createFBO(res.width, res.height, ext.formatRGBA.internalFormat, ext.formatRGBA.format, ext.halfFloatTexType, gl.NEAREST);
+    render(target);
+
+    let texture = framebufferToTexture(target);
+    texture = normalizeTexture(texture, target.width, target.height);
+
+    let captureCanvas = textureToCanvas(texture, target.width, target.height);
+    let datauri = captureCanvas.toDataURL();
+    downloadURI('fluid.png', datauri);
+    URL.revokeObjectURL(datauri);
+}
+
+function framebufferToTexture (target) {
+    gl.bindFramebuffer(gl.FRAMEBUFFER, target.fbo);
+    let length = target.width * target.height * 4;
+    let texture = new Float32Array(length);
+    gl.readPixels(0, 0, target.width, target.height, gl.RGBA, gl.FLOAT, texture);
+    return texture;
+}
+
+function normalizeTexture (texture, width, height) {
+    let result = new Uint8Array(texture.length);
+    let id = 0;
+    for (let i = height - 1; i >= 0; i--) {
+        for (let j = 0; j < width; j++) {
+            let nid = i * width * 4 + j * 4;
+            result[nid + 0] = clamp01(texture[id + 0]) * 255;
+            result[nid + 1] = clamp01(texture[id + 1]) * 255;
+            result[nid + 2] = clamp01(texture[id + 2]) * 255;
+            result[nid + 3] = clamp01(texture[id + 3]) * 255;
+            id += 4;
+        }
+    }
+    return result;
+}
+
+function clamp01 (input) {
+    return Math.min(Math.max(input, 0), 1);
+}
+
+function textureToCanvas (texture, width, height) {
+    let captureCanvas = document.createElement('canvas');
+    let ctx = captureCanvas.getContext('2d');
+    captureCanvas.width = width;
+    captureCanvas.height = height;
+
+    let imageData = ctx.createImageData(width, height);
+    imageData.data.set(texture);
+    ctx.putImageData(imageData, 0, 0);
+
+    return captureCanvas;
+}
+
+function downloadURI (filename, uri) {
+    let link = document.createElement('a');
+    link.download = filename;
+    link.href = uri;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+}
+
+class Material {
+    constructor (vertexShader, fragmentShaderSource) {
+        this.vertexShader = vertexShader;
+        this.fragmentShaderSource = fragmentShaderSource;
+        this.programs = [];
+        this.activeProgram = null;
+        this.uniforms = [];
+    }
+
+    setKeywords (keywords) {
+        let hash = 0;
+        for (let i = 0; i < keywords.length; i++)
+            hash += hashCode(keywords[i]);
+
+        let program = this.programs[hash];
+        if (program == null)
+        {
+            let fragmentShader = compileShader(gl.FRAGMENT_SHADER, this.fragmentShaderSource, keywords);
+            program = createProgram(this.vertexShader, fragmentShader);
+            this.programs[hash] = program;
+        }
+
+        if (program == this.activeProgram) return;
+
+        this.uniforms = getUniforms(program);
+        this.activeProgram = program;
+    }
+
+    bind () {
+        gl.useProgram(this.activeProgram);
+    }
+}
+
+class Program {
+    constructor (vertexShader, fragmentShader) {
+        this.uniforms = {};
+        this.program = createProgram(vertexShader, fragmentShader);
+        this.uniforms = getUniforms(this.program);
+    }
+
+    bind () {
+        gl.useProgram(this.program);
+    }
+}
+
+function createProgram (vertexShader, fragmentShader) {
+    let program = gl.createProgram();
+    gl.attachShader(program, vertexShader);
+    gl.attachShader(program, fragmentShader);
+    gl.linkProgram(program);
+
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS))
+        console.trace(gl.getProgramInfoLog(program));
+
+    return program;
+}
+
+function getUniforms (program) {
+    let uniforms = [];
+    let uniformCount = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
+    for (let i = 0; i < uniformCount; i++) {
+        let uniformName = gl.getActiveUniform(program, i).name;
+        uniforms[uniformName] = gl.getUniformLocation(program, uniformName);
+    }
+    return uniforms;
+}
+
+function compileShader (type, source, keywords) {
+    source = addKeywords(source, keywords);
+
+    const shader = gl.createShader(type);
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
+        console.trace(gl.getShaderInfoLog(shader));
+
+    return shader;
+};
+
+function addKeywords (source, keywords) {
+    if (keywords == null) return source;
+    let keywordsString = '';
+    keywords.forEach(keyword => {
+        keywordsString += '#define ' + keyword + '\n';
+    });
+    return keywordsString + source;
+}
+
+const baseVertexShader = compileShader(gl.VERTEX_SHADER, `
+    precision highp float;
+
+    attribute vec2 aPosition;
+    varying vec2 vUv;
+    varying vec2 vL;
+    varying vec2 vR;
+    varying vec2 vT;
+    varying vec2 vB;
+    uniform vec2 texelSize;
+
+    void main () {
+        vUv = aPosition * 0.5 + 0.5;
+        vL = vUv - vec2(texelSize.x, 0.0);
+        vR = vUv + vec2(texelSize.x, 0.0);
+        vT = vUv + vec2(0.0, texelSize.y);
+        vB = vUv - vec2(0.0, texelSize.y);
+        gl_Position = vec4(aPosition, 0.0, 1.0);
+    }
+`);
+
+const blurVertexShader = compileShader(gl.VERTEX_SHADER, `
+    precision highp float;
+
+    attribute vec2 aPosition;
+    varying vec2 vUv;
+    varying vec2 vL;
+    varying vec2 vR;
+    uniform vec2 texelSize;
+
+    void main () {
+        vUv = aPosition * 0.5 + 0.5;
+        float offset = 1.33333333;
+        vL = vUv - texelSize * offset;
+        vR = vUv + texelSize * offset;
+        gl_Position = vec4(aPosition, 0.0, 1.0);
+    }
+`);
+
+const blurShader = compileShader(gl.FRAGMENT_SHADER, `
+    precision mediump float;
+    precision mediump sampler2D;
+
+    varying vec2 vUv;
+    varying vec2 vL;
+    varying vec2 vR;
+    uniform sampler2D uTexture;
+
+    void main () {
+        vec4 sum = texture2D(uTexture, vUv) * 0.29411764;
+        sum += texture2D(uTexture, vL) * 0.35294117;
+        sum += texture2D(uTexture, vR) * 0.35294117;
+        gl_FragColor = sum;
+    }
+`);
+
+const copyShader = compileShader(gl.FRAGMENT_SHADER, `
+    precision mediump float;
+    precision mediump sampler2D;
+
+    varying highp vec2 vUv;
+    uniform sampler2D uTexture;
+
+    void main () {
+        gl_FragColor = texture2D(uTexture, vUv);
+    }
+`);
+
+const clearShader = compileShader(gl.FRAGMENT_SHADER, `
+    precision mediump float;
+    precision mediump sampler2D;
+
+    varying highp vec2 vUv;
+    uniform sampler2D uTexture;
+    uniform float value;
+
+    void main () {
+        gl_FragColor = value * texture2D(uTexture, vUv);
+    }
+`);
+
+const colorShader = compileShader(gl.FRAGMENT_SHADER, `
+    precision mediump float;
+
+    uniform vec4 color;
+
+    void main () {
+        gl_FragColor = color;
+    }
+`);
+
+const checkerboardShader = compileShader(gl.FRAGMENT_SHADER, `
+    precision highp float;
+    precision highp sampler2D;
+
+    varying vec2 vUv;
+    uniform sampler2D uTexture;
+    uniform float aspectRatio;
+
+    #define SCALE 25.0
+
+    void main () {
+        vec2 uv = floor(vUv * SCALE * vec2(aspectRatio, 1.0));
+        float v = mod(uv.x + uv.y, 2.0);
+        v = v * 0.1 + 0.8;
+        gl_FragColor = vec4(vec3(v), 1.0);
+    }
+`);
+
+const displayShaderSource = `
+    precision highp float;
+    precision highp sampler2D;
+
+    varying vec2 vUv;
+    varying vec2 vL;
+    varying vec2 vR;
+    varying vec2 vT;
+    varying vec2 vB;
+    uniform sampler2D uTexture;
+    uniform sampler2D uBloom;
+    uniform sampler2D uSunrays;
+    uniform sampler2D uDithering;
+    uniform vec2 ditherScale;
+    uniform vec2 texelSize;
+
+    vec3 linearToGamma (vec3 color) {
+        color = max(color, vec3(0));
+        return max(1.055 * pow(color, vec3(0.416666667)) - 0.055, vec3(0));
+    }
+
+    void main () {
+        vec3 c = texture2D(uTexture, vUv).rgb;
+
+    #ifdef SHADING
+        vec3 lc = texture2D(uTexture, vL).rgb;
+        vec3 rc = texture2D(uTexture, vR).rgb;
+        vec3 tc = texture2D(uTexture, vT).rgb;
+        vec3 bc = texture2D(uTexture, vB).rgb;
+
+        float dx = length(rc) - length(lc);
+        float dy = length(tc) - length(bc);
+
+        vec3 n = normalize(vec3(dx, dy, length(texelSize)));
+        vec3 l = vec3(0.0, 0.0, 1.0);
+
+        float diffuse = clamp(dot(n, l) + 0.7, 0.7, 1.0);
+        c *= diffuse;
+    #endif
+
+    #ifdef BLOOM
+        vec3 bloom = texture2D(uBloom, vUv).rgb;
+    #endif
+
+    #ifdef SUNRAYS
+        float sunrays = texture2D(uSunrays, vUv).r;
+        c *= sunrays;
+    #ifdef BLOOM
+        bloom *= sunrays;
+    #endif
+    #endif
+
+    #ifdef BLOOM
+        float noise = texture2D(uDithering, vUv * ditherScale).r;
+        noise = noise * 2.0 - 1.0;
+        bloom += noise / 255.0;
+        bloom = linearToGamma(bloom);
+        c += bloom;
+    #endif
+
+        float a = max(c.r, max(c.g, c.b));
+        gl_FragColor = vec4(c, a);
+    }
+`;
+
+const bloomPrefilterShader = compileShader(gl.FRAGMENT_SHADER, `
+    precision mediump float;
+    precision mediump sampler2D;
+
+    varying vec2 vUv;
+    uniform sampler2D uTexture;
+    uniform vec3 curve;
+    uniform float threshold;
+
+    void main () {
+        vec3 c = texture2D(uTexture, vUv).rgb;
+        float br = max(c.r, max(c.g, c.b));
+        float rq = clamp(br - curve.x, 0.0, curve.y);
+        rq = curve.z * rq * rq;
+        c *= max(rq, br - threshold) / max(br, 0.0001);
+        gl_FragColor = vec4(c, 0.0);
+    }
+`);
+
+const bloomBlurShader = compileShader(gl.FRAGMENT_SHADER, `
+    precision mediump float;
+    precision mediump sampler2D;
+
+    varying vec2 vL;
+    varying vec2 vR;
+    varying vec2 vT;
+    varying vec2 vB;
+    uniform sampler2D uTexture;
+
+    void main () {
+        vec4 sum = vec4(0.0);
+        sum += texture2D(uTexture, vL);
+        sum += texture2D(uTexture, vR);
+        sum += texture2D(uTexture, vT);
+        sum += texture2D(uTexture, vB);
+        sum *= 0.25;
+        gl_FragColor = sum;
+    }
+`);
+
+const bloomFinalShader = compileShader(gl.FRAGMENT_SHADER, `
+    precision mediump float;
+    precision mediump sampler2D;
+
+    varying vec2 vL;
+    varying vec2 vR;
+    varying vec2 vT;
+    varying vec2 vB;
+    uniform sampler2D uTexture;
+    uniform float intensity;
+
+    void main () {
+        vec4 sum = vec4(0.0);
+        sum += texture2D(uTexture, vL);
+        sum += texture2D(uTexture, vR);
+        sum += texture2D(uTexture, vT);
+        sum += texture2D(uTexture, vB);
+        sum *= 0.25;
+        gl_FragColor = sum * intensity;
+    }
+`);
+
+const sunraysMaskShader = compileShader(gl.FRAGMENT_SHADER, `
+    precision highp float;
+    precision highp sampler2D;
+
+    varying vec2 vUv;
+    uniform sampler2D uTexture;
+
+    void main () {
+        vec4 c = texture2D(uTexture, vUv);
+        float br = max(c.r, max(c.g, c.b));
+        c.a = 1.0 - min(max(br * 20.0, 0.0), 0.8);
+        gl_FragColor = c;
+    }
+`);
+
+const sunraysShader = compileShader(gl.FRAGMENT_SHADER, `
+    precision highp float;
+    precision highp sampler2D;
+
+    varying vec2 vUv;
+    uniform sampler2D uTexture;
+    uniform float weight;
+
+    #define ITERATIONS 16
+
+    void main () {
+        float Density = 0.3;
+        float Decay = 0.95;
+        float Exposure = 0.7;
+
+        vec2 coord = vUv;
+        vec2 dir = vUv - 0.5;
+
+        dir *= 1.0 / float(ITERATIONS) * Density;
+        float illuminationDecay = 1.0;
+
+        float color = texture2D(uTexture, vUv).a;
+
+        for (int i = 0; i < ITERATIONS; i++)
+        {
+            coord -= dir;
+            float col = texture2D(uTexture, coord).a;
+            color += col * illuminationDecay * weight;
+            illuminationDecay *= Decay;
+        }
+
+        gl_FragColor = vec4(color * Exposure, 0.0, 0.0, 1.0);
+    }
+`);
+
+const splatShader = compileShader(gl.FRAGMENT_SHADER, `
+    precision highp float;
+    precision highp sampler2D;
+
+    varying vec2 vUv;
+    uniform sampler2D uTarget;
+    uniform float aspectRatio;
+    uniform vec3 color;
+    uniform vec2 point;
+    uniform float radius;
+
+    void main () {
+        vec2 p = vUv - point.xy;
+        p.x *= aspectRatio;
+        vec3 splat = exp(-dot(p, p) / radius) * color;
+        vec3 base = texture2D(uTarget, vUv).xyz;
+        gl_FragColor = vec4(base + splat, 1.0);
+    }
+`);
+
+const advectionShader = compileShader(gl.FRAGMENT_SHADER, `
+    precision highp float;
+    precision highp sampler2D;
+
+    varying vec2 vUv;
+    uniform sampler2D uVelocity;
+    uniform sampler2D uSource;
+    uniform vec2 texelSize;
+    uniform vec2 dyeTexelSize;
+    uniform float dt;
+    uniform float dissipation;
+
+    vec4 bilerp (sampler2D sam, vec2 uv, vec2 tsize) {
+        vec2 st = uv / tsize - 0.5;
+
+        vec2 iuv = floor(st);
+        vec2 fuv = fract(st);
+
+        vec4 a = texture2D(sam, (iuv + vec2(0.5, 0.5)) * tsize);
+        vec4 b = texture2D(sam, (iuv + vec2(1.5, 0.5)) * tsize);
+        vec4 c = texture2D(sam, (iuv + vec2(0.5, 1.5)) * tsize);
+        vec4 d = texture2D(sam, (iuv + vec2(1.5, 1.5)) * tsize);
+
+        return mix(mix(a, b, fuv.x), mix(c, d, fuv.x), fuv.y);
+    }
+
+    void main () {
+    #ifdef MANUAL_FILTERING
+        vec2 coord = vUv - dt * bilerp(uVelocity, vUv, texelSize).xy * texelSize;
+        vec4 result = bilerp(uSource, coord, dyeTexelSize);
+    #else
+        vec2 coord = vUv - dt * texture2D(uVelocity, vUv).xy * texelSize;
+        vec4 result = texture2D(uSource, coord);
+    #endif
+        float decay = 1.0 + dissipation * dt;
+        gl_FragColor = result / decay;
+    }`,
+    ext.supportLinearFiltering ? null : ['MANUAL_FILTERING']
+);
+
+const divergenceShader = compileShader(gl.FRAGMENT_SHADER, `
+    precision mediump float;
+    precision mediump sampler2D;
+
+    varying highp vec2 vUv;
+    varying highp vec2 vL;
+    varying highp vec2 vR;
+    varying highp vec2 vT;
+    varying highp vec2 vB;
+    uniform sampler2D uVelocity;
+
+    void main () {
+        float L = texture2D(uVelocity, vL).x;
+        float R = texture2D(uVelocity, vR).x;
+        float T = texture2D(uVelocity, vT).y;
+        float B = texture2D(uVelocity, vB).y;
+
+        vec2 C = texture2D(uVelocity, vUv).xy;
+        if (vL.x < 0.0) { L = -C.x; }
+        if (vR.x > 1.0) { R = -C.x; }
+        if (vT.y > 1.0) { T = -C.y; }
+        if (vB.y < 0.0) { B = -C.y; }
+
+        float div = 0.5 * (R - L + T - B);
+        gl_FragColor = vec4(div, 0.0, 0.0, 1.0);
+    }
+`);
+
+const curlShader = compileShader(gl.FRAGMENT_SHADER, `
+    precision mediump float;
+    precision mediump sampler2D;
+
+    varying highp vec2 vUv;
+    varying highp vec2 vL;
+    varying highp vec2 vR;
+    varying highp vec2 vT;
+    varying highp vec2 vB;
+    uniform sampler2D uVelocity;
+
+    void main () {
+        float L = texture2D(uVelocity, vL).y;
+        float R = texture2D(uVelocity, vR).y;
+        float T = texture2D(uVelocity, vT).x;
+        float B = texture2D(uVelocity, vB).x;
+        float vorticity = R - L - T + B;
+        gl_FragColor = vec4(0.5 * vorticity, 0.0, 0.0, 1.0);
+    }
+`);
+
+const vorticityShader = compileShader(gl.FRAGMENT_SHADER, `
+    precision highp float;
+    precision highp sampler2D;
+
+    varying vec2 vUv;
+    varying vec2 vL;
+    varying vec2 vR;
+    varying vec2 vT;
+    varying vec2 vB;
+    uniform sampler2D uVelocity;
+    uniform sampler2D uCurl;
+    uniform float curl;
+    uniform float dt;
+
+    void main () {
+        float L = texture2D(uCurl, vL).x;
+        float R = texture2D(uCurl, vR).x;
+        float T = texture2D(uCurl, vT).x;
+        float B = texture2D(uCurl, vB).x;
+        float C = texture2D(uCurl, vUv).x;
+
+        vec2 force = 0.5 * vec2(abs(T) - abs(B), abs(R) - abs(L));
+        force /= length(force) + 0.0001;
+        force *= curl * C;
+        force.y *= -1.0;
+
+        vec2 velocity = texture2D(uVelocity, vUv).xy;
+        velocity += force * dt;
+        velocity = min(max(velocity, -1000.0), 1000.0);
+        gl_FragColor = vec4(velocity, 0.0, 1.0);
+    }
+`);
+
+const pressureShader = compileShader(gl.FRAGMENT_SHADER, `
+    precision mediump float;
+    precision mediump sampler2D;
+
+    varying highp vec2 vUv;
+    varying highp vec2 vL;
+    varying highp vec2 vR;
+    varying highp vec2 vT;
+    varying highp vec2 vB;
+    uniform sampler2D uPressure;
+    uniform sampler2D uDivergence;
+
+    void main () {
+        float L = texture2D(uPressure, vL).x;
+        float R = texture2D(uPressure, vR).x;
+        float T = texture2D(uPressure, vT).x;
+        float B = texture2D(uPressure, vB).x;
+        float C = texture2D(uPressure, vUv).x;
+        float divergence = texture2D(uDivergence, vUv).x;
+        float pressure = (L + R + B + T - divergence) * 0.25;
+        gl_FragColor = vec4(pressure, 0.0, 0.0, 1.0);
+    }
+`);
+
+const gradientSubtractShader = compileShader(gl.FRAGMENT_SHADER, `
+    precision mediump float;
+    precision mediump sampler2D;
+
+    varying highp vec2 vUv;
+    varying highp vec2 vL;
+    varying highp vec2 vR;
+    varying highp vec2 vT;
+    varying highp vec2 vB;
+    uniform sampler2D uPressure;
+    uniform sampler2D uVelocity;
+
+    void main () {
+        float L = texture2D(uPressure, vL).x;
+        float R = texture2D(uPressure, vR).x;
+        float T = texture2D(uPressure, vT).x;
+        float B = texture2D(uPressure, vB).x;
+        vec2 velocity = texture2D(uVelocity, vUv).xy;
+        velocity.xy -= vec2(R - L, T - B);
+        gl_FragColor = vec4(velocity, 0.0, 1.0);
+    }
+`);
+
+const blit = (() => {
+    gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, -1, 1, 1, 1, 1, -1]), gl.STATIC_DRAW);
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer());
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([0, 1, 2, 0, 2, 3]), gl.STATIC_DRAW);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+    gl.enableVertexAttribArray(0);
+
+    return (target, clear = false) => {
+        if (target == null)
+        {
+            gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        }
+        else
+        {
+            gl.viewport(0, 0, target.width, target.height);
+            gl.bindFramebuffer(gl.FRAMEBUFFER, target.fbo);
+        }
+        if (clear)
+        {
+            gl.clearColor(0.0, 0.0, 0.0, 1.0);
+            gl.clear(gl.COLOR_BUFFER_BIT);
+        }
+        // CHECK_FRAMEBUFFER_STATUS();
+        gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
+    }
+})();
+
+function CHECK_FRAMEBUFFER_STATUS () {
+    let status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
+    if (status != gl.FRAMEBUFFER_COMPLETE)
+        console.trace("Framebuffer error: " + status);
+}
+
+let dye;
+let velocity;
+let divergence;
+let curl;
+let pressure;
+let bloom;
+let bloomFramebuffers = [];
+let sunrays;
+let sunraysTemp;
+
+let ditheringTexture = createTextureAsync('LDR_LLL1_0.png');
+
+const blurProgram            = new Program(blurVertexShader, blurShader);
+const copyProgram            = new Program(baseVertexShader, copyShader);
+const clearProgram           = new Program(baseVertexShader, clearShader);
+const colorProgram           = new Program(baseVertexShader, colorShader);
+const checkerboardProgram    = new Program(baseVertexShader, checkerboardShader);
+const bloomPrefilterProgram  = new Program(baseVertexShader, bloomPrefilterShader);
+const bloomBlurProgram       = new Program(baseVertexShader, bloomBlurShader);
+const bloomFinalProgram      = new Program(baseVertexShader, bloomFinalShader);
+const sunraysMaskProgram     = new Program(baseVertexShader, sunraysMaskShader);
+const sunraysProgram         = new Program(baseVertexShader, sunraysShader);
+const splatProgram           = new Program(baseVertexShader, splatShader);
+const advectionProgram       = new Program(baseVertexShader, advectionShader);
+const divergenceProgram      = new Program(baseVertexShader, divergenceShader);
+const curlProgram            = new Program(baseVertexShader, curlShader);
+const vorticityProgram       = new Program(baseVertexShader, vorticityShader);
+const pressureProgram        = new Program(baseVertexShader, pressureShader);
+const gradienSubtractProgram = new Program(baseVertexShader, gradientSubtractShader);
+
+const displayMaterial = new Material(baseVertexShader, displayShaderSource);
+
+function initFramebuffers () {
+    let simRes = getResolution(config.SIM_RESOLUTION);
+    let dyeRes = getResolution(config.DYE_RESOLUTION);
+
+    const texType = ext.halfFloatTexType;
+    const rgba    = ext.formatRGBA;
+    const rg      = ext.formatRG;
+    const r       = ext.formatR;
+    const filtering = ext.supportLinearFiltering ? gl.LINEAR : gl.NEAREST;
+
+    gl.disable(gl.BLEND);
+
+    if (dye == null)
+        dye = createDoubleFBO(dyeRes.width, dyeRes.height, rgba.internalFormat, rgba.format, texType, filtering);
+    else
+        dye = resizeDoubleFBO(dye, dyeRes.width, dyeRes.height, rgba.internalFormat, rgba.format, texType, filtering);
+
+    if (velocity == null)
+        velocity = createDoubleFBO(simRes.width, simRes.height, rg.internalFormat, rg.format, texType, filtering);
+    else
+        velocity = resizeDoubleFBO(velocity, simRes.width, simRes.height, rg.internalFormat, rg.format, texType, filtering);
+
+    divergence = createFBO      (simRes.width, simRes.height, r.internalFormat, r.format, texType, gl.NEAREST);
+    curl       = createFBO      (simRes.width, simRes.height, r.internalFormat, r.format, texType, gl.NEAREST);
+    pressure   = createDoubleFBO(simRes.width, simRes.height, r.internalFormat, r.format, texType, gl.NEAREST);
+
+    initBloomFramebuffers();
+    initSunraysFramebuffers();
+}
+
+function initBloomFramebuffers () {
+    let res = getResolution(config.BLOOM_RESOLUTION);
+
+    const texType = ext.halfFloatTexType;
+    const rgba = ext.formatRGBA;
+    const filtering = ext.supportLinearFiltering ? gl.LINEAR : gl.NEAREST;
+
+    bloom = createFBO(res.width, res.height, rgba.internalFormat, rgba.format, texType, filtering);
+
+    bloomFramebuffers.length = 0;
+    for (let i = 0; i < config.BLOOM_ITERATIONS; i++)
+    {
+        let width = res.width >> (i + 1);
+        let height = res.height >> (i + 1);
+
+        if (width < 2 || height < 2) break;
+
+        let fbo = createFBO(width, height, rgba.internalFormat, rgba.format, texType, filtering);
+        bloomFramebuffers.push(fbo);
+    }
+}
+
+function initSunraysFramebuffers () {
+    let res = getResolution(config.SUNRAYS_RESOLUTION);
+
+    const texType = ext.halfFloatTexType;
+    const r = ext.formatR;
+    const filtering = ext.supportLinearFiltering ? gl.LINEAR : gl.NEAREST;
+
+    sunrays     = createFBO(res.width, res.height, r.internalFormat, r.format, texType, filtering);
+    sunraysTemp = createFBO(res.width, res.height, r.internalFormat, r.format, texType, filtering);
+}
+
+function createFBO (w, h, internalFormat, format, type, param) {
+    gl.activeTexture(gl.TEXTURE0);
+    let texture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, param);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, param);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, w, h, 0, format, type, null);
+
+    let fbo = gl.createFramebuffer();
+    gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+    gl.viewport(0, 0, w, h);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+
+    let texelSizeX = 1.0 / w;
+    let texelSizeY = 1.0 / h;
+
+    return {
+        texture,
+        fbo,
+        width: w,
+        height: h,
+        texelSizeX,
+        texelSizeY,
+        attach (id) {
+            gl.activeTexture(gl.TEXTURE0 + id);
+            gl.bindTexture(gl.TEXTURE_2D, texture);
+            return id;
+        }
+    };
+}
+
+function createDoubleFBO (w, h, internalFormat, format, type, param) {
+    let fbo1 = createFBO(w, h, internalFormat, format, type, param);
+    let fbo2 = createFBO(w, h, internalFormat, format, type, param);
+
+    return {
+        width: w,
+        height: h,
+        texelSizeX: fbo1.texelSizeX,
+        texelSizeY: fbo1.texelSizeY,
+        get read () {
+            return fbo1;
+        },
+        set read (value) {
+            fbo1 = value;
+        },
+        get write () {
+            return fbo2;
+        },
+        set write (value) {
+            fbo2 = value;
+        },
+        swap () {
+            let temp = fbo1;
+            fbo1 = fbo2;
+            fbo2 = temp;
+        }
+    }
+}
+
+function resizeFBO (target, w, h, internalFormat, format, type, param) {
+    let newFBO = createFBO(w, h, internalFormat, format, type, param);
+    copyProgram.bind();
+    gl.uniform1i(copyProgram.uniforms.uTexture, target.attach(0));
+    blit(newFBO);
+    return newFBO;
+}
+
+function resizeDoubleFBO (target, w, h, internalFormat, format, type, param) {
+    if (target.width == w && target.height == h)
+        return target;
+    target.read = resizeFBO(target.read, w, h, internalFormat, format, type, param);
+    target.write = createFBO(w, h, internalFormat, format, type, param);
+    target.width = w;
+    target.height = h;
+    target.texelSizeX = 1.0 / w;
+    target.texelSizeY = 1.0 / h;
+    return target;
+}
+
+function createTextureAsync (url) {
+    let texture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, 1, 1, 0, gl.RGB, gl.UNSIGNED_BYTE, new Uint8Array([255, 255, 255]));
+
+    let obj = {
+        texture,
+        width: 1,
+        height: 1,
+        attach (id) {
+            gl.activeTexture(gl.TEXTURE0 + id);
+            gl.bindTexture(gl.TEXTURE_2D, texture);
+            return id;
+        }
+    };
+
+    let image = new Image();
+    image.onload = () => {
+        obj.width = image.width;
+        obj.height = image.height;
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);
+    };
+    image.src = url;
+
+    return obj;
+}
+
+function updateKeywords () {
+    let displayKeywords = [];
+    if (config.SHADING) displayKeywords.push("SHADING");
+    if (config.BLOOM) displayKeywords.push("BLOOM");
+    if (config.SUNRAYS) displayKeywords.push("SUNRAYS");
+    displayMaterial.setKeywords(displayKeywords);
+}
+
+updateKeywords();
+initFramebuffers();
+
+multipleSplats(parseInt(Math.random() * 10) + 5, 0.8); // Initial burst with slightly 
+
+// Configuration for ambient splats
+const AMBIENT_INTERVAL = 1000; // Time between ambient splats in milliseconds (e.g., 2 seconds)
+const MAX_AMBIENT_SPLATS = 5;  // Maximum number of random splats per interval (e.g., 1 or 2)
+const AMBIENT_INTENSITY = 0.3; // How strong the ambient splats are (e.g., 20% of normal)
+
+setInterval(() => {
+    // Only add ambient splats if the simulation isn't paused by the user (P key)
+    if (!config.PAUSED) {
+        // Generate a small number of splats (1 to MAX_AMBIENT_SPLATS)
+        const numSplats = Math.floor(Math.random() * MAX_AMBIENT_SPLATS) + 1;
+        // Call multipleSplats with the low ambient intensity
+        multipleSplats(numSplats, AMBIENT_INTENSITY);
+    }
+}, AMBIENT_INTERVAL);
+
+
+let lastUpdateTime = Date.now();
+let colorUpdateTimer = 0.0;
+update();
+
+function update () {
+    const dt = calcDeltaTime();
+    if (resizeCanvas())
+        initFramebuffers();
+    updateColors(dt);
+    applyInputs();
+    if (!config.PAUSED)
+        step(dt);
+    render(null);
+    requestAnimationFrame(update);
+}
+
+function calcDeltaTime () {
+    let now = Date.now();
+    let dt = (now - lastUpdateTime) / 1000;
+    dt = Math.min(dt, 0.016666);
+    lastUpdateTime = now;
+    return dt;
+}
+
+function resizeCanvas () {
+    let width = scaleByPixelRatio(canvas.clientWidth);
+    let height = scaleByPixelRatio(canvas.clientHeight);
+    if (canvas.width != width || canvas.height != height) {
+        canvas.width = width;
+        canvas.height = height;
+        return true;
+    }
+    return false;
+}
+
+function updateColors (dt) {
+    if (!config.COLORFUL) return;
+
+    colorUpdateTimer += dt * config.COLOR_UPDATE_SPEED;
+    if (colorUpdateTimer >= 1) {
+        colorUpdateTimer = wrap(colorUpdateTimer, 0, 1);
+        pointers.forEach(p => {
+            p.color = generateColor();
+        });
+    }
+}
+
+function applyInputs () {
+    if (splatStack.length > 0)
+        multipleSplats(splatStack.pop());
+
+    pointers.forEach(p => {
+        if (p.moved) {
+            p.moved = false;
+            splatPointer(p);
+        }
+    });
+}
+
+function step (dt) {
+    gl.disable(gl.BLEND);
+
+    curlProgram.bind();
+    gl.uniform2f(curlProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY);
+    gl.uniform1i(curlProgram.uniforms.uVelocity, velocity.read.attach(0));
+    blit(curl);
+
+    vorticityProgram.bind();
+    gl.uniform2f(vorticityProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY);
+    gl.uniform1i(vorticityProgram.uniforms.uVelocity, velocity.read.attach(0));
+    gl.uniform1i(vorticityProgram.uniforms.uCurl, curl.attach(1));
+    gl.uniform1f(vorticityProgram.uniforms.curl, config.CURL);
+    gl.uniform1f(vorticityProgram.uniforms.dt, dt);
+    blit(velocity.write);
+    velocity.swap();
+
+    divergenceProgram.bind();
+    gl.uniform2f(divergenceProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY);
+    gl.uniform1i(divergenceProgram.uniforms.uVelocity, velocity.read.attach(0));
+    blit(divergence);
+
+    clearProgram.bind();
+    gl.uniform1i(clearProgram.uniforms.uTexture, pressure.read.attach(0));
+    gl.uniform1f(clearProgram.uniforms.value, config.PRESSURE);
+    blit(pressure.write);
+    pressure.swap();
+
+    pressureProgram.bind();
+    gl.uniform2f(pressureProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY);
+    gl.uniform1i(pressureProgram.uniforms.uDivergence, divergence.attach(0));
+    for (let i = 0; i < config.PRESSURE_ITERATIONS; i++) {
+        gl.uniform1i(pressureProgram.uniforms.uPressure, pressure.read.attach(1));
+        blit(pressure.write);
+        pressure.swap();
+    }
+
+    gradienSubtractProgram.bind();
+    gl.uniform2f(gradienSubtractProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY);
+    gl.uniform1i(gradienSubtractProgram.uniforms.uPressure, pressure.read.attach(0));
+    gl.uniform1i(gradienSubtractProgram.uniforms.uVelocity, velocity.read.attach(1));
+    blit(velocity.write);
+    velocity.swap();
+
+    advectionProgram.bind();
+    gl.uniform2f(advectionProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY);
+    if (!ext.supportLinearFiltering)
+        gl.uniform2f(advectionProgram.uniforms.dyeTexelSize, velocity.texelSizeX, velocity.texelSizeY);
+    let velocityId = velocity.read.attach(0);
+    gl.uniform1i(advectionProgram.uniforms.uVelocity, velocityId);
+    gl.uniform1i(advectionProgram.uniforms.uSource, velocityId);
+    gl.uniform1f(advectionProgram.uniforms.dt, dt);
+    gl.uniform1f(advectionProgram.uniforms.dissipation, config.VELOCITY_DISSIPATION);
+    blit(velocity.write);
+    velocity.swap();
+
+    if (!ext.supportLinearFiltering)
+        gl.uniform2f(advectionProgram.uniforms.dyeTexelSize, dye.texelSizeX, dye.texelSizeY);
+    gl.uniform1i(advectionProgram.uniforms.uVelocity, velocity.read.attach(0));
+    gl.uniform1i(advectionProgram.uniforms.uSource, dye.read.attach(1));
+    gl.uniform1f(advectionProgram.uniforms.dissipation, config.DENSITY_DISSIPATION);
+    blit(dye.write);
+    dye.swap();
+}
+
+function render (target) {
+    if (config.BLOOM)
+        applyBloom(dye.read, bloom);
+    if (config.SUNRAYS) {
+        applySunrays(dye.read, dye.write, sunrays);
+        blur(sunrays, sunraysTemp, 1);
+    }
+
+    if (target == null || !config.TRANSPARENT) {
+        gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+        gl.enable(gl.BLEND);
+    }
+    else {
+        gl.disable(gl.BLEND);
+    }
+
+    if (!config.TRANSPARENT)
+        drawColor(target, normalizeColor(config.BACK_COLOR));
+    if (target == null && config.TRANSPARENT)
+        drawCheckerboard(target);
+    drawDisplay(target);
+}
+
+function drawColor (target, color) {
+    colorProgram.bind();
+    gl.uniform4f(colorProgram.uniforms.color, color.r, color.g, color.b, 1);
+    blit(target);
+}
+
+function drawCheckerboard (target) {
+    checkerboardProgram.bind();
+    gl.uniform1f(checkerboardProgram.uniforms.aspectRatio, canvas.width / canvas.height);
+    blit(target);
+}
+
+function drawDisplay (target) {
+    let width = target == null ? gl.drawingBufferWidth : target.width;
+    let height = target == null ? gl.drawingBufferHeight : target.height;
+
+    displayMaterial.bind();
+    if (config.SHADING)
+        gl.uniform2f(displayMaterial.uniforms.texelSize, 1.0 / width, 1.0 / height);
+    gl.uniform1i(displayMaterial.uniforms.uTexture, dye.read.attach(0));
+    if (config.BLOOM) {
+        gl.uniform1i(displayMaterial.uniforms.uBloom, bloom.attach(1));
+        gl.uniform1i(displayMaterial.uniforms.uDithering, ditheringTexture.attach(2));
+        let scale = getTextureScale(ditheringTexture, width, height);
+        gl.uniform2f(displayMaterial.uniforms.ditherScale, scale.x, scale.y);
+    }
+    if (config.SUNRAYS)
+        gl.uniform1i(displayMaterial.uniforms.uSunrays, sunrays.attach(3));
+    blit(target);
+}
+
+function applyBloom (source, destination) {
+    if (bloomFramebuffers.length < 2)
+        return;
+
+    let last = destination;
+
+    gl.disable(gl.BLEND);
+    bloomPrefilterProgram.bind();
+    let knee = config.BLOOM_THRESHOLD * config.BLOOM_SOFT_KNEE + 0.0001;
+    let curve0 = config.BLOOM_THRESHOLD - knee;
+    let curve1 = knee * 2;
+    let curve2 = 0.25 / knee;
+    gl.uniform3f(bloomPrefilterProgram.uniforms.curve, curve0, curve1, curve2);
+    gl.uniform1f(bloomPrefilterProgram.uniforms.threshold, config.BLOOM_THRESHOLD);
+    gl.uniform1i(bloomPrefilterProgram.uniforms.uTexture, source.attach(0));
+    blit(last);
+
+    bloomBlurProgram.bind();
+    for (let i = 0; i < bloomFramebuffers.length; i++) {
+        let dest = bloomFramebuffers[i];
+        gl.uniform2f(bloomBlurProgram.uniforms.texelSize, last.texelSizeX, last.texelSizeY);
+        gl.uniform1i(bloomBlurProgram.uniforms.uTexture, last.attach(0));
+        blit(dest);
+        last = dest;
+    }
+
+    gl.blendFunc(gl.ONE, gl.ONE);
+    gl.enable(gl.BLEND);
+
+    for (let i = bloomFramebuffers.length - 2; i >= 0; i--) {
+        let baseTex = bloomFramebuffers[i];
+        gl.uniform2f(bloomBlurProgram.uniforms.texelSize, last.texelSizeX, last.texelSizeY);
+        gl.uniform1i(bloomBlurProgram.uniforms.uTexture, last.attach(0));
+        gl.viewport(0, 0, baseTex.width, baseTex.height);
+        blit(baseTex);
+        last = baseTex;
+    }
+
+    gl.disable(gl.BLEND);
+    bloomFinalProgram.bind();
+    gl.uniform2f(bloomFinalProgram.uniforms.texelSize, last.texelSizeX, last.texelSizeY);
+    gl.uniform1i(bloomFinalProgram.uniforms.uTexture, last.attach(0));
+    gl.uniform1f(bloomFinalProgram.uniforms.intensity, config.BLOOM_INTENSITY);
+    blit(destination);
+}
+
+function applySunrays (source, mask, destination) {
+    gl.disable(gl.BLEND);
+    sunraysMaskProgram.bind();
+    gl.uniform1i(sunraysMaskProgram.uniforms.uTexture, source.attach(0));
+    blit(mask);
+
+    sunraysProgram.bind();
+    gl.uniform1f(sunraysProgram.uniforms.weight, config.SUNRAYS_WEIGHT);
+    gl.uniform1i(sunraysProgram.uniforms.uTexture, mask.attach(0));
+    blit(destination);
+}
+
+function blur (target, temp, iterations) {
+    blurProgram.bind();
+    for (let i = 0; i < iterations; i++) {
+        gl.uniform2f(blurProgram.uniforms.texelSize, target.texelSizeX, 0.0);
+        gl.uniform1i(blurProgram.uniforms.uTexture, target.attach(0));
+        blit(temp);
+
+        gl.uniform2f(blurProgram.uniforms.texelSize, 0.0, target.texelSizeY);
+        gl.uniform1i(blurProgram.uniforms.uTexture, temp.attach(0));
+        blit(target);
+    }
+}
+
+function splatPointer (pointer) {
+    let dx = pointer.deltaX * config.SPLAT_FORCE;
+    let dy = pointer.deltaY * config.SPLAT_FORCE;
+    splat(pointer.texcoordX, pointer.texcoordY, dx, dy, pointer.color);
+}
+
+function multipleSplats (amount, intensityMultiplier = 1.0) { // Added intensityMultiplier
+    for (let i = 0; i < amount; i++) {
+        const color = generateColor();
+        // Scale color intensity based on the multiplier
+        color.r *= 10.0 * intensityMultiplier;
+        color.g *= 10.0 * intensityMultiplier;
+        color.b *= 10.0 * intensityMultiplier;
+        const x = Math.random();
+        const y = Math.random();
+        // Scale velocity intensity based on the multiplier
+        const dx = 1000 * (Math.random() - 0.5) * intensityMultiplier;
+        const dy = 1000 * (Math.random() - 0.5) * intensityMultiplier;
+        splat(x, y, dx, dy, color);
+    }
+}
+
+
+function splat (x, y, dx, dy, color) {
+    splatProgram.bind();
+    gl.uniform1i(splatProgram.uniforms.uTarget, velocity.read.attach(0));
+    gl.uniform1f(splatProgram.uniforms.aspectRatio, canvas.width / canvas.height);
+    gl.uniform2f(splatProgram.uniforms.point, x, y);
+    gl.uniform3f(splatProgram.uniforms.color, dx, dy, 0.0);
+    gl.uniform1f(splatProgram.uniforms.radius, correctRadius(config.SPLAT_RADIUS / 100.0));
+    blit(velocity.write);
+    velocity.swap();
+
+    gl.uniform1i(splatProgram.uniforms.uTarget, dye.read.attach(0));
+    gl.uniform3f(splatProgram.uniforms.color, color.r, color.g, color.b);
+    blit(dye.write);
+    dye.swap();
+}
+
+function correctRadius (radius) {
+    let aspectRatio = canvas.width / canvas.height;
+    if (aspectRatio > 1)
+        radius *= aspectRatio;
+    return radius;
+}
+
+// Get reference to container to check event targets
+const containerElement = document.querySelector('.container');
+
+window.addEventListener('mousedown', e => {
+    // Check if the click started inside the container/form
+    if (containerElement && containerElement.contains(e.target)) {
+        // If the target (or its ancestor) is the container, ignore for fluid
+        return;
+    }
+
+    const rect = canvas.getBoundingClientRect();
+    // Calculate position relative to the canvas origin
+    let posX = scaleByPixelRatio(e.clientX - rect.left);
+    let posY = scaleByPixelRatio(e.clientY - rect.top);
+
+    let pointer = pointers.find(p => p.id == -1);
+    if (pointer == null)
+        pointer = new pointerPrototype();
+
+    // Pass the SCALED PIXEL coordinates relative to the canvas
+    updatePointerDownData(pointer, -1, posX, posY);
+});
+
+window.addEventListener('mousemove', e => {
+    let pointer = pointers[0]; // Assuming the first pointer is for mouse
+    if (!pointer.down) return; // Only track if mouse is down
+
+    const rect = canvas.getBoundingClientRect();
+    // Calculate position relative to the canvas origin
+    let posX = scaleByPixelRatio(e.clientX - rect.left);
+    let posY = scaleByPixelRatio(e.clientY - rect.top);
+
+    // Pass the SCALED PIXEL coordinates relative to the canvas
+    updatePointerMoveData(pointer, posX, posY);
+});
+
+// window.addEventListener('mouseup', ...) // Keep this listener as is
+
+window.addEventListener('touchstart', e => {
+    // Note: We generally avoid preventDefault on window touchstart/move
+    // as it can break scrolling. Let's see if it works without it.
+
+    const touches = e.targetTouches;
+    const rect = canvas.getBoundingClientRect();
+    let didProcessTouchOutside = false;
+
+    for (let i = 0; i < touches.length; i++) {
+        // Check if the touch started inside the container/form
+        if (containerElement && containerElement.contains(touches[i].target)) {
+             continue; // Ignore this specific touch for fluid
+        }
+
+        didProcessTouchOutside = true; // Mark that at least one touch outside occurred
+
+        // Ensure pointers array is large enough
+        // Use pointers.length directly, as pointers[0] is mouse
+        while (pointers.length <= touches[i].identifier + 1)
+             pointers.push(new pointerPrototype());
+
+        // Calculate position relative to the canvas origin
+        let relativeX = touches[i].clientX - rect.left;
+        let relativeY = touches[i].clientY - rect.top;
+        let posX = scaleByPixelRatio(relativeX);
+        let posY = scaleByPixelRatio(relativeY);
+
+        // Find the correct pointer slot or reuse an inactive one if needed
+        // For simplicity, let's just assign based on identifier + 1 for now
+        // (assuming identifier 0 is first touch, 1 is second etc.)
+        let pointerIndex = touches[i].identifier + 1;
+        if(pointerIndex >= pointers.length) pointerIndex = pointers.length -1; // Safety check
+
+
+        // Pass the SCALED PIXEL coordinates relative to the canvas
+        updatePointerDownData(pointers[pointerIndex], touches[i].identifier, posX, posY);
+    }
+     // if (didProcessTouchOutside) { e.preventDefault(); } // Avoid if possible
+});
+
+window.addEventListener('touchmove', e => {
+    const touches = e.targetTouches;
+    const rect = canvas.getBoundingClientRect();
+
+    for (let i = 0; i < touches.length; i++) {
+        // Find the pointer associated with this touch ID
+        let pointer = pointers.find(p => p.id == touches[i].identifier);
+        if (!pointer || !pointer.down) continue; // Ignore if not tracked or not down
+
+        // Calculate position relative to the canvas origin
+        let relativeX = touches[i].clientX - rect.left;
+        let relativeY = touches[i].clientY - rect.top;
+        let posX = scaleByPixelRatio(relativeX);
+        let posY = scaleByPixelRatio(relativeY);
+
+        // Pass the SCALED PIXEL coordinates relative to the canvas
+        updatePointerMoveData(pointer, posX, posY);
+    }
+}, false); // UseCapture = false is default, but good to be explicit
+
+window.addEventListener('touchend', e => {
+    const touches = e.changedTouches;
+    for (let i = 0; i < touches.length; i++)
+    {
+        let pointer = pointers.find(p => p.id == touches[i].identifier);
+        if (pointer == null) continue;
+        updatePointerUpData(pointer);
+    }
+});
+
+window.addEventListener('keydown', e => {
+    if (e.code === 'KeyP')
+        config.PAUSED = !config.PAUSED;
+    if (e.key === ' ')
+        splatStack.push(parseInt(Math.random() * 20) + 5);
+});
+
+function updatePointerDownData (pointer, id, posX, posY) {
+    pointer.id = id;
+    pointer.down = true;
+    pointer.moved = false;
+    pointer.texcoordX = posX / canvas.width;
+    pointer.texcoordY = 1.0 - posY / canvas.height;
+    pointer.prevTexcoordX = pointer.texcoordX;
+    pointer.prevTexcoordY = pointer.texcoordY;
+    pointer.deltaX = 0;
+    pointer.deltaY = 0;
+    pointer.color = generateColor();
+}
+
+function updatePointerMoveData (pointer, posX, posY) {
+    pointer.prevTexcoordX = pointer.texcoordX;
+    pointer.prevTexcoordY = pointer.texcoordY;
+    pointer.texcoordX = posX / canvas.width;
+    pointer.texcoordY = 1.0 - posY / canvas.height;
+    pointer.deltaX = correctDeltaX(pointer.texcoordX - pointer.prevTexcoordX);
+    pointer.deltaY = correctDeltaY(pointer.texcoordY - pointer.prevTexcoordY);
+    pointer.moved = Math.abs(pointer.deltaX) > 0 || Math.abs(pointer.deltaY) > 0;
+}
+
+function updatePointerUpData (pointer) {
+    pointer.down = false;
+}
+
+function correctDeltaX (delta) {
+    let aspectRatio = canvas.width / canvas.height;
+    if (aspectRatio < 1) delta *= aspectRatio;
+    return delta;
+}
+
+function correctDeltaY (delta) {
+    let aspectRatio = canvas.width / canvas.height;
+    if (aspectRatio > 1) delta /= aspectRatio;
+    return delta;
+}
+
+function generateColor () {
+    let c = HSVtoRGB(Math.random(), 1.0, 1.0);
+    c.r *= 0.15;
+    c.g *= 0.15;
+    c.b *= 0.15;
+    return c;
+}
+
+function HSVtoRGB (h, s, v) {
+    let r, g, b, i, f, p, q, t;
+    i = Math.floor(h * 6);
+    f = h * 6 - i;
+    p = v * (1 - s);
+    q = v * (1 - f * s);
+    t = v * (1 - (1 - f) * s);
+
+    switch (i % 6) {
+        case 0: r = v, g = t, b = p; break;
+        case 1: r = q, g = v, b = p; break;
+        case 2: r = p, g = v, b = t; break;
+        case 3: r = p, g = q, b = v; break;
+        case 4: r = t, g = p, b = v; break;
+        case 5: r = v, g = p, b = q; break;
+    }
+
+    return {
+        r,
+        g,
+        b
+    };
+}
+
+function normalizeColor (input) {
+    let output = {
+        r: input.r / 255,
+        g: input.g / 255,
+        b: input.b / 255
+    };
+    return output;
+}
+
+function wrap (value, min, max) {
+    let range = max - min;
+    if (range == 0) return min;
+    return (value - min) % range + min;
+}
+
+function getResolution (resolution) {
+    let aspectRatio = gl.drawingBufferWidth / gl.drawingBufferHeight;
+    if (aspectRatio < 1)
+        aspectRatio = 1.0 / aspectRatio;
+
+    let min = Math.round(resolution);
+    let max = Math.round(resolution * aspectRatio);
+
+    if (gl.drawingBufferWidth > gl.drawingBufferHeight)
+        return { width: max, height: min };
+    else
+        return { width: min, height: max };
+}
+
+function getTextureScale (texture, width, height) {
+    return {
+        x: width / texture.width,
+        y: height / texture.height
+    };
+}
+
+function scaleByPixelRatio (input) {
+    let pixelRatio = window.devicePixelRatio || 1;
+    return Math.floor(input * pixelRatio);
+}
+
+function hashCode (s) {
+    if (s.length == 0) return 0;
+    let hash = 0;
+    for (let i = 0; i < s.length; i++) {
+        hash = (hash << 5) - hash + s.charCodeAt(i);
+        hash |= 0; // Convert to 32bit integer
+    }
+    return hash;
+};