Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,88 +1,84 @@
-import React, { useState, useEffect } from "react";
-import { Card, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Slider } from "@/components/ui/slider";
-import moviesData from "./movies.csv"; // Assume a CSV loader or API exposes this
+import streamlit as st
+import pandas as pd
+import numpy as np
+import random
+import os
 
-export default function MovieRecommender() {
-  const [maxQuestions, setMaxQuestions] = useState(5);
-  const [questionIndex, setQuestionIndex] = useState(0);
-  const [ratedCount, setRatedCount] = useState(0);
-  const [ratings, setRatings] = useState([]);
-  const [shuffledMovies, setShuffledMovies] = useState([]);
-  const [submitted, setSubmitted] = useState(false);
+# Load movie data
+BASE_DIR = os.path.dirname(__file__)
+MOVIES_PATH = os.path.join(BASE_DIR, "movies.csv")
 
-  useEffect(() => {
-    const allTitles = moviesData.map((m) => m.title);
-    const shuffled = [...allTitles].sort(() => 0.5 - Math.random());
-    setShuffledMovies(shuffled);
-  }, []);
+@st.cache_data
+def load_movies():
+    df = pd.read_csv(MOVIES_PATH)
+    return df["title"].dropna().unique().tolist()
 
-  const handleRating = (choice) => {
-    if (choice !== "skip") {
-      setRatings([...ratings, { movie: shuffledMovies[questionIndex], rating: choice }]);
-      setRatedCount(ratedCount + 1);
-    }
+# Initialize session state
+if "movies" not in st.session_state:
+    st.session_state.movies = []
+    st.session_state.queue = []
+    st.session_state.index = 0
+    st.session_state.rated = []
+    st.session_state.skipped = 0
+    st.session_state.max_questions = 5
+    st.session_state.finished = False
 
-    if ((choice !== "skip" && ratedCount + 1 >= maxQuestions) || questionIndex + 1 >= shuffledMovies.length) {
-      setSubmitted(true);
-    } else {
-      setQuestionIndex(questionIndex + 1);
-    }
-  };
+st.markdown("""
+    <style>
+        body {
+            background-color: #0d1b2a;
+            color: white;
+        }
+        .stSlider > div {
+            background-color: #1b263b;
+        }
+    </style>
+""", unsafe_allow_html=True)
 
-  const recommendations = shuffledMovies.filter(
-    (movie) => !ratings.map((r) => r.movie).includes(movie)
-  ).slice(0, 10).map((title) => ({ title, score: (Math.random() * 100).toFixed(1) }));
+st.title("🎬 Midnight Movie Recommender")
+st.write("Rate a few movies to get personalized recommendations")
 
-  return (
-    <div className="min-h-screen bg-[#0d1b2a] text-white flex flex-col items-center justify-center px-4 py-10">
-      <h1 className="text-3xl font-bold mb-8">🎬 Movie Recommender</h1>
+if not st.session_state.movies:
+    movie_titles = load_movies()
+    random.shuffle(movie_titles)
+    st.session_state.movies = movie_titles
 
-      {!submitted && ratings.length === 0 && (
-        <div className="w-full max-w-md">
-          <p className="mb-4">How many movies would you like to rate?</p>
-          <Slider
-            defaultValue={[5]}
-            min={1}
-            max={15}
-            step={1}
-            onValueChange={(val) => setMaxQuestions(val[0])}
-          />
-          <div className="mt-2 text-center">Selected: {maxQuestions}</div>
-        </div>
-      )}
+if not st.session_state.queue:
+    with st.container():
+        st.subheader("How many movies do you want to rate?")
+        st.session_state.max_questions = st.slider("Select number of movies", 1, 15, 5)
+        if st.button("Start Rating"):
+            st.session_state.queue = st.session_state.movies.copy()
+            st.experimental_rerun()
+else:
+    if st.session_state.finished or st.session_state.index >= len(st.session_state.queue):
+        st.subheader("🍿 Top 10 Recommendations")
+        st.write("Based on your preferences, we suggest:")
+        remaining = [m for m in st.session_state.movies if m not in [r["movie"] for r in st.session_state.rated]]
+        recommendations = random.sample(remaining, min(10, len(remaining)))
+        for i, movie in enumerate(recommendations, 1):
+            score = round(random.uniform(75, 100), 1)
+            st.markdown(f"**#{i}. {movie}** — Likelihood: `{score}%`")
+    else:
+        movie = st.session_state.queue[st.session_state.index]
+        card_number = len(st.session_state.rated) + 1
 
-      {!submitted && ratings.length < maxQuestions && shuffledMovies.length > 0 && (
-        <Card className="mt-10 w-full max-w-xl shadow-2xl transition-transform animate-in fade-in zoom-in rounded-2xl bg-[#1b263b]">
-          <CardContent className="p-6 text-center">
-            <div className="flex justify-between mb-4">
-              <span className="text-sm text-gray-300">Rate the following movie</span>
-              <span className="text-sm text-gray-300">#{ratedCount + 1}</span>
-            </div>
-            <h2 className="text-2xl font-semibold mb-6">{shuffledMovies[questionIndex]}</h2>
-            <div className="flex justify-around gap-4">
-              <Button onClick={() => handleRating("like")} className="bg-green-600 hover:bg-green-700">👍 Like</Button>
-              <Button onClick={() => handleRating("dislike")} className="bg-red-600 hover:bg-red-700">👎 Dislike</Button>
-              <Button onClick={() => handleRating("skip")} className="bg-gray-500 hover:bg-gray-600">⏭ Didn't Watch</Button>
-            </div>
-          </CardContent>
-        </Card>
-      )}
+        st.markdown(f"### 🎞️ Movie #{card_number} of {st.session_state.max_questions}")
+        st.markdown(f"## **{movie}**")
 
-      {submitted && (
-        <div className="mt-10 w-full max-w-2xl text-center">
-          <h2 className="text-2xl font-semibold mb-4">🎯 Top 10 Recommendations</h2>
-          <ul className="space-y-2">
-            {recommendations.map((rec, i) => (
-              <li key={i} className="bg-[#1e2a3c] rounded-lg px-4 py-3 flex justify-between items-center shadow">
-                <span>{rec.title}</span>
-                <span className="text-sm text-gray-300">Likelihood: {rec.score}%</span>
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
-    </div>
-  );
-}
+        col1, col2, col3 = st.columns([1, 1, 1])
+        with col1:
+            if st.button("👍 Like"):
+                st.session_state.rated.append({"movie": movie, "rating": "like"})
+                st.session_state.index += 1
+        with col2:
+            if st.button("👎 Dislike"):
+                st.session_state.rated.append({"movie": movie, "rating": "dislike"})
+                st.session_state.index += 1
+        with col3:
+            if st.button("⏭ Didn't Watch"):
+                st.session_state.index += 1
+
+        if len(st.session_state.rated) >= st.session_state.max_questions:
+            st.session_state.finished = True
+            st.experimental_rerun()