PHOTO AI System Requirements Document

Introduction

PHOTO AI is a micro SaaS product designed to provide users with professional-looking headshots and photoshoots without the need to hire a photographer. By leveraging advanced AI technology, PHOTO AI allows users to upload selfies and receive realistic, styled photos suitable for various purposes such as LinkedIn profiles and travel photos.

System Overview

PHOTO AI aims to democratize access to professional photography by using AI to generate high-quality images from user-uploaded selfies. The system is designed to be user-friendly, efficient, and capable of producing images that meet professional standards.

Functional Requirements as Story Points

• As a User, I should be able to upload a handful of selfies to the platform.
• As a User, I should be able to select the style of photos I want (e.g., LinkedIn headshots, travel photos).
• As a User, I should be able to receive AI-generated professional-style images from my uploaded selfies.
• As a User, I should be able to download the generated images in high resolution.
• As a User, I should be able to view a gallery of my previously generated images.
• As a User, I should be able to share my generated images directly to social media platforms.

User Personas

• Casual User: Individuals looking to enhance their personal photos for social media or personal use.
• Professional User: Individuals needing professional headshots for business or networking purposes.
• Social Media Influencer: Users who require a variety of styled photos for content creation and engagement.

Core User Flows

• User uploads selfies -> selects desired photo style -> AI processes images -> User receives and downloads styled photos.
• User accesses gallery -> views previously generated images -> selects images to share -> shares images on social media.

Visuals Colors and Theme

• primary: #1A73E8 (a deep blue for a professional and trustworthy feel)
• primary_light: #E8F0FE (a light blue for hover states and secondary UI)
• secondary: #FF6F61 (a coral hue for emphasis and links)
• accent: #FFD700 (a vibrant gold for CTAs and active states)
• highlight: #FFA500 (an orange for hover states and notifications)
• bg: #FFFFFF (a clean white background)
• surface: rgba(240, 240, 240, 0.8) (a light grey for card/panel backgrounds)
• text: #333333 (a dark grey for primary text)
• text_muted: #777777 (a softer grey for secondary text)
• border: rgba(200, 200, 200, 0.5) (a subtle grey border)

Signature Design Concept

Interactive Photo Carousel: The homepage features an interactive carousel displaying a series of before-and-after transformations of user selfies into professional-style images. As users hover over each image, it smoothly transitions from the original selfie to the AI-generated photo, demonstrating the power of PHOTO AI. The carousel is designed with a 3D flip effect using @react-three/fiber to create a dynamic and engaging experience. Users can click on any image to view it in full screen, where they can further explore the transformation process.

LANDING HERO MOTION BRIEF

The landing page hero section will feature a continuous loop animation where a user's selfie is uploaded, processed through a stylized AI transformation, and emerges as a professional headshot. This animation will be created using motion/react for smooth transitions and will include layers such as the user's selfie, AI processing effects, and the final professional image. The animation will loop every 10 seconds, providing a clear narrative of the product's capabilities.

Interaction Model & Motion Direction

• Interaction Model: Animated
  • The landing page will feature moderate scroll-triggered reveals and hover transitions, with spring physics applied to interactive elements for a polished user experience.
• Internal Pages: Static
  • Internal pages such as the user gallery and settings will prioritize layout clarity with minimal motion to ensure ease of use.

Non-Functional Requirements

• The system must process and generate images within 30 seconds.
• The platform should support high-resolution image uploads and downloads.
• Ensure data privacy and secure handling of user-uploaded images.

Tech Stack

• Frontend: React for Web
• Backend: Python, FastAPI
• Database: MySQL or MariaDB
• AI Models: Google Nano banana for image generation
• AI Tools: Litellm for LLM Routing, Langchain
• Local Orchestration: Docker, docker-compose
• Server-side Orchestration: Kubernetes

Assumptions and Constraints

• Users have access to the internet and a device capable of uploading images.
• The system will primarily serve users in Pakistan, considering local internet speeds and data privacy regulations.
• The AI model will require periodic updates to improve image generation quality.

Glossary

• AI: Artificial Intelligence
• SaaS: Software as a Service
• MRR: Monthly Recurring Revenue
• UI: User Interface
• CTA: Call to Action