Update app.py

app.py

@@ -1,25 +1,28 @@
 import gradio as gr
 from huggingface_hub import InferenceClient
 
-# Custom background CSS with semi-transparent panel
+# Custom background CSS with forced title styling
 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: 70vh;
+  height: 90vh;
   margin: auto;
   box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
   overflow-y: auto;
 }
-#chat-title {
+.markdown-element h2 {
   color: #d63384 !important;
   font-family: 'Playfair Display', serif !important;
   font-size: 1.8rem !important;
@@ -28,6 +31,7 @@ body {
   margin-bottom: 1rem !important;
 }
 """
+
 client = InferenceClient("HuggingFaceH4/zephyr-7b-beta")
 
 def respond(
@@ -39,13 +43,17 @@ def respond(
     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]})
+
     messages.append({"role": "user", "content": message})
+
     response = ""
+
     for message in client.chat_completion(
         messages,
         max_tokens=max_tokens,
@@ -59,17 +67,21 @@ def respond(
 
 with gr.Blocks(css=css) as demo:
     with gr.Column(elem_id="chat-panel"):
+        gr.Markdown("## 🇯🇵 Japanese Tutor Chatbot")
+
         with gr.Accordion("⚙️ Settings", open=False):
-            system_message = gr.Textbox(value="You are a friendly Chatbot.", label="System message")
+            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,
-            title="🇫🇷 French Tutor",  # Set title directly in ChatInterface
             additional_inputs=[system_message, max_tokens, temperature, top_p]
         )
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()