Add updated files

app.py

@@ -24,7 +24,7 @@ def generate_audio(text):
     tts.save(filepath)
     return filepath
 
-def get_stats_html(water, energy, points):
+def get_stats_html(water, energy, co2, points):
     return f"""
     <div class="stats-container">
         <div class="stat-card water-card">
@@ -38,6 +38,10 @@ def get_stats_html(water, energy, points):
             <div class="stat-label">ENERGY WASTED</div>
             <div class="stat-value">{energy:.4f} <span style="font-size: 0.5em;">kWh</span></div>
         </div>
+        <div class="stat-card co2-card">
+            <div class="stat-label">CARBON (CO₂e)</div>
+            <div class="stat-value">{co2:.2f}g</div>
+        </div>
         <div class="stat-card points-card">
             <div class="stat-label">SCORE</div>
             <div class="stat-value">{points}</div>
@@ -46,33 +50,27 @@ def get_stats_html(water, energy, points):
     """
 
 def get_drip_visuals(water_level):
-    """Generates the advanced SVG Drip character with dynamic expressions."""
-    
     if water_level > 70:
-        # Happy, Plump
         g_start, g_end = "#7dd3fc", "#0369a1"
-        mouth_d = "M43 112 Q60 122 77 112" # Smile
+        mouth_d = "M43 112 Q60 122 77 112"
         cracks_op, sweat_op, tear_op = "0", "0", "0"
         mood, mood_color = "Hydrated and (barely) coping", "rgb(34, 211, 238)"
         anim = "bounce 2s infinite ease-in-out"
     elif 30 <= water_level <= 70:
-        # Tired, Sweaty
         g_start, g_end = "#38bdf8", "#0284c7"
-        mouth_d = "M43 112 Q60 110 77 112" # Flat / Unamused
-        cracks_op, sweat_op, tear_op = "0", "1", "0" # Show sweat
+        mouth_d = "M43 112 Q60 110 77 112"
+        cracks_op, sweat_op, tear_op = "0", "1", "0"
         mood, mood_color = "Shrinking & Sweaty", "#0ea5e9"
         anim = "float 4s infinite ease-in-out"
     elif water_level > 0:
-        # Overheating, Red, Cracked, Crying
         g_start, g_end = "#fca5a5", "#b91c1c"
-        mouth_d = "M43 116 Q60 102 77 116" # Frown
-        cracks_op, sweat_op, tear_op = "1", "0", "1" # Show cracks and tear
+        mouth_d = "M43 116 Q60 102 77 116"
+        cracks_op, sweat_op, tear_op = "1", "0", "1"
         mood, mood_color = "Overheating & Raspy", "#ef4444"
         anim = "shake 0.5s infinite"
     else:
-        # Evaporated
-        g_start, g_end = "#94a3b8", "#334155" # Gray out
-        mouth_d = "M40 112 Q45 105 50 112 T60 112 T70 112 T80 112" # Squiggly mouth
+        g_start, g_end = "#94a3b8", "#334155"
+        mouth_d = "M40 112 Q45 105 50 112 T60 112 T70 112 T80 112"
         cracks_op, sweat_op, tear_op = "0", "0", "0"
         mood, mood_color = "Evaporated!", "#94a3b8"
         anim = "floatUp 3s forwards"
@@ -80,7 +78,6 @@ def get_drip_visuals(water_level):
     return f"""
     <div class="drip-panel" style="animation: {anim}; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%;">
       <div class="drip-lbl" style="font-weight: 800; color: #94a3b8; letter-spacing: 3px; font-size: 14px; margin-bottom: 5px;">DRIP</div>
-      
       <svg id="drip-svg" viewBox="0 0 120 148" style="width: 140px; height: 160px; overflow: visible;" xmlns="http://www.w3.org/2000/svg">
         <defs>
           <radialGradient id="dg" cx="38%" cy="32%">
@@ -88,34 +85,23 @@ def get_drip_visuals(water_level):
             <stop id="dg2" offset="100%" stop-color="{g_end}"></stop>
           </radialGradient>
         </defs>
-        
         <path id="dbody" d="M60 8 C60 8,102 66,102 90 C102 118,83 137,60 137 C37 137,18 118,18 90 C18 66,60 8,60 8Z" fill="url(#dg)" stroke="rgba(34,211,238,0.35)" stroke-width="1.5" opacity="1"></path>
-        
         <ellipse cx="42" cy="70" rx="9" ry="13" fill="rgba(255,255,255,0.22)" transform="rotate(-18,42,70)"></ellipse>
-        
         <circle cx="44" cy="90" r="10" fill="white"></circle>
         <circle cx="76" cy="90" r="10" fill="white"></circle>
-        
         <circle id="pl" cx="45" cy="91" r="6" fill="#0f172a"></circle>
         <circle id="pr" cx="77" cy="91" r="6" fill="#0f172a"></circle>
-        
         <circle cx="47" cy="88" r="2.5" fill="white"></circle>
         <circle cx="79" cy="88" r="2.5" fill="white"></circle>
-        
         <path id="dm" d="{mouth_d}" stroke="#0f172a" stroke-width="2.5" stroke-linecap="round" fill="none"></path>
-        
         <g id="cracks" opacity="{cracks_op}" style="transition: opacity 0.5s;">
           <path d="M80 46 L86 58 L79 65 L85 77" stroke="#bae6fd" stroke-width="1.3" stroke-linecap="round" fill="none" opacity=".7"></path>
           <path d="M37 82 L31 93 L39 99" stroke="#bae6fd" stroke-width="1.3" stroke-linecap="round" fill="none" opacity=".7"></path>
         </g>
-        
         <path id="sweat" d="M108 76 C110 70,116 70,116 78 C116 84,110 88,108 82Z" fill="#7dd3fc" opacity="{sweat_op}" style="transition: opacity 0.5s;"></path>
-        
         <path id="tear" d="M38 104 C37 108,33 108,33 112 C33 115,36 117,38 114 C40 117,43 115,43 112 C43 108,39 108,38 104Z" fill="#93c5fd" opacity="{tear_op}" style="transition: opacity 0.5s;"></path>
       </svg>
-      
       <div class="drip-mood" id="drip-mood" style="color: {mood_color}; font-weight: 500; font-size: 1.1rem; margin-top: 15px;">{mood}</div>
-      
       <div style="text-align:center; margin-top:10px;">
         <div style="font-size:10px; color:#94a3b8; text-transform:uppercase; letter-spacing:1px;">Water Left</div>
         <div style="font-size:26px; font-weight:700; color:{mood_color};" id="d-water">{water_level:.2f}L</div>
@@ -128,15 +114,17 @@ def get_impact_cards(impact, category):
     <div class="impact-container">
         <div class="impact-card bad-impact">
             <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>
+            <p style="margin:4px 0; font-size:1.1em;"><strong>{impact['water_ml']} mL</strong> Water</p>
+            <p style="margin:4px 0; font-size:1.1em;"><strong>{impact['energy_wh']} Wh</strong> Energy</p>
+            <p style="margin:4px 0; font-size:1.1em;"><strong>{impact['co2_g']} g</strong> CO₂e</p>
+            <p style="margin:0; font-size:0.85em; 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.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>
+            <p style="margin:4px 0; font-size:1.1em;"><strong>~0.0 mL</strong> Water</p>
+            <p style="margin:4px 0; font-size:1.1em;"><strong>~0.001 Wh</strong> Energy</p>
+            <p style="margin:4px 0; font-size:1.1em;"><strong>~0.01 g</strong> CO₂e</p>
+            <p style="margin:0; font-size:0.85em; opacity: 0.8;">Near-zero footprint.</p>
         </div>
     </div>
     """
@@ -152,7 +140,8 @@ def format_alt_button(text):
 
 def process_query(user_input, selected_model, state):
     if state["game_over"] or not user_input.strip():
-        return [state, gr.update()] + [gr.update()]*9
+        # Notice we are returning an extra update at the end for the user_input box
+        return [state, gr.update()] + [gr.update()]*9 + [gr.update()]
 
     result = classifier(user_input, CATEGORIES)
     category = result['labels'][0]
@@ -163,6 +152,7 @@ def process_query(user_input, selected_model, state):
     state["queries"] += 1
     state["water"] = max(0, state["water"] - impact["water_l"])
     state["energy"] += impact["energy_kwh"]
+    state["co2"] += impact["co2_g"]
     
     show_alts = False
     alt_choices = ["", "", ""]
