Add updated files

app.py

@@ -8,7 +8,6 @@ from game_data import calculate_impact, MODELS
 from dialogues import get_dialogue
 from alternatives import ALTERNATIVES
 
-# Added flush=True so we can always see this in the Hugging Face logs
 print("Loading classification model...", flush=True)
 classifier = pipeline("zero-shot-classification", model="facebook/bart-large-mnli")
 
@@ -153,69 +152,90 @@ def format_alt_button(text, impact):
     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):
-    total_w_saved = sum(item['water_ml'] for item in state["history"] if item['alt_name'] != "None (Justified Use)")
-    total_e_saved = sum(item['energy_wh'] for item in state["history"] if item['alt_name'] != "None (Justified Use)")
-    total_c_saved = sum(item['co2_g'] for item in state["history"] if item['alt_name'] != "None (Justified Use)")
-    
-    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</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)
-            alt_display = f"<span style='color: #34d399;'>{item['alt_name']}</span>"
-
-        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>
-        """
+    try:
+        total_w_saved = 0.0
+        total_e_saved = 0.0
+        total_c_saved = 0.0
         
-    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>
+        rows = ""
+        for item in state.get("history", []):
+            alt_name = item.get('alt_name', 'None (Justified Use)')
+            if alt_name == "None (Justified Use)":
+                saved_w, saved_e, saved_c = 0.0, 0.0, 0.0
+                alt_display = "<span style='color: #94a3b8; font-style: italic;'>Justified Use (No Alt needed)</span>"
+            else:
+                saved_w = item.get('water_ml', 0.0)
+                saved_e = max(0.0, item.get('energy_wh', 0.0) - 0.001)
+                saved_c = max(0.0, item.get('co2_g', 0.0) - 0.01)
+                
+                total_w_saved += saved_w
+                total_e_saved += saved_e
+                total_c_saved += saved_c
+                alt_display = f"<span style='color: #34d399; font-weight: bold;'>{alt_name}</span>"
+
+            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.get('query', '')}"</td>
+                <td style="padding: 15px; color: #fca5a5; line-height: 1.5;">
+                    💧 {item.get('water_ml', 0):.1f} mL<br>
+                    ⚡ {item.get('energy_wh', 0):.2f} Wh<br>
+                    ☁️ {item.get('co2_g', 0):.2f} g
+                </td>
+                <td style="padding: 15px;">{alt_display}</td>
+                <td style="padding: 15px; color: #60a5fa; font-weight: bold; line-height: 1.5;">
+                    💧 {saved_w:.1f} mL<br>
+                    ⚡ {saved_e:.2f} Wh<br>
+                    ☁️ {saved_c:.2f} g
+                </td>
+            </tr>
+            """
+            
+        # Dynamically generate 50 confetti divs
+        confetti_elements = "".join([f'<div class="confetti-piece" style="left: {random.randint(0, 100)}%; background-color: hsl({random.randint(0, 360)}, 100%, 60%); animation-duration: {random.uniform(2.5, 5)}s; animation-delay: {random.uniform(0, 2)}s;"></div>' for _ in range(60)])
         
