mirror of
https://github.com/Wan-Video/Wan2.1.git
synced 2025-11-03 05:52:18 +00:00
51c5837c43
This commit implements Phase 3 of the Wan2.1 PWA, closing all critical integration gaps between frontend, backend, database, and Replicate API. ## Backend Integration ✅ ### Database Writes - Create generation records BEFORE calling Replicate - Store job_id for tracking Replicate predictions - Track progress, status, and completion timestamps - Save video URLs and error messages ### Credit System - Atomic credit deduction using database function deduct_credits() - Automatic refunds on generation failures via refund_credits() - Complete audit trail in credit_transactions table - Transaction logging for all credit operations ### Webhook Handler - Created /api/webhooks/replicate endpoint - HMAC signature verification for security - Automatic status updates from Replicate push notifications - Maps Replicate statuses to application statuses - Triggers refunds for failed generations ### Updated Generation Flow 1. Check user credits before starting 2. Create generation record (status: queued) 3. Start Replicate job and get job_id 4. Update record with job_id (status: processing) 5. Deduct credits atomically 6. Webhook updates status when complete 7. Polling fallback if webhook fails ## Frontend Enhancements ✅ ### Error Handling - Added sonner for beautiful toast notifications - Success/error/loading states with retry actions - User-friendly error messages - Providers component wraps app with Toaster ### Form Validation - Zod schemas for T2V and I2V inputs - Prompt length validation (10-500 chars) - Model and resolution validation - Credit cost calculator ### Credit Management - useCredits hook for real-time credit fetching - Optimistic updates on generation start - Credit refresh functionality - Loading and error states ### Image Upload - Drag-and-drop ImageUpload component - Client-side validation (file type, size) - Image preview functionality - Max 10MB size limit with user feedback - Ready for I2V integration ### Settings Page - Basic settings page structure - Placeholders for Profile, Billing, API Keys - Ready for Phase 4 enhancements ## Database Changes ✅ ### New Migration: 002_credit_system.sql - credit_transactions table with audit trail - deduct_credits() function for atomic operations - add_credits() function for purchases/bonuses - refund_credits() function for failed generations - Added job_id, progress, error_message columns to generations ## Documentation ✅ ### PHASE_3_IMPLEMENTATION.md - Complete implementation guide - Testing checklist (backend, frontend, E2E) - Deployment steps with webhook registration - Known issues and limitations - Metrics to monitor - Phase 4 roadmap ## Files Changed ### Backend (4 files) - apps/api/main.py - Added webhooks router - apps/api/routes/generation.py - Complete rewrite with DB integration - apps/api/routes/webhooks.py - NEW webhook handler - packages/db/migrations/002_credit_system.sql - NEW credit system ### Frontend (7 files) - apps/web/package.json - Added sonner - apps/web/src/app/layout.tsx - Added Providers wrapper - apps/web/src/app/dashboard/settings/page.tsx - NEW settings page - apps/web/src/components/providers.tsx - NEW toast provider - apps/web/src/components/generation/image-upload.tsx - NEW upload component - apps/web/src/lib/hooks/use-credits.ts - NEW credit management hook - apps/web/src/lib/validation/generation.ts - NEW Zod schemas ### Documentation (1 file) - PHASE_3_IMPLEMENTATION.md - NEW comprehensive guide ## Testing Required ### Backend - [ ] Database writes on generation start - [ ] Credit deduction accuracy - [ ] Webhook updates from Replicate - [ ] Refunds on failures ### Frontend - [ ] Toast notifications - [ ] Form validation - [ ] Credit display and warnings - [ ] Image upload ### Integration - [ ] End-to-end generation flow - [ ] Credit deduction → generation → completion - [ ] Webhook vs polling updates ## Next Steps (Phase 4) 1. Payment integration with Stripe 2. Retry logic for failed generations 3. Cancel in-progress generations 4. In-app video player 5. Batch operations 6. Admin panel ## Environment Variables ### New Required Variables - REPLICATE_WEBHOOK_SECRET - For webhook signature verification See PHASE_3_IMPLEMENTATION.md for complete setup instructions. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> |
||
|---|---|---|
| .. | ||
| apps | ||
| packages/db | ||
| .eslintrc.js | ||
| .gitignore | ||
| .prettierrc | ||
| CONTRIBUTING.md | ||
| DEPLOYMENT.md | ||
| LICENSE | ||
| package.json | ||
| PHASE_3_IMPLEMENTATION.md | ||
| PROJECT_SUMMARY.md | ||
| README.md | ||
| SETUP.md | ||
| turbo.json | ||
Wan2.1 PWA - AI Video Generation Platform
A production-ready Progressive Web App for AI-powered video generation using Wan2.1 models.
Features
- 🎨 Smart Prompt Engineering: 50+ templates with context-aware suggestions
- 🎬 Video Generation: Text-to-Video and Image-to-Video
- 📱 Progressive Web App: Installable, offline-capable
- 🔐 Authentication: Supabase Auth with OAuth support
- 💳 Credit System: Freemium model with usage tracking
- ⚡ Real-time Progress: WebSocket-based generation tracking
- 🎯 Template Library: Categorized prompts (Cinematic, Animation, Realistic)
- 📥 Download & Share: Export videos to device
Tech Stack
Frontend
- Framework: Next.js 15 (App Router)
- UI: shadcn/ui + Tailwind CSS
- State: Zustand
- Forms: React Hook Form + Zod
- PWA: next-pwa
Backend
- API: FastAPI (Python)
- GPU: Replicate / Modal
- Queue: Celery + Redis
Database
- DB: Supabase (Postgres)
- Auth: Supabase Auth
- Storage: Supabase Storage
- Cache: Upstash Redis
Project Structure
wan-pwa/
├── apps/
│ ├── web/ # Next.js frontend
│ └── api/ # FastAPI backend
├── packages/
│ ├── ui/ # Shared UI components
│ ├── db/ # Database schema & migrations
│ └── types/ # Shared TypeScript types
├── turbo.json # Monorepo build config
└── package.json # Root dependencies
Prerequisites
- Node.js 18+
- Python 3.10+
- npm 9+
- Supabase account
- Replicate account
Setup
See SETUP.md for detailed instructions.
Quick Start
# Clone & Install
git clone <your-repo>
cd wan-pwa
npm install
# Start all services
npm run dev
# Frontend: http://localhost:3000
# Backend: http://localhost:8000
Development Commands
npm run dev # Start all services
npm run build # Build all packages
npm run lint # Lint all packages
npm run test # Run all tests
npm run clean # Clean build artifacts
npm run format # Format code with Prettier
Deployment
- Frontend: Vercel
- Backend: Modal or Railway
- Database: Supabase
See DEPLOYMENT.md for detailed instructions.
Project Roadmap
- Monorepo setup
- Authentication flows
- Prompt template system
- T2V generation
- I2V generation
- Batch processing
- Payment integration
- Mobile app
Contributing
See CONTRIBUTING.md
License
MIT License - see LICENSE