Add Mermaid diagrams and enhance UI visibility

- Add visual flowcharts to all 4 tabs showing AI pipeline
- Display models used in each feature with emojis
- Show performance metrics for each tab
- Side-by-side layout (diagram left, form right)
- Update footer to reflect whisper-base model
- Improved visual hierarchy and user guidance

UI Enhancements:
- Tab 1: Division Text - Name extraction + semantic search flow
- Tab 2: Division Voice - Whisper transcription + translation flow
- Tab 3: Contact Text - Dual path name/division matching flow
- Tab 4: Contact Voice - Complete AI pipeline visualization

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

app.py

@@ -244,36 +244,54 @@ def create_demo():
 
         **Database:** {stats['total_contacts']} contacts • {stats['departments']} departments • {stats['divisions']} divisions
 
-        **Features:**
-        - 🗣️ Speech-to-text in 99+ languages
-        - 🔍 Smart division matching
-        - 👤 Name extraction (English & Arabic)
-        - 📞 Contact search with confidence scoring
+        **AI Models Powered:**
+        - 🤖 **Whisper Base** - Speech recognition (99+ languages)
+        - 🧠 **MiniLM-L6-v2** - Semantic search embeddings
+        - 👤 **GLiNER** - Named entity recognition
         """)
 
         with gr.Tabs():
 
             # Tab 1: Division Matching (Text)
             with gr.Tab("📝 Division Matching (Text)"):
-                gr.Markdown("""
-                ### Search for divisions by text query
-                Try queries like:
-                - "I need help from IT Security"
-                - "Find someone in Finance"
-                - "Connect me to Human Resources"
-                - "Find Ahmed in App Dev"
-                """)
-
                 with gr.Row():
-                    with gr.Column():
+                    with gr.Column(scale=1):
+                        gr.Markdown("""
+                        ### 🔍 How It Works
+
+                        ```mermaid
+                        graph TD
+                            A[Your Text Query] --> B[Name Extraction<br/>GLiNER Model]
+                            A --> C[Semantic Search<br/>MiniLM Embeddings]
+                            B --> D[Extract Person Names]
+                            C --> E[Find Matching Divisions]
+                            D --> F[Show Results]
+                            E --> F
+                        ```
+
+                        **Models Used:**
+                        - 🧠 **MiniLM-L6-v2** (Embeddings)
+                        - 👤 **GLiNER** (Name Extraction)
+
+                        **Performance:** ~500ms per query
+                        """)
+
+                    with gr.Column(scale=2):
+                        gr.Markdown("""
+                        ### Search for divisions by text query
+                        **Try these examples:**
+                        - "I need help from IT Security"
+                        - "Find someone in Finance"
+                        - "Connect me to Human Resources"
+                        - "Find Ahmed in App Dev"
+                        """)
+
                         div_text_input = gr.Textbox(
                             label="Enter your query",
                             placeholder="e.g., I need help from IT Security",
                             lines=2
                         )
-                        div_text_btn = gr.Button("🔍 Search Divisions", variant="primary")
-
-                    with gr.Column():
+                        div_text_btn = gr.Button("🔍 Search Divisions", variant="primary", size="lg")
                         div_text_output = gr.Markdown(label="Results")
 
                 div_text_btn.click(
@@ -284,21 +302,47 @@ def create_demo():
 
             # Tab 2: Division Matching (Voice)
             with gr.Tab("🎤 Division Matching (Voice)"):
-                gr.Markdown("""
-                ### Search for divisions by voice
-                Speak your query in any language - it will be automatically transcribed and translated.
-                """)
-
                 with gr.Row():
-                    with gr.Column():
+                    with gr.Column(scale=1):
+                        gr.Markdown("""
+                        ### 🎤 How It Works
+
+                        ```mermaid
+                        graph TD
+                            A[🎙️ Voice Input] --> B[Whisper Base<br/>Speech-to-Text]
+                            B --> C[Auto Language<br/>Detection]
+                            C --> D{English?}
+                            D -->|No| E[Translate to<br/>English]
+                            D -->|Yes| F[Name Extraction<br/>GLiNER]
+                            E --> F
+                            F --> G[Semantic Search<br/>MiniLM]
+                            G --> H[📊 Results]
+                        ```
+
+                        **Models Used:**
+                        - 🎤 **Whisper Base** (Speech-to-Text)
+                        - 🧠 **MiniLM-L6-v2** (Embeddings)
+                        - 👤 **GLiNER** (Name Extraction)
+
+                        **Languages:** 99+ supported
+                        **Performance:** ~8-10s per query
+                        """)
+
+                    with gr.Column(scale=2):
+                        gr.Markdown("""
+                        ### Search for divisions by voice
+                        **Speak in any language:**
+                        - English, Arabic, Spanish, French...
+                        - Automatic transcription + translation
+                        - Same accuracy as text search
+                        """)
+
                         div_voice_input = gr.Audio(
                             sources=["microphone"],
                             type="numpy",
-                            label="Record your voice query"
+                            label="🎙️ Record your voice query"
                         )
-                        div_voice_btn = gr.Button("🔍 Search Divisions", variant="primary")
-
-                    with gr.Column():
+                        div_voice_btn = gr.Button("🔍 Search Divisions", variant="primary", size="lg")
                         div_voice_output = gr.Markdown(label="Results")
 
                 div_voice_btn.click(
@@ -309,25 +353,54 @@ def create_demo():
 
             # Tab 3: Contact Search (Text)
             with gr.Tab("👥 Contact Search (Text)"):
-                gr.Markdown("""
-                ### Search for contacts by text query
-                Try queries like:
-                - "Find Dima in Information Technology"
-                - "Ahmed Al-Malek"
-                - "I need to talk to someone in Legal"
-                - "Find Rashed in Finance"
-                """)
-
                 with gr.Row():
-                    with gr.Column():
+                    with gr.Column(scale=1):
+                        gr.Markdown("""
+                        ### 👥 How It Works
+
+                        ```mermaid
+                        graph TD
+                            A[Text Query] --> B[Name Extraction<br/>GLiNER]
+                            A --> C[Division Matching<br/>MiniLM]
+                            B --> D[Extract Names]
+                            C --> E[Find Divisions]
+                            D --> F[Search 500<br/>Contacts]
+                            E --> F
+                            F --> G[Fuzzy Matching<br/>+ Scoring]
+                            G --> H[Ranked Results<br/>by Confidence]
+                        ```
+
+                        **Models Used:**
+                        - 🧠 **MiniLM-L6-v2** (Division Match)
+                        - 👤 **GLiNER** (Name Extraction)
+                        - 🔍 **Fuzzy Matching** (Contact Search)
+
+                        **Database:** 500 contacts
+                        **Performance:** ~2-3s per query
+                        """)
+
+                    with gr.Column(scale=2):
+                        gr.Markdown("""
+                        ### Search for contacts by text query
+                        **Try these examples:**
+                        - "Find Dima in Information Technology"
+                        - "Ahmed Al-Malek"
+                        - "I need to talk to someone in Legal"
+                        - "Find Rashed in Finance"
+
+                        **Results show:**
+                        - ✅ Name (English + Arabic)
+                        - ✅ Job title and division
+                        - ✅ Contact info (phone, email)
+                        - ✅ Confidence score
+                        """)
+
                         contact_text_input = gr.Textbox(
                             label="Enter your query",
                             placeholder="e.g., Find Dima in Information Technology",
                             lines=2
                         )
-                        contact_text_btn = gr.Button("🔍 Search Contacts", variant="primary")
-
-                    with gr.Column():
+                        contact_text_btn = gr.Button("🔍 Search Contacts", variant="primary", size="lg")
                         contact_text_output = gr.Markdown(label="Results")
 
                 contact_text_btn.click(
@@ -338,21 +411,55 @@ def create_demo():
 
             # Tab 4: Contact Search (Voice)
             with gr.Tab("🎙️ Contact Search (Voice)"):
-                gr.Markdown("""
-                ### Search for contacts by voice
-                Speak your query in any language to find contacts.
-                """)
-
                 with gr.Row():
-                    with gr.Column():
+                    with gr.Column(scale=1):
+                        gr.Markdown("""
+                        ### 🎙️ How It Works
+
+                        ```mermaid
+                        graph TD
+                            A[🎤 Voice] --> B[Whisper<br/>Transcribe]
+                            B --> C{Language?}
+                            C -->|Arabic/Other| D[Translate to<br/>English]
+                            C -->|English| E[GLiNER<br/>Extract Names]
+                            D --> E
+                            E --> F[MiniLM<br/>Match Divisions]
+                            F --> G[Search 500<br/>Contacts]
+                            G --> H[Fuzzy Match<br/>+ Score]
+                            H --> I[📋 Ranked<br/>Results]
+                        ```
+
+                        **Full AI Pipeline:**
+                        - 🎤 **Whisper** (Transcription)
+                        - 🌐 **Translation** (Auto)
+                        - 👤 **GLiNER** (Names)
+                        - 🧠 **MiniLM** (Divisions)
+                        - 🔍 **Fuzzy Match** (Contacts)
+
+                        **Performance:** ~8-12s total
+                        """)
+
+                    with gr.Column(scale=2):
+                        gr.Markdown("""
+                        ### Search for contacts by voice
+                        **Speak naturally in any language:**
+                        - "Find Ahmed from IT"
+                        - "أحتاج أحمد من تقنية المعلومات" (Arabic)
+                        - Automatic language detection
+                        - Same results as text search
+
+                        **Perfect for:**
+                        - ✅ Mobile/hands-free use
+                        - ✅ Non-English speakers
+                        - ✅ Quick lookups
+                        """)
+
                         contact_voice_input = gr.Audio(
                             sources=["microphone"],
                             type="numpy",
-                            label="Record your voice query"
+                            label="🎙️ Record your voice query"
                         )
-                        contact_voice_btn = gr.Button("🔍 Search Contacts", variant="primary")
-
-                    with gr.Column():
+                        contact_voice_btn = gr.Button("🔍 Search Contacts", variant="primary", size="lg")
                         contact_voice_output = gr.Markdown(label="Results")
 
                 contact_voice_btn.click(
@@ -366,7 +473,7 @@ def create_demo():
         **Models:**
         - Embeddings: `sentence-transformers/all-MiniLM-L6-v2`
         - Name Extraction: `urchade/gliner_small-v2.1`
-        - Speech-to-Text: `openai/whisper-tiny`
+        - Speech-to-Text: `openai/whisper-base`
 
         **Supported Languages:** 99+ languages (auto-detected)
         """)