1st commit

Dockerfile

@@ -0,0 +1,24 @@
+# Use official Python runtime as base image
+FROM python:3.12-slim
+
+# Set working directory in container
+WORKDIR /app
+
+# Copy requirements first (optimizes caching)
+COPY requirements.txt .
+
+# Install dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the rest of the application code
+COPY . .
+
+# Expose port 7860 (Hugging Face Spaces default)
+EXPOSE 7860
+
+# Set environment variables (optional, adjust as needed)
+ENV FLASK_ENV=production
+ENV PORT=7860
+
+# Command to run the app with Gunicorn (adjust workers/threads as needed)
+CMD ["gunicorn", "--bind", "0.0.0.0:7860", "--workers", "1", "--threads", "8", "--timeout", "0", "recommend_app:app"]

README.md

@@ -1,11 +1,119 @@
----
-title: Finalcapstone
-emoji: 🏃
-colorFrom: blue
-colorTo: pink
-sdk: docker
-pinned: false
-short_description: 'Final Capstone Project '
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Netflix Content-Based Recommender
+
+A Flask-based web application that provides personalized recommendations for Netflix content using a content-based filtering approach.
+
+## Features
+- Content-based recommendations based on TF-IDF and cosine similarity
+- Search and autocomplete functionality
+- Visualizations of Netflix content distribution
+- Works on both macOS and Windows
+
+## Prerequisites
+Ensure you have the following installed:
+- **Python 3.12+** (Check with `python --version` or `python3 --version`)
+- **Node.js and npm** (Check with `node -v` and `npm -v`)
+- **pip** (Python package manager)
+
+## Installation
+
+### 1. Clone the Repository
+```sh
+git clone https://github.com/yourusername/flick_picker.git
+cd flick_picker
+```
+
+### 2. Set Up a Virtual Environment
+
+#### macOS & Linux
+```sh
+python3 -m venv venv
+source venv/bin/activate
+```
+
+#### Windows (Command Prompt)
+```sh
+python -m venv venv
+venv\Scripts\activate
+```
+
+#### Windows (PowerShell)
+```powershell
+python -m venv venv
+venv\Scripts\Activate.ps1
+```
+
+### 3. Install Dependencies
+
+```sh
+pip install -r requirements.txt
+npm install
+```
+
+### 4. Download Dataset
+Ensure `netflix_titles.csv` is placed in the project root directory.
+
+### 5. Build or Load Model
+Run the following command to preprocess the dataset and generate a similarity model:
+
+```sh
+python recommend_app.py
+```
+
+This will load the Netflix dataset, process it, and save a cached similarity model (`cosine_sim_cache.pkl`).
+
+## Running the Application
+
+Once setup is complete, start the Flask server:
+
+```sh
+python recommend_app.py
+```
+
+The app will be available at:  
+[http://127.0.0.1:5020](http://127.0.0.1:5020)
+
+## Frontend Development
+If making changes to the frontend, ensure Node.js dependencies are installed. Run:
+
+```sh
+npm run dev
+```
+
+## File Structure
+
+```
+flick_picker/
+│── recommend_app.py          # Flask API entry point
+│── recommendation_engine.py  # Content-based filtering logic
+│── netflix_titles.csv        # Dataset file
+│── requirements.txt          # Python dependencies
+│── package.json              # Frontend dependencies
+│── static/
+│   ├── index.html            # Main frontend page
+│   ├── js/                   # Frontend scripts
+│   ├── styles.css            # Stylesheet
+│── venv/                     # Python virtual environment
+```
+
+## Stopping the Server
+To stop the Flask server, press **Ctrl + C** in the terminal.
+
+To deactivate the virtual environment:
+
+#### macOS & Linux
+```sh
+deactivate
+```
+
+#### Windows
+```sh
+venv\Scripts\deactivate
+```
+#### DOCKER Deployment (EASY MODE)
+
+```sh
+docker build -t my-recommend-app .
+docker run -p 7860:7860 my-recommend-app
+```
+
+access app at http://0.0.0.0:7860

package-lock.json

@@ -0,0 +1,13 @@
+{
+  "name": "flick_picker",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "flick_picker",
+      "version": "1.0.0",
+      "license": "ISC"
+    }
+  }
+}

package.json

@@ -0,0 +1,12 @@
+{
+  "name": "flick_picker",
+  "version": "1.0.0",
+  "description": "A Flask-based movie recommendation system that uses **TF-IDF and cosine similarity** to suggest movies based on a given title.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}

recommend_app.py

@@ -0,0 +1,136 @@
+import os
+import logging
+from flask import Flask, send_from_directory, request, jsonify
+from recommendation_engine import load_and_preprocess_data, build_or_load_model, get_recommendations
+from collections import Counter
+import re
+
+def normalize_title(title):
+    """Convert title to lowercase, strip spaces, and normalize '&' to 'and' for consistency."""
+    title = title.lower().strip()
+    title = re.sub(r"[^\w\s&]", "", title)  # Keep '&' but remove other special characters
+    title = re.sub(r"\s+", " ", title)  # Replace multiple spaces with a single space
+    title = title.replace("&", "and")  # Normalize '&' to 'and'
+    return title
+
+# Configure logging once
+logging.basicConfig(
+    level=logging.INFO,
+    filename="app.log",
+    filemode="a",
+    format="%(asctime)s - %(levelname)s - %(message)s"
+)
+logger = logging.getLogger(__name__)
+
+app = Flask(__name__, static_folder='static')
+
+# Load data and model at startup
+try:
+    df = load_and_preprocess_data("netflix_titles.csv")
+    _, cosine_sim_matrix, title_to_index = build_or_load_model(df, "cosine_sim_cache.pkl")
+    logger.info("Application started successfully with data and model loaded.")
+except Exception as e:
+    logger.error(f"Startup failed: {str(e)}")
+    raise
+
+@app.route('/')
+def serve_frontend():
+    """Serve the frontend index.html from the static folder."""
+    return send_from_directory(app.static_folder, 'index.html')
+
+@app.route('/recommend', methods=['GET'])
+def recommend():
+    raw_title = request.args.get("title", "").strip()
+    title = normalize_title(raw_title)  # Normalize once
+    
+    limit = int(request.args.get("limit", 10))
+    offset = int(request.args.get("offset", 0))
+    content_type = request.args.get("type", None)
+    fields = request.args.getlist("fields")
+
+    # 🚀 Debugging logs
+    logger.info(f"Received API request: {request.url}")
+    logger.info(f"Raw title received: '{raw_title}'")
+    logger.info(f"Normalized title used for lookup: '{title}'")
+    print(f"API request received: {request.url}")
+    print(f"RAW title received: '{raw_title}'")
+    print(f"Normalized title for lookup: '{title}'")
+    print(f"Checking if '{title}' exists in title_to_index:", title in title_to_index)
+
+    if not title:
+        return jsonify({"message": "Title required", "recommendations": []}), 400
+
+    # 🚀 Print available keys to debug mismatches
+    if title not in title_to_index or title_to_index[title] is None:
+        logger.error(f"Title '{title}' is missing from title_to_index or maps to None!")
+        return jsonify({"message": f"'{raw_title}' not found", "recommendations": []}), 404
+        print(f"'{title}' NOT FOUND in title_to_index!")
+
+        # Debugging - Print first 20 keys in title_to_index
+        print("Sample titles available in title_to_index:")
+        print(list(title_to_index.keys())[:20])
+
+        return jsonify({"message": f"'{raw_title}' not found", "recommendations": []}), 404
+
+    try:
+        recs = get_recommendations(
+            title, df, title_to_index, cosine_sim_matrix,
+            top_n=limit + offset, content_type=content_type, fields=fields or None
+        )
+        if not recs:
+            logger.warning(f"No recommendations found for '{title}'")
+            print(f"⚠️ No recommendations found for '{title}'")
+            return jsonify({"message": f"'{raw_title}' not found", "recommendations": []}), 404
+
+        return jsonify({
+            "message": "Similar Movies",
+            "recommendations": recs[offset:offset + limit],
+            "total": len(recs)
+        })
+    except Exception as e:
+        logger.error(f"Error generating recommendations for '{title}': {str(e)}")
+        print(f"ERROR generating recommendations for '{title}': {str(e)}")
+        return jsonify({"message": f"Server error: {str(e)}", "recommendations": []}), 500
+
+
+@app.route('/search', methods=['GET'])
+def search_titles():
+    """Return title suggestions based on a query."""
+    query = request.args.get("q", "").strip().lower()
+    if not query:
+        return jsonify([])
+    
+    try:
+        filtered = df[df['title'].str.lower().str.contains(query, na=False)]
+        suggestions = filtered['title'].head(10).tolist()
+        return jsonify(suggestions)
+    except Exception as e:
+        logger.error(f"Error in search for '{query}': {str(e)}")
+        return jsonify([]), 500
+
+@app.route('/visualizations', methods=['GET'])
+def get_visualizations():
+    """Return data for visualizations (genre, type, country distributions)."""
+    try:
+        # Genre Distribution (top 10)
+        genres = df['listed_in'].str.split(', ').explode().value_counts().head(10).to_dict()
+        
+        # Type Distribution
+        types = df['type'].value_counts().to_dict()
+        
+        # Top Countries (top 5)
+        countries = df['country'].str.split(', ').explode().value_counts().head(5).to_dict()
+        
+        logger.info("Generated visualization data successfully.")
+        return jsonify({
+            "message": "Success",
+            "genre_distribution": genres,
+            "type_distribution": types,
+            "top_countries": countries
+        })
+    except Exception as e:
+        logger.error(f"Visualization error: {str(e)}")
+        return jsonify({"message": f"Error generating visualizations: {str(e)}"}), 500
+
+if __name__ == "__main__":
+    app.run(debug=False, host="0.0.0.0", port=7860)

recommendation_engine.py

@@ -0,0 +1,157 @@
+import pandas as pd
+import numpy as np
+from sklearn.feature_extraction.text import TfidfVectorizer
+from sklearn.metrics.pairwise import cosine_similarity
+import joblib
+import os
+import logging
+import re
+from scipy.sparse import csr_matrix
+
+# Setup logging
+logger = logging.getLogger(__name__)
+
+def normalize_title(title):
+    """Convert title to lowercase, strip spaces, and normalize '&' for consistency."""
+    title = title.lower().strip()
+    title = re.sub(r"[^\w\s&]", "", title)  # Keep '&' but remove other special characters
+    title = re.sub(r"\s+", " ", title)  # Replace multiple spaces with a single space
+    title = title.replace("&", "and")  # Normalize '&' to 'and'
+    return title
+
+def load_and_preprocess_data(csv_file="netflix_titles.csv"):
+    """Loads Netflix dataset, cleans, and prepares it for TF-IDF."""
+    try:
+        df = pd.read_csv(csv_file)
+        logger.info(f"Loaded dataset from {csv_file} with {len(df)} rows.")
+        
+        # Drop duplicates by title
+        df.drop_duplicates(subset='title', keep='first', inplace=True)
+        
+        # Fill missing text fields with 'unknown'
+        text_cols = ['director', 'cast', 'country', 'listed_in', 'description']
+        for col in text_cols:
+            df[col] = df[col].fillna('unknown').astype(str).str.lower()
+        
+        # Combine text features for recommendations
+        df['combined_features'] = (
+            df['director'] + ' ' +
+            df['cast'] + ' ' +
+            df['listed_in'] + ' ' +
+            df['description']
+        )
+
+        return df
+    
+    except FileNotFoundError:
+        logger.error(f"Dataset file '{csv_file}' not found.")
+        raise FileNotFoundError(f"Dataset file '{csv_file}' not found.")
+    except Exception as e:
+        logger.error(f"Error loading data from {csv_file}: {str(e)}")
+        raise Exception(f"Error loading data: {str(e)}")
+
+def build_or_load_model(df, cache_file="cosine_sim_cache.pkl"):
+    """Builds or loads TF-IDF matrix and cosine similarity, with caching."""
+    if os.path.exists(cache_file):
+        try:
+            tfidf_matrix, cosine_sim_matrix, title_to_index = joblib.load(cache_file)
+            logger.info(f"Loaded cached model from {cache_file}.")
+            return tfidf_matrix, cosine_sim_matrix, title_to_index
+        except Exception as e:
+            logger.warning(f"Failed to load cache from {cache_file}: {str(e)}. Rebuilding model.")
+    
+    # Build model if cache doesn’t exist or fails
+    try:
+        tfidf = TfidfVectorizer(
+            stop_words='english',
+            ngram_range=(1, 2),  # Capture word pairs (bigrams) for better similarity
+            min_df=2  # Ignore rare words appearing in only 1 document
+        )
+        tfidf_matrix = tfidf.fit_transform(df['combined_features'])
+        
+        # Ensure matrix is valid
+        if tfidf_matrix.shape[0] == 0 or tfidf_matrix.shape[1] == 0:
+            raise ValueError("TF-IDF matrix is empty! Check feature extraction.")
+
+        # Compute cosine similarity
+        cosine_sim_matrix = cosine_similarity(tfidf_matrix, tfidf_matrix)
+        
+        # Convert to sparse matrix for efficiency
+        cosine_sim_matrix = csr_matrix(cosine_sim_matrix)
+
+        # Map normalized titles -> index
+        df["normalized_title"] = df["title"].apply(normalize_title)
+        title_to_index = pd.Series(df.index, index=df["normalized_title"]).drop_duplicates()
+
+        # Debugging logs
+        logger.info(f"Sample normalized titles in title_to_index: {list(title_to_index.keys())[:20]}")
+        logger.info(f"Checking if 'carole and tuesday' exists in title_to_index: {'carole and tuesday' in title_to_index}")
+        
+        # Cache the results
+        joblib.dump((tfidf_matrix, cosine_sim_matrix, title_to_index), cache_file)
+        logger.info(f"Built and cached model to {cache_file}.")
+        
+        return tfidf_matrix, cosine_sim_matrix, title_to_index
+    
+    except Exception as e:
+        logger.error(f"Error building model: {str(e)}")
+        raise
+
+def get_recommendations(title, df, title_to_index, cosine_sim_matrix, top_n=10, content_type=None, fields=None):
+    """Returns a list of recommendation dictionaries based on cosine similarity."""
+    
+    if not all([df is not None, title_to_index is not None, cosine_sim_matrix is not None]):
+        logger.error("One or more critical components (df, title_to_index, cosine_sim_matrix) are None!")
+        raise ValueError("DataFrame, title_to_index, and cosine_sim_matrix must not be None.")
+
+    if not isinstance(top_n, int) or top_n <= 0:
+        raise ValueError("top_n must be a positive integer.")
+
+    if not isinstance(title, str) or not title.strip():
+        raise ValueError("Title must be a non-empty string.")
+
+    # Normalize title for lookup
+    title = normalize_title(title)
+
+    # Ensure title exists
+    if title not in title_to_index:
+        logger.warning(f"'{title}' NOT found in title_to_index!")
+        return []
+
+    idx = title_to_index[title]
+    
+    # Get similarity scores
+    try:
+        sim_scores = list(enumerate(cosine_sim_matrix[idx].toarray()[0]))
+    except Exception as e:
+        logger.error(f"Error computing similarity scores for '{title}': {str(e)}")
+        return []
+
+    logger.info(f"🔍 Raw similarity scores for '{title}': {sim_scores[:10]}")
+
+    # Sort by similarity
+    sim_scores = sorted(sim_scores, key=lambda x: x[1], reverse=True)
+    sim_scores = sim_scores[1:]  # Exclude the input title itself
+
+    logger.info(f"🔍 Sorted similarity scores for '{title}': {sim_scores[:10]}")
+
+    # If all similarity scores are 0, issue a warning
+    if all(score[1] == 0 for score in sim_scores):
+        logger.warning(f"⚠️ All similarity scores for '{title}' are 0! No recommendations possible.")
+        return []
+
+    # Build recommendations list
+    recommendations = []
+    for movie_idx, score in sim_scores:
+        if content_type and df['type'].iloc[movie_idx].lower() != content_type.lower():
+            continue
+
+        recommendation = {field: df[field].iloc[movie_idx] for field in (fields or ['title']) if field in df.columns}
+        recommendation['similarity'] = float(score)
+        recommendations.append(recommendation)
+
+        if len(recommendations) >= top_n:
+            break
+
+    logger.info(f"Found {len(recommendations)} recommendations for '{title}'")
+    return recommendations

requirements.txt

@@ -0,0 +1,19 @@
+blinker==1.9.0
+click==8.1.8
+Flask==3.1.0
+Flask-Cors==5.0.0
+gunicorn
+itsdangerous==2.2.0
+Jinja2==3.1.5
+joblib==1.4.2
+MarkupSafe==3.0.2
+numpy==2.2.3
+pandas==2.2.3
+python-dateutil==2.9.0.post0
+pytz==2025.1
+scikit-learn==1.6.1
+scipy==1.15.2
+six==1.17.0
+threadpoolctl==3.5.0
+tzdata==2025.1
+Werkzeug==3.1.3

static/index.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Netflix Recommender</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
+  <link rel="stylesheet" href="/static/styles.css">
+</head>
+<body class="container my-4">
+  <h1 class="text-center">Netflix Content-Based Recommender</h1>
+
+  <!-- Input + Autocomplete -->
+  <div class="mb-3 position-relative">
+    <label for="movie-input" class="form-label">Enter a Movie or Show Title:</label>
+    <input type="text" class="form-control" id="movie-input" placeholder="e.g., 3 Idiots" autocomplete="off" />
+    <div id="autocomplete-list" class="list-group position-absolute w-100 d-none" 
+         style="z-index: 1000; max-height: 200px; overflow-y: auto;"></div>
+  </div>
+
+  <!-- Recommendation Button -->
+  <button id="recommend-btn" class="btn btn-primary">Get Recommendations</button>
+
+  <!-- Recommendation Results with Spinner -->
+  <div id="results" class="mt-4">
+    <div class="spinner-border text-primary d-none" role="status">
+      <span class="visually-hidden">Loading...</span>
+    </div>
+  </div>
+
+  <!-- Visualizations -->
+  <div id="visualizations" class="mt-5"></div>
+
+  <!-- NoScript Message -->
+  <noscript>
+    <p class="text-danger text-center">JavaScript is required to use this site. Please enable JavaScript in your browser settings.</p>
+  </noscript>
+
+  <!-- Scripts (Now with type="module") -->
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+
+  <script type="module">
+    import "/static/js/config.js";
+    import "/static/js/api.js";
+    import "/static/js/ui.js";
+    import "/static/js/autocomplete.js";
+    import "/static/js/visualizations.js";
+    import "/static/js/app.js";
+  </script>
+
+</body>
+</html>

static/js/api.js

@@ -0,0 +1,16 @@
+import { API_ENDPOINT, SEARCH_ENDPOINT, VISUALIZATION_ENDPOINT } from './config.js';
+
+export async function fetchRecommendations(title) {
+  const response = await fetch(`${API_ENDPOINT}?title=${encodeURIComponent(title)}`);
+  return response.json();
+}
+
+export async function fetchAutocomplete(query) {
+  const response = await fetch(`${SEARCH_ENDPOINT}?q=${encodeURIComponent(query)}`);
+  return response.json();
+}
+
+export async function fetchVisualizations() {
+  const response = await fetch(VISUALIZATION_ENDPOINT);
+  return response.json();
+}

static/js/app.js

@@ -0,0 +1,53 @@
+import { fetchRecommendations } from './api.js';
+import { showSpinner, hideSpinner, displayRecommendations, showError } from './ui.js';
+import { handleAutocomplete } from './autocomplete.js';
+import { loadVisualizations } from './visualizations.js';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const recommendBtn = document.getElementById('recommend-btn');
+  const movieInput = document.getElementById('movie-input');
+
+  if (recommendBtn) {
+    recommendBtn.addEventListener('click', getRecommendations);
+  }
+
+  if (movieInput) {
+    movieInput.addEventListener('keyup', event => {
+      console.log("Key pressed:", event.key);
+      if (event.key === 'Enter') {
+        console.log("Enter pressed, fetching recommendations...");
+        getRecommendations();
+      } else {
+        console.log("Triggering autocomplete for:", event.target.value);
+        handleAutocomplete(event);
+      }
+    }); 
+  }
+
+  loadVisualizations();
+});
+
+async function getRecommendations() {
+  const titleInput = document.getElementById('movie-input');
+  const resultsDiv = document.getElementById('results');
+
+  if (!titleInput || !resultsDiv) return;
+  const title = titleInput.value.trim();
+  if (!title) {
+    showError(resultsDiv, 'Please enter a title.');
+    return;
+  }
+
+  showSpinner(resultsDiv);
+  try {
+    const data = await fetchRecommendations(title);
+    hideSpinner(resultsDiv);
+    displayRecommendations(resultsDiv, data, title);
+  } catch (error) {
+    console.error('Error fetching recommendations:', error);
+    hideSpinner(resultsDiv);
+    showError(resultsDiv, 'Error fetching recommendations.');
+  }
+}
+
+export { getRecommendations };

