Upload 4 files

app.py

@@ -0,0 +1,237 @@
+import dash
+from dash import html, dcc, Output, Input, State
+import pickle
+import pandas as pd
+import numpy as np
+import re
+
+# Load preprocessed data
+with open('processed_data.pkl', 'rb') as f:
+    data = pickle.load(f)
+
+df = data['df']
+similarity_matrix = data['similarity_matrix']
+
+# Clean genres (remove empty)
+all_genres = sorted({genre for genres in df['genres'] for genre in genres if genre.strip() != ''})
+genre_tabs = [{'label': genre, 'value': genre} for genre in all_genres]
+genre_tabs.insert(0, {'label': 'Most Popular', 'value': '__popular__'})
+
+# Helper for recommendations
+def extract_series(name):
+    return re.split(r'[:\-]', name)[0].strip().lower()
+
+def get_recommendations(game_id):
+    idx = df[df['id'] == game_id].index[0]
+    sim_scores = list(enumerate(similarity_matrix[idx]))
+    sim_scores = sorted(sim_scores, key=lambda x: x[1], reverse=True)[1:]
+
+    selected = []
+    seen_series = set()
+
+    for i, score in sim_scores:
+        name = df.iloc[i]['name']
+        series = extract_series(name)
+        if series not in seen_series:
+            selected.append({
+                'id': int(df.iloc[i]['id']),
+                'name': name,
+                'image': df.iloc[i]['background_image'],
+                'rating': df.iloc[i]['rating'],
+                'platforms': df.iloc[i]['platforms'],
+            })
+            seen_series.add(series)
+        if len(selected) >= 5:
+            break
+
+    return selected
+
+app = dash.Dash(__name__)
+server = app.server
+app.title = "Game Recommender 🎮"
+
+# Layout
+app.layout = html.Div(className="app-background", children=[
+    html.Div(className="layout-container", children=[
+
+        html.Div(className="sidebar-panel", children=[
+            html.H2("Discover Games", className="sidebar-title"),
+            dcc.Tabs(
+                id='genre-tabs',
+                value='__popular__',
+                vertical=True,
+                children=[
+                    dcc.Tab(label=tab['label'], value=tab['value'],
+                            className="tab", selected_className="selected-tab")
+                    for tab in genre_tabs
+                ],
+                className="tabs-container"
+            )
+        ]),
+
+        html.Div(className="main-container", children=[
+            html.H1("🎮 Game Recommender", className="fancy-title"),
+
+            dcc.Dropdown(
+                id='game-dropdown',
+                options=[{'label': row['name'], 'value': row['id']} for _, row in df.iterrows()],
+                placeholder="Search for a game",
+                className="custom-dropdown"
+            ),
+
+            dcc.Store(id='mode-store', data='discovery'),
+            dcc.Store(id='cards-data-store'),
+            dcc.Store(id='recommendations-data-store'),
+
+            html.Div(id='search-output'),
+            html.Div(id='grid-display'),
+        ])
+    ])
+])
+
+# 1️⃣ Render grid and store grid card metadata
+@app.callback(
+    [Output('grid-display', 'children'),
+     Output('cards-data-store', 'data')],
+    [Input('genre-tabs', 'value'),
+     Input('mode-store', 'data')]
+)
+def render_grid(selected_tab, mode):
+    if mode != 'discovery':
+        return "", dash.no_update
+
+    if selected_tab == '__popular__':
+        filtered = df.sort_values(by='rating', ascending=False).head(20)
+    else:
+        filtered = df[df['genres'].apply(lambda genres: selected_tab in genres)].sort_values(by='rating', ascending=False).head(20)
+
+    cards_data = []
+    grid_cards = []
+
+    for idx, row in enumerate(filtered.itertuples()):
+        card_info = {
+            'id': row.id,
+            'name': row.name,
+            'image': row.background_image,
+            'rating': row.rating
+        }
+        cards_data.append(card_info)
+
+        grid_cards.append(
+            html.Div([
+                html.Img(src=row.background_image, className="rec-image"),
+                html.Div([
+                    html.H4(row.name, className="rec-title"),
+                    html.P(f"{row.rating} ⭐", className="rec-rating")
+                ], className="rec-info")
+            ],
+            className="rec-card",
+            n_clicks=0,
+            id={'type': 'grid-card', 'index': idx})
+        )
+
+    return [
+        html.H3("Games", className="subtitle"),
+        html.Div(grid_cards, className="recommendations-container")
+    ], cards_data
+
+# 2️⃣ Render search output and store recommendation metadata
+@app.callback(
+    [Output('search-output', 'children'),
+     Output('recommendations-data-store', 'data')],
+    [Input('game-dropdown', 'value'),
+     Input('mode-store', 'data')]
+)
+def render_search(selected_id, mode):
+    if mode != 'search' or selected_id is None:
+        return "", dash.no_update
+
+    row = df[df['id'] == selected_id].iloc[0]
+    platforms_display = row['platforms'][:4]
+    platforms_hidden = ', '.join(row['platforms'])
+
+    main_game = html.Div([
+        html.Div([
+            html.Img(src=row['background_image'], className='main-image'),
+            html.Div([
+                html.H2(row['name'], className='main-title'),
+                html.P(f"Rating: {row['rating']} ⭐"),
+                html.P(f"Metacritic: {row['metacritic']} 🎯"),
+                html.P(f"Genres: {', '.join(row['genres'])}"),
+                html.P("Platforms:"),
+                html.Div([
+                    html.Span(', '.join(platforms_display), title=platforms_hidden, className="platform-text")
+                ])
+            ], className="main-details")
+        ], className="main-card-inner")
+    ], className="main-card")
+
+    recs = get_recommendations(selected_id)
+    rec_cards = []
+    rec_data = []
+
+    for idx, rec in enumerate(recs):
+        rec_cards.append(
+            html.Div([
+                html.Img(src=rec['image'], className="rec-image"),
+                html.Div([
+                    html.H4(rec['name'], className="rec-title"),
+                    html.P(f"{rec['rating']} ⭐", className="rec-rating")
+                ], className="rec-info")
+            ], className="rec-card",
+               n_clicks=0,
+               id={'type': 'rec-card', 'index': idx})
+        )
+        rec_data.append({'id': rec['id'], 'name': rec['name']})
+
+    return html.Div([
+        main_game,
+        html.H3("You May Also Like:", className="subtitle"),
+        html.Div(rec_cards, className="recommendations-container")
+    ]), rec_data
+
+# 3️⃣ Unified callback handling all clicks + dropdown + tabs
+@app.callback(
+    [Output('game-dropdown', 'value'),
+     Output('mode-store', 'data')],
+    [Input('game-dropdown', 'value'),
+     Input('genre-tabs', 'value'),
+     Input({'type': 'grid-card', 'index': dash.ALL}, 'n_clicks'),
+     Input({'type': 'rec-card', 'index': dash.ALL}, 'n_clicks')],
+    [State('cards-data-store', 'data'),
+     State('recommendations-data-store', 'data')]
+)
+def handle_inputs(dropdown_value, tab_value, grid_clicks, rec_clicks, cards_data, rec_data):
+    ctx = dash.callback_context
+
+    if not ctx.triggered:
+        raise dash.exceptions.PreventUpdate
+
+    triggered = ctx.triggered[0]['prop_id']
+
+    # Handle grid card click
+    if "grid-card" in triggered:
+        for i, clicks in enumerate(grid_clicks):
+            if clicks and clicks > 0:
+                clicked_game_id = cards_data[i]['id']
+                return clicked_game_id, 'search'
+
+    # Handle recommendation card click
+    if "rec-card" in triggered:
+        for i, clicks in enumerate(rec_clicks):
+            if clicks and clicks > 0:
+                clicked_game_id = rec_data[i]['id']
+                return clicked_game_id, 'search'
+
+    # Handle search dropdown
+    if 'game-dropdown' in triggered and dropdown_value is not None:
+        return dropdown_value, 'search'
+
+    # Handle tab change
+    if 'genre-tabs' in triggered:
+        return dash.no_update, 'discovery'
+
+    return dash.no_update, dash.no_update
+
+if __name__ == '__main__':
+    app.run(debug=True)

