Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,48 +1,88 @@
-import streamlit as st
-import pandas as pd
-import joblib
-import os
-
-# Define file paths (assuming files are in the same folder as this script)
-BASE_DIR = os.path.dirname(__file__)
-MOVIES_PATH = os.path.join(BASE_DIR, "movies.csv")
-ENCODINGS_PATH = os.path.join(BASE_DIR, "encodings.pkl")
-
-@st.cache_data
-def load_assets():
-    if not os.path.exists(MOVIES_PATH):
-        st.error("❌ movies.csv not found.")
-        st.stop()
-    if not os.path.exists(ENCODINGS_PATH):
-        st.error("❌ encodings.pkl not found.")
-        st.stop()
-    try:
-        df_movies = pd.read_csv(MOVIES_PATH)
-        user_map, movie_map = joblib.load(ENCODINGS_PATH)
-        return df_movies, user_map, movie_map
-    except Exception as e:
-        st.error(f"❌ Failed to load assets:\n\n{e}")
-        st.stop()
-
-# Load only static data
-movies_df, user2idx, movie2idx = load_assets()
-
-# UI
-st.title("🎬 TensorFlow Movie Recommender (Mock Version)")
-st.write("This is a dummy version of the app without model logic. Select movies to simulate recommendations.")
-
-# Movie title selection
-movie_titles = movies_df.set_index("movieId")["title"].to_dict()
-movie_choices = [movie_titles[mid] for mid in movie2idx if mid in movie_titles]
-selected_titles = st.multiselect("🎞️ Liked movies", sorted(movie_choices))
-
-# Simulate recommendations
-if st.button("🎯 Get Recommendations (Dummy)"):
-    if not selected_titles:
-        st.warning("Please select at least one movie.")
-    else:
-        st.subheader("🍿 Mock Recommendations")
-        st.write("Here are some movies we 'think' you might like... 😉")
-        mock_recommendations = sorted(set(movie_choices) - set(selected_titles))[:10]
-        for i, title in enumerate(mock_recommendations, 1):
-            st.write(f"**#{i}** — {title}")
+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
+
+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);
+
+  useEffect(() => {
+    const allTitles = moviesData.map((m) => m.title);
+    const shuffled = [...allTitles].sort(() => 0.5 - Math.random());
+    setShuffledMovies(shuffled);
+  }, []);
+
+  const handleRating = (choice) => {
+    if (choice !== "skip") {
+      setRatings([...ratings, { movie: shuffledMovies[questionIndex], rating: choice }]);
+      setRatedCount(ratedCount + 1);
+    }
+
+    if ((choice !== "skip" && ratedCount + 1 >= maxQuestions) || questionIndex + 1 >= shuffledMovies.length) {
+      setSubmitted(true);
+    } else {
+      setQuestionIndex(questionIndex + 1);
+    }
+  };
+
+  const recommendations = shuffledMovies.filter(
+    (movie) => !ratings.map((r) => r.movie).includes(movie)
+  ).slice(0, 10).map((title) => ({ title, score: (Math.random() * 100).toFixed(1) }));
+
+  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>
+
+      {!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>
+      )}
+
+      {!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>
+      )}
+
+      {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>
+  );
+}