app.py

import base64
import gradio as gr
import pandas as pd

# Load the dataset
data = pd.read_csv('MovieDatabase.csv')

# Initialize the current index
current_index = [0]

def encode_image(image_path):
    with open(image_path, "rb") as img_file:
        return f"data:image/png;base64,{base64.b64encode(img_file.read()).decode('utf-8')}"

# Encode images as base64
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):
    # 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]]
    details = {
        "title": f"# {movie['Title']}",
        "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;"/>
                <p>{movie['IMDb']}</p>
            </div>
            <div style="text-align: center;">
                <img src="{rotten_logo}" alt="Rotten Tomatoes" style="width: 40px; height: auto;"/>
                <p>{movie['Rotten Tomatoes']}</p>
            </div>
            <div style="text-align: center;">
                <img src="{metacritic_logo}" alt="Metascore" style="width: 40px; height: auto;"/>
                <p>{movie['Metascore']}</p>
            </div>
        </div>
        """,
        "details": f"""
        **Year:** {movie['Year']}  
        **Rated:** {movie['Rated']}  
        **Runtime:** {movie['Runtime']}  
        **Genre:** {movie['Genre1']}, {movie['Genre2']}, {movie['Genre3']}  
        **Director:** {movie['Director']}  
        **Writer:** {movie['Writer']}  
        **Plot:** {movie['Plot']}  
        **Awards:** {movie['Awards']}  
        **Box Office:** {movie['BoxOffice']}
        """
    }
    return details["title"], details["poster_placeholder"], details["ratings"], details["details"]

# Define Gradio interface
with gr.Blocks() as app:
    gr.Markdown("## 🎬 Movie Database Viewer 🎬")
    
    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")
            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")

    with gr.Row():
        prev_button = gr.Button("⬅️ Previous")
        next_button = gr.Button("Next ➡️")

    # Interactivity for buttons
    prev_button.click(
        display_movie,
        inputs=gr.Text(value="prev", visible=False),
        outputs=[title, poster, ratings, movie_details]
    )
    next_button.click(
        display_movie,
        inputs=gr.Text(value="next", visible=False),
        outputs=[title, poster, ratings, movie_details]
    )

# Launch the app
app.launch()