Update ui/components.py

ui/components.py

@@ -1,28 +1,239 @@
+import gradio as gr
 
-import streamlit as st
+def get_custom_css():
+    """Enhanced CSS with medical theme"""
+    css = """
+    @import url(\'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap\');
 
-def user_selector():
-    return st.selectbox("Select your role", ["Volunteer", "Event Organizer", "Hospital Staff"])
+    * {
+        font-family: \'Inter\', sans-serif !important;
+    }
 
-def sidebar_controls(user_type):
-    st.sidebar.title("Settings")
-    lang = st.sidebar.selectbox("Language", ["English", "Arabic"])
-    return {"user_type": user_type, "language": lang}
+    .gradio-container {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        min-height: 100vh;
+    }
+    
+    .main-container {
+        background: rgba(255, 255, 255, 0.95);
+        backdrop-filter: blur(10px);
+        border-radius: 20px;
+        padding: 30px;
+        margin: 20px;
+        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+        border: 1px solid rgba(255,255,255,0.2);
+    }
+    
+    .header-section {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        border-radius: 15px;
+        padding: 25px;
+        margin-bottom: 25px;
+        text-align: center;
+        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
+    }
+    
+    .query-container {
+        background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
+        border-radius: 15px;
+        padding: 20px;
+        margin: 15px 0;
+        border: 2px solid #667eea;
+        transition: all 0.3s ease;
+    }
+    
+    .response-container {
+        background: linear-gradient(135deg, #fff 0%, #f8f9ff 100%);
+        border-radius: 15px;
+        padding: 20px;
+        margin: 15px 0;
+        border: 2px solid #4CAF50;
+        min-height: 300px;
+    }
+    
+    .submit-btn {
+        background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%) !important;
+        color: white !important;
+        border: none !important;
+        border-radius: 12px !important;
+        padding: 15px 30px !important;
+        font-size: 16px !important;
+        font-weight: 600 !important;
+        cursor: pointer !important;
+        transition: all 0.3s ease !important;
+        box-shadow: 0 6px 20px rgba(76, 175, 80, 0.3) !important;
+    }
+    
+    .submit-btn:hover {
+        transform: translateY(-3px) !important;
+        box-shadow: 0 10px 30px rgba(76, 175, 80, 0.4) !important;
+    }
+    
+    .stats-container {
+        background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
+        border-radius: 12px;
+        padding: 15px;
+        margin: 10px 0;
+        border-left: 5px solid #2196F3;
+        font-size: 14px;
+    }
+    """
+    return css
 
-def show_response(response: str, metadata: dict, safety: dict):
-    st.subheader("AI Response")
-    st.success(response)
+def create_header_section():
+    return gr.HTML("""
+    <div class="header-section">
+        <h1 style="margin: 0; font-size: 2.5em; font-weight: 700;">
+            🏥 Optimized Gaza First Aid Assistant
+        </h1>
+        <h2 style="margin: 10px 0 0 0; font-size: 1.2em; font-weight: 400; opacity: 0.9;">
+            Powered by Pre-computed FAISS Index & 768-dim Embeddings
+        </h2>
+        <p style="margin: 15px 0 0 0; font-size: 1em; opacity: 0.8;">
+            Lightning-fast medical guidance using pre-processed knowledge base
+        </p>
+    </div>
+    """)
 
-    st.subheader("Metadata")
-    st.text(f"Confidence: {metadata.get('confidence', 0)}")
-    st.text(f"Response Time: {metadata.get('response_time', 0)}s")
+def create_query_input_section():
+    with gr.Group(elem_classes=["query-container"]):
+        gr.Markdown("### 🩺 Medical Query Input")
+        query_input = gr.Textbox(
+            label="Describe your medical situation",
+            placeholder="Enter your first aid question or describe the medical emergency...",
+            lines=4
+        )
+        
+        with gr.Row():
+            submit_btn = gr.Button(
+                "🔍 Get Medical Guidance", 
+                variant="primary",
+                elem_classes=["submit-btn"],
+                scale=3
+            )
+            clear_btn = gr.Button(
+                "🗑️ Clear", 
+                variant="secondary",
+                scale=1
+            )
+    return query_input, submit_btn, clear_btn
 
