Update app.py

app.py

@@ -163,99 +163,114 @@ def query_pdf(question, top_k=3):
 
 def build_app():
     custom_css = """
-    /* === Make layout full-width and responsive === */
-    body, html {
-        margin: 0;
-        padding: 0;
-        width: 100%;
-        height: 100%;
-        background: #f9fafb;
+    body {
+      background: #f5f5f5;
+      margin: 0;
+      padding: 0;
+      overflow: auto;
     }
 
     .gradio-container {
-        font-family: 'Inter', 'Segoe UI', sans-serif;
-        background: #f9fafb;
-        color: #1f2937;
-        width: 100% !important;
-        max-width: 1400px !important;  /* keeps content centered on large screens */
-        margin: 0 auto !important;      /* centers content */
-        padding: 1.5% 2% !important;    /* breathing room */
-        box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+      min-height: 100vh;
+      padding: 30px 15px;
+      box-sizing: border-box;
+      border: 2px solid #ccc;
+      border-radius: 16px;
+      box-shadow: 0 4px 16px rgba(0,0,0,0.1);
+      background: white;
+      max-width: 900px;
+      margin: 20px auto;
+      overflow-y: auto;
     }
 
-    .gr-block, .gr-panel, .tabitem, .gradio-interface {
-        width: 100% !important;
-        max-width: 100% !important;
+    ::-webkit-scrollbar {
+      width: 10px;
     }
-
-    h1, h2, h3 {
-        color: #003366 !important;
-        font-weight: 600 !important;
+    ::-webkit-scrollbar-track {
+      background: #eee;
+      border-radius: 10px;
     }
-
-    .tab-nav button {
-        font-size: 16px !important;
-        font-weight: 500 !important;
-        border-radius: 8px !important;
+    ::-webkit-scrollbar-thumb {
+      background: #aaa;
+      border-radius: 10px;
     }
-
-    textarea, input, .gr-text-input {
-        font-size: 15px !important;
-        border-radius: 10px !important;
+    ::-webkit-scrollbar-thumb:hover {
+      background: #777;
     }
 
-    .gr-button {
-        background-color: #003366 !important;
-        color: white !important;
-        border-radius: 10px !important;
-        font-weight: 500 !important;
-        padding: 10px 20px !important;
+    textarea, input[type="text"], .gr-textbox, .gr-input {
+      border: 2px solid #bbb !important;
+      border-radius: 10px !important;
+      padding: 8px !important;
+      box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
+      transition: border-color 0.2s ease, box-shadow 0.2s ease;
     }
-
-    .gr-button:hover {
-        background-color: #0055a4 !important;
+    textarea:focus, input[type="text"]:focus {
+      border-color: #0078D7 !important;
+      box-shadow: 0 0 5px rgba(0,120,215,0.3) !important;
+      outline: none;
     }
 
-    footer, .gradio-container > div:last-child {
-        text-align: center;
-        margin-top: 2em;
+    button, .gr-button {
+      border-radius: 10px !important;
+      padding: 10px 16px !important;
+      font-weight: 600 !important;
     }
     """
 
-
-    with gr.Blocks(title="Kiembu ↔ English — NRF Kenya Project", css=custom_css,
-                   theme=gr.themes.Soft(primary_hue="blue", secondary_hue="gray")) as app:
+    with gr.Blocks(
+        title="Kiembu ↔ English — NRF Kenya Project",
+        css=custom_css,
+        theme=gr.themes.Soft(primary_hue="blue", secondary_hue="gray")
+    ) as app:
 
         gr.Markdown("""
         <div style='text-align:center'>
-        <h1 style='color:#003366;'>Kiembu ↔ English Translation Suite</h1>
-        <h3 style='color:#d4a017;'>Funded by NRF Kenya — Creating LLMs that Understand Native Languages</h3>
-        <hr style='border:1px solid #003366;width:80%;margin:auto'>
+          <h1 style='color:#003366;'>Kiembu ↔ English Translation Suite</h1>
+          <h3 style='color:#d4a017;'>Funded by NRF Kenya — Creating LLMs that Understand Native Languages</h3>
+          <hr style='border:1px solid #003366;width:80%;margin:auto'>
         </div>
         """)
 
         with gr.Tabs():
-            # Dictionary Tab
+
+            # -----------------------------
+            # TAB 1: DICTIONARY TRANSLATOR
+            # -----------------------------
             with gr.TabItem("Dictionary Translator"):
