Update app.py

app.py

@@ -15,6 +15,82 @@ st.set_page_config(
     layout="centered"
 )
 
+# Custom CSS for vibrant NBA sidebar styling
+st.markdown(
+    """
+    <style>
+    body {
+        background: linear-gradient(to bottom, #0033a0, #ed174c); /* NBA team colors gradient */
+        font-family: 'Trebuchet MS', sans-serif;
+        margin: 0;
+        padding: 0;
+        color: white; /* Set text color to white */
+    }
+    .sidebar .sidebar-content {
+        background: linear-gradient(to bottom, #4B0082, #1E90FF); /* Purple to blue gradient */
+        border-radius: 10px;
+        padding: 10px;
+        color: #ffffff; /* Set sidebar text color to white */
+    }
+    .stSidebar h2 {
+        color: #ffffff;
+        text-align: center;
+        font-size: 20px;
+        font-weight: bold;
+        text-shadow: 2px 2px #000000;
+    }
+    .stButton > button {
+        background-color: #ffcc00; /* Bold yellow */
+        color: #0033a0; /* Button text color */
+        border: none;
+        border-radius: 5px;
+        padding: 10px 15px;
+        font-size: 16px;
+        transition: background-color 0.3s ease;
+    }
+    .stButton > button:hover {
+        background-color: #ffc107; /* Brighter yellow */
+        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
+    }
+    .stMarkdown h1, .stMarkdown h2, .stMarkdown h3 {
+        color: #ffffff; /* Set headings color to white */
+        text-shadow: 2px 2px #000000; /* Add shadow for better visibility */
+    }
+    .block-container {
+        border-radius: 10px;
+        padding: 20px;
+        background-color: rgba(0, 0, 0, 0.8); /* Dark semi-transparent background */
+        color: #ffffff; /* Ensure text inside the container is white */
+    }
+    .dataframe {
+        background-color: rgba(255, 255, 255, 0.1); /* Transparent table background */
+        color: #ffffff; /* Table text color */
+        border-radius: 10px;
+    }
+    .stPlotlyChart {
+        background-color: rgba(0, 0, 0, 0.8); /* Match dark theme */
+        padding: 10px;
+        border-radius: 10px;
+        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
+    }
+    .styled-table {
+        width: 100%;
+        border-collapse: collapse;
+        margin: 25px 0;
+        font-size: 18px;
+        text-align: left;
+        border-radius: 5px 5px 0 0;
+        overflow: hidden;
+        color: #ffffff; /* Table text color */
+    }
+    .styled-table th, .styled-table td {
+        padding: 12px 15px;
+    }
+    </style>
+    """,
+    unsafe_allow_html=True
+)
+
 
 team_logo_paths = {
     "Cleveland Cavaliers": "Clevelan-Cavaliers-logo-2022.png",
@@ -142,8 +218,16 @@ def main():
     player_data = load_player_data()
     rf_model = load_rf_model()
 
-    # Sidebar inputs
-    st.sidebar.header("Player and Injury Input")
+
+    st.sidebar.markdown(
+        """
+        <div style="padding: 10px; background: linear-gradient(to right, #6a11cb, #2575fc); color: white; border-radius: 10px;">
+        <h3>Player Details</h3>
+        </div>
+        """,
+        unsafe_allow_html=True
+    )
+
 
     # Dropdown for player selection
     player_list = sorted(player_data['player_name'].dropna().unique())
@@ -206,12 +290,36 @@ def main():
                 input_data = input_data.reindex(columns=rf_model.feature_names_in_, fill_value=0)
 
                 # Predict and display results
-                if st.sidebar.button("Predict"):
+                # Predict and display results
+                if st.sidebar.button("Predict 🔮"):
                     predictions = rf_model.predict(input_data)
-                    prediction_columns = ["Predicted Change in PTS", "Predicted Change in REB", "Predicted Change inAST"]
+                    prediction_columns = ["Predicted Change in PTS", "Predicted Change in REB", "Predicted Change in AST"]
                     st.subheader("Predicted Post-Injury Performance")
                     st.write("Based on the inputs, here are the predicted metrics:")
-                    st.table(pd.DataFrame(predictions, columns=prediction_columns))
+                    styled_table = pd.DataFrame(predictions, columns=prediction_columns).style.set_table_attributes('class="styled-table"')
+                    st.write(styled_table.to_html(), unsafe_allow_html=True)
+
+                    # Plot predictions
+                    prediction_df = pd.DataFrame(predictions, columns=prediction_columns)
+                    fig = go.Figure()
+
+                    for col in prediction_columns:
+                        fig.add_trace(go.Bar(
+                            x=[col],
+                            y=prediction_df[col],
+                            name=col,
+                            marker=dict(color=px.colors.qualitative.Plotly[prediction_columns.index(col)])
+                        ))
+
+                    fig.update_layout(
+                        title="Predicted Performance Changes",
+                        xaxis_title="Metrics",
+                        yaxis_title="Change Value",
+                        template="plotly_dark",
+                        showlegend=True
+                    )
+
+                    st.plotly_chart(fig)
             except FileNotFoundError:
                 st.error("Model file not found.")
             except ValueError as e: