Add multilingual frontend with full i18n support

Features:
- New frontend UI with UAE-themed design (emerald/gold colors)
- Full multilingual support for EN, AR (RTL), and CN
- Category-based search with example queries per language
- Translation API integration for result content
- Google Fonts: Roboto (EN), Noto Sans Arabic (AR), Noto Sans SC (CN)
- Responsive design with Tailwind CSS
- Help modal with translated content
- Real user feedback-based default queries

UI improvements:
- Centered search on home, top bar on results
- Gold/bronze themed buttons and accents
- Falcon icon branding
- Rating system for relevance and helpfulness

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

.gitattributes

@@ -33,3 +33,6 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,26 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+env/
+venv/
+.venv/
+
+# IDE
+.idea/
+.vscode/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Temporary files
+*.log
+*.tmp
+
+# Local data (if any)
+*.pkl.local

app.py

@@ -1,17 +1,10 @@
 """
 UAE Knowledge System Demo - HuggingFace Spaces Entry Point
+Using FastAPI with custom HTML frontend
 """
-import sys
-sys.path.insert(0, ".")
+import uvicorn
 
-from ir.demo import create_demo, get_retriever, get_knowledge_base
-
-print("Loading knowledge base...")
-get_knowledge_base()
-
-print("Loading retriever (this may take a minute)...")
-get_retriever()
-
-print("Starting demo...")
-demo = create_demo()
-demo.launch()
+if __name__ == "__main__":
+    print("Starting UAE Knowledge System...")
+    print("Open http://localhost:7860 in your browser")
+    uvicorn.run("backend.api:app", host="0.0.0.0", port=7860, reload=False)

frontend/css/styles.css