static/js/autocomplete.js

@@ -0,0 +1,70 @@
+import { fetchAutocomplete } from './api.js';
+import { getRecommendations } from "./app.js";
+
+let autocompleteTimer = null;
+
+export function handleAutocomplete(event) {
+  console.log("Autocomplete triggered with:", event.target.value);
+
+  const query = event.target.value.trim();
+  const suggestionBox = document.getElementById('autocomplete-list');
+
+  if (!suggestionBox) {
+    console.error("Autocomplete list element not found in DOM");
+    return;
+  }
+
+  suggestionBox.innerHTML = '';
+  if (query.length < 2) return;
+
+  clearTimeout(autocompleteTimer);
+  autocompleteTimer = setTimeout(async () => {
+    try {
+      console.log("Fetching autocomplete results for:", query);
+      const suggestions = await fetchAutocomplete(query);
+      console.log("Received autocomplete suggestions:", suggestions);
+      showSuggestions(suggestions);
+    } catch (error) {
+      console.error("Error fetching autocomplete suggestions:", error);
+    }
+  }, 300);
+}
+
+
+export function showSuggestions(suggestions) {
+  const suggestionBox = document.getElementById("autocomplete-list");
+  if (!suggestionBox) {
+    console.error("Autocomplete list not found in the DOM");
+    return;
+  }
+
+  console.log("Updating UI with suggestions:", suggestions);
+
+  suggestionBox.innerHTML = ""; // Clear previous suggestions
+
+  if (!suggestions.length) {
+    console.log("No autocomplete suggestions found.");
+    suggestionBox.classList.add("d-none"); // Hide if no results
+    return;
+  }
+
+  suggestionBox.classList.remove("d-none"); // Ensure it's visible
+
+  suggestions.forEach((title) => {
+    const item = document.createElement("div");
+    item.classList.add("list-group-item", "list-group-item-action");
+    item.textContent = title;
+    item.addEventListener("click", () => {
+      const movieInput = document.getElementById("movie-input");
+      if (movieInput) {
+        movieInput.value = title;
+      }
+      suggestionBox.innerHTML = "";
+      suggestionBox.classList.add("d-none");
+      getRecommendations(); // Now correctly imported
+    });
+    suggestionBox.appendChild(item);
+  });
+}
+
+

