Add updated files

app.py

@@ -292,6 +292,66 @@ def generate_victory_dashboard(state):
     except Exception as e:
         return f"<div style='color:red;'>Error generating dashboard: {str(e)}</div>"
 
+def generate_defeat_dashboard(state):
+    """Generates a dark, Game Over report when Drip evaporates."""
+    try:
+        rows = ""
+        for item in state.get("history", []):
+            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; color: #e2e8f0;">"{item.get('query', '')}"</td>
+                <td style="padding: 15px; color: #fca5a5; font-weight: bold; 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>
+            </tr>
+            """
+            
+        # Dynamically generate rising "ash/steam" particles
+        ash_elements = "".join([f'<div class="ash-piece" style="left: {random.randint(0, 100)}%; animation-duration: {random.uniform(3, 6)}s; animation-delay: {random.uniform(0, 2)}s;"></div>' for _ in range(60)])
+        
+        return f"""
+        <div class="victory-wrapper">
+            {ash_elements}
+            <div class="defeat-dashboard">
+                <h1 class="defeat-title">💀 DRIP EVAPORATED! 💀</h1>
+                <p style="text-align: center; font-size: 1.3em; color: #fca5a5; margin-bottom: 30px;">
+                    You ran out of water before reaching 500 points. The planet's resources have been drained!
+                </p>
+                
+                <div class="victory-stats-row">
+                    <div class="v-stat-box" style="border-top: 4px solid #ef4444; background: rgba(239, 68, 68, 0.1);">
+                        <h4 style="color: #ef4444;">Total Resources Wasted</h4>
+                        <p style="color: #fca5a5; font-size: 1.3em; font-weight: bold; margin: 8px 0;">💧 1.0 L (Tank Empty)</p>
+                        <p style="color: #fca5a5; font-size: 1.3em; font-weight: bold; margin: 8px 0;">⚡ {state.get('energy', 0):.4f} kWh</p>
+                        <p style="color: #fca5a5; font-size: 1.3em; font-weight: bold; margin: 8px 0;">☁️ {state.get('co2', 0):.2f} g</p>
+                    </div>
+                    <div class="v-stat-box" style="border-top: 4px solid #94a3b8;">
+                        <h4 style="color: #94a3b8;">Final Score</h4>
+                        <p style="color: white; font-size: 3.5em; font-weight: bold; margin: 10px 0;">{state.get('points', 0)}</p>
+                    </div>
+                </div>
+
+                <h3 style="margin-top: 40px; color: #fca5a5; font-size: 1.8em; text-align: center;">🔥 Wasted Resources Log</h3>
+                <p style="opacity: 0.9; margin-bottom: 20px; text-align: center; color: #e2e8f0;">See exactly where your massive LLM compute drained Drip's tank.</p>
+                
+                <div style="max-height: 400px; overflow-y: auto; background: rgba(15, 23, 42, 0.9); border-radius: 12px; border: 1px solid rgba(239, 68, 68, 0.3); padding: 10px;">
+                    <table style="width: 100%; text-align: left; border-collapse: collapse; font-size: 1.05em;">
+                        <tr style="background: rgba(239, 68, 68, 0.15); border-bottom: 2px solid #ef4444;">
+                            <th style="padding: 15px; color: #fca5a5;">User Query</th>
+                            <th style="padding: 15px; color: #fca5a5;">Resources Drained</th>
+                        </tr>
+                        {rows}
+                    </table>
+                </div>
+            </div>
+        </div>
+        """
+    except Exception as e:
+        return f"<div style='color:red;'>Error generating dashboard: {str(e)}</div>"
+    
+
 # --- 3. EVENT HANDLERS ---
 
 def process_query(user_input, selected_model, state):
@@ -336,11 +396,19 @@ def process_query(user_input, selected_model, state):
     audio_path = generate_audio(dialogue)
     feedback_text = f"<div class='feedback-box'>🧠 <strong>{category.upper()}</strong> Detected!<br><br><em>\"{dialogue}\"</em></div>"
     
-    if state["points"] >= 500 or state["water"] <= 0:
+    # Check for WIN condition
+    if state["points"] >= 500:
         state["game_over"] = True
         return (state, stats_ui, drip_ui, audio_path, impact_ui, gr.update(), gr.update(visible=False), 
                 gr.update(), gr.update(), gr.update(), gr.update(), gr.update(value=""),
                 gr.update(visible=False), gr.update(visible=True), gr.update(value=generate_victory_dashboard(state)))
+    
+    # Check for LOSS condition
+    elif state["water"] <= 0:
+        state["game_over"] = True
+        return (state, stats_ui, drip_ui, audio_path, impact_ui, gr.update(), gr.update(visible=False), 
+                gr.update(), gr.update(), gr.update(), gr.update(), gr.update(value=""),
+                gr.update(visible=False), gr.update(visible=True), gr.update(value=generate_defeat_dashboard(state)))
 
     return (state, stats_ui, drip_ui, audio_path, impact_ui, gr.update(value=feedback_text), gr.update(visible=True), 
             gr.update(value=alt_choices[0], visible=True), gr.update(value=alt_choices[1], visible=True), gr.update(value=alt_choices[2], visible=True), gr.update(value=""), gr.update(value=""),
@@ -428,6 +496,17 @@ h1 { text-align: center; color: #38bdf8; text-shadow: 0 0 15px rgba(56, 189, 248
     0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
     100% { transform: translateY(1000px) rotate(720deg); opacity: 1; }
 }
+
+/* Defeat Dashboard & Animations */
+@keyframes pulseRed { 0% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.4); } 50% { box-shadow: 0 0 60px rgba(239, 68, 68, 0.8); } 100% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.4); } }
+.defeat-dashboard { background: linear-gradient(135deg, #2b1010, #450a0a); padding: 40px; border-radius: 24px; border: 2px solid #ef4444; animation: pulseRed 2s infinite; color: white; position: relative; z-index: 5; margin-top: 20px; }
+.defeat-title { text-align: center; color: #ef4444; font-size: 3.5em !important; text-shadow: 0 0 20px rgba(239, 68, 68, 0.8); margin-bottom: 5px; }
+.ash-piece { position: absolute; width: 8px; height: 8px; background-color: rgba(156, 163, 175, 0.6); border-radius: 50%; opacity: 0; animation: floatAsh linear forwards infinite; z-index: 10; filter: blur(1px); }
+@keyframes floatAsh {
+    0% { transform: translateY(600px) scale(1); opacity: 0; }
+    20% { opacity: 0.8; }
+    100% { transform: translateY(-100px) scale(2); opacity: 0; }
+}
 """
 
 with gr.Blocks(css=custom_css, title="EcoQueryQuest") as demo: