Add updated files

alternatives.py

@@ -1,18 +1,18 @@
 ALTERNATIVES = {
     "simple factual question": [
-        "Use a traditional Search Engine (like Google Search)",
-        "Check Wikipedia or an offline encyclopedia",
-        "Consult a subject-matter expert or ask a friend"
+        {"text": "Search Engine (Google)", "url": "https://www.google.com"},
+        {"text": "Wikipedia Encyclopedia", "url": "https://www.wikipedia.org"},
+        {"text": "Ask a Human Expert (Quora)", "url": "https://www.quora.com"}
     ],
     "mathematical calculation": [
-        "Use a dedicated math engine like Wolfram Alpha",
-        "Fire up Geogebra or a standard calculator app",
-        "Solve it on good old-fashioned paper"
+        {"text": "Wolfram Alpha Engine", "url": "https://www.wolframalpha.com"},
+        {"text": "Geogebra Calculator", "url": "https://www.geogebra.org"},
+        {"text": "Desmos Graphing", "url": "https://www.desmos.com"}
     ],
     "creative content generation": [
-        "Brainstorm with a notebook and pen",
-        "Use offline writing prompts or a dictionary/thesaurus",
-        "Listen to a podcast or read a book for inspiration"
+        {"text": "Writing Prompts (Reddit)", "url": "https://www.reddit.com/r/WritingPrompts/"},
+        {"text": "Thesaurus/Dictionary", "url": "https://www.thesaurus.com"},
+        {"text": "Project Gutenberg Books", "url": "https://www.gutenberg.org"}
     ],
     "complex research query": [] 
 }

app.py

@@ -4,11 +4,10 @@ import random
 from gtts import gTTS
 import os
 
-from game_data import calculate_impact
+from game_data import calculate_impact, MODELS
 from dialogues import get_dialogue
 from alternatives import ALTERNATIVES
 
-# --- 1. Load AI Models ---
 print("Loading classification model...")
 classifier = pipeline("zero-shot-classification", model="facebook/bart-large-mnli")
 
@@ -19,8 +18,6 @@ CATEGORIES = [
     "complex research query"
 ]
 
-# --- 2. Helper Functions & UI Generators ---
-
 def generate_audio(text):
     tts = gTTS(text, lang='en')
     filepath = "temp_drip_voice.mp3"
@@ -28,19 +25,18 @@ def generate_audio(text):
     return filepath
 
 def get_stats_html(water, energy, points):
-    """Generates the glowing dashboard gauges for the top row."""
     return f"""
     <div class="stats-container">
         <div class="stat-card water-card">
             <div class="stat-label">WATER TANK</div>
-            <div class="stat-value">{water:.1f}L</div>
+            <div class="stat-value">{water:.2f}L</div>
             <div class="progress-bar-bg">
                 <div class="progress-bar-fill" style="width: {water}%;"></div>
             </div>
         </div>
         <div class="stat-card energy-card">
             <div class="stat-label">ENERGY WASTED</div>
-            <div class="stat-value">{energy:.3f} <span style="font-size: 0.5em;">kWh</span></div>
+            <div class="stat-value">{energy:.4f} <span style="font-size: 0.5em;">kWh</span></div>
         </div>
         <div class="stat-card points-card">
             <div class="stat-label">SCORE</div>
@@ -50,7 +46,6 @@ def get_stats_html(water, energy, points):
     """
 
 def get_drip_visuals(water_level):
-    """Generates Drip with a glowing aura based on health."""
     if water_level > 70:
         emoji, size, anim, glow, status = "💧", "120px", "float 3s ease-in-out infinite", "rgba(56,189,248,0.6)", "Plump & Hydrated"
     elif 30 <= water_level <= 70:
@@ -68,35 +63,33 @@ def get_drip_visuals(water_level):
     """
 
 def get_impact_cards(impact, category):
-    """Generates elegant side-by-side impact cards."""
     return f"""
     <div class="impact-container">
         <div class="impact-card bad-impact">
