Update app.py

app.py

@@ -92,21 +92,31 @@ def prediksi_terjemahan(message, history):
     for respon in proses_gpu_translation(message, history):
         yield respon
 
-# ==========================================
-#         STRUKTUR DESAIN CUSTOM CSS
-# ==========================================
+# ========================================================
+#  PERBAIKAN UI/UX: CUSTOM CSS PUSAT & RAPI (TIDAK MELEBAR)
+# ========================================================
 desain_kustom_css = """
 #wadah-lebar-chat {
-    max-width: 800px !important;
-    margin: 0 auto !important;
+    max-width: 800px !important;   /* Membatasi lebar agar pas seperti ChatGPT */
+    margin: 0 auto !important;      /* Menjaga posisi tetap presisi di tengah layar */
     float: none !important;
+    padding-top: 20px;
+}
+.judul-pusat {
+    text-align: center !important;  /* Memaksa teks judul berada di tengah layar */
+    margin-bottom: 15px !important;
 }
 """
 
 with gr.Blocks() as demo:
-    gr.Markdown("# 🤖 AI Bahasa Indonesia-Biak")
     
+    # SOLUSI VISUAL: Memasukkan judul dan chatbot ke dalam kolom pembatas 800px yang sama
     with gr.Column(elem_id="wadah-lebar-chat"):
+        
+        # Menyisipkan teks judul dengan kelas CSS khusus agar sejajar tegak lurus di tengah
+        gr.Markdown("# 🤖 AI Bahasa Indonesia-Biak", elem_classes="judul-pusat")
+        
+        # Kotak chatbot otomatis mengikuti lebar container 800px tepat di bawah judul
         gr.ChatInterface(
             fn=prediksi_terjemahan,