feat: Add support for switching models and the 27b-4a backend

firefox-extension/content.js

@@ -37,18 +37,19 @@ 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', 'apiUrl']);
+    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 {
       // Connect to the configured API Space
-      const response = await fetch(`${apiUrl}/analyze`, {
+      const response = await fetch(`${apiUrl}/analyze/${modelVersion}`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ 
@@ -75,6 +76,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;
       range.insertNode(container);
@@ -93,11 +95,12 @@ browser.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
 });
 
 async function processEntirePage() {
-  const settings = await browser.storage.local.get(['threshold', 'gradientMode', 'preprompt', 'saliencyMode', 'apiUrl']);
+  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];
 
@@ -165,7 +168,7 @@ async function processEntirePage() {
       if (!text.trim()) return;
 
       try {
-        const response = await fetch(`${apiUrl}/analyze`, {
+        const response = await fetch(`${apiUrl}/analyze/${modelVersion}`, {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ 
@@ -187,6 +190,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;
         
@@ -210,6 +214,7 @@ 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];
 
@@ -222,15 +227,16 @@ 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) {
+    if (oldPreprompt !== preprompt || oldMode !== saliencyMode || oldModelVersion !== modelVersion) {
       if (reFetchCount === 0) {
          showToast("Updating FlowRead elements with new settings...", 0);
       }
       try {
-        const response = await fetch(`${apiUrl}/analyze`, {
+        const response = await fetch(`${apiUrl}/analyze/${modelVersion}`, {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ 
@@ -248,6 +254,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;
         reFetchCount++;

firefox-extension/popup.html

@@ -98,6 +98,13 @@
   </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 2B (Fast / Default)</option>
+    <option value="27b-4a">Gemma 27B 4-bit (High Quality)</option>
+  </select>
+  <p class="help" style="margin-top: 0;">Select which LLM to use for saliency analysis.</p>
+
   <label for="api-url">Backend API URL</label>
   <input type="text" id="api-url" placeholder="http://127.0.0.1:8000">
   <p class="help">URL of your FlowRead backend (Local or Hugging Face).</p>

firefox-extension/popup.js

@@ -4,12 +4,13 @@ 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', 'apiUrl'], (res) => {
+  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);
@@ -23,6 +24,9 @@ document.addEventListener('DOMContentLoaded', () => {
     if (res.saliencyMode !== undefined) {
       saliencyModeInput.value = res.saliencyMode;
     }
+    if (res.modelVersion !== undefined) {
+      modelVersionInput.value = res.modelVersion;
+    }
     apiUrlInput.value = res.apiUrl || "http://127.0.0.1:8000";
   });
 
@@ -38,6 +42,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
     };
     

generate_all.py

@@ -0,0 +1,111 @@
+import requests
+import json
+
+texts = [
+    {
+        "id": 1,
+        "topic": "Science",
+        "text": "The human brain is a marvel of biological engineering, containing approximately 86 billion neurons interconnected by trillions of synapses. These neural networks are responsible for everything from basic autonomic functions, like breathing and heart rate, to complex cognitive processes such as memory, emotion, and problem-solving. Neuroplasticity, the brain's ability to reorganize itself by forming new neural connections throughout life, allows humans to learn new skills, recover from injuries, and adapt to changing environments. This extraordinary adaptability is what makes our species so resilient and capable of continuous intellectual growth.",
+        "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?",
+                "options": ["Synaptic generation", "Neurogenesis", "Neuroplasticity", "Cognitive adaptation"],
+                "correct": 2
+            }
+        ]
+    },
+    {
+        "id": 2,
+        "topic": "History",
+        "text": "The Industrial Revolution, which began in Britain in the late 18th century, marked a profound turning point in human history. It initiated the transition from agrarian, handicraft economies to industry and machine manufacturing. The invention of the steam engine, pioneered by figures like James Watt, dramatically increased the efficiency of factories and transportation, revolutionizing the textile industry and leading to the expansion of railways. This era brought about unprecedented economic growth and urbanization, fundamentally altering social structures and paving the way for the modern capitalist system, despite also causing significant social inequalities and poor working conditions initially.",
+        "questions": [
+            {
+                "question": "Where did the Industrial Revolution begin?",
+                "options": ["United States", "France", "Germany", "Britain"],
+                "correct": 3
+            },
+            {
+                "question": "Which invention dramatically increased factory efficiency?",
+                "options": ["The cotton gin", "The telegraph", "The steam engine", "The assembly line"],
+                "correct": 2
+            }
+        ]
+    },
+    {
+        "id": 3,
+        "topic": "Technology",
+        "text": "The James Webb Space Telescope is the largest and most powerful space telescope ever built. Launched in 2021, it operates primarily in the infrared spectrum, allowing it to peer through dense cosmic dust and observe the universe's most distant, early galaxies. Unlike its predecessor, Hubble, JWST orbits the Sun at the second Lagrange point, keeping it constantly shielded from the Sun's heat and light by its massive sunshield. This incredibly cold environment is necessary to prevent the telescope's own infrared emissions from interfering with its highly sensitive observations of exoplanet atmospheres and star formation.",
+        "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?",
+                "options": ["Low Earth Orbit", "The Moon's orbit", "The first Lagrange point", "The second Lagrange point"],
+                "correct": 3
+            }
+        ]
+    }
+]
+
+for t in texts:
+    res = requests.post("http://localhost:7860/analyze", json={"text": t["text"], "layers": [4,5,6,7,8,9,10,11,12,13]})
+    data = res.json()
+    
+    words = []
+    current_word = []
+    current_max = 0
+    
+    for i, item in enumerate(data["words"]):
+        if i == 0 and ("<bos>" in item["token"] or "<bos>" in item["word"]):
+            continue
+            
+        token_str = item["token"]
+        is_whitespace = (token_str.strip() == '')
+        prev_is_whitespace = (current_word[-1]["token"].strip() == '') if len(current_word) > 0 else False
+        
+        if token_str.startswith(" ") or (len(current_word) > 0 and is_whitespace != prev_is_whitespace):
+            if len(current_word) > 0:
+                words.append({"tokens": current_word, "max_score": current_max})
+            current_word = [item]
+            current_max = item["score"]
+        else:
+            current_word.append(item)
+            current_max = max(current_max, item["score"])
+            
+    if len(current_word) > 0:
+         words.append({"tokens": current_word, "max_score": current_max})
+         
+    word_scores = [w["max_score"] for w in words]
+    word_scores.sort()
+    threshold_idx = int(len(word_scores) * 0.60)
+    threshold = word_scores[threshold_idx] if len(word_scores) > 0 else 0
+    
+    binary_html = ""
+    gradient_html = ""
+    
+    for w in words:
+        # Binary
+        className = "token highlighted" if w["max_score"] >= threshold else "token"
+        for item in w["tokens"]:
+            binary_html += f'<span class="{className}">{item["token"]}</span>'
+            
+        # Gradient
+        opacity = 0.4 + (w["max_score"] * 0.6)
+        weight = 400 + int(w["max_score"] * 400)
+        for item in w["tokens"]:
+            gradient_html += f'<span class="token" style="opacity: {opacity:.2f}; font-weight: {weight};">{item["token"]}</span>'
+            
+    t["flowread_html"] = binary_html
+    t["flowread_gradient_html"] = gradient_html
+
+with open("study_texts.json", "w") as f:
+    json.dump(texts, f, indent=4)
+print("Saved to study_texts.json")

main.py

@@ -234,27 +234,61 @@ def get_study_stats():
     }
 
 # --- Saliency API (Existing) ---
-model_id = "google/gemma-2b"
+models = {}
+tokenizers = {}
 
-# Load the model and tokenizer globally.
-# Use MPS if available, otherwise CPU. MPS (Metal Performance Shaders) works well on modern Macs.
-device = torch.device("mps" if torch.backends.mps.is_available() else "cpu")
-print(f"Loading {model_id} on {device}...")
+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}...")
+    try:
+        if model_name == "27b-4a":
+            # Use Gemma 2 27B in 4-bit (requires CUDA)
+            hf_model_id = "google/gemma-2-27b"
+            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
+            hf_model_id = "google/gemma-2b"
+            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
+        return model, tokenizer
+    except Exception as e:
+        print(f"Error loading model {model_name}: {e}")
+        raise e
+
+# Pre-load default 2b
 try:
-    hf_token = os.environ.get("HF_TOKEN")
-    tokenizer = AutoTokenizer.from_pretrained(model_id, token=hf_token)
-    model = AutoModelForCausalLM.from_pretrained(
-        model_id,
-        torch_dtype=torch.bfloat16,
-        attn_implementation="eager",
-        token=hf_token
-    ).to(device)
-    print("Model loaded successfully.")
-except Exception as e:
-    print(f"Error loading model: {e}")
-    print("Make sure you are logged into Hugging Face and have access to the Gemma model.")
-    print("Run `huggingface-cli login` in your terminal.")
+    load_model("2b")
+except:
+    print("Could not preload 2b model.")
 
 class TextRequest(BaseModel):
     text: str
@@ -263,17 +297,27 @@ class TextRequest(BaseModel):
     saliency_mode: str = "local" # "local" or "global"
 
 @app.post("/analyze")
-async def analyze_text(request: TextRequest):
+async def analyze_text_legacy(request: TextRequest):
+    return await analyze_text_model("2b", request)
+
+@app.post("/analyze/{model_name}")
+async def analyze_text_model(model_name: str, request: TextRequest):
     text = request.text
     preprompt = request.preprompt.strip()
     
     if not text.strip():
         return {"tokens": [], "scores": []}
 
+    try:
+        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(device)
+    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>

requirements.txt

@@ -3,4 +3,5 @@ uvicorn
 torch
 transformers
 pydantic
-accelerate
+accelerate
+bitsandbytes

study_texts.json

@@ -0,0 +1,89 @@
+[
+    {
+        "id": 1,
+        "topic": "Science",
+        "text": "The human brain is a marvel of biological engineering, containing approximately 86 billion neurons interconnected by trillions of synapses. These neural networks are responsible for everything from basic autonomic functions, like breathing and heart rate, to complex cognitive processes such as memory, emotion, and problem-solving. Neuroplasticity, the brain's ability to reorganize itself by forming new neural connections throughout life, allows humans to learn new skills, recover from injuries, and adapt to changing environments. This extraordinary adaptability is what makes our species so resilient and capable of continuous intellectual growth.",
+        "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?",
+                "options": [
+                    "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,
+        "topic": "History",
+        "text": "The Industrial Revolution, which began in Britain in the late 18th century, marked a profound turning point in human history. It initiated the transition from agrarian, handicraft economies to industry and machine manufacturing. The invention of the steam engine, pioneered by figures like James Watt, dramatically increased the efficiency of factories and transportation, revolutionizing the textile industry and leading to the expansion of railways. This era brought about unprecedented economic growth and urbanization, fundamentally altering social structures and paving the way for the modern capitalist system, despite also causing significant social inequalities and poor working conditions initially.",
+        "questions": [
+            {
+                "question": "Where did the Industrial Revolution begin?",
+                "options": [
+                    "United States",
+                    "France",
+                    "Germany",
+                    "Britain"
+                ],
+                "correct": 3
+            },
+            {
+                "question": "Which invention dramatically increased factory efficiency?",
+                "options": [
+                    "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,
+        "topic": "Technology",
+        "text": "The James Webb Space Telescope is the largest and most powerful space telescope ever built. Launched in 2021, it operates primarily in the infrared spectrum, allowing it to peer through dense cosmic dust and observe the universe's most distant, early galaxies. Unlike its predecessor, Hubble, JWST orbits the Sun at the second Lagrange point, keeping it constantly shielded from the Sun's heat and light by its massive sunshield. This incredibly cold environment is necessary to prevent the telescope's own infrared emissions from interfering with its highly sensitive observations of exoplanet atmospheres and star formation.",
+        "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?",
+                "options": [
+                    "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>"
+    }
+]

test_tok.py

@@ -0,0 +1,14 @@
+import os
+from transformers import AutoTokenizer
+
+tokenizer = AutoTokenizer.from_pretrained("google/gemma-2b", token=os.environ.get("HF_TOKEN"))
+preprompt = "Focus on numbers"
+text = "The 86 billion neurons."
+full = f"{preprompt}\n\n{text}"
+
+p_tok = tokenizer(preprompt + "\n\n")["input_ids"]
+f_tok = tokenizer(full)["input_ids"]
+print(f"Preprompt tokens: {len(p_tok)}")
+print(f"Full tokens: {len(f_tok)}")
+print("Preprompt tokens:", tokenizer.convert_ids_to_tokens(p_tok))
+print("Full tokens:", tokenizer.convert_ids_to_tokens(f_tok))

test_tok2.py

@@ -0,0 +1,8 @@
+import os
+from transformers import AutoTokenizer
+
+tokenizer = AutoTokenizer.from_pretrained("google/gemma-2b", token=os.environ.get("HF_TOKEN"))
+p = "Hello"
+t = " world" # starts with space
+print("Pre:", tokenizer.convert_ids_to_tokens(tokenizer(p + "\n\n")["input_ids"]))
+print("Full:", tokenizer.convert_ids_to_tokens(tokenizer(p + "\n\n" + t)["input_ids"]))