File size: 1,874 Bytes
25ed9e1 e6bc9f9 62fd815 e6bc9f9 4578e32 25ed9e1 62fd815 25ed9e1 62fd815 25ed9e1 e6bc9f9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
---
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. |