Update app.py

app.py

@@ -1,82 +1,71 @@
 import gradio as gr
 from huggingface_hub import InferenceClient
 
-# Custom background CSS with styled title and panel
+# Custom background CSS with semi-transparent 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/GdA9eNQKjOQjE6q47km3l.jpeg');
+  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;
 }
+
+.gradio-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+#custom-title {
+  color: #d63384;
+  font-family: 'Playfair Display', serif;
+  font-size: 2.5rem;
+  font-weight: bold;
+  text-align: center;
+  margin-bottom: 20px;
+}
+
 #chat-panel {
   background-color: rgba(255, 255, 255, 0.85);
   padding: 2rem;
   border-radius: 12px;
+  width: 100%;
   max-width: 700px;
-  height: 90vh;
-  margin: auto;
+  height: 70vh;
   box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
   overflow-y: auto;
 }
-#.gradio-container .chatbot .header {
-  color: #c785a0; !important;
-  font-family: 'Noto Sans', serif !important;
-  font-size: 1.8rem !important;
-  font-weight: bold !important;
-  text-align: center !important;
-  margin-bottom: 1rem !important;
-}
 """
 
 client = InferenceClient("HuggingFaceH4/zephyr-7b-beta")
 
-def respond(
-    message,
-    history: list[tuple[str, str]],
-    system_message,
-    max_tokens,
-    temperature,
-    top_p,
-):
-    messages = [{"role": "system", "content": system_message}]
-
+def respond(message, history):
+    messages = [{"role": "system", "content": "You are a helpful French tutor."}]
     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,
         stream=True,
-        temperature=temperature,
-        top_p=top_p,
     ):
         token = message.choices[0].delta.content
         response += token
         yield response
 
 with gr.Blocks(css=css) as demo:
+    # Title Markdown block
+    gr.Markdown("# 🇫🇷 French Tutor", elem_id="custom-title")
+    
     with gr.Column(elem_id="chat-panel"):
-        gr.Markdown("## 🇯🇵 Japanese Instructor", elem_id="chat-title")
-
-        with gr.Accordion("⚙️ Settings", open=False):
-            max_tokens = gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Response Length")
-            temperature = gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Response Creativity")
-
-        gr.ChatInterface(
-            respond,
-            additional_inputs=[max_tokens, temperature]
-        )
+        gr.ChatInterface(respond)
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()