Update app.py

app.py

@@ -1,64 +1,415 @@
 import gradio as gr
-from huggingface_hub import InferenceClient
+import os
 
-"""
-For more information on `huggingface_hub` Inference API support, please check the docs: https://huggingface.co/docs/huggingface_hub/v0.22.2/en/guides/inference
-"""
-client = InferenceClient("HuggingFaceH4/zephyr-7b-beta")
-
-
-def respond(
-    message,
-    history: list[tuple[str, str]],
-    system_message,
-    max_tokens,
-    temperature,
-    top_p,
-):
-    messages = [{"role": "system", "content": system_message}]
-
-    for val in history:
-        if val[0]:
-            messages.append({"role": "user", "content": val[0]})
-        if val[1]:
-            messages.append({"role": "assistant", "content": val[1]})
-
-    messages.append({"role": "user", "content": message})
+HF_TOKEN = os.getenv("HF_TOKEN")
+if not HF_TOKEN:
+    raise RuntimeError("HF_TOKEN not found! Add it in Settings → Secrets.")
 
-    response = ""
-
-    for message in client.chat_completion(
-        messages,
-        max_tokens=max_tokens,
-        stream=True,
-        temperature=temperature,
-        top_p=top_p,
-    ):
-        token = message.choices[0].delta.content
-
-        response += token
-        yield response
+# Load private Space securely
+demo = gr.load(
+    "spaces/SmartHeal/SmartHeal-Agentic-AI",  # Replace with your private Space path
+    token=HF_TOKEN
+)
 
+# Define the medical color scheme based on the logo
+primary_color = "#E53E3E"  # Red color from the logo
+secondary_color = "#FF6B6B"  # Lighter coral
+accent_color = "#FED7D7"  # Very light pink/coral
+success_color = "#38A169"  # Medical green
+warning_color = "#D69E2E"  # Medical amber
+background_color = "#FFFFFF"  # White background
+text_color = "#1A202C"  # Darker text for better contrast
 