static/js/config.js

@@ -0,0 +1,3 @@
+export const API_ENDPOINT = "/recommend";
+export const SEARCH_ENDPOINT = "/search";
+export const VISUALIZATION_ENDPOINT = "/visualizations";

static/js/ui.js

@@ -0,0 +1,32 @@
+export function showSpinner(container) {
+    container.innerHTML = '<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>';
+  }
+  
+  export function hideSpinner(container) {
+    const spinner = container.querySelector('.spinner-border');
+    if (spinner) spinner.style.display = 'none';
+  }
+  
+  export function displayRecommendations(resultsDiv, data, title) {
+    if (data.recommendations && data.recommendations.length > 0) {
+      let html = `<h5>${data.message}</h5><ul class="list-group mt-2">`;
+  
+      data.recommendations.forEach(item => {
+        html += `<li class="list-group-item"><strong>${item.title}</strong>`;
+        if (item.similarity) {
+          html += `<span class="badge bg-primary float-end">Similarity: ${(item.similarity * 100).toFixed(2)}%</span>`;
+        }
+        html += `</li>`;
+      });
+  
+      html += '</ul>';
+      resultsDiv.innerHTML = html;
+    } else {
+      resultsDiv.innerHTML = `<p>No recommendations found for '${title}'.</p>`;
+    }
+  }
+  
+  export function showError(container, message) {
+    container.innerHTML = `<p class="text-danger">${message}</p>`;
+  }
+  

static/js/visualizations.js

@@ -0,0 +1,55 @@
+import { fetchVisualizations } from './api.js';
+
+export async function loadVisualizations() {
+  const visDiv = document.getElementById('visualizations');
+  if (!visDiv) return;
+
+  visDiv.innerHTML = '<div class="spinner-border text-primary"></div>';
+
+  try {
+    const data = await fetchVisualizations();
+    visDiv.innerHTML = '';
+    renderVisualizations(data);
+  } catch (error) {
+    console.error('Error loading visualizations:', error);
+    visDiv.innerHTML = '<p class="text-danger">Error loading visualizations.</p>';
+  }
+}
+
+function renderVisualizations(data) {
+  const visDiv = document.getElementById('visualizations');
+  visDiv.innerHTML = `
+    <h5>Data Insights</h5>
+    <div class="row">
+      <div class="col-md-4"><canvas id="genreChart"></canvas></div>
+      <div class="col-md-4"><canvas id="typeChart"></canvas></div>
+      <div class="col-md-4"><canvas id="countryChart"></canvas></div>
+    </div>
+  `;
+
+  new Chart(document.getElementById('genreChart').getContext('2d'), {
+    type: 'bar',
+    data: {
+      labels: Object.keys(data.genre_distribution),
+      datasets: [{ label: 'Number of Titles', data: Object.values(data.genre_distribution), backgroundColor: 'rgba(75, 192, 192, 0.6)' }]
+    },
+    options: { scales: { y: { beginAtZero: true } } }
+  });
+
+  new Chart(document.getElementById('typeChart').getContext('2d'), {
+    type: 'pie',
+    data: {
+      labels: Object.keys(data.type_distribution),
+      datasets: [{ data: Object.values(data.type_distribution), backgroundColor: ['#FF6384', '#36A2EB'] }]
+    }
+  });
+
+  new Chart(document.getElementById('countryChart').getContext('2d'), {
+    type: 'bar',
+    data: {
+      labels: Object.keys(data.top_countries),
+      datasets: [{ label: 'Number of Titles', data: Object.values(data.top_countries), backgroundColor: 'rgba(255, 159, 64, 0.6)' }]
+    },
+    options: { indexAxis: 'y', scales: { x: { beginAtZero: true } } }
+  });
+}

static/styles.css

@@ -0,0 +1,60 @@
+/* General styling */
+body {
+  font-family: Arial, sans-serif;
+  color: #333;
+}
+
+/* Input and Autocomplete */
+#movie-input {
+  margin-top: 0.5em;
+}
+
+#autocomplete-list {
+  z-index: 1000;
+  border: 1px solid #ccc;
+  border-radius: 0.25rem;
+  background-color: #fff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+#autocomplete-list .list-group-item:hover {
+  background-color: #f8f9fa;
+  cursor: pointer;
+}
+
+/* Field Selection Checkboxes */
+.form-check-label {
+  margin-left: 5px;
+}
+
+/* Results */
+#results ul {
+  margin-top: 1em;
+  padding-left: 0;
+}
+
+#results li {
+  margin: 0.5em 0;
+  border-radius: 8px;
+}
+
+#results .spinner-border {
+  margin: 20px auto;
+  display: block;
+}
+
+/* Visualizations */
+#visualizations {
+  margin-top: 2em;
+}
+
+#visualizations canvas {
+  max-height: 300px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  #visualizations .col-md-4 {
+    margin-bottom: 1em;
+  }
+}