---
title: Ernie 4.5 Video2Code
emoji: 🎬
colorFrom: blue
colorTo: indigo
sdk: gradio
sdk_version: 5.49.1
app_file: app.py
pinned: false
license: apache-2.0
short_description: Convert video tutorials into HTML/CSS using ERNIE 4.5-VL
---

# ⚡ ERNIE 4.5-VL Video-to-Code Agent

**Watch the video, write the code.**

This AI Agent uses **Baidu ERNIE 4.5-VL (Vision-Language Model)** to analyze frontend coding tutorials frame-by-frame and reconstruct the final webpage structure, styling, and logic automatically.


## ✨ Key Features

*   **👁️ Visual Perception**: The AI "watches" the video, identifying HTML structures, CSS layouts, and interactive elements shown on screen.
*   **🛡️ Sandbox Rendering**: Generated code is rendered inside a secure **Iframe**, allowing you to see the live result immediately without style conflicts.
*   **🧹 Clean Output**: Automatically filters out conversational text to provide pure, ready-to-run HTML/CSS/JS code.
*   **📦 Single-File Download**: Get a standalone `.html` file containing all dependencies.

## 🚀 How to Use

1.  **Upload**: Drop an MP4 video file (Frontend tutorials, CSS effects, UI demos).
    *   *Constraint: Max video duration is **30 minutes**.*
2.  **Generate**: Click **"🚀 Generate & Render"**.
3.  **Preview**: 
    *   **Live Preview**: See the code running instantly in the browser.
    *   **Source Code**: Inspect the generated HTML syntax.
4.  **Download**: Save the result to your local machine.

## ⚙️ How It Works

1.  **Frame Extraction**: The video is processed using OpenCV to capture high-quality keyframes.
2.  **Parallel Analysis**: ERNIE 4.5-VL processes video segments in parallel to understand the coding progression and visual outcome.
3.  **Logic Synthesis**: The agent acts as a Senior Frontend Engineer, aggregating the visual insights to write functional code.