Update app.py

app.py

@@ -1,98 +1,201 @@
+import torch
 import gradio as gr
-import time
-
-def chat_response(message, history):
-    # Simulate a response with a delay
-    time.sleep(1)
-    if not message or message.strip() == "":
-        return history, "Tafadhali andika ujumbe..."
-    response = f"Majibu: {message}"
-    new_history = history + [
-        {"role": "user", "content": message},
-        {"role": "assistant", "content": response},
-    ]
-    return new_history, ""
-
-
-# ---- APP UI ----
+from chat import KiswahiliChatbot
+import os
+import logging
+
+# Set up logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+# Initialize chatbot
+try:
+    chatbot = KiswahiliChatbot()
+    logger.info("✅ Chatbot imeanzishwa kikamilifu!")
+except Exception as e:
+    logger.error(f"❌ Imeshindwa kuanzisha chatbot: {e}")
+    chatbot = None
+
+def chat_interface(message, history):
+    """Handle chat interface interactions"""
+    if chatbot is None:
+        return "Samahani, kuna hitilafu ya mfumo. Tafadhali jaribu tena baadaye."
+    
+    if not message.strip():
+        return "Tafadhali andika ujumbe..."
+    
+    response = chatbot.chat(message)
+    return response
+
+# Create Gradio interface with Tanzania flag colors
 with gr.Blocks(
-    theme=gr.themes.Base(),
+    title="KiswahiliChetu",
+    theme=gr.themes.Soft(primary_hue="blue"),
     css="""
-    .gradio-container {max-width: 650px; margin:30px auto; border-radius:16px;}
-    .header {text-align:center; margin:16px 0; font-size:1.2em;}
-    #chat_area {background:#fff; border-radius:12px; min-height:340px; overflow-y:auto; box-shadow:0 3px 16px #eee;}
-    .input-row {display:flex; gap:8px; margin-top:8px;}
-    textarea {flex:1; resize:none; border-radius:10px; padding:10px; font-size:1em;}
-    .button-primary {background:#1db954; color:#fff; border-radius:10px; font-weight:bold;}
-    .button-secondary {background:#ff6666; color:#fff; border-radius:10px; font-weight:bold;}
-    body.dark {background-color:#1e1e1e; color:#fff;}
-    #chat_area.dark {background:#333;}
-    @media(max-width: 680px){.gradio-container{max-width: 98vw; padding: 0 2vw;}}
+    .gradio-container { 
+        max-width: 1200px; 
+        margin: auto; 
+        font-family: 'Arial', sans-serif;
+        background: #f0f2f5;
+    }
+    
+    .tanzania-title-shell {
+        display: inline-block;
+        padding: 12px 25px;
+        background: white;
+        border-radius: 25px;
+        box-shadow: 0px 4px 10px rgba(0,0,0,0.15);
+        margin-bottom: 15px !important;
+    }
+    
+    .tanzania-title {
+        font-size: 3em !important;
+        font-weight: bold !important;
+        text-align: center;
+        background: linear-gradient(to bottom,
+            #1DB954 0% 35%,   /* Green */
+            #FFD700 35% 40%,  /* Thin Yellow */
+            #000000 40% 60%,  /* Black */
+            #FFD700 60% 65%,  /* Thin Yellow */
+            #87CEEB 65% 100%  /* Sky Blue */
+        );
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        display: inline-block;
+    }
+    
+    .tanzania-subtitle {
+        text-align: center;
+        color: #666;
+        margin-bottom: 30px !important;
+        font-size: 1.2em;
+    }
+    
+    .chat-container {
+        background: #f8f9fa;
+        padding: 20px;
+        border-radius: 15px;
+        border: 2px solid #e9ecef;
+    }
+    
+    .input-container {
+        background: #ffffff;
+        padding: 20px;
+        border-radius: 15px;
+        border: 2px solid #e9ecef;
+    }
+    
+    .gradio-button {
+        border-radius: 8px;
+        font-weight: bold;
+    }
+    
+    .examples-section {
+        background: #fffae6;
+        padding: 15px;
+        border-radius: 10px;
+        border-left: 4px solid #FCD116;
+    }
     """
 ) as demo:
-
-    # Header
-    gr.HTML('<div class="header"><b>KiswahiliChetu</b><br>Jifunze Kiswahili fasaha na LLM</div>')
-
-    # State
-    dark_mode = gr.State(False)
-    state = gr.State([])
-
-    # Toggle function (backend)
-    def toggle_theme(current):
-        return not current
-
-    # Create toggle button
-    toggle_btn = gr.Button("🌙 Toggle Dark Mode", variant="secondary")
-
-    # Try JS injection safely
-    try:
-        toggle_btn.click(
-            toggle_theme,
-            inputs=dark_mode,
-            outputs=dark_mode,
-            _js="() => { document.body.classList.toggle('dark'); }"
-        )
-    except TypeError:
-        # Older Gradio fallback (no _js support)
-        toggle_btn.click(toggle_theme, inputs=dark_mode, outputs=dark_mode)
-
-    # Chat area
-    chat = gr.Chatbot(elem_id="chat_area", label="", show_copy_button=True, value=[], type="messages")
-
-    # Input row
+    
+    # Header with Tanzania flag colors
+    gr.HTML("""
+    <div style="text-align: center;">
+        <div class="tanzania-title-shell">
+            <span class="tanzania-title">KiswahiliChetu</span>
+        </div>
+        <p class="tanzania-subtitle">Jifunze kiswahili fasaha, uliza maswali na KiswahiliChetu akili Unde</p>
+    </div>
+    """)
+    
     with gr.Row():
