| --- |
| 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. |
