Update app.py

app.py

@@ -1,33 +1,22 @@
 import gradio as gr
 from huggingface_hub import InferenceClient
-from spaces import GPU
 
-"""
-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 client for ZeroGPU-powered model
 client = InferenceClient("HuggingFaceH4/zephyr-7b-beta")
 
-
-def respond(
-    message,
-    history: list[tuple[str, str]],
-    system_message,
-    max_tokens,
-    temperature,
-    top_p,
-):
+# Response function
+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_msg, bot_msg in history:
+        if user_msg:
+            messages.append({"role": "user", "content": user_msg})
+        if bot_msg:
+            messages.append({"role": "assistant", "content": bot_msg})
 
     messages.append({"role": "user", "content": message})
-
+    
     response = ""
-
     for message in client.chat_completion(
         messages,
         max_tokens=max_tokens,
@@ -36,30 +25,49 @@ def respond(
         top_p=top_p,
     ):
         token = message.choices[0].delta.content
-
         response += token
         yield response
 
+# Gradio interface
+with gr.Blocks(css=".gr-box { border-radius: 12px; padding: 16px; }") as demo:
+    gr.Markdown(
+        """
+        # 🤖 Zephyr-7B Chatbot (ZeroGPU Powered)
+        Talk to the `HuggingFaceH4/zephyr-7b-beta` model in real-time using ZeroGPU.
+        Customize generation settings below.
+        """,
+        elem_classes=["gr-box"]
+    )
+
+    with gr.Row():
+        chatbot = gr.Chatbot(label="Chat", show_copy_button=True, type="messages").style(height=400)
 
-"""
-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)",
-        ),
-    ],
-)
+    with gr.Row(equal_height=True):
+        system_msg = gr.Textbox(
+            label="🧠 System Prompt",
+            value="You are a friendly assistant.",
+            lines=2,
+            interactive=True
+        )
+    with gr.Row():
+        max_tokens = gr.Slider(1, 2048, value=512, step=1, label="Max Tokens")
+        temperature = gr.Slider(0.1, 4.0, value=0.7, step=0.1, label="Temperature")
+        top_p = gr.Slider(0.1, 1.0, value=0.95, step=0.05, label="Top-p (nucleus sampling)")
 
+    with gr.Row():
+        msg_input = gr.Textbox(label="💬 Your message", placeholder="Type a message and press Enter...").style(container=False)
+    
+    # Bind function to chat
+    def user_submit(user_message, history, system_message, max_tokens, temperature, top_p):
+        return respond(user_message, history, system_message, max_tokens, temperature, top_p)
 
+    msg_input.submit(
+        fn=user_submit,
+        inputs=[msg_input, chatbot, system_msg, max_tokens, temperature, top_p],
+        outputs=chatbot
+    )
+
+# Launch
 if __name__ == "__main__":
     demo.launch()
+