Add updated files

app.py

@@ -131,40 +131,33 @@ def get_impact_cards(impact, category):
     """
 
 def format_alt_button(text, impact):
-    """Formats the button text with spacing and potential savings metrics."""
     icon = "💡"
     if "Search" in text or "Google" in text: icon = "🔍"
     elif "Wikipedia" in text or "Encyclopedia" in text: icon = "📚"
     elif "Expert" in text or "Quora" in text: icon = "👤"
     elif "Wolfram" in text or "Geogebra" in text or "Desmos" in text: icon = "🧮"
     elif "Reddit" in text or "Gutenberg" in text or "Thesaurus" in text: icon = "📝"
-    
     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 with detailed analytics."""
-    
-    # Calculate Total Savings
-    total_water_saved = 0
-    total_energy_saved = 0
-    total_co2_saved = 0
+    """Generates a celebratory end-game report with detailed query analytics[cite: 14, 41]."""
+    total_w_saved = 0
+    total_e_saved = 0
+    total_c_saved = 0
     
     rows = ""
     for item in state["history"]:
-        # 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_w = item['water_ml']
             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
-            
+            total_w_saved += saved_w
+            total_e_saved += saved_e
+            total_c_saved += saved_c
             alt_display = f"<span style='color: #34d399;'>{item['alt_name']}</span>"
 
         rows += f"""
@@ -177,55 +170,40 @@ def generate_victory_dashboard(state):
         """
         
     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 BEAT THE SYSTEM! 🏆</h1>
-        <p class="victory-subtitle">You successfully navigated the AI ecosystem, reached {state['points']} points, and saved Drip!</p>
+        <div class="confetti"></div>
+        <h1 class="victory-title">🏆 PLANET SAVED! 🏆</h1>
+        <p style="text-align: center; font-size: 1.3em; color: #a7f3d0; margin-bottom: 30px;">You reached {state['points']} points and kept Drip alive!</p>
         
         <div class="victory-stats-row">
             <div class="v-stat-box">
-                <h4>Water Remaining</h4>
+                <h4>Final Water</h4>
                 <h2>{state['water']:.2f} L</h2>
             </div>
-            <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 class="v-stat-box" style="border-color: #34d399;">
+                <h4 style="color: #34d399;">Planetary Savings</h4>
+                <p style="color: #34d399; margin: 5px 0;">💧 {total_w_saved:.1f} mL Saved</p>
+                <p style="color: #facc15; margin: 5px 0;">⚡ {total_e_saved:.2f} Wh Saved</p>
+                <p style="color: #a8a29e; margin: 5px 0;">☁️ {total_c_saved:.2f} g Saved</p>
             </div>
             <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>
+                <h4 style="color: #fca5a5;">Total Usage</h4>
+                <p style="color: #fca5a5; margin: 5px 0;">💧 {10.0 - state['water']:.2f} L</p>
+                <p style="color: #fca5a5; margin: 5px 0;">⚡ {state['energy']:.4f} kWh</p>
+                <p style="color: #fca5a5; margin: 5px 0;">☁️ {state['co2']:.2f} g</p>
             </div>
         </div>
 
-        <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>
+        <h3 style="margin-top: 40px; color: #38bdf8; font-size: 1.8em;">📊 AI Usage Audit Log</h3>
+        <p style="opacity: 0.9; margin-bottom: 20px;">Detailed breakdown of your session's environmental impact[cite: 14].</p>
         
         <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;">
+            <table style="width: 100%; text-align: left; border-collapse: collapse; font-size: 1em;">
                 <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>
+                    <th style="padding: 15px;">User Query</th>
+                    <th style="padding: 15px;">LLM Cost (Wasted)</th>
+                    <th style="padding: 15px;">Best Alternative</th>
+                    <th style="padding: 15px;">Potential Savings</th>
                 </tr>
                 {rows}
             </table>
@@ -254,19 +232,17 @@ def process_query(user_input, selected_model, state):
     
     if category == "complex research query":
         state["points"] += 50
-        dialogue = f"Finally, a real question! Draining my {selected_model} servers, but totally justified."
+        dialogue = f"A legitimate research query! Finally, a worthy use of my massive architecture. Drain away!"
     else:
         show_alts = True
         raw_alts = ALTERNATIVES.get(category, [{"text": "Google", "url": "https://google.com"}])
         state["current_best_alt"] = raw_alts[0] 
         best_alt_name = raw_alts[0]["text"]
-        
         random.shuffle(raw_alts)
         state["current_shuffled_alts"] = raw_alts
         alt_choices = [format_alt_button(a["text"], impact) for a in raw_alts]
         dialogue = get_dialogue(state["water"], category)
 
-    # Log the exact metrics for the victory dashboard
     state["history"].append({
         "query": user_input,
         "water_ml": impact["water_ml"],
@@ -279,9 +255,8 @@ def process_query(user_input, selected_model, state):
     drip_ui = get_drip_visuals(state["water"])
     impact_ui = get_impact_cards(impact, category)
     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>"
+    feedback_text = f"<div class='feedback-box'>🧠 <strong>{category.upper()}</strong> Detected!<br><br><em>\"{dialogue}\"</em></div>"
     
-    # 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)
@@ -297,7 +272,7 @@ 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()
         
-    clean_choice = choice_text.split("\n")[1].strip() 
+    clean_choice = choice_text.split("\n")[0][2:].strip() 
     selected_dict = next((item for item in state["current_shuffled_alts"] if item["text"] == clean_choice), None)
     
     if clean_choice == state["current_best_alt"]["text"]:
@@ -308,7 +283,6 @@ def select_alternative(choice_text, state):
     
     stats_ui = get_stats_html(state["water"], state["energy"], state["co2"], state["points"])
     
-    # 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)
@@ -353,19 +327,27 @@ h1 { text-align: center; color: #38bdf8; text-shadow: 0 0 15px rgba(56, 189, 248
 .bad-impact { background: linear-gradient(180deg, rgba(127, 29, 29, 0.3), rgba(69, 10, 10, 0.5)); border-top: 3px solid #ef4444; }
 .good-impact { background: linear-gradient(180deg, rgba(20, 83, 45, 0.3), rgba(6, 78, 59, 0.5)); border-top: 3px solid #10b981; }
 
-/* Enhanced Alternative Cards */
 .alt-group { padding: 25px; background: linear-gradient(145deg, rgba(16, 185, 129, 0.05), rgba(6, 95, 70, 0.1)); border-radius: 20px; border: 1px solid rgba(16, 185, 129, 0.3); margin-top: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);}
 .alt-card { background: linear-gradient(145deg, #1e293b, #0f172a) !important; border: 1px solid #10b981 !important; color: #a7f3d0 !important; height: auto !important; min-height: 180px !important; border-radius: 16px !important; font-size: 1.05em !important; font-weight: 500 !important; white-space: pre-wrap !important; line-height: 1.5 !important; padding: 15px !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important;}
 .alt-card:hover { background: linear-gradient(145deg, #064e3b, #065f46) !important; transform: translateY(-8px) !important; box-shadow: 0 12px 30px rgba(16, 185, 129, 0.3) !important; color: white !important; border-color: #34d399 !important;}
 .custom-dropdown { background: rgba(30, 41, 59, 0.8) !important; border: 1px solid #38bdf8 !important; border-radius: 12px !important; }
 
-/* Victory Dashboard CSS */
-.victory-dashboard { background: linear-gradient(135deg, #0f172a, #1e293b); padding: 40px; border-radius: 24px; border: 2px solid #34d399; box-shadow: 0 0 50px rgba(52, 211, 153, 0.3); color: white; animation: floatUp 1s ease-out; }
-.victory-title { text-align: center; color: #34d399; font-size: 3em !important; text-shadow: 0 0 20px rgba(52, 211, 153, 0.6); margin-bottom: 10px; }
+/* Victory Dashboard & Celebration */
+@keyframes pulseGlow { 0% { box-shadow: 0 0 20px rgba(52, 211, 153, 0.4); } 50% { box-shadow: 0 0 50px 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; position: relative; overflow: hidden; }
+.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-stats-row { display: flex; gap: 20px; margin-top: 30px; }
-.v-stat-box { flex: 1; background: rgba(0,0,0,0.3); padding: 20px; border-radius: 16px; text-align: center; border: 1px solid rgba(255,255,255,0.1); }
+.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: 1px; margin: 0 0 10px 0; }
 .v-stat-box h2 { color: #38bdf8; font-size: 2.5em; margin: 0; }
+
+/* Confetti Blast Animation */
+.confetti { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; }
+.confetti::before { content: '🎉'; position: absolute; font-size: 2rem; animation: scatter 3s infinite linear; }
+@keyframes scatter { 
+    0% { transform: translate(50vw, 50vh) rotate(0deg); opacity: 1; }
+    100% { transform: translate(calc(100vw * var(--x)), calc(100vh * var(--y))) rotate(360deg); opacity: 0; }
+}
 """
 
 with gr.Blocks(title="EcoQueryQuest") as demo:
@@ -377,10 +359,8 @@ with gr.Blocks(title="EcoQueryQuest") as demo:
     gr.Markdown("<h1>🌍 EcoQueryQuest</h1>")
     gr.Markdown("<div class='subtitle'>Select a model, type a query, and watch Drip react. Reach 500 points to win!</div>")
 
-    # The main stats dashboard remains visible
     stats_html = gr.HTML(get_stats_html(10.0, 0.0, 0.0, 0))
 
-    # ---- MAIN GAME UI ----
     with gr.Column(visible=True) as main_game_ui:
         with gr.Row():
             with gr.Column(scale=1, elem_classes=["drip-pod"]):
@@ -390,11 +370,9 @@ with gr.Blocks(title="EcoQueryQuest") as demo:
             
             with gr.Column(scale=2):
                 model_selector = gr.Dropdown(choices=list(MODELS.keys()), value="GPT-5.4", label="Select Target LLM Backend", elem_classes=["custom-dropdown"])
-                
                 with gr.Row(elem_classes=["input-row"]):
-                    user_input = gr.Textbox(show_label=False, placeholder="Type your query here...\n(Press Shift+Enter for new line)", elem_classes=["custom-textbox"], scale=4, lines=3)
+                    user_input = gr.Textbox(show_label=False, placeholder="Type your query here...", elem_classes=["custom-textbox"], scale=4, lines=3)
                     submit_btn = gr.Button("Send Query", elem_classes=["custom-btn"], scale=1)
-                
                 impact_display = gr.HTML()
 
         with gr.Group(visible=False, elem_classes=["alt-group"]) as alternatives_group:
@@ -405,18 +383,15 @@ with gr.Blocks(title="EcoQueryQuest") as demo:
                 alt_btn_3 = gr.Button("", elem_classes=["alt-card"])
             alt_feedback = gr.Markdown()
 
-    # ---- VICTORY SCREEN UI ----
     with gr.Column(visible=False) as victory_ui:
         victory_display = gr.HTML()
 
-    # 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,