Update app.py

app.py

@@ -17,6 +17,32 @@ body {
   padding-top: 2rem;
   padding-bottom: 2rem;
 }
+#title-container {
+  background-color: rgba(255, 255, 255, 0.85);  /* match chat panel */
+  border-radius: 16px;
+  padding: 1.5rem 2rem;
+  margin: 2rem 0;
+  width: fit-content;
+  max-width: 350px;
+  text-align: left;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  margin-left: 0rem;  /* Aligns left edge */
+}
+#title-container h1 {
+  color: #222 !important;
+  font-size: 4rem;
+  font-family: 'Noto Sans JP', sans-serif;
+  margin: 0;
+}
+#title-container .subtitle {
+  font-size: 1.1rem;
+  font-family: 'Noto Sans', sans-serif;
+  color: #222 !important;
+  margin-top: 0.5rem;
+  margin-bottom: 0;
+  width: 100%;
+  display: block;
+}
 #chat-panel {
   background-color: rgba(255, 255, 255, 0.85);
   padding: 2rem;
@@ -88,11 +114,16 @@ def respond(message, history, user_level, max_tokens, temperature, top_p):
         yield f"Désolé! There was an error: {str(e)}"
 
 # Gradio interface
-with gr.Blocks(css=css) as demo:
-    gr.Markdown("French Instructor", elem_id="custom-title")
+#gr.Markdown("日本語の先生  Japanese Instructor", elem_id="custom-title")
+    gr.HTML("""
+    <div id="title-container">
+      <h1>LE PROFESSEUR</h1>
+      <p class="subtitle">French Tutor</p>
+    </div>
+    """)
     
     with gr.Column(elem_id="chat-panel"):
-        with gr.Accordion("⚙️ Advanced Settings", open=False):
+        with gr.Accordion("Advanced Settings", open=False):
             user_level = gr.Dropdown(
                 choices=["A1", "A2", "B1", "B2", "C1", "C2"],
                 value="A1",