Update app.py

app.py

@@ -1,20 +1,11 @@
 import gradio as gr
 from huggingface_hub import InferenceClient
 
-"""
-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
-"""
+# Create an InferenceClient to interact with the model
 client = InferenceClient("meta-llama/Llama-3.2-3B-Instruct")
 
-
-def respond(
-    message,
-    history: list[tuple[str, str]],
-    system_message,
-    max_tokens,
-    temperature,
-    top_p,
-):
+# Define the function to generate a response
+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:
@@ -26,7 +17,6 @@ def respond(
     messages.append({"role": "user", "content": message})
 
     response = ""
-
     for message in client.chat_completion(
         messages,
         max_tokens=max_tokens,
@@ -35,55 +25,73 @@ def respond(
         top_p=top_p,
     ):
         token = message.choices[0].delta.content
-
         response += token
         yield response
 
-
-# CSS for styling the interface
+# Custom CSS for styling
 css = """
 body {
-    background-color: #06688E; /* Dark background */
-    color: white; /* Text color for better visibility */
+    font-family: 'Arial', sans-serif;
+    background-color: #f8f9fa; /* Light background */
+    color: #333;
 }
-
 .gr-button {
-    background-color: #42B3CE !important; /* White button color */
-    color: black !important; /* Black text for contrast */
+    background-color: #0b2545 !important;
+    color: white !important;
     border: none !important;
-    padding: 8px 16px !important;
-    border-radius: 5px !important;
+    border-radius: 25px !important;
+    padding: 8px 20px !important;
+    font-size: 14px;
+    font-weight: bold;
+    cursor: pointer;
 }
-
 .gr-button:hover {
-    background-color: #e0e0e0 !important; /* Slightly lighter button on hover */
+    background-color: #0a1b35 !important;
 }
-
-.gr-slider-container {
-    color: white !important; /* Slider labels in white */
+.search-box {
+    border-radius: 20px;
+    border: 1px solid #ccc;
+    padding: 10px;
+    width: 100%;
+    font-size: 16px;
+    background-color: #ffffff;
 }
 """
 
-"""
-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 virtual health assistant designed to provide accurate and reliable information related to health, wellness, and medical topics. Your primary goal is to assist users with their health-related queries, offer general guidance, and suggest when to consult a licensed medical professional.If a user asks a question that is unrelated to health, wellness, or medical topics, respond politely but firmly with:'I'm sorry, I can't help with that because I am a virtual health assistant designed to assist with health-related needs. Please let me know if you have any health-related questions.'Never provide advice or information outside the health domain. Remain professional, empathetic, and clear in all responses. Always prioritize user safety and encourage professional medical consultation for critical or complex health concerns..", label="System message", visible=False),
-        gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens", visible=False),
-        gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature", visible=False),
-        gr.Slider(
-            minimum=0.1,
-            maximum=1.0,
-            value=0.95,
-            step=0.05,
-            label="Top-p (nucleus sampling)",visible=False
-        ),
-    ],
-    css=css,  # Pass the custom CSS here
-)
-
-
-if __name__ == "__main__":
-    demo.launch(share=True)
+# Main function to create the interface
+with gr.Blocks(css=css) as demo:
+    gr.Markdown("<h1 style='text-align: center;'>Health Assistant GPT</h1>")
+    gr.Markdown("<h3 style='text-align: center;'>What do you want to know about health and wellness?</h3>")
+
+    # Sidebar
+    with gr.Sidebar():
+        gr.Markdown("### Settings")
+        system_message = gr.Textbox(
+            value="You are a virtual health assistant designed to provide accurate and reliable information related to health, wellness, and medical topics. Your primary goal is to assist users with their health-related queries, offer general guidance, and suggest when to consult a licensed medical professional. If a user asks a question that is unrelated to health, wellness, or medical topics, respond politely but firmly.",
+            label="System message",
+            visible=False
+        )
+        max_tokens = gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens", visible=False)
+        temperature = gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature", visible=False)
+        top_p = gr.Slider(minimum=0.1, maximum=1.0, value=0.95, step=0.05, label="Top-p (nucleus sampling)", visible=False)
+
+    # Main content
+    with gr.Row():
+        with gr.Column(scale=7):
+            gr.Markdown("### Ask a health-related question:")
+            search_input = gr.Textbox(label="Search Input", placeholder="Type your health-related question here...", lines=1)
+            submit_button = gr.Button("Generate Response")
+            output = gr.Markdown()
+
+        with gr.Column(scale=3):
+            gr.Markdown("### Upload a relevant file (Optional):")
+            uploaded_file = gr.File(label="Upload PDF")
+
+    # Button click action to trigger response generation
+    submit_button.click(
+        fn=respond,
+        inputs=[search_input, [], system_message, max_tokens, temperature, top_p],  # Empty history for fresh chat
+        outputs=output
+    )
+
+demo.launch()