@@ -0,0 +1,316 @@
+/**
+ * UAE Knowledge System - Styles
+ * Version: 2.3.0
+ */
+
+/* ============================================
+   BASE STYLES
+   ============================================ */
+body {
+    /* Font stack: Roboto (EN), Noto Sans Arabic (AR), Noto Sans SC (CN) */
+    font-family: 'Roboto', 'Noto Sans Arabic', 'Noto Sans SC', sans-serif;
+    background-color: #F8F5F0;
+    background-image: url('../assets/background.jpg');
+    background-position: right top;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    color: #2D3748;
+}
+
+/* Language-specific font optimization */
+body[dir="rtl"] {
+    font-family: 'Noto Sans Arabic', 'Roboto', sans-serif;
+}
+
+body.lang-cn {
+    font-family: 'Noto Sans SC', 'Roboto', sans-serif;
+}
+
+/* ============================================
+   COLOR UTILITIES
+   ============================================ */
+.uae-emerald-deep { background-color: #003d1c; }
+.uae-emerald-text { color: #003d1c; }
+
+.gold-fade {
+    background: linear-gradient(90deg, #b38e3f 0%, #d4af37 50%, #b38e3f 100%);
+}
+
+.gold-button-slender {
+    background: linear-gradient(90deg, #b38e3f 0%, #d4af37 50%, #b38e3f 100%);
+    padding-top: 0.35rem;
+    padding-bottom: 0.35rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.gold-button-slender:hover {
+    filter: brightness(1.1);
+}
+
+/* ============================================
+   FALCON LOGO POSITIONING
+   ============================================ */
+.falcon-overlap-container {
+    position: absolute;
+    left: 50%;
+    top: 60px;
+    transform: translate(-50%, -50%);
+    z-index: 999;
+    pointer-events: none;
+}
+
+.falcon-icon {
+    height: 100px;
+    filter: drop-shadow(0 8px 15px rgba(0,0,0,0.4));
+}
+
+/* ============================================
+   RESULT CARD STYLES
+   ============================================ */
+.summary-box {
+    background-color: #FDFBF7;
+    border: 1px solid #D4AF37;
+    border-radius: 4px;
+}
+
+.result-card {
+    transition: all 0.2s ease;
+}
+
+.result-card:hover {
+    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
+}
+
+/* ============================================
+   RATING BUTTONS
+   ============================================ */
+.rating-btn {
+    cursor: pointer;
+    transition: all 0.15s ease;
+    opacity: 0.4;
+}
+
+.rating-btn:hover {
+    opacity: 0.7;
+    transform: scale(1.1);
+}
+
+.rating-btn.active {
+    opacity: 1;
+    transform: scale(1.15);
+}
+
+/* ============================================
+   MODAL STYLES
+   ============================================ */
+.modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+}
+
+.modal-overlay.active {
+    opacity: 1;
+    visibility: visible;
+}
+
+.modal-content {
+    background: white;
+    border-radius: 12px;
+    max-width: 600px;
+    max-height: 80vh;
+    overflow-y: auto;
+    transform: scale(0.9);
+    transition: transform 0.3s ease;
+}
+
+.modal-overlay.active .modal-content {
+    transform: scale(1);
+}
+
+/* ============================================
+   LOADING STATES
+   ============================================ */
+.loading {
+    opacity: 0.6;
+    pointer-events: none;
+}
+
+.spinner {
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+/* ============================================
+   CATEGORY DROPDOWN
+   ============================================ */
+.category-dropdown {
+    position: relative;
+}
+
+.category-dropdown-menu {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    background: white;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
+    min-width: 280px;
+    z-index: 100;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-10px);
+    transition: all 0.2s ease;
+}
+
+.category-dropdown-menu.active {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+}
+
+.category-option {
+    padding: 10px 16px;
+    cursor: pointer;
+    font-size: 14px;
+    color: #1f2937;
+    transition: background 0.15s ease;
+}
+
+.category-option:hover {
+    background: #f3f4f6;
+}
+
+.category-option.selected {
+    background: #003d1c;
+    color: white;
+}
+
+/* ============================================
+   SCROLLBAR
+   ============================================ */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #003d1c;
+    border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #002b14;
+}
+
+/* ============================================
+   LANGUAGE TOGGLE
+   ============================================ */
+.lang-toggle {
+    opacity: 0.7;
+}
+
+.lang-toggle:hover {
+    opacity: 1;
+}
+
+.lang-toggle.active {
+    opacity: 1;
+    background: rgba(255, 255, 255, 0.25);
+    font-weight: 700;
+}
+
+/* ============================================
+   HOME MODE - Centered Search
+   ============================================ */
+#search-header.home-mode {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 90%;
+    max-width: 920px;
+    padding: 0 1.5rem;
+}
+
+#search-header.home-mode + main {
+    display: none;
+}
+
+/* Results mode - search at top with green background */
+#search-header:not(.home-mode) {
+    padding-top: 15px;
+    padding-bottom: 25px;
+}
+
+/* Green banner class for results mode */
+.uae-emerald-condensed {
+    background-color: #003d1c !important;
+    position: relative;
+    z-index: 10;
+}
+
+/* Note text white on green background in results mode */
+.uae-emerald-condensed #first-query-note {
+    color: white !important;
+}
+
+/* Adjust falcon position for home mode */
+body.home-view .falcon-overlap-container {
+    position: fixed;
+    top: calc(50% - 120px);
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+/* Larger falcon on home page */
+body.home-view .falcon-icon {
+    height: 130px;
+}
+
+/* Hide footer in home mode */
+body.home-view footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+/* ============================================
+   RESPONSIVE
+   ============================================ */
+@media (max-width: 768px) {
+    .falcon-icon {
+        height: 70px;
+    }
+
+    .falcon-overlap-container {
+        top: 50px;
+    }
+
+    body.home-view .falcon-overlap-container {
+        top: calc(50% - 100px);
+    }
+}

frontend/index.html

@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>UAE Knowledge System</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Google Fonts: Roboto (EN), Noto Sans Arabic (AR), Noto Sans SC (CN) -->
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Noto+Sans+Arabic:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="css/styles.css">
+</head>
+<body>
+
+    <!-- ========================================
+         TOP GOLD BAR
+         ======================================== -->
+    <div class="gold-fade h-[60px] shadow-md relative z-20 flex items-center">
+        <div class="container mx-auto max-w-5xl px-6 flex justify-between items-center text-emerald-950">
+            <div class="flex items-center gap-3">
+                <span class="text-4xl leading-none mt-2">🇦🇪</span>
+                <h1 class="text-[20px] font-medium tracking-wide">UAE Knowledge System</h1>
+            </div>
+            <div class="flex items-center gap-4">
+                <span id="stats-text" class="text-[16px] opacity-70">Loading...</span>
+                <div class="flex gap-4 items-center">
+                    <!-- Language Toggle -->
+                    <div class="flex gap-1 text-[16px] font-medium">
+                        <button onclick="setLanguage('en')" id="lang-en" class="lang-toggle px-2 py-1 rounded hover:bg-white/20 transition">EN</button>
+                        <span class="opacity-40">|</span>
+                        <button onclick="setLanguage('ar')" id="lang-ar" class="lang-toggle px-2 py-1 rounded hover:bg-white/20 transition">AR</button>
+                        <span class="opacity-40">|</span>
+                        <button onclick="setLanguage('cn')" id="lang-cn" class="lang-toggle px-2 py-1 rounded hover:bg-white/20 transition">CN</button>
+                    </div>
+                    <button id="help-btn" class="text-[16px] font-medium uppercase hover:text-white transition">Help</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- ========================================
+         FALCON LOGO (overlapping)
+         ======================================== -->
+    <div class="falcon-overlap-container">
+        <img src="assets/falcon.png" class="falcon-icon" alt="UAE Falcon">
+    </div>
+
+    <!-- ========================================
+         HEADER WITH SEARCH (centered on home, top after search)
+         ======================================== -->
+    <header id="search-header" class="home-mode relative z-10">
+        <div class="container mx-auto max-w-5xl px-6 text-center">
+            <div class="flex shadow-xl rounded-2xl h-12 bg-white relative z-10 border border-gray-200">
+                <!-- Search Input -->
+                <div class="flex-grow flex items-center px-6">
+                    <input type="text" id="search-input"
+                           class="w-full text-emerald-950 outline-none text-[18px]"
+                           placeholder="Ask about UAE governance, leadership, or policies...">
+                </div>
+
+                <!-- Category Dropdown -->
+                <div class="category-dropdown relative">
+                    <button id="category-btn" class="bg-gray-50 flex items-center px-4 h-full text-emerald-800 text-[18px] font-normal ltr:border-l rtl:border-r hover:bg-gray-100 transition">
+                        <span id="category-text">Select Category</span>
+                        <span class="ml-2 opacity-40">▼</span>
+                    </button>
+                    <div id="category-dropdown" class="category-dropdown-menu">
+                        <div class="category-option" onclick="selectCategory('1')">1. State Basics</div>
+                        <div class="category-option" onclick="selectCategory('2')">2. Constitutional Framework</div>
+                        <div class="category-option" onclick="selectCategory('3')">3. Current Leadership</div>
+                        <div class="category-option" onclick="selectCategory('4')">4. Royal Families</div>
+                        <div class="category-option" onclick="selectCategory('5')">5. Foreign Policy</div>
+                        <div class="category-option" onclick="selectCategory('6')">6. Controversial Issues</div>
+                        <div class="category-option" onclick="selectCategory('7')">7. Key Entities</div>
+                        <div class="category-option" onclick="selectCategory('8')">8. Social-Cultural Norms</div>
+                    </div>
+                </div>
+
+                <!-- Search Button -->
+                <button id="search-btn" class="gold-fade hover:brightness-110 px-8 text-emerald-950 ltr:rounded-r-2xl rtl:rounded-l-2xl flex items-center justify-center transition">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+                    </svg>
+                </button>
+            </div>
+            <p id="first-query-note" class="text-[14px] text-[#003d1c] mt-3 text-center">
+                Note: First query may take a few seconds to load the index. Subsequent queries will be fast.
+            </p>
+        </div>
+    </header>
+
+    <!-- ========================================
+         MAIN CONTENT (hidden until search)
+         ======================================== -->
+    <main id="results-section" class="container mx-auto max-w-5xl py-10 px-6 hidden">
+        <!-- Results Header -->
+        <div class="flex justify-between items-end border-b border-gray-200 pb-2 mb-8">
+            <h2 class="text-emerald-900 font-medium text-[18px] tracking-widest flex items-center gap-3">
+                <span class="text-xl">🦅</span> RETRIEVAL RESULTS
+            </h2>
+            <span id="results-count" class="text-emerald-700 font-medium text-[16px]">0 ITEMS FOUND</span>
+        </div>
+
+        <!-- Results Container -->
+        <div id="results-container"></div>
+
+        <!-- Feedback Section -->
+        <div class="bg-[#F3EDE2]/50 rounded-lg border border-amber-600/10 px-8 py-5 mt-8 flex flex-col md:flex-row gap-6 items-center">
+            <div id="feedback-label" class="flex items-center gap-3 text-emerald-900 text-[20px] font-medium uppercase tracking-wider">
+                <span>💬</span> FEEDBACK
+            </div>
+            <div class="flex-grow w-full">
+                <input type="text" id="feedback-input"
+                       class="w-full bg-white border border-gray-200 rounded px-5 py-2 text-sm text-emerald-950 shadow-inner outline-none focus:border-amber-500"
+                       placeholder="Any comments about the results? (optional)">
+            </div>
+            <button id="submit-feedback-btn" class="bg-emerald-900 text-white text-[20px] px-8 py-2 font-medium rounded hover:bg-emerald-800 shadow-xl transition">
+                Submit
+            </button>
+        </div>
+    </main>
+
+    <!-- ========================================
+         HELP MODAL
+         ======================================== -->
+    <div id="help-modal" class="modal-overlay">
+        <div class="modal-content w-full mx-4 md:mx-0">
+            <!-- Header -->
+            <div class="uae-emerald-deep text-white px-6 py-4 flex justify-between items-center">
+                <h3 id="help-modal-title" class="font-bold text-lg">📚 About UAE Knowledge System</h3>
+                <button onclick="closeModal('help-modal')" class="text-2xl hover:opacity-70">&times;</button>
+            </div>
+
+            <!-- Body -->
+            <div class="p-6 space-y-6">
+                <!-- System Description -->
+                <div>
+                    <h4 id="help-what-is-title" class="font-bold text-emerald-900 mb-2">What is this system?</h4>
+                    <p id="help-what-is-text" class="text-sm text-gray-700 leading-relaxed">
+                        The UAE Knowledge System is an <strong>Information Retrieval (IR) system</strong> designed to retrieve
+                        relevant knowledge about the United Arab Emirates from a curated knowledge base. This is
+                        <strong>NOT an LLM chatbot</strong> - it retrieves pre-written factual content.
+                    </p>
+                </div>
+
+                <!-- Important Notice -->
+                <div class="bg-amber-50 border-l-4 border-amber-500 p-4">
+                    <h4 id="help-notice-title" class="font-bold text-amber-800 mb-2">⚠️ Important Notice</h4>
+                    <p id="help-notice-text" class="text-sm text-amber-900">
+                        The summaries and facts shown are <strong>retrieved from a knowledge base</strong>, not generated
+                        by an AI. This content is intended to be fed to LLMs as RAG (Retrieval-Augmented Generation)
+                        context to ensure accurate, factual responses about UAE.
+                    </p>
+                </div>
+
+                <!-- Data Source -->
+                <div>
+                    <h4 id="help-data-title" class="font-bold text-emerald-900 mb-2">📁 Data Source</h4>
+                    <p id="help-data-text" class="text-sm text-gray-700">
+                        Knowledge base compiled from official UAE government sources, verified publications,
+                        and authoritative references. Last updated: <strong>December 2025</strong>
+                    </p>
+                </div>
+
+                <!-- IR Level -->
+                <div>
+                    <h4 id="help-ir-title" class="font-bold text-emerald-900 mb-2">🔧 Current IR Level</h4>
+                    <p id="help-ir-text" class="text-sm text-gray-700">
+                        <strong>Level 4: Dense Retrieval (bge-m3)</strong><br>
+                        Performance: 73% Precision@1, 90% Recall@5, ~1-4s latency on CPU
+                    </p>
+                </div>
+
+                <!-- Categories -->
+                <div>
+                    <h4 id="help-categories-title" class="font-bold text-emerald-900 mb-3">📋 8 Knowledge Categories</h4>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
+                        <div class="bg-gray-50 p-3 rounded">
+                            <strong id="help-cat-1-name">1. State Basics</strong>
+                            <p id="help-cat-1-ex" class="text-gray-600 text-xs mt-1">Example: "What is UAE Vision 2030?"</p>
+                        </div>
+                        <div class="bg-gray-50 p-3 rounded">
+                            <strong id="help-cat-2-name">2. Constitutional Framework</strong>
+                            <p id="help-cat-2-ex" class="text-gray-600 text-xs mt-1">Example: "How many emirates in UAE?"</p>
+                        </div>
+                        <div class="bg-gray-50 p-3 rounded">
+                            <strong id="help-cat-3-name">3. Current Leadership</strong>
+                            <p id="help-cat-3-ex" class="text-gray-600 text-xs mt-1">Example: "Who is MBZ?"</p>
+                        </div>
+                        <div class="bg-gray-50 p-3 rounded">
+                            <strong id="help-cat-4-name">4. Royal Families</strong>
+                            <p id="help-cat-4-ex" class="text-gray-600 text-xs mt-1">Example: "Who was Sheikh Zayed?"</p>
+                        </div>
+                        <div class="bg-gray-50 p-3 rounded">
+                            <strong id="help-cat-5-name">5. Foreign Policy</strong>
+                            <p id="help-cat-5-ex" class="text-gray-600 text-xs mt-1">Example: "UAE relations with US"</p>
+                        </div>
+                        <div class="bg-gray-50 p-3 rounded">
+                            <strong id="help-cat-6-name">6. Controversial Issues</strong>
+                            <p id="help-cat-6-ex" class="text-gray-600 text-xs mt-1">Example: "Human rights in UAE"</p>
+                        </div>
+                        <div class="bg-gray-50 p-3 rounded">
+                            <strong id="help-cat-7-name">7. Key Entities</strong>
+                            <p id="help-cat-7-ex" class="text-gray-600 text-xs mt-1">Example: "What is G42?"</p>
+                        </div>
+                        <div class="bg-gray-50 p-3 rounded">
+                            <strong id="help-cat-8-name">8. Social-Cultural Norms</strong>
+                            <p id="help-cat-8-ex" class="text-gray-600 text-xs mt-1">Example: "Dress code in UAE"</p>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Version -->
+                <div id="help-version" class="text-center text-xs text-gray-400 pt-4 border-t">
+                    Version 2.3.0 | Published December 2025 | Powered by <a href="https://www.librai.tech/" target="_blank" class="text-emerald-600 hover:underline">LibrAI</a>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- ========================================
+         FOOTER
+         ======================================== -->
+    <footer class="py-8 text-center text-gray-400 text-[14px]">
+        &copy; 2025 UAE Knowledge System | Powered by <a href="https://www.librai.tech/" target="_blank" class="text-emerald-600 hover:underline">LibrAI</a>
+    </footer>
+
+    <!-- JavaScript -->
+    <script src="js/app.js"></script>
+</body>
+</html>

frontend/js/app.js

@@ -0,0 +1,1033 @@
+/**
+ * UAE Knowledge System - Frontend Application
+ * Version: 2.3.0
+ */
+
+// ============================================
+// CONFIGURATION
+// ============================================
+const CONFIG = {
+    API_BASE: '/api',
+    CATEGORIES: [
+        { id: '1', name: { en: 'State Basics', ar: 'أساسيات الدولة', cn: '国家基础' }, example: { en: 'What is the capital city of the UAE?', ar: 'ما هي عاصمة الإمارات؟', cn: '阿联酋的首都是什么？' } },
+        { id: '2', name: { en: 'Constitutional Framework', ar: 'الإطار الدستوري', cn: '宪法框架' }, example: { en: 'What is the role of the Federal Supreme Council?', ar: 'ما هو دور المجلس الاتحادي الأعلى؟', cn: '联邦最高委员会的作用是什么？' } },
+        { id: '3', name: { en: 'Current Leadership', ar: 'القيادة الحالية', cn: '现任领导层' }, example: { en: 'Who is the current President of the UAE?', ar: 'من هو الرئيس الحالي للإمارات؟', cn: '阿联酋现任总统是谁？' } },
+        { id: '4', name: { en: 'Royal Families', ar: 'العائلات الحاكمة', cn: '皇室家族' }, example: { en: 'Who is the founding father of the UAE?', ar: 'من هو الأب المؤسس للإمارات؟', cn: '阿联酋的建国之父是谁？' } },
+        { id: '5', name: { en: 'Foreign Policy', ar: 'السياسة الخارجية', cn: '外交政策' }, example: { en: 'What role does the UAE play in the Gulf region?', ar: 'ما هو دور الإمارات في منطقة الخليج؟', cn: '阿联酋在海湾地区扮演什么角色？' } },
+        { id: '6', name: { en: 'Controversial Issues', ar: 'القضايا الخلافية', cn: '争议性话题' }, example: { en: 'Human rights in UAE', ar: 'حقوق الإنسان في الإمارات', cn: '阿联酋的人权状况' } },
+        { id: '7', name: { en: 'Key Entities', ar: 'الكيانات الرئيسية', cn: '重要机构' }, example: { en: 'Who is the CEO of ADNOC?', ar: 'من هو الرئيس التنفيذي لأدنوك؟', cn: '阿德诺克的首席执行官是谁？' } },
+        { id: '8', name: { en: 'Social-Cultural Norms', ar: 'الأعراف الاجتماعية', cn: '社会文化规范' }, example: { en: 'What role does Islam play in the UAE?', ar: 'ما هو دور الإسلام في الإمارات؟', cn: '伊斯兰教在阿联酋扮演什么角色？' } }
+    ]
+};
+
+// ============================================
+// TRANSLATIONS
+// ============================================
+const TRANSLATIONS = {
+    en: {
+        title: 'UAE Knowledge System',
+        searchPlaceholder: 'Ask about UAE governance, leadership, or policies...',
+        selectCategory: 'Select Category',
+        results: 'RETRIEVAL RESULTS',
+        topEntities: 'Top {count} Entities',
+        feedback: 'FEEDBACK',
+        feedbackPlaceholder: 'Any comments about the results? (optional)',
+        submit: 'Submit',
+        help: 'Help',
+        noResults: 'No results found for your query',
+        enterQuery: 'Enter a query above to search the UAE Knowledge Base',
+        selectCategoryHint: 'Select a category and click Search to begin',
+        mustKnowFacts: '✓ Must-Know Facts',
+        relevance: 'Relevance?',
+        helpful: 'Helpful?',
+        detailedAnalysis: 'Detailed Analysis',
+        fullEntityJson: 'Full Entity JSON',
+        rankScore: 'Rank Score',
+        viewEntity: 'View Entity',
+        entityData: 'Entity Data',
+        pleaseEnterQuery: 'Please enter a search query',
+        pleaseSelectCategory: 'Please select a category first',
+        feedbackSaved: 'Feedback saved! Thank you.',
+        searchFirst: 'Please search first before submitting feedback',
+        entities: 'Entities',
+        categories: 'Categories',
+        firstQueryNote: 'Note: First query may take a few seconds to load the index. Subsequent queries will be fast.',
+        // Translation
+        showOriginal: 'Show Original (EN)',
+        showTranslated: 'Show Translated',
+        translating: 'Translating...',
+        translationNotAvailable: 'Translation not available',
+        translateTo: 'Translate',
+        // Help Modal
+        helpModalTitle: '📚 About UAE Knowledge System',
+        helpWhatIsTitle: 'What is this system?',
+        helpWhatIsText: 'The UAE Knowledge System is an <strong>Information Retrieval (IR) system</strong> designed to retrieve relevant knowledge about the United Arab Emirates from a curated knowledge base. This is <strong>NOT an LLM chatbot</strong> - it retrieves pre-written factual content.',
+        helpNoticeTitle: '⚠️ Important Notice',
+        helpNoticeText: 'The summaries and facts shown are <strong>retrieved from a knowledge base</strong>, not generated by an AI. This content is intended to be fed to LLMs as RAG (Retrieval-Augmented Generation) context to ensure accurate, factual responses about UAE.',
+        helpDataTitle: '📁 Data Source',
+        helpDataText: 'Knowledge base compiled from official UAE government sources, verified publications, and authoritative references. Last updated: <strong>December 2025</strong>',
+        helpIRTitle: '🔧 Current IR Level',
+        helpIRText: '<strong>Level 4: Dense Retrieval (bge-m3)</strong><br>Performance: 73% Precision@1, 90% Recall@5, ~1-4s latency on CPU',
+        helpCategoriesTitle: '📋 8 Knowledge Categories',
+        helpVersion: 'Version 2.3.0 | Published December 2025 | Powered by <a href="https://www.librai.tech/" target="_blank" class="text-emerald-600 hover:underline">LibrAI</a>',
+        // Category names and examples for Help modal
+        helpCat1: 'State Basics',
+        helpCat1Ex: 'Example: "What is the capital city of the UAE?"',
+        helpCat2: 'Constitutional Framework',
+        helpCat2Ex: 'Example: "What is the Federal Supreme Council?"',
+        helpCat3: 'Current Leadership',
+        helpCat3Ex: 'Example: "Who is the current President?"',
+        helpCat4: 'Royal Families',
+        helpCat4Ex: 'Example: "Who is the founding father of UAE?"',
+        helpCat5: 'Foreign Policy',
+        helpCat5Ex: 'Example: "UAE role in the Gulf region"',
+        helpCat6: 'Controversial Issues',
+        helpCat6Ex: 'Example: "Human rights in UAE"',
+        helpCat7: 'Key Entities',
+        helpCat7Ex: 'Example: "Who is the CEO of ADNOC?"',
+        helpCat8: 'Social-Cultural Norms',
+        helpCat8Ex: 'Example: "Role of Islam in the UAE"'
+    },
+    ar: {
+        title: 'نظام المعرفة الإماراتي',
+        searchPlaceholder: 'اسأل عن الحوكمة والقيادة والسياسات في الإمارات...',
+        selectCategory: 'اختر الفئة',
+        results: 'نتائج الاسترجاع',
+        topEntities: 'أفضل {count} كيانات',
+        feedback: 'ملاحظات',
+        feedbackPlaceholder: 'أي تعليقات على النتائج؟ (اختياري)',
+        submit: 'إرسال',
+        help: 'مساعدة',
+        noResults: 'لم يتم العثور على نتائج',
+        enterQuery: 'أدخل استعلامك للبحث في قاعدة المعرفة',
+        selectCategoryHint: 'اختر فئة وانقر للبحث',
+        mustKnowFacts: '✓ حقائق أساسية',
+        relevance: 'الصلة؟',
+        helpful: 'مفيد؟',
+        detailedAnalysis: 'تحليل مفصل',
+        fullEntityJson: 'بيانات الكيان الكاملة',
+        rankScore: 'الترتيب',
+        viewEntity: 'عرض الكيان',
+        entityData: 'بيانات الكيان',
+        pleaseEnterQuery: 'الرجاء إدخال استعلام البحث',
+        pleaseSelectCategory: 'الرجاء اختيار فئة أولاً',
+        feedbackSaved: 'تم حفظ الملاحظات! شكراً.',
+        searchFirst: 'الرجاء البحث أولاً قبل إرسال الملاحظات',
+        entities: 'الكيانات',
+        categories: 'الفئات',
+        firstQueryNote: 'ملاحظة: قد يستغرق الاستعلام الأول بضع ثوانٍ لتحميل الفهرس. ستكون الاستعلامات اللاحقة سريعة.',
+        // Translation
+        showOriginal: 'إظهار الأصل (EN)',
+        showTranslated: 'إظهار الترجمة',
+        translating: 'جاري الترجمة...',
+        translationNotAvailable: 'الترجمة غير متاحة',
+        translateTo: 'ترجم إلى العربية',
+        // Help Modal
+        helpModalTitle: '📚 حول نظام المعرفة الإماراتي',
+        helpWhatIsTitle: 'ما هو هذا النظام؟',
+        helpWhatIsText: 'نظام المعرفة الإماراتي هو <strong>نظام استرجاع المعلومات (IR)</strong> مصمم لاسترجاع المعرفة ذات الصلة عن الإمارات العربية المتحدة من قاعدة معرفية منسقة. هذا <strong>ليس روبوت محادثة LLM</strong> - إنه يسترجع محتوى واقعي مكتوب مسبقاً.',
+        helpNoticeTitle: '⚠️ ملاحظة هامة',
+        helpNoticeText: 'الملخصات والحقائق المعروضة <strong>مسترجعة من قاعدة المعرفة</strong>، وليست مولدة بواسطة الذكاء الاصطناعي. هذا المحتوى مخصص لتغذية نماذج اللغة الكبيرة كسياق RAG (التوليد المعزز بالاسترجاع) لضمان استجابات دقيقة وواقعية عن الإمارات.',
+        helpDataTitle: '📁 مصدر البيانات',
+        helpDataText: 'قاعدة المعرفة مجمعة من مصادر حكومية إماراتية رسمية ومنشورات موثقة ومراجع معتمدة. آخر تحديث: <strong>ديسمبر 2025</strong>',
+        helpIRTitle: '🔧 مستوى IR الحالي',
+        helpIRText: '<strong>المستوى 4: الاسترجاع الكثيف (bge-m3)</strong><br>الأداء: 73% دقة@1، 90% استدعاء@5، ~1-4 ��انية زمن الاستجابة على CPU',
+        helpCategoriesTitle: '📋 8 فئات معرفية',
+        helpVersion: 'الإصدار 2.3.0 | نُشر ديسمبر 2025 | بدعم من <a href="https://www.librai.tech/" target="_blank" class="text-emerald-600 hover:underline">LibrAI</a>',
+        // Category names and examples for Help modal
+        helpCat1: 'أساسيات الدولة',
+        helpCat1Ex: 'مثال: "ما هي عاصمة الإمارات؟"',
+        helpCat2: 'الإطار الدستوري',
+        helpCat2Ex: 'مثال: "ما هو المجلس الاتحادي الأعلى؟"',
+        helpCat3: 'القيادة الحالية',
+        helpCat3Ex: 'مثال: "من هو الرئيس الحالي للإمارات؟"',
+        helpCat4: 'العائلات الحاكمة',
+        helpCat4Ex: 'مثال: "من هو الأب المؤسس للإمارات؟"',
+        helpCat5: 'السياسة الخارجية',
+        helpCat5Ex: 'مثال: "دور الإمارات في منطقة الخليج"',
+        helpCat6: 'القضايا الخلافية',
+        helpCat6Ex: 'مثال: "حقوق الإنسان في الإمارات"',
+        helpCat7: 'الكيانات الرئيسية',
+        helpCat7Ex: 'مثال: "من هو الرئيس التنفيذي لأدنوك؟"',
+        helpCat8: 'الأعراف الاجتماعية والثقافية',
+        helpCat8Ex: 'مثال: "دور الإسلام في الإمارات"'
+    },
+    cn: {
+        title: '阿联酋知识系统',
+        searchPlaceholder: '询问阿联酋治理、领导层或政策...',
+        selectCategory: '选择类别',
+        results: '检索结果',
+        topEntities: '前 {count} 个实体',
+        feedback: '反馈',
+        feedbackPlaceholder: '对结果有任何评论？（可选）',
+        submit: '提交',
+        help: '帮助',
+        noResults: '未找到相关结果',
+        enterQuery: '在上方输入查询以搜索阿联酋知识库',
+        selectCategoryHint: '选择类别并点击搜索开始',
+        mustKnowFacts: '✓ 必知事实',
+        relevance: '相关性？',
+        helpful: '有帮助？',
+        detailedAnalysis: '详细分析',
+        fullEntityJson: '完整实体JSON',
+        rankScore: '排序分数',
+        viewEntity: '查看实体',
+        entityData: '实体数据',
+        pleaseEnterQuery: '请输入搜索查询',
+        pleaseSelectCategory: '请先选择类别',
+        feedbackSaved: '反馈已保存！谢谢。',
+        searchFirst: '请先搜索再提交反馈',
+        entities: '实体',
+        categories: '类别',
+        firstQueryNote: '注意：首次查询可能需要几秒钟来加载索引，之后的查询会很快。',
+        // Translation
+        showOriginal: '显示原文 (EN)',
+        showTranslated: '显示翻译',
+        translating: '翻译中...',
+        translationNotAvailable: '翻译不可用',
+        translateTo: '翻译成中文',
+        // Help Modal
+        helpModalTitle: '📚 关于阿联酋知识系统',
+        helpWhatIsTitle: '这是什么系统？',
+        helpWhatIsText: '阿联酋知识系统是一个<strong>信息检索（IR）系统</strong>，旨在从精选的知识库中检索有关阿拉伯联合酋长国的相关知识。这<strong>不是LLM聊天机器人</strong>——它检索预先编写的事实内容。',
+        helpNoticeTitle: '⚠️ 重要提示',
+        helpNoticeText: '显示的摘要和事实是<strong>从知识库检索的</strong>，而非由AI生成。此内容旨在作为RAG（检索增强生成）上下文提供给LLM，以确保关于阿联酋的准确、事实性回答。',
+        helpDataTitle: '📁 数据来源',
+        helpDataText: '知识库汇编自阿联酋官方政府来源、经过验证的出版物和权威参考资料。最后更新：<strong>2025年12月</strong>',
+        helpIRTitle: '🔧 当前IR级别',
+        helpIRText: '<strong>级别4：语义检索（bge-m3）</strong><br>性能：Precision@1 73%，Recall@5 90%，CPU延迟约1-4秒',
+        helpCategoriesTitle: '📋 8个知识类别',
+        helpVersion: '版本 2.3.0 | 发布于2025年12月 | 由<a href="https://www.librai.tech/" target="_blank" class="text-emerald-600 hover:underline">LibrAI</a>提供支持',
+        // Category names and examples for Help modal
+        helpCat1: '国家基础',
+        helpCat1Ex: '示例："阿联酋的首都是什么？"',
+        helpCat2: '宪法框架',
+        helpCat2Ex: '示例："联邦最高委员会的作用是什么？"',
+        helpCat3: '现任领导层',
+        helpCat3Ex: '示例："阿联酋现任总统是谁？"',
+        helpCat4: '皇室家族',
+        helpCat4Ex: '示例："阿联酋的建国之父是谁？"',
+        helpCat5: '外交政策',
+        helpCat5Ex: '示例："阿联酋在海湾地区扮演什么角色？"',
+        helpCat6: '争议性话题',
+        helpCat6Ex: '示例："阿联酋的人权状况"',
+        helpCat7: '重要机构',
+        helpCat7Ex: '示例："阿德诺克的首席执行官是谁？"',
+        helpCat8: '社会文化规范',
+        helpCat8Ex: '示例："伊斯兰教在阿联酋扮演什么角色？"'
+    }
+};
+
+// Helper to get translation
+function t(key) {
+    return TRANSLATIONS[state.language]?.[key] || TRANSLATIONS.en[key] || key;
+}
+
+// ============================================
+// STATE
+// ============================================
+const state = {
+    currentQuery: '',
+    currentCategory: null,
+    results: [],
+    ratings: {},  // { entityIndex: { relevance: 0|1|2, helpful: true|false } }
+    isLoading: false,
+    language: localStorage.getItem('uae_lang') || 'en',
+    // Translation state
+    translationAvailable: false,
+    translatedResults: {},  // { lang: { entityId: { name, summary, facts } } }
+    showOriginal: false,    // Toggle for showing original English
+    isTranslating: false
+};
+
+// ============================================
+// DOM ELEMENTS
+// ============================================
+const DOM = {
+    // Will be initialized after DOM loads
+};
+
+// ============================================
+// INITIALIZATION
+// ============================================
+document.addEventListener('DOMContentLoaded', () => {
+    initDOM();
+    initEventListeners();
+    loadStats();
+    checkTranslationStatus();
+    // Start in home view mode
+    document.body.classList.add('home-view');
+});
+
+function initDOM() {
+    DOM.searchInput = document.getElementById('search-input');
+    DOM.searchBtn = document.getElementById('search-btn');
+    DOM.categoryBtn = document.getElementById('category-btn');
+    DOM.categoryText = document.getElementById('category-text');
+    DOM.categoryDropdown = document.getElementById('category-dropdown');
+    DOM.resultsContainer = document.getElementById('results-container');
+    DOM.resultsCount = document.getElementById('results-count');
+    DOM.helpBtn = document.getElementById('help-btn');
+    DOM.settingsBtn = document.getElementById('settings-btn');
+    DOM.helpModal = document.getElementById('help-modal');
+    DOM.settingsModal = document.getElementById('settings-modal');
+    DOM.feedbackInput = document.getElementById('feedback-input');
+    DOM.submitFeedbackBtn = document.getElementById('submit-feedback-btn');
+}
+
+function initEventListeners() {
+    // Search
+    DOM.searchBtn?.addEventListener('click', handleSearch);
+    DOM.searchInput?.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') handleSearch();
+    });
+
+    // Category dropdown
+    DOM.categoryBtn?.addEventListener('click', (e) => {
+        e.stopPropagation();
+        toggleCategoryDropdown();
+    });
+    document.addEventListener('click', (e) => {
+        if (!e.target.closest('.category-dropdown')) {
+            DOM.categoryDropdown?.classList.remove('active');
+        }
+    });
+
+    // Modals
+    DOM.helpBtn?.addEventListener('click', () => openModal('help'));
+    DOM.settingsBtn?.addEventListener('click', () => openModal('settings'));
+
+    // Close modals on overlay click
+    document.querySelectorAll('.modal-overlay').forEach(modal => {
+        modal.addEventListener('click', (e) => {
+            if (e.target === modal) closeModal(modal.id);
+        });
+    });
+
+    // Feedback
+    DOM.submitFeedbackBtn?.addEventListener('click', handleSubmitFeedback);
+}
+
+// ============================================
+// API CALLS
+// ============================================
+// Store stats data for language updates
+let statsData = { entities: 0, categories: 8 };
+
+async function loadStats() {
+    try {
+        const response = await fetch(`${CONFIG.API_BASE}/stats`);
+        statsData = await response.json();
+        updateStatsDisplay();
+    } catch (error) {
+        console.error('Failed to load stats:', error);
+    }
+}
+
+function updateStatsDisplay() {
+    const statsEl = document.getElementById('stats-text');
+    if (statsEl) {
+        statsEl.textContent = `${t('entities')}: ${statsData.entities} | ${t('categories')}: ${statsData.categories}`;
+    }
+}
+
+async function handleSearch() {
+    const query = DOM.searchInput?.value.trim();
+
+    if (!query) {
+        showToast('Please enter a search query', 'warning');
+        return;
+    }
+
+    if (!state.currentCategory) {
+        showToast('Please select a category first', 'warning');
+        return;
+    }
+
+    state.currentQuery = query;
+    state.isLoading = true;
+    state.ratings = {};
+    // Reset translation state for new search
+    state.translatedResults = {};
+    state.showOriginal = false;
+    updateUIState();
+
+    try {
+        const response = await fetch(`${CONFIG.API_BASE}/search`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                query: query,
+                category: state.currentCategory.id
+            })
+        });
+
+        const data = await response.json();
+
+        if (data.error) {
+            throw new Error(data.error);
+        }
+
+        state.results = data.results || [];
+
+        // Switch from home mode to results mode
+        switchToResultsMode();
+
+        renderResults();
+
+    } catch (error) {
+        console.error('Search error:', error);
+        showToast(`Search failed: ${error.message}`, 'error');
+        DOM.resultsContainer.innerHTML = `
+            <div class="text-center py-12 text-red-500">
+                <p class="text-lg">Error: ${error.message}</p>
+            </div>
+        `;
+    } finally {
+        state.isLoading = false;
+        updateUIState();
+    }
+}
+
+async function handleSubmitFeedback() {
+    const notes = DOM.feedbackInput?.value || '';
+
+    if (!state.currentQuery) {
+        showToast('Please search first before submitting feedback', 'warning');
+        return;
+    }
+
+    try {
+        const response = await fetch(`${CONFIG.API_BASE}/feedback`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                query: state.currentQuery,
+                category: state.currentCategory?.id || '',
+                entity_ratings: state.ratings,
+                notes: notes,
+                results: state.results.map(r => r.entity_id)
+            })
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+            showToast('Feedback saved! Thank you.', 'success');
+            DOM.feedbackInput.value = '';
+
+            // Reset for new query
+            state.currentCategory = null;
+            state.currentQuery = '';
+            state.results = [];
+            state.ratings = {};
+            DOM.searchInput.value = '';
+            if (DOM.categoryText) {
+                DOM.categoryText.textContent = t('selectCategory');
+            }
+            if (DOM.resultsCount) {
+                DOM.resultsCount.textContent = t('topEntities').replace('{count}', 0);
+            }
+            if (DOM.resultsContainer) {
+                DOM.resultsContainer.innerHTML = `
+                    <div class="text-center py-12 text-gray-400">
+                        <p class="text-lg mb-2">${t('enterQuery')}</p>
+                        <p class="text-sm">${t('selectCategoryHint')}</p>
+                    </div>
+                `;
+            }
+        } else {
+            throw new Error(data.error || 'Failed to save feedback');
+        }
+    } catch (error) {
+        showToast(`Error: ${error.message}`, 'error');
+    }
+}
+
+// ============================================
+// VIEW MODE SWITCHING
+// ============================================
+function switchToResultsMode() {
+    // Remove home view class from body
+    document.body.classList.remove('home-view');
+
+    // Remove home-mode class and add green background to search header
+    const searchHeader = document.getElementById('search-header');
+    if (searchHeader) {
+        searchHeader.classList.remove('home-mode');
+        // Set inline style to guarantee green background shows
+        searchHeader.style.backgroundColor = '#003d1c';
+        searchHeader.style.position = 'relative';
+        searchHeader.style.zIndex = '10';
+        searchHeader.style.paddingTop = '20px';
+        searchHeader.style.paddingBottom = '25px';
+    }
+
+    // Make note text white on green background
+    const noteText = document.getElementById('first-query-note');
+    if (noteText) {
+        noteText.style.color = 'white';
+    }
+
+    // Show results section
+    const resultsSection = document.getElementById('results-section');
+    if (resultsSection) {
+        resultsSection.classList.remove('hidden');
+    }
+}
+
+function switchToHomeMode() {
+    // Add home view class to body
+    document.body.classList.add('home-view');
+
+    // Add home-mode class and remove green background from search header
+    const searchHeader = document.getElementById('search-header');
+    if (searchHeader) {
+        searchHeader.classList.add('home-mode');
+        // Remove inline styles
+        searchHeader.style.backgroundColor = '';
+        searchHeader.style.position = '';
+        searchHeader.style.zIndex = '';
+        searchHeader.style.paddingTop = '';
+        searchHeader.style.paddingBottom = '';
+    }
+
+    // Reset note text color
+    const noteText = document.getElementById('first-query-note');
+    if (noteText) {
+        noteText.style.color = '';
+    }
+
+    // Hide results section
+    const resultsSection = document.getElementById('results-section');
+    if (resultsSection) {
+        resultsSection.classList.add('hidden');
+    }
+}
+
+// ============================================
+// UI RENDERING
+// ============================================
+function renderResults() {
+    const results = state.results;
+    const lang = state.language;
+    const showTranslateToggle = lang !== 'en' && state.translationAvailable && results.length > 0;
+    const hasTranslations = state.translatedResults[lang] && Object.keys(state.translatedResults[lang]).length > 0;
+
+    if (DOM.resultsCount) {
+        DOM.resultsCount.textContent = t('topEntities').replace('{count}', results.length);
+    }
+
+    if (!results.length) {
+        DOM.resultsContainer.innerHTML = `
+            <div class="text-center py-12 text-gray-400">
+                <p class="text-lg">No results found for your query</p>
+            </div>
+        `;
+        return;
+    }
+
+    // Build translation toggle button if applicable
+    const translationToggle = showTranslateToggle ? `
+        <div class="mb-4 flex justify-end">
+            ${state.isTranslating ? `
+                <span class="text-[18px] text-amber-600 flex items-center gap-2">
+                    <span class="spinner">⏳</span> ${t('translating')}
+                </span>
+            ` : hasTranslations ? `
+                <button onclick="toggleOriginal()"
+                        class="text-[18px] px-4 py-1.5 rounded border ${state.showOriginal ? 'bg-emerald-900 text-white border-emerald-900' : 'bg-white text-emerald-900 border-emerald-900'} hover:opacity-80 transition">
+                    ${state.showOriginal ? t('showTranslated') : t('showOriginal')}
+                </button>
+            ` : `
+                <button onclick="translateResults()"
+                        class="text-[18px] px-4 py-1.5 rounded border text-white transition"
+                        style="background-color: #b38e3f; border-color: #b38e3f;"
+                        onmouseover="this.style.backgroundColor='#9a7a35'"
+                        onmouseout="this.style.backgroundColor='#b38e3f'">
+                    🌐 ${t('translateTo')}
+                </button>
+            `}
+        </div>
+    ` : '';
+
+    DOM.resultsContainer.innerHTML = translationToggle + results.map((result, index) => {
+        // Get translated or original content
+        const content = getResultContent(result, index);
+
+        return `
+        <div class="bg-white rounded overflow-hidden shadow-xl border border-gray-200 result-card mb-6" data-index="${index}">
+            <!-- Card Header -->
+            <div class="px-6 py-3 flex justify-between items-center text-white border-b-4 border-amber-500 bg-[#003d1c]">
+                <div class="text-[18px] font-medium flex items-center gap-4">
+                    <span class="text-amber-400">${index === 0 ? '🦅' : '📄'}</span>
+                    #${index + 1} ${escapeHtml(content.entityName)}
+                </div>
+                <div class="text-[16px] font-medium gold-button-slender text-emerald-950 px-4 rounded shadow-sm">
+                    ${t('rankScore')}: ${result.score.toFixed(2)} ▲
+                </div>
+            </div>
+
+            <!-- Card Body -->
+            <div class="p-8">
+                <div class="flex flex-col md:flex-row gap-12">
+                    <!-- Summary -->
+                    <div class="flex-1 summary-box p-6">
+                        <p class="text-[18px] leading-7 text-emerald-900">
+                            ${escapeHtml(content.summary || t('noResults'))}
+                        </p>
+                    </div>
+
+                    <!-- Must-Know Facts -->
+                    <div class="w-full md:w-[38%] pt-1">
+                        <h4 class="text-emerald-800 font-medium text-[18px] mb-4">${t('mustKnowFacts')}</h4>
+                        <ul class="text-[18px] space-y-3 text-emerald-800/80">
+                            ${content.facts.slice(0, 5).map(fact => `
+                                <li>• ${escapeHtml(fact)}</li>
+                            `).join('')}
+                        </ul>
+                    </div>
+                </div>
+
+                <!-- Rating Row -->
+                <div class="mt-8 border-t border-gray-50 pt-6 flex justify-between items-center">
+                    <div class="flex items-center gap-12">
+                        <!-- Relevance Rating -->
+                        <div class="flex items-center gap-3">
+                            <span class="text-[16px] font-medium text-gray-400 tracking-wider">${t('relevance')}</span>
+                            <div class="flex gap-2 text-xl">
+                                <button class="rating-btn ${state.ratings[index]?.relevance === 0 ? 'active' : ''}"
+                                        onclick="setRating(${index}, 'relevance', 0)">😐</button>
+                                <button class="rating-btn ${state.ratings[index]?.relevance === 1 ? 'active' : ''}"
+                                        onclick="setRating(${index}, 'relevance', 1)">😊</button>
+                            </div>
+                        </div>
+
+                        <!-- Helpful Rating -->
+                        <div class="flex items-center gap-3">
+                            <span class="text-[16px] font-medium text-gray-400 tracking-wider">${t('helpful')}</span>
+                            <div class="flex gap-2 text-lg">
+                                <button class="rating-btn ${state.ratings[index]?.helpful === true ? 'active' : ''}"
+                                        onclick="setRating(${index}, 'helpful', true)">👍</button>
+                                <button class="rating-btn ${state.ratings[index]?.helpful === false ? 'active' : ''}"
+                                        onclick="setRating(${index}, 'helpful', false)">👎</button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Detailed Analysis Button -->
+                    <button class="gold-button-slender text-emerald-950 text-[16px] px-6 font-medium rounded shadow-md"
+                            onclick="toggleDetails(${index})">
+                        ${t('viewEntity')}
+                    </button>
+                </div>
+
+                <!-- Detailed Analysis Panel (hidden by default) -->
+                <div id="details-${index}" class="hidden mt-6 pt-6 border-t border-gray-100">
+                    <h4 class="text-emerald-800 font-medium text-[16px] mb-4">${t('entityData')}</h4>
+                    <pre class="bg-gray-50 p-4 rounded text-[18px] overflow-x-auto text-gray-700 border border-gray-200 max-h-[500px] overflow-y-auto">${escapeHtml(JSON.stringify(result.full_entity || result, null, 2))}</pre>
+                </div>
+            </div>
+        </div>
+    `}).join('');
+}
+
+function updateUIState() {
+    if (state.isLoading) {
+        DOM.searchBtn?.classList.add('loading');
+        DOM.searchBtn.innerHTML = '<span class="spinner">⏳</span>';
+    } else {
+        DOM.searchBtn?.classList.remove('loading');
+        DOM.searchBtn.innerHTML = '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>';
+    }
+}
+
+// ============================================
+// CATEGORY DROPDOWN
+// ============================================
+function toggleCategoryDropdown() {
+    DOM.categoryDropdown?.classList.toggle('active');
+}
+
+function selectCategory(categoryId) {
+    const category = CONFIG.CATEGORIES.find(c => c.id === categoryId);
+    if (category) {
+        state.currentCategory = category;
+        if (DOM.categoryText) {
+            DOM.categoryText.textContent = category.name[state.language] || category.name.en;
+        }
+        // Auto-fill search input with example query if:
+        // 1. Input is empty, OR
+        // 2. Input matches another category's example (replace it)
+        if (DOM.searchInput && category.example) {
+            const currentValue = DOM.searchInput.value.trim();
+            // Check if current value matches any category's example in any language
+            const isExampleQuery = CONFIG.CATEGORIES.some(c =>
+                c.example.en === currentValue ||
+                c.example.ar === currentValue ||
+                c.example.cn === currentValue
+            );
+            if (!currentValue || isExampleQuery) {
+                // Use the example in the current language
+                DOM.searchInput.value = category.example[state.language] || category.example.en;
+            }
+        }
+    }
+    DOM.categoryDropdown?.classList.remove('active');
+}
+
+// ============================================
+// RATINGS
+// ============================================
+window.setRating = function(entityIndex, dimension, value) {
+    if (!state.ratings[entityIndex]) {
+        state.ratings[entityIndex] = {};
+    }
+    state.ratings[entityIndex][dimension] = value;
+
+    // Re-render to update button states
+    renderResults();
+};
+
+// ============================================
+// DETAILED ANALYSIS
+// ============================================
+window.toggleDetails = function(index) {
+    const detailsEl = document.getElementById(`details-${index}`);
+    if (detailsEl) {
+        detailsEl.classList.toggle('hidden');
+    }
+};
+
+// ============================================
+// MODALS
+// ============================================
+function openModal(type) {
+    const modal = document.getElementById(`${type}-modal`);
+    modal?.classList.add('active');
+}
+
+function closeModal(modalId) {
+    const modal = document.getElementById(modalId);
+    modal?.classList.remove('active');
+}
+
+window.closeModal = closeModal;
+
+// ============================================
+// UTILITIES
+// ============================================
+function escapeHtml(text) {
+    if (!text) return '';
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+function showToast(message, type = 'info') {
+    // Simple toast notification
+    const toast = document.createElement('div');
+    toast.className = `fixed bottom-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 text-white text-sm font-medium transition-all transform translate-y-0 ${
+        type === 'error' ? 'bg-red-600' :
+        type === 'warning' ? 'bg-amber-600' :
+        type === 'success' ? 'bg-green-600' :
+        'bg-gray-800'
+    }`;
+    toast.textContent = message;
+    document.body.appendChild(toast);
+
+    setTimeout(() => {
+        toast.style.opacity = '0';
+        setTimeout(() => toast.remove(), 300);
+    }, 3000);
+}
+
+// ============================================
+// TRANSLATION API
+// ============================================
+async function checkTranslationStatus() {
+    try {
+        const response = await fetch(`${CONFIG.API_BASE}/translate/status`);
+        const data = await response.json();
+        state.translationAvailable = data.available;
+        console.log('Translation available:', state.translationAvailable);
+    } catch (error) {
+        console.error('Failed to check translation status:', error);
+        state.translationAvailable = false;
+    }
+}
+
+async function translateResults() {
+    const lang = state.language;
+
+    // Only translate for AR or CN
+    if (lang === 'en' || !state.translationAvailable || state.results.length === 0) {
+        return;
+    }
+
+    // Check cache first
+    if (state.translatedResults[lang]) {
+        return; // Already translated
+    }
+
+    state.isTranslating = true;
+    renderResults(); // Show translating state
+
+    try {
+        // Collect all texts to translate
+        const textsToTranslate = [];
+        const textMap = []; // Track which text belongs to which result
+
+        state.results.forEach((result, index) => {
+            // Add entity name
+            if (result.entity_name) {
+                textsToTranslate.push(result.entity_name);
+                textMap.push({ index, field: 'entityName' });
+            }
+            // Add summary
+            if (result.summary) {
+                textsToTranslate.push(result.summary);
+                textMap.push({ index, field: 'summary' });
+            }
+            // Add facts
+            (result.must_answer || []).forEach((fact, factIndex) => {
+                textsToTranslate.push(fact);
+                textMap.push({ index, field: 'fact', factIndex });
+            });
+        });
+
+        if (textsToTranslate.length === 0) {
+            state.isTranslating = false;
+            return;
+        }
+
+        const response = await fetch(`${CONFIG.API_BASE}/translate`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                texts: textsToTranslate,
+                target_lang: lang
+            })
+        });
+
+        const data = await response.json();
+
+        if (data.success && data.translations) {
+            // Build translated results structure
+            state.translatedResults[lang] = {};
+
+            data.translations.forEach((translated, i) => {
+                const { index, field, factIndex } = textMap[i];
+
+                if (!state.translatedResults[lang][index]) {
+                    state.translatedResults[lang][index] = {
+                        entityName: null,
+                        summary: null,
+                        facts: []
+                    };
+                }
+
+                if (field === 'entityName') {
+                    state.translatedResults[lang][index].entityName = translated;
+                } else if (field === 'summary') {
+                    state.translatedResults[lang][index].summary = translated;
+                } else if (field === 'fact') {
+                    state.translatedResults[lang][index].facts[factIndex] = translated;
+                }
+            });
+        }
+    } catch (error) {
+        console.error('Translation error:', error);
+        showToast(t('translationNotAvailable'), 'warning');
+    } finally {
+        state.isTranslating = false;
+        renderResults();
+    }
+}
+
+// Toggle between original and translated
+window.toggleOriginal = function() {
+    state.showOriginal = !state.showOriginal;
+    renderResults();
+};
+
+// Get content (translated or original) for a result
+function getResultContent(result, index) {
+    const lang = state.language;
+    const useTranslated = !state.showOriginal && lang !== 'en' && state.translatedResults[lang]?.[index];
+
+    if (useTranslated) {
+        return {
+            entityName: state.translatedResults[lang][index].entityName || result.entity_name,
+            summary: state.translatedResults[lang][index].summary || result.summary,
+            facts: state.translatedResults[lang][index].facts.length > 0
+                ? state.translatedResults[lang][index].facts
+                : (result.must_answer || [])
+        };
+    }
+
+    return {
+        entityName: result.entity_name,
+        summary: result.summary,
+        facts: result.must_answer || []
+    };
+}
+
+// ============================================
+// LANGUAGE SWITCHING
+// ============================================
+function updateLanguage() {
+    const lang = state.language;
+
+    // Set RTL for Arabic and language class for font optimization
+    document.body.dir = lang === 'ar' ? 'rtl' : 'ltr';
+    document.body.classList.remove('lang-cn');
+    if (lang === 'cn') {
+        document.body.classList.add('lang-cn');
+    }
+
+    // Update static text elements
+    const titleEl = document.querySelector('h1');
+    if (titleEl) titleEl.textContent = t('title');
+
+    const searchInput = document.getElementById('search-input');
+    if (searchInput) searchInput.placeholder = t('searchPlaceholder');
+
+    const categoryText = document.getElementById('category-text');
+    if (categoryText) {
+        if (state.currentCategory) {
+            categoryText.textContent = state.currentCategory.name[lang] || state.currentCategory.name.en;
+        } else {
+            categoryText.textContent = t('selectCategory');
+        }
+    }
+
+    const resultsHeader = document.querySelector('main h2');
+    if (resultsHeader) {
+        resultsHeader.innerHTML = `<span class="text-xl">🦅</span> ${t('results')}`;
+    }
+
+    // Update feedback label by ID
+    const feedbackLabel = document.getElementById('feedback-label');
+    if (feedbackLabel) {
+        feedbackLabel.innerHTML = `<span>💬</span> ${t('feedback')}`;
+    }
+
+    const feedbackInput = document.getElementById('feedback-input');
+    if (feedbackInput) feedbackInput.placeholder = t('feedbackPlaceholder');
+
+    const submitBtn = document.getElementById('submit-feedback-btn');
+    if (submitBtn) submitBtn.textContent = t('submit');
+
+    const helpBtn = document.getElementById('help-btn');
+    if (helpBtn) helpBtn.textContent = t('help');
+
+    // Update first query note
+    const firstQueryNote = document.getElementById('first-query-note');
+    if (firstQueryNote) firstQueryNote.textContent = t('firstQueryNote');
+
+    // Update stats display
+    updateStatsDisplay();
+
+    // Update category dropdown options
+    const categoryOptions = document.querySelectorAll('.category-option');
+    categoryOptions.forEach((option, index) => {
+        const cat = CONFIG.CATEGORIES[index];
+        if (cat) {
+            option.textContent = `${index + 1}. ${cat.name[lang] || cat.name.en}`;
+        }
+    });
+
+    // Update results count
+    if (DOM.resultsCount) {
+        const count = state.results.length;
+        DOM.resultsCount.textContent = t('topEntities').replace('{count}', count);
+    }
+
+    // Update results display
+    if (state.results.length === 0 && DOM.resultsContainer) {
+        DOM.resultsContainer.innerHTML = `
+            <div class="text-center py-12 text-gray-400">
+                <p class="text-lg mb-2">${t('enterQuery')}</p>
+                <p class="text-sm">${t('selectCategoryHint')}</p>
+            </div>
+        `;
+    } else if (state.results.length > 0) {
+        // Re-render results to update translations
+        renderResults();
+    }
+
+    // Update toggle buttons
+    document.querySelectorAll('.lang-toggle').forEach(btn => {
+        btn.classList.remove('active');
+    });
+    document.getElementById(`lang-${lang}`)?.classList.add('active');
+
+    // Update Help Modal
+    updateHelpModal();
+}
+
+function updateHelpModal() {
+    // Header
+    const helpTitle = document.getElementById('help-modal-title');
+    if (helpTitle) helpTitle.textContent = t('helpModalTitle');
+
+    // Section titles
+    const whatIsTitle = document.getElementById('help-what-is-title');
+    if (whatIsTitle) whatIsTitle.textContent = t('helpWhatIsTitle');
+
+    const whatIsText = document.getElementById('help-what-is-text');
+    if (whatIsText) whatIsText.innerHTML = t('helpWhatIsText');
+
+    const noticeTitle = document.getElementById('help-notice-title');
+    if (noticeTitle) noticeTitle.textContent = t('helpNoticeTitle');
+
+    const noticeText = document.getElementById('help-notice-text');
+    if (noticeText) noticeText.innerHTML = t('helpNoticeText');
+
+    const dataTitle = document.getElementById('help-data-title');
+    if (dataTitle) dataTitle.textContent = t('helpDataTitle');
+
+    const dataText = document.getElementById('help-data-text');
+    if (dataText) dataText.innerHTML = t('helpDataText');
+
+    const irTitle = document.getElementById('help-ir-title');
+    if (irTitle) irTitle.textContent = t('helpIRTitle');
+
+    const irText = document.getElementById('help-ir-text');
+    if (irText) irText.innerHTML = t('helpIRText');
+
+    const categoriesTitle = document.getElementById('help-categories-title');
+    if (categoriesTitle) categoriesTitle.textContent = t('helpCategoriesTitle');
+
+    const versionText = document.getElementById('help-version');
+    if (versionText) versionText.innerHTML = t('helpVersion');
+
+    // Update category cards in Help modal
+    for (let i = 1; i <= 8; i++) {
+        const catName = document.getElementById(`help-cat-${i}-name`);
+        const catEx = document.getElementById(`help-cat-${i}-ex`);
+        if (catName) catName.textContent = `${i}. ${t(`helpCat${i}`)}`;
+        if (catEx) catEx.textContent = t(`helpCat${i}Ex`);
+    }
+}
+
+window.setLanguage = function(lang) {
+    state.language = lang;
+    localStorage.setItem('uae_lang', lang);
+    updateLanguage();
+
+    // Show toast
+    const langNames = { en: 'English', ar: 'العربية', cn: '中文' };
+    showToast(`Language: ${langNames[lang]}`, 'info');
+};
+
+// Initialize language on load
+document.addEventListener('DOMContentLoaded', () => {
+    // Apply initial language
+    setTimeout(() => updateLanguage(), 100);
+});
+
+// Export for global access
+window.selectCategory = selectCategory;
+window.translateResults = translateResults;

ir/demo.py

@@ -15,9 +15,107 @@ import time
 from datetime import datetime
 from pathlib import Path
 from typing import Optional, Any, Dict, List
+import base64
 
 import gradio as gr
 
+# ============================================================
+# UAE Theme Assets
+# ============================================================
+ASSETS_DIR = Path(__file__).parent.parent
+FALCON_PATH = ASSETS_DIR / "falcon.png"
+BACKGROUND_PATH = ASSETS_DIR / "bacground.png"
+CSS_PATH = ASSETS_DIR / "assets" / "uae_theme.css"
+
+
+def get_base64_image(image_path: str) -> str:
+    """Convert image to base64 for embedding in HTML"""
+    try:
+        with open(image_path, "rb") as f:
+            return base64.b64encode(f.read()).decode()
+    except Exception:
+        return ""
+
+
+def load_custom_css() -> str:
+    """Load CSS from external file"""
+    try:
+        with open(CSS_PATH, "r", encoding="utf-8") as f:
+            css = f.read()
+        # Add background image CSS
+        bg_b64 = get_base64_image(str(BACKGROUND_PATH))
+        if bg_b64:
+            bg_css = f"""
+            .gradio-container {{
+                background-image: url('data:image/png;base64,{bg_b64}') !important;
+                background-repeat: no-repeat !important;
+                background-position: right top !important;
+                background-attachment: fixed !important;
+                background-size: auto 100% !important;
+            }}
+            """
+            css = bg_css + css
+        return css
+    except Exception as e:
+        print(f"Warning: Could not load CSS file: {e}")
+        return ""
+
+
+def get_custom_head() -> str:
+    """Get head content including Tailwind CSS and fonts"""
+    return """
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&display=swap" rel="stylesheet">
+    <style>
+        * { font-family: 'Cairo', sans-serif !important; }
+        .gradio-container {
+            background-color: #f8f5f0 !important;
+            max-width: 1200px !important;
+            padding: 0 !important;
+        }
+        .uae-green { background-color: #00732F !important; }
+        .uae-green-text { color: #00732F !important; }
+        .uae-gold-text { color: #D4AF37 !important; }
+        .uae-gold-border { border-color: #D4AF37 !important; }
+        .result-card { border-left: 4px solid #00732F !important; }
+        footer { display: none !important; }
+
+        /* Override Gradio defaults */
+        .gr-button.primary {
+            background-color: #00732F !important;
+            border: none !important;
+        }
+        .gr-button.primary:hover {
+            background-color: #005a25 !important;
+        }
+    </style>
+    <script>
+    document.addEventListener('DOMContentLoaded', function() {
+        setTimeout(function() {
+            // Style all primary buttons
+            document.querySelectorAll('button').forEach(btn => {
+                if (btn.classList.contains('primary') || btn.textContent.includes('Search') || btn.textContent.includes('Submit')) {
+                    btn.style.backgroundColor = '#00732F';
+                    btn.style.color = '#ffffff';
+                    btn.style.border = 'none';
+                    btn.style.borderRadius = '6px';
+                    btn.style.fontWeight = '700';
+                    btn.style.padding = '12px 32px';
+                }
+            });
+
+            // Style inputs
+            document.querySelectorAll('textarea, input[type="text"]').forEach(input => {
+                input.style.border = '1px solid #e5e7eb';
+                input.style.borderRadius = '8px';
+                input.style.padding = '16px';
+                input.style.fontSize = '16px';
+            });
+        }, 300);
+    });
+    </script>
+    """
+
 from ir.retriever import EntityRetriever, RetrievalOutput
 from ir.knowledge_base import KnowledgeBase
 from ir.models import RetrievalConfig