@@ -179,7 +169,7 @@ def process_query(user_input, selected_model, state):
         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"])
+    stats_ui = get_stats_html(state["water"], state["energy"], state["co2"], state["points"])
     drip_ui = get_drip_visuals(state["water"])
     impact_ui = get_impact_cards(impact, category)
     audio_path = generate_audio(dialogue)
@@ -187,10 +177,11 @@ def process_query(user_input, selected_model, state):
     
     if state["points"] >= 500 or state["water"] <= 0:
         state["game_over"] = True
-        return (state, stats_ui, drip_ui, audio_path, impact_ui, gr.update(value="<div class='feedback-box'>Game Over! Check your score.</div>"), 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="<div class='feedback-box'>Game Over! Check your score.</div>"), gr.update(visible=False), gr.update(), gr.update(), gr.update(), gr.update(), gr.update(value=""))
 
+    # The 12th return item is the empty string to clear the user_input
     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=""))
+            gr.update(value=alt_choices[0]), gr.update(value=alt_choices[1]), gr.update(value=alt_choices[2]), gr.update(value=""), gr.update(value=""))
 
 def select_alternative(choice_text, state):
     if state["game_over"] or not state.get("current_best_alt"):
@@ -205,12 +196,10 @@ def select_alternative(choice_text, state):
     else:
         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"])
+    stats_ui = get_stats_html(state["water"], state["energy"], state["co2"], state["points"])
     
     return state, stats_ui, gr.update(value=msg), gr.update(visible=False)
 
-
-# --- UI Styling ---
 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; }
@@ -218,44 +207,36 @@ body, .gradio-container { background-color: #0B1120 !important; font-family: 'Ou
 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-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); border: 1px solid rgba(255,255,255,0.1); }
+.stats-container { display: flex; gap: 10px; justify-content: space-between; margin-bottom: 20px; }
+.stat-card { flex: 1; padding: 15px 10px; border-radius: 12px; text-align: center; background: rgba(30, 41, 59, 0.6); 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; }
+.co2-card { box-shadow: 0 4px 20px rgba(168, 162, 158, 0.15); border-top: 2px solid #a8a29e; }
 .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; }
+.stat-label { font-size: 0.75em; letter-spacing: 1px; opacity: 0.8; margin-bottom: 5px; }
+.stat-value { font-size: 1.8em; 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; }
 
-/* SVG Animations */
 @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
 @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
 @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
 @keyframes floatUp { to { transform: translateY(-30px); opacity: 0; } }
 
-/* Drip Pod Column */
 .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; box-shadow: inset 0 0 40px rgba(0,0,0,0.5); }
-.drip-character-container { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 20px; min-height: 180px; }
 .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); margin-bottom: 15px;}
