Update app.py

app.py

@@ -9,7 +9,7 @@ from sklearn.metrics.pairwise import cosine_similarity
 from datetime import datetime
 from groq import Groq
 
-# --- Page config ---
+# Page configuration
 st.set_page_config(
     page_title="🚨 First Aid Emergency Assistant",
     page_icon="🚨",
@@ -17,8 +17,112 @@ st.set_page_config(
     initial_sidebar_state="collapsed"
 )
 
-# --- UI CSS Styling ---
-st.markdown("""<style>/* [CSS OMITTED FOR BREVITY] */</style>""", unsafe_allow_html=True)  # Insert the full CSS here as in your version
+# Custom CSS for ChatGPT-like interface
+st.markdown("""
+<style>
+    .stApp {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    }
+    
+    .main-header {
+        text-align: center;
+        padding: 1rem 0;
+        background: rgba(255, 255, 255, 0.1);
+        border-radius: 15px;
+        margin-bottom: 2rem;
+        backdrop-filter: blur(10px);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+    }
+    
+    .chat-container {
+        background: white;
+        border-radius: 15px;
+        padding: 1rem;
+        margin: 1rem 0;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        max-height: 500px;
+        overflow-y: auto;
+    }
+    
+    .user-message {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        padding: 12px 16px;
+        border-radius: 18px 18px 5px 18px;
+        margin: 8px 0 8px 20%;
+        max-width: 80%;
+        float: right;
+        clear: both;
+        box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
+    }
+    
+    .bot-message {
+        background: #f8f9fa;
+        color: #333;
+        padding: 12px 16px;
+        border-radius: 18px 18px 18px 5px;
+        margin: 8px 20% 8px 0;
+        max-width: 80%;
+        float: left;
+        clear: both;
+        border: 1px solid #e9ecef;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    }
+    
+    .input-container {
+        position: sticky;
+        bottom: 0;
+        background: white;
+        padding: 1rem;
+        border-radius: 15px;
+        margin-top: 2rem;
+        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
+    }
+    
+    .warning-box {
+        background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
+        padding: 1rem;
+        border-radius: 10px;
+        margin: 1rem 0;
+        border-left: 4px solid #ff6b6b;
+    }
+    
+    .stTextInput input {
+        border-radius: 25px !important;
+        border: 2px solid #e9ecef !important;
+        padding: 12px 20px !important;
+        font-size: 16px !important;
+    }
+    
+    .stTextInput input:focus {
+        border-color: #667eea !important;
+        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
+    }
+    
+    .stButton button {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+        color: white !important;
+        border: none !important;
+        border-radius: 25px !important;
+        padding: 12px 30px !important;
+        font-weight: 600 !important;
+        transition: all 0.3s ease !important;
+    }
+    
+    .stButton button:hover {
+        transform: translateY(-2px) !important;
+        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4) !important;
+    }
+    
+    .sidebar-info {
+        background: rgba(255, 255, 255, 0.1);
+        padding: 1rem;
+        border-radius: 10px;
+        margin: 1rem 0;
+    }
+</style>
+""", unsafe_allow_html=True)
 
 # --- GROQ API setup ---
 @st.cache_resource
@@ -114,40 +218,136 @@ This tool is for informational purposes only. Always call emergency services in
 </div>
 """, unsafe_allow_html=True)
 
-# Chat display
-with st.container():
+# Chat container
+chat_container = st.container()
+
+with chat_container:
     st.markdown('<div class="chat-container">', unsafe_allow_html=True)
-    for msg in st.session_state.messages:
-        if msg["role"] == "user":
-            st.markdown(f'<div class="user-message"><strong>You:</strong> {msg["content"]}</div><div style="clear: both;"></div>', unsafe_allow_html=True)
+    
+    # Display chat messages
+    for message in st.session_state.messages:
+        if message["role"] == "user":
+            st.markdown(f"""
+            <div class="user-message">
+                <strong>You:</strong> {message["content"]}
+            </div>
+            <div style="clear: both;"></div>
+            """, unsafe_allow_html=True)
         else:
-            st.markdown(f'<div class="bot-message"><strong>🤖 Assistant:</strong><br>{msg["content"]}</div><div style="clear: both;"></div>', unsafe_allow_html=True)
+            st.markdown(f"""
+            <div class="bot-message">
+                <strong>🤖 First Aid Assistant:</strong><br>
+                {message["content"]}
+            </div>
+            <div style="clear: both;"></div>
+            """, unsafe_allow_html=True)
+    
     st.markdown('</div>', unsafe_allow_html=True)
 
-# Input UI
+# Input section
 st.markdown('<div class="input-container">', unsafe_allow_html=True)
+
 col1, col2 = st.columns([4, 1])
+
 with col1:
-    user_input = st.text_input("", placeholder="Ask about a first aid emergency...", key="user_input", label_visibility="collapsed")
+    user_input = st.text_input(
+        "",
+        placeholder="Ask me about first aid emergencies... (e.g., 'How to treat burns?')",
+        key="user_input",
+        label_visibility="collapsed"
+    )
+
 with col2:
-    send = st.button("Send 🚀", key="send_button")
+    send_button = st.button("Send 🚀", key="send_button")
+
 st.markdown('</div>', unsafe_allow_html=True)
 
-# Process Input
-if send and user_input.strip():
+# Process user input
+if send_button and user_input.strip():
+    # Add user message to chat
     st.session_state.messages.append({"role": "user", "content": user_input})
-    with st.spinner("🤖 Thinking..."):
-        kb = st.session_state.knowledge_base
-        context = find_relevant_context(user_input, kb["chunks"], kb["embeddings"], kb["model"])
-        full_prompt = f"""
-Based on this manual content, answer the question: {user_input}
-Context:
-{context}
-"""
-        response = query_groq(full_prompt, setup_groq())
+    
+    # Get bot response
+    with st.spinner("🤔 Thinking..."):
+        try:
+            # Find relevant context from PDF
+            kb = st.session_state.knowledge_base
+            context = find_relevant_context(
+                user_input, 
+                kb["chunks"], 
+                kb["embeddings"], 
+                kb["model"]
+            )
+            
+            # Create enhanced prompt with context
+            enhanced_prompt = f"""
+Based on the following first aid manual content, answer this question: {user_input}
 
-        if any(x in user_input.lower() for x in ["heart attack", "stroke", "not breathing", "unconscious", "severe bleeding"]):
-            response = f"🚨 **CALL EMERGENCY SERVICES IMMEDIATELY!**\n\n{response}"
+Context from First Aid Manual:
+{context}
 
+Please provide a clear, helpful response based on this information. If this is a serious emergency, remind the user to call emergency services first.
+"""
+            
+            # Query GROQ API
+            response = query_groq(enhanced_prompt, st.session_state.groq_api_key)
+            
+            # Enhance response with emergency reminder for serious cases
+            serious_keywords = ['heart attack', 'stroke', 'unconscious', 'not breathing', 'severe bleeding', 'poisoning', 'choking']
+            if any(keyword in user_input.lower() for keyword in serious_keywords):
+                response = f"🚨 **CALL EMERGENCY SERVICES IMMEDIATELY!**\n\n{response}"
+                
+        except Exception as e:
+            response = f"❌ Sorry, I encountered an error: {str(e)}. Please try asking your question differently."
+    
+    # Add bot response to chat
     st.session_state.messages.append({"role": "assistant", "content": response})
+    
+    # Rerun to show new message
     st.rerun()
+
+# Sidebar with helpful information
+with st.sidebar:
+    st.markdown("## 📋 Quick Emergency Numbers")
+    st.markdown("""
+    <div class="sidebar-info">
+    <strong>🚨 Emergency Services:</strong><br>
+    • General Emergency: 911<br>
+    • Poison Control: 1-800-222-1222<br>
+    • Mental Health Crisis: 988
+    </div>
+    """, unsafe_allow_html=True)
+    
+    st.markdown("## 🎯 What I Can Help With")
+    st.markdown("""
+    <div class="sidebar-info">
+    • CPR and rescue breathing<br>
+    • Wound care and bleeding<br>
+    • Burns and scalds<br>
+    • Fractures and sprains<br>
+    • Choking procedures<br>
+    • Poisoning emergencies<br>
+    • Heart attack signs<br>
+    • Snake and animal bites<br>
+    • Drowning response<br>
+    • And much more!
+    </div>
+    """, unsafe_allow_html=True)
+    
+    st.markdown("## ℹ️ How to Use")
+    st.markdown("""
+    <div class="sidebar-info">
+    1. Type your first aid question<br>
+    2. Get instant step-by-step guidance<br>
+    3. Follow instructions carefully<br>
+    4. Seek professional help for serious emergencies
+    </div>
+    """, unsafe_allow_html=True)
+
+# Footer
+st.markdown("---")
+st.markdown("""
+<div style="text-align: center; opacity: 0.7; padding: 1rem;">
+    🤖 First Aid Emergency Assistant | Powered by GROQ AI | Always consult medical professionals for serious emergencies
+</div>
+""", unsafe_allow_html=True)