File size: 5,019 Bytes
5b1d214
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
import gradio as gr
from recommend import get_genres_movies_for_user, test_users

label_value_mapping = {f"User {user_id}": user_id for user_id in test_users}

# Define a function to generate colors based on genre
def get_genre_color(movie_genres, top_genres):
    
    genre_colors = {
        'Action': '#F44336',        # Red: Energetic and intense
        'Adventure': '#FF5722',     # Deep Orange: Exciting and daring
        'Thriller': '#9C27B0',      # Purple: Suspenseful and mysterious
        'Animation': '#FFEB3B',     # Yellow: Bright and cheerful
        'Children': '#4CAF50',      # Green: Fresh, youthful, and playful
        'Fantasy': '#673AB7',       # Deep Purple: Magical and imaginative
        'Comedy': '#FFC107',        # Amber: Lighthearted and funny
        'Musical': '#E91E63',       # Pink: Romantic and artistic
        'Romance': '#FF4081',       # Light Pink: Love and tenderness
        'Crime': '#607D8B',         # Blue Grey: Gritty and dark
        'Mystery': '#8BC34A',       # Lime Green: Curious and investigative
        'Film-Noir': '#212121',     # Black: Dark and moody
        'Documentary': '#009688',   # Teal: Informative and grounded
        'Drama': '#3F51B5',         # Blue: Serious and emotional
        'Horror': '#B71C1C',        # Dark Red: Fearful and intense
        'Sci-Fi': '#00BCD4',        # Cyan: Futuristic and techy
        'War': '#795548',           # Brown: Rugged and historical
        'Western': '#D7A87E',       # Tan: Rustic and wild
    }

    # Default color if no genre matches
    default_color = '#9E9E9E'

    if not top_genres:
        return genre_colors.get(movie_genres[0], default_color)

    # Check for the first genre in movie_genres that is also in top_genres
    for genre in movie_genres:
        if genre in top_genres and genre in genre_colors:
            return genre_colors[genre]

    # Check for the first valid genre in movie_genres that has a color
    for genre in movie_genres:
        if genre in genre_colors:
            return genre_colors[genre]

    # Return the default color if no matches
    return default_color


def get_movie_recommendations(user_id):
    # Fetch the top genres and recommended movies based on user_id
    user_id = label_value_mapping[user_id]
    top_genres, movies = get_genres_movies_for_user(user_id)
    
    genre_cards = "".join([
        f"<div class='card' style='background-color:{get_genre_color([genre], None)};'>{genre}</div>" 
        for genre in top_genres
    ])
    
    movie_cards = "".join([
        f"<div class='card movie-card' style='background-color:{get_genre_color(movie['genres'], top_genres)};'>"
            f"<strong>{movie['title']}</strong><br><span>{', '.join(movie['genres'])}</span>"
        "</div>"
        for movie in movies
    ])
    
    return genre_cards, movie_cards

# Define the Gradio interface
with gr.Blocks() as demo:
    gr.HTML("""

        <style>

            .gradio-container {

                background-color: #FAFAFA;

                font-family: 'Arial', sans-serif;

                color: #333;

            }

            #center-title {

                text-align: center;

                font-size: 36px;

                margin-bottom: 20px;

                color: #2C3E50;

            }

            h1 {

                font-size: 36px;

                text-align: center;

                margin-bottom: 20px;

                color: #2C3E50;

            }

            h2 {

                font-size: 16px;

                margin-bottom: 10px;

                color: #2C3E50;

                text-align: center;

            }

            .card {

                border: 1px solid #BBDEFB;

                border-radius: 8px;

                padding: 10px 15px;

                margin: 5px;

                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

                text-align: center;

                font-size: 16px;

                color: #FFFFFF;

                width: 180px;

                display: inline-block;

            }

            .movie-card {

                

            }

        </style>

    """)
    with gr.Row():
        gr.Markdown("### Movie Recommendation System", elem_id="center-title")

    with gr.Row():
        user_id_input = gr.Dropdown(
        label="Select a User",
        choices=list(label_value_mapping.keys()),
        value=list(label_value_mapping.keys())[0],  # Default value
        interactive=True
    )
    
    with gr.Row():
        with gr.Column(scale=1):
            gr.HTML("<h2>Top Genres</h2>")
            genres_output = gr.HTML(label="Top Genres")
        with gr.Column(scale=1):
            gr.HTML("<h2>Recommended Movies</h2>")
            movies_output = gr.HTML(label="Recommended Movies")
    
    user_id_input.change(get_movie_recommendations, inputs=user_id_input, outputs=[genres_output, movies_output])

demo.launch()