Sultan Power System Requirements Document

1. Introduction

This document outlines the system requirements for the Sultan Power project, a face-swapping application that allows users to swap faces between a source image and a target image. The application will utilize Supabase for database management and integrate various functionalities to manage user data, face swap history, and subscription settings.

2. System Overview

The Sultan Power application is designed to provide users with the ability to perform face swaps using a web-based interface. It will manage user profiles, track face swap history, and handle subscription plans. The backend will be powered by Supabase, and the frontend will interact with a face swap engine hosted on Hugging Face Spaces. The application will also include features for secure authentication using WhatsApp OTPs.

3. Functional Requirements

User Stories

• As a user, I want to create a profile with my email and phone number so that I can manage my account.
• As a user, I want to perform face swaps and have each swap recorded in my history for future reference.
• As a user, I want to view my face swap history to track my past activities.
• As a user, I want to manage my subscription settings to upgrade or downgrade my plan.
• As a user, I want to receive OTPs via WhatsApp for secure authentication.
• As a user, I want to view available face swap templates to choose the best fit for my needs.
• As an admin, I want to view user statistics and face swap usage to monitor application performance.
• As an admin, I want to manage face swap templates to ensure they are up-to-date and relevant.
• As an admin, I want to access revenue summaries to track financial performance.
• As a user, I want to be able to register with any email and password format for ease of use.

4. User Personas

• Regular User: Individuals who use the application to swap faces for personal or entertainment purposes.
• Administrator: Personnel responsible for managing user accounts, monitoring usage statistics, and overseeing financial transactions.

5. Core User Flows

User Registration and Profile Management

1. User registers with an email and phone number.
2. User receives a WhatsApp OTP for verification.
3. User completes profile setup.

Face Swap Process

1. User selects a source and target image.
2. User initiates the face swap.
3. The system processes the swap and updates the history.

Subscription Management

1. User views current subscription details.
2. User selects a new plan or renews the existing one.
3. System updates user settings and quota.

6. Visuals Colors and Theme

• Primary: #1A73E8 (a vibrant blue for brand identity)
• Primary Light: #E8F0FE (a lighter blue for hover states)
• Secondary: #FF5722 (a contrasting orange for emphasis)
• Accent: #FFC107 (a bright yellow for CTAs and active states)
• Highlight: #FF9800 (a warm amber for notifications)
• Background: #FFFFFF (a clean white for the page background)
• Surface: rgba(255, 255, 255, 0.8) (a translucent white for cards/panels)
• Text: #202124 (a dark gray for primary text)
• Text Muted: #5F6368 (a softer gray for secondary text)
• Border: rgba(0, 0, 0, 0.1) (a subtle black for borders)

7. Signature Design Concept

The Sultan Power homepage will feature an interactive 3D face swap gallery using @react-three/fiber and @react-three/drei. Users can navigate through a virtual gallery where each face swap template is displayed as a 3D frame. Hovering over a frame will animate it to reveal details, and clicking will allow users to preview the template in action. The gallery will have smooth transitions and dynamic lighting to enhance the visual experience.

8. Interaction Model & Motion Direction

• Interaction Model: Parallax scrolling with layered depth to create an immersive experience. The homepage will feature interactive 3D elements that respond to user input.
• Motion Direction: Smooth transitions and animations triggered by scroll and hover actions to guide users through the application.

9. Non-Functional Requirements

• Performance: The application should handle up to 1000 concurrent users.
• Security: Implement RLS policies to ensure data privacy and integrity.
• Scalability: The system should support future growth in user base and features.

10. Tech Stack

• Frontend: React.js
• Backend: Python + FastAPI
• Database: Supabase (PostgreSQL)
• Face Swap Engine: Hosted on Hugging Face Spaces

11. Assumptions and Constraints

• The application will rely on external services for face swap processing.
• Stripe and WhatsApp integrations are placeholders and not functional in the current scope.

12. Glossary

• OTP: One-Time Password
• RLS: Row Level Security
• UUID: Universally Unique Identifier
• Supabase: A backend-as-a-service platform providing database and authentication services.