Fix HF_HOME caching in Dockerfile and update UI

.gitattributes

@@ -1,4 +1,4 @@
 *.db filter=lfs diff=lfs merge=lfs -text
 quran_master.db filter=lfs diff=lfs merge=lfs -text
-extension/assets/icons/fab_logo.png filter=lfs diff=lfs merge=lfs -text
 *.png filter=lfs diff=lfs merge=lfs -text
+extension/assets/icons/fab_logo.png filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -16,6 +16,9 @@ RUN pip install --no-cache-dir torch --index-url https://download.pytorch.org/wh
 # Pre-download models during build (network is available here)
 # At runtime, the container has NO outbound DNS, so models must be cached
 
+# Set HF_HOME to a global path so non-root users (like in HF Spaces) can access cached models
+ENV HF_HOME=/opt/huggingface
+RUN mkdir -p /opt/huggingface && chmod 777 /opt/huggingface
 # 1. Summarization model (MBart, float16)
 RUN python -c "\
 from transformers import MBartForConditionalGeneration, AutoTokenizer, AutoConfig; \
@@ -46,7 +49,9 @@ print('Spelling model + MLM cached!'); \
 "
 
 # 3. Grammar — camel-tools MLE disambiguator data
-RUN camel_data -i light
+# Set CAMELTOOLS_DATA to a global path so non-root users (like in HF Spaces) can access it
+ENV CAMELTOOLS_DATA=/opt/camel_tools
+RUN mkdir -p /opt/camel_tools && chmod 777 /opt/camel_tools && camel_data -i light
 
 # 4. Punctuation model (PuncAra-v1 — EncoderDecoderModel)
 RUN python -c "\

extension/_locales/ar/messages.json

@@ -16,7 +16,7 @@
     "description": "Context menu item for summarizing selected text"
   },
   "contextMenuDialect": {
-    "message": "تحويل اللهجة إلى العربية الفصحى مع بيان",
+    "message": "تحويل للفصحى مع بيان",
     "description": "Context menu: dialect→MSA"
   },
   "contextMenuQuran": {

extension/_locales/en/messages.json

@@ -8,19 +8,19 @@
     "description": "Extension description shown in Chrome Web Store"
   },
   "contextMenuCorrect": {
-    "message": "Correct with Bayan",
+    "message": "تصحيح النص مع بيان",
     "description": "Context menu item for correcting selected text"
   },
   "contextMenuSummarize": {
-    "message": "Summarize with Bayan",
+    "message": "تلخيص النص مع بيان",
     "description": "Context menu item for summarizing selected text"
   },
   "contextMenuDialect": {
-    "message": "Convert dialect to MSA with Bayan",
+    "message": "تحويل للفصحى مع بيان",
     "description": "Context menu: dialect→MSA"
   },
   "contextMenuQuran": {
-    "message": "Verify verse with Bayan",
+    "message": "تدقيق النص القرآني مع بيان",
     "description": "Context menu: Quran verify"
   }
 }

extension/background.js