-        msg_input = gr.Textbox(placeholder="Andika ujumbe wa Kiswahili...", lines=3, label="")
-        send_btn = gr.Button("Tuma", elem_classes="button-primary")
-        clear_btn = gr.Button("Futa", elem_classes="button-secondary")
-
-    # Examples section
-    with gr.Accordion("📚 Mifano ya Maswali", open=False):
-        gr.Examples(
-            examples=[["Habari yako?"], ["Jina lako nani?"], ["Eleza kuhusu Tanzania"]],
-            inputs=msg_input,
-        )
-
-    # Main message handler
-    def process(msg, chat_history, state):
-        if not msg.strip():
-            return chat_history, "Tafadhali andika ujumbe..."
-        chat_history.append({"role": "user", "content": msg})
-        time.sleep(0.8)
-        response = f"Majibu: {msg}"
-        chat_history.append({"role": "assistant", "content": response})
-        return chat_history, ""
-
-    # Clear chat function
-    def clear_chat():
-        return [], ""
-
-    # Button and Enter bindings
-    send_btn.click(process, [msg_input, chat, state], [chat, msg_input])
-    msg_input.submit(process, [msg_input, chat, state], [chat, msg_input])
-    clear_btn.click(clear_chat, None, [chat, msg_input])
-
+        # LEFT SIDE: Input section
+        with gr.Column(scale=1, min_width=400):
+            with gr.Column(elem_classes="input-container"):
+                gr.Markdown("### ✍️ Ujumbe Wako")
+                
+                msg = gr.Textbox(
+                    label="",
+                    placeholder="Andika hapa kwa Kiswahili...",
+                    lines=4,
+                    max_lines=6,
+                    show_label=False
+                )
+                
+                with gr.Row():
+                    submit_btn = gr.Button("📤 Tuma", variant="primary", size="lg")
+                    clear_btn = gr.Button("🗑️ Futa Mazungumzo", variant="secondary")
+                
+                # Examples section
+                with gr.Accordion("📚 Mifano ya Maswali", open=True):
+                    gr.Examples(
+                        examples=[
+                            ["Habari yako?"],
+                            ["Jina lako nani?"],
+                            ["Unaweza kusema Kiswahili?"],
+                            ["Eleza kuhusu Tanzania"],
+                            ["Nini maana ya 'Hakuna matata'?"]
+                        ],
+                        inputs=msg,
+                        label="Bonyeza mfano wa swali:"
+                    )
+        
+        # RIGHT SIDE: Chat section
+        with gr.Column(scale=2, min_width=600):
+            with gr.Column(elem_classes="chat-container"):
+                gr.Markdown("### 💬 Mazungumzo")
+                chatbot_ui = gr.Chatbot(
+                    height=500,
+                    show_copy_button=True,
+                    show_share_button=True,
+                    avatar_images=(
+                        None, 
+                        "https://api.dicebear.com/7.x/bottts/svg?seed=swahili&backgroundColor=1eb53a"
+                    )
+                )
+    
+    # System info and footer
+    with gr.Accordion("📊 Taarifa ya Mfumo", open=False):
+        gr.Markdown(f"""
+        **Gradio Version:** {gr.__version__}  
+        **Device:** {'GPU' if torch.cuda.is_available() else 'CPU'}
+        """)
+    
+    gr.Markdown("---")
+    gr.Markdown("""
+    <div style='text-align: center; color: #666;'>
+        <strong>🇹🇿 Imetengenezwa kwa upendo wa lugha ya Kiswahili na Tanzania</strong>
+    </div>
+    """)
+    
+    # Event handlers
+    def process_message(message, history):
+        response = chat_interface(message, history)
+        return history + [(message, response)], ""
+    
+    msg.submit(
+        process_message,
+        inputs=[msg, chatbot_ui],
+        outputs=[chatbot_ui, msg]
+    )
+    
+    submit_btn.click(
+        process_message,
+        inputs=[msg, chatbot_ui],
+        outputs=[chatbot_ui, msg]
+    )
+    
+    clear_btn.click(
+        lambda: None,
+        inputs=None,
+        outputs=chatbot_ui
+    )
 
-# ---- LAUNCH ----
 if __name__ == "__main__":
-    demo.launch(server_name="0.0.0.0", share=False, show_error=True)
+    demo.launch(
+        server_name="0.0.0.0",
+        share=False,
+        show_error=True
+    )