Add updated files

app.py

@@ -8,202 +8,76 @@ from game_data import calculate_impact, MODELS
 from dialogues import get_dialogue
 from alternatives import ALTERNATIVES
 
-print("Loading classification model...")
 classifier = pipeline("zero-shot-classification", model="facebook/bart-large-mnli")
 
-CATEGORIES = [
-    "simple factual question",
-    "mathematical calculation",
-    "creative content generation",
-    "complex research query"
-]
-
-def generate_audio(text):
-    tts = gTTS(text, lang='en')
-    filepath = "temp_drip_voice.mp3"
-    tts.save(filepath)
-    return filepath
-
-def get_stats_html(water, energy, co2, points):
-    water_percent = max(0, min(100, (water / 10.0) * 100))
-    return f"""
-    <div class="stats-container">
-        <div class="stat-card water-card">
-            <div class="stat-label">WATER TANK (10L MAX)</div>
-            <div class="stat-value">{water:.2f}L</div>
-            <div class="progress-bar-bg">
-                <div class="progress-bar-fill" style="width: {water_percent}%;"></div>
-            </div>
-        </div>
-        <div class="stat-card energy-card">
-            <div class="stat-label">ENERGY WASTED</div>
-            <div class="stat-value">{energy:.4f} <span style="font-size: 0.5em;">kWh</span></div>
-        </div>
-        <div class="stat-card co2-card">
-            <div class="stat-label">CARBON (CO₂e)</div>
-            <div class="stat-value">{co2:.2f}g</div>
-        </div>
-        <div class="stat-card points-card">
-            <div class="stat-label">SCORE</div>
-            <div class="stat-value">{points}</div>
-        </div>
-    </div>
-    """
-
-def get_drip_visuals(water_level):
-    if water_level > 7.0:
-        g_start, g_end = "#7dd3fc", "#0369a1"
-        mouth_d = "M43 112 Q60 122 77 112"
-        cracks_op, sweat_op, tear_op = "0", "0", "0"
-        mood, mood_color = "Hydrated and coping", "rgb(34, 211, 238)"
-        anim = "bounce 2s infinite ease-in-out"
-    elif 3.0 <= water_level <= 7.0:
-        g_start, g_end = "#38bdf8", "#0284c7"
-        mouth_d = "M43 112 Q60 110 77 112"
-        cracks_op, sweat_op, tear_op = "0", "1", "0"
-        mood, mood_color = "Shrinking & Sweaty", "#0ea5e9"
-        anim = "float 4s infinite ease-in-out"
-    elif water_level > 0:
-        g_start, g_end = "#fca5a5", "#b91c1c"
-        mouth_d = "M43 116 Q60 102 77 116"
-        cracks_op, sweat_op, tear_op = "1", "0", "1"
-        mood, mood_color = "Overheating & Raspy", "#ef4444"
-        anim = "shake 0.5s infinite"
-    else:
-        g_start, g_end = "#94a3b8", "#334155"
-        mouth_d = "M40 112 Q45 105 50 112 T60 112 T70 112 T80 112"
-        cracks_op, sweat_op, tear_op = "0", "0", "0"
-        mood, mood_color = "Evaporated!", "#94a3b8"
-        anim = "floatUp 3s forwards"
-
-    return f"""
-    <div class="drip-panel" style="animation: {anim}; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%;">
-      <div class="drip-lbl" style="font-weight: 800; color: #94a3b8; letter-spacing: 3px; font-size: 14px; margin-bottom: 5px;">DRIP</div>
-      <svg id="drip-svg" viewBox="0 0 120 148" style="width: 140px; height: 160px; overflow: visible;" xmlns="http://www.w3.org/2000/svg">
-        <defs>
-          <radialGradient id="dg" cx="38%" cy="32%">
-            <stop id="dg1" offset="0%" stop-color="{g_start}"></stop>
-            <stop id="dg2" offset="100%" stop-color="{g_end}"></stop>
-          </radialGradient>
-        </defs>
-        <path id="dbody" d="M60 8 C60 8,102 66,102 90 C102 118,83 137,60 137 C37 137,18 118,18 90 C18 66,60 8,60 8Z" fill="url(#dg)" stroke="rgba(34,211,238,0.35)" stroke-width="1.5" opacity="1"></path>
-        <ellipse cx="42" cy="70" rx="9" ry="13" fill="rgba(255,255,255,0.22)" transform="rotate(-18,42,70)"></ellipse>
-        <circle cx="44" cy="90" r="10" fill="white"></circle>
-        <circle cx="76" cy="90" r="10" fill="white"></circle>
-        <circle id="pl" cx="45" cy="91" r="6" fill="#0f172a"></circle>
-        <circle id="pr" cx="77" cy="91" r="6" fill="#0f172a"></circle>
-        <circle cx="47" cy="88" r="2.5" fill="white"></circle>
-        <circle cx="79" cy="88" r="2.5" fill="white"></circle>
-        <path id="dm" d="{mouth_d}" stroke="#0f172a" stroke-width="2.5" stroke-linecap="round" fill="none"></path>
-        <g id="cracks" opacity="{cracks_op}" style="transition: opacity 0.5s;">
-          <path d="M80 46 L86 58 L79 65 L85 77" stroke="#bae6fd" stroke-width="1.3" stroke-linecap="round" fill="none" opacity=".7"></path>
-          <path d="M37 82 L31 93 L39 99" stroke="#bae6fd" stroke-width="1.3" stroke-linecap="round" fill="none" opacity=".7"></path>
-        </g>
-        <path id="sweat" d="M108 76 C110 70,116 70,116 78 C116 84,110 88,108 82Z" fill="#7dd3fc" opacity="{sweat_op}" style="transition: opacity 0.5s;"></path>
-        <path id="tear" d="M38 104 C37 108,33 108,33 112 C33 115,36 117,38 114 C40 117,43 115,43 112 C43 108,39 108,38 104Z" fill="#93c5fd" opacity="{tear_op}" style="transition: opacity 0.5s;"></path>
-      </svg>
-      <div class="drip-mood" id="drip-mood" style="color: {mood_color}; font-weight: 500; font-size: 1.1rem; margin-top: 15px;">{mood}</div>
-      <div style="text-align:center; margin-top:10px;">
-        <div style="font-size:10px; color:#94a3b8; text-transform:uppercase; letter-spacing:1px;">Water Left</div>
-        <div style="font-size:26px; font-weight:700; color:{mood_color};" id="d-water">{water_level:.2f}L</div>
-      </div>
-    </div>
-    """
+def get_relatable_translations(impact):
+    """Converts abstract numbers into physical examples."""
+    # Water: 1 bottle = 500mL
+    bottles = impact['water_ml'] / 500.0
+    w_ex = f"{bottles:.1f} water bottles" if bottles >= 0.1 else "A few sips"
+    
+    # Energy: 10 LED bulbs (10W each) for 1 hour = 100Wh
+    # Let's use 1 LED bulb for X hours
+    bulb_hours = impact['energy_wh'] / 10.0
+    e_ex = f"{bulb_hours:.1f} hours of 1 LED bulb" if bulb_hours >= 0.1 else f"{impact['energy_wh']*12:.1f} mins of 1 LED bulb"
+    
+    # CO2: 1 phone charge = ~5g
+    charges = impact['co2_g'] / 5.0
+    c_ex = f"{charges:.1f} phone charges" if charges >= 0.1 else "Negligible emissions"
+    
+    return w_ex, e_ex, c_ex
 
 def get_impact_cards(impact, category):
