Upload 10 files

DockerFile

@@ -0,0 +1,22 @@
+FROM python:3.10-slim
+
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    libgl1-mesa-glx \
+    libglib2.0-0 \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements first for better caching
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy all files
+COPY . .
+
+# Expose the port the app runs on
+EXPOSE 7860
+
+# Command to run the application
+CMD ["python", "app.py"]

app.py

@@ -0,0 +1,112 @@
+from flask import Flask, request, render_template
+import os
+import gradio as gr
+from emotion_detection import detect_emotion
+from music_recommender import get_music_recommendations
+
+app = Flask(__name__)
+
+@app.route('/')
+def home():
+    return render_template('index.html')
+
+@app.route('/recommend', methods=['POST'])
+def recommend():
+    # Get emotion from image
+    
+    if len(request.files)>0:
+        if 'file' in request.files:
+            file = request.files['file']
+            file.save("uploaded_image.jpg")
+            emotion = detect_emotion("uploaded_image.jpg")
+    else:
+        emotion = request.form['emotion']
+    
+    # Get music recommendations
+    songs = get_music_recommendations(emotion)
+    return render_template('results.html', emotion=emotion, songs=songs)
+
+@app.route('/about')
+def about():
+    return render_template('about.html')
+
+# Create a Gradio interface wrapper around our Flask app
+def create_gr_interface():
+    def process_image(image):
+        # Save the image
+        image_path = "uploaded_image.jpg"
+        image.save(image_path)
+        
+        # Detect emotion
+        emotion = detect_emotion(image_path)
+        
+        # Get recommendations
+        songs = get_music_recommendations(emotion)
+        
+        # Format output
+        result = f"Detected emotion: {emotion}\n\nRecommended songs:"
+        for song in songs:
+            result += f"\n- {song['name']} by {song['artist']}"
+            result += f"\n  Link: {song['url']}"
+        
+        return result
+    
+    def process_text(emotion_text):
+        # Get recommendations based on text input
+        songs = get_music_recommendations(emotion_text)
+        
+        # Format output
+        result = f"Selected emotion: {emotion_text}\n\nRecommended songs:"
+        for song in songs:
+            result += f"\n- {song['name']} by {song['artist']}"
+            result += f"\n  Link: {song['url']}"
+        
+        return result
+    
+    # Create two tabs: one for image upload, one for direct emotion selection
+    with gr.Blocks(title="MoodifyAI") as demo:
+        gr.Markdown("# MoodifyAI")
+        gr.Markdown("An AI-powered music recommendation system that detects emotions and suggests songs.")
+        
+        with gr.Tabs():
+            with gr.TabItem("Detect from Image"):
+                with gr.Row():
+                    with gr.Column():
+                        image_input = gr.Image(label="Upload a facial image")
+                        image_button = gr.Button("Get Recommendations")
+                    with gr.Column():
+                        image_output = gr.Textbox(label="Recommendations", lines=10)
+                image_button.click(process_image, inputs=image_input, outputs=image_output)
+            
+            with gr.TabItem("Select Emotion"):
+                with gr.Row():
+                    with gr.Column():
+                        text_input = gr.Dropdown(
+                            ["Happy", "Sad", "Angry", "Relaxed", "Neutral", "Surprise", "Fear", "Disgust"],
+                            label="Select your emotion"
+                        )
+                        text_button = gr.Button("Get Recommendations")
+                    with gr.Column():
+                        text_output = gr.Textbox(label="Recommendations", lines=10)
+                text_button.click(process_text, inputs=text_input, outputs=text_output)
+        
+        gr.Markdown("## How it works")
+        gr.Markdown("""
+        1. Upload an image with a face or select an emotion
+        2. Our AI detects the emotion or uses your selection
+        3. We recommend songs based on your emotional state using Spotify's API
+        """)
+    
+    return demo
+
+# Create the Gradio interface
+demo = create_gr_interface()
+
+# For Hugging Face Spaces deployment
+if __name__ == "__main__":
+    # Check if running on HF Spaces
+    if os.environ.get("SPACE_ID"):
+        demo.launch()
+    else:
+        # Run the Flask app locally
+        app.run(debug=True, host="0.0.0.0", port=int(os.environ.get("PORT", 7860)))

emotion_detection.py

@@ -0,0 +1,32 @@
+from tensorflow.keras.preprocessing.image import img_to_array
+from huggingface_hub import hf_hub_download
+from tensorflow.keras.models import load_model  # Fixed typo in import
+import numpy as np
+import os
+import cv2
+from textblob import TextBlob
+
+# Set environment variable
+os.environ["TF_ENABLE_ONEDNN_OPTS"] = "0"
+
+model_path = hf_hub_download(
+    repo_id ="shivampr1001/Emo0.1",
+    filename = "Emo0.1"
+)
+model = load_model(model_path)
+
+def detect_emotion(image_path):
+    
+    img = cv2.imread(image_path)
+    img = cv2.resize(img, (48, 48))
+    img = img_to_array(img)
+    img = img/255.0
+    img = np.expand_dims(img, axis=0)
+    # img = img.reshape(1, 48, 48, 1)
+    predictions = model.predict(img)
+    emotions = ['Angry', 'Disgust', 'Fear', 'Happy', 'Sad', 'Surprise', 'Neutral']
+    return emotions[predictions.argmax()]
+
+def detect_sentiment(text):
+    analysis = TextBlob(text)
+    return "Positive" if analysis.sentiment.polarity > 0 else "Negative"

music_recommender.py

@@ -0,0 +1,98 @@
+import spotipy
+from spotipy.oauth2 import SpotifyClientCredentials
+import random
+import os
+
+# Enhanced emotion-to-genre mapping
+def get_music_recommendations(emotion):
+    # Define the emotion to genre mapping
+    mood_to_genre = {
+        "Happy": "pop",
+        "Sad": "acoustic",
+        "Angry": "rock",
+        "Relaxed": "chill",
+        "Fear": "ambient",
+        "Disgust": "metal",
+        "Surprise": "electronic",
+        "Neutral": "indie"
+    }
+    
+    # Check for Spotify credentials
+    client_id = os.getenv("SPOTIFY_CLIENT_ID")
+    client_secret = os.getenv("SPOTIFY_CLIENT_SECRET")
+    
+    # If credentials exist, use Spotify API
+    if client_id and client_secret:
+        # Set up Spotify credentials
+        sp = spotipy.Spotify(auth_manager=SpotifyClientCredentials(
+            client_id=client_id,
+            client_secret=client_secret
+        ))
+        
+        # Get genre based on emotion
+        genre = mood_to_genre.get(emotion, "pop")
+        offset = random.randint(0, 990)
+        results = sp.search(q=f"genre:{genre}", type="track", limit=10, offset=offset)
+        
+        songs = []
+        for track in results['tracks']['items']:
+            songs.append({
+                "name": track['name'],
+                "artist": track['artists'][0]['name'],
+                "url": track['external_urls']['spotify'],
+                "image_url": track['album']['images'][0]['url'] if track['album']['images'] else ""
+            })
+    else:
+        # Fallback to mock data if no Spotify credentials
+        genre = mood_to_genre.get(emotion, "pop")
+        songs = get_mock_recommendations(genre)
+        
+    return songs
+
+def get_mock_recommendations(genre):
+    """Provide mock recommendations when Spotify API credentials are unavailable"""
+    mock_data = {
+        "pop": [
+            {"name": "Happy", "artist": "Pharrell Williams", "url": "https://open.spotify.com/track/60nZcImufyMA1MKQZ2FfW", "image_url": ""},
+            {"name": "Uptown Funk", "artist": "Mark Ronson ft. Bruno Mars", "url": "https://open.spotify.com/track/32OlwWuMpZ6b0aN2RZOeMS", "image_url": ""},
+            {"name": "Can't Stop the Feeling!", "artist": "Justin Timberlake", "url": "https://open.spotify.com/track/1WkMMavIMc4JZ8cfMmxHkI", "image_url": ""}
+        ],
+        "acoustic": [
+            {"name": "Someone Like You", "artist": "Adele", "url": "https://open.spotify.com/track/3bNv3VuUOKgrf5hu3YcuRo", "image_url": ""},
+            {"name": "Skinny Love", "artist": "Bon Iver", "url": "https://open.spotify.com/track/2CVV8PtUYYsux8XOzWpFZf", "image_url": ""},
+            {"name": "Fix You", "artist": "Coldplay", "url": "https://open.spotify.com/track/7LVHVU3tWfcxj5aiPFEW4Q", "image_url": ""}
+        ],
+        "rock": [
+            {"name": "Enter Sandman", "artist": "Metallica", "url": "https://open.spotify.com/track/5sICkBXVmaCQk5aISGR3x1", "image_url": ""},
+            {"name": "Back in Black", "artist": "AC/DC", "url": "https://open.spotify.com/track/08mG3Y1vljYA6bvDt4Wqkj", "image_url": ""},
+            {"name": "Sweet Child O' Mine", "artist": "Guns N' Roses", "url": "https://open.spotify.com/track/7o2CTH4ctstm8TNelqjb51", "image_url": ""}
+        ],
+        "chill": [
+            {"name": "Weightless", "artist": "Marconi Union", "url": "https://open.spotify.com/track/1ZqHjApl3pfzeZ9lBBCK3H", "image_url": ""},
+            {"name": "Intro", "artist": "The xx", "url": "https://open.spotify.com/track/0m1sU0FZbSYNtGNV8lqGqH", "image_url": ""},
+            {"name": "Porcelain", "artist": "Moby", "url": "https://open.spotify.com/track/2UKYMN7VnsQo40n0qCt6Sa", "image_url": ""}
+        ],
+        "ambient": [
+            {"name": "Music For Airports", "artist": "Brian Eno", "url": "https://open.spotify.com/track/5oHlSPFpn0SAJpn7hLkiSo", "image_url": ""},
+            {"name": "Avril 14th", "artist": "Aphex Twin", "url": "https://open.spotify.com/track/43fd8ynILrlGJddNOrRIH3", "image_url": ""},
+            {"name": "Gymnopédie No.1", "artist": "Erik Satie", "url": "https://open.spotify.com/track/5NGtFXVpXSvwunEIGeviY3", "image_url": ""}
+        ],
+        "metal": [
+            {"name": "Master of Puppets", "artist": "Metallica", "url": "https://open.spotify.com/track/2MuWTIM3b0YEAskbeeFE1i", "image_url": ""},
+            {"name": "Paranoid", "artist": "Black Sabbath", "url": "https://open.spotify.com/track/4O6ZbsM7nNQtdKSnb9nFR9", "image_url": ""},
+            {"name": "Chop Suey!", "artist": "System of a Down", "url": "https://open.spotify.com/track/2DlHlPMa4M17kufBvI2lEN", "image_url": ""}
+        ],
+        "electronic": [
+            {"name": "Strobe", "artist": "deadmau5", "url": "https://open.spotify.com/track/4kO7mrkvBmJ8IjHtl5wmY5", "image_url": ""},
+            {"name": "Scary Monsters and Nice Sprites", "artist": "Skrillex", "url": "https://open.spotify.com/track/4lajYQOtLTzIIwueGJJkKj", "image_url": ""},
+            {"name": "Around the World", "artist": "Daft Punk", "url": "https://open.spotify.com/track/1pKYYY0dkg23sQQXi0Q5zN", "image_url": ""}
+        ],
+        "indie": [
+            {"name": "Somebody Else", "artist": "The 1975", "url": "https://open.spotify.com/track/50AeFsc75hSSjmY1LlsH9Z", "image_url": ""},
+            {"name": "Mr. Brightside", "artist": "The Killers", "url": "https://open.spotify.com/track/003vvx7Niy0yvhvHt4a68B", "image_url": ""},
+            {"name": "Do I Wanna Know?", "artist": "Arctic Monkeys", "url": "https://open.spotify.com/track/5FVd6KXrgO9B3JPmC8OPst", "image_url": ""}
+        ]
+    }
+    
+    # Return either the genre-specific songs or pop as fallback
+    return mock_data.get(genre, mock_data["pop"])

