Update app.py

app.py

@@ -1,5 +1,6 @@
 import gradio as gr
 from huggingface_hub import InferenceClient
+import uuid
 
 # Hugging Face inference client
 client = InferenceClient("HuggingFaceH4/zephyr-7b-beta")
@@ -27,18 +28,53 @@ def respond(message, history, system_message, max_tokens, temperature, top_p):
         response += token
         yield response
 
-# Enhanced UI with ChatGPT-like design
-with gr.Blocks(css="""
-    body {background-color: #212121; color: #EAEAEA; font-family: Arial, sans-serif;}
-    .chat-container { max-width: 800px; margin: auto; padding: 20px; }
-    .chat-message { border-radius: 10px; padding: 10px 15px; margin: 5px 0; max-width: 80%; }
-    .user-message { background: #007AFF; color: white; align-self: flex-end; }
-    .bot-message { background: #333333; color: white; align-self: flex-start; }
-    .gradio-container { max-width: 900px; margin: auto; }
-""") as demo:
+# ChatGPT-style UI with modern styling
+css = """
+    .gradio-container {
+        max-width: 900px;
+        margin: auto;
+        background-color: #121212;
+        color: white;
+    }
+    .chat-container {
+        display: flex;
+        flex-direction: column;
+        height: 85vh;
+        overflow: hidden;
+        padding: 20px;
+        border-radius: 10px;
+        background: #1E1E1E;
+    }
+    .chat-message {
+        max-width: 75%;
+        padding: 10px;
+        margin-bottom: 10px;
+        border-radius: 10px;
+        font-size: 16px;
+    }
+    .user-message {
+        background-color: #007AFF;
+        align-self: flex-end;
+        color: white;
+    }
+    .bot-message {
+        background-color: #333;
+        align-self: flex-start;
+    }
+    .input-box {
+        background: #333;
+        border: none;
+        color: white;
+        border-radius: 8px;
+        padding: 10px;
+        font-size: 16px;
+    }
+"""
+
+with gr.Blocks(css=css) as demo:
     gr.Markdown("""
     <h1 style='text-align: center; color: #FFFFFF;'>💬 AI Chat Assistant</h1>
-    <p style='text-align: center;'>An interactive chatbot experience with a modern UI.</p>
+    <p style='text-align: center;'>A sleek and interactive chatbot experience.</p>
     """)
     
     with gr.Row():