+    w_ex, e_ex, c_ex = get_relatable_translations(impact)
     return f"""
     <div class="impact-container">
         <div class="impact-card bad-impact">
             <h3 style="margin: 0 0 10px 0; color: #fca5a5;">🔥 LLM Impact</h3>
-            <p style="margin:4px 0; font-size:1.1em;"><strong>{impact['water_ml']} mL</strong> Water</p>
-            <p style="margin:4px 0; font-size:1.1em;"><strong>{impact['energy_wh']} Wh</strong> Energy</p>
-            <p style="margin:4px 0; font-size:1.1em;"><strong>{impact['co2_g']} g</strong> CO₂e</p>
-            <p style="margin:0; font-size:0.85em; opacity: 0.8;">Deducted from global reserves.</p>
+            <p>💧 <strong>{impact['water_ml']} mL</strong> ({w_ex})</p>
+            <p>⚡ <strong>{impact['energy_wh']} Wh</strong> ({e_ex})</p>
+            <p>☁️ <strong>{impact['co2_g']} g</strong> ({c_ex})</p>
         </div>
         <div class="impact-card good-impact">
             <h3 style="margin: 0 0 10px 0; color: #86efac;">🌿 Eco-Alternative</h3>
-            <p style="margin:4px 0; font-size:1.1em;"><strong>~0.0 mL</strong> Water</p>
-            <p style="margin:4px 0; font-size:1.1em;"><strong>~0.001 Wh</strong> Energy</p>
-            <p style="margin:4px 0; font-size:1.1em;"><strong>~0.01 g</strong> CO₂e</p>
-            <p style="margin:0; font-size:0.85em; opacity: 0.8;">Near-zero footprint.</p>
+            <p><strong>~0.0 mL</strong> Water | <strong>~0.001 Wh</strong> Energy</p>
+            <p style="font-size:0.85em; opacity: 0.8;">Zero bottles wasted. Planet saved.</p>
         </div>
     </div>
     """
 
