Add updated files

app.py

@@ -25,9 +25,7 @@ def generate_audio(text):
     return filepath
 
 def get_stats_html(water, energy, co2, points):
-    # Calculate percentage for the progress bar based on a 10L max
     water_percent = max(0, min(100, (water / 10.0) * 100))
-    
     return f"""
     <div class="stats-container">
         <div class="stat-card water-card">
@@ -53,7 +51,6 @@ def get_stats_html(water, energy, co2, points):
     """
 
 def get_drip_visuals(water_level):
-    # Adjusted visual thresholds for a 10L max
     if water_level > 7.0:
         g_start, g_end = "#7dd3fc", "#0369a1"
         mouth_d = "M43 112 Q60 122 77 112"
@@ -133,18 +130,70 @@ def get_impact_cards(impact, category):
     </div>
     """
 
-def format_alt_button(text):
+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}\n{text}"
+    
+    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."""
+    rows = ""
+    for item in state["history"]:
+        alt_text = item['alt'] if item['alt'] else "Justified use (No alternative needed)"
+        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>
+        """
+        
+    return f"""
+    <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>
+        
+        <div class="victory-stats-row">
+            <div class="v-stat-box">
+                <h4>Total Water Remaining</h4>
+                <h2>{state['water']:.2f} L</h2>
+            </div>
+            <div class="v-stat-box">
+                <h4>Queries Asked</h4>
+                <h2>{state['queries']}</h2>
+            </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>
+        </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>
+        
+        <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>
+                </tr>
+                {rows}
+            </table>
+        </div>
+    </div>
+    """
 
 def process_query(user_input, selected_model, state):
     if state["game_over"] or not user_input.strip():
-        return [state, gr.update()] + [gr.update()]*9 + [gr.update()]
+        # 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)
     category = result['labels'][0]
@@ -159,6 +208,7 @@ def process_query(user_input, selected_model, state):
     
     show_alts = False
     alt_choices = ["", "", ""]
+    best_alt_name = ""
     
     if category == "complex research query":
         state["points"] += 50
@@ -167,29 +217,48 @@ def process_query(user_input, selected_model, state):
         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"]) for a in 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
+    state["history"].append({
+        "query": user_input,
+        "water_ml": impact["water_ml"],
+        "energy_wh": impact["energy_wh"],
+        "alt": best_alt_name if show_alts else ""
+    })
+
     stats_ui = get_stats_html(state["water"], state["energy"], state["co2"], state["points"])
     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>"
     
+    # Check for Win/Loss
     if state["points"] >= 500 or state["water"] <= 0:
         state["game_over"] = True
-        return (state, stats_ui, drip_ui, audio_path, impact_ui, gr.update(value="<div class='feedback-box'>Game Over! Check your score.</div>"), gr.update(visible=False), gr.update(), gr.update(), gr.update(), gr.update(), gr.update(value=""))
+        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(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())
 
 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()
+        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] 
+    # 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)
     
     if clean_choice == state["current_best_alt"]["text"]:
@@ -200,7 +269,14 @@ def select_alternative(choice_text, state):
     
     stats_ui = get_stats_html(state["water"], state["energy"], state["co2"], state["points"])
     
-    return state, stats_ui, gr.update(value=msg), gr.update(visible=False)
+    # Check for win immediately after points award
+    if state["points"] >= 500:
+        state["game_over"] = True
+        victory_html = generate_victory_dashboard(state)
+        return state, stats_ui, gr.update(), gr.update(), gr.update(visible=False), gr.update(visible=True), gr.update(value=victory_html)
+
+    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');
@@ -239,14 +315,22 @@ 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: 130px !important; border-radius: 16px !important; font-size: 1.15em !important; font-weight: 500 !important; white-space: pre-wrap !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 { 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-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 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; }
 """
 
 with gr.Blocks(title="EcoQueryQuest") as demo:
-    # Set the starting game state back to 10L
     game_state = gr.State({
         "water": 10.0, "energy": 0.0, "co2": 0.0, "points": 0, "queries": 0, 
         "history": [], "game_over": False, "current_best_alt": None, "current_shuffled_alts": []
@@ -255,44 +339,50 @@ 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>")
 
-    # Set the initial UI render to 10L
+    # The main stats dashboard remains visible
     stats_html = gr.HTML(get_stats_html(10.0, 0.0, 0.0, 0))
 
-    with gr.Row():
-        with gr.Column(scale=1, elem_classes=["drip-pod"]):
-            # Render initial Drip at 10L
-            drip_html = gr.HTML(get_drip_visuals(10.0))
-            drip_audio = gr.Audio(label="Drip's Voice", autoplay=True, interactive=False, elem_classes=["drip-audio"])
-            drip_feedback = gr.HTML("<div class='feedback-box'>Waiting for your first query...</div>")
-        
-        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)
-                submit_btn = gr.Button("Send Query", elem_classes=["custom-btn"], scale=1)
+    # ---- MAIN GAME UI ----
+    with gr.Column(visible=True) as main_game_ui:
+        with gr.Row():
+            with gr.Column(scale=1, elem_classes=["drip-pod"]):
+                drip_html = gr.HTML(get_drip_visuals(10.0))
+                drip_audio = gr.Audio(label="Drip's Voice", autoplay=True, interactive=False, elem_classes=["drip-audio"])
+                drip_feedback = gr.HTML("<div class='feedback-box'>Waiting for your first query...</div>")
             
-            impact_display = gr.HTML()
+            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)
+                    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:
-        gr.Markdown("<h3 style='text-align:center; color:#34d399; margin-bottom: 20px;'>🌱 Drip says: 'Quick! Pick a greener tool to earn points!'</h3>")
-        with gr.Row():
-            alt_btn_1 = gr.Button("", elem_classes=["alt-card"])
-            alt_btn_2 = gr.Button("", elem_classes=["alt-card"])
-            alt_btn_3 = gr.Button("", elem_classes=["alt-card"])
-        alt_feedback = gr.Markdown()
+        with gr.Group(visible=False, elem_classes=["alt-group"]) as alternatives_group:
+            gr.Markdown("<h3 style='text-align:center; color:#34d399; margin-bottom: 20px;'>🌱 Drip says: 'Quick! Pick a greener tool to earn points!'</h3>")
+            with gr.Row():
+                alt_btn_1 = gr.Button("", elem_classes=["alt-card"])
+                alt_btn_2 = gr.Button("", elem_classes=["alt-card"])
+                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()
 
+    # WIRING
     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]
+        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]
     )
 
     for btn in [alt_btn_1, alt_btn_2, alt_btn_3]:
         btn.click(
             fn=select_alternative,
             inputs=[btn, game_state],
-            outputs=[game_state, stats_html, alt_feedback, alternatives_group]
+            outputs=[game_state, stats_html, alt_feedback, alternatives_group, main_game_ui, victory_ui, victory_display]
         )
 
 if __name__ == "__main__":

dialogues.py

@@ -1,26 +1,25 @@
 DIALOGUES = {
     "energetic": {  # > 7.0L
-        "simple factual question": "A simple fact! Look at you, saving my precious drops. Keep it up!",
-        "mathematical calculation": "Math? Easy peasy! Barely broke a sweat, or, well, evaporated a drop.",
-        "creative content generation": "Getting creative, are we? I'm feeling generous today, so I'll let it slide, but watch my levels!",
-        "complex research query": "Deep dive! Okay, I've got the energy for this right now, but it's costing us!"
+        "simple factual question": "You used a supercomputer for a simple fact? I'm full right now, but that's just lazy. Open a book.",
+        "mathematical calculation": "A basic calculator could do this with zero footprint. But sure, burn my energy for basic math.",
+        "creative content generation": "Generating artificial creativity... I'll allow it, but watch my water levels drop. Your poetry is expensive.",
+        "complex research query": "A legitimate research query! Finally, a worthy use of my massive architecture. Drain away!"
     },
     "tired": {  # 3.0L - 7.0L
-        "simple factual question": "*Sigh* Fine. Here's your fact. But maybe try a book next time?",
-        "mathematical calculation": "I guess I can crunch those numbers. But my reserves are dropping...",
-        "creative content generation": "Oh great, another essay request! I was planning to hydrate a small village, but your creativity is clearly more important.",
-        "complex research query": "You're really draining me here. Do you *really* need me for this massive search?"
+        "simple factual question": "Look at me. I'm sweating. All because you couldn't be bothered to use a standard search engine.",
+        "mathematical calculation": "Did you skip basic math class? I am literally evaporating to do arithmetic for you.",
+        "creative content generation": "Your 'creativity' is draining my lifeblood. Make it quick, I don't have much cooling left.",
+        "complex research query": "I respect the complexity, but this is taking a severe toll on my cooling systems. I hope this research saves the world."
     },
     "raspy": {  # < 3.0L
-        "simple factual question": "Barely... hanging... on... just Google it next time, please...",
-        "mathematical calculation": "*Cough* Grab a calculator... I'm evaporating...",
-        "creative content generation": "Evaporating... for a poem... what a cruel world...",
-        "complex research query": "Goodbye, cruel world... drained dry for your research..."
+        "simple factual question": "*Cough* Read an encyclopedia... I'm dying for your trivia...",
+        "mathematical calculation": "Use an abacus... you are boiling my last drops for numbers...",
+        "creative content generation": "My final breath... wasted on generating a fictional story... how poetic... and cruel.",
+        "complex research query": "Critical system failure imminent... I am giving my life for your research... make it count."
     }
 }
 
 def get_dialogue(water_level, category):
-    # Adjusted thresholds for a 10L maximum limit
     if water_level > 7.0:
         state = "energetic"
     elif 3.0 <= water_level <= 7.0: