Style prediction card and button

app.py

@@ -31,6 +31,49 @@ from sklearn.model_selection import train_test_split
 from sklearn.tree import DecisionTreeClassifier, plot_tree
 
 
+CUSTOM_CSS = """
+#predict-button {
+    background: linear-gradient(135deg, #ce1126, #8b0000);
+    color: white;
+    font-weight: 700;
+    font-size: 1.05rem;
+    border: none;
+    box-shadow: 0 6px 18px rgba(139, 0, 0, 0.35);
+}
+#predict-button:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 10px 24px rgba(139, 0, 0, 0.45);
+}
+.prediction-card {
+    border: 3px solid #ce1126;
+    border-radius: 18px;
+    padding: 1.5rem;
+    background: #fff4f4;
+    text-align: center;
+    box-shadow: 0 12px 30px rgba(206, 17, 38, 0.15);
+}
+.prediction-card .location {
+    font-size: 2rem;
+    font-weight: 800;
+    color: #7b0011;
+    letter-spacing: 0.5px;
+}
+.prediction-card .location span {
+    text-transform: uppercase;
+}
+.prediction-card .confidence {
+    margin-top: 0.75rem;
+    font-size: 1.05rem;
+    color: #333;
+}
+.prediction-card .secondary {
+    margin-top: 0.25rem;
+    font-size: 0.95rem;
+    color: #555;
+}
+"""
+
+
 def build_dataset(n_samples: int = 200, seed: int = 42) -> pd.DataFrame:
     rng = np.random.default_rng(seed)
     data = pd.DataFrame(
@@ -182,14 +225,33 @@ def predict_study_location(
     top_index = probabilities.argmax()
     label = MODEL.classes_[top_index]
     confidence = probabilities[top_index]
+    secondary_index = (
+        probabilities.argsort()[::-1][1]
+        if len(probabilities) > 1
+        else top_index
+    )
+    secondary_confidence = probabilities[secondary_index]
+    secondary_label = MODEL.classes_[secondary_index]
     steps = describe_path(MODEL, sample)
     report_lines = "\n".join(f"- {step}" for step in steps)
-    prediction_text = f"### Recommended Study Location: **{label}**"
-    confidence_text = f"Confidence: `{confidence:.1%}` | Secondary: `{probabilities[1 - top_index]:.1%}`"
-    return prediction_text, confidence_text, report_lines
+    prediction_html = f"""
+    <div class="prediction-card">
+        <div class="location">Study at the <span>{label}</span></div>
+        <div class="confidence">Confidence: {confidence:.1%}</div>
+        <div class="secondary">Next best: {secondary_label} ({secondary_confidence:.1%})</div>
+    </div>
+    """.strip()
+    confidence_text = (
+        f"Primary recommendation: **{label}** (`{confidence:.1%}`) · "
+        f"Alternate: **{secondary_label}** (`{secondary_confidence:.1%}`)"
+    )
+    return prediction_html, confidence_text, report_lines
 
 
-with gr.Blocks(title="UNLV Study Location Predictor") as demo:
+with gr.Blocks(
+    title="UNLV Study Location Predictor",
+    css=CUSTOM_CSS,
+) as demo:
     gr.Markdown(
         """
         # UNLV Study Location Predictor
@@ -234,10 +296,13 @@ with gr.Blocks(title="UNLV Study Location Predictor") as demo:
                 label="Is it the weekend?",
                 value=False,
             )
-            run_button = gr.Button("Predict Study Location")
+            run_button = gr.Button(
+                "Predict Study Location",
+                elem_id="predict-button",
+            )
 
         with gr.Column():
-            prediction_box = gr.Markdown()
+            prediction_box = gr.HTML()
             confidence_box = gr.Markdown()
             rationale_box = gr.Markdown()