Initial commit

.env.example

@@ -0,0 +1 @@
+GOOGLE_API_KEY=your_api_key_here

.gitignore

@@ -0,0 +1,3 @@
+.env
+__pycache__
+venv/

agent.py

@@ -0,0 +1,211 @@
+import os
+from typing import TypedDict, Optional
+from langgraph.graph import StateGraph, END
+from langchain_google_genai import ChatGoogleGenerativeAI
+from google import genai
+from gradio_client import Client, handle_file
+import shutil
+import requests
+import tempfile
+import os
+import shutil
+import requests
+import tempfile
+
+from dotenv import load_dotenv
+
+load_dotenv()
+
+# State Definition
+class ContinuityState(TypedDict):
+    video_a_url: str
+    video_c_url: str
+    user_notes: Optional[str]
+    scene_analysis: Optional[str]
+    veo_prompt: Optional[str]
+    generated_video_url: Optional[str]
+    video_a_local_path: Optional[str]
+    video_c_local_path: Optional[str]
+
+# Node 1: Analyst
+def analyze_videos(state: ContinuityState) -> dict:
+    print("--- 🧐 Analyst Node (Director) ---")
+    
+    video_a_url = state['video_a_url']
+    video_c_url = state['video_c_url']
+    
+    # Initialize Google GenAI Client
+    client = genai.Client(api_key=os.environ["GOOGLE_API_KEY"])
+    
+    try:
+        # Download videos to temp files for analysis
+        def download_to_temp(url):
+            print(f"Downloading: {url}")
+            resp = requests.get(url, stream=True)
+            resp.raise_for_status()
+            suffix = os.path.splitext(url.split("/")[-1])[1] or ".mp4"
+            with tempfile.NamedTemporaryFile(delete=False, suffix=suffix) as f:
+                shutil.copyfileobj(resp.raw, f)
+                return f.name
+
+        path_a = state.get('video_a_local_path')
+        if not path_a:
+             path_a = download_to_temp(video_a_url)
+             
+        path_c = state.get('video_c_local_path')
+        if not path_c:
+             path_c = download_to_temp(video_c_url)
+        
+        print("Uploading videos to Gemini...")
+        file_a = client.files.upload(file=path_a)
+        file_c = client.files.upload(file=path_c)
+        
+        # Wait for processing? Usually quick for small files, but good practice to check state if needed.
+        # For simplicity in this agent, assuming ready or waiting implicitly. 
+        # (Gemini 1.5 Flash usually processes quickly)
+
+        prompt = """
+        You are a film director. 
+        Analyze the motion, lighting, and subject of the first video (Video A) and the second video (Video C). 
+        Write a detailed visual prompt for a 2-second video (Video B) that smoothly transitions from the end of A to the start of C.
+        Target Output: A single concise descriptive paragraph for the video generation model.
+        """
+        
+        print("Generating transition prompt...")
+        response = client.models.generate_content(
+            model="gemini-1.5-flash",
+            contents=[prompt, file_a, file_c]
+        )
+        
+        transition_prompt = response.text
+        print(f"Generated Prompt: {transition_prompt}")
+        
+        # Cleanup uploaded files from local ? (Files on server stay for 48h or until deleted)
+        # client.files.delete(name=file_a.name) 
+        # client.files.delete(name=file_c.name)
+        
+        # We also need these local paths for the Generator node to extract frames!
+        # Pass them in state or re-download? Better to pass paths if possible, but 
+        # State definition expects URLs. We can add temp paths to state or re-download.
+        # Let's add temp paths to state for efficiency.
+        
+        return {
+            "scene_analysis": transition_prompt, 
+            "veo_prompt": transition_prompt,
+            "video_a_local_path": path_a,
+            "video_c_local_path": path_c
+        }
+
+    except Exception as e:
+        print(f"Error in Analyst: {e}")
+        return {"scene_analysis": f"Error: {str(e)}", "veo_prompt": "Error"}
+
+
+# Node 2: Generator (Wan 2.2 First Last Frame)
+def generate_video(state: ContinuityState) -> dict:
+    print("--- 🎥 Generator Node (Wan 2.2) ---")
+    
+    prompt = state.get('veo_prompt', "")
+    path_a = state.get('video_a_local_path')
+    path_c = state.get('video_c_local_path')
+    
+    if not path_a or not path_c:
+        # Fallback if dependencies failed or state clean
+        # Re-download logic would go here, but assuming flow works
+        return {"generated_video_url": "Error: Missing local video paths"}
+
+    try:
+        # Extract Frames
+        import cv2
+        from PIL import Image
+        
+        def get_frame(video_path, location="last"):
+            cap = cv2.VideoCapture(video_path)
+            total_frames = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
+            if location == "last":
+                cap.set(cv2.CAP_PROP_POS_FRAMES, total_frames - 1)
+            else: # first
+                cap.set(cv2.CAP_PROP_POS_FRAMES, 0)
+            
+            ret, frame = cap.read()
+            cap.release()
+            
+            if ret:
+                # Convert BGR to RGB
+                frame_rgb = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
+                return Image.fromarray(frame_rgb)
+            else:
+                raise ValueError(f"Could not extract frame from {video_path}")
+
+        print("Extracting frames...")
+        img_start = get_frame(path_a, "last")
+        img_end = get_frame(path_c, "first")
+        
+        # Save frames to temp files for Gradio Client (it handles file paths better than PIL objects usually)
+        # Although client.predict might take PIL, handle_file is safer with paths.
+        with tempfile.NamedTemporaryFile(delete=False, suffix=".png") as f_start:
+            img_start.save(f_start, format="PNG")
+            start_path = f_start.name
+            
+        with tempfile.NamedTemporaryFile(delete=False, suffix=".png") as f_end:
+            img_end.save(f_end, format="PNG")
+            end_path = f_end.name
+
+        # Call Wan 2.2
+        print("Initializing Wan Client...")
+        client = Client("multimodalart/wan-2-2-first-last-frame")
+        
+        print(f"Generating transition with prompt: {prompt[:50]}...")
+        # predict(start_image, end_image, prompt, negative_prompt, duration, steps, guide, guide2, seed, rand, api_name)
+        result = client.predict(
+            start_image_pil=handle_file(start_path),
+            end_image_pil=handle_file(end_path),
+            prompt=prompt,
+            negative_prompt="blurry, distorted, low quality, static",
+            duration_seconds=2.1,
+            steps=20, # Default is often around 20-30 for good quality
+            guidance_scale=5.0,
+            guidance_scale_2=5.0,
+            seed=42,
+            randomize_seed=True,
+            api_name="/generate_video"
+        )
+        
+        # Clean up temp frames and videos
+        try:
+            os.remove(start_path)
+            os.remove(end_path)
+            os.remove(path_a)
+            os.remove(path_c)
+        except:
+            pass
+
+        # Parse valid result
+        # Expected: ({'video': path, ...}, seed) or just path depending on version
+        # Based on inspection: (generated_video_mp4, seed)
+        video_out = result[0]
+        if isinstance(video_out, dict) and 'video' in video_out:
+             return {"generated_video_url": video_out['video']}
+        elif isinstance(video_out, str) and os.path.exists(video_out):
+             return {"generated_video_url": video_out}
+        else:
+             return {"generated_video_url": f"Error: Unexpected output {result}"}
+
+    except Exception as e:
+        print(f"Error in Generator: {e}")
+        return {"generated_video_url": f"Error: {str(e)}"}
+
+
+# Graph Construction
+workflow = StateGraph(ContinuityState)
+
+workflow.add_node("analyst", analyze_videos)
+# workflow.add_node("prompter", draft_prompt) # Skipped, Analyst does extraction + prompting
+workflow.add_node("generator", generate_video)
+
+workflow.set_entry_point("analyst")
+
+workflow.add_edge("analyst", "generator")
+workflow.add_edge("generator", END)
+
+app = workflow.compile()

continuity_agent/agent.py

@@ -0,0 +1,211 @@
+import os
+from typing import TypedDict, Optional
+from langgraph.graph import StateGraph, END
+from langchain_google_genai import ChatGoogleGenerativeAI
+from google import genai
+from gradio_client import Client, handle_file
+import shutil
+import requests
+import tempfile
+import os
+import shutil
+import requests
+import tempfile
+
+from dotenv import load_dotenv
+
+load_dotenv()
+
+# State Definition
+class ContinuityState(TypedDict):
+    video_a_url: str
+    video_c_url: str
+    user_notes: Optional[str]
+    scene_analysis: Optional[str]
+    veo_prompt: Optional[str]
+    generated_video_url: Optional[str]
+    video_a_local_path: Optional[str]
+    video_c_local_path: Optional[str]
+
+# Node 1: Analyst
+def analyze_videos(state: ContinuityState) -> dict:
+    print("--- 🧐 Analyst Node (Director) ---")
+    
+    video_a_url = state['video_a_url']
+    video_c_url = state['video_c_url']
+    
+    # Initialize Google GenAI Client
+    client = genai.Client(api_key=os.environ["GOOGLE_API_KEY"])
+    
+    try:
+        # Download videos to temp files for analysis
+        def download_to_temp(url):
+            print(f"Downloading: {url}")
+            resp = requests.get(url, stream=True)
+            resp.raise_for_status()
+            suffix = os.path.splitext(url.split("/")[-1])[1] or ".mp4"
+            with tempfile.NamedTemporaryFile(delete=False, suffix=suffix) as f:
+                shutil.copyfileobj(resp.raw, f)
+                return f.name
+
+        path_a = state.get('video_a_local_path')
+        if not path_a:
+             path_a = download_to_temp(video_a_url)
+             
+        path_c = state.get('video_c_local_path')
+        if not path_c:
+             path_c = download_to_temp(video_c_url)
+        
+        print("Uploading videos to Gemini...")
+        file_a = client.files.upload(file=path_a)
+        file_c = client.files.upload(file=path_c)
+        
+        # Wait for processing? Usually quick for small files, but good practice to check state if needed.
+        # For simplicity in this agent, assuming ready or waiting implicitly. 
+        # (Gemini 1.5 Flash usually processes quickly)
+
+        prompt = """
+        You are a film director. 
+        Analyze the motion, lighting, and subject of the first video (Video A) and the second video (Video C). 
+        Write a detailed visual prompt for a 2-second video (Video B) that smoothly transitions from the end of A to the start of C.
+        Target Output: A single concise descriptive paragraph for the video generation model.
+        """
+        
+        print("Generating transition prompt...")
+        response = client.models.generate_content(
+            model="gemini-1.5-flash",
+            contents=[prompt, file_a, file_c]
+        )
+        
+        transition_prompt = response.text
+        print(f"Generated Prompt: {transition_prompt}")
+        
+        # Cleanup uploaded files from local ? (Files on server stay for 48h or until deleted)
+        # client.files.delete(name=file_a.name) 
+        # client.files.delete(name=file_c.name)
+        
+        # We also need these local paths for the Generator node to extract frames!
+        # Pass them in state or re-download? Better to pass paths if possible, but 
+        # State definition expects URLs. We can add temp paths to state or re-download.
+        # Let's add temp paths to state for efficiency.
+        
+        return {
+            "scene_analysis": transition_prompt, 
+            "veo_prompt": transition_prompt,
+            "video_a_local_path": path_a,
+            "video_c_local_path": path_c
+        }
+
+    except Exception as e:
+        print(f"Error in Analyst: {e}")
+        return {"scene_analysis": f"Error: {str(e)}", "veo_prompt": "Error"}
+
+
+# Node 2: Generator (Wan 2.2 First Last Frame)
+def generate_video(state: ContinuityState) -> dict:
+    print("--- 🎥 Generator Node (Wan 2.2) ---")
+    
+    prompt = state.get('veo_prompt', "")
+    path_a = state.get('video_a_local_path')
+    path_c = state.get('video_c_local_path')
+    
+    if not path_a or not path_c:
+        # Fallback if dependencies failed or state clean
+        # Re-download logic would go here, but assuming flow works
+        return {"generated_video_url": "Error: Missing local video paths"}
+
+    try:
+        # Extract Frames
+        import cv2
+        from PIL import Image
+        
+        def get_frame(video_path, location="last"):
+            cap = cv2.VideoCapture(video_path)
+            total_frames = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
+            if location == "last":
+                cap.set(cv2.CAP_PROP_POS_FRAMES, total_frames - 1)
+            else: # first
+                cap.set(cv2.CAP_PROP_POS_FRAMES, 0)
+            
+            ret, frame = cap.read()
+            cap.release()
+            
+            if ret:
+                # Convert BGR to RGB
+                frame_rgb = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
+                return Image.fromarray(frame_rgb)
+            else:
+                raise ValueError(f"Could not extract frame from {video_path}")
+
+        print("Extracting frames...")
+        img_start = get_frame(path_a, "last")
+        img_end = get_frame(path_c, "first")
+        
+        # Save frames to temp files for Gradio Client (it handles file paths better than PIL objects usually)
+        # Although client.predict might take PIL, handle_file is safer with paths.
+        with tempfile.NamedTemporaryFile(delete=False, suffix=".png") as f_start:
+            img_start.save(f_start, format="PNG")
+            start_path = f_start.name
+            
+        with tempfile.NamedTemporaryFile(delete=False, suffix=".png") as f_end:
+            img_end.save(f_end, format="PNG")
+            end_path = f_end.name
+
+        # Call Wan 2.2
+        print("Initializing Wan Client...")
+        client = Client("multimodalart/wan-2-2-first-last-frame")
+        
+        print(f"Generating transition with prompt: {prompt[:50]}...")
+        # predict(start_image, end_image, prompt, negative_prompt, duration, steps, guide, guide2, seed, rand, api_name)
+        result = client.predict(
+            start_image_pil=handle_file(start_path),
+            end_image_pil=handle_file(end_path),
+            prompt=prompt,
+            negative_prompt="blurry, distorted, low quality, static",
+            duration_seconds=2.1,
+            steps=20, # Default is often around 20-30 for good quality
+            guidance_scale=5.0,
+            guidance_scale_2=5.0,
+            seed=42,
+            randomize_seed=True,
+            api_name="/generate_video"
+        )
+        
+        # Clean up temp frames and videos
+        try:
+            os.remove(start_path)
+            os.remove(end_path)
+            os.remove(path_a)
+            os.remove(path_c)
+        except:
+            pass
+
+        # Parse valid result
+        # Expected: ({'video': path, ...}, seed) or just path depending on version
+        # Based on inspection: (generated_video_mp4, seed)
+        video_out = result[0]
+        if isinstance(video_out, dict) and 'video' in video_out:
+             return {"generated_video_url": video_out['video']}
+        elif isinstance(video_out, str) and os.path.exists(video_out):
+             return {"generated_video_url": video_out}
+        else:
+             return {"generated_video_url": f"Error: Unexpected output {result}"}
+
+    except Exception as e:
+        print(f"Error in Generator: {e}")
+        return {"generated_video_url": f"Error: {str(e)}"}
+
+
+# Graph Construction
+workflow = StateGraph(ContinuityState)
+
+workflow.add_node("analyst", analyze_videos)
+# workflow.add_node("prompter", draft_prompt) # Skipped, Analyst does extraction + prompting
+workflow.add_node("generator", generate_video)
+
+workflow.set_entry_point("analyst")
+
+workflow.add_edge("analyst", "generator")
+workflow.add_edge("generator", END)
+
+app = workflow.compile()