readme.md

@@ -0,0 +1,77 @@
+# MoodifyAI
+
+An AI-powered music recommendation system that detects emotions from facial expressions and suggests songs tailored to the user's mood.
+
+[![Hugging Face Spaces](https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Spaces-blue)](https://huggingface.co/spaces)
+
+## Features
+- Detects emotions from facial expressions using a pre-trained deep learning model
+- Recommends songs based on the detected emotion by integrating with Spotify
+- Provides a user-friendly interface through Gradio and Flask
+- Can run both as a Flask web app and as a Hugging Face Space
+
+## How It Works
+1. **Emotion Detection:**  
+   The system uses a deep learning model to analyze facial expressions and classify them into emotions such as happy, sad, angry, neutral, etc.
+   
+2. **Spotify API Integration:**  
+   Based on the detected emotion, the app queries Spotify's API for songs that match the mood and displays the results.
+
+3. **User Interface:**  
+   Users interact with the system via a Gradio interface where they can upload images to detect emotions or directly select an emotion to get music recommendations.
+
+## Deployment on Hugging Face Spaces
+
+This app is ready to be deployed on Hugging Face Spaces. Here's how:
+
+1. Create a new Space on [Hugging Face](https://huggingface.co/spaces)
+2. Choose "Gradio" as the SDK
+3. Upload all the files in this repository
+4. (Optional) Add your Spotify API credentials as Space secrets:
+   - `SPOTIFY_CLIENT_ID`
+   - `SPOTIFY_CLIENT_SECRET`
+
+## Local Development
+
+### Prerequisites
+- Python 3.8+
+- Spotify Developer Account (optional)
+
+### Setup
+1. Clone the repository
+2. Install dependencies:
+   ```bash
+   pip install -r requirements.txt
+   ```
+3. (Optional) Set up environment variables for Spotify API:
+   ```bash
+   export SPOTIFY_CLIENT_ID=your_client_id_here
+   export SPOTIFY_CLIENT_SECRET=your_client_secret_here
+   ```
+4. Run the application:
+   ```bash
+   python app.py
+   ```
+
+## Using the Application
+
+### Via Gradio Interface
+1. Open the application in your browser
+2. Choose between "Detect from Image" or "Select Emotion"
+3. For image detection, upload an image with a face
+4. For direct selection, choose an emotion from the dropdown
+5. Click "Get Recommendations" to receive song suggestions
+
+### Via Flask Interface (Local Only)
+1. Open http://localhost:7860 in your browser
+2. Follow the on-screen instructions to upload an image or select an emotion
+3. View your personalized music recommendations
+
+## Technology Stack
+- **Backend:** Python, Flask, TensorFlow/Keras
+- **Frontend:** Gradio, HTML/CSS (for Flask routes)
+- **APIs:** Spotify Web API
+- **Deployment:** Hugging Face Spaces
+
+## License
+This project is licensed under the MIT License. See `LICENSE` for details.

requirements.txt

@@ -0,0 +1,11 @@
+Flask==3.1.0
+tensorflow==2.18.0
+opencv-python==4.10.0.84
+huggingface-hub>=0.19.0
+gradio>=4.0.0
+numpy>=2.0.2
+textblob==0.18.0.post0
+spotipy==2.24.0
+Werkzeug==3.1.3
+Jinja2==3.1.4
+gunicorn==23.0.0

space_metadata.json

@@ -0,0 +1,12 @@
+{
+    "title": "MoodifyAI - Emotion-based Music Recommender",
+    "emoji": "🎵",
+    "colorFrom": "#9C27B0",
+    "colorTo": "#3F51B5",
+    "sdk": "gradio",
+    "sdk_version": "4.0.0",
+    "python_version": "3.10",
+    "app_file": "app.py",
+    "pinned": false,
+    "license": "mit"
+  }

templates/index.html

@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MoodifyAI - Emotion-based Music Recommendations</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        body {
+            background-color: #f8f9fa;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        .header {
+            background: linear-gradient(135deg, #9C27B0, #3F51B5);
+            color: white;
+            padding: 2rem 0;
+            text-align: center;
+            margin-bottom: 2rem;
+            border-radius: 0 0 15px 15px;
+        }
+        .card {
+            border-radius: 15px;
+            overflow: hidden;
+            box-shadow: 0 6px 12px rgba(0,0,0,0.1);
+            margin-bottom: 2rem;
+            border: none;
+        }
+        .card-header {
+            background: linear-gradient(135deg, #9C27B0, #3F51B5);
+            color: white;
+            font-weight: bold;
+        }
+        .btn-primary {
+            background: linear-gradient(135deg, #9C27B0, #3F51B5);
+            border: none;
+        }
+        .btn-primary:hover {
+            background: linear-gradient(135deg, #7B1FA2, #303F9F);
+        }
+        .webcam-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        #webcam {
+            width: 100%;
+            max-width: 400px;
+            border-radius: 10px;
+            margin-bottom: 1rem;
+        }
+        #canvas {
+            display: none;
+        }
+        .emotion-select {
+            width: 100%;
+            padding: 10px;
+            border-radius: 5px;
+            border: 1px solid #ced4da;
+            margin-bottom: 1rem;
+        }
+        .footer {
+            text-align: center;
+            padding: 1rem 0;
+            background-color: #f1f1f1;
+            margin-top: 2rem;
+            border-radius: 15px 15px 0 0;
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <div class="container">
+            <h1>MoodifyAI</h1>
+            <p class="lead">Discover music that matches your emotions</p>
+        </div>
+    </div>
+
+    <div class="container">
+        <div class="row">
+            <div class="col-md-6 mb-4">
+                <div class="card">
+                    <div class="card-header">
+                        Upload an Image
+                    </div>
+                    <div class="card-body">
+                        <form action="/recommend" method="post" enctype="multipart/form-data">
+                            <div class="mb-3">
+                                <label for="file" class="form-label">Choose an image with a clear facial expression</label>
+                                <input type="file" class="form-control" id="file" name="file" accept="image/*" required>
+                            </div>
+                            <button type="submit" class="btn btn-primary">Get Recommendations</button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-md-6 mb-4">
+                <div class="card">
+                    <div class="card-header">
+                        Select Your Emotion
+                    </div>
+                    <div class="card-body">
+                        <form action="/recommend" method="post">
+                            <div class="mb-3">
+                                <label for="emotion" class="form-label">How are you feeling today?</label>
+                                <select name="emotion" id="emotion" class="form-select emotion-select" required>
+                                    <option value="">Select an emotion</option>
+                                    <option value="Happy">Happy</option>
+                                    <option value="Sad">Sad</option>
+                                    <option value="Angry">Angry</option>
+                                    <option value="Relaxed">Relaxed</option>
+                                    <option value="Neutral">Neutral</option>
+                                    <option value="Surprise">Surprised</option>
+                                    <option value="Fear">Fearful</option>
+                                    <option value="Disgust">Disgusted</option>
+                                </select>
+                            </div>
+                            <button type="submit" class="btn btn-primary">Get Recommendations</button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-12">
+                <div class="card">
+                    <div class="card-header">
+                        How It Works
+                    </div>
+                    <div class="card-body">
+                        <div class="row">
+                            <div class="col-md-4 text-center mb-3">
+                                <h5>1. Capture or Select</h5>
+                                <p>Upload a photo or select your current emotion</p>
+                            </div>
+                            <div class="col-md-4 text-center mb-3">
+                                <h5>2. Emotion Detection</h5>
+                                <p>Our AI analyzes your facial expression or uses your selection</p>
+                            </div>
+                            <div class="col-md-4 text-center mb-3">
+                                <h5>3. Music Recommendations</h5>
+                                <p>Get personalized song suggestions to match your mood</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="footer">
+        <div class="container">
+            <p><a href="/about">About MoodifyAI</a></p>
+            <p class="text-muted">© 2024 MoodifyAI</p>
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>

templates/results.html

@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MoodifyAI - Your Recommendations</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        body {
+            background-color: #f8f9fa;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        .header {
+            background: linear-gradient(135deg, #9C27B0, #3F51B5);
+            color: white;
+            padding: 2rem 0;
+            text-align: center;
+            margin-bottom: 2rem;
+            border-radius: 0 0 15px 15px;
+        }
+        .card {
+            border-radius: 15px;
+            overflow: hidden;
+            box-shadow: 0 6px 12px rgba(0,0,0,0.1);
+            margin-bottom: 2rem;
+            border: none;
+            transition: transform 0.2s;
+        }
+        .card:hover {
+            transform: translateY(-5px);
+        }
+        .card-header {
+            background: linear-gradient(135deg, #9C27B0, #3F51B5);
+            color: white;
+            font-weight: bold;
+        }
+        .btn-primary {
+            background: linear-gradient(135deg, #9C27B0, #3F51B5);
+            border: none;
+        }
+        .btn-primary:hover {
+            background: linear-gradient(135deg, #7B1FA2, #303F9F);
+        }
+        .song-card {
+            margin-bottom: 1rem;
+            border-radius: 10px;
+            overflow: hidden;
+            height: 100%;
+        }
+        .song-card img {
+            width: 100%;
+            height: 200px;
+            object-fit: cover;
+        }
+        .song-info {
+            padding: 1rem;
+        }
+        .emotion-badge {
+            font-size: 1.2rem;
+            padding: 0.5rem 1rem;
+            border-radius: 50px;
+            background: linear-gradient(135deg, #9C27B0, #3F51B5);
+            color: white;
+            display: inline-block;
+            margin-bottom: 1rem;
+        }
+        .footer {
+            text-align: center;
+            padding: 1rem 0;
+            background-color: #f1f1f1;
+            margin-top: 2rem;
+            border-radius: 15px 15px 0 0;
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <div class="container">
+            <h1>MoodifyAI</h1>
+            <p class="lead">Your Personalized Music Recommendations</p>
+        </div>
+    </div>
+
+    <div class="container">
+        <div class="text-center mb-4">
+            <div class="emotion-badge">
+                Detected Emotion: {{ emotion }}
+            </div>
+            <p class="lead">Here are songs that match your current mood</p>
+        </div>
+
+        <div class="row">
+            {% for song in songs %}
+            <div class="col-md-4 mb-4">
+                <div class="card song-card">
+                    {% if song.image_url %}
+                    <img src="{{ song.image_url }}" alt="{{ song.name }}" class="card-img-top">
+                    {% else %}
+                    <div class="bg-secondary" style="height: 200px; display: flex; align-items: center; justify-content: center;">
+                        <span class="text-white">No Image Available</span>
+                    </div>
+                    {% endif %}
+                    <div class="song-info">
+                        <h5>{{ song.name }}</h5>
+                        <p class="text-muted">{{ song.artist }}</p>
+                        <a href="{{ song.url }}" target="_blank" class="btn btn-primary btn-sm">Listen on Spotify</a>
+                    </div>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+
+        <div class="text-center mt-4">
+            <a href="/" class="btn btn-primary">Try Again</a>
+        </div>
+    </div>
+
+    <div class="footer">
+        <div class="container">
+            <p><a href="/about">About MoodifyAI</a></p>
+            <p class="text-muted">© 2024 MoodifyAI</p>
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>