Update app.py

app.py

@@ -1,11 +1,38 @@
 import gradio as gr
 from huggingface_hub import InferenceClient
 
+# Custom background CSS with styled title and panel
+css = """
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Playfair+Display&display=swap');
+
+body {
+  background-image: url('https://cdn-uploads.huggingface.co/production/uploads/67351c643fe51cb1aa28f2e5/wuyd5UYTh9jPrMJGmV9yC.jpeg');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  font-family: 'Noto Sans JP', sans-serif;
+}
+#chat-panel {
+  background-color: rgba(255, 255, 255, 0.85);
+  padding: 2rem;
+  border-radius: 12px;
+  max-width: 700px;
+  height: 90vh;
+  margin: auto;
+  box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
+  overflow-y: auto;
+}
+#chat-title {
+  color: #2c3e50;
+  font-family: 'Noto Sans', serif;
+  font-size: 1.8rem;
+  font-weight: bold;
+  text-align: center;
+  margin-bottom: 1rem;
+}
 """
-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")
 
+client = InferenceClient("HuggingFaceH4/zephyr-7b-beta")
 
 def respond(
     message,
@@ -35,30 +62,26 @@ def respond(
         top_p=top_p,
     ):
         token = message.choices[0].delta.content
-
         response += token
         yield response
 
+with gr.Blocks(css=css) as demo:
+    with gr.Column(elem_id="chat-panel"):
+        gr.Markdown("## 🇯🇵 Japanese Tutor Chatbot", elem_id="chat-title")
 
-"""
-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.Accordion("⚙️ Settings", open=False):
+            system_message = gr.Textbox(
+                value="You are an expert Japanese tutor. Help users understand Japanese grammar, vocabulary, sentence structure, particles, and kanji readings. Reply clearly in English unless the user specifies otherwise.",
+                label="System message"
+            )
+            max_tokens = gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens")
+            temperature = gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature")
+            top_p = gr.Slider(minimum=0.1, maximum=1.0, value=0.95, step=0.05, label="Top-p (nucleus sampling)")
 
+        gr.ChatInterface(
+            respond,
+            additional_inputs=[system_message, max_tokens, temperature, top_p]
+        )
 
 if __name__ == "__main__":
     demo.launch()