-            <h3 style="margin: 0 0 10px 0; color: #fca5a5;">🔥 LLM Impact (Massive Servers)</h3>
-            <p style="margin:5px 0; font-size:1.2em;"><strong>{impact['water']}L</strong> Water | <strong>{impact['energy']}kWh</strong> Energy</p>
-            <p style="margin:0; font-size:0.9em; opacity: 0.8;">Drains actual reservoirs to cool data centers.</p>
+            <h3 style="margin: 0 0 10px 0; color: #fca5a5;">🔥 LLM Impact</h3>
+            <p style="margin:5px 0; font-size:1.2em;"><strong>{impact['water_ml']} mL</strong> Water</p>
+            <p style="margin:5px 0; font-size:1.2em;"><strong>{impact['energy_wh']} Wh</strong> Energy</p>
+            <p style="margin:0; font-size:0.9em; opacity: 0.8;">Deducted from global reserves.</p>
         </div>
         <div class="impact-card good-impact">
             <h3 style="margin: 0 0 10px 0; color: #86efac;">🌿 Eco-Alternative</h3>
-            <p style="margin:5px 0; font-size:1.2em;"><strong>~0.0L</strong> Water | <strong>~0.001kWh</strong> Energy</p>
-            <p style="margin:0; font-size:0.9em; opacity: 0.8;">Use local processing or targeted searches.</p>
+            <p style="margin:5px 0; font-size:1.2em;"><strong>~0.0 mL</strong> Water</p>
+            <p style="margin:5px 0; font-size:1.2em;"><strong>~0.001 Wh</strong> Energy</p>
+            <p style="margin:0; font-size:0.9em; opacity: 0.8;">Near-zero footprint.</p>
         </div>
     </div>
     """
 
 def format_alt_button(text):
-    """Adds formatting to make alternative text look like a card."""
     icon = "💡"
     if "Search" in text or "Google" in text: icon = "🔍"
-    elif "Wikipedia" in text or "encyclopedia" in text: icon = "📚"
-    elif "expert" in text or "friend" in text: icon = "👤"
-    elif "calculator" in text or "Wolfram" in text: icon = "🧮"
-    elif "pen" in text or "paper" in text or "notebook" 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}"
 
-# --- 3. Core Game Logic ---
-
-def process_query(user_input, state):
+def process_query(user_input, selected_model, state):
     if state["game_over"] or not user_input.strip():
         return [state, gr.update()] + [gr.update()]*9
 
@@ -104,32 +97,32 @@ def process_query(user_input, state):
     category = result['labels'][0]
     confidence = result['scores'][0]
     
-    impact = calculate_impact(category, confidence, user_input)
+    impact = calculate_impact(category, confidence, user_input, selected_model)
     
     state["queries"] += 1
-    state["water"] = max(0, state["water"] - impact["water"])
-    state["energy"] += impact["energy"]
+    state["water"] = max(0, state["water"] - impact["water_l"])
+    state["energy"] += impact["energy_kwh"]
     
     show_alts = False
     alt_choices = ["", "", ""]
     
     if category == "complex research query":
         state["points"] += 50
-        dialogue = "Finally, a real question! Draining my servers, but totally justified."
+        dialogue = f"Finally, a real question! Draining my {selected_model} servers, but totally justified."
     else:
         show_alts = True
-        raw_alts = ALTERNATIVES.get(category, ["Google", "Wikipedia", "Book"])
+        raw_alts = ALTERNATIVES.get(category, [{"text": "Google", "url": "https://google.com"}])
         state["current_best_alt"] = raw_alts[0] 
         random.shuffle(raw_alts)
-        alt_choices = [format_alt_button(a) for a in raw_alts]
-        state["current_shuffled_alts"] = raw_alts # Store raw text to check answers
+        state["current_shuffled_alts"] = raw_alts
+        alt_choices = [format_alt_button(a["text"]) for a in raw_alts]
         dialogue = get_dialogue(state["water"], category)
 
     stats_ui = get_stats_html(state["water"], state["energy"], state["points"])
     drip_ui = get_drip_visuals(state["water"])
     impact_ui = get_impact_cards(impact, category)
     audio_path = generate_audio(dialogue)
-    feedback_text = f"### 🧠 **{category.upper()}** Detected!\n*{dialogue}*"
+    feedback_text = f"### 🧠 **{category.upper()}** Detected on **{selected_model}**!\n*{dialogue}*"
     
     if state["points"] >= 500 or state["water"] <= 0:
         state["game_over"] = True
@@ -142,33 +135,25 @@ 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()
         
-    # Strip the emoji from the button text to compare with the raw dictionary string
     clean_choice = choice_text.split("\n")[-1] 
+    selected_dict = next((item for item in state["current_shuffled_alts"] if item["text"] == clean_choice), None)
     
-    if clean_choice == state["current_best_alt"]:
+    if clean_choice == state["current_best_alt"]["text"]:
         state["points"] += 10
-        msg = "✅ **Excellent!** +10 Points. You saved massive server resources."
+        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 = "⚠️ **Okay choice.** It's better than an LLM, but there was a slightly more optimal tool for this specific task."
+        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["points"])
     
     return state, stats_ui, gr.update(value=msg), gr.update(visible=False)
 
-# --- 4. Beautiful Frontend Layout ---
-
 custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;700&display=swap');
-
-/* Main Theme */
 body, .gradio-container { background-color: #0B1120 !important; font-family: 'Outfit', sans-serif !important; color: #e2e8f0 !important; }
 .gradio-container { max-width: 900px !important; margin: auto; padding-top: 20px; }
-
-/* Typography & Headers */
 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; }
-
-/* Dashboard Stats */
 .stats-container { display: flex; gap: 15px; justify-content: space-between; margin-bottom: 20px; }
 .stat-card { flex: 1; padding: 15px; border-radius: 16px; text-align: center; background: rgba(30, 41, 59, 0.6); backdrop-filter: blur(10px); 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; }
@@ -178,73 +163,62 @@ h1 { text-align: center; color: #38bdf8; text-shadow: 0 0 15px rgba(56, 189, 248
 .stat-value { font-size: 2em; 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; }
-
-/* Integrated Drip Pod (Character + Audio) */
 .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; justify-content: center; box-shadow: inset 0 0 40px rgba(0,0,0,0.5); }
 .drip-character { width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(56,189,248,0.15) 0%, transparent 70%); display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 10px; }
 @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } }
-
-/* Customize the Audio Player to blend in */
-.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); /* Tricks to make default audio player match dark theme */ }
-
-/* Input Area */
-.input-row { align-items: stretch !important; margin: 20px 0; }
+.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); }
+.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: 0 0 15px rgba(56, 189, 248, 0.1) !important; padding: 15px !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; }
+.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%; }
 .custom-btn:hover { box-shadow: 0 0 20px rgba(56, 189, 248, 0.6) !important; transform: scale(1.02); }
-
-/* Impact Cards */
 .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; }
-
-/* Interactive Alternative Cards */
 .alt-group { padding: 20px; background: rgba(16, 185, 129, 0.05); border-radius: 16px; border: 1px dashed #10b981; margin-top: 20px;}
 .alt-card { background: rgba(30, 41, 59, 0.8) !important; border: 1px solid #10b981 !important; color: #a7f3d0 !important; height: 120px !important; border-radius: 16px !important; font-size: 1.1em !important; white-space: pre-wrap !important; transition: all 0.2s ease !important; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;}
 .alt-card:hover { background: rgba(16, 185, 129, 0.2) !important; transform: translateY(-5px) !important; box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4) !important; color: white !important;}
+/* Dropdown styling for dark theme */
+.custom-dropdown { background: rgba(30, 41, 59, 0.8) !important; border: 1px solid #38bdf8 !important; border-radius: 12px !important; }
 """
 
