Add updated files

app.py

@@ -46,19 +46,83 @@ def get_stats_html(water, energy, points):
     """
 
 def get_drip_visuals(water_level):
+    """Generates an animated SVG character whose expression changes with water level."""
+    
+    # SVG Path for a classic water droplet
+    drop_path = "M 50,15 C 50,15 20,50 20,70 A 30,30 0 1,0 80,70 C 80,50 50,15 50,15 Z"
+    
     if water_level > 70:
-        emoji, size, anim, glow, status = "💧", "120px", "float 3s ease-in-out infinite", "rgba(56,189,248,0.6)", "Plump & Hydrated"
+        # Happy, Plump, Bouncing
+        color = "url(#blueGrad)"
+        anim = "bounce 2s infinite ease-in-out"
+        glow = "rgba(56,189,248,0.6)"
+        status = "Plump & Hydrated"
+        face = """
+            <circle cx="35" cy="60" r="4" fill="white"/>
+            <circle cx="65" cy="60" r="4" fill="white"/>
+            <path d="M 40,70 Q 50,80 60,70" stroke="white" stroke-width="3" fill="transparent" stroke-linecap="round"/>
+            <ellipse cx="25" cy="65" rx="5" ry="3" fill="rgba(255,255,255,0.3)"/>
+            <ellipse cx="75" cy="65" rx="5" ry="3" fill="rgba(255,255,255,0.3)"/>
+        """
     elif 30 <= water_level <= 70:
-        emoji, size, anim, glow, status = "💧", "90px", "none", "rgba(56,189,248,0.3)", "Shrinking & Tired"
+        # Tired, Flat, Sweating
+        color = "#0ea5e9"
+        anim = "float 4s infinite ease-in-out"
+        glow = "rgba(56,189,248,0.3)"
+        status = "Shrinking & Tired"
+        face = """
+            <path d="M 30,60 Q 35,55 40,60" stroke="white" stroke-width="3" fill="transparent" stroke-linecap="round"/>
+            <path d="M 60,60 Q 65,55 70,60" stroke="white" stroke-width="3" fill="transparent" stroke-linecap="round"/>
+            <line x1="45" y1="72" x2="55" y2="72" stroke="white" stroke-width="3" stroke-linecap="round"/>
+            <path d="M 75,45 C 75,45 70,55 70,60 A 5,5 0 1,0 80,60 C 80,55 75,45 75,45 Z" fill="rgba(255,255,255,0.6)"/>
+        """
     elif water_level > 0:
-        emoji, size, anim, glow, status = "🏜️", "70px", "none", "rgba(239,68,68,0.4)", "Cracked & Raspy"
+        # Overheating, Red, Cracked
+        color = "url(#redGrad)"
+        anim = "shake 0.5s infinite"
+        glow = "rgba(239,68,68,0.5)"
+        status = "Overheating & Raspy"
+        face = """
+            <line x1="30" y1="55" x2="40" y2="65" stroke="white" stroke-width="3" stroke-linecap="round"/>
+            <line x1="40" y1="55" x2="30" y2="65" stroke="white" stroke-width="3" stroke-linecap="round"/>
+            <line x1="60" y1="55" x2="70" y2="65" stroke="white" stroke-width="3" stroke-linecap="round"/>
+            <line x1="70" y1="55" x2="60" y2="65" stroke="white" stroke-width="3" stroke-linecap="round"/>
+            <path d="M 40,75 Q 45,70 50,75 T 60,75" stroke="white" stroke-width="3" fill="transparent" stroke-linecap="round"/>
+        """
     else:
-        emoji, size, anim, glow, status = "💨", "50px", "none", "transparent", "Evaporated!"
+        # Ghost / Evaporated
+        color = "rgba(148, 163, 184, 0.5)"
+        anim = "floatUp 3s forwards"
+        glow = "transparent"
+        status = "Evaporated!"
+        drop_path = "M 30,80 Q 30,50 50,30 Q 70,50 70,80 Q 60,70 50,80 Q 40,70 30,80 Z" # Cloud/Ghost shape
+        face = """
+            <circle cx="40" cy="50" r="3" fill="white"/>
+            <circle cx="60" cy="50" r="3" fill="white"/>
+            <circle cx="50" cy="65" r="5" fill="transparent" stroke="white" stroke-width="2"/>
+        """
+
+    svg = f"""
+    <svg viewBox="0 0 100 100" style="width: 140px; height: 140px; filter: drop-shadow(0px 0px 15px {glow}); animation: {anim};">
+        <defs>
+            <linearGradient id="blueGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+                <stop offset="0%" style="stop-color:#7dd3fc;stop-opacity:1" />
+                <stop offset="100%" style="stop-color:#0284c7;stop-opacity:1" />
+            </linearGradient>
+            <linearGradient id="redGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+                <stop offset="0%" style="stop-color:#fca5a5;stop-opacity:1" />
+                <stop offset="100%" style="stop-color:#b91c1c;stop-opacity:1" />
+            </linearGradient>
+        </defs>
+        <path d="{drop_path}" fill="{color}"/>
+        {face}
+    </svg>
+    """
         
     return f"""
-    <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 class="drip-character-container">
+        {svg}
+        <h3 style="margin: 15px 0 0 0; color: #e2e8f0; font-weight: 600; font-size: 1.1rem; text-align: center;">{status}</h3>
     </div>
     """
 
@@ -122,11 +186,11 @@ def process_query(user_input, selected_model, state):
     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 on **{selected_model}**!\n*{dialogue}*"
+    feedback_text = f"<div class='feedback-box'>🧠 <strong>{category.upper()}</strong> Detected on {selected_model}!<br><br><em>\"{dialogue}\"</em></div>"
     
     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="## 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="<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=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=""))
@@ -148,14 +212,18 @@ def select_alternative(choice_text, state):
     
     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; }
-.gradio-container { max-width: 900px !important; margin: auto; padding-top: 20px; }
+.gradio-container { max-width: 950px !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; }
+
+/* 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); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); }
+.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); }
 .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; }
@@ -163,22 +231,37 @@ h1 { text-align: center; color: #38bdf8; text-shadow: 0 0 15px rgba(56, 189, 248
 .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; }
-.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); } }
-.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); }
+
+/* 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: 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; height: 100%; }
+.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; }
-.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;}
-/* Dropdown styling for dark theme */
+
+/* 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;}
 .custom-dropdown { background: rgba(30, 41, 59, 0.8) !important; border: 1px solid #38bdf8 !important; border-radius: 12px !important; }
 """
 
@@ -194,22 +277,26 @@ with gr.Blocks(title="EcoQueryQuest") as demo:
     stats_html = gr.HTML(get_stats_html(100.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"]):
-                user_input = gr.Textbox(show_label=False, placeholder="Type your query here...", elem_classes=["custom-textbox"], scale=4)
+                # 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)
             
-            drip_feedback = gr.Markdown("### Waiting for your first query...")
             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: 15px;'>🌱 Drip says: 'Quick! Pick a greener tool to earn points!'</h3>")
+        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():
             alt_btn_1 = gr.Button("", elem_classes=["alt-card"])
             alt_btn_2 = gr.Button("", elem_classes=["alt-card"])