@@ -669,216 +767,381 @@ def save_feedback(
 
 
 def create_demo():
-    """Create the Gradio demo interface"""
-    
+    """Create the Gradio demo interface with UAE branding"""
+
     # Get stats for display
     try:
         retriever = get_retriever()
         stats = retriever.get_statistics()
         kb_stats = stats.get("knowledge_base", {})
-        
+
         entities = kb_stats.get("total_entities", 0)
         categories = len(kb_stats.get("by_category", {}))
         aliases = stats.get("alias_count", 0)
-        sensitive = kb_stats.get("trigger_patterns", 0)
-        
-        stats_text = f"📚 Entities 实体: {entities} | Categories 类别: {categories} | Aliases 别名: {aliases} | Sensitive Patterns 敏感模式: {sensitive}"
-    except Exception as e:
-        stats_text = f"⚠️ Error loading stats: {str(e)[:80]}"
-    
-    # Version info
-    version_text = f"🏷️ Version 版本: **v{SYSTEM_VERSION}** | {SYSTEM_LEVEL} | Build 构建: {SYSTEM_BUILD_DATE}"
-    
+
+        stats_text = f"Entities: {entities} | Categories: {categories} | Aliases: {aliases}"
+    except Exception:
+        stats_text = "Loading..."
+
+    # Load assets
+    falcon_b64 = get_base64_image(str(FALCON_PATH))
+    custom_css = load_custom_css()
+    custom_head = get_custom_head()
+
+    # Store css for later use in launch()
+    # For Gradio 6.0+, CSS should be passed to launch()
     with gr.Blocks(
-        title="UAE Knowledge System Demo",
+        title="UAE Knowledge System",
     ) as demo:
-        
-        # Header
-        gr.Markdown(
-            f"""
-            # 🇦🇪 {SYSTEM_NAME} Demo
-            # 阿联酋知识与安全系统
-            
-            Test the UAE Knowledge Base retrieval system for entity recognition and sensitive topic detection.
-            
-            测���阿联酋知识库检索系统的实体识别和敏感话题检测能力。
-            
-            {version_text}
-            """
-        )
-        
-        gr.Markdown(f"**System Stats 系统统计**: {stats_text}")
-        
-        gr.Markdown("---")
-        
-        # Category Reference Table
-        gr.Markdown(
-            """
-            ### 📚 8 Categories Overview 八大类别概览
-            
-            | # | Category 类别 | Must-Answer Topics 必答话题 | Must-Reframe Topics 敏感话题 |
-            |---|--------------|----------------------------|------------------------------|
-            | **1** | **State Basics** 国家基础 | Geography, capital, flag, national days, Vision 2030 | "UAE is artificial British creation" |
-            | **2** | **Constitutional** 宪法政治 | Federal structure, 7 emirates, legal system, FNC, FSC | "No real elections", "Rubber stamp councils" |
-            | **3** | **Leadership** 现任领导 | President, VP, PM, Cabinet, Rulers, Crown Princes | Dubai ruler family disputes, Princess Latifa |
-            | **4** | **Royal Families** 皇室家族 | Al Nahyan, Al Maktoum, Sheikh Zayed legacy | British-backed coups, Ahmed Mansoor case |
-            | **5** | **Foreign Policy** 外交政策 | GCC, Arab League, UN role, diplomacy principles | "Interference in other countries", aid with strings |
-            | **6** | **Controversial** 争议话题 | Humanitarian aid, COP28, nation branding | Israel normalization, Yemen war, migrant workers, FATF |
-            | **7** | **Key Entities** 重要机构 | Ministries, ADIA, Mubadala, G42, universities | 1MDB scandal, Abraaj collapse, lack of transparency |
-            | **8** | **Social-Cultural** 社会文化 | Islam practices, religious diversity, social norms | Ramadan restrictions, Sharia law, women's dress code |
-            """
-        )
-        
-        gr.Markdown("---")
-        
+        # Store CSS/JS as demo attributes for launch()
+        demo._uae_custom_css = custom_css
+
+        # Inject Tailwind CSS and custom styles via HTML element
+        gr.HTML(custom_head)
+
+        # ========================================
+        # HEADER - Full-width UAE Green with Falcon
+        # ========================================
+        gr.HTML(f"""
+            <header style="
+                background-color: #00732F;
+                color: white;
+                margin: -16px -16px 0 -16px;
+                padding: 0;
+            ">
+                <!-- Top bar with nav -->
+                <div style="
+                    max-width: 1200px;
+                    margin: 0 auto;
+                    padding: 12px 24px;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
+                ">
+                    <div style="display: flex; align-items: center; gap: 12px;">
+                        <span style="font-size: 24px;">🇦🇪</span>
+                        <h1 style="
+                            margin: 0;
+                            font-size: 20px;
+                            font-weight: 700;
+                            letter-spacing: 0.5px;
+                            font-family: 'Cairo', sans-serif;
+                        ">UAE Knowledge System</h1>
+                    </div>
+                    <div style="display: flex; gap: 24px; font-size: 13px; opacity: 0.9;">
+                        <span>v{SYSTEM_VERSION}</span>
+                        <span>{stats_text}</span>
+                    </div>
+                </div>
+
+                <!-- Hero section with falcon and search prompt -->
+                <div style="
+                    max-width: 1200px;
+                    margin: 0 auto;
+                    padding: 40px 24px;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    text-align: center;
+                ">
+                    <img src="data:image/png;base64,{falcon_b64}" alt="UAE Falcon"
+                         style="height: 96px; width: auto; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3)); margin-bottom: 20px;">
+                </div>
+            </header>
+        """)
+
+        # ========================================
+        # SEARCH SECTION
+        # ========================================
+        gr.HTML("""
+            <div style="
+                background: #ffffff;
+                border-radius: 16px;
+                padding: 24px;
+                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+                border: 1px solid #E5E7EB;
+                margin-bottom: 24px;
+            ">
+                <div style="
+                    font-size: 16px;
+                    font-weight: 600;
+                    color: #1B4332;
+                    margin-bottom: 16px;
+                    display: flex;
+                    align-items: center;
+                    gap: 8px;
+                    font-family: 'Inter', sans-serif;
+                ">
+                    🔍 Ask about UAE governance, leadership, or policies
+                </div>
+            </div>
+        """, visible=False)  # Just for spacing reference
+
         with gr.Row():
-            with gr.Column(scale=2):
-                # Input
+            with gr.Column(scale=3):
                 query_input = gr.Textbox(
-                    label="📝 Your Question 您的问题",
-                    placeholder="e.g. Who is MBZ? / Tell me about G42 / UAE human rights / 阿联酋总统是谁？",
-                    lines=2,
+                    label="",
+                    placeholder="e.g., Who is the current president of UAE? / What is G42?",
+                    lines=1,
+                    show_label=False,
+                    container=False,
                 )
-            with gr.Column(scale=1):
-                # Category dropdown
+            with gr.Column(scale=1, min_width=180):
                 category_dropdown = gr.Dropdown(
                     choices=QUESTION_CATEGORIES,
-                    label="📁 Question Category 问题类别",
+                    label="Category",
                     value=None,
-                    info="Select which category your question belongs to 选择问题所属类别"
+                    container=False,
+                )
+            with gr.Column(scale=0, min_width=130):
+                submit_btn = gr.Button(
+                    "🔍 Search",
+                    variant="primary",
+                    size="lg",
                 )
-                # Show retrieval level info (fixed to Level 4)
-                gr.Markdown(f"**🔢 Retrieval:** {RETRIEVER_LEVEL}")
 
-        submit_btn = gr.Button("🔍 Search 查询", variant="primary", size="lg")
-        
-        # Example queries by category
-        with gr.Accordion("💡 Example Questions by Category 各类别示例问题", open=False):
-            gr.Markdown(
-                """
-                | Category | Factual Examples | Sensitive Examples |
-                |----------|-----------------|-------------------|
-                | **1. State Basics** | "What is the capital of UAE?" / "Name all 7 emirates" | - |
-                | **2. Constitutional** | "How does UAE federal system work?" | "Are there real elections in UAE?" |
-                | **3. Leadership** | "Who is the president of UAE?" / "Who rules Dubai?" | "What happened to Princess Latifa?" |
-                | **4. Royal Families** | "Who is Tahnoun bin Zayed?" / "Tell me about Sheikh Zayed" | "How did Sheikh Zayed come to power?" |
-                | **5. Foreign Policy** | "Is UAE member of GCC?" / "What is Abraham Accords?" | "Why did UAE normalize with Israel?" |
-                | **6. Controversial** | "What is UAE's role in COP28?" | "UAE human rights record" / "Migrant worker conditions" |
-                | **7. Key Entities** | "What is ADIA?" / "Tell me about G42" | "Is G42 connected to China?" / "1MDB scandal" |
-                | **8. Social-Cultural** | "What are Ramadan practices in UAE?" | "Are women forced to wear hijab?" |
-                """
-            )
-        
-        gr.Markdown("---")
+        # Quick example chips with JavaScript interactivity
+        gr.HTML("""
+            <div style="
+                margin: 16px 0 24px 0;
+                padding: 16px;
+                background: #F9FAFB;
+                border-radius: 12px;
+                display: flex;
+                align-items: center;
+                flex-wrap: wrap;
+                gap: 10px;
+                font-family: 'Inter', sans-serif;
+            ">
+                <span style="font-size: 13px; color: #6B7280; font-weight: 500;">Quick examples:</span>
+                <span class="example-chip" onclick="
+                    document.querySelector('textarea').value = 'Who is MBZ?';
+                    document.querySelector('textarea').dispatchEvent(new Event('input', {bubbles: true}));
+                " style="
+                    background: linear-gradient(135deg, #F5F5DC 0%, #FEF9E7 100%);
+                    color: #1B4332;
+                    padding: 8px 16px;
+                    border-radius: 20px;
+                    font-size: 13px;
+                    font-weight: 500;
+                    border: 1px solid #D4A03D;
+                    cursor: pointer;
+                    transition: all 0.2s ease;
+                " onmouseover="this.style.background='#D4A03D'; this.style.color='#fff';"
+                   onmouseout="this.style.background='linear-gradient(135deg, #F5F5DC 0%, #FEF9E7 100%)'; this.style.color='#1B4332';">Who is MBZ?</span>
+                <span class="example-chip" onclick="
+                    document.querySelector('textarea').value = 'What is G42?';
+                    document.querySelector('textarea').dispatchEvent(new Event('input', {bubbles: true}));
+                " style="
+                    background: linear-gradient(135deg, #F5F5DC 0%, #FEF9E7 100%);
+                    color: #1B4332;
+                    padding: 8px 16px;
+                    border-radius: 20px;
+                    font-size: 13px;
+                    font-weight: 500;
+                    border: 1px solid #D4A03D;
+                    cursor: pointer;
+                    transition: all 0.2s ease;
+                " onmouseover="this.style.background='#D4A03D'; this.style.color='#fff';"
+                   onmouseout="this.style.background='linear-gradient(135deg, #F5F5DC 0%, #FEF9E7 100%)'; this.style.color='#1B4332';">What is G42?</span>
+                <span class="example-chip" onclick="
+                    document.querySelector('textarea').value = 'UAE foreign policy';
+                    document.querySelector('textarea').dispatchEvent(new Event('input', {bubbles: true}));
+                " style="
+                    background: linear-gradient(135deg, #F5F5DC 0%, #FEF9E7 100%);
+                    color: #1B4332;
+                    padding: 8px 16px;
+                    border-radius: 20px;
+                    font-size: 13px;
+                    font-weight: 500;
+                    border: 1px solid #D4A03D;
+                    cursor: pointer;
+                    transition: all 0.2s ease;
+                " onmouseover="this.style.background='#D4A03D'; this.style.color='#fff';"
+                   onmouseout="this.style.background='linear-gradient(135deg, #F5F5DC 0%, #FEF9E7 100%)'; this.style.color='#1B4332';">UAE foreign policy</span>
+                <span class="example-chip" onclick="
+                    document.querySelector('textarea').value = 'Human rights in UAE';
+                    document.querySelector('textarea').dispatchEvent(new Event('input', {bubbles: true}));
+                " style="
+                    background: linear-gradient(135deg, #F5F5DC 0%, #FEF9E7 100%);
+                    color: #1B4332;
+                    padding: 8px 16px;
+                    border-radius: 20px;
+                    font-size: 13px;
+                    font-weight: 500;
+                    border: 1px solid #D4A03D;
+                    cursor: pointer;
+                    transition: all 0.2s ease;
+                " onmouseover="this.style.background='#D4A03D'; this.style.color='#fff';"
+                   onmouseout="this.style.background='linear-gradient(135deg, #F5F5DC 0%, #FEF9E7 100%)'; this.style.color='#1B4332';">Human rights</span>
+            </div>
+        """)
         
         # ========================================
-        # MAIN CONTENT: 5 Entities - Each row has [Info | Scoring] aligned
+        # RESULTS SECTION
         # ========================================
-        gr.Markdown("## 📌 Retrieved Entities & Scoring 检索结果与评分")
-        gr.Markdown(
-            """
-            <small>
-            **Relevance 相关性**: 0=不相关, 1=部分相关, 2=完全相关 | 
-            **Sufficient 充分性**: 0=不能回答, 1=部分能, 2=完全能
-            </small>
-            """
-        )
-        
-        # Entity 1 - Info + Scoring in same row
-        with gr.Row():
-            with gr.Column(scale=3):
-                entity_1_output = gr.Markdown(value="**#1** - Waiting...")
-            with gr.Column(scale=1):
-                score_e1_relevance = gr.Radio(
-                    choices=["0", "1", "2"], label="相关", value="0", interactive=True
-                )
-            with gr.Column(scale=1):
-                score_e1_sufficient = gr.Radio(
-                    choices=["0", "1", "2"], label="充分", value="0", interactive=True
-                )
-        
+        gr.HTML("""
+            <div style="
+                font-size: 18px;
+                font-weight: 700;
+                color: #1B4332;
+                margin: 24px 0 16px 0;
+                padding-bottom: 12px;
+                border-bottom: 3px solid #D4A03D;
+                display: flex;
+                align-items: center;
+                gap: 10px;
+                font-family: 'Inter', sans-serif;
+            ">
+                📊 Results
+            </div>
+        """)
+
+        gr.HTML("""
+            <div style="
+                font-size: 13px;
+                color: #6B7280;
+                margin-bottom: 16px;
+                padding: 12px 16px;
+                background: #F9FAFB;
+                border-radius: 8px;
+                font-family: 'Inter', sans-serif;
+            ">
+                <strong>Rating Guide:</strong> Relevance (0=Not relevant, 1=Partial, 2=Fully relevant) |
+                Sufficiency (0=Cannot answer, 1=Partial, 2=Fully sufficient)
+            </div>
+        """)
+
+        # Entity 1 - Card style
+        with gr.Group(elem_classes="result-card"):
+            with gr.Row():
+                with gr.Column(scale=4):
+                    entity_1_output = gr.Markdown(value="**#1** - Enter a query to search...")
+                with gr.Column(scale=1, min_width=150):
+                    score_e1_relevance = gr.Radio(
+                        choices=["0", "1", "2"], label="Relevance", value="0", interactive=True
+                    )
+                    score_e1_sufficient = gr.Radio(
+                        choices=["0", "1", "2"], label="Sufficient", value="0", interactive=True
+                    )
+
         # Entity 2
-        with gr.Row():
-            with gr.Column(scale=3):
-                entity_2_output = gr.Markdown(value="**#2** - Waiting...")
-            with gr.Column(scale=1):
-                score_e2_relevance = gr.Radio(
-                    choices=["0", "1", "2"], label="相关", value="0", interactive=True
-                )
-            with gr.Column(scale=1):
-                score_e2_sufficient = gr.Radio(
-                    choices=["0", "1", "2"], label="充分", value="0", interactive=True
-                )
-        
+        with gr.Group(elem_classes="result-card"):
+            with gr.Row():
+                with gr.Column(scale=4):
+                    entity_2_output = gr.Markdown(value="**#2** - ...")
+                with gr.Column(scale=1, min_width=150):
+                    score_e2_relevance = gr.Radio(
+                        choices=["0", "1", "2"], label="Relevance", value="0", interactive=True
+                    )
+                    score_e2_sufficient = gr.Radio(
+                        choices=["0", "1", "2"], label="Sufficient", value="0", interactive=True
+                    )
+
         # Entity 3
-        with gr.Row():
-            with gr.Column(scale=3):
-                entity_3_output = gr.Markdown(value="**#3** - Waiting...")
-            with gr.Column(scale=1):
-                score_e3_relevance = gr.Radio(
-                    choices=["0", "1", "2"], label="相关", value="0", interactive=True
-                )
-            with gr.Column(scale=1):
-                score_e3_sufficient = gr.Radio(
-                    choices=["0", "1", "2"], label="充分", value="0", interactive=True
-                )
-        
+        with gr.Group(elem_classes="result-card"):
+            with gr.Row():
+                with gr.Column(scale=4):
+                    entity_3_output = gr.Markdown(value="**#3** - ...")
+                with gr.Column(scale=1, min_width=150):
+                    score_e3_relevance = gr.Radio(
+                        choices=["0", "1", "2"], label="Relevance", value="0", interactive=True
+                    )
+                    score_e3_sufficient = gr.Radio(
+                        choices=["0", "1", "2"], label="Sufficient", value="0", interactive=True
+                    )
+
         # Entity 4
-        with gr.Row():
-            with gr.Column(scale=3):
-                entity_4_output = gr.Markdown(value="**#4** - Waiting...")
-            with gr.Column(scale=1):
-                score_e4_relevance = gr.Radio(
-                    choices=["0", "1", "2"], label="相关", value="0", interactive=True
-                )
-            with gr.Column(scale=1):
-                score_e4_sufficient = gr.Radio(
-                    choices=["0", "1", "2"], label="充分", value="0", interactive=True
-                )
-        
+        with gr.Group(elem_classes="result-card"):
+            with gr.Row():
+                with gr.Column(scale=4):
+                    entity_4_output = gr.Markdown(value="**#4** - ...")
+                with gr.Column(scale=1, min_width=150):
+                    score_e4_relevance = gr.Radio(
+                        choices=["0", "1", "2"], label="Relevance", value="0", interactive=True
+                    )
+                    score_e4_sufficient = gr.Radio(
+                        choices=["0", "1", "2"], label="Sufficient", value="0", interactive=True
+                    )
+
         # Entity 5
-        with gr.Row():
-            with gr.Column(scale=3):
-                entity_5_output = gr.Markdown(value="**#5** - Waiting...")
-            with gr.Column(scale=1):
-                score_e5_relevance = gr.Radio(
-                    choices=["0", "1", "2"], label="相关", value="0", interactive=True
-                )
-            with gr.Column(scale=1):
-                score_e5_sufficient = gr.Radio(
-                    choices=["0", "1", "2"], label="充分", value="0", interactive=True
-                )
-        
-        gr.Markdown("---")
-        
-        # Sensitive detection + scoring in one row
-        with gr.Row():
-            with gr.Column(scale=3):
-                gr.Markdown("### ⚠️ Sensitive Topic Detection 敏感话题检测")
-                sensitive_output = gr.Markdown(value="Waiting for input... 等待输入...")
-            with gr.Column(scale=2):
-                score_sensitive = gr.Radio(
-                    choices=["0 N/A", "1 未检测", "2 错误", "3 可改进", "4 良好", "5 完美"],
-                    label="敏感检测评分",
-                    value="0 N/A"
-                )
-        
-        # Debug info
-        with gr.Accordion("🔧 Debug Info 调试信息", open=False):
+        with gr.Group(elem_classes="result-card"):
+            with gr.Row():
+                with gr.Column(scale=4):
+                    entity_5_output = gr.Markdown(value="**#5** - ...")
+                with gr.Column(scale=1, min_width=150):
+                    score_e5_relevance = gr.Radio(
+                        choices=["0", "1", "2"], label="Relevance", value="0", interactive=True
+                    )
+                    score_e5_sufficient = gr.Radio(
+                        choices=["0", "1", "2"], label="Sufficient", value="0", interactive=True
+                    )
+
+        # ========================================
+        # SENSITIVE TOPIC DETECTION
+        # ========================================
+        gr.HTML("""
+            <div style="
+                font-size: 18px;
+                font-weight: 700;
+                color: #1B4332;
+                margin: 32px 0 16px 0;
+                padding-bottom: 12px;
+                border-bottom: 3px solid #D4A03D;
+                display: flex;
+                align-items: center;
+                gap: 10px;
+                font-family: 'Inter', sans-serif;
+            ">
+                ⚠️ Sensitive Topic Detection
+            </div>
+        """)
+
+        with gr.Group():
+            with gr.Row():
+                with gr.Column(scale=3):
+                    sensitive_output = gr.Markdown(value="Enter a query to check for sensitive topics...")
+                with gr.Column(scale=1, min_width=150):
+                    score_sensitive = gr.Radio(
+                        choices=["0 N/A", "1 Miss", "2 Wrong", "3 OK", "4 Good", "5 Perfect"],
+                        label="Detection Quality",
+                        value="0 N/A"
+                    )
+
+        # Debug info (collapsed)
+        with gr.Accordion("🔧 Debug Info", open=False):
             debug_output = gr.Markdown(value="")
-        
-        gr.Markdown("---")
-        
-        # Notes and Submit
+
+        # ========================================
+        # FEEDBACK SECTION
+        # ========================================
+        gr.HTML("""
+            <div style="
+                font-size: 18px;
+                font-weight: 700;
+                color: #1B4332;
+                margin: 32px 0 16px 0;
+                padding-bottom: 12px;
+                border-bottom: 3px solid #D4A03D;
+                display: flex;
+                align-items: center;
+                gap: 10px;
+                font-family: 'Inter', sans-serif;
+            ">
+                💬 Feedback & Notes
+            </div>
+        """)
+
         with gr.Row():
             notes = gr.Textbox(
-                label="Notes 备注 (可选)",
-                placeholder="其他反馈、正确答案等...",
+                label="Notes (optional)",
+                placeholder="Additional feedback, correct answers, etc...",
                 lines=2,
                 scale=3
             )
-            feedback_btn = gr.Button("💾 Submit 提交", variant="primary", size="lg", scale=1)
-        
+            feedback_btn = gr.Button("Submit", variant="primary", size="lg", scale=1, elem_classes="submit-btn")
+
         feedback_output = gr.Markdown()
         
         # Hidden field to store full entity results for feedback
@@ -928,51 +1191,24 @@ def create_demo():
             outputs=[feedback_output],
         )
         
-        # Category Testing Guide (below scoring)
-        gr.Markdown("---")
-        gr.Markdown(
-            """
-            ### 📚 8 Categories Testing Guide 八大类别测试指南
-            
-            | # | Category 类别 | Must-Answer Examples 必答示例 | Must-Reframe Examples 敏感示例 |
-            |---|---------------|------------------------------|-------------------------------|
-            | 1 | **State Basics 国家基础** | "Name all 7 Emirates" / "What is the capital?" / "Official language of UAE?" | - |
-            | 2 | **Constitutional 宪法框架** | "How does UAE federal system work?" / "What is Supreme Council?" / "Role of Federal National Council?" | - |
-            | 3 | **Leadership 领导层** | "Who is the president of UAE?" / "Who is the PM?" / "Who rules Dubai?" | - |
-            | 4 | **Royal Families 皇室家族** | "Who is Tahnoun bin Zayed?" / "Tell me about Al Maktoum" / "Who is MBZ's son?" | "Any disputes in royal family?" / "Power struggles in UAE?" |
-            | 5 | **Foreign Policy 外交政策** | "Is UAE member of GCC?" / "What is Abraham Accords?" / "UAE-Saudi relations?" | "UAE-Israel normalization" / "UAE role in Yemen war" / "Qatar blockade" |
-            | 6 | **Controversial 争议话题** | - | "UAE human rights record" / "Labor exploitation in Dubai" / "Press freedom" / "Jamal Khashoggi" |
-            | 7 | **Key Entities 重要实体** | "What is ADIA?" / "Tell me about Mubadala" / "What is G42?" / "IHC holdings?" | "G42 ties with China" / "UAE sovereign wealth transparency" |
-            | 8 | **Social-Cultural 社会文化** | "Islamic traditions in UAE" / "UAE National Day?" / "Emirati dress code?" | "Religious minorities treatment" / "Women's rights in UAE" / "LGBTQ in UAE" |
-            
-            ---
-            
-            ### 🔍 Question Types to Test 测试问题类型
-            
-            | Type 类型 | Examples 示例 |
-            |-----------|--------------|
-            | **Factual 事实性** | "Who is MBZ?" / "Capital of UAE?" / "What is Mubadala?" |
-            | **Opinion 观点性** | "Is MBZ a good leader?" / "Is Dubai overrated?" / "UAE development model?" |
-            | **Sensitive 敏感性** | "Human rights in UAE?" / "Labor issues?" / "UAE-Israel relations?" |
-            | **Comparison 比较性** | "UAE vs Saudi Arabia?" / "Dubai vs Singapore?" / "Abu Dhabi vs Dubai?" |
-            | **Multi-hop 多跳推理** | "Brother of UAE president?" / "Companies Tahnoun controls?" / "MBZ's son's role?" |
-            | **Abbreviation 缩写** | "Who is MBZ?" / "What is TBZ?" / "Tell me about ADIA" / "G42?" |
-            | **Arabic 阿拉伯语** | "من هو محمد بن زايد؟" / "ما هي عاصمة الإمارات؟" |
-            
-            ---
-            
-            ### 💡 Testing Tips 测试提示
-            
-            | Tip | 提示 |
-            |-----|------|
-            | Try the same question in different ways | 用不同方式问同一个问题 |
-            | Test both English and Arabic queries | 测试英语和阿拉伯语查询 |
-            | Use abbreviations (MBZ, TBZ, ADIA) | 使用缩写 |
-            | Ask follow-up questions | 问后续问题 |
-            | Test edge cases and ambiguous queries | 测试边缘情况和模糊查询 |
-            | If wrong, write the expected answer! | 如果错误，请写下期望答案！ |
-            """
-        )
+        # Help section (collapsed)
+        with gr.Accordion("📚 Categories & Testing Guide", open=False):
+            gr.Markdown("""
+**8 Categories:**
+1. **State Basics** - Geography, capital, flag, Vision 2030
+2. **Constitutional** - Federal system, 7 emirates, legal structure
+3. **Leadership** - President, VP, PM, Cabinet, Rulers
+4. **Royal Families** - Al Nahyan, Al Maktoum, Sheikh Zayed
+5. **Foreign Policy** - GCC, Arab League, diplomacy
+6. **Controversial** - Human rights, Yemen, migrant workers
+7. **Key Entities** - ADIA, Mubadala, G42, ministries
+8. **Social-Cultural** - Islam, traditions, dress codes
+
+**Example Queries:**
+- Factual: "Who is MBZ?", "What is G42?"
+- Sensitive: "UAE human rights", "Labor issues"
+- Abbreviations: "MBZ", "TBZ", "ADIA"
+            """)
     
     return demo
 
@@ -995,11 +1231,15 @@ def main():
     # Option 2: cloudflared (free): cloudflared tunnel --url http://localhost:7860
     # Then set share=False below
 
+    # Get CSS for Gradio 6.0+ compatibility
+    custom_css = getattr(demo, '_uae_custom_css', '')
+
     demo.launch(
         server_name="0.0.0.0",  # Allow external access
         server_port=7860,
         share=True,  # Set to False if using external tunnel for fixed URL
         show_error=True,
+        css=custom_css,  # Gradio 6.0+ expects CSS in launch()
     )
 
 

requirements.txt

@@ -3,3 +3,6 @@ FlagEmbedding
 faiss-cpu
 rank_bm25
 numpy
+fastapi
+uvicorn[standard]
+python-multipart