main.py

@@ -0,0 +1,57 @@
+from fastapi import FastAPI, HTTPException
+from pydantic import BaseModel
+from typing import Optional
+import uvicorn
+import os
+
+from agent import app as agent_app
+
+app = FastAPI(title="Continuity", description="AI Video Bridging Service")
+
+class BridgeRequest(BaseModel):
+    url_a: str
+    url_c: str
+    notes: Optional[str] = None
+
+@app.post("/create-bridge")
+async def create_bridge(request: BridgeRequest):
+    """
+    Orchestrates the creation of a bridge video between two input clips.
+    """
+    try:
+        # Initialize LangGraph state
+        initial_state = {
+            "video_a_url": request.url_a,
+            "video_c_url": request.url_c,
+            "user_notes": request.notes,
+            "scene_analysis": None,
+            "veo_prompt": None,
+            "generated_video_url": None
+        }
+        
+        print(f"Starting bridge generation for: {request.url_a} -> {request.url_c}")
+        
+        # Invoke the graph
+        result = agent_app.invoke(initial_state)
+        
+        video_url = result.get("generated_video_url")
+        analysis = result.get("scene_analysis")
+        
+        # Check for error strings in the URL field as per agent logic
+        if video_url and "Error" in video_url:
+             raise HTTPException(status_code=500, detail=video_url)
+             
+        if not video_url:
+             raise HTTPException(status_code=500, detail="Failed to generate video (No URL returned)")
+
+        return {
+            "video_url": video_url,
+            "analysis_summary": analysis
+        }
+
+    except Exception as e:
+        # Catch unexpected errors
+        raise HTTPException(status_code=500, detail=str(e))
+
+if __name__ == "__main__":
+    uvicorn.run("main:app", host="0.0.0.0", port=8000, reload=True)

requirements.txt

@@ -0,0 +1,12 @@
+fastapi
+uvicorn
+python-dotenv
+langgraph
+langchain-google-genai
+gradio_client
+pydantic
+requests
+
+opencv-python
+google-genai
+python-multipart

schemas.py

@@ -0,0 +1,10 @@
+from pydantic import BaseModel, HttpUrl
+from typing import Optional
+
+class VideoInput(BaseModel):
+    video_url_1: str
+    video_url_2: str
+    user_notes: Optional[str] = "Make it cinematic"
+
+class VideoOutput(BaseModel):
+    bridging_video_url: str

server.py

@@ -0,0 +1,90 @@
+from fastapi import FastAPI, HTTPException, UploadFile, Form, File
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
+import uvicorn
+import os
+import shutil
+import uuid
+
+# Import from the subpackage as before
+from continuity_agent.agent import continuity_graph
+
+app = FastAPI(title="Continuity", description="AI Video Bridging Service")
+
+# 1. Enable CORS
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# 2. Setup Static Files for Outputs
+OUTPUT_DIR = "outputs"
+os.makedirs(OUTPUT_DIR, exist_ok=True)
+app.mount("/outputs", StaticFiles(directory=OUTPUT_DIR), name="outputs")
+
+@app.post("/generate-transition")
+async def generate_transition(
+    video_a: UploadFile = File(...),
+    video_c: UploadFile = File(...),
+    prompt: str = Form("Cinematic transition")
+):
+    try:
+        # Generate unique ID for this request
+        request_id = str(uuid.uuid4())
+        
+        # Save inputs
+        # Preserve extension
+        ext_a = os.path.splitext(video_a.filename)[1] or ".mp4"
+        ext_c = os.path.splitext(video_c.filename)[1] or ".mp4"
+        
+        path_a = os.path.join(OUTPUT_DIR, f"{request_id}_a{ext_a}")
+        path_c = os.path.join(OUTPUT_DIR, f"{request_id}_c{ext_c}")
+        
+        with open(path_a, "wb") as buffer:
+            shutil.copyfileobj(video_a.file, buffer)
+            
+        with open(path_c, "wb") as buffer:
+            shutil.copyfileobj(video_c.file, buffer)
+            
+        # Initialize State with LOCAL PATHS
+        # We don't need URLs for the new logic, but state definition might map them.
+        # agent.py logic checks video_a_local_path if present.
+        initial_state = {
+            "video_a_url": "local_upload", # Placeholder
+            "video_c_url": "local_upload", 
+            "user_notes": prompt,
+            "veo_prompt": prompt,
+            "video_a_local_path": os.path.abspath(path_a),
+            "video_c_local_path": os.path.abspath(path_c),
+            "generated_video_url": "", 
+            "status": "started"
+        }
+        
+        # Invoke Agent
+        result = continuity_graph.invoke(initial_state)
+        
+        # The agent returns 'generated_video_url' which is a local absolute path (e.g., from tempfile or cache)
+        # We need to copy/move this to our STATIC directory to serve it.
+        gen_path = result.get("generated_video_url")
+        
+        if not gen_path or "Error" in gen_path:
+            raise HTTPException(status_code=500, detail=f"Generation failed: {gen_path}")
+            
+        # Copy generated video to outputs
+        final_filename = f"{request_id}_bridge.mp4"
+        final_output_path = os.path.join(OUTPUT_DIR, final_filename)
+        
+        shutil.copy(gen_path, final_output_path)
+        
+        # Return URL relative to server root
+        return {"video_url": f"/outputs/{final_filename}"}
+
+    except Exception as e:
+        print(f"Server Error: {e}")
+        raise HTTPException(status_code=500, detail=str(e))
+
+if __name__ == "__main__":
+    uvicorn.run("server:app", host="0.0.0.0", port=8000, reload=True)

