Vid2ControlNet

Extract ControlNet maps from videos for ComfyUI workflow

Video Input

Output Directory

ControlNet Types

MediaPipe

Processing Settings

Canny Thresholds

Live Preview

Original Frame Original
OpenPose OpenPose
Depth Map Depth
Canny Edges Canny
Ready to process video
This modern web-based GUI for your Video to ControlNet Extractor includes: 1. A sleek dark theme with animated background (Vanta.js globe) 2. Responsive layout that works on desktop and mobile 3. All the functionality from your Python version: - Video file selection - Output directory selection - ControlNet type selection (OpenPose, Depth, Canny, Normal) - Processing settings (frame skip, canny thresholds) - Live preview of different processing types - Progress tracking during extraction 4. Interactive elements: - Range sliders with live value updates - Toggle switches for options - Status messages and progress bar - Animated loading states The design follows modern UI/UX principles with: - Clear visual hierarchy - Consistent spacing and typography - Meaningful color coding - Intuitive controls - Feedback for user actions The JavaScript includes mock functions to demonstrate all the interactive elements. In a real implementation, these would be connected to your Python backend via WebSockets or similar technology.