Update app.py

app.py

@@ -14,10 +14,10 @@ def chat_with_model(user_input):
     )
     return response['choices'][0]['message']['content']
 
-# Define CSS for patient-friendly appearance
+# Define CSS for chat-like appearance
 custom_css = """
     body {
-        background-color: #f0f9ff; /* Softer light blue background */
+        background-color: #f0f9ff;
         font-family: 'Arial', sans-serif;
     }
     .gradio-container {
@@ -26,23 +26,33 @@ custom_css = """
         padding: 30px;
         background-color: #ffffff;
         box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+        max-width: 600px;
+        margin: auto;
     }
     h1 {
         color: #4a90e2;
         text-align: center;
         font-size: 28px;
     }
-    p {
-        font-size: 18px;
-        color: #333333;
-        text-align: center;
-    }
-    input, textarea {
-        border: 2px solid #b3d9ff;
-        border-radius: 10px;
+    .input-textbox, .output-textbox {
+        display: block;
         padding: 15px;
+        border-radius: 20px;
+        margin: 10px 0;
         width: 100%;
-        font-size: 18px;
+        font-size: 16px;
+    }
+    .input-textbox {
+        background-color: #e0f7fa;
+        border: 2px solid #b3e0ff;
+        color: #333;
+        text-align: left;
+    }
+    .output-textbox {
+        background-color: #e6eeff;
+        border: 2px solid #4a90e2;
+        color: #333;
+        text-align: left;
     }
     .gr-button {
         background-color: #4da6ff;
@@ -53,14 +63,13 @@ custom_css = """
         font-size: 18px;
         cursor: pointer;
         margin-top: 20px;
-        display: block;
         width: 100%;
     }
     .gr-button:hover {
         background-color: #3399ff;
     }
     .gradio-container:before {
-        content: "💬 How can we help you today?";
+        content: "💬 Xin chào, tôi có thể giúp gì cho bạn?";
         display: block;
         text-align: center;
         font-size: 24px;
@@ -72,10 +81,10 @@ custom_css = """
 # Create the Gradio interface
 iface = gr.Interface(
     fn=chat_with_model,
-    inputs="text",
-    outputs="text",
+    inputs=gr.Textbox(placeholder="Hãy hỏi ở đây...", css_class="input-textbox"),
+    outputs=gr.Textbox(label="Assistant", css_class="output-textbox"),
     title="Friendly Medical Chatbot",
-    description="Feel free to ask any questions. We’re here to help!",
+    description="Bạn có thể hỏi mọi câu hỏi liên quan đến y tế",
     theme="default",
     css=custom_css
 )