-with gr.Blocks(css=custom_css, title="EcoQueryQuest") as demo:
+with gr.Blocks(title="EcoQueryQuest") as demo:
     game_state = gr.State({
         "water": 100.0, "energy": 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'>Type a query. Watch Drip react. Reach 500 points to win, but don't run out of water!</div>")
+    gr.Markdown("<div class='subtitle'>Select a model, type a query, and watch Drip react. Reach 500 points to win!</div>")
 
-    # TOP: Dashboard Stats
     stats_html = gr.HTML(get_stats_html(100.0, 0.0, 0))
 
     with gr.Row():
-        # LEFT: Drip Character & Audio Integrated
         with gr.Column(scale=1, elem_classes=["drip-pod"]):
             drip_html = gr.HTML(get_drip_visuals(100))
             drip_audio = gr.Audio(label="Drip's Voice", autoplay=True, interactive=False, elem_classes=["drip-audio"])
-            
-        # RIGHT: Interaction & Feedback
+        
         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="Write an email to my manager asking for sick leave...", elem_classes=["custom-textbox"], scale=4)
+                user_input = gr.Textbox(show_label=False, placeholder="Type your query here...", elem_classes=["custom-textbox"], scale=4)
                 submit_btn = gr.Button("Send Query", elem_classes=["custom-btn"], scale=1)
             
             drip_feedback = gr.Markdown("### Waiting for your first query...")
             impact_display = gr.HTML()
 
-    # BOTTOM: Interactive Alternatives Section
     with gr.Group(visible=False, elem_classes=["alt-group"]) as alternatives_group:
         gr.Markdown("<h3 style='text-align:center; color:#34d399; margin-bottom: 15px;'>🌱 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(elem_classes=["glow-text"])
+        alt_feedback = gr.Markdown()
 
-    # EVENT WIRING
     submit_btn.click(
         fn=process_query,
-        inputs=[user_input, game_state],
+        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]
     )
 
@@ -256,4 +230,4 @@ with gr.Blocks(css=custom_css, title="EcoQueryQuest") as demo:
         )
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(css=custom_css)

game_data.py

@@ -1,34 +1,56 @@
-# Base costs mapping: {"category": {"water": L, "energy": kWh}}
-BASE_COSTS = {
-    "simple factual question": {"water": 0.5, "energy": 0.01},
-    "mathematical calculation": {"water": 0.3, "energy": 0.005},
-    "creative content generation": {"water": 5.0, "energy": 0.5},
-    "complex research query": {"water": 10.0, "energy": 1.0}
+# Model Baselines (per 1000 tokens)
+MODELS = {
+    "Mistral Large 3": {"energy_wh": 1.98, "water_ml": 3.56},
+    "Mistral Medium 3": {"energy_wh": 6.76, "water_ml": 12.17},
+    "Claude Sonnet 4.6": {"energy_wh": 19.32, "water_ml": 34.78},
+    "Gemini 3 Pro": {"energy_wh": 72.45, "water_ml": 130.41},
+    "Gemini 3.1 Pro": {"energy_wh": 77.28, "water_ml": 139.10},
+    "Claude Opus 4.6": {"energy_wh": 96.60, "water_ml": 173.88},
+    "GPT-5.2": {"energy_wh": 144.90, "water_ml": 260.82},
+    "GPT-5.4": {"energy_wh": 169.05, "water_ml": 304.29}
 }
 
-def get_confidence_multiplier(confidence_score):
+# Category Token Multipliers
+CATEGORY_MULTIPLIERS = {
+    "simple factual question": 0.05,        # 50 tokens
+    "mathematical calculation": 0.10,       # 100 tokens
+    "creative content generation": 0.80,    # 800 tokens
+    "complex research query": 1.50          # 1500 tokens
+}
+
+def calculate_impact(category, confidence_score, query_text, model_name):
+    # Get base costs
+    model_cost = MODELS.get(model_name, MODELS["Mistral Large 3"])
+    cat_mult = CATEGORY_MULTIPLIERS.get(category, 0.05)
+    
+    # 1. Confidence Multiplier
     if confidence_score > 0.8:
-        return 1.0
+        conf_mult = 1.0
     elif 0.5 <= confidence_score <= 0.8:
-        return 1.2  # Add 20% uncertainty buffer
+        conf_mult = 1.2
     else:
-        return 1.5  # Add 50% buffer
-
-def get_length_factor(query_text):
+        conf_mult = 1.5
+        
+    # 2. Length Factor
     word_count = len(query_text.split())
     if word_count < 20:
-        return 1.0
+        len_factor = 1.0
     elif 20 <= word_count <= 50:
-        return 1.3
+        len_factor = 1.3
     else:
-        return 1.5
-
-def calculate_impact(category, confidence_score, query_text):
-    base_cost = BASE_COSTS.get(category, {"water": 0, "energy": 0})
-    conf_mult = get_confidence_multiplier(confidence_score)
-    len_factor = get_length_factor(query_text)
-
-    water_impact = base_cost["water"] * conf_mult * len_factor
-    energy_impact = base_cost["energy"] * conf_mult * len_factor
-
-    return {"water": round(water_impact, 2), "energy": round(energy_impact, 3)}
+        len_factor = 1.5
+        
+    # 3. Final Calculation Formula
+    water_ml = model_cost["water_ml"] * cat_mult * conf_mult * len_factor
+    energy_wh = model_cost["energy_wh"] * cat_mult * conf_mult * len_factor
+    
+    # Convert for main tank UI (Liters and kWh)
+    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_ml": round(water_ml, 1), 
+        "energy_wh": round(energy_wh, 2)
+    }