windy-video

byDeep roy

You are an expert UI/UX designer and full-stack software engineer. Create a comprehensive product specification and functional prototype architecture for an advanced AI Video Generation Web Application named "VividForge AI". The application must support four core creative modalities with a modern, dark-themed, high-productivity interface. ### 1. CORE FUNCTIONAL MODALITIES #### A. Text-to-Video (T2V) - Input: Text prompt field (with negative prompt support), aspect ratio selector (16:9, 9:16, 1:1), and duration control (4s, 8s, 16s). - Style Presets: Cinematic, Anime, 3D Render, Photorealistic, Oil Painting. #### B. Image-to-Video (I2V) - Input: Image upload zone (drag-and-drop) + optional text guidance prompt. - Controls: Motion strength slider (1-10) and camera movement controls (Pan, Tilt, Zoom, Roll). #### C. Frame-to-Video (Interpolation/Keyframing) - Input: Multiple image upload slots (First Frame, Middle Frame, Last Frame) to define key milestones. - Feature: AI generates smooth interpolation transitions between the uploaded static frames. #### D. Motion Control & Character Preservation (Advanced Video-to-Video) - Input 1: "Source Character Image" (Target identity, face structure, and wardrobe style). - Input 2: "Driving Motion Video" (The reference video providing the skeletal movement, expressions, and environment tracking). - Core Processing Logic: * Extract spatial motion vectors and facial landmarks from the Driving Video using optical flow and pose estimation (e.g., ControlNet/AnimateDiff pipelines). * Map the Source Character Image onto the moving actor. * CRITICAL RESTRAINT: Implement strict face-shape, structural geometry, and identity preservation matrixing. The final video character must perfectly maintain the bone structure, eye shape, and proportions of the Source Image character, mapping them precisely onto the expressions and movements of the Driving Video without warping or identity drifting. ### 2. UI/UX ARCHITECTURE & DESIGN SYSTEMS - Theme: Ultra-modern Dark Mode (deep charcoals, slate grays, with vibrant neon purple/indigo accents for active states). - Layout: 3-Column Studio Layout: * Left Sidebar: Navigation between the 4 generation modes (T2V, I2V, Frame, Motion). * Center Canvas: Media workspace. Displays prompt inputs/upload zones when empty, and a robust video player with a timeline grid, play/pause, loop toggle, and high-res download buttons when a video is generated. * Right Panel: Advanced settings contextual to the active mode (Seed control, Frame Rate [24/30/60fps], Guidance Scale, Character Weight slider for Motion Control mode). ### 3. TECHNICAL & CODE REQUIREMENTS Provide a robust blueprint for this app. Include: 1. Complete Tailwind CSS color palette and structural layout configuration. 2. A responsive, fully functional front-end component layout using modern UI best practices. 3. Explicit state management logic handles user uploads, loading/generation placeholder states with micro-animations, and successful video playback. 4. Mock or simulate the backend API response objects for the Character Motion Control pipeline to demonstrate how the image features map onto the video arrays.