assets/style.css

@@ -0,0 +1,190 @@
+body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Segoe UI', sans-serif;
+    color: #00E0FF;
+    background: linear-gradient(135deg, #0D0D0D 10%, #3A3A3A 100%);
+    background-attachment: fixed;
+}
+
+.layout-container {
+    display: flex;
+    flex-direction: row;
+}
+
+.sidebar-panel {
+    width: 300px;
+    background-color: #1A1A1A;
+    padding: 20px;
+    border-right: 3px solid #00E0FF;
+    height: 100vh;
+    position: fixed;
+    left: 0;
+    top: 0;
+    overflow-y: auto;
+}
+
+.sidebar-title {
+    text-align: center;
+    font-size: 26px;
+    margin-bottom: 30px;
+    color: #FF007F;
+}
+
+.tabs-container {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.tab {
+    background-color: #252525;
+    color: #9D00FF;
+    font-weight: bold;
+    padding: 15px;
+    font-size: 18px;
+    border: 2px solid #9D00FF;
+    border-radius: 10px;
+    cursor: pointer;
+    text-align: center;
+}
+.tab:hover {
+    background-color: #3A3A3A;
+}
+.selected-tab {
+    background-color: #9D00FF !important;
+    color: #00E0FF !important;
+}
+
+.main-container {
+    margin-left: 500px;
+    padding: 30px;
+    max-width: 1100px;
+}
+
+.fancy-title {
+    text-align: center;
+    font-size: 50px;
+    margin-bottom: 40px;
+    background: linear-gradient(45deg, #9D00FF, #FF007F);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-shadow: 2px 2px 8px rgba(157, 0, 255, 0.8);
+}
+
+.custom-dropdown .Select-control {
+    background-color: #3A3A3A !important;
+    border: 2px solid #00E0FF !important;
+    color: #00E0FF !important;
+}
+.custom-dropdown input {
+    color: #00E0FF !important;
+    font-weight: bold !important;
+}
+
+/* Main search card (top game) */
+.main-card {
+    background-color: #252525;
+    border: 3px solid #9D00FF;
+    border-radius: 20px;
+    padding: 20px;
+    margin-top: 40px;
+    box-shadow: 0 8px 20px rgba(0, 224, 255, 0.4);
+    transition: transform 0.3s ease;
+}
+.main-card:hover {
+    transform: translateY(-8px);
+}
+.main-card-inner {
+    display: flex;
+    align-items: center;
+}
+.main-image {
+    width: 720px;
+    height: 340px;
+    border-radius: 15px;
+    box-shadow: 0 4px 10px rgba(255, 0, 127, 0.6);
+}
+.main-details {
+    padding-left: 30px;
+}
+.main-title {
+    color: #FF007F;
+    font-size: 28px;
+    margin-bottom: 15px;
+}
+
+.subtitle {
+    text-align: center;
+    font-size: 28px;
+    margin-top: 60px;
+    margin-bottom: 20px;
+    color: #9D00FF;
+}
+
+/* Cards container (for both grid and recommendations) */
+.recommendations-container {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 20px;
+}
+
+.rec-card {
+    width: 200px;
+    height: 340px;
+    background-color: #353535;
+    border: 2px solid #9D00FF;
+    border-radius: 15px;
+    overflow: hidden;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    box-shadow: 0 4px 10px rgba(0, 224, 255, 0.5);
+    cursor: pointer;
+}
+.rec-card:hover {
+    transform: translateY(-12px);
+    box-shadow: 0 8px 16px rgba(0, 224, 255, 0.6);
+}
+.rec-image {
+    width: 100%;
+    height: 220px;
+    object-fit: cover;
+}
+.rec-info {
+    padding: 10px;
+}
+.rec-title {
+    font-size: 16px;
+    color: #FF007F;
+    margin-bottom: 5px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: center;
+}
+.rec-rating {
+    font-size: 14px;
+    text-align: center;
+    margin-top: 10px;
+    color: #00E0FF;
+}
+
+.platform-text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 400px;
+    display: inline-block;
+}
+
+/* Mobile Responsive Layout */
+@media (max-width: 768px) {
+    .main-card-inner {
+        flex-direction: column;
+        align-items: center;
+    }
+    .main-details {
+        padding-left: 0;
+        margin-top: 20px;
+    }
+}

requirements.txt

@@ -0,0 +1,4 @@
+requests
+pandas
+scikit-learn
+dash