Exploring the Music Dashboard

In this lesson, you’ll explore how your Smart Music Player backend powers a real interactive frontend interface. You won’t need to touch the frontend code in detail — instead, your focus is to understand how your backend logic gets triggered, what data flows between components, and how the core routes you’ve already built are now integrated into a realistic music experience. 🧠

By now, you’ve already built:

• A track recommendation engine (embedding + predictive)
• Listening session tracking
• Session-aware personalization
• ML affinity modeling and clustering
• A fully functioning RESTful API with /api/... endpoints

In this final course, we’re plugging all of that into a prebuilt frontend — a dashboard UI — that acts as a user-facing simulation layer for everything you’ve built behind the scenes. The UI is written using Alpine.js and connects directly to your backend API. No frontend development is required — your job is to understand how your backend routes are consumed and explore how users experience the features you’ve built.

Security note: In this demo, the userId is passed directly in the URL, meaning anyone could technically change it and impersonate another user. In a real-world application, you would require authentication (e.g., login sessions, JWT tokens, OAuth) to ensure that users can only access their own data. Without this, personal data could be exposed or modified by unauthorized parties.

Let’s look at the main sections of the Smart Music Player Dashboard. Each section is designed to help you interact with the music player and see smart suggestions.

• Track Catalog:
  This section displays a table of available music tracks. You can browse, search, and select tracks to listen to. Each track shows details like title, artist, album, genre, mood, tempo, and energy.

• Recommendations:
  Here, you can view music recommendations generated by different systems. There are three types:

  • Embedding Recommendations: Based on track similarities.
  • Predictive Recommendations: Based on your listening patterns.
  • Session-Aware Recommendations: Based on your current session activity.

• Listening History and Trends:

  • Listening History: Shows a list of tracks you have listened to, with timestamps.
  • Detailed History: Shows more information, like track titles and artists.
  • Trends: Displays your most common mood, average tempo, and average energy from your recent listening activity.

Each section updates automatically as you interact with the dashboard.

Each dashboard feature maps directly to a backend route. Here's how those connections work — including key code snippets to show you the pattern.

1. Fetching All Tracks: When the page loads, the frontend calls your /api/tracks route:

fetchTracks() {
  fetch(`${this.backendUrl}/api/tracks`)
    .then(r => r.json())
    .then(data => this.tracks = data)
}

This populates the track catalog from your get_tracks_endpoint().

2. Searching Tracks: When the user types a query and presses Enter or clicks "Search":

searchTracks() {
  const url = `${this.backendUrl}/api/search?q=${encodeURIComponent(this.searchQuery)}`
  fetch(url)
    .then(r => r.json())
    .then(data => this.tracks = data)
}

Handled by your search_tracks_endpoint() function.

3. Logging a Listen: Clicking the "Listen" button calls:

logListen(trackId) {
  fetch(`${this.backendUrl}/api/listen/${this.userId}/${trackId}`, { method: 'POST' })
    .then(r => r.json())
    .then(data => alert(data.message || data.error))
}

Handled by log_session_endpoint(), which logs the session.

4. Viewing History: The "History" button uses:

fetchHistory() {
  fetch(`${this.backendUrl}/api/history/${this.userId}`)
    .then(r => r.json())
    .then(data => this.history = data.history)
}

Detailed history uses /api/history/<user_id>/detailed.

5. Simulating a Listening Session: The "Simulate Session" button automatically logs listens for the first 5 tracks:

simulateSession() {
  const posts = this.tracks.slice(0, 5).map(track =>
    fetch(`${this.backendUrl}/api/listen/${this.userId}/${track.id}`, { method: 'POST' })
  )
  Promise.all(posts).then(() => {
    this.fetchHistory()
    this.fetchTrends()
  })
}

This simulates real listening activity and refreshes stats.

6. Getting Recommendations When you click a recommendation button (e.g. "Predictive"):

fetchRecommendations('predictive') {
  const url = `${this.backendUrl}/api/recommendations/predictive/${this.userId}`
  fetch(url)
    .then(r => r.json())
    .then(data => this.recommendations.predictive = data.recommendations || [])
}

Each type maps to a different endpoint: - /embedding/<user_id> → embedding-based - /predictive/<user_id> → ML model-based - /session_aware/<user_id> → uses session trends (you'll build this logic in the next unit)

7. Viewing Listening Trends: Clicking "Trends" fetches user-specific stats:

fetchTrends() {
  fetch(`${this.backendUrl}/api/trends/${this.userId}`)
    .then(r => r.json())
    .then(data => this.trends = data.trends || {})
}

This calls get_user_trends_endpoint() which calculates: - Most common mood - Average tempo - Average energy

You’ll dive into this logic in the next unit.

While most of the app logic lives in your API routes, there are a few important backend components that run once at startup or help ensure stability. Let’s briefly look at them.

initialize_app_components(): Preparing the Backend on Startup This function runs once when the server starts and ensures that everything your backend depends on is initialized correctly.

Here’s what it does and why:

• get_all_tracks() – Loads track data from the CSV file to ensure track info is ready.
• get_track_embeddings() – Loads or generates embeddings so that similarity-based recommendations can work.
• assign_track_clusters() – Assigns cluster labels to tracks, used for analysis and session-aware logic.
• ML Model Check – If your trained model isn’t found, it:
  • Creates a few dummy sessions for testing
  • Trains a new model using train_affinity_model()

def initialize_app_components():
    """Initializes necessary components at app startup."""
    print("Initializing app components...")
    get_all_tracks()
    from src.user_model import get_track_embeddings
    get_track_embeddings()
    assign_track_clusters()
    
    model = load_model()
    if model is None:
        print("ML model not found. Attempting to train a new one...")
        import os
        from src.database import SESSIONS_FILE_PATH as SFP, log_listening_session
        if not os.path.exists(SFP) or os.path.getsize(SFP) == 0:
            print("Creating dummy sessions for initial model training...")
            if not get_all_tracks().empty:
                log_listening_session(user_id="init_user1", track_id=get_all_tracks()['id'].iloc[0])
                if len(get_all_tracks()) > 1:
                    log_listening_session(user_id="init_user1", track_id=get_all_tracks()['id'].iloc[1])
                    if len(get_all_tracks()) > 2:
                        log_listening_session(user_id="init_user2", track_id=get_all_tracks()['id'].iloc[2])
        train_affinity_model()
    else:
        print("ML model loaded successfully.")
    print("Initialization complete.")

This makes sure the system won’t break if the model or session data is missing — it auto-generates fallback data and retrains when needed.

Global Error Handler (@app.errorhandler) This is a safety net for your API.

@app.errorhandler(Exception)
def handle_exception(e):
    app.logger.exception("Unhandled exception during request")
    return jsonify({"error": "Internal server error"}), 500

If any unexpected error happens in your routes, this function:

• Logs the error to the console (with traceback)
• Returns a generic 500 response to the client

Without this, the app would crash or expose sensitive error details — it’s essential for robustness.

Serving the Frontend (@app.route('/', defaults={'path': ''})) These routes allow your Flask backend to also serve the frontend files, such as index.html:

@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def serve_frontend(path):
    if path and os.path.exists(os.path.join('frontend', path)):
        return send_from_directory('frontend', path)
    return send_from_directory('frontend', 'index.html')

• If the requested path matches a file (like a CSS or JS file), it’s returned.
• If not, it serves index.html, enabling client-side routing and reloading support.

This lets you deploy a fullstack app with Flask serving both the API and the dashboard UI — no need for separate frontend hosting.

Modern browsers enforce a security policy called CORS (Cross-Origin Resource Sharing). By default, frontend JavaScript can't send requests to a backend running on a different origin (e.g., localhost:3000 to localhost:5000) — unless the backend explicitly allows it.

To enable this, your app sets CORS headers in both before_request and after_request:

response.headers['Access-Control-Allow-Origin'] = '*'
response.headers['Access-Control-Allow-Methods'] = 'GET,POST,OPTIONS'
response.headers['Access-Control-Allow-Headers'] = 'Content-Type,Authorization'

• Access-Control-Allow-Origin: *
  • Allows any origin (domain) to access your backend. In production, this should be restricted to trusted domains.
• Access-Control-Allow-Methods: GET,POST,OPTIONS
  • Tells the browser which HTTP methods are allowed in cross-origin requests.
• Access-Control-Allow-Headers: Content-Type,Authorization
  • Lets the browser know it’s safe to send custom headers like Content-Type and Authorization (which are common in APIs).

Additionally, the before_request function handles preflight OPTIONS requests, which browsers automatically send before certain types of cross-origin requests:

if request.method == 'OPTIONS':
    return make_response()  # Respond immediately with CORS headers

Without these headers and preflight handling, the browser would block the frontend dashboard from interacting with your API.

In this lesson, you explored the Smart Music Player Dashboard and learned about its main features. You saw how to browse and search tracks, log listens, simulate sessions, and view recommendations and trends. You also reviewed how the app and dataset are set up behind the scenes.

In the next lessons, you'll:

• Implement and explain the logic behind the /api/trends/<user_id> route
• Refine and evaluate the session-aware recommendation strategy

Both features are already live in the dashboard, so you can test them now and understand them deeply later.

Let’s move on and upgrade some of the more intelligent components of your smart music system.