-
-/* Feedback Text Moved to Left Column */
 .feedback-box { background: rgba(56, 189, 248, 0.1); border-left: 4px solid #38bdf8; padding: 15px; border-radius: 8px; font-size: 1.05em; color: #e2e8f0; width: 100%; text-align: left; line-height: 1.4; box-sizing: border-box;}
 
-/* Input Area */
 .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: inset 0 2px 10px rgba(0,0,0,0.3) !important; padding: 15px !important; resize: none !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%; min-height: 85px; }
 .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 Alternatives Group */
 .alt-group { padding: 25px; background: linear-gradient(145deg, rgba(16, 185, 129, 0.05), rgba(6, 95, 70, 0.1)); border-radius: 20px; border: 1px solid rgba(16, 185, 129, 0.3); margin-top: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);}
 .alt-card { background: linear-gradient(145deg, #1e293b, #0f172a) !important; border: 1px solid #10b981 !important; color: #a7f3d0 !important; height: 130px !important; border-radius: 16px !important; font-size: 1.15em !important; font-weight: 500 !important; white-space: pre-wrap !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important;}
 .alt-card:hover { background: linear-gradient(145deg, #064e3b, #065f46) !important; transform: translateY(-8px) !important; box-shadow: 0 12px 30px rgba(16, 185, 129, 0.3) !important; color: white !important; border-color: #34d399 !important;}
@@ -264,34 +245,30 @@ h1 { text-align: center; color: #38bdf8; text-shadow: 0 0 15px rgba(56, 189, 248
 
 with gr.Blocks(title="EcoQueryQuest") as demo:
     game_state = gr.State({
-        "water": 100.0, "energy": 0.0, "points": 0, "queries": 0, 
+        "water": 100.0, "energy": 0.0, "co2": 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'>Select a model, type a query, and watch Drip react. Reach 500 points to win!</div>")
 
-    stats_html = gr.HTML(get_stats_html(100.0, 0.0, 0))
+    stats_html = gr.HTML(get_stats_html(100.0, 0.0, 0.0, 0))
 
     with gr.Row():
-        # LEFT COLUMN: Drip character, Audio, and Feedback Text
         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"])
             drip_feedback = gr.HTML("<div class='feedback-box'>Waiting for your first query...</div>")
         
-        # RIGHT COLUMN: Interactions and Impact Data
         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"]):
-                # Changed lines=3 so the query displays nicely without being cut off
                 user_input = gr.Textbox(show_label=False, placeholder="Type your query here...\n(Press Shift+Enter for new line)", elem_classes=["custom-textbox"], scale=4, lines=3)
                 submit_btn = gr.Button("Send Query", elem_classes=["custom-btn"], scale=1)
             
             impact_display = gr.HTML()
 
-    # BOTTOM: Beautiful Interactive Alternatives
     with gr.Group(visible=False, elem_classes=["alt-group"]) as alternatives_group:
         gr.Markdown("<h3 style='text-align:center; color:#34d399; margin-bottom: 20px;'>🌱 Drip says: 'Quick! Pick a greener tool to earn points!'</h3>")
         with gr.Row():
@@ -300,10 +277,11 @@ with gr.Blocks(title="EcoQueryQuest") as demo:
             alt_btn_3 = gr.Button("", elem_classes=["alt-card"])
         alt_feedback = gr.Markdown()
 
+    # NOTE: Added user_input to the outputs list so we can update/clear it
     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]
+        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]
     )
 
     for btn in [alt_btn_1, alt_btn_2, alt_btn_3]:

game_data.py

@@ -1,29 +1,27 @@
 # 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}
+    "Mistral Large 3": {"energy_wh": 1.98, "water_ml": 3.56, "co2_g": 0.95},
+    "Mistral Medium 3": {"energy_wh": 6.76, "water_ml": 12.17, "co2_g": 3.24},
+    "Claude Sonnet 4.6": {"energy_wh": 19.32, "water_ml": 34.78, "co2_g": 9.27},
+    "Gemini 3 Pro": {"energy_wh": 72.45, "water_ml": 130.41, "co2_g": 34.78},
+    "Gemini 3.1 Pro": {"energy_wh": 77.28, "water_ml": 139.10, "co2_g": 37.09},
+    "Claude Opus 4.6": {"energy_wh": 96.60, "water_ml": 173.88, "co2_g": 46.37},
+    "GPT-5.2": {"energy_wh": 144.90, "water_ml": 260.82, "co2_g": 69.55},
+    "GPT-5.4": {"energy_wh": 169.05, "water_ml": 304.29, "co2_g": 81.14}
 }
 
 # 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
+    "simple factual question": 0.05,        
+    "mathematical calculation": 0.10,       
+    "creative content generation": 0.80,    
+    "complex research query": 1.50          
 }
 
 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:
         conf_mult = 1.0
     elif 0.5 <= confidence_score <= 0.8:
@@ -31,7 +29,6 @@ def calculate_impact(category, confidence_score, query_text, model_name):
     else:
         conf_mult = 1.5
         
-    # 2. Length Factor
     word_count = len(query_text.split())
     if word_count < 20:
         len_factor = 1.0
@@ -40,11 +37,10 @@ def calculate_impact(category, confidence_score, query_text, model_name):
     else:
         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
+    co2_g = model_cost["co2_g"] * 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
     
@@ -52,5 +48,6 @@ def calculate_impact(category, confidence_score, query_text, model_name):
         "water_l": round(water_l, 4), 
         "energy_kwh": round(energy_kwh, 5), 
         "water_ml": round(water_ml, 1), 
-        "energy_wh": round(energy_wh, 2)
+        "energy_wh": round(energy_wh, 2),
+        "co2_g": round(co2_g, 2)
     }