Update app.py

app.py

@@ -14,14 +14,33 @@ pipe = pipeline(
 )
 
 fancy_css = """
-#main-container {
-    max-width: 700px;
+.gradio-container {
+    max-width: 900px !important;
     margin: 0 auto;
 }
-#title {
+
+#app-title {
+    text-align: center;
+    margin-bottom: 4px;
+}
+
+#app-subtitle {
     text-align: center;
-    font-size: 2em;
-    margin-bottom: 20px;
+    color: var(--body-text-color-subdued);
+    margin-bottom: 24px;
+}
+
+#chat-container {
+    border: 1px solid var(--border-color-primary);
+    border-radius: 12px;
+    padding: 16px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+#model-note {
+    font-size: 0.9em;
+    color: var(--body-text-color-subdued);
+    margin-top: 8px;
 }
 """
 
@@ -142,13 +161,23 @@ with gr.Blocks(css=fancy_css) as demo:
         gr.LoginButton()
 
     gr.Markdown(
-        "🌟 Fancy AI Chatbot 🌟",
-        elem_id="title",
+        "# 🌟 Fancy AI Chatbot",
+        elem_id="app-title",
+    )
+
+    gr.Markdown(
+        "Compare a remotely hosted LLM with a model running locally on the Space.",
+        elem_id="app-subtitle",
     )
 
-    with gr.Column(elem_id="main-container"):
+    with gr.Column(elem_id="chat-container"):
         chatbot.render()
 
+        gr.Markdown(
+            "Use **Additional inputs** to switch between the API model and the locally executed model.",
+            elem_id="model-note",
+        )
+
 
 if __name__ == "__main__":
     demo.launch()