Update app.py

app.py

@@ -1,12 +1,10 @@
 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
-"""
+# Initialize the Hugging Face Inference Client
 client = InferenceClient("HuggingFaceH4/zephyr-7b-beta")
 
-
+# Function to handle chatbot responses
 def respond(
     message,
     history: list[tuple[str, str]],
@@ -40,25 +38,82 @@ def respond(
         yield response
 
 
-"""
-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)",
-        ),
-    ],
-)
+# Gradio Interface with UI Customization
+with gr.Blocks(theme="soft") as demo:
+    gr.HTML(
+        """
+        <div style="background-color: #f0f4ff; padding: 10px; border-radius: 10px; text-align: center;">
+            <h1 style="color: #4a90e2;">AI Chat Interface</h1>
+            <p style="font-size: 16px; color: #4a4a4a;">
+                Powered by Hugging Face's Zephyr-7B model. Customize your system message and parameters for a tailored chat experience.
+            </p>
+        </div>
+        """
+    )
+
+    with gr.Row():
+        with gr.Column(scale=2):
+            chat = gr.ChatInterface(
+                respond,
+                additional_inputs=[
+                    gr.Textbox(
+                        value="You are a friendly Chatbot.",
+                        label="System message",
+                        lines=2,
+                        max_lines=3,
+                        interactive=True,
+                        elem_id="system_message_box",
+                    ),
+                    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.Column(scale=1):
+            gr.HTML(
+                """
+                <div style="background-color: #eaf4f4; padding: 15px; border-radius: 10px;">
+                    <h3 style="color: #2c7873;">Tips for Better Interaction:</h3>
+                    <ul style="font-size: 14px; color: #4a4a4a;">
+                        <li>Provide clear and concise messages for optimal responses.</li>
+                        <li>Adjust the <strong>Temperature</strong> for more creative or focused answers.</li>
+                        <li>Use <strong>Top-p</strong> for better control over randomness in responses.</li>
+                    </ul>
+                </div>
+                """
+            )
 
+    # Styling the background
+    demo.css = """
+    body {
+        background-color: #f9fafb;
+    }
+    .gr-textbox {
+        border: 1px solid #e1e4e8;
+        border-radius: 5px;
+    }
+    #system_message_box {
+        border: 2px dashed #4a90e2;
+        background-color: #f0f9ff;
+    }
+    .gr-slider {
+        background-color: #e9f7fc;
+    }
+    """
 
 if __name__ == "__main__":
     demo.launch()