Backend Process Flowchart
AWS EC2 + Express + ElevenLabs API
START
User visits website
User visits website
↓
Step 1: Express serves index.html
↓
Step 2: User sees upload form
↓
Step 3: User selects file & clicks "Separate"
↓
Step 4: POST to /separate endpoint
↓
DECISION: ElevenLabs client initialized?
← NO
Error 503: Insufficient credits
YES →
Step 6: Multer saves file to /uploads
↓
Step 8: Send to ElevenLabs API
↓
Step 9: AI processes (30s-5min)
↓
DECISION: API response status?
SUCCESS →
Step 10-14: Receive ZIP → Save → Send to browser → Download → Cleanup
↓
END: User has stems!
Legend:
🟢 Green = Start/End
⚫ Black = Process
🔵 Blue = Decision
🟠 Orange = API Call
🔴 Red = Error
System Architecture
AWS EC2 + Node.js + Express + ElevenLabs API
👤 USER LAYER
Web Browser
Chrome, Firefox, Safari
JavaScript enabled
Chrome, Firefox, Safari
JavaScript enabled
Client Device
Desktop/Laptop
Internet connection
Desktop/Laptop
Internet connection
🌐 NETWORK
Access Point
aihazbyn.dev
IP: 13.58.79.87
aihazbyn.dev
IP: 13.58.79.87
Security Group
Port 22, 80, 3000
Port 22, 80, 3000
☁️ AWS EC2
Instance
t2.micro
Amazon Linux 2023
us-east-2
t2.micro
Amazon Linux 2023
us-east-2
File System
/stem_frontend/
/public/, /uploads/
/stem_frontend/
/public/, /uploads/
⚙️ RUNTIME
Node.js
v18.20.8
Port 3000
v18.20.8
Port 3000
Express Server
CORS, Multer
Routes: /, /separate
CORS, Multer
Routes: /, /separate
🎵 LOGIC
ElevenLabs Client
API Key auth
Credit-based
Try-catch handling
API Key auth
Credit-based
Try-catch handling
File Processing
Read, Write, Delete
Read, Write, Delete
🔌 EXTERNAL API
ElevenLabs API
AI audio separation
Returns ZIP stream
AI audio separation
Returns ZIP stream
Options
2-stem or 6-stem
2-stem or 6-stem
🛠️ TECHNOLOGY STACK
Cloud: AWS EC2, Amazon Linux 2023, Security Groups
Backend: Node.js v18, Express, Multer, CORS, dotenv
Frontend: HTML5, CSS3, JavaScript, Fetch API