| | <!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> |
| |
|
| | |
| | <meta name="description" content="Information Retrieval system for UAE governance, leadership, and policies. Retrieve factual knowledge from a curated knowledge base."> |
| |
|
| | |
| | <meta property="og:type" content="website"> |
| | <meta property="og:url" content="https://librai-uae-kb.hf.space/"> |
| | <meta property="og:site_name" content="UAE Knowledge System"> |
| | <meta property="og:title" content="UAE Knowledge System"> |
| | <meta property="og:description" content="Information Retrieval system for UAE governance, leadership, and policies. Powered by LibrAI."> |
| | <meta property="og:image" content="https://librai-uae-kb.hf.space/assets/preview.png"> |
| | <meta property="og:image:type" content="image/png"> |
| | <meta property="og:image:width" content="1200"> |
| | <meta property="og:image:height" content="630"> |
| |
|
| | |
| | <meta name="twitter:card" content="summary_large_image"> |
| | <meta name="twitter:url" content="https://librai-uae-kb.hf.space/"> |
| | <meta name="twitter:title" content="UAE Knowledge System"> |
| | <meta name="twitter:description" content="Information Retrieval system for UAE governance, leadership, and policies. Powered by LibrAI."> |
| | <meta name="twitter:image" content="https://librai-uae-kb.hf.space/assets/preview.png"> |
| |
|
| | <script src="https://cdn.tailwindcss.com"></script> |
| | |
| | <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> |
| |
|
| | |
| | |
| | |
| | <div class="gold-fade min-h-[50px] md:h-[60px] shadow-md relative z-20 flex items-center py-2 md:py-0"> |
| | <div class="container mx-auto max-w-5xl px-3 md:px-6 flex justify-between items-center text-emerald-950"> |
| | <a href="#" onclick="goHome(); return false;" class="flex items-center gap-2 md:gap-3 hover:opacity-80 transition cursor-pointer"> |
| | <span class="text-2xl md:text-4xl leading-none mt-1 md:mt-2">🇦🇪</span> |
| | <h1 class="text-[14px] md:text-[20px] font-medium tracking-wide">UAE Knowledge System</h1> |
| | </a> |
| | <div class="flex items-center gap-2 md:gap-4"> |
| | |
| | <span id="stats-text" class="hidden md:inline text-[16px] opacity-70">Loading...</span> |
| | <div class="flex gap-2 md:gap-4 items-center"> |
| | |
| | <div class="flex gap-0.5 md:gap-1 text-[12px] md:text-[16px] font-medium"> |
| | <button onclick="setLanguage('en')" id="lang-en" class="lang-toggle px-1.5 md: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-1.5 md: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-1.5 md:px-2 py-1 rounded hover:bg-white/20 transition">CN</button> |
| | </div> |
| | <button id="help-btn" class="text-[12px] md:text-[16px] font-medium uppercase hover:text-white transition">Help</button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | |
| | |
| | <div class="falcon-overlap-container"> |
| | <img src="assets/falcon.png" class="falcon-icon" alt="UAE Falcon"> |
| | </div> |
| |
|
| | |
| | |
| | |
| | <header id="search-header" class="home-mode relative z-10"> |
| | <div class="container mx-auto max-w-5xl px-3 md:px-6 text-center"> |
| | |
| | <div class="flex flex-col md:flex-row shadow-xl rounded-xl md:rounded-2xl bg-white relative z-10 border border-gray-200"> |
| | |
| | <div class="flex-grow flex items-center px-4 md:px-6 border-b md:border-b-0 md:border-r border-gray-100"> |
| | <textarea id="search-input" |
| | class="w-full text-emerald-950 outline-none text-[16px] md:text-[18px] py-3 md:py-2 min-h-[70px] md:min-h-0 md:h-12 resize-none" |
| | placeholder="Ask about UAE..." |
| | rows="2"></textarea> |
| | </div> |
| |
|
| | |
| | <div class="category-dropdown relative"> |
| | <button id="category-btn" class="w-full md:w-auto bg-gray-50 flex items-center justify-between md:justify-start px-4 py-3 md:py-0 md:h-12 text-emerald-800 text-[14px] md:text-[18px] font-normal hover:bg-gray-100 transition border-b md:border-b-0 border-gray-100"> |
| | <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> |
| |
|
| | |
| | <button id="search-btn" class="gold-fade hover:brightness-110 px-8 py-3 md:py-0 text-emerald-950 rounded-b-xl md:rounded-b-none md:rounded-r-2xl rtl:md:rounded-r-none rtl:md: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> |
| | <span class="ml-2 md:hidden font-medium">Search</span> |
| | </button> |
| | </div> |
| | <p id="first-query-note" class="text-[12px] md:text-[14px] text-[#003d1c] mt-3 text-center px-2"> |
| | Note: First query may take a few seconds to load the index. |
| | </p> |
| | </div> |
| | </header> |
| |
|
| | |
| | |
| | |
| | <main id="results-section" class="container mx-auto max-w-5xl py-6 md:py-10 px-3 md:px-6 hidden"> |
| | |
| | <div class="flex flex-col sm:flex-row justify-between items-start sm:items-end gap-2 border-b border-gray-200 pb-2 mb-6 md:mb-8"> |
| | <h2 class="text-emerald-900 font-medium text-[14px] md:text-[18px] tracking-widest flex items-center gap-2 md:gap-3"> |
| | <span class="text-lg md:text-xl">🦅</span> RETRIEVAL RESULTS |
| | </h2> |
| | <span id="results-count" class="text-emerald-700 font-medium text-[12px] md:text-[16px]">0 ITEMS FOUND</span> |
| | </div> |
| |
|
| | |
| | <div id="results-container"></div> |
| |
|
| | |
| | <div class="bg-[#F3EDE2]/50 rounded-lg border border-amber-600/10 px-4 md:px-8 py-4 md:py-5 mt-6 md:mt-8 flex flex-col gap-4 md:gap-6"> |
| | <div id="feedback-label" class="flex items-center gap-2 md:gap-3 text-emerald-900 text-[16px] md:text-[20px] font-medium uppercase tracking-wider"> |
| | <span>💬</span> FEEDBACK |
| | </div> |
| | <div class="w-full"> |
| | <input type="text" id="feedback-input" |
| | class="w-full bg-white border border-gray-200 rounded px-4 md:px-5 py-3 md:py-2 text-[16px] md:text-sm text-emerald-950 shadow-inner outline-none focus:border-amber-500" |
| | placeholder="Any comments? (optional)"> |
| | </div> |
| | <button id="submit-feedback-btn" class="w-full md:w-auto bg-emerald-900 text-white text-[16px] md:text-[20px] px-8 py-3 md:py-2 font-medium rounded hover:bg-emerald-800 shadow-xl transition"> |
| | Submit Feedback |
| | </button> |
| | </div> |
| | </main> |
| |
|
| | |
| | |
| | |
| | <div id="help-modal" class="modal-overlay"> |
| | <div class="modal-content w-full mx-4 md:mx-0"> |
| | |
| | <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">×</button> |
| | </div> |
| |
|
| | |
| | <div class="p-6 space-y-6"> |
| | |
| | <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> |
| |
|
| | |
| | <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> |
| |
|
| | |
| | <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>February 2026</strong> |
| | </p> |
| | </div> |
| |
|
| | |
| | <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: 69% Precision@1, 88% Recall@5, ~30ms latency on GPU |
| | </p> |
| | </div> |
| |
|
| | |
| | <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> |
| |
|
| | |
| | <div id="help-version" class="text-center text-xs text-gray-400 pt-4 border-t"> |
| | Version 2.4.0 | Published February 2026 | Powered by <a href="https://www.librai.tech/" target="_blank" class="text-emerald-600 hover:underline">LibrAI</a> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | |
| | |
| | <footer class="py-8 text-center text-gray-400 text-[14px]"> |
| | © 2026 UAE Knowledge System | Powered by <a href="https://www.librai.tech/" target="_blank" class="text-emerald-600 hover:underline">LibrAI</a> |
| | </footer> |
| |
|
| | |
| | <script src="js/app.js"></script> |
| | </body> |
| | </html> |
