Claude/wan pwa initial setup 011 cus9r478 g jm yrxt2o pj gm #541
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This commit adds a production-ready Progressive Web App for AI-powered video generation using Wan2.1 models. Features: - Next.js 15 frontend with App Router and PWA support - FastAPI backend with Replicate integration - 50+ prompt templates across 7 categories - Supabase authentication and database - Credit system with usage tracking - Text-to-Video and Image-to-Video generation - Complete documentation (setup, deployment, contributing) Project Structure: - apps/web: Next.js frontend with shadcn/ui components - apps/api: FastAPI backend with GPU processing via Replicate - packages/db: Database schema and migrations for Supabase Tech Stack: - Frontend: Next.js 15, shadcn/ui, Tailwind, Zustand, React Hook Form, Zod - Backend: FastAPI, Replicate, Supabase - Database: Supabase (Postgres) with RLS - Infrastructure: Turborepo monorepo, Vercel/Modal deployment Documentation: - README.md: Project overview and features - SETUP.md: Complete setup guide (5-minute quickstart) - DEPLOYMENT.md: Production deployment instructions - CONTRIBUTING.md: Contribution guidelines - PROJECT_SUMMARY.md: Comprehensive project documentation Ready for development and deployment. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Add root package.json and turbo.json - Add Next.js config files - Add FastAPI environment example - Add PWA manifest - Add ESLint and Prettier config 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
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 <[email protected]>
Added comprehensive MCP Server configuration guide to enable direct file access between Claude Desktop and the Wan2.1 PWA project. Features: - Step-by-step installation for macOS, Windows, Linux - Configuration examples with actual paths - Verification and testing instructions - Troubleshooting common issues - Security best practices - Advanced configuration options - Comparison with current session workflow This will help developers and collaborators set up persistent file access for seamless development with Claude Desktop. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Fixed dependency resolution error that was preventing Vercel builds from completing successfully. ## Problem Vercel build failed with: ``` npm error ERESOLVE unable to resolve dependency tree npm error Could not resolve dependency: npm error peer react@"^18.2.0 || 19.0.0-rc-66855b96-20241106" from [email protected] ``` React 19 stable (19.2.0) was being resolved, but Next.js 15.0.3 only supports React 18.2.0 or specific React 19 RC versions. ## Solution ### 1. Downgraded React to 18.2.0 (Stable) - Changed react from ^19.0.0-rc.0 → ^18.2.0 - Changed react-dom from ^19.0.0-rc.0 → ^18.2.0 - React 18.2.0 is fully stable and compatible with Next.js 15.0.3 ### 2. Added .npmrc Configuration - Configured npm for optimal Vercel builds - Disabled legacy-peer-deps (not needed with correct versions) - Enabled auto-install-peers for smooth dependency resolution - Performance optimizations for CI/CD environment ### 3. Added vercel.json Configuration - Optimized build command for monorepo structure - Configured environment variable references - Set preferred region (iad1 - Washington DC) - Framework detection for Next.js ## Files Changed - apps/web/package.json - React version downgrade - .npmrc - npm configuration for Vercel - apps/web/vercel.json - Vercel deployment config ## Testing Build should now complete successfully on Vercel with: - npm install ✅ - npm run build ✅ - Next.js production build ✅ ## Notes - React 18.2.0 is the recommended stable version for Next.js 15 - All shadcn/ui components are compatible with React 18 - No breaking changes in application code required - When Next.js 16 releases, we can upgrade to React 19 stable 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.