graph TB
subgraph "Client Layer"
A[Web App - React]
B[Mobile App - React Native]
end
subgraph "Load Balancer Layer"
C[NGINX Load Balancer]
end
subgraph "Application Layer"
D[Django Backend API]
E[AI/ML Service - Flask]
end
subgraph "AI/ML Models"
F[Text Emotion Model
BERT-based]
G[Speech Emotion Model
CNN + LSTM]
H[Facial Emotion Model
ResNet50]
end
subgraph "External Services"
I[Spotify API]
end
subgraph "Data Layer"
J[(MongoDB)]
K[(Redis Cache)]
L[(SQLite)]
end
subgraph "Analytics Layer"
M[Apache Spark]
N[Apache Hadoop]
O[Data Visualization]
end
A -->|HTTPS| C
B -->|HTTPS| C
C -->|Load Balance| D
D -->|REST API| E
E --> F
E --> G
E --> H
D -->|Fetch Music| I
D --> J
D --> K
D --> L
J -.->|Analytics| M
M <--> N
M --> O
style A fill:#61DAFB
style B fill:#61DAFB
style C fill:#009639
style D fill:#efefef
style E fill:#ffffff
style F fill:#FF6F00
style G fill:#FF6F00
style H fill:#FF6F00
style I fill:#1DB954
style J fill:#47A248
style K fill:#DC382D
style L fill:#FFC0CB,stroke:#D87093,stroke-width:2px
style M fill:#E25A1C
style N fill:#66CCFF
style O fill:#FFC0CB,stroke:#D87093,stroke-width:2px
Layered Architecture
- Client Layer: React web app and React Native mobile app for user interaction
- Load Balancer: NGINX for distributing traffic and SSL termination
- Application Layer: Django REST Framework backend and Flask ML services
- AI/ML Layer: Three specialized models for emotion detection
- Data Layer: MongoDB for persistence, Redis for caching, SQLite for development
- Analytics Layer: Apache Spark and Hadoop for big data processing
sequenceDiagram
participant U as User
participant FE as Frontend
participant LB as Load Balancer
participant BE as Backend API
participant AI as AI/ML Service
participant DB as MongoDB
participant SP as Spotify API
participant CH as Redis Cache
U->>FE: Input (Text/Speech/Image)
FE->>LB: Send Request
LB->>BE: Route to Backend
BE->>CH: Check Cache
alt Cache Hit
CH-->>BE: Return Cached Result
else Cache Miss
BE->>AI: Forward for Analysis
AI->>AI: Process with ML Model
AI-->>BE: Return Emotion
BE->>SP: Request Music Recommendations
SP-->>BE: Return Tracks
BE->>DB: Store User History
BE->>CH: Cache Result
end
BE-->>FE: Return Recommendations
FE-->>U: Display Results
Request Flow
- User submits emotion input through web or mobile interface
- Request is load-balanced by NGINX to backend instances
- Backend checks Redis cache for existing results
- If cache miss, forwards to AI/ML service for emotion detection
- ML model processes input and returns emotion with confidence score
- Backend queries Spotify API for music recommendations
- Results are cached in Redis and stored in MongoDB
- Response is returned to user with recommendations
