🎵 Moodify - Discover Songs Based on Your Image 🎨🎶

Moodify is a web application that generates a vibe or mood based on an uploaded image and suggests songs matching the vibe. It uses advanced AI (OpenAI and Azure Computer Vision APIs) and Spotify integration to provide an interactive and unique user experience.

📋 Table of Contents

• Overview
• Features
• Technologies Used
• Prerequisites
• Setup Instructions
  • Backend Setup
  • Frontend Setup
• How It Works
• File Structure
• Usage
• Contributing
• Acknowledgements

📖 Overview

Moodify is a fun and interactive platform where users can upload images to:

1. Analyze the contents of the image using Azure Computer Vision.
2. Generate a "vibe" using OpenAI GPT.
3. Suggest songs matching the vibe using Spotify.

The goal is to create a personalized musical experience based on the emotional or visual tone of the uploaded image.

✨ Features

• Image Analysis: Extracts descriptions of images using Azure Computer Vision.
• Vibe Generation: Generates a vibe or mood (e.g., "Calm and Relaxing") using OpenAI GPT.
• Song Recommendations: Suggests 4-5 songs matching the vibe using Spotify.
• Spotify Integration: Allows users to open songs directly in Spotify.
• Modern Design: A stylish, interactive, and professional frontend.

🛠 Technologies Used

Backend:

• Flask: Backend framework for API development.
• Azure Computer Vision API: For image analysis and description generation.
• OpenAI GPT API: For vibe generation.
• Spotipy: Spotify API library for Python.

Frontend:

• Next.js: React-based framework for building modern web apps.
• Tailwind CSS: For styling and responsive design.
• Axios: For HTTP requests.

⚙️ Prerequisites

Before you begin, ensure you have the following installed:

• Python: Version 3.9 or higher.
• Node.js: Version 16.x or higher.
• npm or yarn: For managing frontend dependencies.

Additionally, you need API keys and credentials:

• Azure Computer Vision API Key and Endpoint.
• OpenAI API Key.
• Spotify API Client ID, Client Secret, and Redirect URI.

🚀 Setup Instructions

Backend Setup

1. Clone the Repository:

   git clone https://github.com/your-username/moodify.git
   cd moodify/backend
   

2. Create and Activate Virtual Environment:

   python -m venv venv
   source venv/bin/activate   # On Windows: venv\Scripts\activate
   

3. Install Dependencies:

   pip install -r requirements.txt
   

4. Set Environment Variables: Create a .env file in the backend directory and add:

   OPENAI_API_KEY=your_openai_api_key
   AZURE_CV_API_KEY=your_azure_computer_vision_api_key
   AZURE_CV_ENDPOINT=your_azure_computer_vision_endpoint
   SPOTIFY_CLIENT_ID=your_spotify_client_id
   SPOTIFY_CLIENT_SECRET=your_spotify_client_secret
   SPOTIFY_REDIRECT_URI=http://127.0.0.1:5001/callback
   

5. Run the Flask Server:

   flask run --host=0.0.0.0 --port=5001
   

Frontend Setup

1. Navigate to the Frontend Directory:

   cd ../frontend
   

2. Install dependencies:

   npm install
   

3. Set Environment Variables: Create a .env.local file in the frontend directory and add:

   NEXT_PUBLIC_BACKEND_URL=http://127.0.0.1:5001
   

4. Run the Development Server:

   npm run dev
   

5. Open your browser and go to http://localhost:3000

🧠 How It Works

1. Image Upload:Users upload an image via the frontend.
2. Image Analysis: The backend analyzes the image using Azure Computer Vision API.
3. Vibe Generation: OpenAI GPT generates a vibe based on the image description.
4. Song Suggestions: The backend searches for songs on Spotify matching the vibe and returns them to the frontend.

📂 File Structure

moodify/
│
├── backend/
│   ├── app.py                  # Flask app entry point
│   ├── routes/                 # Flask API routes
│   ├── services/               # Logic for Azure, OpenAI, and Spotify
│   ├── .env                    # Backend environment variables
│   └── requirements.txt        # Python dependencies
│
├── frontend/
│   ├── public/                 # Static assets
│   ├── src/
│   │   ├── app/                # Next.js app components
│   │   ├── components/         # Reusable React components
│   │   ├── styles/             # Tailwind CSS styles
│   ├── .env.local              # Frontend environment variables
│   └── package.json            # Frontend dependencies
│
└── README.md                   # Project documentation

🎮 Usage

1. Navigate to the frontend site (http://localhost:3000).
2. Upload an image.
3. View the vibe and suggested songs.
4. Click "Listen on Spotify" to play the songs.

🤝 Contributing

Contributions are welcome! To contribute:

1. Fork the repository.
2. Create a feature branch:

   git checkout -b feature-name
   

3. Commit your changes:

   git commit -m "Add a new feature"
   

4. Push to the branch:

   git push origin feature-name
   

5. Open a pull request.

🙏 Acknowledgements

1. Azure Computer Vision for image analysis.
2. OpenAI GPT for vibe generation.
3. Spotify API for song suggestions.
4. Tailwind CSS for beautiful styling.

Enjoy Moodify! 🎉