gamma-login System Requirements Document

Introduction

The gamma-login project aims to create a web application that mirrors the functionality of omoggle.com, with specific modifications and additional features. The application will focus on face scanning and rating, without the need for login and signup functionalities.

System Overview

The gamma-login project is designed to provide an interactive platform where users can engage in face scanning activities. The system will analyze facial posture, lighting, and jawline to generate a rating. Users will receive pop-up notifications based on their performance, and a back button will be included for navigation. The project will not include login or signup features, aligning with the user's request to replicate omoggle.com without these components.

Functional Requirements

• As a User, I should be able to access the face scanning feature without logging in or signing up.
• As a User, I should be able to have my face posture, lighting, and jawline scanned and rated.
• As a User, I should receive a pop-up notification if I have a higher rating than my opponent.
• As a User, I should receive a pop-up notification if I have a lower rating than my opponent.
• As a User, I should receive a pop-up notification indicating I am logged.
• As a User, I should be able to use a back button to navigate to the previous page.

User Personas

• General User: Individuals who access the platform to engage in face scanning activities. They do not require an account to participate.

Core User Flows

• User accesses the website -> Initiates face scan -> System analyzes face posture, lighting, and jawline -> User receives rating -> Pop-up notification displays result -> User uses back button to return to the previous page.

Visuals Colors and Theme

• primary: #1A73E8 (a vibrant blue for brand identity)
• primary_light: #4D90FE (a lighter blue for hover states)
• secondary: #FF6F61 (a coral hue for emphasis and links)
• accent: #FFD700 (a bright gold for CTAs and active states)
• highlight: #FFA500 (an orange for hover states and notifications)
• bg: #F5F5F5 (a light grey for the background)
• surface: rgba(255, 255, 255, 0.9) (a semi-transparent white for cards/panels)
• 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 for borders)

Signature Design Concept

The homepage will feature an interactive 3D face model that users can manipulate. Using @react-three/fiber and @react-three/drei, users can rotate and zoom into the model to understand how different angles and lighting affect their rating. As users interact with the model, real-time feedback will be displayed, enhancing engagement and providing an educational experience about facial analysis. The interface will be dynamic, with smooth transitions and animations powered by framer-motion.

Interaction Model & Motion Direction

The landing page will employ a "parallax" interaction model, creating a layered depth effect as users scroll. The face model will remain central, while background elements move at different speeds to create a sense of depth. Internal pages will adopt a "static" model to ensure clarity and focus on the face scanning functionality.

Non-Functional Requirements

• The system should provide real-time face scanning and rating feedback.
• Pop-up notifications must be responsive and non-intrusive.
• The application should be optimized for performance across various devices and browsers.

Tech Stack

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

Assumptions and Constraints

• The application will not include user authentication features.
• The face scanning feature will rely on existing AI models for analysis.
• The system must comply with privacy regulations regarding facial data.

Glossary

• Face Scanning: The process of analyzing facial features to generate a rating.
• Pop-up Notification: A message that appears on the screen to inform the user of their rating.
• 3D Face Model: A digital representation of a face that users can interact with on the website.