Make VayuChat absolutely awesome for screenshots and demos

PROFESSIONAL BRANDING & UI:
- Add Sustainability Lab logo from GitHub site in beautiful header
- Create stunning gradient VayuChat title with professional tagline
- Add lab attribution: "Sustainability Lab • IIT Gandhinagar"
- Center logo and branding for maximum visual impact

SCREENSHOT-READY IMPROVEMENTS:
- Fix pixelated plot display: use width=800 instead of use_column_width
- Shorten chat input text to prevent overflow
- Create awesome feedback system with gradient cards
- Clean button design: "✨ Excellent" and "🔧 Needs work"
- Remove clutter, keep only essential UI elements

VISUAL POLISH:
- Professional header layout with proper spacing
- Beautiful gradient backgrounds and modern styling
- High-quality plot rendering for presentations
- Clean, modern interface perfect for demos

Ready for professional screenshots, presentations, and demos\! 📸✨

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

app.py

@@ -573,8 +573,35 @@ if "gpt-oss-120b" in available_models:
 elif "deepseek-R1" in available_models:
     default_index = available_models.index("deepseek-R1")
 
-# Simple header - just title
-st.title("VayuChat")
+# Beautiful header with logo and branding
+col1, col2, col3 = st.columns([1, 2, 1])
+with col2:
+    st.markdown("""
+    <div style='text-align: center; padding: 1rem 0;'>
+        <img src='https://sustainability-lab.github.io/images/logo_light.svg' 
+             style='height: 60px; margin-bottom: 10px;' />
+        <h1 style='
+            margin: 0; 
+            font-size: 2.5rem; 
+            font-weight: 700; 
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        '>VayuChat</h1>
+        <p style='
+            margin: 5px 0 0 0; 
+            font-size: 1.1rem; 
+            color: #6b7280; 
+            font-weight: 500;
+        '>AI-Powered Air Quality Data Analysis</p>
+        <p style='
+            margin: 2px 0 0 0; 
+            font-size: 0.9rem; 
+            color: #9ca3af;
+        '>Sustainability Lab • IIT Gandhinagar</p>
+    </div>
+    """, unsafe_allow_html=True)
 
 
 # Load data with caching for better performance
@@ -803,7 +830,7 @@ def show_custom_response(response):
             if isinstance(content, str) and (content.endswith('.png') or content.endswith('.jpg')):
                 if os.path.exists(content):
                     # Display image without showing filename
-                    st.image(content, use_column_width=True)
+                    st.image(content, width=800)
                     return {"is_image": True}
             # Also handle case where content shows filename but we want to show image
             elif isinstance(content, str) and any(ext in content for ext in ['.png', '.jpg']):
@@ -813,7 +840,7 @@ def show_custom_response(response):
                 if filename_match:
                     filename = filename_match.group(1)
                     if os.path.exists(filename):
-                        st.image(filename, use_column_width=True)
+                        st.image(filename, width=800)
                         return {"is_image": True}
         except:
             pass
@@ -835,39 +862,50 @@ for response_id, response in enumerate(st.session_state.responses):
         code = response.get("gen_code", "")
 
 
+        # Awesome feedback system
         if "feedback" in st.session_state.responses[response_id]:
             feedback_data = st.session_state.responses[response_id]["feedback"]
             st.markdown(f"""
-            <div class='feedback-section'>
-                <strong>Your Feedback:</strong> {feedback_data.get('score', '')} 
-                {f"- {feedback_data.get('text', '')}" if feedback_data.get('text') else ""}
+            <div style='
+                background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
+                border: 1px solid #d1d5db;
+                border-radius: 12px;
+                padding: 1rem;
+                margin: 0.5rem 0;
+                display: flex;
+                align-items: center;
+                gap: 12px;
+            '>
+                <span style='font-size: 1.2rem;'>{feedback_data.get('score', '')}</span>
+                <span style='color: #6b7280; font-weight: 500;'>
+                    {feedback_data.get('text', 'Thanks for your feedback!')}
+                </span>
             </div>
             """, unsafe_allow_html=True)
         else:
-            # Simple feedback
-            st.markdown("**Rate this response:**")
-            col1, col2 = st.columns(2)
+            # Beautiful feedback buttons
+            st.markdown("""
+            <div style='margin: 0.5rem 0; color: #6b7280; font-size: 0.9rem; font-weight: 500;'>
+                How was this response?
+            </div>
+            """, unsafe_allow_html=True)
+            
+            col1, col2, col3 = st.columns([1, 1, 3])
             with col1:
-                good = st.button("👍 Good", key=f"{feedback_key}_good")
+                if st.button("✨ Excellent", key=f"{feedback_key}_excellent", help="This response was very helpful!"):
+                    feedback = {"score": "✨ Excellent", "text": ""}
+                    st.session_state.responses[response_id]["feedback"] = feedback
+                    st.rerun()
             with col2:
-                poor = st.button("👎 Needs work", key=f"{feedback_key}_poor")
-                
-            if good or poor:
-                if good:
-                    thumbs = "👍 Good"
-                else:
-                    thumbs = "👎 Needs work"
-                comments = st.text_input("Optional comment:", key=f"{feedback_key}_comments")
-                
-                feedback = {"score": thumbs, "text": comments}
-                st.session_state.responses[response_id]["feedback"] = feedback
-                st.success("Thanks for your feedback!")
-                st.rerun()
+                if st.button("🔧 Needs work", key=f"{feedback_key}_poor", help="This response could be improved"):
+                    feedback = {"score": "🔧 Needs work", "text": ""}
+                    st.session_state.responses[response_id]["feedback"] = feedback
+                    st.rerun()
         
-        # Add retry button for each assistant response
-        col1, col2, col3 = st.columns([1, 1, 2])
+        # Clean action buttons
+        col1, col2, col3 = st.columns([1, 4, 1])
         with col1:
-            if st.button("🔄 Retry", key=f"retry_{response_id}", help="Regenerate this response with current model"):
+            if st.button("🔄 Retry", key=f"retry_{response_id}", help="Regenerate with current model"):
                 # Get the last user prompt that led to this response
                 user_prompt = ""
                 if response_id > 0:
@@ -884,14 +922,9 @@ for response_id, response in enumerate(st.session_state.responses):
                         # Re-add user message and trigger new response
                         st.session_state.follow_up_prompt = retry_prompt
                         st.rerun()
-        
-        with col2:
-            if st.button("💬 Follow-up", key=f"followup_{response_id}", help="Ask a follow-up question"):
-                st.session_state.follow_up_mode = True
-                st.rerun()
 
 # Chat input with better guidance
-prompt = st.chat_input("💬 Ask about air quality trends, compare cities, or request visualizations...", key="main_chat")
+prompt = st.chat_input("💬 Ask about air quality trends, pollution analysis, or city comparisons...", key="main_chat")
 
 # Handle selected prompt from quick prompts
 if selected_prompt: