Add updated files

app.py

@@ -200,108 +200,114 @@ 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, total_e_saved, total_c_saved = 0.0, 0.0, 0.0
-    rows = ""
-    for item in state.get("history", []):
-        alt_name = item.get('alt_name', 'None')
-        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
+    try:
+        total_w_saved, total_e_saved, total_c_saved = 0.0, 0.0, 0.0
+        rows = ""
+        for item in state.get("history", []):
+            alt_name = item.get('alt_name', 'None')
+            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
+            
+            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;"><span style='color: #34d399; font-weight: bold;'>{alt_name}</span></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>
+            """
+        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)])
         
-        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;"><span style='color: #34d399; font-weight: bold;'>{alt_name}</span></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>
-        """
-    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)])
-    
-    return f"""
-    <div class="endgame-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!</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>
+        return f"""
+        <div class="endgame-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!</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;">💧 {1.0 - state.get('water', 1.0):.3f} 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>
-                <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;">💧 {1.0 - state.get('water', 1.0):.3f} 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>
+                <h3 style="margin-top: 40px; color: #38bdf8; font-size: 1.8em; text-align: center;">📊 AI Usage Audit Log</h3>
+                <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</th><th style="padding: 15px; color: #34d399;">Alternative Selected</th><th style="padding: 15px; color: #60a5fa;">Resources Saved</th>
+                        </tr>
+                        {rows}
+                    </table>
                 </div>
             </div>
-            <h3 style="margin-top: 40px; color: #38bdf8; font-size: 1.8em; text-align: center;">📊 AI Usage Audit Log</h3>
-            <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</th><th style="padding: 15px; color: #34d399;">Alternative Selected</th><th style="padding: 15px; color: #60a5fa;">Resources Saved</th>
-                    </tr>
-                    {rows}
-                </table>
-            </div>
         </div>
-    </div>
-    """
+        """
+    except Exception as e:
+        return f"<div style='color:red;'>Error generating dashboard: {str(e)}</div>"
 
 def generate_defeat_dashboard(state):
-    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;">"{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>
-        </tr>
-        """
-    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="endgame-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.</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>
+    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;">"{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>
+            </tr>
+            """
+        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="endgame-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.</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>
-                <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>
+                <h3 style="margin-top: 40px; color: #fca5a5; font-size: 1.8em; text-align: center;">🔥 Wasted Resources Log</h3>
+                <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>
-            <h3 style="margin-top: 40px; color: #fca5a5; font-size: 1.8em; text-align: center;">🔥 Wasted Resources Log</h3>
-            <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):
-    # CRITICAL FIX: If game is already over, return empty gr.updates so we don't accidentally hide the endgame screen
+    # CRITICAL FIX: If game is over, return without changing visibility to avoid hiding endgame screen
     if state["game_over"] or not user_input.strip():
-        return [state] + [gr.update()]*14
+        return [state] + [gr.update()]*13
 
     result = classifier(user_input, CATEGORIES)
     category = result['labels'][0]
@@ -346,24 +352,24 @@ def process_query(user_input, selected_model, state):
         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)))
+                gr.update(visible=False), generate_victory_dashboard(state))
     
     # LOSS CONDITION
-    elif state["water"] <= 0.001:  # Using 0.001 to prevent floating point math errors
+    elif state["water"] <= 0.001:
         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)))
+                gr.update(visible=False), generate_defeat_dashboard(state))
 
     # REGULAR GAMEPLAY RETURN
     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=""),
-            gr.update(visible=True), gr.update(visible=False), gr.update())
+            gr.update(visible=True), gr.update())
 
 def select_alternative(choice_text, state):
-    # CRITICAL FIX: Empty gr.updates to prevent UI reset if accidentally clicked after game over
+    # CRITICAL FIX: If game is over, return without changing visibility
     if state["game_over"] or not state.get("current_best_alt"):
-        return [state] + [gr.update()]*6
+        return [state] + [gr.update()]*5
         
     first_line = choice_text.split("\n")[0]
     clean_choice = first_line.split(" ", 1)[1].strip() if " " in first_line else first_line
@@ -382,9 +388,9 @@ def select_alternative(choice_text, state):
     # WIN CONDITION FROM ALTERNATIVE CLICK
     if state["points"] >= 500:
         state["game_over"] = True
-        return state, stats_ui, gr.update(), gr.update(visible=False), gr.update(visible=False), gr.update(visible=True), gr.update(value=generate_victory_dashboard(state))
+        return state, stats_ui, gr.update(), gr.update(visible=False), gr.update(visible=False), generate_victory_dashboard(state)
 
-    return state, stats_ui, gr.update(value=msg), gr.update(visible=False), gr.update(visible=True), gr.update(visible=False), gr.update()
+    return state, stats_ui, gr.update(value=msg), gr.update(visible=False), gr.update(visible=True), gr.update()
 
 # --- 4. CSS STYLING ---
 
@@ -460,6 +466,7 @@ with gr.Blocks(css=custom_css, title="EcoQueryQuest") as demo:
 
     stats_html = gr.HTML(get_stats_html(1.0, 0.0, 0.0, 0))
 
+    # Using standard column; when game is over, we set this to visible=False
     with gr.Column(visible=True) as main_game_ui:
         with gr.Row():
             with gr.Column(scale=1, elem_classes=["drip-pod"]):
@@ -482,27 +489,27 @@ with gr.Blocks(css=custom_css, title="EcoQueryQuest") as demo:
                 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()
+    # The Victory/Defeat screen is ALWAYS attached to the DOM but empty.
+    # When game is over, this populates directly, avoiding Gradio's nested visibility bugs.
+    endgame_display = gr.HTML("")
 
-    # Pressing Enter in the Textbox triggers the same function
     user_input.submit(
         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]
+        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, endgame_display]
     )
 
     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]
+        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, endgame_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]
+            outputs=[game_state, stats_html, alt_feedback, alternatives_group, main_game_ui, endgame_display]
         )
 
 if __name__ == "__main__":