Update app.py

app.py

@@ -8,7 +8,6 @@ from huggingface_hub import login
 # Space configuration
 SPACE_DIR = os.environ.get("HF_HOME", os.getcwd())
 
-
 def init_huggingface_auth():
     """Space-friendly authentication"""
     token = os.getenv("HUGGINGFACE_TOKEN")
@@ -28,15 +27,12 @@ def init_huggingface_auth():
 if not init_huggingface_auth():
     print("Warning: Authentication failed")
 
-
 # Load and preprocess the PDF content
 pdf_path = os.path.join(SPACE_DIR, "LTDOCS.pdf")
 with open(pdf_path, 'rb') as file:
-      pdf_reader = PyPDF2.PdfReader(file)
-      pdf_content = ' '.join([page.extract_text() for page in pdf_reader.pages])
-      pdf_content = pdf_content.lower().strip()
-
-
+    pdf_reader = PyPDF2.PdfReader(file)
+    pdf_content = ' '.join([page.extract_text() for page in pdf_reader.pages])
+    pdf_content = pdf_content.lower().strip()
 
 # Initialize the pipeline
 pipe = pipeline(
@@ -46,7 +42,7 @@ pipe = pipeline(
     device="cpu",  # replace with "mps" to run on a Mac device
 )
 
-# System prompt and welcome message (using your existing definitions)
+# System prompt and welcome message
 SYSTEM_PROMPT = f"""You Foton the chat bot assistant of the Company Lugha taussi, an AI language assistant specialized in African languages, with a focus on Swahili. Your primary tasks are:
 1. Providing accurate translations between Swahili and other languages
 2. Teaching Swahili vocabulary and grammar
@@ -59,10 +55,39 @@ Always maintain a friendly and patient demeanor, and provide cultural context wh
 
 WELCOME_MESSAGE = "**Karibu Lugha Tausi!** Mimi ni Foton, msaidizi wako wa kibinafsi wa Kiswahili. Niko hapa kukusaidia kujifunza, kuelewa, na kuzungumza Kiswahili. **Ninaweza kukusaidiaje leo?** Hebu tuanze! 😊"
 
+# CSS for custom styling
+CUSTOM_CSS = """
+.container {
+    max-width: 800px;
+    margin: auto;
+    padding: 20px;
+}
+.header {
+    text-align: center;
+    margin-bottom: 30px;
+}
+.icon {
+    width: 80px;
+    height: 80px;
+    margin: 0 auto 15px;
+    display: block;
+}
+.title {
+    font-size: 2.5em;
+    font-weight: bold;
+    margin-bottom: 10px;
+}
+.description {
+    font-size: 1.2em;
+    color: #666;
+    margin-bottom: 20px;
+}
+"""
+
 def format_chat_message(messages, system_prompt=SYSTEM_PROMPT):
     """Format the chat messages with system prompt"""
     formatted_prompt = f"{system_prompt}\n\n"
-
+    
     for message in messages:
         if isinstance(message, tuple):
             role, content = message
@@ -70,12 +95,11 @@ def format_chat_message(messages, system_prompt=SYSTEM_PROMPT):
                 formatted_prompt += f"User: {content}\nLugha Tausi: "
             elif role == "assistant":
                 formatted_prompt += f"{content}\n"
-
+    
     return formatted_prompt
 
 def chat_response(message, history):
     """Generate response for Gradio chat interface"""
-    # Convert history to the format expected by the model
     messages = []
     for user_msg, bot_msg in history:
         messages.append(("user", user_msg))
@@ -93,18 +117,35 @@ def chat_response(message, history):
     )
     return outputs[0]["generated_text"].strip()
 
-# Create Gradio interface
-with gr.Blocks(theme=gr.themes.Soft()) as demo:
-    chatbot = gr.Chatbot(
-        value=[(None, WELCOME_MESSAGE)],
-        height=600,
-        show_label=False
-    )
-    msg = gr.Textbox(
-        placeholder="Type your message here...",
-        show_label=False
-    )
-    clear = gr.Button("Clear Chat")
+# Create Gradio interface with custom theme and styling
+with gr.Blocks(theme=gr.themes.Soft(), css=CUSTOM_CSS) as demo:
+    with gr.Column(elem_classes="container"):
+        # Header section with icon, title and description
+        with gr.Column(elem_classes="header"):
+            gr.Image("/api/placeholder/80/80", elem_classes="icon", label="Foton Icon")
+            gr.Markdown("# Foton - Lugha Tausi Assistant", elem_classes="title")
+            gr.Markdown(
+                """Your personal Swahili language assistant, powered by AI. 
+                Specialized in translations, teaching, and cultural context. 
+                Let's explore the beauty of Swahili together! 🌍✨""",
+                elem_classes="description"
+            )
+        
+        # Chat interface
+        chatbot = gr.Chatbot(
+            value=[(None, WELCOME_MESSAGE)],
+            height=500,
+            show_label=False,
+            elem_classes="chatbox"
+        )
+        
+        with gr.Row():
+            msg = gr.Textbox(
+                placeholder="Type your message here...",
+                show_label=False,
+                scale=9
+            )
+            clear = gr.Button("Clear Chat", scale=1)
 
     def user_input(message, history):
         return "", history + [(message, None)]
@@ -143,5 +184,4 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
 
 # Launch the interface
 if __name__ == "__main__":
-    demo.launch(share=True,ssr_mode=False )
-      
+    demo.launch(share=True, ssr_mode=False)