app.py

import gradio as gr

def get_health_advice(query):
    responses = {
        "fever": "🌡️ For fever, take Paracetamol, rest well, and stay hydrated.",
        "cold": "🤧 Use steam inhalation, warm fluids, and over-the-counter cold medicine.",
        "headache": "💊 Try Ibuprofen, stay in a quiet place, and drink plenty of water.",
    }
    for keyword in responses:
        if keyword in query.lower():
            return responses[keyword]
    return "⚠️ Sorry, I couldn't recognize your condition. Please consult a healthcare professional."

with gr.Blocks(css="""
    .gradio-container {
        background-color: #ffffff;
        font-family: 'Segoe UI', sans-serif;
    }
    h1 {
        color: #2ecc71;
        text-align: center;
        margin-bottom: 0;
    }
    h2 {
        color: #444;
        text-align: center;
        font-weight: normal;
        margin-top: 0;
    }
    .textbox input, .textbox textarea {
        font-size: 16px;
        padding: 12px;
        border-radius: 10px;
        border: 1px solid #ffcc80;  /* Light orange border */
        background: linear-gradient(135deg, #d1e8e2, #80cbc4);  /* Light to dark gradient background */
    }
    /* When the input field is focused (clicked), change its border and background color */
    .textbox input:focus, .textbox textarea:focus {
        border-color: #ff7043;  /* Change border to a deeper orange */
        background-color: #ffe0b2;  /* Light orange background on focus */
        outline: none;  /* Remove default outline */
    }
    .response-box textarea {
        background-color: #e0f7fa;  /* Light blue background */
        color: #000000;  /* Black text */
        font-size: 16px;
        padding: 12px;
        border-radius: 10px;
        border: 1px solid #ffcc80;  /* Light orange border */
    }
    .submit-btn button {
        background-color: #2ecc71;
        color: white;
        font-size: 16px;
        border-radius: 10px;
        padding: 10px 24px;
        border: none;
    }
    /* Removed hover effect completely */
    .submit-btn button:hover {
        background-color: #2ecc71;  /* Same color as the button (no hover effect) */
    }
""") as demo:

    gr.Markdown("## 🩺 HealthMate")
    gr.Markdown("### Your AI Health Assistant – Ask any health-related question")

    with gr.Row():
        with gr.Column():
            user_input = gr.Textbox(
                label="Enter your health question:",
                placeholder="e.g., What medicine should I take for cold?",
                lines=3,
                elem_classes="textbox"
            )
            submit_btn = gr.Button("Get Advice", elem_classes="submit-btn")
        with gr.Column():
            output = gr.Textbox(
                label="HealthMate Advice:",
                lines=3,
                interactive=False,
                elem_classes="response-box"
            )

    submit_btn.click(fn=get_health_advice, inputs=user_input, outputs=output)

demo.launch()