@@ -49,25 +49,27 @@ function getStorage() {
 // ══════════════════════════════════════════════════════════
 
 chrome.runtime.onInstalled.addListener(() => {
-  chrome.contextMenus.create({
-    id: 'bayan-correct',
-    title: chrome.i18n.getMessage('contextMenuCorrect') || 'تصحيح النص مع بيان',
-    contexts: ['selection'],
-  });
-  chrome.contextMenus.create({
-    id: 'bayan-summarize',
-    title: chrome.i18n.getMessage('contextMenuSummarize') || 'تلخيص النص مع بيان',
-    contexts: ['selection'],
-  });
-  chrome.contextMenus.create({
-    id: 'bayan-dialect',
-    title: chrome.i18n.getMessage('contextMenuDialect') || 'تحويل اللهجة إلى العربية الفصحى مع بيان',
-    contexts: ['selection'],
-  });
-  chrome.contextMenus.create({
-    id: 'bayan-quran',
-    title: chrome.i18n.getMessage('contextMenuQuran') || 'تدقيق النص القرآني مع بيان',
-    contexts: ['selection'],
+  chrome.contextMenus.removeAll(() => {
+    chrome.contextMenus.create({
+      id: 'bayan-correct',
+      title: 'تصحيح النص مع بيان',
+      contexts: ['selection'],
+    });
+    chrome.contextMenus.create({
+      id: 'bayan-summarize',
+      title: 'تلخيص النص مع بيان',
+      contexts: ['selection'],
+    });
+    chrome.contextMenus.create({
+      id: 'bayan-dialect',
+      title: 'تحويل للفصحى مع بيان',
+      contexts: ['selection'],
+    });
+    chrome.contextMenus.create({
+      id: 'bayan-quran',
+      title: 'تدقيق النص القرآني مع بيان',
+      contexts: ['selection'],
+    });
   });
 });
 

extension/content-inline.js

@@ -244,8 +244,10 @@
         + `left:${rect.left}px;width:${rect.width}px;height:${rect.height}px;`
         + `font-family:${cs.fontFamily};font-size:${cs.fontSize};line-height:${cs.lineHeight};`
         + `padding:${cs.padding};border:${cs.border};border-color:transparent;`
-        + `direction:${cs.direction};text-align:${cs.textAlign};overflow:hidden;`
-        + `pointer-events:none;z-index:2147483645;box-sizing:border-box;`
+        + `direction:${cs.direction};text-align:${cs.textAlign};`
+        + `unicode-bidi:${cs.unicodeBidi};letter-spacing:${cs.letterSpacing};`
+        + `word-spacing:${cs.wordSpacing};text-indent:${cs.textIndent};`
+        + `overflow:hidden;pointer-events:none;z-index:2147483645;box-sizing:border-box;`
         + `white-space:pre-wrap;word-wrap:break-word;color:transparent;`;
 
       const html = esc(baseText) + `<span class="bayan-il-ghost-suffix">${esc(suffix)}</span>`;
@@ -341,8 +343,10 @@
         + `left:${rect.left}px;width:${rect.width}px;height:${rect.height}px;`
         + `font-family:${cs.fontFamily};font-size:${cs.fontSize};line-height:${cs.lineHeight};`
         + `padding:${cs.padding};border:${cs.border};border-color:transparent;`
-        + `direction:${cs.direction};text-align:${cs.textAlign};overflow:hidden;`
-        + `pointer-events:none;z-index:2147483645;box-sizing:border-box;`
+        + `direction:${cs.direction};text-align:${cs.textAlign};`
+        + `unicode-bidi:${cs.unicodeBidi};letter-spacing:${cs.letterSpacing};`
+        + `word-spacing:${cs.wordSpacing};text-indent:${cs.textIndent};`
+        + `overflow:hidden;pointer-events:none;z-index:2147483645;box-sizing:border-box;`
         + `white-space:pre-wrap;word-wrap:break-word;color:transparent;`;
 
       const sorted = [...suggs].sort((a, b) => a.start - b.start);

extension/popup.css

@@ -27,7 +27,7 @@
 
   --bayan-spelling: #ef4444;
   --bayan-grammar: #f59e0b;
-  --bayan-punctuation: #3b82f6;
+  --bayan-punctuation: #6BC98A;
 
   --bayan-radius: 10px;
   --bayan-radius-sm: 6px;
@@ -473,7 +473,7 @@ body::-webkit-scrollbar-thumb {
 }
 
 .bayan-punctuation-suggestion {
-  background: rgba(59, 130, 246, 0.15);
+  background: rgba(107, 201, 138, 0.14);
   border-bottom: 2px solid var(--bayan-punctuation);
   border-radius: 2px;
   padding: 0 2px;
@@ -481,7 +481,7 @@ body::-webkit-scrollbar-thumb {
   transition: background var(--bayan-transition);
 }
 .bayan-punctuation-suggestion:hover {
-  background: rgba(59, 130, 246, 0.25);
+  background: rgba(107, 201, 138, 0.28);
 }
 
 /* ══════════════════════════════════════════════
@@ -556,7 +556,7 @@ body::-webkit-scrollbar-thumb {
   color: var(--bayan-grammar);
 }
 .bayan-badge-punctuation {
-  background: rgba(59, 130, 246, 0.15);
+  background: rgba(107, 201, 138, 0.15);
   color: var(--bayan-punctuation);
 }
 

extension/popup.html

@@ -35,7 +35,7 @@
     </button>
     <button class="bayan-tab" role="tab" aria-selected="false" data-tab="dialect" id="tab-dialect">
       <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/></svg>
-      لهجة
+      تحويل للفصحى
     </button>
     <button class="bayan-tab" role="tab" aria-selected="false" data-tab="quran" id="tab-quran">
       <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
@@ -195,7 +195,7 @@
     <div class="bayan-actions">
       <button class="bayan-btn bayan-btn-primary" id="btn-dialect" type="button">
         <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
-        تحويل إلى الفصحى
+        تحويل للفصحى
       </button>
     </div>
     <div class="bayan-result is-hidden" id="dialect-result-section">

extension/sidepanel/sidepanel.css

@@ -27,7 +27,7 @@
 
   --sp-spelling: #ef4444;
   --sp-grammar: #f59e0b;
-  --sp-punctuation: #3b82f6;
+  --sp-punctuation: #6BC98A;
 
   --sp-radius: 10px;
   --sp-radius-sm: 6px;
@@ -439,7 +439,7 @@ body {
   cursor: pointer;
 }
 .bayan-punctuation-suggestion {
-  background: rgba(59, 130, 246, 0.15);
+  background: rgba(107, 201, 138, 0.14);
   border-bottom: 2px solid var(--sp-punctuation);
   padding: 0 2px;
   border-radius: 2px;
@@ -504,7 +504,7 @@ body {
 }
 .bayan-badge-spelling { background: rgba(239, 68, 68, 0.15); color: var(--sp-spelling); }
 .bayan-badge-grammar { background: rgba(245, 158, 11, 0.15); color: var(--sp-grammar); }
-.bayan-badge-punctuation { background: rgba(59, 130, 246, 0.15); color: var(--sp-punctuation); }
+.bayan-badge-punctuation { background: rgba(107, 201, 138, 0.15); color: var(--sp-punctuation); }
 
 .bayan-suggestion-change {
   display: flex;

extension/sidepanel/sidepanel.html

@@ -35,7 +35,7 @@
     </button>
     <button class="sp-tab" role="tab" aria-selected="false" data-tab="dialect" id="tab-dialect">
       <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/></svg>
-      لهجة
+      تحويل للفصحى
     </button>
     <button class="sp-tab" role="tab" aria-selected="false" data-tab="quran" id="tab-quran">
       <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
@@ -193,7 +193,7 @@
     <div class="sp-actions">
       <button class="sp-btn sp-btn-primary" id="btn-dialect">
         <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
-        تحويل إلى الفصحى
+        تحويل للفصحى
       </button>
     </div>
     <div class="sp-result is-hidden" id="dialect-result-section">

generate_icons.py

@@ -0,0 +1,8 @@
+"""Generate extension icons from LOGOS/1.png (gradient bg for best small-size visibility)."""
+from PIL import Image
+
+img = Image.open("LOGOS/1.png")
+for size in [16, 32, 48, 128]:
+    img.resize((size, size), Image.LANCZOS).save(f"extension/assets/icons/icon{size}.png")
+    print(f"Generated icon{size}.png ({size}x{size}) from LOGOS/1.png")
+print("Done!")

src/index.html

@@ -7,12 +7,12 @@
   <meta name="supabase-anon-key" content="">
   <title>بيان - مساعد الكتابة العربية الذكي</title>
    <meta name="description" content="بيان — منصة ذكاء اصطناعي متكاملة لتصحيح الإملاء والنحو والترقيم وتلخيص النصوص والإكمال التلقائي وتدقيق القرآن الكريم وتحويل اللهجات — مصمّمة خصيصًا للغة العربية. جرّبه مجاناً!">
-   <meta property="og:image" content="/LOGOS/3.png">
+   <meta property="og:image" content="/logos/logo-banner.png">
    <meta property="og:title" content="بيان — مساعدك الذكي للكتابة بالعربية">
    <meta property="og:description" content="تدقيق إملائي ونحوي وترقيم، تلخيص ذكي، إكمال تلقائي، تدقيق القرآن الكريم، وتحويل اللهجات">
    <meta name="twitter:card" content="summary_large_image">
-   <meta name="twitter:image" content="/LOGOS/3.png">
-   <link rel="icon" type="image/png" href="/LOGOS/1.png">
+   <meta name="twitter:image" content="/logos/logo-banner.png">
+   <link rel="icon" type="image/png" href="/logos/logo-icon.png">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -64,7 +64,7 @@
        <button id="mobile-menu-btn" class="mobile-menu-btn md:hidden" aria-label="فتح القائمة" aria-expanded="false" aria-controls="mobile-drawer">
         <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
        </button>
-       <button onclick="showPage('home')" class="flex items-center gap-3" style="background:none;border:none;cursor:pointer;" aria-label="الرئيسية"><img src="/LOGOS/2.png" alt="بيان" width="28" height="28" style="flex-shrink:0;"><span id="nav-brand" class="text-xl md:text-2xl font-bold text-gradient">بيان</span></button>
+       <button onclick="showPage('home')" class="flex items-center gap-3" style="background:none;border:none;cursor:pointer;" aria-label="الرئيسية"><img src="/logos/logo-transparent.png" alt="بيان" width="28" height="28" style="flex-shrink:0;"><span id="nav-brand" class="text-xl md:text-2xl font-bold text-gradient">بيان</span></button>
       </div>
       <div class="hidden md:flex items-center gap-8">
        <button onclick="showPage('home')" class="nav-link active text-base font-medium" data-page="home">الرئيسية</button>
@@ -1159,7 +1159,7 @@
       <div class="grid grid-cols-1 md:grid-cols-3 gap-12 mb-12" dir="rtl">
        <div>
         <div class="flex items-center gap-3 mb-4">
-         <img src="/LOGOS/2.png" alt="بيان" width="28" height="28" style="flex-shrink:0;"><span id="footer-brand" class="text-2xl font-bold text-gradient">بيان</span>
+         <img src="/logos/logo-transparent.png" alt="بيان" width="28" height="28" style="flex-shrink:0;"><span id="footer-brand" class="text-2xl font-bold text-gradient">بيان</span>
         </div>
         <p class="text-sm leading-relaxed" style="color: var(--text-secondary); line-height: 1.8;">منصة ذكاء اصطناعي للكتابة العربية — تدقيق إملائي ونحوي، ترقيم، تلخيص، إكمال تلقائي، تدقيق القرآن، وتحويل اللهجات.</p>
        </div>