-        <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>
+        return f"""
+        <div class="victory-wrapper">
+            {confetti_elements}
+            <div class="victory-dashboard">
+                <h1 class="victory-title">🎉 PLANET SAVED! 🎉</h1>
+                <p style="text-align: center; font-size: 1.3em; color: #a7f3d0; margin-bottom: 30px;">
+                    Congratulations! You reached {state.get('points', 0)} points and prevented Drip from evaporating!
+                </p>
+                
+                <div class="victory-stats-row">
+                    <div class="v-stat-box" style="border-top: 4px solid #34d399;">
+                        <h4 style="color: #34d399;">Planetary Savings</h4>
+                        <p style="color: #34d399; font-size: 1.3em; font-weight: bold; margin: 8px 0;">💧 {total_w_saved:.1f} mL Saved</p>
+                        <p style="color: #facc15; font-size: 1.3em; font-weight: bold; margin: 8px 0;">⚡ {total_e_saved:.2f} Wh Saved</p>
+                        <p style="color: #a8a29e; font-size: 1.3em; font-weight: bold; margin: 8px 0;">☁️ {total_c_saved:.2f} g Saved</p>
+                    </div>
+                    <div class="v-stat-box" style="border-top: 4px solid #fca5a5;">
+                        <h4 style="color: #fca5a5;">Total Wasted</h4>
+                        <p style="color: #fca5a5; font-size: 1.1em; margin: 8px 0;">💧 {10.0 - state.get('water', 10.0):.2f} L</p>
+                        <p style="color: #fca5a5; font-size: 1.1em; margin: 8px 0;">⚡ {state.get('energy', 0):.4f} kWh</p>
+                        <p style="color: #fca5a5; font-size: 1.1em; margin: 8px 0;">☁️ {state.get('co2', 0):.2f} g</p>
+                    </div>
+                </div>
+
+                <h3 style="margin-top: 40px; color: #38bdf8; font-size: 1.8em; text-align: center;">📊 AI Usage Audit Log</h3>
+                <p style="opacity: 0.9; margin-bottom: 20px; text-align: center;">A detailed breakdown of your session's environmental impact and the greener choices you made.</p>
+                
+                <div style="max-height: 500px; overflow-y: auto; background: rgba(15, 23, 42, 0.9); border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); padding: 10px;">
+                    <table style="width: 100%; text-align: left; border-collapse: collapse; font-size: 1.05em;">
+                        <tr style="background: rgba(56, 189, 248, 0.1); border-bottom: 2px solid #38bdf8;">
+                            <th style="padding: 15px; color: #e2e8f0;">User Query</th>
+                            <th style="padding: 15px; color: #fca5a5;">LLM Cost (Wasted)</th>
+                            <th style="padding: 15px; color: #34d399;">Best Alternative</th>
+                            <th style="padding: 15px; color: #60a5fa;">Resources Saved</th>
+                        </tr>
+                        {rows}
+                    </table>
+                </div>
             </div>
         </div>
-
-        <h3 style="margin-top: 40px; color: #38bdf8; font-size: 1.8em;">📊 AI Usage Audit Log</h3>
-        <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>
-                </tr>
-                {rows}
-            </table>
-        </div>
-    </div>
-    """
+        """
+    except Exception as e:
+        return f"<div style='color:red;'>Error generating dashboard: {str(e)}</div>"
 
 def process_query(user_input, selected_model, state):
     if state["game_over"] or not user_input.strip():
@@ -296,10 +316,11 @@ def select_alternative(choice_text, state):
 
     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; }
+.gradio-container { max-width: 1000px !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; }
 
@@ -340,20 +361,19 @@ h1 { text-align: center; color: #38bdf8; text-shadow: 0 0 15px rgba(56, 189, 248
 
 /* 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-wrapper { position: relative; width: 100%; min-height: 600px; overflow: hidden; border-radius: 24px; padding-top: 10px; }
+.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; z-index: 5; margin-top: 20px;}
 .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 Animation */
-.confetti { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; }
-.pyro > .before, .pyro > .after { position: absolute; width: 5px; height: 5px; border-radius: 50%; box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff; animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards; }
-.pyro > .after { animation-delay: 1.25s, 1.25s, 1.25s; animation-duration: 1.25s, 1.25s, 6.25s; }
-@keyframes bang { to { box-shadow: -70px -115.67px #47ff00, -28px -99.67px #00ff2b, 15px -106.67px #00ffdd, -20px -54.67px #ff0073, 5px -144.67px #ff0055, 60px -95.67px #0015ff, 80px -82.67px #ffeb00, 10px -100.67px #ff0022; } }
-@keyframes gravity { to { transform: translateY(200px); opacity: 0; } }
-@keyframes position { 0%, 19.9% { margin-top: 10%; margin-left: 40%; } 20%, 39.9% { margin-top: 40%; margin-left: 30%; } 40%, 59.9% { margin-top: 20%; margin-left: 70%; } 60%, 79.9% { margin-top: 30%; margin-left: 20%; } 80%, 99.9% { margin-top: 30%; margin-left: 80%; } }
+
+/* Pure CSS Confetti Physics */
+.confetti-piece { position: absolute; width: 10px; height: 15px; top: -20px; opacity: 0; animation: fall linear forwards infinite; z-index: 10; border-radius: 2px;}
+@keyframes fall {
+    0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
+    100% { transform: translateY(1000px) rotate(720deg); opacity: 1; }
+}
 """
 
 with gr.Blocks(css=custom_css, title="EcoQueryQuest") as demo:
@@ -405,4 +425,6 @@ with gr.Blocks(css=custom_css, title="EcoQueryQuest") as demo:
             outputs=[game_state, stats_html, alt_feedback, alternatives_group, main_game_ui, victory_ui, victory_display]
         )
 
-demo.launch()
+# Launch with CSS parameter mapping directly to demo launch block
+if __name__ == "__main__":
+    demo.launch(css=custom_css)