Buatkan aplikasi web fullstack profesional untuk AI Video Generator menggunakan:
- Backend: Node.js (Express)
- Frontend: HTML + TailwindCSS + Vanilla JavaScript
- Gunakan arsitektur modular dan clean code
========================================
🎯 FITUR UTAMA
========================================
1. GENERATE VIDEO AI
- Text-to-Video (input teks prompt)
- Image-to-Video (upload gambar sebagai input)
- Gunakan API seperti Replicate atau Stability AI
2. DURASI VIDEO
- Minimal: 6 detik
- Maksimal: 600 detik (10 menit)
- Gunakan:
- Slider interaktif
- Input manual (number field)
- Validasi di frontend & backend
========================================
🎬 KUALITAS VIDEO (WAJIB DETAIL)
========================================
3. RESOLUSI (Dropdown)
- 360p → 640x360 (Very Fast, Low Quality)
- 480p → 854x480 (Fast)
- 720p → 1280x720 (HD - Default)
- 1080p → 1920x1080 (Full HD - Heavy)
Tampilkan info:
- Estimasi waktu render:
- 360p: ⚡ Cepat
- 720p: ⏳ Sedang
- 1080p: 🐢 Lambat
- Estimasi ukuran file berdasarkan durasi
4. FRAME RATE (FPS)
- 24 FPS (Cinematic)
- 30 FPS (Default)
- 60 FPS (Ultra Smooth - Heavy)
5. ASPECT RATIO
- 16:9 (Landscape - Default)
- 9:16 (Vertical / TikTok / Reels)
- 1:1 (Square / Instagram)
6. BITRATE (OPSIONAL)
- Low (hemat size)
- Medium (default)
- High (kualitas tinggi)
========================================
📤 INPUT & VALIDASI
========================================
7. UPLOAD GAMBAR
- Gunakan multer
- Validasi:
- Format: JPG, PNG
- Max size: 5MB
8. INPUT PROMPT
- Textarea
- Minimal 10 karakter
- Placeholder contoh prompt
========================================
⚙️ BACKEND SYSTEM
========================================
9. API ENDPOINTS
- POST /api/generate-video
- GET /api/status/:jobId
- GET /api/download/:jobId
10. JOB SYSTEM (WAJIB)
- Gunakan queue sederhana (async processing)
- Jangan blocking request
- Gunakan status:
- pending
- processing
- completed
- failed
11. INTEGRASI AI API
- Gunakan axios
- Kirim parameter:
- prompt
- image (optional)
- duration
- resolution
- fps
- aspect_ratio
- bitrate
12. STORAGE
- Simpan file di:
/uploads → gambar
/outputs → video hasil
- Auto delete setelah 1 jam (cron job / interval)
========================================
🎥 PREVIEW & DOWNLOAD
========================================
13. VIDEO PREVIEW
- Gunakan HTML5 <video>
- Controls:
- play / pause
- volume
- fullscreen
- Autoload setelah selesai generate
14. DOWNLOAD
- Tombol download MP4
- Nama file:
video-ai-{timestamp}.mp4
========================================
🎨 UI / UX (MODERN)
========================================
15. DESIGN
- TailwindCSS
- Layout:
- Kiri: Form input
- Kanan: Preview video
16. LOADING & STATUS
- Progress bar
- Status text:
- "Uploading..."
- "Generating..."
- "Rendering..."
- "Completed"
- Error message jika gagal
17. RESPONSIVE
- Mobile friendly
========================================
🔐 KEAMANAN
========================================
18. ENVIRONMENT VARIABLES
- Simpan API key di .env
- Jangan expose ke frontend
========================================
📁 STRUKTUR PROJECT
========================================
/project-root
/backend
server.js
routes/
controllers/
services/
/frontend
index.html
app.js
/uploads
/outputs
.env
package.json
========================================
🚀 DEPLOYMENT
========================================
- Harus bisa jalan di Replit tanpa konfigurasi tambahan
- Sertakan:
- package.json
- script start
- contoh file .env
========================================
📦 OUTPUT YANG DIHARAPKAN
========================================
1. Kode lengkap backend + frontend
2. Contoh integrasi API AI (Replicate/Stability)
3. Cara install & run:
- npm install
- npm start
4. Contoh penggunaan
5. Error handling lengkap
========================================
⭐ BONUS (JIKA BISA)
========================================
- Watermark toggle (on/off)
- Estimasi biaya API
- Riwayat video yang dibuat
Tidak ada komentar:
Posting Komentar