feat: Add Global Saliency Calculation Mode

firefox-extension/content.js

@@ -37,10 +37,11 @@ browser.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
     const range = selection.getRangeAt(0);
 
     // Get user settings
-    const settings = await browser.storage.local.get(['threshold', 'gradientMode', 'preprompt', 'apiUrl']);
+    const settings = await browser.storage.local.get(['threshold', 'gradientMode', 'preprompt', 'saliencyMode', 'apiUrl']);
     const threshold = settings.threshold !== undefined ? settings.threshold : 0.35;
     const useGradient = settings.gradientMode || false;
     const preprompt = settings.preprompt || "";
+    const saliencyMode = settings.saliencyMode || "local";
     const apiUrl = settings.apiUrl || "http://127.0.0.1:8000";
     // Default to middle layers just like the playground
     const checkedLayers = [4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
@@ -52,7 +53,8 @@ browser.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ 
           text: selectedText, 
-          preprompt: preprompt, 
+          preprompt: preprompt,
+          saliency_mode: saliencyMode,
           layers: checkedLayers 
         })
       });
@@ -72,6 +74,7 @@ browser.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
       container.className = 'flowread-container';
       container.dataset.tokens = JSON.stringify(currentTokens);
       container.dataset.preprompt = preprompt;
+      container.dataset.saliencyMode = saliencyMode;
       container.dataset.originalText = selectedText;
       container.innerHTML = htmlString;
       range.insertNode(container);
@@ -90,10 +93,11 @@ browser.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
 });
 
 async function processEntirePage() {
-  const settings = await browser.storage.local.get(['threshold', 'gradientMode', 'preprompt', 'apiUrl']);
+  const settings = await browser.storage.local.get(['threshold', 'gradientMode', 'preprompt', 'saliencyMode', 'apiUrl']);
   const threshold = settings.threshold !== undefined ? settings.threshold : 0.35;
   const useGradient = settings.gradientMode || false;
   const preprompt = settings.preprompt || "";
+  const saliencyMode = settings.saliencyMode || "local";
   const apiUrl = settings.apiUrl || "http://127.0.0.1:8000";
   const checkedLayers = [4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
 
@@ -166,7 +170,8 @@ async function processEntirePage() {
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ 
             text: text, 
-            preprompt: preprompt, 
+            preprompt: preprompt,
+            saliency_mode: saliencyMode,
             layers: checkedLayers 
           })
         });
