# Dancify 💃🕺

Turn any Suno song into an interactive Just Dance game where you can get groovy!

This project uses computer vision to compare your dance moves to reference poses in real-time, scoring your performance from 0-100.

## Architecture

- **Frontend**: Next.js with TypeScript and Tailwind CSS
- **Backend**: Python FastAPI server with MediaPipe for pose detection
- **Pose Detection**: MediaPipe Pose (33 body landmarks)

## Setup Instructions

### 1. Backend Setup (Python)

```bash
cd backend

# Create and activate virtual environment
python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate

# Install dependencies
pip install -r requirements.txt

# Run the backend server
python main.py
```

The backend will start on `http://localhost:8000`

### 2. Frontend Setup (Next.js)

```bash
cd frontend

# Install dependencies
npm install

# Run the development server
npm run dev
```

The frontend will start on `http://localhost:3000`

## How to Use

1. **Start both servers** (backend on port 8000, frontend on port 3000)
2. **Open your browser** to `http://localhost:3000`
3. **Upload a reference pose image** - make sure a person is clearly visible
4. **Grant camera permissions** when prompted
5. **Click "Start Comparing"** to begin real-time pose comparison
6. **Strike poses** and watch your similarity score update in real-time!

## Scoring System

- **90-100**: Perfect match! 🔥
- **80-89**: Excellent! 💃
- **70-79**: Good job! 👍
- **60-69**: Not bad! 😊
- **40-59**: Keep trying! 🤔
- **0-39**: Practice makes perfect! 💪

The scoring algorithm:

- Extracts 33 body landmarks using MediaPipe
- Focuses on key body points (shoulders, elbows, wrists, hips, knees, ankles)
- Normalizes coordinates relative to body size
- Calculates Euclidean distance between corresponding landmarks
- Converts distance to similarity score (0-100)

## Technology Stack

### Backend

- FastAPI - Web framework
- MediaPipe - Pose detection
- OpenCV - Image processing
- NumPy - Numerical computations
- Pillow - Image handling

### Frontend

- Next.js 15 - React framework
- TypeScript - Type safety
- Tailwind CSS - Styling
- Browser MediaStream API - Webcam access

## Project Structure

```
dancify/
├── backend/
│   ├── main.py              # FastAPI server with pose comparison
│   ├── requirements.txt     # Python dependencies
│   └── README.md
├── frontend/
│   ├── app/
│   │   ├── components/
│   │   │   └── WebcamCapture.tsx  # Webcam component
│   │   ├── page.tsx         # Main page
│   │   └── layout.tsx       # Root layout
│   ├── package.json
│   └── README.md
└── README.md                # This file
```

## API Endpoints

### Backend (http://localhost:8000)

- `GET /` - Health check
- `POST /api/set-reference` - Upload reference pose image
- `POST /api/compare-pose` - Compare current frame to reference

## Future Enhancements

- Multiple reference poses at different timestamps
- Video playback synchronized with pose comparison
- Audio integration with Suno API
- Leaderboard and score history
- Multiple difficulty levels
- Custom pose sequences/choreography

## Troubleshooting

**Camera not working?**

- Make sure you've granted camera permissions in your browser
- Check that no other app is using your camera

**Backend connection errors?**

- Ensure the Python backend is running on port 8000
- Check that CORS is properly configured

**No pose detected?**

- Ensure good lighting
- Make sure your full body is visible in the frame
- Try moving closer or further from the camera