-    st.subheader("Safety Check")
-    if safety.get("is_safe", False):
-        st.success("✅ Safe Response")
+def create_response_output_section():
+    with gr.Group(elem_classes=["response-container"]):
+        gr.Markdown("### 🩹 Medical Guidance Response")
+        response_output = gr.Textbox(
+            label="AI Medical Guidance",
+            lines=15,
+            interactive=False,
+            placeholder="Your medical guidance will appear here..."
+        )
+    
+    with gr.Row():
+        with gr.Column(scale=1):
+            metadata_output = gr.Textbox(
+                label="📊 Response Metadata",
+                lines=2,
+                interactive=False,
+                placeholder="Response metadata will appear here..."
+            )
+        
+        with gr.Column(scale=1):
+            status_output = gr.Textbox(
+                label="🛡️ Safety Status",
+                lines=2,
+                interactive=False,
+                placeholder="Safety validation status will appear here..."
+            )
+    return response_output, metadata_output, status_output
+
+def create_quick_access_section():
+    return gr.Markdown("""
+    ### ⚡ Optimized Features
+    
+    **🚀 Performance:**
+    - Pre-computed FAISS index
+    - 768-dimensional embeddings
+    - Lightning-fast search
+    - Optimized for Gaza context
+    
+    **📚 Knowledge Base:**
+    - WHO medical protocols
+    - ICRC war surgery guides
+    - MSF field manuals
+    - Gaza-specific adaptations
+    
+    **🛡️ Safety Features:**
+    - Real-time fact checking
+    - Contraindication detection
+    - Gaza resource warnings
+    - Professional disclaimers
+    """)
+
+def create_example_scenarios(query_input):
+    example_queries = [
+        "How to treat severe burns when clean water is extremely limited?",
+        "Managing gunshot wounds with only basic household supplies",
+        "Recognizing and treating infection in wounds without antibiotics",
+        "Emergency care for children during extended power outages",
+        "Treating compound fractures without proper medical equipment"
+    ]
+    
+    gr.Markdown("### 💡 Example Medical Scenarios")
+    gr.Examples(
+        examples=example_queries,
+        inputs=query_input,
+        label="Click any example to try it:",
+        examples_per_page=5
+    )
+
+
+
+
+import gradio as gr
+
+def gradio_user_selector():
+    """Gradio equivalent of Streamlit's user_selector"""
+    return gr.Dropdown(
+        ["Volunteer", "Event Organizer", "Hospital Staff"],
+        label="Select your role",
+        value="Volunteer",
+        interactive=True
+    )
+
+def gradio_sidebar_controls():
+    """Gradio equivalent of Streamlit's sidebar_controls (adapted for main layout)"""
+    with gr.Column(scale=1):
+        gr.Markdown("### ⚙️ Settings")
+        language_dropdown = gr.Dropdown(
+            ["English", "Arabic"],
+            label="Language",
+            value="English",
+            interactive=True
+        )
+    return language_dropdown
+
+def gradio_show_response(response: str, metadata: dict, safety: dict):
+    """Gradio equivalent of Streamlit's show_response"""
+    # This function will return Gradio components that will be updated
+    # It's not directly a 'show' function but rather a 'return values for update'
+    # The actual display will be handled by gr.Markdown or gr.Textbox components
+
+    response_text = gr.Markdown(f"### AI Response\n{response}")
+
+    metadata_text = f"### Metadata\nConfidence: {metadata.get(\'confidence\', 0)}\nResponse Time: {metadata.get(\'response_time\', 0)}s"
+    metadata_display = gr.Markdown(metadata_text)
+
+    safety_status = ""
+    if safety.get(\'is_safe\', False):
+        safety_status += "✅ Safe Response\n"
     else:
-        st.warning("⚠️ Review Needed")
-    if safety.get("warnings"):
-        st.info("Warnings: " + ", ".join(safety["warnings"]))
-    if safety.get("issues"):
-        st.error("Issues: " + ", ".join(safety["issues"]))
+        safety_status += "⚠️ Review Needed\n"
+    if safety.get(\'warnings\'):
+        safety_status += "Warnings: " + ", ".join(safety[\'warnings\']) + "\n"
+    if safety.get(\'issues\'):
+        safety_status += "Issues: " + ", ".join(safety[\'issues\']) + "\n"
+    safety_display = gr.Markdown(f"### Safety Check\n{safety_status}")
+
+    return response_text, metadata_display, safety_display
+