Add updated files

app.py

@@ -4,13 +4,12 @@ import random
 from gtts import gTTS
 import os
 
-# Import your local modules (Ensure game_data.py, dialogues.py, alternatives.py exist in the same folder)
 from game_data import calculate_impact
 from dialogues import get_dialogue
 from alternatives import ALTERNATIVES
 
 # --- 1. Load AI Models ---
-print("Loading classification model (facebook/bart-large-mnli)...")
+print("Loading classification model...")
 classifier = pipeline("zero-shot-classification", model="facebook/bart-large-mnli")
 
 CATEGORIES = [
@@ -23,240 +22,238 @@ CATEGORIES = [
 # --- 2. Helper Functions & UI Generators ---
 
 def generate_audio(text):
-    """Generates instant TTS audio using gTTS to prevent CPU timeouts."""
     tts = gTTS(text, lang='en')
     filepath = "temp_drip_voice.mp3"
     tts.save(filepath)
     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="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>
+        <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):
-    """Generates the CSS/HTML for Drip based on dehydration."""
+    """Generates Drip with a glowing aura based on health."""
     if water_level > 70:
-        emoji, size, animation = "💧", "80px", "bounce 2s infinite"
-        status = "Plump & Hydrated"
+        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:
-        emoji, size, animation = "💧", "60px", "none"
-        status = "Shrinking & Tired"
+        emoji, size, anim, glow, status = "💧", "90px", "none", "rgba(56,189,248,0.3)", "Shrinking & Tired"
     elif water_level > 0:
-        emoji, size, animation = "🏜️", "40px", "none"
-        status = "Cracked & Raspy"
+        emoji, size, anim, glow, status = "🏜️", "70px", "none", "rgba(239,68,68,0.4)", "Cracked & Raspy"
     else:
-        emoji, size, animation = "💨", "30px", "none"
-        status = "Evaporated!"
+        emoji, size, anim, glow, status = "💨", "50px", "none", "transparent", "Evaporated!"
         
     return f"""
-    <div style="text-align: center; margin-bottom: 20px;">
-        <div style="font-size: {size}; animation: {animation}; transition: all 0.5s;">{emoji}</div>
-        <h3 style="margin: 0;">Drip Status: {status}</h3>
+    <div class="drip-character" style="box-shadow: 0 0 40px {glow};">
+        <div style="font-size: {size}; animation: {anim}; transition: all 0.5s ease;">{emoji}</div>
+        <h3 style="margin: 10px 0 0 0; color: #e2e8f0; font-weight: 400; font-size: 1rem;">{status}</h3>
     </div>
     """
 
 def get_impact_cards(impact, category):
-    """Generates side-by-side comparison cards."""
-    # Relatable translations
-    water_trans = f"{impact['water']}L is like leaving a tap running for {int(impact['water']*12)} seconds."
-    if impact['water'] >= 5:
-         water_trans = f"{impact['water']}L = A whole day's drinking water for a family."
-    
-    energy_trans = f"{impact['energy']}kWh could charge your phone {int(impact['energy']*100)} times."
-    if impact['energy'] >= 0.5:
-         energy_trans = f"{impact['energy']}kWh = Powering a fridge for several hours."
-
+    """Generates elegant side-by-side impact cards."""
     return f"""
-    <div style="display: flex; gap: 20px; justify-content: center; margin-top: 20px;">
-        <div style="flex: 1; padding: 15px; background: #ffebee; border-left: 5px solid #f44336; border-radius: 5px;">
-            <h3 style="color: #c62828; margin-top: 0;">LLM Impact (Massive Servers)</h3>
-            <p><strong>Water Wasted:</strong> {impact['water']}L</p>
-            <p><strong>Energy Wasted:</strong> {impact['energy']}kWh</p>
-            <p><em>{water_trans}</em></p>
-            <p><em>{energy_trans}</em></p>
+    <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>
         </div>
-        <div style="flex: 1; padding: 15px; background: #e8f5e9; border-left: 5px solid #4caf50; border-radius: 5px;">
-            <h3 style="color: #2e7d32; margin-top: 0;">Eco-Alternative (Local/Search)</h3>
-            <p><strong>Water Wasted:</strong> ~0.0L</p>
-            <p><strong>Energy Wasted:</strong> ~0.001kWh</p>
-            <p><em>Save the planet, use appropriate tools!</em></p>
+        <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>
         </div>
     </div>
     """
 
-def generate_report(state):
-    """Generates the final game over report."""
-    badges = []
-    if state['water'] > 50: badges.append("🌊 Water Warrior")
-    if state['eco_score'] >= 80: badges.append("🌿 Conscious Querier")
-    if not badges: badges.append("🔥 Resource Drainer")
-    
-    return f"""
-    <div style="background: #2c3e50; color: white; padding: 30px; border-radius: 10px; text-align: center;">
-        <h1>Game Over! Here is your AI Audit.</h1>
-        <h2>Final Score: {state['points']} Points</h2>
-        <p>You asked {state['queries']} queries.</p>
-        <p><strong>Total Water Drained:</strong> {100 - state['water']:.2f}L</p>
-        <p><strong>Total Energy Consumed:</strong> {state['energy']:.3f}kWh</p>
-        <p><strong>Eco-Score:</strong> {state['eco_score']:.1f}%</p>
-        <h3>Badges Earned:</h3>
-        <h2>{' | '.join(badges)}</h2>
-        <p style="margin-top: 20px; font-size: 0.9em;"><em>Tip: Match the tool to the task. Don't use a supercomputer to ask for a recipe! Review the UNESCO guidelines on proportional AI usage.</em></p>
-    </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 = "📝"
+    return f"{icon}\n{text}"
 
 # --- 3. Core Game Logic ---
 
 def process_query(user_input, state):
     if state["game_over"] or not user_input.strip():
-        return state, gr.update(), gr.update(), gr.update(), gr.update(), gr.update(), gr.update(), gr.update(visible=False), gr.update(visible=False)
+        return [state, gr.update()] + [gr.update()]*9
 
-    # 1. Classification & Impact Calculation
     result = classifier(user_input, CATEGORIES)
     category = result['labels'][0]
     confidence = result['scores'][0]
     
     impact = calculate_impact(category, confidence, user_input)
     
-    # 2. Update Basic State
     state["queries"] += 1
     state["water"] = max(0, state["water"] - impact["water"])
     state["energy"] += impact["energy"]
-    state["history"].append(category)
-
-    # 3. Category Specific Logic (Points & Alternatives)
+    
     show_alts = False
-    alt_choices = []
-    correct_alt = None
+    alt_choices = ["", "", ""]
     
     if category == "complex research query":
-        # Justified use: +50 points, no alternatives needed
         state["points"] += 50
-        dialogue = "Finally, a real question! This is what my servers were built for. Draining, but worth it."
+        dialogue = "Finally, a real question! Draining my servers, but totally justified."
     else:
-        # Unjustified/Avoidable: Fetch alternatives
         show_alts = True
-        alt_choices = ALTERNATIVES.get(category, ["Google", "Wikipedia", "Book"])
-        correct_alt = alt_choices[0] # For MVP, the first item in the list is the "best" one
-        random.shuffle(alt_choices) # Shuffle so it's not always button 1
-        state["current_best_alt"] = correct_alt
-        
-        # Get sarcastic Drip dialogue based on water level
+        raw_alts = ALTERNATIVES.get(category, ["Google", "Wikipedia", "Book"])
+        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
         dialogue = get_dialogue(state["water"], category)
 
-    # 4. Generate outputs
+    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}*"
     
-    # Check Win/Loss
     if state["points"] >= 500 or state["water"] <= 0:
         state["game_over"] = True
-        return (state, drip_ui, gr.update(value=state["water"]), gr.update(value=f"{state['energy']:.3f} kWh"), 
-                generate_report(state), gr.update(visible=False), audio_path, gr.update(visible=False), gr.update(visible=False))
-
-    # Return updated UI components
-    if show_alts:
-        return (state, drip_ui, gr.update(value=state["water"]), gr.update(value=f"{state['energy']:.3f} kWh"), 
-                impact_ui, gr.update(value=f"**{category.upper()}** Detected! {dialogue}"), audio_path, 
-                gr.update(visible=True), gr.update(value=alt_choices[0]), gr.update(value=alt_choices[1]), gr.update(value=alt_choices[2]))
-    else:
-        return (state, drip_ui, gr.update(value=state["water"]), gr.update(value=f"{state['energy']:.3f} kWh"), 
-                impact_ui, gr.update(value=f"**{category.upper()}** Detected! {dialogue}"), audio_path, 
-                gr.update(visible=False), gr.update(), gr.update(), gr.update())
+        return (state, stats_ui, drip_ui, audio_path, impact_ui, gr.update(value="## Game Over! Check your score."), gr.update(visible=False), gr.update(), gr.update(), gr.update(), gr.update())
 
+    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=""))
 
-def select_alternative(choice, state):
-    """Handles logic when a user clicks an Eco-Alternative button."""
+def select_alternative(choice_text, state):
     if state["game_over"] or not state.get("current_best_alt"):
-        return state, gr.update()
+        return state, gr.update(), gr.update(), gr.update()
         
-    msg = ""
-    if choice == state["current_best_alt"]:
+    # Strip the emoji from the button text to compare with the raw dictionary string
+    clean_choice = choice_text.split("\n")[-1] 
+    
+    if clean_choice == state["current_best_alt"]:
         state["points"] += 10
-        state["eco_choices"] += 1
-        msg = "✅ **Great choice!** You earned +10 Eco Points for picking the right tool for the job."
+        msg = "✅ **Excellent!** +10 Points. You saved massive server resources."
     else:
-        msg = "❌ **Not quite.** That works, but there was a better eco-friendly option. Still better than an LLM though!"
+        msg = "⚠️ **Okay choice.** It's better than an LLM, but there was a slightly more optimal tool for this specific task."
     
-    # Update Eco-Score
-    state["eco_score"] = (state["eco_choices"] / state["queries"]) * 100 if state["queries"] > 0 else 0
+    stats_ui = get_stats_html(state["water"], state["energy"], state["points"])
     
-    # Hide alternatives after selection
-    return state, gr.update(value=msg), gr.update(visible=False)
+    return state, stats_ui, gr.update(value=msg), gr.update(visible=False)
 
-
-# --- 4. Gradio Interface Layout ---
+# --- 4. Beautiful Frontend Layout ---
 
 custom_css = """
-.gradio-container { max-width: 800px !important; margin: auto; }
-.progress-bar-container { background: #e0e0e0; border-radius: 10px; height: 30px; width: 100%; overflow: hidden; margin-top: 5px; }
-.progress-bar { background: #2196f3; height: 100%; transition: width 0.5s ease-in-out; }
+@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; }
+.energy-card { box-shadow: 0 4px 20px rgba(250, 204, 21, 0.15); border-top: 2px solid #facc15; }
+.points-card { box-shadow: 0 4px 20px rgba(52, 211, 153, 0.15); border-top: 2px solid #34d399; }
+.stat-label { font-size: 0.8em; letter-spacing: 1.5px; opacity: 0.8; margin-bottom: 5px; }
+.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; }
+.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: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;}
 """
 
 with gr.Blocks(css=custom_css, title="EcoQueryQuest") as demo:
-    
-    # Initialize Game State
     game_state = gr.State({
         "water": 100.0, "energy": 0.0, "points": 0, "queries": 0, 
-        "eco_choices": 0, "eco_score": 0.0, "history": [], "game_over": False,
-        "current_best_alt": None
+        "history": [], "game_over": False, "current_best_alt": None, "current_shuffled_alts": []
     })
 
-    gr.Markdown("# 🌍 EcoQueryQuest")
-    gr.Markdown("Type your query below. Watch Drip (💧) react to the environmental cost of your prompt! Reach 500 points to win, but don't run out of water.")
+    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>")
+
+    # TOP: Dashboard Stats
+    stats_html = gr.HTML(get_stats_html(100.0, 0.0, 0))
 
-    # TOP SECTION: Visuals & Trackers
     with gr.Row():
-        with gr.Column(scale=1):
+        # LEFT: Drip Character & Audio Integrated
+        with gr.Column(scale=1, elem_classes=["drip-pod"]):
             drip_html = gr.HTML(get_drip_visuals(100))
-        with gr.Column(scale=2):
-            gr.Markdown("### 🚰 Water Tank (100L Limit)")
-            water_slider = gr.Slider(minimum=0, maximum=100, value=100, interactive=False, show_label=False)
-            gr.Markdown("### ⚡ Energy Wasted")
-            energy_text = gr.Textbox(value="0.000 kWh", interactive=False, show_label=False)
-            gr.Markdown("### 🏆 Points")
-            points_text = gr.Textbox(value="0", interactive=False, show_label=False)
-
-    # MIDDLE SECTION: Interaction
-    with gr.Group() as interaction_group:
-        user_input = gr.Textbox(label="Ask an AI a question...", placeholder="e.g., What is 25 * 42? or Write me a poem about dogs.")
-        submit_btn = gr.Button("Send Query", variant="primary")
+            drip_audio = gr.Audio(label="Drip's Voice", autoplay=True, interactive=False, elem_classes=["drip-audio"], show_download_button=False, show_share_button=False)
         
-    main_display_html = gr.HTML()
-    drip_dialogue_text = gr.Markdown()
-    drip_audio = gr.Audio(label="Drip's Reaction", autoplay=True, interactive=False)
+        # RIGHT: Interaction & Feedback
+        with gr.Column(scale=2):
+            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)
+                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 SECTION: Alternatives (Hidden by default)
-    with gr.Group(visible=False) as alternatives_group:
-        gr.Markdown("### ⏳ Drip says: 'Choose a better alternative to save me!'")
+    # 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("Alt 1")
-            alt_btn_2 = gr.Button("Alt 2")
-            alt_btn_3 = gr.Button("Alt 3")
-        alt_feedback = gr.Markdown()
+            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"])
 
     # EVENT WIRING
-    
-    # 1. Submit Query
     submit_btn.click(
         fn=process_query,
         inputs=[user_input, game_state],
-        outputs=[game_state, drip_html, water_slider, energy_text, main_display_html, drip_dialogue_text, drip_audio, alternatives_group, alt_btn_1, alt_btn_2, alt_btn_3]
-    ).then(
-        fn=lambda s: gr.update(value=str(s["points"])), # Update points UI after processing
-        inputs=[game_state],
-        outputs=[points_text]
+        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]
     )
 
-    # 2. Click Alternative Buttons
     for btn in [alt_btn_1, alt_btn_2, alt_btn_3]:
         btn.click(
             fn=select_alternative,
             inputs=[btn, game_state],
-            outputs=[game_state, alt_feedback, alternatives_group]
-        ).then(
-            fn=lambda s: gr.update(value=str(s["points"])), # Update points UI after clicking alternative
-            inputs=[game_state],
-            outputs=[points_text]
+            outputs=[game_state, stats_html, alt_feedback, alternatives_group]
         )
 
-# Launch the app
 if __name__ == "__main__":
     demo.launch()