-                gr.Markdown("""### Quick Word Translation — **Kiembu ↔ English** and get its translation instantly.
-                🔤 **Sample Words:**
+                gr.Markdown("""
+                ### Quick Word Translation — **Kiembu ↔ English**  
+                Enter a single word or short phrase and get its translation instantly.
+
+                **Sample Words:**
                 | Kiembu | English |
                 |:--|:--|
                 | Uvoro | how are you |
                 | Ri? | When? |
                 | Ku? | Where? |
-                | Uka | come |""")
+                | Uka | come |
+                """)
                 inp = gr.Textbox(label="Enter Word", placeholder="e.g. 'Uvoro' or 'how are you'", lines=1)
-                dir_sel = gr.Radio(["Kiembu → English", "English → Kiembu"], value="Kiembu → English", label="Select Direction")
+                dir_sel = gr.Radio(
+                    ["Kiembu → English", "English → Kiembu"],
+                    value="Kiembu → English",
+                    label="Select Direction"
+                )
                 out = gr.Textbox(label="Translation Result")
                 gr.Button("Translate").click(translate_word, [inp, dir_sel], out)
 
-            # PDF Translation Tab
+            # -----------------------------
+            # TAB 2: PDF TRANSLATION
+            # -----------------------------
             with gr.TabItem("PDF Translation"):
                 gr.Markdown("""
-                ###  **English → Kiembu PDF Translator**
-                Upload an **English PDF document** (e.g., ID or passport application, hospital form, etc.),  
-                and the system will translate it into **Kiembu** and generate a downloadable translated PDF.
+                ### **English → Kiembu PDF Translator**  
+                Upload an **English PDF document** (e.g., ID form, hospital form, passport form)  
+                and get a **translated PDF in Kiembu** for download.
                 """)
                 pdf_input = gr.File(label="Upload English PDF", file_types=[".pdf"])
                 translate_btn = gr.Button("Translate to Kiembu")
@@ -263,16 +278,18 @@ def build_app():
                 status = gr.Textbox(label="Status", interactive=False)
                 translate_btn.click(translate_pdf_to_kiembu, inputs=[pdf_input], outputs=[output_file, status])
 
-            # NRF LLM Model Q&A Tab
+            # -----------------------------
+            # TAB 3: NRF LLM MODEL Q&A
+            # -----------------------------
             with gr.TabItem("PDF Chat (NRF LLM Model)"):
                 gr.Markdown("""
-                ###  **Interactive PDF Chat (Gemma Q&A)**
-                Upload any **informative PDF** (e.g., government reports, history books, manuals)  
+                ### **Interactive PDF Chat — NRF LLM Model**  
+                Upload any **informative PDF** (e.g., government report, history book, or manual)  
                 and ask natural-language questions to understand its content better.
 
-                Example:  
-                - *“What does this document say about birth registration?”*  
-                - *“Summarize Chapter 2.”*
+                **Examples:**
+                - "What does this document say about birth registration?"
+                - "Summarize Chapter 2."
                 """)
                 pdf = gr.File(label="Upload PDF Document")
                 status = gr.Textbox(label="Status")
@@ -286,24 +303,22 @@ def build_app():
             # TAB 4: ABOUT
             # -----------------------------
             with gr.TabItem("About"):
-                gr.Markdown(
-                    """
-                    ### About the Project
-                    The **NRF Kenya Project** on *Creating LLMs that Understand Native Languages*  
-                    aims to preserve and promote indigenous linguistic heritage through advanced AI translation tools.
-
-                    - **Languages Supported:** Kiembu ↔ English  
-                    - **Core Engine:** NRF LLM Model (based on lightweight MarianMT)  
-                    - **Developed by:** Casam Njagi Nyaga  
-                    - **Funding Agency:** National Research Fund (NRF), Kenya  
-                    - **Objective:** Foster inclusion of native languages in AI-driven communication.
-                    """
-                )
+                gr.Markdown("""
+                ### About the Project  
+                The **NRF Kenya Project** on *Creating LLMs that Understand Native Languages*  
+                aims to preserve and promote indigenous linguistic heritage through advanced AI translation tools.
+
+                - **Languages Supported:** Kiembu ↔ English  
+                - **Core Engine:** NRF LLM Model (based on lightweight MarianMT)  
+                - **Developed by:** Casam Njagi Nyaga  
+                - **Funding Agency:** National Research Fund (NRF), Kenya  
+                - **Objective:** Foster inclusion of native languages in AI-driven communication.
+                """)
 
         gr.Markdown("""
         <hr style='border:0.5px solid #ccc'>
         <div style='text-align:center;color:#003366;font-size:14px'>
-        © 2025 National Research Fund (NRF) Kenya — All Rights Reserved
+          © 2025 National Research Fund (NRF) Kenya — All Rights Reserved
         </div>
         """)
 
@@ -312,3 +327,4 @@ def build_app():
 
 demo = build_app()
 demo.launch()
+