moon-deblur

As a user I want to explore features and navigate to the Upload page from a stunning interactive lunar landscape homepage. Implement the Home page based on the existing JSX design (v2). Includes: animated starfield background, 3D moon sphere with coral rim-light, NavBar with links to Upload/Editor/Download, HeroLunar section, TrustBadges, FeatureHighlights, HowItWorks, InteractiveMoonShowcase, BeforeAfterGallery, Testimonials, PricingTeaser, CallToAction, and Footer. Moon should have idle rotation animation and micro-interactions on crater hover. Entry point for both Casual and Creative User flows leading to the Upload page.

As a user I want to add my own photo to the platform on the Upload page. Implement the Upload page based on the existing JSX design (v2). Includes: drag-and-drop upload zone with coral dashed border and glow, moon icon with rotation micro-interaction, file type/size validation (JPG/PNG/WEBP, max 20MB), upload progress indicator, file preview thumbnail strip, file requirements info bar, upload tips section, and a CTA to proceed to the Editor page. Page navigates from Home and leads to Editor. Follows the celestial theme with semi-transparent surface cards over the starfield background.

As a user I want to apply AI-powered edits (deblur, masking, presets, filters) and preview transformations on the Editor page before saving. Implement the Editor page based on the existing JSX design (v2). Includes: split-view before/after preview, AI Deblur tool panel, AI Masking tool with brush/selection controls, Artistic Body Edits panel, Filters & Presets carousel with single-click apply, real-time transformation preview, and a Download CTA. Page navigates from Upload and leads to Download. Must support both Casual User flow (presets only) and Creative User flow (deblur + masking).

As a user I want to use a backend API to securely upload my photo to the platform. Implement FastAPI endpoint POST /api/upload accepting multipart image file (JPG/PNG/WEBP), validate file type and size (max 20MB), store uploaded image securely encrypted at rest, return a unique image_id and temporary access URL for use in the editor. Supports the Upload page frontend drag-and-drop zone.

As a user I want to save and download my edited image in high resolution from the Download page. Implement the Download page based on the existing JSX design (v2). Includes: final edited image preview, high-resolution download button (coral CTA), format selection (JPEG/PNG/WebP), optional share or restart editing flow link back to Upload. Page navigates from Editor. Follows the celestial theme with surface card layout and Coral Glow accent buttons.

As a user I want to use a backend AI API to apply deblurring to my uploaded photo within 5 seconds. Implement FastAPI endpoint POST /api/edit/deblur accepting image_id, invoke Google Nano Banana model via Litellm for deblurring transformation, return processed image URL. Must meet the 5-second processing performance requirement. Supports the Editor page deblur tool panel.

As a user I want to use a backend AI API to apply precision masking to specific parts of my image. Implement FastAPI endpoint POST /api/edit/mask accepting image_id and mask coordinates/selection data, invoke Google Nano Banana model for masked region transformation via Litellm/Langchain, return processed image URL with masked edits applied. Supports the Editor page AI Masking tool.

As a user I want to use a backend API to apply preset transformations and filters to my photo with a single click. Implement FastAPI endpoint POST /api/edit/preset accepting image_id and preset_id, apply predefined filter/transformation pipeline, return processed image URL. Include a GET /api/presets endpoint returning available presets list with preview thumbnails. Supports Editor page Filters & Presets carousel.

As a user I want the Upload page to securely send my photo to the backend and receive an image_id for the editing flow. Connect the Upload page drag-and-drop zone and Browse Files button to POST /api/upload, display upload progress indicator, handle file validation errors inline, show file preview strip after successful upload, and activate the Continue to Editor CTA button with the returned image_id passed to the Editor route.

As a user I want to use a backend API to download my edited image in high resolution. Implement FastAPI endpoint GET /api/download/{image_id} accepting optional format parameter (JPEG/PNG/WebP), render final composited image at full resolution, return secure download stream with appropriate Content-Disposition headers. Supports the Download page CTA.

As a user I want the Editor page to communicate with the AI deblur, masking, and preset APIs in real-time, showing live preview of transformations. Connect Editor frontend to POST /api/edit/deblur, POST /api/edit/mask, POST /api/edit/preset, and GET /api/presets endpoints. Implement loading states, error handling, transformation history (undo/redo), and optimistic UI updates. Ensure transformations complete within the 5-second SLA.

As a user I want the Download page to fetch my fully processed high-resolution image and trigger a browser download. Connect Download page frontend to GET /api/download/{image_id}, implement format selector state (JPEG/PNG/WebP), trigger file download on button click, show download progress and success confirmation. Handles errors gracefully with retry option.