Add updated files

app.py

@@ -142,47 +142,90 @@ def format_alt_button(text, impact):
     return f"{icon} {text}\n\n🏆 Score: +10 Pts\n💧 Save: {impact['water_ml']} mL\n⚡ Save: {impact['energy_wh']} Wh\n☁️ Save: {impact['co2_g']} g"
 
 def generate_victory_dashboard(state):
-    """Generates a massive, celebratory end-game report."""
+    """Generates a massive, celebratory end-game report with detailed analytics."""
+    
+    # Calculate Total Savings
+    total_water_saved = 0
+    total_energy_saved = 0
+    total_co2_saved = 0
+    
     rows = ""
     for item in state["history"]:
-        alt_text = item['alt'] if item['alt'] else "Justified use (No alternative needed)"
+        # If it was a justified complex query, there are no savings
+        if item['alt_name'] == "None (Justified Use)":
+            saved_w, saved_e, saved_c = 0.0, 0.0, 0.0
+            alt_display = "<span style='color: #94a3b8;'>Justified Use (No Alternative)</span>"
+        else:
+            # Calculate savings (LLM cost - Eco-Alternative cost)
+            saved_w = max(0, item['water_ml'] - 0.0)
+            saved_e = max(0, item['energy_wh'] - 0.001)
+            saved_c = max(0, item['co2_g'] - 0.01)
+            
+            total_water_saved += saved_w
+            total_energy_saved += saved_e
+            total_co2_saved += saved_c
+            
+            alt_display = f"<span style='color: #34d399;'>{item['alt_name']}</span>"
+
         rows += f"""
-        <tr style="border-bottom: 1px solid rgba(255,255,255,0.1);">
-            <td style="padding: 12px; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">"{item['query']}"</td>
-            <td style="padding: 12px; color: #fca5a5;">{item['water_ml']}mL / {item['energy_wh']}Wh</td>
-            <td style="padding: 12px; color: #86efac;">{alt_text}</td>
+        <tr style="border-bottom: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.2);">
+            <td style="padding: 15px; font-style: italic;">"{item['query']}"</td>
+            <td style="padding: 15px; color: #fca5a5;">{item['water_ml']:.1f}mL / {item['energy_wh']:.2f}Wh / {item['co2_g']:.2f}g</td>
+            <td style="padding: 15px;">{alt_display}</td>
+            <td style="padding: 15px; color: #60a5fa; font-weight: bold;">{saved_w:.1f}mL / {saved_e:.2f}Wh / {saved_c:.2f}g</td>
         </tr>
         """
         
     return f"""
+    <style>
+        @keyframes pulseGlow {{
+            0% {{ box-shadow: 0 0 20px rgba(52, 211, 153, 0.4); }}
+            50% {{ box-shadow: 0 0 60px rgba(52, 211, 153, 0.8); }}
+            100% {{ box-shadow: 0 0 20px rgba(52, 211, 153, 0.4); }}
+        }}
+        .victory-dashboard {{ background: linear-gradient(135deg, #0f172a, #1e293b); padding: 40px; border-radius: 24px; border: 2px solid #34d399; animation: pulseGlow 2s infinite; color: white; }}
+        .victory-title {{ text-align: center; color: #34d399; font-size: 3.5em !important; text-shadow: 0 0 20px rgba(52, 211, 153, 0.6); margin-bottom: 5px; }}
+        .victory-subtitle {{ text-align: center; font-size: 1.3em; color: #a7f3d0; margin-bottom: 30px; }}
+        .victory-stats-row {{ display: flex; gap: 20px; margin-top: 30px; margin-bottom: 40px; }}
+        .v-stat-box {{ flex: 1; background: rgba(0,0,0,0.4); padding: 25px; border-radius: 16px; text-align: center; border: 1px solid rgba(52, 211, 153, 0.3); }}
+        .v-stat-box h4 {{ color: #94a3b8; font-size: 0.9em; text-transform: uppercase; letter-spacing: 1.5px; margin: 0 0 10px 0; }}
+        .v-stat-box h2 {{ color: #38bdf8; font-size: 2.8em; margin: 0; }}
+        .v-stat-highlight h2 {{ color: #34d399; }}
+    </style>
+
     <div class="victory-dashboard">
-        <h1 class="victory-title">🎉 YOU SAVED DRIP! 🎉</h1>
-        <p style="text-align: center; font-size: 1.2em; color: #a7f3d0;">You successfully navigated the AI ecosystem and reached {state['points']} points!</p>
+        <h1 class="victory-title">🏆 YOU BEAT THE SYSTEM! 🏆</h1>
+        <p class="victory-subtitle">You successfully navigated the AI ecosystem, reached {state['points']} points, and saved Drip!</p>
         
         <div class="victory-stats-row">
             <div class="v-stat-box">
-                <h4>Total Water Remaining</h4>
+                <h4>Water Remaining</h4>
                 <h2>{state['water']:.2f} L</h2>
             </div>
-            <div class="v-stat-box">
-                <h4>Queries Asked</h4>
-                <h2>{state['queries']}</h2>
+            <div class="v-stat-box v-stat-highlight">
+                <h4>Total Metrics Saved</h4>
+                <p style="font-size: 1.2em; color: #34d399; margin:0;">💧 {total_water_saved:.1f} mL</p>
+                <p style="font-size: 1.2em; color: #facc15; margin:0;">⚡ {total_energy_saved:.2f} Wh</p>
+                <p style="font-size: 1.2em; color: #a8a29e; margin:0;">☁️ {total_co2_saved:.2f} g</p>
             </div>
-            <div class="v-stat-box" style="border-color: #facc15;">
-                <h4 style="color: #fde047;">Energy Wasted</h4>
-                <h2 style="color: #fde047;">{state['energy']:.4f} kWh</h2>
+            <div class="v-stat-box" style="border-color: #fca5a5;">
+                <h4 style="color: #fca5a5;">Metrics Wasted</h4>
+                <p style="font-size: 1.2em; color: #fca5a5; margin:0;">💧 {10.0 - state['water']:.2f} L</p>
+                <p style="font-size: 1.2em; color: #fca5a5; margin:0;">⚡ {state['energy']:.4f} kWh</p>
+                <p style="font-size: 1.2em; color: #fca5a5; margin:0;">☁️ {state['co2']:.2f} g</p>
             </div>
         </div>
 
-        <h3 style="margin-top: 30px; color: #38bdf8;">📝 Your AI Audit Log</h3>
-        <p style="opacity: 0.8; margin-bottom: 15px;">Review what you queried, what it cost the planet, and the greener choices you could have made.</p>
+        <h3 style="margin-top: 30px; color: #38bdf8; font-size: 1.8em;">📊 Your AI Audit Log</h3>
+        <p style="opacity: 0.9; margin-bottom: 20px; font-size: 1.1em;">Review your query history below to see exactly what you could have saved by choosing eco-friendly alternatives.</p>
         
-        <div style="max-height: 300px; overflow-y: auto; background: rgba(15, 23, 42, 0.8); border-radius: 12px; border: 1px solid rgba(255,255,255,0.1);">
-            <table style="width: 100%; text-align: left; border-collapse: collapse;">
-                <tr style="background: rgba(255,255,255,0.05);">
-                    <th style="padding: 12px;">Your Query</th>
-                    <th style="padding: 12px;">LLM Cost Wasted</th>
-                    <th style="padding: 12px;">Greener Alternative</th>
+        <div style="max-height: 400px; overflow-y: auto; background: rgba(15, 23, 42, 0.9); border-radius: 12px; border: 1px solid rgba(255,255,255,0.1);">
+            <table style="width: 100%; text-align: left; border-collapse: collapse; font-size: 1.05em;">
+                <tr style="background: rgba(56, 189, 248, 0.1); border-bottom: 2px solid #38bdf8;">
+                    <th style="padding: 15px; color: #38bdf8;">Your Query</th>
+                    <th style="padding: 15px; color: #fca5a5;">LLM Cost (Wasted)</th>
+                    <th style="padding: 15px; color: #34d399;">Better Alternative</th>
+                    <th style="padding: 15px; color: #60a5fa;">Potential Savings</th>
                 </tr>
                 {rows}
             </table>
@@ -192,7 +235,6 @@ def generate_victory_dashboard(state):
 
 def process_query(user_input, selected_model, state):
     if state["game_over"] or not user_input.strip():
-        # Update 14 fields (see outputs mapping below)
         return [state, gr.update()] + [gr.update()]*10 + [gr.update(visible=True), gr.update(visible=False), gr.update()]
 
     result = classifier(user_input, CATEGORIES)
@@ -208,7 +250,7 @@ def process_query(user_input, selected_model, state):
     
     show_alts = False
     alt_choices = ["", "", ""]
-    best_alt_name = ""
+    best_alt_name = "None (Justified Use)"
     
     if category == "complex research query":
         state["points"] += 50
@@ -221,16 +263,16 @@ def process_query(user_input, selected_model, state):
         
         random.shuffle(raw_alts)
         state["current_shuffled_alts"] = raw_alts
-        # Inject the impact metrics into the button formatting
         alt_choices = [format_alt_button(a["text"], impact) for a in raw_alts]
         dialogue = get_dialogue(state["water"], category)
 
-    # Log the query in history for the victory dashboard
+    # Log the exact metrics for the victory dashboard
     state["history"].append({
         "query": user_input,
         "water_ml": impact["water_ml"],
         "energy_wh": impact["energy_wh"],
-        "alt": best_alt_name if show_alts else ""
+        "co2_g": impact["co2_g"],
+        "alt_name": best_alt_name
     })
 
     stats_ui = get_stats_html(state["water"], state["energy"], state["co2"], state["points"])
@@ -239,16 +281,14 @@ def process_query(user_input, selected_model, state):
     audio_path = generate_audio(dialogue)
     feedback_text = f"<div class='feedback-box'>🧠 <strong>{category.upper()}</strong> Detected on {selected_model}!<br><br><em>\"{dialogue}\"</em></div>"
     
-    # Check for Win/Loss
+    # Check for Win/Loss immediately upon sending query
     if state["points"] >= 500 or state["water"] <= 0:
         state["game_over"] = True
         victory_html = generate_victory_dashboard(state)
-        # Hide main game, Show victory screen
         return (state, stats_ui, drip_ui, audio_path, impact_ui, gr.update(), gr.update(), 
                 gr.update(), gr.update(), gr.update(), gr.update(), gr.update(value=""),
                 gr.update(visible=False), gr.update(visible=True), gr.update(value=victory_html))
 
-    # Standard Return
     return (state, stats_ui, drip_ui, audio_path, impact_ui, gr.update(value=feedback_text), gr.update(visible=show_alts), 
             gr.update(value=alt_choices[0]), gr.update(value=alt_choices[1]), gr.update(value=alt_choices[2]), gr.update(value=""), gr.update(value=""),
             gr.update(visible=True), gr.update(visible=False), gr.update())
@@ -257,7 +297,6 @@ def select_alternative(choice_text, state):
     if state["game_over"] or not state.get("current_best_alt"):
         return state, gr.update(), gr.update(), gr.update(), gr.update(visible=True), gr.update(visible=False), gr.update()
         
-    # Extract just the name from the formatted button text (second line)
     clean_choice = choice_text.split("\n")[1].strip() 
     selected_dict = next((item for item in state["current_shuffled_alts"] if item["text"] == clean_choice), None)
     
@@ -269,7 +308,7 @@ def select_alternative(choice_text, state):
     
     stats_ui = get_stats_html(state["water"], state["energy"], state["co2"], state["points"])
     
-    # Check for win immediately after points award
+    # Check for win after points are awarded from selecting an alternative
     if state["points"] >= 500:
         state["game_over"] = True
         victory_html = generate_victory_dashboard(state)
@@ -277,7 +316,6 @@ def select_alternative(choice_text, state):
 
     return state, stats_ui, gr.update(value=msg), gr.update(visible=False), gr.update(visible=True), gr.update(visible=False), gr.update()
 
-
 custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;700&display=swap');
 body, .gradio-container { background-color: #0B1120 !important; font-family: 'Outfit', sans-serif !important; color: #e2e8f0 !important; }
@@ -371,13 +409,14 @@ with gr.Blocks(title="EcoQueryQuest") as demo:
     with gr.Column(visible=False) as victory_ui:
         victory_display = gr.HTML()
 
-    # WIRING
+    # Ensure these outputs match EXACTLY with the 15 return items in process_query
     submit_btn.click(
         fn=process_query,
         inputs=[user_input, model_selector, game_state],
         outputs=[game_state, stats_html, drip_html, drip_audio, impact_display, drip_feedback, alternatives_group, alt_btn_1, alt_btn_2, alt_btn_3, alt_feedback, user_input, main_game_ui, victory_ui, victory_display]
     )
 
+    # Ensure these outputs match EXACTLY with the 7 return items in select_alternative
     for btn in [alt_btn_1, alt_btn_2, alt_btn_3]:
         btn.click(
             fn=select_alternative,