sweet-hug

Build the Landing page (v2 design) in React so it is pixel-perfect against the existing mock. Include hero section with the interactive photo frame concept, value proposition copy, CTA button navigating to the Upload flow, dynamic animation with warm glow, Omani-inspired floral motifs, and micro-interactions (shimmer/heartbeat on hover). Apply the global theme from the theme alignment task. Ensure the page is responsive for mobile and desktop. Wire the primary CTA to route to the Upload Photo One page.

Build the Upload page (v1 design) in React supporting two sequential photo upload steps: Upload Photo One and Upload Photo Two. Each step should show a drag-and-drop zone, file browser fallback, image preview thumbnail after selection, and a clear progress indicator showing which step the user is on (1 of 2 vs 2 of 2). Apply validation for file type (JPEG/PNG) and size limits. Apply the global theme. On completion of both uploads, route to the Preview page. Integrate with the photo upload API once available; use mock responses until then.

Build the Preview page (v1 design) in React to display the AI-generated composite hugging photo. Include a loading/generation state with animated placeholder while the image is being produced. Once ready, render the composite image prominently. Provide filter/style preference controls (warmth, brightness, style presets) and an Apply Filters button. Include a Download CTA routing to the Download page and a Back/Retake option. Apply the global theme. Use mock image data until the compositing API is ready.

Build the Download page (v1 design) in React to present the final composite image ready for download. Display the image at high-resolution preview, show a prominent Download button that triggers the high-res download API, and include share affordances (copy link, optional social share). Add a Start Over CTA that clears session state and routes back to Landing. Apply the global theme. Ensure the download button gracefully handles loading and error states.

As a user I want to be able to use the AI API for generating a realistic hugging composite photo from two source images. Build the end-to-end AI image generation pipeline using a suitable generative model (e.g., Stable Diffusion with img2img/inpainting). Design the prompt engineering strategy to produce a warm, natural-looking hug pose between two subjects. Integrate the face preservation module as a conditioning step. Expose the pipeline as an internal Python service callable by the compositing API. Optimize for inference latency under 10 seconds per SRD requirements.

As a user I want to be able to use the backend API for triggering image compositing with optional filter preferences. Implement FastAPI endpoints: POST /api/composite (accepts session token and preferences, triggers AI pipeline, returns job ID) and GET /api/composite/{job_id}/status (returns progress and signed temporary URL to generated preview image). Ensure all intermediate artifacts are session-scoped and ephemeral.

As a user I want to be able to use the backend API for retrieving a compressed preview of the generated composite image. Implement FastAPI endpoint GET /api/preview/{job_id} that returns a reduced-resolution (max 1024px) version of the composite image as a signed temporary URL with short TTL, suitable for fast display in the Preview page.

As a user I want to be able to use the backend API for downloading the final composite image in high resolution (minimum 300 DPI). Implement FastAPI endpoint GET /api/download/{job_id} that streams or redirects to the full-resolution composite image. Set appropriate Content-Disposition headers for browser download. Enforce download availability only within the session TTL. After download or session expiry, trigger cleanup of all temporary files. Log download events without storing any PII or image content persistently.

As a user I want to be able to trust that my uploaded photos are never stored permanently. Implement a session management layer ensuring no uploaded or generated images are persisted beyond the active user session. Use short-lived signed session tokens (JWT) tied to ephemeral storage (tmpfs or Redis with TTL). Implement automatic cleanup jobs purging all temporary files and session data upon expiry (default TTL: 1 hour) or after successful download. Ensure no personal data or images are written to the MySQL database.

As a user I want to be able to use the frontend seamlessly with live backend data. Wire all frontend pages (Upload, Preview, Download) to their respective backend API endpoints: replace mock responses with real API calls to /api/upload, /api/composite, /api/preview, and /api/download. Implement global loading states, error boundaries, and user-friendly error messages for API failures. Handle session token storage (in-memory or sessionStorage) and pass it across pages.