Spaces:

jobbler
/

FlowRead

Build error

App Files Files Community

jobbler commited on 17 days ago

Commit

bd01d05

1 Parent(s): 0b3a97c

Fix tokenizer extra_special_tokens crash and stabilize transformers

Browse files

Files changed (13) hide show

README.md +6 -6
firefox-extension/README.md +50 -0
firefox-extension/content.js +17 -14
firefox-extension/popup.html +9 -0
firefox-extension/popup.js +6 -1
main.py +171 -111
static/index.html +13 -61
test_bos.py +4 -0
test_gguf.py +21 -0
test_load.py +10 -0
test_model.py +9 -0
test_model2.py +8 -0
test_tok_issue.py +39 -0

README.md CHANGED Viewed

@@ -11,13 +11,13 @@ pinned: false
 **Accelerate reading comprehension using LLM attention vectors.**
-FlowRead AI is an accessibility and educational tool that dynamically bolds the most semantically important words in a text. It uses the raw, internal attention vectors of the **Google Gemma 2B** model to understand what words actually matter, creating a visually guided reading path that reduces cognitive load and improves reading comprehension.
 ## The Problem
 In the digital age, information overload is a massive barrier. General readers experience reduced reading speeds and poor retention when trying to skim long articles or academic papers, and individuals with ADHD, dyslexia, or cognitive fatigue face even more significant challenges when processing dense blocks of text. Existing solutions (like "Bionic Reading") simply bold the first half of *every* word, which is arbitrary and ignores the actual meaning of the sentence.
 ## The Solution
-FlowRead AI solves this by extracting the mathematical "saliency" of words. By averaging the incoming attention scores across different layers of Gemma 2B, we determine exactly which nouns, verbs, and adjectives anchor the semantic meaning of the sentence.
 For the general reader, this translates to significantly faster reading speeds and highly efficient skimming, as the eye is naturally drawn to the most information-dense words. For readers with attention deficits or cognitive fatigue, it creates a visually guided reading path that reduces cognitive load and improves reading comprehension. Everyone benefits from a more focused reading experience.
@@ -28,11 +28,11 @@ For the general reader, this translates to significantly faster reading speeds a
 * **Built-in A/B User Study:** A complete embedded research tool with an SQLite backend to gather real-world empirical data on how FlowRead impacts average reading speed and comprehension accuracy.
 ## Why Gemma?
-We chose **Gemma 2B** because it offers an incredible balance of deep semantic understanding and computational efficiency. At just 2 billion parameters, its attention heads are remarkably accurate at capturing contextual importance, punching well above its weight class. Because it has open weights, we can directly extract the `outputs.attentions` matrices—something impossible with closed-source, API-based models. Its compact size means the entire application can run locally on consumer hardware (like Macs with MPS) or on free cloud tiers (like Hugging Face Spaces), democratizing access to this tool.
 ## Technical Implementation
 * **Backend:** FastAPI (Python) serving a PyTorch/Hugging Face pipeline.
-* **Model:** `google/gemma-2b` running in `bfloat16` precision.
 * **Frontend:** Pure HTML/JS/CSS with a minimalist, distraction-free "academic paper" aesthetic.
 * **Database:** SQLite for storing A/B test results.
@@ -49,7 +49,7 @@ Running locally allows you to use your own GPU (like Apple Silicon MPS or Nvidia
    pip install -r requirements.txt
    ```
 2. **Authenticate with Hugging Face:**
-   Gemma 2B is a gated model. You must accept the terms on Hugging Face and log in:
    ```bash
    huggingface-cli login
    ```
@@ -66,7 +66,7 @@ Running locally allows you to use your own GPU (like Apple Silicon MPS or Nvidia
 This repository is already configured with a `Dockerfile` and the correct YAML frontmatter to be deployed directly as a Hugging Face Docker Space.
 1. Create a new **Docker Space** on Hugging Face.
-2. Add your Hugging Face Token as a Repository Secret named `HF_TOKEN`. This is required to download the gated Gemma 2B model.
 3. Push this repository to your Space.
 4. The Space will automatically build the Docker image and start the FastAPI server. The SQLite database (`study.db`) is safely written to the `/tmp` or `/data` directory to avoid read-only filesystem errors.

 **Accelerate reading comprehension using LLM attention vectors.**
+FlowRead AI is an accessibility and educational tool that dynamically bolds the most semantically important words in a text. It uses the raw, internal attention vectors of the **Gemma 4 (E2B and 26B)** models to understand what words actually matter, creating a visually guided reading path that reduces cognitive load and improves reading comprehension.
 ## The Problem
 In the digital age, information overload is a massive barrier. General readers experience reduced reading speeds and poor retention when trying to skim long articles or academic papers, and individuals with ADHD, dyslexia, or cognitive fatigue face even more significant challenges when processing dense blocks of text. Existing solutions (like "Bionic Reading") simply bold the first half of *every* word, which is arbitrary and ignores the actual meaning of the sentence.
 ## The Solution
+FlowRead AI solves this by extracting the mathematical "saliency" of words. By averaging the incoming attention scores across different layers of Gemma 4, we determine exactly which nouns, verbs, and adjectives anchor the semantic meaning of the sentence.
 For the general reader, this translates to significantly faster reading speeds and highly efficient skimming, as the eye is naturally drawn to the most information-dense words. For readers with attention deficits or cognitive fatigue, it creates a visually guided reading path that reduces cognitive load and improves reading comprehension. Everyone benefits from a more focused reading experience.
 * **Built-in A/B User Study:** A complete embedded research tool with an SQLite backend to gather real-world empirical data on how FlowRead impacts average reading speed and comprehension accuracy.
 ## Why Gemma?
+We chose the **Gemma 4** family because they offer an incredible balance of deep semantic understanding and computational efficiency. Their attention heads are remarkably accurate at capturing contextual importance, punching well above their weight class. Because it has open weights, we can directly extract the `outputs.attentions` matrices—something impossible with closed-source, API-based models. With options like the highly efficient E2B model or the quantized 4-bit 26B model, the application can run locally on consumer hardware (like Macs with MPS) or on free cloud tiers (like Hugging Face Spaces), democratizing access to this tool.
 ## Technical Implementation
 * **Backend:** FastAPI (Python) serving a PyTorch/Hugging Face pipeline.
+* **Model:** `unsloth/gemma-4-E2B` (and 26B variants) running in `bfloat16` or 4-bit precision.
 * **Frontend:** Pure HTML/JS/CSS with a minimalist, distraction-free "academic paper" aesthetic.
 * **Database:** SQLite for storing A/B test results.
    pip install -r requirements.txt
    ```
 2. **Authenticate with Hugging Face:**
+   Gemma models are generally gated. You must accept the terms on Hugging Face and log in:
    ```bash
    huggingface-cli login
    ```
 This repository is already configured with a `Dockerfile` and the correct YAML frontmatter to be deployed directly as a Hugging Face Docker Space.
 1. Create a new **Docker Space** on Hugging Face.
+2. Add your Hugging Face Token as a Repository Secret named `HF_TOKEN`. This is required to download the gated Gemma models.
 3. Push this repository to your Space.
 4. The Space will automatically build the Docker image and start the FastAPI server. The SQLite database (`study.db`) is safely written to the `/tmp` or `/data` directory to avoid read-only filesystem errors.

firefox-extension/README.md ADDED Viewed

	@@ -0,0 +1,50 @@

+# FlowRead Firefox Extension
+The FlowRead Firefox extension allows you to dynamically bold the most semantically important words on any webpage, directly in your browser. It does this by communicating with your local (or cloud-hosted) FlowRead API server powered by Gemma 4 models.
+## 1. Start the Backend API Server
+The extension needs a running backend server to perform the mathematical saliency extraction. The backend uses the Hugging Face `transformers` library, served via FastAPI.
+**Step 1: Install Dependencies**
+Ensure you are in the root directory of the project and install the requirements:
+```bash
+pip install -r requirements.txt
+```
+**Step 2: Authenticate with Hugging Face**
+The Gemma 4 models are gated on Hugging Face. You must log in first:
+```bash
+huggingface-cli login
+```
+**Step 3: Start the Server**
+Run the backend using Uvicorn:
+```bash
+uvicorn main:app --reload --host 0.0.0.0 --port 8000
+```
+*Note: This will download and load `unsloth/gemma-4-E2B` (or the configured 26B variant) and start listening for requests on port 8000. It does not use `llama.cpp` or `llama-server`; it uses PyTorch and the Hugging Face ecosystem natively.*
+## 2. Install the Firefox Extension
+1. Open Firefox and navigate to `about:debugging`.
+2. Click **"This Firefox"** on the left sidebar.
+3. Click the **"Load Temporary Add-on..."** button.
+4. In the file dialog, navigate to the `firefox-extension` folder in this repository and select the `manifest.json` file. (Alternatively, you can select the `flowread-extension.zip` file if you prefer to use the packaged version).
+5. The extension will appear in your list of Temporary Extensions and its icon will appear in your toolbar.
+## 3. Configure the Extension
+1. Click the **FlowRead icon** in your Firefox toolbar.
+2. In the settings popup, locate the **Backend API URL** field.
+3. Ensure it matches where your backend server is running:
+   - If running locally: `http://127.0.0.1:8000`
+   - If using Hugging Face Spaces or another remote server: `https://your-domain.com` (do not include a trailing slash)
+4. You can also tweak other settings like the Saliency Threshold and Gradient Mode. Click **Save Settings**.
+## 4. How to Use It
+1. Navigate to any article, blog post, or text-heavy website.
+2. **Method 1 (Selection):** Highlight a paragraph of text, right-click it, and select **"FlowRead Highlight"** from the context menu.
+3. **Method 2 (Entire Page):** Right-click anywhere on the page and select **"FlowRead Entire Page"** (or use the "FlowRead Page" button in the extension popup).
+4. The extension will send the text to your local API, compute the attention values, and instantly transform the text on your screen!

firefox-extension/content.js CHANGED Viewed

@@ -37,15 +37,14 @@ 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', 'saliencyMode', 'modelVersion', '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 modelVersion = settings.modelVersion || "2b";
     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];
     try {
       // Start polling status
@@ -74,12 +73,12 @@ browser.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
       const response = await fetch(`${apiUrl}/analyze/${modelVersion}`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          text: selectedText,
-          preprompt: preprompt,
-          saliency_mode: saliencyMode,
-          layers: checkedLayers
-        })
       });
       isFetching = false;
@@ -99,6 +98,7 @@ browser.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
       container.dataset.tokens = JSON.stringify(currentTokens);
       container.dataset.preprompt = preprompt;
       container.dataset.saliencyMode = saliencyMode;
       container.dataset.modelVersion = modelVersion;
       container.dataset.originalText = selectedText;
       container.innerHTML = htmlString;
