Update app.py

app.py

@@ -4,12 +4,12 @@ from huggingface_hub import InferenceClient
 # Custom background CSS with semi-transparent panel
 css = """
 body {
-  background-image: url('https://cdn-uploads.huggingface.co/production/uploads/67351c643fe51cb1aa28f2e5/YcsJnPk8HJvXiB5WkVmf1.jpeg');
+  background-image: url('https://cdn-uploads.huggingface.co/production/uploads/67351c643fe51cb1aa28f2e5/wuyd5UYTh9jPrMJGmV9yC.jpeg');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
 }
-#chat-container {
+#chat-panel {
   background-color: rgba(255, 255, 255, 0.85);
   padding: 2rem;
   border-radius: 12px;
@@ -52,18 +52,17 @@ def respond(
         response += token
         yield response
 
-
-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)")
-    ],
-    css=css,
-    elem_id="chat-container"
-)
+with gr.Blocks(css=css) as demo:
+    with gr.Column(elem_id="chat-panel"):
+        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)")
+            ]
+        )
 
 if __name__ == "__main__":
     demo.launch()