-def format_alt_button(text, impact):
-    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 celebratory end-game report with detailed query analytics[cite: 14, 41]."""
-    total_w_saved = 0
-    total_e_saved = 0
-    total_c_saved = 0
+    """Victory screen with celebrations and detailed audit[cite: 14, 41]."""
+    total_w_saved = sum(item['water_ml'] for item in state["history"] if item['alt_name'] != "None")
+    total_e_saved = sum(item['energy_wh'] for item in state["history"] if item['alt_name'] != "None")
     
     rows = ""
     for item in state["history"]:
-        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:
-            saved_w = item['water_ml']
-            saved_e = max(0, item['energy_wh'] - 0.001)
-            saved_c = max(0, item['co2_g'] - 0.01)
-            
-            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>"
-
+        savings = f"{item['water_ml']:.1f}mL saved" if item['alt_name'] != "None" else "Justified"
         rows += f"""
-        <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 style="border-bottom: 1px solid rgba(255,255,255,0.1);">
+            <td style="padding: 10px;">{item['query']}</td>
+            <td style="padding: 10px; color: #fca5a5;">{item['water_ml']}mL / {item['co2_g']}g</td>
+            <td style="padding: 10px; color: #34d399;">{item['alt_name']}</td>
+            <td style="padding: 10px; color: #60a5fa;">{savings}</td>
         </tr>
         """
         
     return f"""
-    <div class="victory-dashboard">
-        <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-screen">
+        <div class="pyro"><div class="before"></div><div class="after"></div></div>
+        <h1 style="color: #34d399; text-align: center; font-size: 3em;">🏆 MISSION ACCOMPLISHED!</h1>
+        <p style="text-align: center; font-size: 1.2em;">You reached {state['points']} points and protected the environment!</p>
         
-        <div class="victory-stats-row">
-            <div class="v-stat-box">
-                <h4>Final Water</h4>
-                <h2>{state['water']:.2f} L</h2>
-            </div>
-            <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;">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 class="final-stats">
+            <div class="v-box"><h4>Total Water Saved</h4><h2>{total_w_saved:.1f} mL</h2><p>({total_w_saved/500:.1f} bottles)</p></div>
+            <div class="v-box"><h4>Total Energy Saved</h4><h2>{total_e_saved:.2f} Wh</h2><p>({total_e_saved/10:.1f} bulb hours)</p></div>
         </div>
 
