System Requirements Document (SRD)

Project Name: onyx-landing

1. Introduction

The onyx-landing project is a mobile-first, visually appealing landing page designed to provide users with instant macronutrient analytics (protein, carbs, fat) from meal photos. This system leverages advanced AI models to analyze uploaded or captured images of meals and returns nutritional insights via a POST request. The goal is to create a fast, production-ready platform that is simple yet elegant, catering to health-conscious users in India and beyond.

This document outlines the functional and non-functional requirements, user personas, design concepts, and technical specifications for the onyx-landing project.

2. System Overview

The onyx-landing system is a lightweight, mobile-first web application that allows users to:

1. Upload or capture a photo of their meal.
2. Instantly receive macronutrient breakdowns (protein, carbs, fat) via AI-powered analysis.
3. Interact with a sleek, user-friendly interface optimized for performance and simplicity.

The system is designed to be intuitive and accessible, targeting fitness enthusiasts, dieticians, and general users who are interested in understanding their meal's nutritional content.

Key features include:

• Mobile-first design for seamless use on smartphones.
• AI-powered image recognition for accurate macronutrient analysis.
• Minimalistic and visually appealing interface.

3. Functional Requirements

• As a User, I should be able to upload a photo of my meal for analysis.
• As a User, I should be able to capture a photo of my meal directly from my device.
• As a User, I should receive instant macronutrient analytics (protein, carbs, fat) after uploading or capturing a photo.
• As a User, I should experience a fast and responsive interface optimized for mobile devices.

4. User Personas

4.1 Fitness Enthusiast

• Description: Individuals focused on fitness and maintaining a balanced diet.
• Goals: Quickly analyze meal nutrition to align with fitness goals.
• Pain Points: Lack of time for manual calorie tracking.

4.2 Dietician

• Description: Professionals providing dietary advice to clients.
• Goals: Use the tool to analyze meal nutrition for client recommendations.
• Pain Points: Need for accurate and reliable nutritional data.

4.3 General User

• Description: Everyday individuals curious about their meal's nutritional content.
• Goals: Understand the macronutrient breakdown of meals.
• Pain Points: Limited knowledge of nutrition and calorie tracking.

5. Visuals Colors and Theme

The onyx-landing project will feature a sleek, modern color palette inspired by the name "onyx," evoking sophistication and clarity.

• Background: #1C1C1E (Deep Onyx Black)
• Surface: #2E2E30 (Charcoal Gray)
• Text: #FFFFFF (Pure White)
• Accent: #FF6F61 (Coral Red)
• Muted Tones: #A3A3A3 (Soft Gray)

This palette ensures high contrast and readability while maintaining a polished and professional aesthetic.

6. Signature Design Concept

Interactive Nutritional Canvas

The homepage of onyx-landing will feature an Interactive Nutritional Canvas:

• Visual Impact: The landing page will display a dynamic, full-screen image of a meal that subtly animates (e.g., steam rising from hot dishes or a shimmer effect on fresh produce).
• User Interaction: Users can drag and drop or tap to upload/capture their meal photo directly onto the canvas.
• AI Animation: Once a photo is uploaded, the canvas will transform into a vibrant, animated infographic showing the macronutrient breakdown. For example:
  • Protein: A glowing blue bar.
  • Carbs: A pulsing green circle.
  • Fat: A shimmering yellow triangle.
• Micro-Interactions: Hover effects, smooth transitions, and subtle sound cues (e.g., a soft "ding" when analysis is complete) will enhance the user experience.

This bold and memorable design ensures that users are immediately captivated and engaged.

7. Non-Functional Requirements

• Performance: The system must process and return results within 2 seconds of image upload.
• Scalability: The backend should handle up to 10,000 concurrent users.
• Accessibility: The interface must comply with WCAG 2.1 Level AA standards.
• Localization: Default language is English, with support for Hindi as a secondary language.
• Security: All data transmissions must be encrypted using HTTPS.

8. Tech Stack

Frontend

• React for Web

Backend

• Python
• FastAPI

Database

• MySQL (with Alembic for migrations)

AI Models

• Google Nano Banana for image generation
• GPT 5.4 for user-friendly responses

AI Tools

• Litellm for LLM Routing
• Langchain

Orchestration

• Docker for local development
• Kubernetes for server-side orchestration

9. Assumptions and Constraints

• Users will primarily access the system via mobile devices.
• The system will rely on a stable internet connection for AI-powered analysis.
• Image uploads are limited to a maximum size of 5 MB.
• The system will not store user-uploaded images beyond the analysis process.

10. Glossary

• Macronutrient: Nutritional components of food, including protein, carbohydrates, and fat.
• POST Request: A method used to send data to a server to create/update a resource.
• WCAG: Web Content Accessibility Guidelines, a standard for making web content accessible.
• LLM: Large Language Model, an AI model trained on vast amounts of text data.

End of Document.