+# Aggressive CSS to override Gradio's dark mode and ensure text visibility
+custom_css = """
+/* =================== ORIGINAL SMARTHEAL CSS =================== */
+/* Global Styling */
+body, html {
+    margin: 0 !important;
+    padding: 0 !important;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif !important;
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
+    color: #1A202C !important;
+    line-height: 1.6 !important;
+}
+/* Professional Header with Logo */
+.medical-header {
+    background: linear-gradient(135deg, #3182ce 0%, #2c5aa0 100%) !important;
+    color: white !important;
+    padding: 32px 40px !important;
+    border-radius: 20px 20px 0 0 !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    margin-bottom: 0 !important;
+    box-shadow: 0 10px 40px rgba(49, 130, 206, 0.3) !important;
+    border: none !important;
+    position: relative !important;
+    overflow: hidden !important;
+}
+.medical-header::before {
+    content: '' !important;
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)" /></svg>') !important;
+    opacity: 0.1 !important;
+    z-index: 1 !important;
+}
+.medical-header > * {
+    position: relative !important;
+    z-index: 2 !important;
+}
+.logo {
+    width: 80px !important;
+    height: 80px !important;
+    border-radius: 50% !important;
+    margin-right: 24px !important;
+    border: 4px solid rgba(255, 255, 255, 0.3) !important;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
+    background: white !important;
+    padding: 4px !important;
+}
+.medical-header h1 {
+    font-size: 3.5rem !important;
+    font-weight: 800 !important;
+    margin: 0 !important;
+    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3) !important;
+    background: linear-gradient(45deg, #ffffff, #f8f9fa) !important;
+    -webkit-background-clip: text !important;
+    -webkit-text-fill-color: transparent !important;
+    background-clip: text !important;
+    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3)) !important;
+}
+.medical-header p {
+    font-size: 1.3rem !important;
+    margin: 8px 0 0 0 !important;
+    opacity: 0.95 !important;
+    font-weight: 500 !important;
+    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2) !important;
+}
+/* Enhanced Form Styling */
+.gr-form {
+    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%) !important;
+    border-radius: 20px !important;
+    padding: 32px !important;
+    margin: 24px 0 !important;
+    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1) !important;
+    border: 1px solid rgba(229, 62, 62, 0.1) !important;
+    backdrop-filter: blur(10px) !important;
+    position: relative !important;
+    overflow: hidden !important;
+}
+.gr-form::before {
+    content: '' !important;
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    height: 4px !important;
+    background: linear-gradient(90deg, #e53e3e 0%, #f56565 50%, #e53e3e 100%) !important;
+    z-index: 1 !important;
+}
+/* Professional Input Fields */
+.gr-textbox, .gr-number {
+    border-radius: 12px !important;
+    border: 2px solid #E2E8F0 !important;
+    background: #FFFFFF !important;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
+    font-size: 1rem !important;
+    color: #1A202C !important;
+    padding: 16px 20px !important;
+}
+.gr-textbox:focus,
+.gr-number:focus,
+.gr-textbox input:focus,
+.gr-number input:focus {
+    border-color: #E53E3E !important;
+    box-shadow: 0 0 0 4px rgba(229, 62, 62, 0.1) !important;
+    background: #FFFFFF !important;
+    outline: none !important;
+    transform: translateY(-1px) !important;
+}
+.gr-textbox input,
+.gr-number input {
+    background: transparent !important;
+    border: none !important;
+    outline: none !important;
+    color: #1A202C !important;
+    font-size: 1rem !important;
+    width: 100% !important;
+    padding: 0 !important;
+}
+.gr-textbox label,
+.gr-number label,
+.gr-dropdown label,
+.gr-radio label,
+.gr-checkbox label {
+    font-weight: 600 !important;
+    color: #2D3748 !important;
+    font-size: 1rem !important;
+    margin-bottom: 8px !important;
+    display: block !important;
+}
+/* Enhanced Button Styling */
+button.gr-button,
+button.gr-button-primary {
+    background: linear-gradient(135deg, #E53E3E 0%, #C53030 100%) !important;
+    color: #FFFFFF !important;
+    border: none !important;
+    border-radius: 12px !important;
+    font-weight: 700 !important;
+    padding: 16px 32px !important;
+    font-size: 1.1rem !important;
+    letter-spacing: 0.5px !important;
+    text-align: center !important;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    box-shadow: 0 4px 16px rgba(229, 62, 62, 0.3) !important;
+    position: relative !important;
+    overflow: hidden !important;
+    text-transform: uppercase !important;
+    cursor: pointer !important;
+}
+button.gr-button::before {
+    content: '' !important;
+    position: absolute !important;
+    top: 0 !important;
+    left: -100% !important;
+    width: 100% !important;
+    height: 100% !important;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent) !important;
+    transition: left 0.5s !important;
+}
+button.gr-button:hover::before {
+    left: 100% !important;
+}
+button.gr-button:hover,
+button.gr-button-primary:hover {
+    background: linear-gradient(135deg, #C53030 0%, #9C2A2A 100%) !important;
+    box-shadow: 0 8px 32px rgba(229, 62, 62, 0.4) !important;
+    transform: translateY(-3px) !important;
+}
+button.gr-button:active,
+button.gr-button-primary:active {
+    transform: translateY(-1px) !important;
+    box-shadow: 0 4px 16px rgba(229, 62, 62, 0.5) !important;
+}
+button.gr-button:disabled {
+    background: #A0AEC0 !important;
+    color: #718096 !important;
+    cursor: not-allowed !important;
+    box-shadow: none !important;
+    transform: none !important;
+}
+/* Professional Status Messages */
+.status-success {
+    background: linear-gradient(135deg, #F0FFF4 0%, #E6FFFA 100%) !important;
+    border: 2px solid #38A169 !important;
+    color: #22543D !important;
+    padding: 20px 24px !important;
+    border-radius: 16px !important;
+    font-weight: 600 !important;
+    margin: 16px 0 !important;
+    box-shadow: 0 8px 24px rgba(56, 161, 105, 0.2) !important;
+    backdrop-filter: blur(10px) !important;
+}
+.status-error {
+    background: linear-gradient(135deg, #FFF5F5 0%, #FED7D7 100%) !important;
+    border: 2px solid #E53E3E !important;
+    color: #742A2A !important;
+    padding: 20px 24px !important;
+    border-radius: 16px !important;
+    font-weight: 600 !important;
+    margin: 16px 0 !important;
+    box-shadow: 0 8px 24px rgba(229, 62, 62, 0.2) !important;
+    backdrop-filter: blur(10px) !important;
+}
+.status-warning {
+    background: linear-gradient(135deg, #FFFAF0 0%, #FEEBC8 100%) !important;
+    border: 2px solid #DD6B20 !important;
+    color: #9C4221 !important;
+    padding: 20px 24px !important;
+    border-radius: 16px !important;
+    font-weight: 600 !important;
+    margin: 16px 0 !important;
+    box-shadow: 0 8px 24px rgba(221, 107, 32, 0.2) !important;
+    backdrop-filter: blur(10px) !important;
+}
+/* Professional Card Layout */
+.medical-card {
+    background: linear-gradient(145deg, #FFFFFF 0%, #F7FAFC 100%) !important;
+    border-radius: 20px !important;
+    padding: 32px !important;
+    margin: 24px 0 !important;
+    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08) !important;
+    border: 1px solid rgba(229, 62, 62, 0.1) !important;
+    backdrop-filter: blur(10px) !important;
+    position: relative !important;
+    overflow: hidden !important;
+}
+.medical-card::before {
+    content: '' !important;
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    height: 4px !important;
+    background: linear-gradient(90deg, #E53E3E 0%, #F56565 50%, #E53E3E 100%) !important;
+}
+.medical-card-title {
+    font-size: 1.75rem !important;
+    font-weight: 700 !important;
+    color: #1A202C !important;
+    margin-bottom: 24px !important;
+    padding-bottom: 16px !important;
+    border-bottom: 2px solid #E53E3E !important;
+    text-align: center !important;
+    position: relative !important;
+}
+.medical-card-title::after {
+    content: '' !important;
+    position: absolute !important;
+    bottom: -2px !important;
+    left: 50% !important;
+    transform: translateX(-50%) !important;
+    width: 60px !important;
+    height: 4px !important;
+    background: linear-gradient(90deg, transparent, #E53E3E, transparent) !important;
+    border-radius: 2px !important;
+}
+/* Professional Dropdown Styling */
+.gr-dropdown {
+    border-radius: 12px !important;
+    border: 2px solid #E2E8F0 !important;
+    background: #FFFFFF !important;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
+}
+.gr-dropdown:focus,
+.gr-dropdown select:focus {
+    border-color: #E53E3E !important;
+    box-shadow: 0 0 0 4px rgba(229, 62, 62, 0.1) !important;
+    outline: none !important;
+}
+.gr-dropdown select {
+    background: transparent !important;
+    border: none !important;
+    color: #1A202C !important;
+    font-size: 1rem !important;
+    padding: 16px 20px !important;
+    border-radius: 12px !important;
+}
+/* Radio button styling */
+.gr-radio input[type="radio"] {
+    margin-right: 8px !important;
+    transform: scale(1.2) !important;
+}
+.gr-radio label {
+    display: flex !important;
+    align-items: center !important;
+    padding: 8px 0 !important;
+    font-size: 1rem !important;
+    line-height: 1.5 !important;
+    cursor: pointer !important;
+    color: #1A202C !important;
+}
+/* Tab styling */
+.gr-tab {
+    color: #1A202C !important;
+    font-weight: 500 !important;
+    font-size: 1rem !important;
+    padding: 12px 20px !important;
+    background-color: #F7FAFC !important;
+}
+.gr-tab.selected {
+    color: #E53E3E !important;
+    font-weight: 600 !important;
+    border-bottom: 2px solid #E53E3E !important;
+    background-color: #FFFFFF !important;
+}
+/* Image upload styling */
+.gr-image {
+    border: 3px dashed #CBD5E0 !important;
+    border-radius: 16px !important;
+    background-color: #F7FAFC !important;
+    transition: all 0.2s ease !important;
+}
+.gr-image:hover {
+    border-color: #E53E3E !important;
+    background-color: #FFF5F5 !important;
+}
+/* Analyze button special styling */
+#analyze-btn {
+    background: linear-gradient(135deg, #1B5CF3 0%, #1E3A8A 100%) !important;
+    color: #FFFFFF !important;
+    border: none !important;
+    border-radius: 8px !important;
+    font-weight: 700 !important;
+    padding: 14px 28px !important;
+    font-size: 1.1rem !important;
+    letter-spacing: 0.5px !important;
+    text-align: center !important;
+    transition: all 0.2s ease-in-out !important;
+}
+#analyze-btn:hover {
+    background: linear-gradient(135deg, #174ea6 0%, #123b82 100%) !important;
+    box-shadow: 0 4px 14px rgba(27, 95, 193, 0.4) !important;
+    transform: translateY(-2px) !important;
+}
+#analyze-btn:disabled {
+    background: #A0AEC0 !important;
+    color: #1A202C !important;
+    cursor: not-allowed !important;
+    box-shadow: none !important;
+    transform: none !important;
+}
+/* Responsive design */
+@media (max-width: 768px) {
+    .medical-header {
+        padding: 16px !important;
+        text-align: center !important;
+    }
+    
+    .medical-header h1 {
+        font-size: 2rem !important;
+    }
+    
+    .logo {
+        width: 48px !important;
+        height: 48px !important;
+        margin-right: 16px !important;
+    }
+    
+    .gr-form {
+        padding: 16px !important;
+        margin: 8px 0 !important;
+    }
+    
+    button.gr-button,
+    button.gr-button-primary {
+        padding: 14px 20px !important;
+        font-size: 14px !important;
+    }
+}
 """
-For information on how to customize the ChatInterface, peruse the gradio docs: https://www.gradio.app/docs/chatinterface
-"""
-demo = gr.ChatInterface(
-    respond,
-    additional_inputs=[
-        gr.Textbox(value="You are a friendly Chatbot.", label="System message"),
-        gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens"),
-        gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature"),
-        gr.Slider(
-            minimum=0.1,
-            maximum=1.0,
-            value=0.95,
-            step=0.05,
-            label="Top-p (nucleus sampling)",
-        ),
-    ],
-)
 
+with gr.Blocks(css=custom_css , title="SmartHeal: AI Wound Care Assistant") as app:
+    # JS to remove HF embed header
+    gr.HTML("""
+    <script>
+        if (window.location.href.includes("embed=true")) {
+            window.location.href = window.location.href.replace("embed=true", "embed=false");
+        }
+    </script>
+    """)
+    
+    # Render your private Space UI
+    demo.render()
+
+app.launch(
+        favicon_path="favicon.ico"
+    )
 
-if __name__ == "__main__":
-    demo.launch()