golden-video

byArman Khan

Create a fully functional AI Video Dubbing Web App similar to Crayo AI with a clean modern UI and responsive design. TECH STACK: - Frontend: React + Tailwind CSS - Backend: Node.js (Express) - Database: MongoDB - Use FFmpeg for audio/video processing - Use open-source/free APIs (no watermark) CORE FEATURES: 1. USER INTERFACE: - Homepage with drag & drop video upload - Supported formats: MP4, MOV - Video preview player - Language selection dropdown (Hindi, Chinese, English) - Voice selection (Male/Female AI voices) - “Start Dubbing” button - Progress bar (real-time processing status) - Download button after completion 2. VIDEO PROCESSING FLOW: - Upload video - Extract original audio using FFmpeg - Convert speech to text (Speech-to-Text) - Translate text into selected language (Hindi/Chinese) - Convert translated text to speech (Text-to-Speech) - Replace original audio with new dubbed audio - Sync lip timing approximately - Export final dubbed video 3. AI INTEGRATION: - Speech-to-Text: OpenAI Whisper (or free alternative) - Translation: LibreTranslate API (free) - Text-to-Speech: - Hindi voices - Chinese voices - Natural sounding AI voices - Allow voice speed & pitch control 4. BUTTON FUNCTIONALITY: - Upload button → uploads video - Language dropdown → changes target language - Start button → triggers full pipeline - Progress bar → shows real-time % status - Download button → downloads final video - Error handling → show proper messages 5. EXTRA FEATURES: - Dark mode UI - History of previous dubbed videos - File size limit (e.g. 100MB) - Loading animations - Mobile responsive 6. BACKEND LOGIC: - REST API routes: /upload /process /status /download - Queue system for processing jobs - Use temporary storage for files - Clean up old files automatically 7. UI DESIGN: - Modern glassmorphism style - Gradient buttons - Smooth animations - Clean dashboard layout 8. NO WATERMARK: - Ensure output video has no watermark - Use only open-source tools 9. DEPLOYMENT: - Frontend: Vercel - Backend: Render / Railway - Storage: Local or Cloudinary (optional) 10. CODE QUALITY: - Clean, modular code - Proper comments - Error handling everywhere IMPORTANT: - All buttons must work properly - Full working pipeline (upload → dub → download) - No fake UI, everything functional

LandingError
Landing

Comments (0)

No comments yet. Be the first!

Landing design preview
Landing: View Homepage
Landing: Drag Drop Upload
Upload: Select Video File
Preview: Watch Video
Settings: Select Language
Settings: Choose Voice
Settings: Start Dubbing
Processing: View Progress
Results: Download Video
History: View Recent Projects
Settings: Toggle Dark Mode