@@ -181,6 +186,7 @@ async function processEntirePage() {
         container.className = 'flowread-container';
         container.dataset.tokens = JSON.stringify(data.words);
         container.dataset.preprompt = preprompt;
+        container.dataset.saliencyMode = saliencyMode;
         container.dataset.originalText = text;
         container.innerHTML = htmlString;
         
@@ -203,6 +209,7 @@ async function updateExisting(newSettings) {
   const threshold = newSettings.threshold !== undefined ? newSettings.threshold : 0.35;
   const useGradient = newSettings.gradientMode || false;
   const preprompt = newSettings.preprompt || "";
+  const saliencyMode = newSettings.saliencyMode || "local";
   const apiUrl = newSettings.apiUrl || "http://127.0.0.1:8000";
   const checkedLayers = [4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
 
@@ -214,12 +221,13 @@ async function updateExisting(newSettings) {
 
   for (const container of containers) {
     const oldPreprompt = container.dataset.preprompt || "";
+    const oldMode = container.dataset.saliencyMode || "local";
     const text = container.dataset.originalText;
     if (!text) continue;
 
-    if (oldPreprompt !== preprompt) {
+    if (oldPreprompt !== preprompt || oldMode !== saliencyMode) {
       if (reFetchCount === 0) {
-         showToast("Updating FlowRead elements with new intent...", 0);
+         showToast("Updating FlowRead elements with new settings...", 0);
       }
       try {
         const response = await fetch(`${apiUrl}/analyze`, {
@@ -227,7 +235,8 @@ async function updateExisting(newSettings) {
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ 
             text: text, 
-            preprompt: preprompt, 
+            preprompt: preprompt,
+            saliency_mode: saliencyMode,
             layers: checkedLayers 
           })
         });
@@ -238,6 +247,7 @@ async function updateExisting(newSettings) {
 
         container.dataset.tokens = JSON.stringify(data.words);
         container.dataset.preprompt = preprompt;
+        container.dataset.saliencyMode = saliencyMode;
         const htmlString = generateFlowReadHTML(data.words, threshold, useGradient);
         container.innerHTML = htmlString;
         reFetchCount++;

firefox-extension/popup.html

@@ -91,6 +91,13 @@
   <input type="text" id="preprompt" placeholder="e.g., Focus on numbers and dates">
   <p class="help">Instruct the AI what to focus on before generating saliency.</p>
 
+  <label for="saliency-mode">Saliency Mode</label>
+  <select id="saliency-mode" style="width: 100%; margin-bottom: 15px; padding: 8px; border: 1px solid #d6d3d1; border-radius: 4px; font-family: inherit;">
+    <option value="local">Local (Relative to text block)</option>
+    <option value="global">Global (Absolute importance)</option>
+  </select>
+  <p class="help" style="margin-top: 0;">Global mode allows comparing importance across different paragraphs.</p>
+
   <label for="api-url">Backend API URL</label>
   <input type="text" id="api-url" placeholder="http://127.0.0.1:8000">
   <p class="help">URL of your FlowRead backend (Local or Hugging Face).</p>

firefox-extension/popup.js

@@ -3,12 +3,13 @@ document.addEventListener('DOMContentLoaded', () => {
   const thresholdVal = document.getElementById('threshold-val');
   const gradientModeInput = document.getElementById('gradient-mode');
   const prepromptInput = document.getElementById('preprompt');
+  const saliencyModeInput = document.getElementById('saliency-mode');
   const apiUrlInput = document.getElementById('api-url');
   const saveBtn = document.getElementById('save-btn');
   const pageBtn = document.getElementById('page-btn');
 
   // Load existing settings
-  browser.storage.local.get(['threshold', 'gradientMode', 'preprompt', 'apiUrl'], (res) => {
+  browser.storage.local.get(['threshold', 'gradientMode', 'preprompt', 'saliencyMode', 'apiUrl'], (res) => {
     if (res.threshold !== undefined) {
       thresholdInput.value = res.threshold;
       thresholdVal.textContent = parseFloat(res.threshold).toFixed(2);
@@ -19,6 +20,9 @@ document.addEventListener('DOMContentLoaded', () => {
     if (res.preprompt !== undefined) {
       prepromptInput.value = res.preprompt;
     }
+    if (res.saliencyMode !== undefined) {
+      saliencyModeInput.value = res.saliencyMode;
+    }
     apiUrlInput.value = res.apiUrl || "http://127.0.0.1:8000";
   });
 
@@ -33,6 +37,7 @@ document.addEventListener('DOMContentLoaded', () => {
       threshold: parseFloat(thresholdInput.value),
       gradientMode: gradientModeInput.checked,
       preprompt: prepromptInput.value.trim(),
+      saliencyMode: saliencyModeInput.value,
       apiUrl: apiUrlInput.value.trim().replace(/\/$/, '') // Remove trailing slash
     };
     

main.py

@@ -260,6 +260,7 @@ class TextRequest(BaseModel):
     text: str
     layers: Optional[List[int]] = None  # List of layer indices to average
     preprompt: str = ""    # Optional task-driven intent
+    saliency_mode: str = "local" # "local" or "global"
 
 @app.post("/analyze")
 async def analyze_text(request: TextRequest):
@@ -307,18 +308,26 @@ async def analyze_text(request: TextRequest):
     # Calculate importance: sum of attention each token *receives* from the sequence
     importance = avg_attention.sum(dim=0).cpu().float().numpy()
     
+    import numpy as np
+
     if len(importance) > num_preprompt_tokens:
-        # Normalize to 0-1, excluding the preprompt and <bos> from max/min calculation
-        # as they often have very high attention, skewing the rest
         text_importance = importance[num_preprompt_tokens:]
-        min_score = text_importance.min()
-        max_score = text_importance.max()
         
-        # Avoid division by zero
-        if max_score > min_score:
-            normalized_scores = (importance - min_score) / (max_score - min_score)
+        if request.saliency_mode == "global":
+            # Global Mode: absolute importance across different texts
+            # We apply a soft root penalty so very high values don't entirely blow out the scale,
+            # but high-density blocks will still look visibly darker/bolder than simple blocks.
+            # An importance sum of 1.0 (average) maps to ~0.46, an importance of 3.0+ maps to 1.0
+            normalized_scores = np.clip((importance / 3.0) ** 0.7, 0, 1.0)
         else:
-            normalized_scores = importance - min_score
+            # Local Mode: relative importance within this specific block of text
+            min_score = text_importance.min()
+            max_score = text_importance.max()
+            
+            if max_score > min_score:
+                normalized_scores = (importance - min_score) / (max_score - min_score)
+            else:
+                normalized_scores = importance - min_score
             
         # Keep <bos> at max score
         normalized_scores[0] = 1.0

static/index.html

@@ -223,6 +223,19 @@
             <details style="margin-bottom: 1.5rem; border: 1px solid #d6d3d1; border-radius: 0.375rem; padding: 1rem; background: #fdfbf7;">
                 <summary style="cursor: pointer; font-weight: bold; color: #57534e;">Advanced Saliency Settings</summary>
                 
+                <div style="margin-top: 1rem; margin-bottom: 1rem;">
+                    <label for="saliency-mode" style="display:block; font-weight: 600; margin-bottom: 0.5rem; color: #44403c;">
+                        Saliency Calculation Mode
+                    </label>
+                    <p style="font-size: 0.85rem; color: #78716c; margin-top: 0; margin-bottom: 0.5rem;">
+                        Choose whether importance is calculated relative to this text alone, or absolutely across all texts.
+                    </p>
+                    <select id="saliency-mode" style="width: 100%; padding: 0.5rem; border: 1px solid #d6d3d1; border-radius: 0.25rem; font-size: 0.9rem; box-sizing: border-box; font-family: inherit;">
+                        <option value="local">Local Mode (Relative Min/Max)</option>
+                        <option value="global">Global Mode (Absolute Values with Penalty)</option>
+                    </select>
+                </div>
+
                 <div style="margin-top: 1rem;">
                     <label for="preprompt" style="display:block; font-weight: 600; margin-bottom: 0.5rem; color: #44403c;">
                         Intent-Driven Reading (Preprompt)
@@ -388,6 +401,7 @@
         // ==========================================
         const inputArea = document.getElementById('text-input');
         const prepromptInput = document.getElementById('preprompt');
+        const saliencyModeInput = document.getElementById('saliency-mode');
         const analyzeBtn = document.getElementById('analyze-btn');
         const thresholdSlider = document.getElementById('threshold');
         const thresholdVal = document.getElementById('threshold-val');
@@ -448,6 +462,7 @@
         analyzeBtn.addEventListener('click', async () => {
             const text = inputArea.value.trim();
             const preprompt = prepromptInput.value.trim();
+            const saliencyMode = saliencyModeInput.value;
             
             const checkedLayers = Array.from(document.querySelectorAll('.layer-cb:checked')).map(cb => parseInt(cb.value));
             
@@ -465,7 +480,7 @@
                 const response = await fetch('/analyze', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ text, preprompt, layers: checkedLayers })
+                    body: JSON.stringify({ text, preprompt, layers: checkedLayers, saliency_mode: saliencyMode })
                 });
 
                 if (!response.ok) throw new Error('Network response was not ok');