@@ -118,14 +118,14 @@ browser.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
 });
 async function processEntirePage() {
-  const settings = await browser.storage.local.get(['threshold', 'gradientMode', 'preprompt', 'saliencyMode', 'modelVersion', '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 modelVersion = settings.modelVersion || "2b";
   const apiUrl = settings.apiUrl || "http://127.0.0.1:8000";
-  const checkedLayers = [4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
   // To prevent freezing the browser or overwhelming the API, process in batches
   const walkerObj = document.createTreeWalker(
@@ -243,6 +243,7 @@ async function processEntirePage() {
         container.dataset.tokens = JSON.stringify(data.words);
         container.dataset.preprompt = preprompt;
         container.dataset.saliencyMode = saliencyMode;
         container.dataset.modelVersion = modelVersion;
         container.dataset.originalText = text;
         container.innerHTML = htmlString;
@@ -268,9 +269,9 @@ async function updateExisting(newSettings) {
   const useGradient = newSettings.gradientMode || false;
   const preprompt = newSettings.preprompt || "";
   const saliencyMode = newSettings.saliencyMode || "local";
   const modelVersion = newSettings.modelVersion || "2b";
   const apiUrl = newSettings.apiUrl || "http://127.0.0.1:8000";
-  const checkedLayers = [4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
   const containers = document.querySelectorAll('.flowread-container');
   if (containers.length === 0) return;
@@ -282,11 +283,12 @@ async function updateExisting(newSettings) {
   for (const container of containers) {
     const oldPreprompt = container.dataset.preprompt || "";
     const oldMode = container.dataset.saliencyMode || "local";
     const oldModelVersion = container.dataset.modelVersion || "2b";
     const text = container.dataset.originalText;
     if (!text) continue;
-    if (oldPreprompt !== preprompt || oldMode !== saliencyMode || oldModelVersion !== modelVersion) {
       if (reFetchCount === 0) {
          showToast("Updating FlowRead elements with new settings...", 0);
          isFetchingStatus = true;
@@ -315,7 +317,7 @@ async function updateExisting(newSettings) {
             text: text,
             preprompt: preprompt,
             saliency_mode: saliencyMode,
-            layers: checkedLayers
           })
         });
@@ -326,6 +328,7 @@ async function updateExisting(newSettings) {
         container.dataset.tokens = JSON.stringify(data.words);
         container.dataset.preprompt = preprompt;
         container.dataset.saliencyMode = saliencyMode;
         container.dataset.modelVersion = modelVersion;
         const htmlString = generateFlowReadHTML(data.words, threshold, useGradient);
         container.innerHTML = htmlString;

     const range = selection.getRangeAt(0);
     // Get user settings
+    const settings = await browser.storage.local.get(['threshold', 'gradientMode', 'preprompt', 'saliencyMode', 'layerPreset', 'modelVersion', '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 layerPreset = settings.layerPreset || "middle";
     const modelVersion = settings.modelVersion || "2b";
     const apiUrl = settings.apiUrl || "http://127.0.0.1:8000";
     try {
       // Start polling status
       const response = await fetch(`${apiUrl}/analyze/${modelVersion}`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            text: text,
+            preprompt: preprompt,
+            saliency_mode: saliencyMode,
+            layer_preset: layerPreset
+          })
       });
       isFetching = false;
       container.dataset.tokens = JSON.stringify(currentTokens);
       container.dataset.preprompt = preprompt;
       container.dataset.saliencyMode = saliencyMode;
+      container.dataset.layerPreset = layerPreset;
       container.dataset.modelVersion = modelVersion;
       container.dataset.originalText = selectedText;
       container.innerHTML = htmlString;
 });
 async function processEntirePage() {
+  const settings = await browser.storage.local.get(['threshold', 'gradientMode', 'preprompt', 'saliencyMode', 'layerPreset', 'modelVersion', '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 layerPreset = settings.layerPreset || "middle";
   const modelVersion = settings.modelVersion || "2b";
   const apiUrl = settings.apiUrl || "http://127.0.0.1:8000";
   // To prevent freezing the browser or overwhelming the API, process in batches
   const walkerObj = document.createTreeWalker(
         container.dataset.tokens = JSON.stringify(data.words);
         container.dataset.preprompt = preprompt;
         container.dataset.saliencyMode = saliencyMode;
+        container.dataset.layerPreset = layerPreset;
         container.dataset.modelVersion = modelVersion;
         container.dataset.originalText = text;
         container.innerHTML = htmlString;
   const useGradient = newSettings.gradientMode || false;
   const preprompt = newSettings.preprompt || "";
   const saliencyMode = newSettings.saliencyMode || "local";
+  const layerPreset = newSettings.layerPreset || "middle";
   const modelVersion = newSettings.modelVersion || "2b";
   const apiUrl = newSettings.apiUrl || "http://127.0.0.1:8000";
   const containers = document.querySelectorAll('.flowread-container');
   if (containers.length === 0) return;
   for (const container of containers) {
     const oldPreprompt = container.dataset.preprompt || "";
     const oldMode = container.dataset.saliencyMode || "local";
+    const oldPreset = container.dataset.layerPreset || "middle";
     const oldModelVersion = container.dataset.modelVersion || "2b";
     const text = container.dataset.originalText;
     if (!text) continue;
+    if (oldPreprompt !== preprompt || oldMode !== saliencyMode || oldPreset !== layerPreset || oldModelVersion !== modelVersion) {
       if (reFetchCount === 0) {
          showToast("Updating FlowRead elements with new settings...", 0);
          isFetchingStatus = true;
             text: text,
             preprompt: preprompt,
             saliency_mode: saliencyMode,
+            layer_preset: layerPreset
           })
         });
         container.dataset.tokens = JSON.stringify(data.words);
         container.dataset.preprompt = preprompt;
         container.dataset.saliencyMode = saliencyMode;
+        container.dataset.layerPreset = layerPreset;
         container.dataset.modelVersion = modelVersion;
         const htmlString = generateFlowReadHTML(data.words, threshold, useGradient);
         container.innerHTML = htmlString;

firefox-extension/popup.html CHANGED Viewed

@@ -98,6 +98,15 @@
   </select>
   <p class="help" style="margin-top: 0;">Global mode allows comparing importance across different paragraphs.</p>
   <label for="model-version">Model Version</label>
   <select id="model-version" style="width: 100%; margin-bottom: 15px; padding: 8px; border: 1px solid #d6d3d1; border-radius: 4px; font-family: inherit;">
     <option value="2b">Gemma 4 2B (Fast / Default)</option>

   </select>
   <p class="help" style="margin-top: 0;">Global mode allows comparing importance across different paragraphs.</p>
+  <label for="layer-preset">Network Layers</label>
+  <select id="layer-preset" style="width: 100%; margin-bottom: 15px; padding: 8px; border: 1px solid #d6d3d1; border-radius: 4px; font-family: inherit;">
+    <option value="middle">Middle Layers (Semantic focus)</option>
+    <option value="first">First Few Layers (Lexical/Syntax)</option>
+    <option value="last">Last Few Layers (Output formatting)</option>
+    <option value="all">All Layers (Averaged)</option>
+  </select>
+  <p class="help" style="margin-top: 0;">Select which network layers extract attention scores.</p>
   <label for="model-version">Model Version</label>
   <select id="model-version" style="width: 100%; margin-bottom: 15px; padding: 8px; border: 1px solid #d6d3d1; border-radius: 4px; font-family: inherit;">
     <option value="2b">Gemma 4 2B (Fast / Default)</option>

firefox-extension/popup.js CHANGED Viewed

@@ -4,13 +4,14 @@ document.addEventListener('DOMContentLoaded', () => {
   const gradientModeInput = document.getElementById('gradient-mode');
   const prepromptInput = document.getElementById('preprompt');
   const saliencyModeInput = document.getElementById('saliency-mode');
   const modelVersionInput = document.getElementById('model-version');
   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', 'saliencyMode', 'modelVersion', 'apiUrl'], (res) => {
     if (res.threshold !== undefined) {
       thresholdInput.value = res.threshold;
       thresholdVal.textContent = parseFloat(res.threshold).toFixed(2);
@@ -24,6 +25,9 @@ document.addEventListener('DOMContentLoaded', () => {
     if (res.saliencyMode !== undefined) {
       saliencyModeInput.value = res.saliencyMode;
     }
     if (res.modelVersion !== undefined) {
       modelVersionInput.value = res.modelVersion;
     }
@@ -42,6 +46,7 @@ document.addEventListener('DOMContentLoaded', () => {
       gradientMode: gradientModeInput.checked,
       preprompt: prepromptInput.value.trim(),
       saliencyMode: saliencyModeInput.value,
       modelVersion: modelVersionInput.value,
       apiUrl: apiUrlInput.value.trim().replace(/\/$/, '') // Remove trailing slash
     };

   const gradientModeInput = document.getElementById('gradient-mode');
   const prepromptInput = document.getElementById('preprompt');
   const saliencyModeInput = document.getElementById('saliency-mode');
+  const layerPresetInput = document.getElementById('layer-preset');
   const modelVersionInput = document.getElementById('model-version');
   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', 'saliencyMode', 'layerPreset', 'modelVersion', 'apiUrl'], (res) => {
     if (res.threshold !== undefined) {
       thresholdInput.value = res.threshold;
       thresholdVal.textContent = parseFloat(res.threshold).toFixed(2);
     if (res.saliencyMode !== undefined) {
       saliencyModeInput.value = res.saliencyMode;
     }
+    if (res.layerPreset !== undefined) {
+      layerPresetInput.value = res.layerPreset;
+    }
     if (res.modelVersion !== undefined) {
       modelVersionInput.value = res.modelVersion;
     }
       gradientMode: gradientModeInput.checked,
       preprompt: prepromptInput.value.trim(),
       saliencyMode: saliencyModeInput.value,
+      layerPreset: layerPresetInput.value,
       modelVersion: modelVersionInput.value,
       apiUrl: apiUrlInput.value.trim().replace(/\/$/, '') // Remove trailing slash
     };

main.py CHANGED Viewed

@@ -22,20 +22,23 @@ app.add_middleware(
 app.mount("/static", StaticFiles(directory="static"), name="static")
 @app.get("/")
 def read_root():
     return RedirectResponse(url="/static/index.html")
 # --- SQLite Database Setup ---
 # Hugging Face Spaces make the /app directory read-only by default.
 # We must write the database to /data (if persistent storage is enabled) or /tmp.
 DB_DIR = "/data" if os.path.exists("/data") else "/tmp"
 DB_FILE = os.path.join(DB_DIR, "study.db")
 def init_db():
     conn = sqlite3.connect(DB_FILE)
     c = conn.cursor()
-    c.execute('''
         CREATE TABLE IF NOT EXISTS study_results (
             id INTEGER PRIMARY KEY AUTOINCREMENT,
             user_id TEXT,
@@ -46,19 +49,20 @@ def init_db():
             total_questions INTEGER,
             created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
         )
-    ''')
-    c.execute('''
         CREATE TABLE IF NOT EXISTS study_preferences (
             id INTEGER PRIMARY KEY AUTOINCREMENT,
             user_id TEXT,
             preference TEXT, -- "plain", "flowread", or "gradient"
             created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
         )
-    ''')
     conn.commit()
     conn.close()
 init_db()
 # --- Study Content ---
@@ -70,13 +74,8 @@ STUDY_TEXTS = [
         "questions": [
             {
                 "question": "Approximately how many neurons are in the human brain?",
-                "options": [
-                    "86 million",
-                    "86 billion",
-                    "100 trillion",
-                    "50 billion"
-                ],
-                "correct": 1
             },
             {
                 "question": "What is the term for the brain's ability to reorganize itself?",
@@ -84,13 +83,13 @@ STUDY_TEXTS = [
                     "Synaptic generation",
                     "Neurogenesis",
                     "Neuroplasticity",
-                    "Cognitive adaptation"
                 ],
-                "correct": 2
-            }
         ],
-        "flowread_html": "<span class=\"token highlighted\">The</span><span class=\"token highlighted\"> human</span><span class=\"token highlighted\"> brain</span><span class=\"token highlighted\"> is</span><span class=\"token highlighted\"> a</span><span class=\"token highlighted\"> marvel</span><span class=\"token\"> of</span><span class=\"token highlighted\"> biological</span><span class=\"token highlighted\"> engineering</span><span class=\"token highlighted\">,</span><span class=\"token highlighted\"> containing</span><span class=\"token\"> approximately</span><span class=\"token\"> </span><span class=\"token\">8</span><span class=\"token\">6</span><span class=\"token highlighted\"> billion</span><span class=\"token highlighted\"> neurons</span><span class=\"token highlighted\"> interconnected</span><span class=\"token highlighted\"> by</span><span class=\"token\"> tri</span><span class=\"token\">lli</span><span class=\"token\">ons</span><span class=\"token\"> of</span><span class=\"token highlighted\"> synapses</span><span class=\"token highlighted\">.</span><span class=\"token highlighted\"> These</span><span class=\"token highlighted\"> neural</span><span class=\"token highlighted\"> networks</span><span class=\"token\"> are</span><span class=\"token\"> responsible</span><span class=\"token highlighted\"> for</span><span class=\"token\"> everything</span><span class=\"token highlighted\"> from</span><span class=\"token highlighted\"> basic</span><span class=\"token highlighted\"> autonomic</span><span class=\"token highlighted\"> functions</span><span class=\"token highlighted\">,</span><span class=\"token highlighted\"> like</span><span class=\"token\"> breathing</span><span class=\"token\"> and</span><span class=\"token\"> heart</span><span class=\"token\"> rate</span><span class=\"token\">,</span><span class=\"token highlighted\"> to</span><span class=\"token\"> complex</span><span class=\"token highlighted\"> cognitive</span><span class=\"token\"> processes</span><span class=\"token\"> such</span><span class=\"token\"> as</span><span class=\"token highlighted\"> memory</span><span class=\"token highlighted\">,</span><span class=\"token\"> emotion</span><span class=\"token\">,</span><span class=\"token\"> and</span><span class=\"token highlighted\"> problem</span><span class=\"token highlighted\">-</span><span class=\"token highlighted\">solving</span><span class=\"token highlighted\">.</span><span class=\"token highlighted\"> Neurop</span><span class=\"token highlighted\">lastic</span><span class=\"token highlighted\">ity</span><span class=\"token highlighted\">,</span><span class=\"token highlighted\"> the</span><span class=\"token highlighted\"> brain</span><span class=\"token highlighted\">'</span><span class=\"token highlighted\">s</span><span class=\"token\"> ability</span><span class=\"token\"> to</span><span class=\"token highlighted\"> reorgan</span><span class=\"token highlighted\">ize</span><span class=\"token\"> itself</span><span class=\"token\"> by</span><span class=\"token\"> forming</span><span class=\"token\"> new</span><span class=\"token\"> neural</span><span class=\"token\"> connections</span><span class=\"token\"> throughout</span><span class=\"token highlighted\"> life</span><span class=\"token highlighted\">,</span><span class=\"token highlighted\"> allows</span><span class=\"token highlighted\"> humans</span><span class=\"token\"> to</span><span class=\"token highlighted\"> learn</span><span class=\"token\"> new</span><span class=\"token\"> skills</span><span class=\"token\">,</span><span class=\"token\"> recover</span><span class=\"token\"> from</span><span class=\"token\"> injuries</span><span class=\"token\">,</span><span class=\"token\"> and</span><span class=\"token\"> adapt</span><span class=\"token\"> to</span><span class=\"token\"> changing</span><span class=\"token highlighted\"> environments</span><span class=\"token highlighted\">.</span><span class=\"token\"> This</span><span class=\"token\"> extraordinary</span><span class=\"token highlighted\"> adaptability</span><span class=\"token\"> is</span><span class=\"token\"> what</span><span class=\"token\"> makes</span><span class=\"token\"> our</span><span class=\"token\"> species</span><span class=\"token\"> so</span><span class=\"token\"> resilient</span><span class=\"token\"> and</span><span class=\"token\"> capable</span><span class=\"token\"> of</span><span class=\"token\"> continuous</span><span class=\"token\"> intellectual</span><span class=\"token\"> growth</span><span class=\"token\">.</span>",
-        "flowread_gradient_html": "<span class=\"token\" style=\"opacity: 0.53; font-weight: 489;\">The</span><span class=\"token\" style=\"opacity: 0.56; font-weight: 506;\"> human</span><span class=\"token\" style=\"opacity: 1.00; font-weight: 800;\"> brain</span><span class=\"token\" style=\"opacity: 0.54; font-weight: 490;\"> is</span><span class=\"token\" style=\"opacity: 0.51; font-weight: 472;\"> a</span><span class=\"token\" style=\"opacity: 0.53; font-weight: 489;\"> marvel</span><span class=\"token\" style=\"opacity: 0.48; font-weight: 452;\"> of</span><span class=\"token\" style=\"opacity: 0.53; font-weight: 484;\"> biological</span><span class=\"token\" style=\"opacity: 0.55; font-weight: 498;\"> engineering</span><span class=\"token\" style=\"opacity: 0.55; font-weight: 498;\">,</span><span class=\"token\" style=\"opacity: 0.56; font-weight: 506;\"> containing</span><span class=\"token\" style=\"opacity: 0.48; font-weight: 455;\"> approximately</span><span class=\"token\" style=\"opacity: 0.48; font-weight: 455;\"> </span><span class=\"token\" style=\"opacity: 0.43; font-weight: 421;\">8</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 421;\">6</span><span class=\"token\" style=\"opacity: 0.50; font-weight: 469;\"> billion</span><span class=\"token\" style=\"opacity: 0.71; font-weight: 608;\"> neurons</span><span class=\"token\" style=\"opacity: 0.55; font-weight: 500;\"> interconnected</span><span class=\"token\" style=\"opacity: 0.53; font-weight: 484;\"> by</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 419;\"> tri</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 419;\">lli</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 419;\">ons</span><span class=\"token\" style=\"opacity: 0.42; font-weight: 413;\"> of</span><span class=\"token\" style=\"opacity: 0.72; font-weight: 613;\"> synapses</span><span class=\"token\" style=\"opacity: 0.72; font-weight: 613;\">.</span><span class=\"token\" style=\"opacity: 0.51; font-weight: 472;\"> These</span><span class=\"token\" style=\"opacity: 0.57; font-weight: 516;\"> neural</span><span class=\"token\" style=\"opacity: 0.57; font-weight: 515;\"> networks</span><span class=\"token\" style=\"opacity: 0.48; font-weight: 455;\"> are</span><span class=\"token\" style=\"opacity: 0.48; font-weight: 452;\"> responsible</span><span class=\"token\" style=\"opacity: 0.52; font-weight: 482;\"> for</span><span class=\"token\" style=\"opacity: 0.50; font-weight: 464;\"> everything</span><span class=\"token\" style=\"opacity: 0.59; font-weight: 529;\"> from</span><span class=\"token\" style=\"opacity: 0.51; font-weight: 474;\"> basic</span><span class=\"token\" style=\"opacity: 0.56; font-weight: 504;\"> autonomic</span><span class=\"token\" style=\"opacity: 0.52; font-weight: 482;\"> functions</span><span class=\"token\" style=\"opacity: 0.52; font-weight: 482;\">,</span><span class=\"token\" style=\"opacity: 0.52; font-weight: 481;\"> like</span><span class=\"token\" style=\"opacity: 0.50; font-weight: 466;\"> breathing</span><span class=\"token\" style=\"opacity: 0.47; font-weight: 444;\"> and</span><span class=\"token\" style=\"opacity: 0.44; font-weight: 424;\"> heart</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 435;\"> rate</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 435;\">,</span><span class=\"token\" style=\"opacity: 0.52; font-weight: 479;\"> to</span><span class=\"token\" style=\"opacity: 0.49; font-weight: 462;\"> complex</span><span class=\"token\" style=\"opacity: 0.53; font-weight: 487;\"> cognitive</span><span class=\"token\" style=\"opacity: 0.48; font-weight: 451;\"> processes</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 432;\"> such</span><span class=\"token\" style=\"opacity: 0.48; font-weight: 451;\"> as</span><span class=\"token\" style=\"opacity: 0.51; font-weight: 474;\"> memory</span><span class=\"token\" style=\"opacity: 0.51; font-weight: 474;\">,</span><span class=\"token\" style=\"opacity: 0.48; font-weight: 450;\"> emotion</span><span class=\"token\" style=\"opacity: 0.48; font-weight: 450;\">,</span><span class=\"token\" style=\"opacity: 0.44; font-weight: 428;\"> and</span><span class=\"token\" style=\"opacity: 0.64; font-weight: 559;\"> problem</span><span class=\"token\" style=\"opacity: 0.64; font-weight: 559;\">-</span><span class=\"token\" style=\"opacity: 0.64; font-weight: 559;\">solving</span><span class=\"token\" style=\"opacity: 0.64; font-weight: 559;\">.</span><span class=\"token\" style=\"opacity: 0.68; font-weight: 587;\"> Neurop</span><span class=\"token\" style=\"opacity: 0.68; font-weight: 587;\">lastic</span><span class=\"token\" style=\"opacity: 0.68; font-weight: 587;\">ity</span><span class=\"token\" style=\"opacity: 0.68; font-weight: 587;\">,</span><span class=\"token\" style=\"opacity: 0.50; font-weight: 469;\"> the</span><span class=\"token\" style=\"opacity: 0.59; font-weight: 527;\"> brain</span><span class=\"token\" style=\"opacity: 0.59; font-weight: 527;\">'</span><span class=\"token\" style=\"opacity: 0.59; font-weight: 527;\">s</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 434;\"> ability</span><span class=\"token\" style=\"opacity: 0.50; font-weight: 464;\"> to</span><span class=\"token\" style=\"opacity: 0.50; font-weight: 469;\"> reorgan</span><span class=\"token\" style=\"opacity: 0.50; font-weight: 469;\">ize</span><span class=\"token\" style=\"opacity: 0.47; font-weight: 444;\"> itself</span><span class=\"token\" style=\"opacity: 0.48; font-weight: 454;\"> by</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 434;\"> forming</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 431;\"> new</span><span class=\"token\" style=\"opacity: 0.44; font-weight: 426;\"> neural</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 433;\"> connections</span><span class=\"token\" style=\"opacity: 0.44; font-weight: 426;\"> throughout</span><span class=\"token\" style=\"opacity: 0.52; font-weight: 480;\"> life</span><span class=\"token\" style=\"opacity: 0.52; font-weight: 480;\">,</span><span class=\"token\" style=\"opacity: 0.53; font-weight: 485;\"> allows</span><span class=\"token\" style=\"opacity: 0.54; font-weight: 493;\"> humans</span><span class=\"token\" style=\"opacity: 0.49; font-weight: 463;\"> to</span><span class=\"token\" style=\"opacity: 0.52; font-weight: 482;\"> learn</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 433;\"> new</span><span class=\"token\" style=\"opacity: 0.48; font-weight: 454;\"> skills</span><span class=\"token\" style=\"opacity: 0.48; font-weight: 454;\">,</span><span class=\"token\" style=\"opacity: 0.47; font-weight: 449;\"> recover</span><span class=\"token\" style=\"opacity: 0.44; font-weight: 429;\"> from</span><span class=\"token\" style=\"opacity: 0.46; font-weight: 438;\"> injuries</span><span class=\"token\" style=\"opacity: 0.46; font-weight: 438;\">,</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 433;\"> and</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 436;\"> adapt</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 421;\"> to</span><span class=\"token\" style=\"opacity: 0.42; font-weight: 414;\"> changing</span><span class=\"token\" style=\"opacity: 0.53; font-weight: 485;\"> environments</span><span class=\"token\" style=\"opacity: 0.53; font-weight: 485;\">.</span><span class=\"token\" style=\"opacity: 0.44; font-weight: 429;\"> This</span><span class=\"token\" style=\"opacity: 0.46; font-weight: 442;\"> extraordinary</span><span class=\"token\" style=\"opacity: 0.51; font-weight: 472;\"> adaptability</span><span class=\"token\" style=\"opacity: 0.44; font-weight: 428;\"> is</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 435;\"> what</span><span class=\"token\" style=\"opacity: 0.46; font-weight: 443;\"> makes</span><span class=\"token\" style=\"opacity: 0.44; font-weight: 428;\"> our</span><span class=\"token\" style=\"opacity: 0.50; font-weight: 468;\"> species</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 430;\"> so</span><span class=\"token\" style=\"opacity: 0.47; font-weight: 443;\"> resilient</span><span class=\"token\" style=\"opacity: 0.44; font-weight: 427;\"> and</span><span class=\"token\" style=\"opacity: 0.42; font-weight: 412;\"> capable</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 422;\"> of</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 420;\"> continuous</span><span class=\"token\" style=\"opacity: 0.42; font-weight: 413;\"> intellectual</span><span class=\"token\" style=\"opacity: 0.41; font-weight: 403;\"> growth</span><span class=\"token\" style=\"opacity: 0.41; font-weight: 403;\">.</span>"
     },
     {
         "id": 2,
@@ -99,13 +98,8 @@ STUDY_TEXTS = [
         "questions": [
             {
                 "question": "Where did the Industrial Revolution begin?",
-                "options": [
-                    "United States",
-                    "France",
-                    "Germany",
-                    "Britain"
-                ],
-                "correct": 3
             },
             {
                 "question": "Which invention dramatically increased factory efficiency?",
@@ -113,13 +107,13 @@ STUDY_TEXTS = [
                     "The cotton gin",
                     "The telegraph",
                     "The steam engine",
-                    "The assembly line"
                 ],
-                "correct": 2
-            }
         ],
-        "flowread_html": "<span class=\"token highlighted\">The</span><span class=\"token highlighted\"> Industrial</span><span class=\"token highlighted\"> Revolution</span><span class=\"token highlighted\">,</span><span class=\"token highlighted\"> which</span><span class=\"token highlighted\"> began</span><span class=\"token\"> in</span><span class=\"token highlighted\"> Britain</span><span class=\"token\"> in</span><span class=\"token\"> the</span><span class=\"token\"> late</span><span class=\"token\"> </span><span class=\"token highlighted\">1</span><span class=\"token highlighted\">8</span><span class=\"token highlighted\">th</span><span class=\"token highlighted\"> century</span><span class=\"token highlighted\">,</span><span class=\"token highlighted\"> marked</span><span class=\"token\"> a</span><span class=\"token highlighted\"> profound</span><span class=\"token\"> turning</span><span class=\"token highlighted\"> point</span><span class=\"token\"> in</span><span class=\"token highlighted\"> human</span><span class=\"token highlighted\"> history</span><span class=\"token highlighted\">.</span><span class=\"token highlighted\"> It</span><span class=\"token highlighted\"> initiated</span><span class=\"token\"> the</span><span class=\"token\"> transition</span><span class=\"token highlighted\"> from</span><span class=\"token highlighted\"> agrarian</span><span class=\"token highlighted\">,</span><span class=\"token\"> handic</span><span class=\"token\">raft</span><span class=\"token highlighted\"> economies</span><span class=\"token highlighted\"> to</span><span class=\"token highlighted\"> industry</span><span class=\"token\"> and</span><span class=\"token highlighted\"> machine</span><span class=\"token highlighted\"> manufacturing</span><span class=\"token highlighted\">.</span><span class=\"token highlighted\"> The</span><span class=\"token highlighted\"> invention</span><span class=\"token highlighted\"> of</span><span class=\"token\"> the</span><span class=\"token highlighted\"> steam</span><span class=\"token highlighted\"> engine</span><span class=\"token highlighted\">,</span><span class=\"token\"> pioneered</span><span class=\"token highlighted\"> by</span><span class=\"token\"> figures</span><span class=\"token\"> like</span><span class=\"token\"> James</span><span class=\"token\"> Watt</span><span class=\"token\">,</span><span class=\"token highlighted\"> dramatically</span><span class=\"token highlighted\"> increased</span><span class=\"token\"> the</span><span class=\"token\"> efficiency</span><span class=\"token\"> of</span><span class=\"token highlighted\"> factories</span><span class=\"token\"> and</span><span class=\"token highlighted\"> transportation</span><span class=\"token highlighted\">,</span><span class=\"token highlighted\"> revolution</span><span class=\"token highlighted\">izing</span><span class=\"token\"> the</span><span class=\"token\"> textile</span><span class=\"token\"> industry</span><span class=\"token\"> and</span><span class=\"token\"> leading</span><span class=\"token\"> to</span><span class=\"token\"> the</span><span class=\"token\"> expansion</span><span class=\"token\"> of</span><span class=\"token highlighted\"> railways</span><span class=\"token highlighted\">.</span><span class=\"token\"> This</span><span class=\"token highlighted\"> era</span><span class=\"token highlighted\"> brought</span><span class=\"token\"> about</span><span class=\"token\"> unprecedented</span><span class=\"token highlighted\"> economic</span><span class=\"token highlighted\"> growth</span><span class=\"token\"> and</span><span class=\"token highlighted\"> urbanization</span><span class=\"token highlighted\">,</span><span class=\"token\"> fundamentally</span><span class=\"token highlighted\"> altering</span><span class=\"token\"> social</span><span class=\"token\"> structures</span><span class=\"token\"> and</span><span class=\"token\"> paving</span><span class=\"token\"> the</span><span class=\"token\"> way</span><span class=\"token\"> for</span><span class=\"token\"> the</span><span class=\"token\"> modern</span><span class=\"token\"> capitalist</span><span class=\"token\"> system</span><span class=\"token\">,</span><span class=\"token\"> despite</span><span class=\"token\"> also</span><span class=\"token\"> causing</span><span class=\"token\"> significant</span><span class=\"token\"> social</span><span class=\"token\"> inequalities</span><span class=\"token\"> and</span><span class=\"token\"> poor</span><span class=\"token\"> working</span><span class=\"token\"> conditions</span><span class=\"token\"> initially</span><span class=\"token\">.</span>",
-        "flowread_gradient_html": "<span class=\"token\" style=\"opacity: 0.49; font-weight: 462;\">The</span><span class=\"token\" style=\"opacity: 0.59; font-weight: 524;\"> Industrial</span><span class=\"token\" style=\"opacity: 1.00; font-weight: 800;\"> Revolution</span><span class=\"token\" style=\"opacity: 1.00; font-weight: 800;\">,</span><span class=\"token\" style=\"opacity: 0.48; font-weight: 456;\"> which</span><span class=\"token\" style=\"opacity: 0.50; font-weight: 467;\"> began</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 430;\"> in</span><span class=\"token\" style=\"opacity: 0.58; font-weight: 519;\"> Britain</span><span class=\"token\" style=\"opacity: 0.44; font-weight: 429;\"> in</span><span class=\"token\" style=\"opacity: 0.42; font-weight: 410;\"> the</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 418;\"> late</span><span class=\"token\" style=\"opacity: 0.42; font-weight: 415;\"> </span><span class=\"token\" style=\"opacity: 0.49; font-weight: 457;\">1</span><span class=\"token\" style=\"opacity: 0.49; font-weight: 457;\">8</span><span class=\"token\" style=\"opacity: 0.49; font-weight: 457;\">th</span><span class=\"token\" style=\"opacity: 0.50; font-weight: 467;\"> century</span><span class=\"token\" style=\"opacity: 0.50; font-weight: 467;\">,</span><span class=\"token\" style=\"opacity: 0.49; font-weight: 460;\"> marked</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 422;\"> a</span><span class=\"token\" style=\"opacity: 0.46; font-weight: 439;\"> profound</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 418;\"> turning</span><span class=\"token\" style=\"opacity: 0.46; font-weight: 440;\"> point</span><span class=\"token\" style=\"opacity: 0.44; font-weight: 423;\"> in</span><span class=\"token\" style=\"opacity: 0.47; font-weight: 447;\"> human</span><span class=\"token\" style=\"opacity: 0.57; font-weight: 511;\"> history</span><span class=\"token\" style=\"opacity: 0.57; font-weight: 511;\">.</span><span class=\"token\" style=\"opacity: 0.48; font-weight: 456;\"> It</span><span class=\"token\" style=\"opacity: 0.48; font-weight: 450;\"> initiated</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 431;\"> the</span><span class=\"token\" style=\"opacity: 0.44; font-weight: 426;\"> transition</span><span class=\"token\" style=\"opacity: 0.47; font-weight: 444;\"> from</span><span class=\"token\" style=\"opacity: 0.50; font-weight: 469;\"> agrarian</span><span class=\"token\" style=\"opacity: 0.50; font-weight: 469;\">,</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 433;\"> handic</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 433;\">raft</span><span class=\"token\" style=\"opacity: 0.48; font-weight: 451;\"> economies</span><span class=\"token\" style=\"opacity: 0.48; font-weight: 452;\"> to</span><span class=\"token\" style=\"opacity: 0.53; font-weight: 489;\"> industry</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 432;\"> and</span><span class=\"token\" style=\"opacity: 0.47; font-weight: 444;\"> machine</span><span class=\"token\" style=\"opacity: 0.55; font-weight: 498;\"> manufacturing</span><span class=\"token\" style=\"opacity: 0.55; font-weight: 498;\">.</span><span class=\"token\" style=\"opacity: 0.49; font-weight: 461;\"> The</span><span class=\"token\" style=\"opacity: 0.46; font-weight: 442;\"> invention</span><span class=\"token\" style=\"opacity: 0.46; font-weight: 440;\"> of</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 417;\"> the</span><span class=\"token\" style=\"opacity: 0.50; font-weight: 465;\"> steam</span><span class=\"token\" style=\"opacity: 0.52; font-weight: 483;\"> engine</span><span class=\"token\" style=\"opacity: 0.52; font-weight: 483;\">,</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 434;\"> pioneered</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 436;\"> by</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 421;\"> figures</span><span class=\"token\" style=\"opacity: 0.44; font-weight: 426;\"> like</span><span class=\"token\" style=\"opacity: 0.42; font-weight: 414;\"> James</span><span class=\"token\" style=\"opacity: 0.44; font-weight: 428;\"> Watt</span><span class=\"token\" style=\"opacity: 0.44; font-weight: 428;\">,</span><span class=\"token\" style=\"opacity: 0.46; font-weight: 437;\"> dramatically</span><span class=\"token\" style=\"opacity: 0.47; font-weight: 445;\"> increased</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 421;\"> the</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 432;\"> efficiency</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 421;\"> of</span><span class=\"token\" style=\"opacity: 0.50; font-weight: 467;\"> factories</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 432;\"> and</span><span class=\"token\" style=\"opacity: 0.46; font-weight: 442;\"> transportation</span><span class=\"token\" style=\"opacity: 0.46; font-weight: 442;\">,</span><span class=\"token\" style=\"opacity: 0.47; font-weight: 446;\"> revolution</span><span class=\"token\" style=\"opacity: 0.47; font-weight: 446;\">izing</span><span class=\"token\" style=\"opacity: 0.42; font-weight: 415;\"> the</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 436;\"> textile</span><span class=\"token\" style=\"opacity: 0.44; font-weight: 428;\"> industry</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 433;\"> and</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 416;\"> leading</span><span class=\"token\" style=\"opacity: 0.44; font-weight: 425;\"> to</span><span class=\"token\" style=\"opacity: 0.41; font-weight: 409;\"> the</span><span class=\"token\" style=\"opacity: 0.42; font-weight: 413;\"> expansion</span><span class=\"token\" style=\"opacity: 0.41; font-weight: 407;\"> of</span><span class=\"token\" style=\"opacity: 0.50; font-weight: 468;\"> railways</span><span class=\"token\" style=\"opacity: 0.50; font-weight: 468;\">.</span><span class=\"token\" style=\"opacity: 0.44; font-weight: 423;\"> This</span><span class=\"token\" style=\"opacity: 0.48; font-weight: 454;\"> era</span><span class=\"token\" style=\"opacity: 0.47; font-weight: 447;\"> brought</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 418;\"> about</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 434;\"> unprecedented</span><span class=\"token\" style=\"opacity: 0.46; font-weight: 438;\"> economic</span><span class=\"token\" style=\"opacity: 0.46; font-weight: 437;\"> growth</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 431;\"> and</span><span class=\"token\" style=\"opacity: 0.47; font-weight: 449;\"> urbanization</span><span class=\"token\" style=\"opacity: 0.47; font-weight: 449;\">,</span><span class=\"token\" style=\"opacity: 0.44; font-weight: 424;\"> fundamentally</span><span class=\"token\" style=\"opacity: 0.46; font-weight: 441;\"> altering</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 432;\"> social</span><span class=\"token\" style=\"opacity: 0.44; font-weight: 427;\"> structures</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 432;\"> and</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 419;\"> paving</span><span class=\"token\" style=\"opacity: 0.41; font-weight: 407;\"> the</span><span class=\"token\" style=\"opacity: 0.42; font-weight: 410;\"> way</span><span class=\"token\" style=\"opacity: 0.44; font-weight: 423;\"> for</span><span class=\"token\" style=\"opacity: 0.41; font-weight: 409;\"> the</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 422;\"> modern</span><span class=\"token\" style=\"opacity: 0.44; font-weight: 429;\"> capitalist</span><span class=\"token\" style=\"opacity: 0.42; font-weight: 415;\"> system</span><span class=\"token\" style=\"opacity: 0.42; font-weight: 415;\">,</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 432;\"> despite</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 417;\"> also</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 431;\"> causing</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 419;\"> significant</span><span class=\"token\" style=\"opacity: 0.42; font-weight: 416;\"> social</span><span class=\"token\" style=\"opacity: 0.44; font-weight: 429;\"> inequalities</span><span class=\"token\" style=\"opacity: 0.42; font-weight: 415;\"> and</span><span class=\"token\" style=\"opacity: 0.42; font-weight: 414;\"> poor</span><span class=\"token\" style=\"opacity: 0.41; font-weight: 407;\"> working</span><span class=\"token\" style=\"opacity: 0.41; font-weight: 406;\"> conditions</span><span class=\"token\" style=\"opacity: 0.41; font-weight: 403;\"> initially</span><span class=\"token\" style=\"opacity: 0.41; font-weight: 403;\">.</span>"
     },
     {
         "id": 3,
@@ -128,13 +122,8 @@ STUDY_TEXTS = [
         "questions": [
             {
                 "question": "What spectrum does the James Webb Space Telescope primarily operate in?",
-                "options": [
-                    "Ultraviolet",
-                    "X-ray",
-                    "Infrared",
-                    "Visible light"
-                ],
-                "correct": 2
             },
             {
                 "question": "Where does the telescope orbit to stay cold?",
@@ -142,19 +131,22 @@ STUDY_TEXTS = [
                     "Low Earth Orbit",
                     "The Moon's orbit",
                     "The first Lagrange point",
-                    "The second Lagrange point"
                 ],
-                "correct": 3
-            }
         ],
-        "flowread_html": "<span class=\"token highlighted\">The</span><span class=\"token\"> James</span><span class=\"token highlighted\"> Webb</span><span class=\"token highlighted\"> Space</span><span class=\"token highlighted\"> Telescope</span><span class=\"token highlighted\"> is</span><span class=\"token highlighted\"> the</span><span class=\"token highlighted\"> largest</span><span class=\"token\"> and</span><span class=\"token\"> most</span><span class=\"token highlighted\"> powerful</span><span class=\"token highlighted\"> space</span><span class=\"token highlighted\"> telescope</span><span class=\"token\"> ever</span><span class=\"token highlighted\"> built</span><span class=\"token highlighted\">.</span><span class=\"token highlighted\"> Launched</span><span class=\"token\"> in</span><span class=\"token\"> </span><span class=\"token highlighted\">2</span><span class=\"token highlighted\">0</span><span class=\"token highlighted\">2</span><span class=\"token highlighted\">1</span><span class=\"token highlighted\">,</span><span class=\"token highlighted\"> it</span><span class=\"token highlighted\"> operates</span><span class=\"token\"> primarily</span><span class=\"token\"> in</span><span class=\"token\"> the</span><span class=\"token highlighted\"> infrared</span><span class=\"token highlighted\"> spectrum</span><span class=\"token highlighted\">,</span><span class=\"token highlighted\"> allowing</span><span class=\"token\"> it</span><span class=\"token\"> to</span><span class=\"token\"> peer</span><span class=\"token\"> through</span><span class=\"token\"> dense</span><span class=\"token highlighted\"> cosmic</span><span class=\"token\"> dust</span><span class=\"token\"> and</span><span class=\"token highlighted\"> observe</span><span class=\"token\"> the</span><span class=\"token highlighted\"> universe</span><span class=\"token highlighted\">'</span><span class=\"token highlighted\">s</span><span class=\"token\"> most</span><span class=\"token\"> distant</span><span class=\"token\">,</span><span class=\"token\"> early</span><span class=\"token highlighted\"> galaxies</span><span class=\"token highlighted\">.</span><span class=\"token highlighted\"> Unlike</span><span class=\"token\"> its</span><span class=\"token\"> predecessor</span><span class=\"token\">,</span><span class=\"token highlighted\"> Hubble</span><span class=\"token highlighted\">,</span><span class=\"token highlighted\"> JW</span><span class=\"token highlighted\">ST</span><span class=\"token highlighted\"> orbits</span><span class=\"token\"> the</span><span class=\"token highlighted\"> Sun</span><span class=\"token highlighted\"> at</span><span class=\"token\"> the</span><span class=\"token\"> second</span><span class=\"token highlighted\"> Lagrange</span><span class=\"token highlighted\"> point</span><span class=\"token highlighted\">,</span><span class=\"token highlighted\"> keeping</span><span class=\"token\"> it</span><span class=\"token\"> constantly</span><span class=\"token highlighted\"> shielded</span><span class=\"token highlighted\"> from</span><span class=\"token\"> the</span><span class=\"token highlighted\"> Sun</span><span class=\"token highlighted\">'</span><span class=\"token highlighted\">s</span><span class=\"token\"> heat</span><span class=\"token\"> and</span><span class=\"token\"> light</span><span class=\"token\"> by</span><span class=\"token\"> its</span><span class=\"token\"> massive</span><span class=\"token highlighted\"> sun</span><span class=\"token highlighted\">shield</span><span class=\"token highlighted\">.</span><span class=\"token\"> This</span><span class=\"token\"> incredibly</span><span class=\"token highlighted\"> cold</span><span class=\"token\"> environment</span><span class=\"token\"> is</span><span class=\"token\"> necessary</span><span class=\"token\"> to</span><span class=\"token highlighted\"> prevent</span><span class=\"token\"> the</span><span class=\"token highlighted\"> telescope</span><span class=\"token highlighted\">'</span><span class=\"token highlighted\">s</span><span class=\"token\"> own</span><span class=\"token\"> infrared</span><span class=\"token\"> emissions</span><span class=\"token\"> from</span><span class=\"token\"> interfering</span><span class=\"token\"> with</span><span class=\"token\"> its</span><span class=\"token\"> highly</span><span class=\"token\"> sensitive</span><span class=\"token\"> observations</span><span class=\"token\"> of</span><span class=\"token\"> ex</span><span class=\"token\">oplan</span><span class=\"token\">et</span><span class=\"token\"> atmospheres</span><span class=\"token\"> and</span><span class=\"token\"> star</span><span class=\"token\"> formation</span><span class=\"token\">.</span>",
-        "flowread_gradient_html": "<span class=\"token\" style=\"opacity: 0.49; font-weight: 458;\">The</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 435;\"> James</span><span class=\"token\" style=\"opacity: 1.00; font-weight: 800;\"> Webb</span><span class=\"token\" style=\"opacity: 0.59; font-weight: 523;\"> Space</span><span class=\"token\" style=\"opacity: 0.75; font-weight: 632;\"> Telescope</span><span class=\"token\" style=\"opacity: 0.52; font-weight: 478;\"> is</span><span class=\"token\" style=\"opacity: 0.47; font-weight: 447;\"> the</span><span class=\"token\" style=\"opacity: 0.50; font-weight: 463;\"> largest</span><span class=\"token\" style=\"opacity: 0.44; font-weight: 423;\"> and</span><span class=\"token\" style=\"opacity: 0.42; font-weight: 412;\"> most</span><span class=\"token\" style=\"opacity: 0.47; font-weight: 443;\"> powerful</span><span class=\"token\" style=\"opacity: 0.46; font-weight: 441;\"> space</span><span class=\"token\" style=\"opacity: 0.54; font-weight: 491;\"> telescope</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 422;\"> ever</span><span class=\"token\" style=\"opacity: 0.56; font-weight: 503;\"> built</span><span class=\"token\" style=\"opacity: 0.56; font-weight: 503;\">.</span><span class=\"token\" style=\"opacity: 0.51; font-weight: 475;\"> Launched</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 421;\"> in</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 418;\"> </span><span class=\"token\" style=\"opacity: 0.50; font-weight: 463;\">2</span><span class=\"token\" style=\"opacity: 0.50; font-weight: 463;\">0</span><span class=\"token\" style=\"opacity: 0.50; font-weight: 463;\">2</span><span class=\"token\" style=\"opacity: 0.50; font-weight: 463;\">1</span><span class=\"token\" style=\"opacity: 0.50; font-weight: 463;\">,</span><span class=\"token\" style=\"opacity: 0.48; font-weight: 452;\"> it</span><span class=\"token\" style=\"opacity: 0.47; font-weight: 449;\"> operates</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 433;\"> primarily</span><span class=\"token\" style=\"opacity: 0.44; font-weight: 429;\"> in</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 418;\"> the</span><span class=\"token\" style=\"opacity: 0.57; font-weight: 510;\"> infrared</span><span class=\"token\" style=\"opacity: 0.47; font-weight: 446;\"> spectrum</span><span class=\"token\" style=\"opacity: 0.47; font-weight: 446;\">,</span><span class=\"token\" style=\"opacity: 0.48; font-weight: 453;\"> allowing</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 420;\"> it</span><span class=\"token\" style=\"opacity: 0.44; font-weight: 423;\"> to</span><span class=\"token\" style=\"opacity: 0.46; font-weight: 437;\"> peer</span><span class=\"token\" style=\"opacity: 0.46; font-weight: 437;\"> through</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 430;\"> dense</span><span class=\"token\" style=\"opacity: 0.46; font-weight: 441;\"> cosmic</span><span class=\"token\" style=\"opacity: 0.46; font-weight: 438;\"> dust</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 431;\"> and</span><span class=\"token\" style=\"opacity: 0.49; font-weight: 458;\"> observe</span><span class=\"token\" style=\"opacity: 0.46; font-weight: 439;\"> the</span><span class=\"token\" style=\"opacity: 0.48; font-weight: 451;\"> universe</span><span class=\"token\" style=\"opacity: 0.48; font-weight: 451;\">'</span><span class=\"token\" style=\"opacity: 0.48; font-weight: 451;\">s</span><span class=\"token\" style=\"opacity: 0.42; font-weight: 414;\"> most</span><span class=\"token\" style=\"opacity: 0.46; font-weight: 436;\"> distant</span><span class=\"token\" style=\"opacity: 0.46; font-weight: 436;\">,</span><span class=\"token\" style=\"opacity: 0.42; font-weight: 414;\"> early</span><span class=\"token\" style=\"opacity: 0.52; font-weight: 478;\"> galaxies</span><span class=\"token\" style=\"opacity: 0.52; font-weight: 478;\">.</span><span class=\"token\" style=\"opacity: 0.47; font-weight: 445;\"> Unlike</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 419;\"> its</span><span class=\"token\" style=\"opacity: 0.46; font-weight: 437;\"> predecessor</span><span class=\"token\" style=\"opacity: 0.46; font-weight: 437;\">,</span><span class=\"token\" style=\"opacity: 0.50; font-weight: 467;\"> Hubble</span><span class=\"token\" style=\"opacity: 0.50; font-weight: 467;\">,</span><span class=\"token\" style=\"opacity: 0.50; font-weight: 468;\"> JW</span><span class=\"token\" style=\"opacity: 0.50; font-weight: 468;\">ST</span><span class=\"token\" style=\"opacity: 0.55; font-weight: 496;\"> orbits</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 430;\"> the</span><span class=\"token\" style=\"opacity: 0.53; font-weight: 489;\"> Sun</span><span class=\"token\" style=\"opacity: 0.46; font-weight: 441;\"> at</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 417;\"> the</span><span class=\"token\" style=\"opacity: 0.42; font-weight: 415;\"> second</span><span class=\"token\" style=\"opacity: 0.49; font-weight: 456;\"> Lagrange</span><span class=\"token\" style=\"opacity: 0.47; font-weight: 446;\"> point</span><span class=\"token\" style=\"opacity: 0.47; font-weight: 446;\">,</span><span class=\"token\" style=\"opacity: 0.47; font-weight: 444;\"> keeping</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 431;\"> it</span><span class=\"token\" style=\"opacity: 0.44; font-weight: 428;\"> constantly</span><span class=\"token\" style=\"opacity: 0.49; font-weight: 457;\"> shielded</span><span class=\"token\" style=\"opacity: 0.47; font-weight: 445;\"> from</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 419;\"> the</span><span class=\"token\" style=\"opacity: 0.47; font-weight: 446;\"> Sun</span><span class=\"token\" style=\"opacity: 0.47; font-weight: 446;\">'</span><span class=\"token\" style=\"opacity: 0.47; font-weight: 446;\">s</span><span class=\"token\" style=\"opacity: 0.46; font-weight: 438;\"> heat</span><span class=\"token\" style=\"opacity: 0.44; font-weight: 423;\"> and</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 420;\"> light</span><span class=\"token\" style=\"opacity: 0.44; font-weight: 429;\"> by</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 421;\"> its</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 418;\"> massive</span><span class=\"token\" style=\"opacity: 0.50; font-weight: 465;\"> sun</span><span class=\"token\" style=\"opacity: 0.50; font-weight: 465;\">shield</span><span class=\"token\" style=\"opacity: 0.50; font-weight: 465;\">.</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 422;\"> This</span><span class=\"token\" style=\"opacity: 0.42; font-weight: 415;\"> incredibly</span><span class=\"token\" style=\"opacity: 0.46; font-weight: 440;\"> cold</span><span class=\"token\" style=\"opacity: 0.46; font-weight: 439;\"> environment</span><span class=\"token\" style=\"opacity: 0.42; font-weight: 414;\"> is</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 422;\"> necessary</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 431;\"> to</span><span class=\"token\" style=\"opacity: 0.47; font-weight: 446;\"> prevent</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 420;\"> the</span><span class=\"token\" style=\"opacity: 0.47; font-weight: 445;\"> telescope</span><span class=\"token\" style=\"opacity: 0.47; font-weight: 445;\">'</span><span class=\"token\" style=\"opacity: 0.47; font-weight: 445;\">s</span><span class=\"token\" style=\"opacity: 0.44; font-weight: 429;\"> own</span><span class=\"token\" style=\"opacity: 0.44; font-weight: 429;\"> infrared</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 436;\"> emissions</span><span class=\"token\" style=\"opacity: 0.42; font-weight: 414;\"> from</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 417;\"> interfering</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 419;\"> with</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 416;\"> its</span><span class=\"token\" style=\"opacity: 0.41; font-weight: 407;\"> highly</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 417;\"> sensitive</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 421;\"> observations</span><span class=\"token\" style=\"opacity: 0.44; font-weight: 429;\"> of</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 430;\"> ex</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 430;\">oplan</span><span class=\"token\" style=\"opacity: 0.45; font-weight: 430;\">et</span><span class=\"token\" style=\"opacity: 0.43; font-weight: 418;\"> atmospheres</span><span class=\"token\" style=\"opacity: 0.42; font-weight: 413;\"> and</span><span class=\"token\" style=\"opacity: 0.41; font-weight: 408;\"> star</span><span class=\"token\" style=\"opacity: 0.41; font-weight: 403;\"> formation</span><span class=\"token\" style=\"opacity: 0.41; font-weight: 403;\">.</span>"
-    }
-]# --- Study API Endpoints ---
 @app.get("/api/study/texts")
 def get_study_texts():
     return {"texts": STUDY_TEXTS}
 class StudySubmission(BaseModel):
     user_id: str
     text_id: int
@@ -163,79 +155,98 @@ class StudySubmission(BaseModel):
     score: int
     total_questions: int
 class StudyPreference(BaseModel):
     user_id: str
     preference: str
 @app.post("/api/study/preference")
 def submit_study_preference(submission: StudyPreference):
     conn = sqlite3.connect(DB_FILE)
     c = conn.cursor()
     c.execute(
         "INSERT INTO study_preferences (user_id, preference) VALUES (?, ?)",
-        (submission.user_id, submission.preference)
     )
     conn.commit()
     conn.close()
     return {"status": "success"}
 @app.post("/api/study/submit")
 def submit_study_result(submission: StudySubmission):
     conn = sqlite3.connect(DB_FILE)
     c = conn.cursor()
     c.execute(
         "INSERT INTO study_results (user_id, text_id, condition, reading_time_ms, score, total_questions) VALUES (?, ?, ?, ?, ?, ?)",
-        (submission.user_id, submission.text_id, submission.condition, submission.reading_time_ms, submission.score, submission.total_questions)
     )
     conn.commit()
     conn.close()
     return {"status": "success"}
 @app.get("/api/study/stats")
 def get_study_stats():
     conn = sqlite3.connect(DB_FILE)
     c = conn.cursor()
     # Calculate stats for plain
-    c.execute("SELECT AVG(reading_time_ms), AVG(CAST(score AS FLOAT) / total_questions) * 100, COUNT(*) FROM study_results WHERE condition = 'plain'")
     plain_stats = c.fetchone()
     # Calculate stats for flowread
-    c.execute("SELECT AVG(reading_time_ms), AVG(CAST(score AS FLOAT) / total_questions) * 100, COUNT(*) FROM study_results WHERE condition = 'flowread'")
     flowread_stats = c.fetchone()
     # Calculate stats for gradient
-    c.execute("SELECT AVG(reading_time_ms), AVG(CAST(score AS FLOAT) / total_questions) * 100, COUNT(*) FROM study_results WHERE condition = 'gradient'")
     gradient_stats = c.fetchone()
     # Calculate preferences
     c.execute("SELECT preference, COUNT(*) FROM study_preferences GROUP BY preference")
     preferences = dict(c.fetchall())
     conn.close()
     return {
         "plain": {
             "avg_reading_time_ms": plain_stats[0] or 0,
             "avg_accuracy_percent": plain_stats[1] or 0,
-            "sample_size": plain_stats[2]
         },
         "flowread": {
             "avg_reading_time_ms": flowread_stats[0] or 0,
             "avg_accuracy_percent": flowread_stats[1] or 0,
-            "sample_size": flowread_stats[2]
         },
         "gradient": {
             "avg_reading_time_ms": gradient_stats[0] or 0,
             "avg_accuracy_percent": gradient_stats[1] or 0,
-            "sample_size": gradient_stats[2]
         },
-        "preferences": preferences
     }
 import sys
 import re
 class StderrProgressInterceptor:
     def __init__(self, original):
         self.original = original
@@ -244,68 +255,83 @@ class StderrProgressInterceptor:
     def write(self, s):
         self.original.write(s)
-        match = re.search(r'(\d+)%\|', s)
         if match and self.active_model:
             pct = match.group(1)
             self.current_progress = f"{pct}%"
             # Update the global status explicitly so the API returns it immediately
             model_status[self.active_model] = f"downloading: {self.current_progress}"
     def flush(self):
         self.original.flush()
 stderr_interceptor = StderrProgressInterceptor(sys.stderr)
 sys.stderr = stderr_interceptor
 # --- Saliency API (Existing) ---
 models = {}
 tokenizers = {}
-model_status = {
-    "2b": "unloaded",
-    "27b-4a": "unloaded"
-}
-device = torch.device("cuda" if torch.cuda.is_available() else "mps" if torch.backends.mps.is_available() else "cpu")
 hf_token = os.environ.get("HF_TOKEN")
 def load_model(model_name: str):
     if model_name in models:
         return models[model_name], tokenizers[model_name]
     print(f"Loading {model_name} on {device}...")
     model_status[model_name] = "downloading: 0%"
     stderr_interceptor.active_model = model_name
     try:
         if model_name == "27b-4a":
             # Use Gemma 4 26B A4B in 4-bit (requires CUDA)
-            hf_model_id = "unsloth/gemma-4-26B-A4B"
-            tokenizer = AutoTokenizer.from_pretrained(hf_model_id, token=hf_token)
             # BitsAndBytes for 4-bit quantization
             from transformers import BitsAndBytesConfig
             bnb_config = BitsAndBytesConfig(
-                load_in_4bit=True,
-                bnb_4bit_compute_dtype=torch.bfloat16
             )
             model = AutoModelForCausalLM.from_pretrained(
                 hf_model_id,
                 quantization_config=bnb_config,
                 device_map="auto",
                 attn_implementation="eager",
-                token=hf_token
             )
         else:
             # Default to 2b (Gemma 4 E2B)
             hf_model_id = "unsloth/gemma-4-E2B"
-            tokenizer = AutoTokenizer.from_pretrained(hf_model_id, token=hf_token)
             model = AutoModelForCausalLM.from_pretrained(
                 hf_model_id,
                 torch_dtype=torch.bfloat16,
                 attn_implementation="eager",
-                token=hf_token
             ).to(device)
         print(f"Model {model_name} loaded successfully.")
         models[model_name] = model
         tokenizers[model_name] = tokenizer
@@ -318,31 +344,37 @@ def load_model(model_name: str):
         stderr_interceptor.active_model = None
         raise e
 # Pre-load default 2b
 try:
     load_model("2b")
 except:
     print("Could not preload 2b model.")
 @app.get("/status")
 def get_model_status():
     return model_status
 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")
 def analyze_text_legacy(request: TextRequest):
     return analyze_text_model("2b", request)
 @app.post("/analyze/{model_name}")
 def analyze_text_model(model_name: str, request: TextRequest):
     text = request.text
     preprompt = request.preprompt.strip()
     if not text.strip():
         return {"tokens": [], "scores": []}
@@ -350,51 +382,66 @@ def analyze_text_model(model_name: str, request: TextRequest):
         model, tokenizer = load_model(model_name)
     except Exception as e:
         from fastapi import HTTPException
         raise HTTPException(status_code=500, detail=str(e))
     # Combine preprompt and text if preprompt exists
     full_text = f"{preprompt}\n\n{text}" if preprompt else text
     inputs = tokenizer(full_text, return_tensors="pt").to(model.device)
     # Calculate how many tokens belong to the preprompt so we can strip them later
-    num_preprompt_tokens = 1 # default is 1 for <bos>
     if preprompt:
         p_toks = tokenizer(f"{preprompt}\n\n")["input_ids"]
         num_preprompt_tokens = len(p_toks)
     with torch.no_grad():
         # Ensure we ask the model to output attentions explicitly
         outputs = model(**inputs, output_attentions=True)
     # Check if attentions are actually returned
     if not outputs.attentions:
         print("Warning: Model did not return attentions.")
         return {"words": []}
     num_layers = len(outputs.attentions)
     selected_layers = request.layers
     if not selected_layers:
-        start_layer = num_layers // 4
-        end_layer = num_layers - (num_layers // 4)
-        selected_layers = list(range(start_layer, end_layer))
     selected_layers = [l for l in selected_layers if 0 <= l < num_layers]
     if not selected_layers:
         selected_layers = [num_layers - 1]
     stacked_attentions = torch.stack([outputs.attentions[l] for l in selected_layers])
-    avg_attention = stacked_attentions.mean(dim=(0, 2))[0]
     # 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:
         text_importance = importance[num_preprompt_tokens:]
         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,
@@ -405,42 +452,55 @@ def analyze_text_model(model_name: str, request: TextRequest):
             # 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
         normalized_scores = normalized_scores.clip(0, 1)
     else:
         normalized_scores = [1.0] * len(importance)
     input_ids = inputs["input_ids"][0].tolist()
     tokens = tokenizer.convert_ids_to_tokens(input_ids)
     result = []
     for i, t in enumerate(tokens):
         # Decode properly
         word = tokenizer.decode([input_ids[i]])
         # Special check for Gemma, decoding often removes spaces incorrectly or leaves tokens empty
         # Let's clean the raw token just in case
-        raw_clean = t.replace('\u2581', ' ')
         # We will pass both decoded word and raw cleaned token to frontend to help render
-        result.append({
-            "token": raw_clean,
-            "word": word,
-            "score": float(normalized_scores[i])
-        })
-    # Return only the <bos> token plus the actual text tokens
-    if num_preprompt_tokens > 1 and len(result) > num_preprompt_tokens:
-        result = [result[0]] + result[num_preprompt_tokens:]
     return {"words": result}
 if __name__ == "__main__":
     port = int(os.environ.get("PORT", 7860))
-    uvicorn.run("main:app", host="0.0.0.0", port=port, reload=True)

 app.mount("/static", StaticFiles(directory="static"), name="static")
 @app.get("/")
 def read_root():
     return RedirectResponse(url="/static/index.html")
 # --- SQLite Database Setup ---
 # Hugging Face Spaces make the /app directory read-only by default.
 # We must write the database to /data (if persistent storage is enabled) or /tmp.
 DB_DIR = "/data" if os.path.exists("/data") else "/tmp"
 DB_FILE = os.path.join(DB_DIR, "study.db")
 def init_db():
     conn = sqlite3.connect(DB_FILE)
     c = conn.cursor()
+    c.execute("""
         CREATE TABLE IF NOT EXISTS study_results (
             id INTEGER PRIMARY KEY AUTOINCREMENT,
             user_id TEXT,
             total_questions INTEGER,
             created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
         )
+    """)
+    c.execute("""
         CREATE TABLE IF NOT EXISTS study_preferences (
             id INTEGER PRIMARY KEY AUTOINCREMENT,
             user_id TEXT,
             preference TEXT, -- "plain", "flowread", or "gradient"
             created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
         )
+    """)
     conn.commit()
     conn.close()
 init_db()
 # --- Study Content ---
         "questions": [
             {
                 "question": "Approximately how many neurons are in the human brain?",
+                "options": ["86 million", "86 billion", "100 trillion", "50 billion"],
+                "correct": 1,
             },
             {
                 "question": "What is the term for the brain's ability to reorganize itself?",
                     "Synaptic generation",
                     "Neurogenesis",
                     "Neuroplasticity",
+                    "Cognitive adaptation",
                 ],
+                "correct": 2,
+            },
         ],
+        "flowread_html": '<span class="token highlighted">The</span><span class="token highlighted"> human</span><span class="token highlighted"> brain</span><span class="token highlighted"> is</span><span class="token highlighted"> a</span><span class="token highlighted"> marvel</span><span class="token"> of</span><span class="token highlighted"> biological</span><span class="token highlighted"> engineering</span><span class="token highlighted">,</span><span class="token highlighted"> containing</span><span class="token"> approximately</span><span class="token"> </span><span class="token">8</span><span class="token">6</span><span class="token highlighted"> billion</span><span class="token highlighted"> neurons</span><span class="token highlighted"> interconnected</span><span class="token highlighted"> by</span><span class="token"> tri</span><span class="token">lli</span><span class="token">ons</span><span class="token"> of</span><span class="token highlighted"> synapses</span><span class="token highlighted">.</span><span class="token highlighted"> These</span><span class="token highlighted"> neural</span><span class="token highlighted"> networks</span><span class="token"> are</span><span class="token"> responsible</span><span class="token highlighted"> for</span><span class="token"> everything</span><span class="token highlighted"> from</span><span class="token highlighted"> basic</span><span class="token highlighted"> autonomic</span><span class="token highlighted"> functions</span><span class="token highlighted">,</span><span class="token highlighted"> like</span><span class="token"> breathing</span><span class="token"> and</span><span class="token"> heart</span><span class="token"> rate</span><span class="token">,</span><span class="token highlighted"> to</span><span class="token"> complex</span><span class="token highlighted"> cognitive</span><span class="token"> processes</span><span class="token"> such</span><span class="token"> as</span><span class="token highlighted"> memory</span><span class="token highlighted">,</span><span class="token"> emotion</span><span class="token">,</span><span class="token"> and</span><span class="token highlighted"> problem</span><span class="token highlighted">-</span><span class="token highlighted">solving</span><span class="token highlighted">.</span><span class="token highlighted"> Neurop</span><span class="token highlighted">lastic</span><span class="token highlighted">ity</span><span class="token highlighted">,</span><span class="token highlighted"> the</span><span class="token highlighted"> brain</span><span class="token highlighted">\'</span><span class="token highlighted">s</span><span class="token"> ability</span><span class="token"> to</span><span class="token highlighted"> reorgan</span><span class="token highlighted">ize</span><span class="token"> itself</span><span class="token"> by</span><span class="token"> forming</span><span class="token"> new</span><span class="token"> neural</span><span class="token"> connections</span><span class="token"> throughout</span><span class="token highlighted"> life</span><span class="token highlighted">,</span><span class="token highlighted"> allows</span><span class="token highlighted"> humans</span><span class="token"> to</span><span class="token highlighted"> learn</span><span class="token"> new</span><span class="token"> skills</span><span class="token">,</span><span class="token"> recover</span><span class="token"> from</span><span class="token"> injuries</span><span class="token">,</span><span class="token"> and</span><span class="token"> adapt</span><span class="token"> to</span><span class="token"> changing</span><span class="token highlighted"> environments</span><span class="token highlighted">.</span><span class="token"> This</span><span class="token"> extraordinary</span><span class="token highlighted"> adaptability</span><span class="token"> is</span><span class="token"> what</span><span class="token"> makes</span><span class="token"> our</span><span class="token"> species</span><span class="token"> so</span><span class="token"> resilient</span><span class="token"> and</span><span class="token"> capable</span><span class="token"> of</span><span class="token"> continuous</span><span class="token"> intellectual</span><span class="token"> growth</span><span class="token">.</span>',
+        "flowread_gradient_html": '<span class="token" style="opacity: 0.53; font-weight: 489;">The</span><span class="token" style="opacity: 0.56; font-weight: 506;"> human</span><span class="token" style="opacity: 1.00; font-weight: 800;"> brain</span><span class="token" style="opacity: 0.54; font-weight: 490;"> is</span><span class="token" style="opacity: 0.51; font-weight: 472;"> a</span><span class="token" style="opacity: 0.53; font-weight: 489;"> marvel</span><span class="token" style="opacity: 0.48; font-weight: 452;"> of</span><span class="token" style="opacity: 0.53; font-weight: 484;"> biological</span><span class="token" style="opacity: 0.55; font-weight: 498;"> engineering</span><span class="token" style="opacity: 0.55; font-weight: 498;">,</span><span class="token" style="opacity: 0.56; font-weight: 506;"> containing</span><span class="token" style="opacity: 0.48; font-weight: 455;"> approximately</span><span class="token" style="opacity: 0.48; font-weight: 455;"> </span><span class="token" style="opacity: 0.43; font-weight: 421;">8</span><span class="token" style="opacity: 0.43; font-weight: 421;">6</span><span class="token" style="opacity: 0.50; font-weight: 469;"> billion</span><span class="token" style="opacity: 0.71; font-weight: 608;"> neurons</span><span class="token" style="opacity: 0.55; font-weight: 500;"> interconnected</span><span class="token" style="opacity: 0.53; font-weight: 484;"> by</span><span class="token" style="opacity: 0.43; font-weight: 419;"> tri</span><span class="token" style="opacity: 0.43; font-weight: 419;">lli</span><span class="token" style="opacity: 0.43; font-weight: 419;">ons</span><span class="token" style="opacity: 0.42; font-weight: 413;"> of</span><span class="token" style="opacity: 0.72; font-weight: 613;"> synapses</span><span class="token" style="opacity: 0.72; font-weight: 613;">.</span><span class="token" style="opacity: 0.51; font-weight: 472;"> These</span><span class="token" style="opacity: 0.57; font-weight: 516;"> neural</span><span class="token" style="opacity: 0.57; font-weight: 515;"> networks</span><span class="token" style="opacity: 0.48; font-weight: 455;"> are</span><span class="token" style="opacity: 0.48; font-weight: 452;"> responsible</span><span class="token" style="opacity: 0.52; font-weight: 482;"> for</span><span class="token" style="opacity: 0.50; font-weight: 464;"> everything</span><span class="token" style="opacity: 0.59; font-weight: 529;"> from</span><span class="token" style="opacity: 0.51; font-weight: 474;"> basic</span><span class="token" style="opacity: 0.56; font-weight: 504;"> autonomic</span><span class="token" style="opacity: 0.52; font-weight: 482;"> functions</span><span class="token" style="opacity: 0.52; font-weight: 482;">,</span><span class="token" style="opacity: 0.52; font-weight: 481;"> like</span><span class="token" style="opacity: 0.50; font-weight: 466;"> breathing</span><span class="token" style="opacity: 0.47; font-weight: 444;"> and</span><span class="token" style="opacity: 0.44; font-weight: 424;"> heart</span><span class="token" style="opacity: 0.45; font-weight: 435;"> rate</span><span class="token" style="opacity: 0.45; font-weight: 435;">,</span><span class="token" style="opacity: 0.52; font-weight: 479;"> to</span><span class="token" style="opacity: 0.49; font-weight: 462;"> complex</span><span class="token" style="opacity: 0.53; font-weight: 487;"> cognitive</span><span class="token" style="opacity: 0.48; font-weight: 451;"> processes</span><span class="token" style="opacity: 0.45; font-weight: 432;"> such</span><span class="token" style="opacity: 0.48; font-weight: 451;"> as</span><span class="token" style="opacity: 0.51; font-weight: 474;"> memory</span><span class="token" style="opacity: 0.51; font-weight: 474;">,</span><span class="token" style="opacity: 0.48; font-weight: 450;"> emotion</span><span class="token" style="opacity: 0.48; font-weight: 450;">,</span><span class="token" style="opacity: 0.44; font-weight: 428;"> and</span><span class="token" style="opacity: 0.64; font-weight: 559;"> problem</span><span class="token" style="opacity: 0.64; font-weight: 559;">-</span><span class="token" style="opacity: 0.64; font-weight: 559;">solving</span><span class="token" style="opacity: 0.64; font-weight: 559;">.</span><span class="token" style="opacity: 0.68; font-weight: 587;"> Neurop</span><span class="token" style="opacity: 0.68; font-weight: 587;">lastic</span><span class="token" style="opacity: 0.68; font-weight: 587;">ity</span><span class="token" style="opacity: 0.68; font-weight: 587;">,</span><span class="token" style="opacity: 0.50; font-weight: 469;"> the</span><span class="token" style="opacity: 0.59; font-weight: 527;"> brain</span><span class="token" style="opacity: 0.59; font-weight: 527;">\'</span><span class="token" style="opacity: 0.59; font-weight: 527;">s</span><span class="token" style="opacity: 0.45; font-weight: 434;"> ability</span><span class="token" style="opacity: 0.50; font-weight: 464;"> to</span><span class="token" style="opacity: 0.50; font-weight: 469;"> reorgan</span><span class="token" style="opacity: 0.50; font-weight: 469;">ize</span><span class="token" style="opacity: 0.47; font-weight: 444;"> itself</span><span class="token" style="opacity: 0.48; font-weight: 454;"> by</span><span class="token" style="opacity: 0.45; font-weight: 434;"> forming</span><span class="token" style="opacity: 0.45; font-weight: 431;"> new</span><span class="token" style="opacity: 0.44; font-weight: 426;"> neural</span><span class="token" style="opacity: 0.45; font-weight: 433;"> connections</span><span class="token" style="opacity: 0.44; font-weight: 426;"> throughout</span><span class="token" style="opacity: 0.52; font-weight: 480;"> life</span><span class="token" style="opacity: 0.52; font-weight: 480;">,</span><span class="token" style="opacity: 0.53; font-weight: 485;"> allows</span><span class="token" style="opacity: 0.54; font-weight: 493;"> humans</span><span class="token" style="opacity: 0.49; font-weight: 463;"> to</span><span class="token" style="opacity: 0.52; font-weight: 482;"> learn</span><span class="token" style="opacity: 0.45; font-weight: 433;"> new</span><span class="token" style="opacity: 0.48; font-weight: 454;"> skills</span><span class="token" style="opacity: 0.48; font-weight: 454;">,</span><span class="token" style="opacity: 0.47; font-weight: 449;"> recover</span><span class="token" style="opacity: 0.44; font-weight: 429;"> from</span><span class="token" style="opacity: 0.46; font-weight: 438;"> injuries</span><span class="token" style="opacity: 0.46; font-weight: 438;">,</span><span class="token" style="opacity: 0.45; font-weight: 433;"> and</span><span class="token" style="opacity: 0.45; font-weight: 436;"> adapt</span><span class="token" style="opacity: 0.43; font-weight: 421;"> to</span><span class="token" style="opacity: 0.42; font-weight: 414;"> changing</span><span class="token" style="opacity: 0.53; font-weight: 485;"> environments</span><span class="token" style="opacity: 0.53; font-weight: 485;">.</span><span class="token" style="opacity: 0.44; font-weight: 429;"> This</span><span class="token" style="opacity: 0.46; font-weight: 442;"> extraordinary</span><span class="token" style="opacity: 0.51; font-weight: 472;"> adaptability</span><span class="token" style="opacity: 0.44; font-weight: 428;"> is</span><span class="token" style="opacity: 0.45; font-weight: 435;"> what</span><span class="token" style="opacity: 0.46; font-weight: 443;"> makes</span><span class="token" style="opacity: 0.44; font-weight: 428;"> our</span><span class="token" style="opacity: 0.50; font-weight: 468;"> species</span><span class="token" style="opacity: 0.45; font-weight: 430;"> so</span><span class="token" style="opacity: 0.47; font-weight: 443;"> resilient</span><span class="token" style="opacity: 0.44; font-weight: 427;"> and</span><span class="token" style="opacity: 0.42; font-weight: 412;"> capable</span><span class="token" style="opacity: 0.43; font-weight: 422;"> of</span><span class="token" style="opacity: 0.43; font-weight: 420;"> continuous</span><span class="token" style="opacity: 0.42; font-weight: 413;"> intellectual</span><span class="token" style="opacity: 0.41; font-weight: 403;"> growth</span><span class="token" style="opacity: 0.41; font-weight: 403;">.</span>',
     },
     {
         "id": 2,
         "questions": [
             {
                 "question": "Where did the Industrial Revolution begin?",
+                "options": ["United States", "France", "Germany", "Britain"],
+                "correct": 3,
             },
             {
                 "question": "Which invention dramatically increased factory efficiency?",
                     "The cotton gin",
                     "The telegraph",
                     "The steam engine",
+                    "The assembly line",
                 ],
+                "correct": 2,
+            },
         ],
+        "flowread_html": '<span class="token highlighted">The</span><span class="token highlighted"> Industrial</span><span class="token highlighted"> Revolution</span><span class="token highlighted">,</span><span class="token highlighted"> which</span><span class="token highlighted"> began</span><span class="token"> in</span><span class="token highlighted"> Britain</span><span class="token"> in</span><span class="token"> the</span><span class="token"> late</span><span class="token"> </span><span class="token highlighted">1</span><span class="token highlighted">8</span><span class="token highlighted">th</span><span class="token highlighted"> century</span><span class="token highlighted">,</span><span class="token highlighted"> marked</span><span class="token"> a</span><span class="token highlighted"> profound</span><span class="token"> turning</span><span class="token highlighted"> point</span><span class="token"> in</span><span class="token highlighted"> human</span><span class="token highlighted"> history</span><span class="token highlighted">.</span><span class="token highlighted"> It</span><span class="token highlighted"> initiated</span><span class="token"> the</span><span class="token"> transition</span><span class="token highlighted"> from</span><span class="token highlighted"> agrarian</span><span class="token highlighted">,</span><span class="token"> handic</span><span class="token">raft</span><span class="token highlighted"> economies</span><span class="token highlighted"> to</span><span class="token highlighted"> industry</span><span class="token"> and</span><span class="token highlighted"> machine</span><span class="token highlighted"> manufacturing</span><span class="token highlighted">.</span><span class="token highlighted"> The</span><span class="token highlighted"> invention</span><span class="token highlighted"> of</span><span class="token"> the</span><span class="token highlighted"> steam</span><span class="token highlighted"> engine</span><span class="token highlighted">,</span><span class="token"> pioneered</span><span class="token highlighted"> by</span><span class="token"> figures</span><span class="token"> like</span><span class="token"> James</span><span class="token"> Watt</span><span class="token">,</span><span class="token highlighted"> dramatically</span><span class="token highlighted"> increased</span><span class="token"> the</span><span class="token"> efficiency</span><span class="token"> of</span><span class="token highlighted"> factories</span><span class="token"> and</span><span class="token highlighted"> transportation</span><span class="token highlighted">,</span><span class="token highlighted"> revolution</span><span class="token highlighted">izing</span><span class="token"> the</span><span class="token"> textile</span><span class="token"> industry</span><span class="token"> and</span><span class="token"> leading</span><span class="token"> to</span><span class="token"> the</span><span class="token"> expansion</span><span class="token"> of</span><span class="token highlighted"> railways</span><span class="token highlighted">.</span><span class="token"> This</span><span class="token highlighted"> era</span><span class="token highlighted"> brought</span><span class="token"> about</span><span class="token"> unprecedented</span><span class="token highlighted"> economic</span><span class="token highlighted"> growth</span><span class="token"> and</span><span class="token highlighted"> urbanization</span><span class="token highlighted">,</span><span class="token"> fundamentally</span><span class="token highlighted"> altering</span><span class="token"> social</span><span class="token"> structures</span><span class="token"> and</span><span class="token"> paving</span><span class="token"> the</span><span class="token"> way</span><span class="token"> for</span><span class="token"> the</span><span class="token"> modern</span><span class="token"> capitalist</span><span class="token"> system</span><span class="token">,</span><span class="token"> despite</span><span class="token"> also</span><span class="token"> causing</span><span class="token"> significant</span><span class="token"> social</span><span class="token"> inequalities</span><span class="token"> and</span><span class="token"> poor</span><span class="token"> working</span><span class="token"> conditions</span><span class="token"> initially</span><span class="token">.</span>',
+        "flowread_gradient_html": '<span class="token" style="opacity: 0.49; font-weight: 462;">The</span><span class="token" style="opacity: 0.59; font-weight: 524;"> Industrial</span><span class="token" style="opacity: 1.00; font-weight: 800;"> Revolution</span><span class="token" style="opacity: 1.00; font-weight: 800;">,</span><span class="token" style="opacity: 0.48; font-weight: 456;"> which</span><span class="token" style="opacity: 0.50; font-weight: 467;"> began</span><span class="token" style="opacity: 0.45; font-weight: 430;"> in</span><span class="token" style="opacity: 0.58; font-weight: 519;"> Britain</span><span class="token" style="opacity: 0.44; font-weight: 429;"> in</span><span class="token" style="opacity: 0.42; font-weight: 410;"> the</span><span class="token" style="opacity: 0.43; font-weight: 418;"> late</span><span class="token" style="opacity: 0.42; font-weight: 415;"> </span><span class="token" style="opacity: 0.49; font-weight: 457;">1</span><span class="token" style="opacity: 0.49; font-weight: 457;">8</span><span class="token" style="opacity: 0.49; font-weight: 457;">th</span><span class="token" style="opacity: 0.50; font-weight: 467;"> century</span><span class="token" style="opacity: 0.50; font-weight: 467;">,</span><span class="token" style="opacity: 0.49; font-weight: 460;"> marked</span><span class="token" style="opacity: 0.43; font-weight: 422;"> a</span><span class="token" style="opacity: 0.46; font-weight: 439;"> profound</span><span class="token" style="opacity: 0.43; font-weight: 418;"> turning</span><span class="token" style="opacity: 0.46; font-weight: 440;"> point</span><span class="token" style="opacity: 0.44; font-weight: 423;"> in</span><span class="token" style="opacity: 0.47; font-weight: 447;"> human</span><span class="token" style="opacity: 0.57; font-weight: 511;"> history</span><span class="token" style="opacity: 0.57; font-weight: 511;">.</span><span class="token" style="opacity: 0.48; font-weight: 456;"> It</span><span class="token" style="opacity: 0.48; font-weight: 450;"> initiated</span><span class="token" style="opacity: 0.45; font-weight: 431;"> the</span><span class="token" style="opacity: 0.44; font-weight: 426;"> transition</span><span class="token" style="opacity: 0.47; font-weight: 444;"> from</span><span class="token" style="opacity: 0.50; font-weight: 469;"> agrarian</span><span class="token" style="opacity: 0.50; font-weight: 469;">,</span><span class="token" style="opacity: 0.45; font-weight: 433;"> handic</span><span class="token" style="opacity: 0.45; font-weight: 433;">raft</span><span class="token" style="opacity: 0.48; font-weight: 451;"> economies</span><span class="token" style="opacity: 0.48; font-weight: 452;"> to</span><span class="token" style="opacity: 0.53; font-weight: 489;"> industry</span><span class="token" style="opacity: 0.45; font-weight: 432;"> and</span><span class="token" style="opacity: 0.47; font-weight: 444;"> machine</span><span class="token" style="opacity: 0.55; font-weight: 498;"> manufacturing</span><span class="token" style="opacity: 0.55; font-weight: 498;">.</span><span class="token" style="opacity: 0.49; font-weight: 461;"> The</span><span class="token" style="opacity: 0.46; font-weight: 442;"> invention</span><span class="token" style="opacity: 0.46; font-weight: 440;"> of</span><span class="token" style="opacity: 0.43; font-weight: 417;"> the</span><span class="token" style="opacity: 0.50; font-weight: 465;"> steam</span><span class="token" style="opacity: 0.52; font-weight: 483;"> engine</span><span class="token" style="opacity: 0.52; font-weight: 483;">,</span><span class="token" style="opacity: 0.45; font-weight: 434;"> pioneered</span><span class="token" style="opacity: 0.45; font-weight: 436;"> by</span><span class="token" style="opacity: 0.43; font-weight: 421;"> figures</span><span class="token" style="opacity: 0.44; font-weight: 426;"> like</span><span class="token" style="opacity: 0.42; font-weight: 414;"> James</span><span class="token" style="opacity: 0.44; font-weight: 428;"> Watt</span><span class="token" style="opacity: 0.44; font-weight: 428;">,</span><span class="token" style="opacity: 0.46; font-weight: 437;"> dramatically</span><span class="token" style="opacity: 0.47; font-weight: 445;"> increased</span><span class="token" style="opacity: 0.43; font-weight: 421;"> the</span><span class="token" style="opacity: 0.45; font-weight: 432;"> efficiency</span><span class="token" style="opacity: 0.43; font-weight: 421;"> of</span><span class="token" style="opacity: 0.50; font-weight: 467;"> factories</span><span class="token" style="opacity: 0.45; font-weight: 432;"> and</span><span class="token" style="opacity: 0.46; font-weight: 442;"> transportation</span><span class="token" style="opacity: 0.46; font-weight: 442;">,</span><span class="token" style="opacity: 0.47; font-weight: 446;"> revolution</span><span class="token" style="opacity: 0.47; font-weight: 446;">izing</span><span class="token" style="opacity: 0.42; font-weight: 415;"> the</span><span class="token" style="opacity: 0.45; font-weight: 436;"> textile</span><span class="token" style="opacity: 0.44; font-weight: 428;"> industry</span><span class="token" style="opacity: 0.45; font-weight: 433;"> and</span><span class="token" style="opacity: 0.43; font-weight: 416;"> leading</span><span class="token" style="opacity: 0.44; font-weight: 425;"> to</span><span class="token" style="opacity: 0.41; font-weight: 409;"> the</span><span class="token" style="opacity: 0.42; font-weight: 413;"> expansion</span><span class="token" style="opacity: 0.41; font-weight: 407;"> of</span><span class="token" style="opacity: 0.50; font-weight: 468;"> railways</span><span class="token" style="opacity: 0.50; font-weight: 468;">.</span><span class="token" style="opacity: 0.44; font-weight: 423;"> This</span><span class="token" style="opacity: 0.48; font-weight: 454;"> era</span><span class="token" style="opacity: 0.47; font-weight: 447;"> brought</span><span class="token" style="opacity: 0.43; font-weight: 418;"> about</span><span class="token" style="opacity: 0.45; font-weight: 434;"> unprecedented</span><span class="token" style="opacity: 0.46; font-weight: 438;"> economic</span><span class="token" style="opacity: 0.46; font-weight: 437;"> growth</span><span class="token" style="opacity: 0.45; font-weight: 431;"> and</span><span class="token" style="opacity: 0.47; font-weight: 449;"> urbanization</span><span class="token" style="opacity: 0.47; font-weight: 449;">,</span><span class="token" style="opacity: 0.44; font-weight: 424;"> fundamentally</span><span class="token" style="opacity: 0.46; font-weight: 441;"> altering</span><span class="token" style="opacity: 0.45; font-weight: 432;"> social</span><span class="token" style="opacity: 0.44; font-weight: 427;"> structures</span><span class="token" style="opacity: 0.45; font-weight: 432;"> and</span><span class="token" style="opacity: 0.43; font-weight: 419;"> paving</span><span class="token" style="opacity: 0.41; font-weight: 407;"> the</span><span class="token" style="opacity: 0.42; font-weight: 410;"> way</span><span class="token" style="opacity: 0.44; font-weight: 423;"> for</span><span class="token" style="opacity: 0.41; font-weight: 409;"> the</span><span class="token" style="opacity: 0.43; font-weight: 422;"> modern</span><span class="token" style="opacity: 0.44; font-weight: 429;"> capitalist</span><span class="token" style="opacity: 0.42; font-weight: 415;"> system</span><span class="token" style="opacity: 0.42; font-weight: 415;">,</span><span class="token" style="opacity: 0.45; font-weight: 432;"> despite</span><span class="token" style="opacity: 0.43; font-weight: 417;"> also</span><span class="token" style="opacity: 0.45; font-weight: 431;"> causing</span><span class="token" style="opacity: 0.43; font-weight: 419;"> significant</span><span class="token" style="opacity: 0.42; font-weight: 416;"> social</span><span class="token" style="opacity: 0.44; font-weight: 429;"> inequalities</span><span class="token" style="opacity: 0.42; font-weight: 415;"> and</span><span class="token" style="opacity: 0.42; font-weight: 414;"> poor</span><span class="token" style="opacity: 0.41; font-weight: 407;"> working</span><span class="token" style="opacity: 0.41; font-weight: 406;"> conditions</span><span class="token" style="opacity: 0.41; font-weight: 403;"> initially</span><span class="token" style="opacity: 0.41; font-weight: 403;">.</span>',
     },
     {
         "id": 3,
         "questions": [
             {
                 "question": "What spectrum does the James Webb Space Telescope primarily operate in?",
+                "options": ["Ultraviolet", "X-ray", "Infrared", "Visible light"],
+                "correct": 2,
             },
             {
                 "question": "Where does the telescope orbit to stay cold?",
                     "Low Earth Orbit",
                     "The Moon's orbit",
                     "The first Lagrange point",
+                    "The second Lagrange point",
                 ],
+                "correct": 3,
+            },
         ],
+        "flowread_html": '<span class="token highlighted">The</span><span class="token"> James</span><span class="token highlighted"> Webb</span><span class="token highlighted"> Space</span><span class="token highlighted"> Telescope</span><span class="token highlighted"> is</span><span class="token highlighted"> the</span><span class="token highlighted"> largest</span><span class="token"> and</span><span class="token"> most</span><span class="token highlighted"> powerful</span><span class="token highlighted"> space</span><span class="token highlighted"> telescope</span><span class="token"> ever</span><span class="token highlighted"> built</span><span class="token highlighted">.</span><span class="token highlighted"> Launched</span><span class="token"> in</span><span class="token"> </span><span class="token highlighted">2</span><span class="token highlighted">0</span><span class="token highlighted">2</span><span class="token highlighted">1</span><span class="token highlighted">,</span><span class="token highlighted"> it</span><span class="token highlighted"> operates</span><span class="token"> primarily</span><span class="token"> in</span><span class="token"> the</span><span class="token highlighted"> infrared</span><span class="token highlighted"> spectrum</span><span class="token highlighted">,</span><span class="token highlighted"> allowing</span><span class="token"> it</span><span class="token"> to</span><span class="token"> peer</span><span class="token"> through</span><span class="token"> dense</span><span class="token highlighted"> cosmic</span><span class="token"> dust</span><span class="token"> and</span><span class="token highlighted"> observe</span><span class="token"> the</span><span class="token highlighted"> universe</span><span class="token highlighted">\'</span><span class="token highlighted">s</span><span class="token"> most</span><span class="token"> distant</span><span class="token">,</span><span class="token"> early</span><span class="token highlighted"> galaxies</span><span class="token highlighted">.</span><span class="token highlighted"> Unlike</span><span class="token"> its</span><span class="token"> predecessor</span><span class="token">,</span><span class="token highlighted"> Hubble</span><span class="token highlighted">,</span><span class="token highlighted"> JW</span><span class="token highlighted">ST</span><span class="token highlighted"> orbits</span><span class="token"> the</span><span class="token highlighted"> Sun</span><span class="token highlighted"> at</span><span class="token"> the</span><span class="token"> second</span><span class="token highlighted"> Lagrange</span><span class="token highlighted"> point</span><span class="token highlighted">,</span><span class="token highlighted"> keeping</span><span class="token"> it</span><span class="token"> constantly</span><span class="token highlighted"> shielded</span><span class="token highlighted"> from</span><span class="token"> the</span><span class="token highlighted"> Sun</span><span class="token highlighted">\'</span><span class="token highlighted">s</span><span class="token"> heat</span><span class="token"> and</span><span class="token"> light</span><span class="token"> by</span><span class="token"> its</span><span class="token"> massive</span><span class="token highlighted"> sun</span><span class="token highlighted">shield</span><span class="token highlighted">.</span><span class="token"> This</span><span class="token"> incredibly</span><span class="token highlighted"> cold</span><span class="token"> environment</span><span class="token"> is</span><span class="token"> necessary</span><span class="token"> to</span><span class="token highlighted"> prevent</span><span class="token"> the</span><span class="token highlighted"> telescope</span><span class="token highlighted">\'</span><span class="token highlighted">s</span><span class="token"> own</span><span class="token"> infrared</span><span class="token"> emissions</span><span class="token"> from</span><span class="token"> interfering</span><span class="token"> with</span><span class="token"> its</span><span class="token"> highly</span><span class="token"> sensitive</span><span class="token"> observations</span><span class="token"> of</span><span class="token"> ex</span><span class="token">oplan</span><span class="token">et</span><span class="token"> atmospheres</span><span class="token"> and</span><span class="token"> star</span><span class="token"> formation</span><span class="token">.</span>',
+        "flowread_gradient_html": '<span class="token" style="opacity: 0.49; font-weight: 458;">The</span><span class="token" style="opacity: 0.45; font-weight: 435;"> James</span><span class="token" style="opacity: 1.00; font-weight: 800;"> Webb</span><span class="token" style="opacity: 0.59; font-weight: 523;"> Space</span><span class="token" style="opacity: 0.75; font-weight: 632;"> Telescope</span><span class="token" style="opacity: 0.52; font-weight: 478;"> is</span><span class="token" style="opacity: 0.47; font-weight: 447;"> the</span><span class="token" style="opacity: 0.50; font-weight: 463;"> largest</span><span class="token" style="opacity: 0.44; font-weight: 423;"> and</span><span class="token" style="opacity: 0.42; font-weight: 412;"> most</span><span class="token" style="opacity: 0.47; font-weight: 443;"> powerful</span><span class="token" style="opacity: 0.46; font-weight: 441;"> space</span><span class="token" style="opacity: 0.54; font-weight: 491;"> telescope</span><span class="token" style="opacity: 0.43; font-weight: 422;"> ever</span><span class="token" style="opacity: 0.56; font-weight: 503;"> built</span><span class="token" style="opacity: 0.56; font-weight: 503;">.</span><span class="token" style="opacity: 0.51; font-weight: 475;"> Launched</span><span class="token" style="opacity: 0.43; font-weight: 421;"> in</span><span class="token" style="opacity: 0.43; font-weight: 418;"> </span><span class="token" style="opacity: 0.50; font-weight: 463;">2</span><span class="token" style="opacity: 0.50; font-weight: 463;">0</span><span class="token" style="opacity: 0.50; font-weight: 463;">2</span><span class="token" style="opacity: 0.50; font-weight: 463;">1</span><span class="token" style="opacity: 0.50; font-weight: 463;">,</span><span class="token" style="opacity: 0.48; font-weight: 452;"> it</span><span class="token" style="opacity: 0.47; font-weight: 449;"> operates</span><span class="token" style="opacity: 0.45; font-weight: 433;"> primarily</span><span class="token" style="opacity: 0.44; font-weight: 429;"> in</span><span class="token" style="opacity: 0.43; font-weight: 418;"> the</span><span class="token" style="opacity: 0.57; font-weight: 510;"> infrared</span><span class="token" style="opacity: 0.47; font-weight: 446;"> spectrum</span><span class="token" style="opacity: 0.47; font-weight: 446;">,</span><span class="token" style="opacity: 0.48; font-weight: 453;"> allowing</span><span class="token" style="opacity: 0.43; font-weight: 420;"> it</span><span class="token" style="opacity: 0.44; font-weight: 423;"> to</span><span class="token" style="opacity: 0.46; font-weight: 437;"> peer</span><span class="token" style="opacity: 0.46; font-weight: 437;"> through</span><span class="token" style="opacity: 0.45; font-weight: 430;"> dense</span><span class="token" style="opacity: 0.46; font-weight: 441;"> cosmic</span><span class="token" style="opacity: 0.46; font-weight: 438;"> dust</span><span class="token" style="opacity: 0.45; font-weight: 431;"> and</span><span class="token" style="opacity: 0.49; font-weight: 458;"> observe</span><span class="token" style="opacity: 0.46; font-weight: 439;"> the</span><span class="token" style="opacity: 0.48; font-weight: 451;"> universe</span><span class="token" style="opacity: 0.48; font-weight: 451;">\'</span><span class="token" style="opacity: 0.48; font-weight: 451;">s</span><span class="token" style="opacity: 0.42; font-weight: 414;"> most</span><span class="token" style="opacity: 0.46; font-weight: 436;"> distant</span><span class="token" style="opacity: 0.46; font-weight: 436;">,</span><span class="token" style="opacity: 0.42; font-weight: 414;"> early</span><span class="token" style="opacity: 0.52; font-weight: 478;"> galaxies</span><span class="token" style="opacity: 0.52; font-weight: 478;">.</span><span class="token" style="opacity: 0.47; font-weight: 445;"> Unlike</span><span class="token" style="opacity: 0.43; font-weight: 419;"> its</span><span class="token" style="opacity: 0.46; font-weight: 437;"> predecessor</span><span class="token" style="opacity: 0.46; font-weight: 437;">,</span><span class="token" style="opacity: 0.50; font-weight: 467;"> Hubble</span><span class="token" style="opacity: 0.50; font-weight: 467;">,</span><span class="token" style="opacity: 0.50; font-weight: 468;"> JW</span><span class="token" style="opacity: 0.50; font-weight: 468;">ST</span><span class="token" style="opacity: 0.55; font-weight: 496;"> orbits</span><span class="token" style="opacity: 0.45; font-weight: 430;"> the</span><span class="token" style="opacity: 0.53; font-weight: 489;"> Sun</span><span class="token" style="opacity: 0.46; font-weight: 441;"> at</span><span class="token" style="opacity: 0.43; font-weight: 417;"> the</span><span class="token" style="opacity: 0.42; font-weight: 415;"> second</span><span class="token" style="opacity: 0.49; font-weight: 456;"> Lagrange</span><span class="token" style="opacity: 0.47; font-weight: 446;"> point</span><span class="token" style="opacity: 0.47; font-weight: 446;">,</span><span class="token" style="opacity: 0.47; font-weight: 444;"> keeping</span><span class="token" style="opacity: 0.45; font-weight: 431;"> it</span><span class="token" style="opacity: 0.44; font-weight: 428;"> constantly</span><span class="token" style="opacity: 0.49; font-weight: 457;"> shielded</span><span class="token" style="opacity: 0.47; font-weight: 445;"> from</span><span class="token" style="opacity: 0.43; font-weight: 419;"> the</span><span class="token" style="opacity: 0.47; font-weight: 446;"> Sun</span><span class="token" style="opacity: 0.47; font-weight: 446;">\'</span><span class="token" style="opacity: 0.47; font-weight: 446;">s</span><span class="token" style="opacity: 0.46; font-weight: 438;"> heat</span><span class="token" style="opacity: 0.44; font-weight: 423;"> and</span><span class="token" style="opacity: 0.43; font-weight: 420;"> light</span><span class="token" style="opacity: 0.44; font-weight: 429;"> by</span><span class="token" style="opacity: 0.43; font-weight: 421;"> its</span><span class="token" style="opacity: 0.43; font-weight: 418;"> massive</span><span class="token" style="opacity: 0.50; font-weight: 465;"> sun</span><span class="token" style="opacity: 0.50; font-weight: 465;">shield</span><span class="token" style="opacity: 0.50; font-weight: 465;">.</span><span class="token" style="opacity: 0.43; font-weight: 422;"> This</span><span class="token" style="opacity: 0.42; font-weight: 415;"> incredibly</span><span class="token" style="opacity: 0.46; font-weight: 440;"> cold</span><span class="token" style="opacity: 0.46; font-weight: 439;"> environment</span><span class="token" style="opacity: 0.42; font-weight: 414;"> is</span><span class="token" style="opacity: 0.43; font-weight: 422;"> necessary</span><span class="token" style="opacity: 0.45; font-weight: 431;"> to</span><span class="token" style="opacity: 0.47; font-weight: 446;"> prevent</span><span class="token" style="opacity: 0.43; font-weight: 420;"> the</span><span class="token" style="opacity: 0.47; font-weight: 445;"> telescope</span><span class="token" style="opacity: 0.47; font-weight: 445;">\'</span><span class="token" style="opacity: 0.47; font-weight: 445;">s</span><span class="token" style="opacity: 0.44; font-weight: 429;"> own</span><span class="token" style="opacity: 0.44; font-weight: 429;"> infrared</span><span class="token" style="opacity: 0.45; font-weight: 436;"> emissions</span><span class="token" style="opacity: 0.42; font-weight: 414;"> from</span><span class="token" style="opacity: 0.43; font-weight: 417;"> interfering</span><span class="token" style="opacity: 0.43; font-weight: 419;"> with</span><span class="token" style="opacity: 0.43; font-weight: 416;"> its</span><span class="token" style="opacity: 0.41; font-weight: 407;"> highly</span><span class="token" style="opacity: 0.43; font-weight: 417;"> sensitive</span><span class="token" style="opacity: 0.43; font-weight: 421;"> observations</span><span class="token" style="opacity: 0.44; font-weight: 429;"> of</span><span class="token" style="opacity: 0.45; font-weight: 430;"> ex</span><span class="token" style="opacity: 0.45; font-weight: 430;">oplan</span><span class="token" style="opacity: 0.45; font-weight: 430;">et</span><span class="token" style="opacity: 0.43; font-weight: 418;"> atmospheres</span><span class="token" style="opacity: 0.42; font-weight: 413;"> and</span><span class="token" style="opacity: 0.41; font-weight: 408;"> star</span><span class="token" style="opacity: 0.41; font-weight: 403;"> formation</span><span class="token" style="opacity: 0.41; font-weight: 403;">.</span>',
+    },
+]  # --- Study API Endpoints ---
 @app.get("/api/study/texts")
 def get_study_texts():
     return {"texts": STUDY_TEXTS}
 class StudySubmission(BaseModel):
     user_id: str
     text_id: int
     score: int
     total_questions: int
 class StudyPreference(BaseModel):
     user_id: str
     preference: str
 @app.post("/api/study/preference")
 def submit_study_preference(submission: StudyPreference):
     conn = sqlite3.connect(DB_FILE)
     c = conn.cursor()
     c.execute(
         "INSERT INTO study_preferences (user_id, preference) VALUES (?, ?)",
+        (submission.user_id, submission.preference),
     )
     conn.commit()
     conn.close()
     return {"status": "success"}
 @app.post("/api/study/submit")
 def submit_study_result(submission: StudySubmission):
     conn = sqlite3.connect(DB_FILE)
     c = conn.cursor()
     c.execute(
         "INSERT INTO study_results (user_id, text_id, condition, reading_time_ms, score, total_questions) VALUES (?, ?, ?, ?, ?, ?)",
+        (
+            submission.user_id,
+            submission.text_id,
+            submission.condition,
+            submission.reading_time_ms,
+            submission.score,
+            submission.total_questions,
+        ),
     )
     conn.commit()
     conn.close()
     return {"status": "success"}
 @app.get("/api/study/stats")
 def get_study_stats():
     conn = sqlite3.connect(DB_FILE)
     c = conn.cursor()
     # Calculate stats for plain
+    c.execute(
+        "SELECT AVG(reading_time_ms), AVG(CAST(score AS FLOAT) / total_questions) * 100, COUNT(*) FROM study_results WHERE condition = 'plain'"
+    )
     plain_stats = c.fetchone()
     # Calculate stats for flowread
+    c.execute(
+        "SELECT AVG(reading_time_ms), AVG(CAST(score AS FLOAT) / total_questions) * 100, COUNT(*) FROM study_results WHERE condition = 'flowread'"
+    )
     flowread_stats = c.fetchone()
     # Calculate stats for gradient
+    c.execute(
+        "SELECT AVG(reading_time_ms), AVG(CAST(score AS FLOAT) / total_questions) * 100, COUNT(*) FROM study_results WHERE condition = 'gradient'"
+    )
     gradient_stats = c.fetchone()
     # Calculate preferences
     c.execute("SELECT preference, COUNT(*) FROM study_preferences GROUP BY preference")
     preferences = dict(c.fetchall())
     conn.close()
     return {
         "plain": {
             "avg_reading_time_ms": plain_stats[0] or 0,
             "avg_accuracy_percent": plain_stats[1] or 0,
+            "sample_size": plain_stats[2],
         },
         "flowread": {
             "avg_reading_time_ms": flowread_stats[0] or 0,
             "avg_accuracy_percent": flowread_stats[1] or 0,
+            "sample_size": flowread_stats[2],
         },
         "gradient": {
             "avg_reading_time_ms": gradient_stats[0] or 0,
             "avg_accuracy_percent": gradient_stats[1] or 0,
+            "sample_size": gradient_stats[2],
         },
+        "preferences": preferences,
     }
 import sys
 import re
 class StderrProgressInterceptor:
     def __init__(self, original):
         self.original = original
     def write(self, s):
         self.original.write(s)
+        match = re.search(r"(\d+)%\|", s)
         if match and self.active_model:
             pct = match.group(1)
             self.current_progress = f"{pct}%"
             # Update the global status explicitly so the API returns it immediately
             model_status[self.active_model] = f"downloading: {self.current_progress}"
     def flush(self):
         self.original.flush()
 stderr_interceptor = StderrProgressInterceptor(sys.stderr)
 sys.stderr = stderr_interceptor
 # --- Saliency API (Existing) ---
 models = {}
 tokenizers = {}
+model_status = {"2b": "unloaded", "27b-4a": "unloaded"}
+device = torch.device(
+    "cuda"
+    if torch.cuda.is_available()
+    else "mps"
+    if torch.backends.mps.is_available()
+    else "cpu"
+)
 hf_token = os.environ.get("HF_TOKEN")
 def load_model(model_name: str):
     if model_name in models:
         return models[model_name], tokenizers[model_name]
     print(f"Loading {model_name} on {device}...")
     model_status[model_name] = "downloading: 0%"
     stderr_interceptor.active_model = model_name
     try:
         if model_name == "27b-4a":
             # Use Gemma 4 26B A4B in 4-bit (requires CUDA)
+            hf_model_id = "unsloth/gemma-4-26B-A4B-bnb-4bit"
+            try:
+                tokenizer = AutoTokenizer.from_pretrained(
+                    hf_model_id, token=hf_token
+                )
+            except Exception:
+                hf_model_id = "unsloth/gemma-4-26B-A4B"
+                tokenizer = AutoTokenizer.from_pretrained(
+                    hf_model_id, token=hf_token
+                )
             # BitsAndBytes for 4-bit quantization
             from transformers import BitsAndBytesConfig
             bnb_config = BitsAndBytesConfig(
+                load_in_4bit=True, bnb_4bit_compute_dtype=torch.bfloat16
             )
             model = AutoModelForCausalLM.from_pretrained(
                 hf_model_id,
                 quantization_config=bnb_config,
                 device_map="auto",
                 attn_implementation="eager",
+                token=hf_token,
             )
         else:
             # Default to 2b (Gemma 4 E2B)
             hf_model_id = "unsloth/gemma-4-E2B"
+            tokenizer = AutoTokenizer.from_pretrained(
+                hf_model_id, token=hf_token, extra_special_tokens={}
+            )
             model = AutoModelForCausalLM.from_pretrained(
                 hf_model_id,
                 torch_dtype=torch.bfloat16,
                 attn_implementation="eager",
+                token=hf_token,
             ).to(device)
         print(f"Model {model_name} loaded successfully.")
         models[model_name] = model
         tokenizers[model_name] = tokenizer
         stderr_interceptor.active_model = None
         raise e
 # Pre-load default 2b
 try:
     load_model("2b")
 except:
     print("Could not preload 2b model.")
 @app.get("/status")
 def get_model_status():
     return model_status
 class TextRequest(BaseModel):
     text: str
+    layers: Optional[List[int]] = None  # Optional explicit layer selection
+    layer_preset: str = "middle"  # "first", "middle", "last", "all"
+    preprompt: str = ""  # Optional task-driven intent
+    saliency_mode: str = "local"  # "local" or "global"
 @app.post("/analyze")
 def analyze_text_legacy(request: TextRequest):
     return analyze_text_model("2b", request)
 @app.post("/analyze/{model_name}")
 def analyze_text_model(model_name: str, request: TextRequest):
     text = request.text
     preprompt = request.preprompt.strip()
     if not text.strip():
         return {"tokens": [], "scores": []}
         model, tokenizer = load_model(model_name)
     except Exception as e:
         from fastapi import HTTPException
         raise HTTPException(status_code=500, detail=str(e))
     # Combine preprompt and text if preprompt exists
     full_text = f"{preprompt}\n\n{text}" if preprompt else text
     inputs = tokenizer(full_text, return_tensors="pt").to(model.device)
     # Calculate how many tokens belong to the preprompt so we can strip them later
+    num_preprompt_tokens = 0
     if preprompt:
         p_toks = tokenizer(f"{preprompt}\n\n")["input_ids"]
         num_preprompt_tokens = len(p_toks)
+    elif (
+        tokenizer.bos_token_id is not None
+        and len(inputs["input_ids"][0]) > 0
+        and inputs["input_ids"][0][0] == tokenizer.bos_token_id
+    ):
+        num_preprompt_tokens = 1  # Just the bos token
     with torch.no_grad():
         # Ensure we ask the model to output attentions explicitly
         outputs = model(**inputs, output_attentions=True)
     # Check if attentions are actually returned
     if not outputs.attentions:
         print("Warning: Model did not return attentions.")
         return {"words": []}
     num_layers = len(outputs.attentions)
     selected_layers = request.layers
     if not selected_layers:
+        preset = request.layer_preset
+        if preset == "all":
+            selected_layers = list(range(num_layers))
+        elif preset == "first":
+            selected_layers = list(range(0, max(1, num_layers // 4)))
+        elif preset == "last":
+            selected_layers = list(range(num_layers - (num_layers // 4), num_layers))
+        else:  # default to "middle"
+            start_layer = num_layers // 4
+            end_layer = num_layers - (num_layers // 4)
+            selected_layers = list(range(start_layer, end_layer))
     selected_layers = [l for l in selected_layers if 0 <= l < num_layers]
     if not selected_layers:
         selected_layers = [num_layers - 1]
     stacked_attentions = torch.stack([outputs.attentions[l] for l in selected_layers])
+    avg_attention = stacked_attentions.mean(dim=(0, 2))[0]
     # 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:
         text_importance = importance[num_preprompt_tokens:]
         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,
             # 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
         normalized_scores = normalized_scores.clip(0, 1)
     else:
         normalized_scores = [1.0] * len(importance)
     input_ids = inputs["input_ids"][0].tolist()
     tokens = tokenizer.convert_ids_to_tokens(input_ids)
+    # Check if first token is BOS
+    has_bos = (input_ids[0] == tokenizer.bos_token_id) if len(input_ids) > 0 else False
     result = []
     for i, t in enumerate(tokens):
         # Decode properly
         word = tokenizer.decode([input_ids[i]])
+        # Byte fallback handling: if the token is a byte fallback, decode the byte
+        if t.startswith("<0x") and t.endswith(">"):
+            # Just ignore printing these raw bytes out since they render ugly
+            # We'll rely on word or fallback to empty
+            word = ""
+            t = ""
         # Special check for Gemma, decoding often removes spaces incorrectly or leaves tokens empty
         # Let's clean the raw token just in case
+        raw_clean = t.replace("\u2581", " ")
         # We will pass both decoded word and raw cleaned token to frontend to help render
+        result.append(
+            {"token": raw_clean, "word": word, "score": float(normalized_scores[i])}
+        )
+    # Return the actual text tokens. Keep <bos> if it exists.
+    if num_preprompt_tokens > 0 and len(result) > num_preprompt_tokens:
+        if has_bos:
+            result = [result[0]] + result[num_preprompt_tokens:]
+        else:
+            result = result[num_preprompt_tokens:]
     return {"words": result}
 if __name__ == "__main__":
     port = int(os.environ.get("PORT", 7860))
+    uvicorn.run("main:app", host="0.0.0.0", port=port, reload=True)

static/index.html CHANGED Viewed

@@ -247,21 +247,18 @@
                 </div>
                 <div>
-                    <label style="display:block; font-weight: 600; margin-bottom: 0.5rem; color: #44403c;">
-                        Network Layers (Gemma 2B: 18 Layers)
                     </label>
                     <p style="font-size: 0.85rem; color: #78716c; margin-top: 0; margin-bottom: 0.5rem;">
-                        Select which layers to average attention scores from. Middle layers generally capture the best semantic meaning.
                     </p>
-                    <div style="display: flex; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap;">
-                        <button class="layer-preset" onclick="setLayerPreset('middle')" style="padding: 0.25rem 0.5rem; font-size: 0.8rem; background: #e7e5df; color: #44403c; border-radius: 0.25rem;">Middle Layers</button>
-                        <button class="layer-preset" onclick="setLayerPreset('all')" style="padding: 0.25rem 0.5rem; font-size: 0.8rem; background: #e7e5df; color: #44403c; border-radius: 0.25rem;">All Layers</button>
-                        <button class="layer-preset" onclick="setLayerPreset('first')" style="padding: 0.25rem 0.5rem; font-size: 0.8rem; background: #e7e5df; color: #44403c; border-radius: 0.25rem;">First Layer</button>
-                        <button class="layer-preset" onclick="setLayerPreset('last')" style="padding: 0.25rem 0.5rem; font-size: 0.8rem; background: #e7e5df; color: #44403c; border-radius: 0.25rem;">Last Layer</button>
-                    </div>
-                    <div id="layer-checkboxes" style="display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
-                        <!-- Checkboxes generated by JS -->
-                    </div>
                 </div>
             </details>
@@ -402,6 +399,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');
@@ -410,48 +408,7 @@
         const loading = document.getElementById('loading');
         let currentTokens = [];
-        // Generate Layer Checkboxes
-        const layerContainer = document.getElementById('layer-checkboxes');
-        for(let i = 0; i < 18; i++) {
-            const label = document.createElement('label');
-            label.style.display = 'flex';
-            label.style.alignItems = 'center';
-            label.style.gap = '0.25rem';
-            label.style.fontSize = '0.85rem';
-            label.style.cursor = 'pointer';
-            const cb = document.createElement('input');
-            cb.type = 'checkbox';
-            cb.value = i;
-            cb.className = 'layer-cb';
-            label.appendChild(cb);
-            label.appendChild(document.createTextNode(`L${i}`));
-            layerContainer.appendChild(label);
-        }
-        // Presets Logic
-        window.setLayerPreset = function(preset) {
-            const checkboxes = document.querySelectorAll('.layer-cb');
-            checkboxes.forEach(cb => cb.checked = false);
-            if(preset === 'all') {
-                checkboxes.forEach(cb => cb.checked = true);
-            } else if (preset === 'first') {
-                checkboxes[0].checked = true;
-            } else if (preset === 'last') {
-                checkboxes[17].checked = true;
-            } else if (preset === 'middle') {
-                // Middle 50% for 18 layers is ~4 through 13
-                for(let i = 4; i <= 13; i++) {
-                    checkboxes[i].checked = true;
-                }
-            }
-        };
-        // Set middle as default
-        setLayerPreset('middle');
         thresholdSlider.addEventListener('input', (e) => {
             thresholdVal.textContent = parseFloat(e.target.value).toFixed(2);
             renderTokens();
@@ -463,15 +420,10 @@
             const text = inputArea.value.trim();
             const preprompt = prepromptInput.value.trim();
             const saliencyMode = saliencyModeInput.value;
             const modelVersion = "2b";
-            const checkedLayers = Array.from(document.querySelectorAll('.layer-cb:checked')).map(cb => parseInt(cb.value));
             if (!text) return;
-            if (checkedLayers.length === 0) {
-                alert("Please select at least one layer!");
-                return;
-            }
             analyzeBtn.disabled = true;
             loading.style.display = 'block';
@@ -501,7 +453,7 @@
                 const response = await fetch(`/analyze/${modelVersion}`, {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ text, preprompt, layers: checkedLayers, saliency_mode: saliencyMode })
                 });
                 isFetching = false;

                 </div>
                 <div>
+                    <label for="layer-preset" style="display:block; font-weight: 600; margin-bottom: 0.5rem; color: #44403c;">
+                        Network Layers
                     </label>
                     <p style="font-size: 0.85rem; color: #78716c; margin-top: 0; margin-bottom: 0.5rem;">
+                        Select which section of the network's layers to extract attention scores from. Middle layers generally capture the best semantic meaning.
                     </p>
+                    <select id="layer-preset" 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="middle" selected>Middle Layers (Semantic focus)</option>
+                        <option value="first">First Few Layers (Lexical/Syntax focus)</option>
+                        <option value="last">Last Few Layers (Output formatting focus)</option>
+                        <option value="all">All Layers (Averaged)</option>
+                    </select>
                 </div>
             </details>
         const inputArea = document.getElementById('text-input');
         const prepromptInput = document.getElementById('preprompt');
         const saliencyModeInput = document.getElementById('saliency-mode');
+        const layerPresetInput = document.getElementById('layer-preset');
         const analyzeBtn = document.getElementById('analyze-btn');
         const thresholdSlider = document.getElementById('threshold');
         const thresholdVal = document.getElementById('threshold-val');
         const loading = document.getElementById('loading');
         let currentTokens = [];
         thresholdSlider.addEventListener('input', (e) => {
             thresholdVal.textContent = parseFloat(e.target.value).toFixed(2);
             renderTokens();
             const text = inputArea.value.trim();
             const preprompt = prepromptInput.value.trim();
             const saliencyMode = saliencyModeInput.value;
+            const layerPreset = layerPresetInput.value;
             const modelVersion = "2b";
             if (!text) return;
             analyzeBtn.disabled = true;
             loading.style.display = 'block';
                 const response = await fetch(`/analyze/${modelVersion}`, {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ text, preprompt, layer_preset: layerPreset, saliency_mode: saliencyMode })
                 });
                 isFetching = false;

test_bos.py ADDED Viewed

	@@ -0,0 +1,4 @@

+from transformers import AutoTokenizer
+tokenizer = AutoTokenizer.from_pretrained("unsloth/gemma-4-E2B", extra_special_tokens={})
+print("add_bos_token:", tokenizer.add_bos_token)
+print("tokens:", tokenizer("hello")["input_ids"])

test_gguf.py ADDED Viewed

	@@ -0,0 +1,21 @@

+from transformers import AutoTokenizer, AutoModelForCausalLM
+import torch
+model_id = "unsloth/gemma-4-26B-A4B-it-GGUF"
+gguf_file = "gemma-4-26B-A4B-it-UD-Q4_K_XL.gguf"
+print("Loading tokenizer...")
+tokenizer = AutoTokenizer.from_pretrained(model_id, gguf_file=gguf_file)
+print("Loading model...")
+model = AutoModelForCausalLM.from_pretrained(
+    model_id,
+    gguf_file=gguf_file,
+    device_map="auto"
+)
+print(f"Model loaded on device {model.device}, dtype: {model.dtype}")
+inputs = tokenizer("Hello world", return_tensors="pt").to(model.device)
+with torch.no_grad():
+    out = model(**inputs, output_attentions=True)
+print("Attentions returned:", len(out.attentions) if out.attentions else "No")

test_load.py ADDED Viewed

	@@ -0,0 +1,10 @@

+from transformers import AutoTokenizer, AutoModelForCausalLM
+try:
+    hf_model_id = "unsloth/gemma-4-E2B"
+    print("Loading tokenizer...")
+    tokenizer = AutoTokenizer.from_pretrained(hf_model_id)
+    print("Loading model...")
+    model = AutoModelForCausalLM.from_pretrained(hf_model_id)
+except Exception as e:
+    import traceback
+    traceback.print_exc()

test_model.py ADDED Viewed

	@@ -0,0 +1,9 @@

+import traceback
+from transformers import AutoTokenizer, AutoModelForCausalLM
+try:
+    print("Loading Tokenizer...")
+    AutoTokenizer.from_pretrained("unsloth/gemma-4-E2B")
+    print("Loading Model...")
+    AutoModelForCausalLM.from_pretrained("unsloth/gemma-4-E2B")
+except Exception as e:
+    traceback.print_exc()

test_model2.py ADDED Viewed

	@@ -0,0 +1,8 @@

+from transformers import AutoTokenizer
+try:
+    print("Loading Tokenizer with empty dict override...")
+    AutoTokenizer.from_pretrained("unsloth/gemma-4-E2B", extra_special_tokens={})
+    print("Loaded!")
+except Exception as e:
+    import traceback
+    traceback.print_exc()

test_tok_issue.py ADDED Viewed

	@@ -0,0 +1,39 @@

+from transformers import AutoTokenizer
+import numpy as np
+tokenizer = AutoTokenizer.from_pretrained("unsloth/gemma-4-E2B", extra_special_tokens={})
+preprompt = "imagine"
+text = "Japan's railways are the finest in the world.\xa0"
+full_text = f"{preprompt}\n\n{text}" if preprompt else text
+inputs = tokenizer(full_text, return_tensors="pt")
+num_preprompt_tokens = 0
+if preprompt:
+    p_toks = tokenizer(f"{preprompt}\n\n")["input_ids"]
+    num_preprompt_tokens = len(p_toks)
+elif tokenizer.bos_token_id is not None and len(inputs["input_ids"][0]) > 0 and inputs["input_ids"][0][0] == tokenizer.bos_token_id:
+    num_preprompt_tokens = 1
+input_ids = inputs["input_ids"][0].tolist()
+tokens = tokenizer.convert_ids_to_tokens(input_ids)
+has_bos = (input_ids[0] == tokenizer.bos_token_id) if len(input_ids) > 0 else False
+normalized_scores = np.ones(len(tokens))
+result = []
+for i, t in enumerate(tokens):
+    word = tokenizer.decode([input_ids[i]])
+    if t.startswith('<0x') and t.endswith('>'):
+        word = ""
+        t = ""
+    raw_clean = t.replace('\u2581', ' ')
+    result.append({"token": raw_clean, "word": word})
+if num_preprompt_tokens > 0 and len(result) > num_preprompt_tokens:
+    if has_bos:
+        result = [result[0]] + result[num_preprompt_tokens:]
+    else:
+        result = result[num_preprompt_tokens:]
+print([r["token"] for r in result])