state.py

@@ -0,0 +1,9 @@
+from typing import TypedDict, Optional
+
+class AgentState(TypedDict):
+    video_1_url: str
+    video_2_url: str
+    analysis_1: Optional[str]
+    analysis_2: Optional[str]
+    bridging_prompt: Optional[str]
+    generated_video_path: Optional[str]

stitch_continuity_dashboard/code.html

@@ -0,0 +1,309 @@
+<!DOCTYPE html>
+
+<html class="dark" lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>Continuity Dashboard</title>
+<!-- Google Fonts -->
+<link href="https://fonts.googleapis.com" rel="preconnect"/>
+<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
+<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600;700&amp;display=swap" rel="stylesheet"/>
+<!-- Material Symbols -->
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<!-- Tailwind CSS -->
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    colors: {
+                        "primary": "#7f0df2",
+                        "background-light": "#f7f5f8",
+                        "background-dark": "#191022",
+                        "surface-dark": "#2a1d35",
+                        "border-dark": "#4d3168",
+                    },
+                    fontFamily: {
+                        "display": ["Space Grotesk", "sans-serif"],
+                        "body": ["Noto Sans", "sans-serif"],
+                    },
+                    borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "2xl": "1rem", "full": "9999px"},
+                    boxShadow: {
+                        "neon": "0 0 20px rgba(127, 13, 242, 0.4)",
+                        "neon-strong": "0 0 35px rgba(127, 13, 242, 0.6)",
+                    }
+                },
+            },
+        }
+    </script>
+<style>
+        /* Custom scrollbar for dark theme */
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #191022; 
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #4d3168; 
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #7f0df2; 
+        }
+        .glass-panel {
+            background: rgba(25, 16, 34, 0.6);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            border: 1px solid rgba(255, 255, 255, 0.05);
+        }
+        .connection-line {
+            height: 2px;
+            flex-grow: 1;
+            background: linear-gradient(90deg, #4d3168 0%, #7f0df2 50%, #4d3168 100%);
+            opacity: 0.5;
+            position: relative;
+        }
+        .connection-line::after {
+            content: '';
+            position: absolute;
+            right: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 6px;
+            height: 6px;
+            background: #7f0df2;
+            border-radius: 50%;
+            box-shadow: 0 0 10px #7f0df2;
+        }
+    </style>
+</head>
+<body class="relative flex h-screen w-full flex-col bg-background-light dark:bg-background-dark font-display overflow-hidden text-white selection:bg-primary selection:text-white">
+<!-- Background Ambient Glows -->
+<div class="fixed top-0 left-0 w-full h-full pointer-events-none overflow-hidden z-0">
+<div class="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/20 rounded-full blur-[120px]"></div>
+<div class="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-blue-600/10 rounded-full blur-[120px]"></div>
+</div>
+<!-- Header -->
+<header class="fixed top-0 left-0 right-0 z-50 flex items-center justify-between whitespace-nowrap border-b border-white/5 glass-panel px-8 py-4">
+<div class="flex items-center gap-4 text-white">
+<div class="size-8 flex items-center justify-center text-primary">
+<span class="material-symbols-outlined text-3xl">emergency_recording</span>
+</div>
+<h2 class="text-white text-xl font-bold leading-tight tracking-[-0.015em] bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-400">
+                Continuity <span class="text-xs font-normal text-gray-400 ml-2 opacity-60 tracking-widest uppercase">The Missing Link</span>
+</h2>
+</div>
+<div class="flex gap-3">
+<button class="flex size-10 cursor-pointer items-center justify-center overflow-hidden rounded-lg bg-surface-dark hover:bg-primary/20 transition-colors border border-white/5 text-white">
+<span class="material-symbols-outlined text-[20px]">settings</span>
+</button>
+<button class="flex size-10 cursor-pointer items-center justify-center overflow-hidden rounded-lg bg-surface-dark hover:bg-primary/20 transition-colors border border-white/5 text-white">
+<span class="material-symbols-outlined text-[20px]">account_circle</span>
+</button>
+</div>
+</header>
+<!-- Main Workspace -->
+<main class="relative z-10 flex flex-1 flex-col items-center justify-center w-full px-8 pt-20 pb-28">
+<!-- Timeline Container -->
+<div class="w-full max-w-[1400px] flex items-center justify-center gap-6 xl:gap-10">
+<!-- SCENE A: Upload State -->
+<div class="flex flex-col gap-4 flex-1 max-w-[320px] group">
+<div class="flex items-center justify-between px-1">
+<span class="text-xs font-bold tracking-widest text-gray-400 uppercase">Input Source</span>
+<span class="text-xs font-bold tracking-widest text-primary">SCENE A</span>
+</div>
+<div class="relative flex flex-col items-center justify-center gap-6 rounded-2xl border-2 border-dashed border-border-dark bg-surface-dark/30 hover:bg-surface-dark/50 hover:border-primary/50 transition-all duration-300 px-6 py-12 h-[360px]">
+<div class="size-16 rounded-full bg-surface-dark flex items-center justify-center mb-2 shadow-lg group-hover:scale-110 transition-transform">
+<span class="material-symbols-outlined text-3xl text-gray-300 group-hover:text-white">video_file</span>
+</div>
+<div class="flex flex-col items-center gap-2 text-center">
+<p class="text-white text-lg font-bold">Start Scene</p>
+<p class="text-gray-400 text-sm max-w-[200px]">Drag &amp; drop your starting video clip here</p>
+</div>
+<input type="file" id="video-upload-a" accept="video/*,image/*" class="hidden" onchange="handleFileSelect(this, 'label-a')">
+<button onclick="document.getElementById('video-upload-a').click()" class="mt-2 flex items-center justify-center rounded-lg h-9 px-4 bg-surface-dark hover:bg-primary hover:text-white border border-white/10 transition-all text-sm font-bold tracking-wide text-gray-200 shadow-lg">
+<span class="material-symbols-outlined text-[18px] mr-2">upload</span>
+<span id="label-a">Select File</span>
+</button>
+</div>
+</div>
+<!-- Connector Left -->
+<div class="hidden md:flex flex-col items-center justify-center w-16 xl:w-24 opacity-40">
+<div class="w-full h-[2px] bg-gradient-to-r from-transparent via-primary to-transparent relative">
+<div class="absolute right-0 -top-1.5 text-primary animate-pulse">
+<span class="material-symbols-outlined text-lg">chevron_right</span>
+</div>
+</div>
+</div>
+<!-- THE BRIDGE: AI Generation Core -->
+<div class="flex flex-col gap-4 flex-[1.2] max-w-[480px] relative z-20">
+<div class="flex items-center justify-center px-1">
+<span class="text-xs font-bold tracking-[0.2em] text-primary drop-shadow-[0_0_8px_rgba(127,13,242,0.8)] uppercase animate-pulse">The Bridge</span>
+</div>
+<!-- Active Card Container -->
+<div class="relative w-full aspect-[4/3] rounded-2xl overflow-hidden shadow-neon border border-primary/30 group">
+<!-- Placeholder Gradient Background -->
+<div class="absolute inset-0 bg-gradient-to-br from-surface-dark to-[#0f0a16] z-0"></div>
+<!-- Abstract Visualization -->
+<div class="absolute inset-0 opacity-40 mix-blend-overlay bg-[url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&amp;w=1000&amp;auto=format&amp;fit=crop')] bg-cover bg-center" data-alt="Abstract digital waves representing AI processing"></div>
+<!-- Glowing Core Animation (CSS Only representation) -->
+<div class="absolute inset-0 flex items-center justify-center">
+<div class="relative size-32">
+<div class="absolute inset-0 rounded-full border-2 border-primary/20 animate-[spin_4s_linear_infinite]"></div>
+<div class="absolute inset-2 rounded-full border-2 border-t-primary border-r-transparent border-b-primary/50 border-l-transparent animate-[spin_3s_linear_infinite_reverse]"></div>
+<div class="absolute inset-0 flex items-center justify-center">
+<span class="material-symbols-outlined text-4xl text-primary drop-shadow-[0_0_10px_rgba(127,13,242,1)]">auto_awesome</span>
+</div>
+</div>
+</div>
+<!-- Content Overlay -->
+<div class="absolute bottom-0 left-0 w-full p-6 bg-gradient-to-t from-black/90 via-black/50 to-transparent flex items-end justify-between">
+<div class="flex flex-col gap-1">
+<p class="text-white text-xl font-bold leading-tight">AI Transition</p>
+<div class="flex items-center gap-2">
+<div class="size-2 rounded-full bg-yellow-500 animate-pulse"></div>
+<p class="text-gray-300 text-xs font-medium uppercase tracking-wide">Waiting for inputs...</p>
+</div>
+</div>
+</div>
+</div>
+</div>
+<!-- Connector Right -->
+<div class="hidden md:flex flex-col items-center justify-center w-16 xl:w-24 opacity-40">
+<div class="w-full h-[2px] bg-gradient-to-r from-transparent via-primary to-transparent relative">
+<div class="absolute right-0 -top-1.5 text-primary animate-pulse">
+<span class="material-symbols-outlined text-lg">chevron_right</span>
+</div>
+</div>
+</div>
+<!-- SCENE C: Upload State -->
+<div class="flex flex-col gap-4 flex-1 max-w-[320px] group">
+<div class="flex items-center justify-between px-1">
+<span class="text-xs font-bold tracking-widest text-primary">SCENE C</span>
+<span class="text-xs font-bold tracking-widest text-gray-400 uppercase">Target Source</span>
+</div>
+<div class="relative flex flex-col items-center justify-center gap-6 rounded-2xl border-2 border-dashed border-border-dark bg-surface-dark/30 hover:bg-surface-dark/50 hover:border-primary/50 transition-all duration-300 px-6 py-12 h-[360px]">
+<div class="size-16 rounded-full bg-surface-dark flex items-center justify-center mb-2 shadow-lg group-hover:scale-110 transition-transform">
+<span class="material-symbols-outlined text-3xl text-gray-300 group-hover:text-white">movie_edit</span>
+</div>
+<div class="flex flex-col items-center gap-2 text-center">
+<p class="text-white text-lg font-bold">End Scene</p>
+<p class="text-gray-400 text-sm max-w-[200px]">Drag &amp; drop your target video clip here</p>
+</div>
+<input type="file" id="video-upload-c" accept="video/*,image/*" class="hidden" onchange="handleFileSelect(this, 'label-c')">
+<button onclick="document.getElementById('video-upload-c').click()" class="mt-2 flex items-center justify-center rounded-lg h-9 px-4 bg-surface-dark hover:bg-primary hover:text-white border border-white/10 transition-all text-sm font-bold tracking-wide text-gray-200 shadow-lg">
+<span class="material-symbols-outlined text-[18px] mr-2">upload</span>
+<span id="label-c">Select File</span>
+</button>
+</div>
+</div>
+</div>
+</main>
+<!-- Floating Action Bar (Director Controls) -->
+<div class="fixed bottom-10 left-1/2 -translate-x-1/2 z-50 w-full max-w-2xl px-4">
+<div class="glass-panel rounded-full p-2 pl-6 flex items-center shadow-neon">
+<div class="flex-1 flex items-center gap-3">
+<span class="material-symbols-outlined text-gray-400">edit_note</span>
+<input id="director-notes" class="w-full bg-transparent border-none text-white placeholder-gray-500 focus:ring-0 text-sm font-medium" placeholder="Add Director Notes (e.g., 'Slow dissolve', 'Cyber glitch')..." type="text"/>
+</div>
+<div class="h-8 w-[1px] bg-white/10 mx-2"></div>
+<button id="generate-btn" class="flex items-center gap-2 bg-primary hover:bg-[#6b0bc9] text-white px-6 py-3 rounded-full font-bold text-sm transition-all shadow-[0_0_15px_rgba(127,13,242,0.4)] hover:shadow-[0_0_25px_rgba(127,13,242,0.6)] whitespace-nowrap">
+<span class="material-symbols-outlined text-[20px]">movie_filter</span>
+                Generate Transition
+            </button>
+</div>
+</div>
+
+<script>
+  // UI Helper: Update filename text when file is selected
+  function handleFileSelect(input, labelId) {
+    if (input.files && input.files[0]) {
+      const label = document.getElementById(labelId);
+      label.innerText = input.files[0].name;
+      label.classList.add("text-primary"); // Turn purple to indicate success
+    }
+  }
+
+  // Main Logic: Send to Agent
+  const generateBtn = document.getElementById("generate-btn");
+  if (generateBtn) {
+      generateBtn.addEventListener("click", async () => {
+        const fileA = document.getElementById("video-upload-a").files[0];
+        const fileC = document.getElementById("video-upload-c").files[0];
+        const notes = document.getElementById("director-notes").value;
+        const btn = document.getElementById("generate-btn");
+    
+        // 1. Validation
+        if (!fileA || !fileC) {
+          alert("⚠️ Action Required: Please upload both Scene A and Scene C videos.");
+          return;
+        }
+    
+        // 2. Loading State
+        const originalContent = btn.innerHTML;
+        btn.innerHTML = `<span class="material-symbols-outlined animate-spin text-[20px] mr-2">progress_activity</span> Director is working...`;
+        btn.disabled = true;
+        btn.classList.add("opacity-70", "cursor-not-allowed");
+    
+        const formData = new FormData();
+        formData.append("video_a", fileA);
+        formData.append("video_c", fileC);
+        formData.append("prompt", notes || "Cinematic transition between scenes");
+    
+        try {
+          // 3. Send to Server
+          const response = await fetch("http://127.0.0.1:8000/generate-transition", {
+            method: "POST",
+            body: formData
+          });
+    
+          if (!response.ok) throw new Error("Agent backend returned an error.");
+    
+          const data = await response.json();
+    
+          // 4. Success: Inject Video into the Middle Card
+          // We target the middle "Bridge" div
+          const bridgeCard = document.querySelector(".aspect-\\[4\\/3\\]");
+          // Find the middle card specifically if possible, relying on the class is risky if multiple match.
+          // But in this layout, the middle one is distinct or we can target by structure. 
+          // The middle card is the second .aspect-[4/3] roughly, but the user script uses querySelector which matches the first one?
+          // Wait, the Code.html has 3 cards.
+          // Scene A: .aspect-[4/3]
+          // Bridge: .aspect-[4/3] (line 148)
+          // Scene C: .aspect-[4/3]
+          
+          // User script used document.querySelector(".aspect-\\[4\\/3\\]"). 
+          // This matches the first one (Scene A)! That's a bug in the user's snippet.
+          // I will fix it to target the BRIDGE card.
+          // The bridge card container has text "The Bridge".
+          // I'll add an ID to the bridge container or select by index.
+          // Safer to select the middle one: document.querySelectorAll(".aspect-\\[4\\/3\\]")[1]
+          
+          const cards = document.querySelectorAll(".aspect-\\[4\\/3\\]");
+          if (cards.length >= 2) {
+              const bridgeCard = cards[1];
+              bridgeCard.innerHTML = `
+                <video controls autoplay loop class="w-full h-full object-cover rounded-2xl border-2 border-primary shadow-neon">
+                  <source src="http://127.0.0.1:8000${data.video_url}" type="video/mp4">
+                  Your browser does not support the video tag.
+                </video>
+              `;
+          }
+          
+        } catch (error) {
+          console.error(error);
+          alert("❌ Generation Failed: " + error.message + "\n\nMake sure 'python server.py' is running!");
+        } finally {
+          btn.innerHTML = originalContent;
+          btn.disabled = false;
+          btn.classList.remove("opacity-70", "cursor-not-allowed");
+        }
+      });
+  }
+</script>
+</body></html>

sync_agent.py

@@ -0,0 +1,3 @@
+import shutil
+shutil.copy("agent.py", "continuity_agent/agent.py")
+print("Synced agent.py")