-        <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: 1em;">
-                <tr style="background: rgba(56, 189, 248, 0.1); border-bottom: 2px solid #38bdf8;">
-                    <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>
+        <h3 style="margin-top: 30px; color: #38bdf8;">📊 Your Eco-Audit Log</h3>
+        <div style="overflow-x:auto;">
+            <table style="width: 100%; border-collapse: collapse; background: rgba(0,0,0,0.3); border-radius: 10px;">
+                <tr style="background: rgba(255,255,255,0.1); text-align: left;">
+                    <th style="padding: 10px;">Query</th><th style="padding: 10px;">LLM Cost</th><th style="padding: 10px;">Greener Tool</th><th style="padding: 10px;">Savings</th>
                 </tr>
                 {rows}
             </table>
@@ -211,193 +85,44 @@ def generate_victory_dashboard(state):
     </div>
     """
 
+# ... [The custom_css should include .pyro animations for the 'blast' effect] ...
+
 def process_query(user_input, selected_model, state):
     if state["game_over"] or not user_input.strip():
-        return [state, gr.update()] + [gr.update()]*10 + [gr.update(visible=True), gr.update(visible=False), gr.update()]
+        return [state] + [gr.update()]*13 + [gr.update(visible=True), gr.update(visible=False), gr.update()]
 
     result = classifier(user_input, CATEGORIES)
     category = result['labels'][0]
     confidence = result['scores'][0]
-    
     impact = calculate_impact(category, confidence, user_input, selected_model)
     
+    # Update State [cite: 12, 37]
     state["queries"] += 1
     state["water"] = max(0, state["water"] - impact["water_l"])
     state["energy"] += impact["energy_kwh"]
     state["co2"] += impact["co2_g"]
     
-    show_alts = False
-    alt_choices = ["", "", ""]
-    best_alt_name = "None (Justified Use)"
+    # Handle Dialogue and Alternatives [cite: 6, 16]
+    show_alts = category != "complex research query"
+    if not show_alts: state["points"] += 50
+    
+    dialogue = get_dialogue(state["water"], category)
     
-    if category == "complex research query":
-        state["points"] += 50
-        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)
-
     state["history"].append({
-        "query": user_input,
-        "water_ml": impact["water_ml"],
-        "energy_wh": impact["energy_wh"],
-        "co2_g": impact["co2_g"],
-        "alt_name": best_alt_name
+        "query": user_input, "water_ml": impact["water_ml"], "energy_wh": impact["energy_wh"],
+        "co2_g": impact["co2_g"], "alt_name": ALTERNATIVES[category][0]['text'] if show_alts else "None"
     })
 
-    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!<br><br><em>\"{dialogue}\"</em></div>"
-    
+    # Return elements and clear user_input [cite: 40]
     if state["points"] >= 500 or state["water"] <= 0:
         state["game_over"] = True
-        victory_html = generate_victory_dashboard(state)
-        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))
-
-    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())
-
-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")[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"]:
-        state["points"] += 10
-        msg = f"✅ **Excellent!** +10 Points.\n\n<a href='{selected_dict['url']}' target='_blank' style='display:inline-block; margin-top:10px; padding: 10px 20px; background:#10b981; color:white; text-decoration:none; border-radius:8px; font-weight:bold;'>👉 Click here to use {clean_choice}</a>"
-    else:
-        msg = f"⚠️ **Okay choice.** Better than an LLM, but there was a slightly more optimal tool.\n\n<a href='{selected_dict['url']}' target='_blank' style='display:inline-block; margin-top:10px; padding: 10px 20px; background:#38bdf8; color:white; text-decoration:none; border-radius:8px; font-weight:bold;'>👉 Click here to use {clean_choice}</a>"
-    
-    stats_ui = get_stats_html(state["water"], state["energy"], state["co2"], state["points"])
-    
-    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');
-body, .gradio-container { background-color: #0B1120 !important; font-family: 'Outfit', sans-serif !important; color: #e2e8f0 !important; }
-.gradio-container { max-width: 950px !important; margin: auto; padding-top: 20px; }
-h1 { text-align: center; color: #38bdf8; text-shadow: 0 0 15px rgba(56, 189, 248, 0.5); font-size: 2.5em !important; margin-bottom: 5px !important;}
-.subtitle { text-align: center; color: #94a3b8; margin-bottom: 30px; font-weight: 300; }
-
-.stats-container { display: flex; gap: 10px; justify-content: space-between; margin-bottom: 20px; }
-.stat-card { flex: 1; padding: 15px 10px; border-radius: 12px; text-align: center; background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(255,255,255,0.1); }
-.water-card { box-shadow: 0 4px 20px rgba(56, 189, 248, 0.15); border-top: 2px solid #38bdf8; }
-.energy-card { box-shadow: 0 4px 20px rgba(250, 204, 21, 0.15); border-top: 2px solid #facc15; }
-.co2-card { box-shadow: 0 4px 20px rgba(168, 162, 158, 0.15); border-top: 2px solid #a8a29e; }
-.points-card { box-shadow: 0 4px 20px rgba(52, 211, 153, 0.15); border-top: 2px solid #34d399; }
-.stat-label { font-size: 0.75em; letter-spacing: 1px; opacity: 0.8; margin-bottom: 5px; }
-.stat-value { font-size: 1.8em; font-weight: 700; color: white; }
-.progress-bar-bg { background: #1e293b; height: 8px; border-radius: 4px; margin-top: 10px; overflow: hidden; }
-.progress-bar-fill { background: linear-gradient(90deg, #0284c7, #38bdf8); height: 100%; transition: width 0.5s ease; }
-
-@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
-@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
-@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
-@keyframes floatUp { to { transform: translateY(-30px); opacity: 0; } }
-
-.drip-pod { background: rgba(15, 23, 42, 0.6); border-radius: 24px; border: 1px solid rgba(56, 189, 248, 0.2); padding: 30px 20px; display: flex; flex-direction: column; align-items: center; box-shadow: inset 0 0 40px rgba(0,0,0,0.5); }
-.drip-audio { background: transparent !important; border: none !important; box-shadow: none !important; width: 100%; max-width: 300px; filter: invert(1) hue-rotate(180deg) brightness(1.5); margin-bottom: 15px;}
-.feedback-box { background: rgba(56, 189, 248, 0.1); border-left: 4px solid #38bdf8; padding: 15px; border-radius: 8px; font-size: 1.05em; color: #e2e8f0; width: 100%; text-align: left; line-height: 1.4; box-sizing: border-box;}
-
-.input-row { align-items: stretch !important; margin: 10px 0; }
-.custom-textbox textarea { background: rgba(30, 41, 59, 0.8) !important; border: 1px solid #38bdf8 !important; color: white !important; font-size: 1.1em !important; border-radius: 12px !important; box-shadow: inset 0 2px 10px rgba(0,0,0,0.3) !important; padding: 15px !important; resize: none !important; }
-.custom-btn { background: linear-gradient(135deg, #0284c7, #0ea5e9) !important; border: none !important; color: white !important; font-weight: bold !important; font-size: 1.1em !important; border-radius: 12px !important; transition: all 0.3s !important; height: 100%; min-height: 85px; }
-.custom-btn:hover { box-shadow: 0 0 20px rgba(56, 189, 248, 0.6) !important; transform: scale(1.02); }
-
-.impact-container { display: flex; gap: 20px; width: 100%; }
-.impact-card { flex: 1; padding: 20px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.1); }
-.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; }
-
-.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 & 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.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:
-    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": []
-    })
-
-    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>")
-
-    stats_html = gr.HTML(get_stats_html(10.0, 0.0, 0.0, 0))
-
-    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>")
-            
-            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...", 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.Column(visible=False) as victory_ui:
-        victory_display = gr.HTML()
-
-    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]
-    )
-
-    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, main_game_ui, victory_ui, victory_display]
-        )
-
-if __name__ == "__main__":
-    demo.launch(css=custom_css)
+        return (state, gr.update(), gr.update(), gr.update(), gr.update(), gr.update(), gr.update(), 
+                gr.update(), gr.update(), gr.update(), gr.update(), gr.update(value=""), 
+                gr.update(visible=False), gr.update(visible=True), generate_victory_dashboard(state))
+
+    # General return with input field reset
+    return (state, get_stats_html(state["water"], state["energy"], state["co2"], state["points"]), 
+            get_drip_visuals(state["water"]), generate_audio(dialogue), get_impact_cards(impact, category), 
+            f"### {category.upper()}\n{dialogue}", gr.update(visible=show_alts), 
+            gr.update(), gr.update(), gr.update(), gr.update(), gr.update(value=""), 
+            gr.update(visible=True), gr.update(visible=False), gr.update())

game_data.py

@@ -1,4 +1,4 @@
-# Model Baselines (per 1000 tokens)
+# Model Baselines (per 1000 tokens) based on scaling laws [cite: 26, 27]
 MODELS = {
     "Mistral Large 3": {"energy_wh": 1.98, "water_ml": 3.56, "co2_g": 0.95},
     "Mistral Medium 3": {"energy_wh": 6.76, "water_ml": 12.17, "co2_g": 3.24},
@@ -10,7 +10,6 @@ MODELS = {
     "GPT-5.4": {"energy_wh": 169.05, "water_ml": 304.29, "co2_g": 81.14}
 }
 
-# Category Token Multipliers
 CATEGORY_MULTIPLIERS = {
     "simple factual question": 0.05,        
     "mathematical calculation": 0.10,       
@@ -22,31 +21,18 @@ def calculate_impact(category, confidence_score, query_text, model_name):
     model_cost = MODELS.get(model_name, MODELS["Mistral Large 3"])
     cat_mult = CATEGORY_MULTIPLIERS.get(category, 0.05)
     
-    if confidence_score > 0.8:
-        conf_mult = 1.0
-    elif 0.5 <= confidence_score <= 0.8:
-        conf_mult = 1.2
-    else:
-        conf_mult = 1.5
-        
+    # Logic for buffers and length factors [cite: 25, 29]
+    conf_mult = 1.0 if confidence_score > 0.8 else (1.2 if confidence_score > 0.5 else 1.5)
     word_count = len(query_text.split())
-    if word_count < 20:
-        len_factor = 1.0
-    elif 20 <= word_count <= 50:
-        len_factor = 1.3
-    else:
-        len_factor = 1.5
-        
+    len_factor = 1.0 if word_count < 20 else (1.3 if word_count <= 50 else 1.5)
+    
     water_ml = model_cost["water_ml"] * cat_mult * conf_mult * len_factor
     energy_wh = model_cost["energy_wh"] * cat_mult * conf_mult * len_factor
     co2_g = model_cost["co2_g"] * cat_mult * conf_mult * len_factor
     
-    water_l = water_ml / 1000.0
-    energy_kwh = energy_wh / 1000.0
-    
     return {
-        "water_l": round(water_l, 4), 
-        "energy_kwh": round(energy_kwh, 5), 
+        "water_l": water_ml / 1000.0, 
+        "energy_kwh": energy_wh / 1000.0, 
         "water_ml": round(water_ml, 1), 
         "energy_wh": round(energy_wh, 2),
         "co2_g": round(co2_g, 2)