added functionality to rate movies

app.py

@@ -5,8 +5,14 @@ import pandas as pd
 # Load the dataset
 data = pd.read_csv('MovieDatabase.csv')
 
-# Initialize the current index
+# Add a default column for ratings if not already present
+for profile in ['moiz', 'udisha', 'musab']:
+    if profile not in data.columns:
+        data[profile] = ""  # Default rating is empty
+
+# Save the current index and selected profile
 current_index = [0]
+current_profile = ["moiz"]  # Default profile
 
 def encode_image(image_path):
     with open(image_path, "rb") as img_file:
@@ -17,30 +23,37 @@ imdb_logo = encode_image("assets/imdblogo.png")
 rotten_logo = encode_image("assets/rotten.png")
 metacritic_logo = encode_image("assets/metacritic.png")
 
-def display_movie(action):
+def display_movie(action, profile):
+    # Update the current profile
+    current_profile[0] = profile
+
     # Update the index based on action
     if action == "next" and current_index[0] < len(data) - 1:
         current_index[0] += 1
     elif action == "prev" and current_index[0] > 0:
         current_index[0] -= 1
-    
+
     # Extract movie details
     movie = data.iloc[current_index[0]]
+    
+    # Get the IMDb ID from the 'id' column
+    movie_id = movie.get('id', 'Unknown')  # Use 'Unknown' if 'id' doesn't exist
+
     details = {
-        "title": f"# {movie['Title']}",
+        "title": f'<a href="https://www.imdb.com/title/{movie_id}/" target="_blank" style="font-size: 36px; text-decoration: none; color: inherit; font-family: Arial, sans-serif;">{movie["Title"]}</a>',
         "poster_placeholder": "🎥 Movie Poster Placeholder 🎥",
         "ratings": f"""
-        <div style="display: flex; gap: 15px; align-items: center;">
-            <div style="text-align: center;">
-                <img src="{imdb_logo}" alt="IMDb" style="width: 40px; height: auto;"/>
+        <div style="display: flex; gap: 15px; align-items: center; text-align: center;">
+            <div>
+                <img src="{imdb_logo}" alt="IMDb" style="width: 30px; height: auto;"/>
                 <p>{movie['IMDb']}</p>
             </div>
-            <div style="text-align: center;">
-                <img src="{rotten_logo}" alt="Rotten Tomatoes" style="width: 40px; height: auto;"/>
+            <div>
+                <img src="{rotten_logo}" alt="Rotten Tomatoes" style="width: 30px; height: auto;"/>
                 <p>{movie['Rotten Tomatoes']}</p>
             </div>
-            <div style="text-align: center;">
-                <img src="{metacritic_logo}" alt="Metascore" style="width: 40px; height: auto;"/>
+            <div>
+                <img src="{metacritic_logo}" alt="Metascore" style="width: 30px; height: auto;"/>
                 <p>{movie['Metascore']}</p>
             </div>
         </div>
@@ -55,37 +68,112 @@ def display_movie(action):
         **Plot:** {movie['Plot']}  
         **Awards:** {movie['Awards']}  
         **Box Office:** {movie['BoxOffice']}
-        """
+        """,
+        "current_rating": f"Your Rating: {movie[profile]}",
+        "index_display": f'<span class="index-display">{current_index[0] + 1}/{len(data)}</span>'  # Class applied for index
     }
-    return details["title"], details["poster_placeholder"], details["ratings"], details["details"]
+    return details["title"], details["poster_placeholder"], details["ratings"], details["details"], details["current_rating"], details["index_display"]
+
+def submit_rating(rating):
+    # Update the rating for the current profile and movie
+    movie_index = current_index[0]
+    profile = current_profile[0]
+    data.at[movie_index, profile] = rating
 
-# Define Gradio interface
-with gr.Blocks() as app:
+    # Save the changes to the CSV
+    data.to_csv('MovieDatabase.csv', index=False)
+
+    return display_movie("stay", profile)
+
+def not_watched():
+    # Mark the movie as "N/W" for the current profile
+    movie_index = current_index[0]
+    profile = current_profile[0]
+    data.at[movie_index, profile] = "N/W"
+
+    # Save the changes to the CSV
+    data.to_csv('MovieDatabase.csv', index=False)
+
+    return display_movie("stay", profile)
+
+# Define Gradio interface with external CSS file
+with gr.Blocks(css_paths="styles.css") as app:
     gr.Markdown("## 🎬 Movie Database Viewer 🎬")
-    
+
+    with gr.Row():
+        # Profile selector and movie index with blank columns in between
+        movie_index_display = gr.Markdown("1/250", elem_id="movie-index")
+
+        # Adding two blank columns
+        blank_column_1 = gr.Column(scale=1, elem_id="blank-column-1")
+        blank_column_2 = gr.Column(scale=1, elem_id="blank-column-2")
+        blank_column_3 = gr.Column(scale=1, elem_id="blank-column-3")
+
+        profile_selector = gr.Dropdown(
+            choices=['moiz', 'udisha', 'musab'], 
+            value='moiz', 
+            label="Profile", 
+            interactive=True
+        )
+
     with gr.Row():
         with gr.Column(scale=1):
             poster = gr.Markdown("🎥 Movie Poster Placeholder 🎥", elem_id="poster")
         with gr.Column(scale=2):
-            title = gr.Markdown("# Title Placeholder", elem_id="title")
+            title = gr.Markdown("Title Placeholder", elem_id="title")
             ratings = gr.HTML("<div style='text-align: center;'>Ratings Placeholder</div>", elem_id="ratings")
             movie_details = gr.Markdown("Details will appear here.", elem_id="details")
+            user_rating = gr.Markdown("Your Rating: 0", elem_id="current-rating")
+
+    with gr.Row():
+        # Slider in its own row
+        rating_slider = gr.Slider(0, 10, step=0.25, label="Rate this movie:", elem_id="rating-slider", interactive=True, scale=2)
+
+    with gr.Row():
+       
+        not_watched_button = gr.Button("🚫 Not Watched")
+        
+        blank_column_1 = gr.Column(scale=1, elem_id="blank-column-1")
+
+        
+        submit_button = gr.Button("✅ Submit Rating")
 
     with gr.Row():
-        prev_button = gr.Button("⬅️ Previous")
-        next_button = gr.Button("Next ➡️")
+        # Two blank columns between previous and next buttons
+        prev_button = gr.Button("⬅️ Previous", scale=1)
+        
+        blank_column_1 = gr.Column(scale=2, elem_id="blank-column-1")
+        blank_column_2 = gr.Column(scale=2, elem_id="blank-column-2")
+
+        next_button = gr.Button("Next ➡️", scale=1)
 
     # Interactivity for buttons
+    profile_selector.change(
+        display_movie,
+        inputs=[gr.Text(value="stay", visible=False), profile_selector],
+        outputs=[title, poster, ratings, movie_details, user_rating, movie_index_display]
+    )
+
     prev_button.click(
         display_movie,
-        inputs=gr.Text(value="prev", visible=False),
-        outputs=[title, poster, ratings, movie_details]
+        inputs=[gr.Text(value="prev", visible=False), profile_selector],
+        outputs=[title, poster, ratings, movie_details, user_rating, movie_index_display]
     )
     next_button.click(
         display_movie,
-        inputs=gr.Text(value="next", visible=False),
-        outputs=[title, poster, ratings, movie_details]
+        inputs=[gr.Text(value="next", visible=False), profile_selector],
+        outputs=[title, poster, ratings, movie_details, user_rating, movie_index_display]
+    )
+
+    submit_button.click(
+        submit_rating,
+        inputs=rating_slider,
+        outputs=[title, poster, ratings, movie_details, user_rating, movie_index_display]
+    )
+
+    not_watched_button.click(
+        not_watched,
+        outputs=[title, poster, ratings, movie_details, user_rating, movie_index_display]
     )
 
-# Launch the app
 app.launch()

styles.css

@@ -1,4 +1,27 @@
-#custom-slider .gr-slider {
-    width: 200px; /* Adjust the width to your preference */
-    margin: 0 auto; /* Center the slider */
+.index-display {
+    font-size: 18px;
+    color: white;
+    text-align: right;
+}
+
+.button-container .gr-button {
+    height: 250px;
+}
+
+.slider-container {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.slider-container .gr-slider {
+    flex: 1;
+}
+
+.gr-dropdown {
+    width: 100px;
+}
+
+.blank-column {
+    flex: 1;
 }