Update app.py

app.py

@@ -1,32 +1,18 @@
 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
-"""
 client = InferenceClient("HuggingFaceH4/zephyr-7b-beta")
 
-
-def respond(
-    message,
-    history: list[tuple[str, str]],
-    system_message,
-    max_tokens,
-    temperature,
-    top_p,
-):
+def respond(message, history, 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]})
-
+    for user, assistant in history:
+        if user:
+            messages.append({"role": "user", "content": user})
+        if assistant:
+            messages.append({"role": "assistant", "content": assistant})
     messages.append({"role": "user", "content": message})
 
     response = ""
-
     for message in client.chat_completion(
         messages,
         max_tokens=max_tokens,
@@ -35,29 +21,59 @@ def respond(
         top_p=top_p,
     ):
         token = message.choices[0].delta.content
-
         response += token
         yield response
 
+# Custom CSS for improved visual appeal
+custom_css = """
+body {
+    background-color: #f0f4f8;
+    font-family: 'Arial', sans-serif;
+}
+.gradio-container {
+    max-width: 800px !important;
+    margin: auto;
+    padding: 20px;
+    border-radius: 15px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    background-color: white;
+}
+.chat-window {
+    border-radius: 10px;
+    border: 1px solid #e0e0e0;
+}
+.chat-message {
+    padding: 10px 15px;
+    border-radius: 8px;
+    margin: 5px 0;
+}
+.user-message {
+    background-color: #e3f2fd;
+}
+.bot-message {
+    background-color: #f1f8e9;
+}
 """
-For information on how to customize the ChatInterface, peruse the gradio docs: https://www.gradio.app/docs/chatinterface
-"""
+
+# Create the ChatInterface with custom styling
 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.Textbox(value="You are a friendly Chatbot.", label="System Message", lines=2),
+        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)",
-        ),
+        gr.Slider(minimum=0.1, maximum=1.0, value=0.95, step=0.05, label="Top-p (Nucleus Sampling)"),
+    ],
+    title="Enhanced AI Chatbot",
+    description="Engage in a conversation with an AI powered by the Zephyr-7b-beta model.",
+    theme="soft",
+    css=custom_css,
+    examples=[
+        ["Tell me a short story about a robot learning to paint."],
+        ["What are the main challenges in space exploration?"],
+        ["Explain quantum computing to a 10-year-old."]
     ],
 )
 
-
 if __name__ == "__main__":
     demo.launch()