improvements

app.py

@@ -141,6 +141,7 @@ def load_precomputed_example():
 
     if html_path.exists() and metadata_path.exists():
         import json
+
         with open(html_path, "r", encoding="utf-8") as f:
             _precomputed_html = f.read()
         with open(metadata_path, "r", encoding="utf-8") as f:
@@ -176,6 +177,7 @@ def initialize_models():
 
     # Initialize stats manager
     from core.inference_stats import InferenceStatsManager
+
     _stats_manager = InferenceStatsManager()
 
     print("Models loaded successfully!")
@@ -186,11 +188,20 @@ def wrap_html_in_iframe(html: str) -> str:
     # For srcdoc attribute, we only need to escape quotes
     # The HTML entities inside (like ", 
) should remain as-is
     escaped = html.replace('"', """)
+    onload_js = (
+        "(function(f){"
+        "function r(){try{var d=f.contentWindow.document;"
+        "if(!d)return;var h=Math.max(d.body.scrollHeight,d.documentElement.scrollHeight);"
+        "f.style.height=(h+2)+'px';}catch(e){}}"
+        "r();setTimeout(r,50);setTimeout(r,200);"
+        "})(this)"
+    )
     return f"""
-    <div style="width:100%;height:700px;border:1px solid #ddd;border-radius:8px;overflow:hidden;">
+    <div style="width:100%;border:1px solid #ddd;border-radius:8px;overflow:hidden;">
         <iframe srcdoc="{escaped}"
-                style="width:100%;height:100%;border:none;"
-                sandbox="allow-scripts"></iframe>
+                style="width:100%;border:none;height:400px;"
+                sandbox="allow-scripts allow-same-origin"
+                onload="{onload_js}"></iframe>
     </div>
     """
 
@@ -307,6 +318,23 @@ with gr.Blocks(
     #input-text textarea {
         font-family: Consolas, 'Courier New', monospace;
     }
+    .gr-accordion-content {
+        max-height: none !important;
+        height: auto !important;
+        overflow: visible !important;
+    }
+    .gr-accordion-content > div {
+        max-height: none !important;
+        height: auto !important;
+        overflow: visible !important;
+    }
+    .gr-accordion-content .prose,
+    .gr-accordion-content .markdown,
+    .gr-accordion-content .md {
+        max-height: none !important;
+        height: auto !important;
+        overflow: visible !important;
+    }
     """,
 ) as demo:
     gr.HTML(
@@ -346,6 +374,29 @@ with gr.Blocks(
         with gr.Column():
             output_html = gr.HTML(label="Visualization")
 
+    with gr.Accordion("How to calculate compression rate?", open=False):
+        gr.Markdown(
+            r"""
+The compression rate $R(t)$ represents the ratio of the compressed bitstream length to the original data size. It is derived from the model's negative log-likelihood loss $\mathcal{L}_{\text{NLL}}(t) = -\ln P(t)$:
+
+$$
+R(t) = \frac{\mathcal{L}_{\text{NLL}}(t)}{\ln 2 \cdot 8 \cdot L(t)} \times 100\%
+$$
+
+where $L(t)$ is the token length in bytes, and the factor $(\ln 2 \cdot 8)^{-1}$ normalizes the loss from nats to percentage of the original data size.
+
+**Example.** For a 1-byte token ($L=1$) with probability $P(t) = 0.5$:
+
+$$
+R(t) = \frac{-\ln(0.5)}{\ln 2 \cdot 8 \cdot 1} \times 100\% \approx 12.5\%
+$$
+""",
+            latex_delimiters=[
+                {"left": "$$", "right": "$$", "display": True},
+                {"left": "$", "right": "$", "display": False},
+            ],
+        )
+
     # Event handlers
     clear_btn.click(fn=clear_inputs, outputs=[text_input, output_html])
 

core/render_model.py

@@ -38,6 +38,7 @@ class TokenInfo:
     model_tokens: Dict[str, List[List[Any]]] = field(default_factory=dict)
     loss: Dict[str, float] = field(default_factory=dict)
     topk: Dict[str, Any] = field(default_factory=dict)
+    raw_delta: float = 0.0
     tuned_delta: float = 0.0
 
 

precomputed/example_metadata.json

@@ -1,7 +1,7 @@
 {
   "example_text": "The Bitter Lesson\nRich Sutton\nMarch 13, 2019\nThe biggest lesson that can be read from 70 years of AI research is that general methods that leverage computation are ultimately the most effective, and by a large margin. The ultimate reason for this is Moore's law, or rather its generalization of continued exponentially falling cost per unit of computation. Most AI research has been conducted as if the computation available to the agent were constant (in which case leveraging human knowledge would be one of the only ways to improve performance) but, over a slightly longer time than a typical research project, massively more computation inevitably becomes available. Seeking an improvement that makes a difference in the shorter term, researchers seek to leverage their human knowledge of the domain, but the only thing that matters in the long run is the leveraging of computation. These two need not run counter to each other, but in practice they tend to. Time spent on one is time not spent on the other. There are psychological commitments to investment in one approach or the other. And the human-knowledge approach tends to complicate methods in ways that make them less suited to taking advantage of general methods leveraging computation.  There were many examples of AI researchers' belated learning of this bitter lesson, and it is instructive to review some of the most prominent.\n\nIn computer chess, the methods that defeated the world champion, Kasparov, in 1997, were based on massive, deep search. At the time, this was looked upon with dismay by the majority of computer-chess researchers who had pursued methods that leveraged human understanding of the special structure of chess. When a simpler, search-based approach with special hardware and software proved vastly more effective, these human-knowledge-based chess researchers were not good losers. They said that ``brute force\" search may have won this time, but it was not a general strategy, and anyway it was not how people played chess. These researchers wanted methods based on human input to win and were disappointed when they did not.\n\nA similar pattern of research progress was seen in computer Go, only delayed by a further 20 years. Enormous initial efforts went into avoiding search by taking advantage of human knowledge, or of the special features of the game, but all those efforts proved irrelevant, or worse, once search was applied effectively at scale. Also important was the use of learning by self play to learn a value function (as it was in many other games and even in chess, although learning did not play a big role in the 1997 program that first beat a world champion). Learning by self play, and learning in general, is like search in that it enables massive computation to be brought to bear. Search and learning are the two most important classes of techniques for utilizing massive amounts of computation in AI research. In computer Go, as in computer chess, researchers' initial effort was directed towards utilizing human understanding (so that less search was needed) and only much later was much greater success had by embracing search and learning.\n\nIn speech recognition, there was an early competition, sponsored by DARPA, in the 1970s. Entrants included a host of special methods that took advantage of human knowledge---knowledge of words, of phonemes, of the human vocal tract, etc. On the other side were newer methods that were more statistical in nature and did much more computation, based on hidden Markov models (HMMs). Again, the statistical methods won out over the human-knowledge-based methods. This led to a major change in all of natural language processing, gradually over decades, where statistics and computation came to dominate the field. The recent rise of deep learning in speech recognition is the most recent step in this consistent direction. Deep learning methods rely even less on human knowledge, and use even more computation, together with learning on huge training sets, to produce dramatically better speech recognition systems. As in the games, researchers always tried to make systems that worked the way the researchers thought their own minds worked---they tried to put that knowledge in their systems---but it proved ultimately counterproductive, and a colossal waste of researcher's time, when, through Moore's law, massive computation became available and a means was found to put it to good use.\n\nIn computer vision, there has been a similar pattern. Early methods conceived of vision as searching for edges, or generalized cylinders, or in terms of SIFT features. But today all this is discarded. Modern deep-learning neural networks use only the notions of convolution and certain kinds of invariances, and perform much better.\n\nThis is a big lesson. As a field, we still have not thoroughly learned it, as we are continuing to make the same kind of mistakes. To see this, and to effectively resist it, we have to understand the appeal of these mistakes. We have to learn the bitter lesson that building in how we think we think does not work in the long run. The bitter lesson is based on the historical observations that 1) AI researchers have often tried to build knowledge into their agents, 2) this always helps in the short term, and is personally satisfying to the researcher, but 3) in the long run it plateaus and even inhibits further progress, and 4) breakthrough progress eventually arrives by an opposing approach based on scaling computation by search and learning. The eventual success is tinged with bitterness, and often incompletely digested, because it is success over a favored, human-centric approach.\n\nOne thing that should be learned from the bitter lesson is the great power of general purpose methods, of methods that continue to scale with increased computation even as the available computation becomes very great. The two methods that seem to scale arbitrarily in this way are search and learning.\n\nThe second general point to be learned from the bitter lesson is that the actual contents of minds are tremendously, irredeemably complex; we should stop trying to find simple ways to think about the contents of minds, such as simple ways to think about space, objects, multiple agents, or symmetries. All these are part of the arbitrary, intrinsically-complex, outside world. They are not what should be built in, as their complexity is endless; instead we should build in only the meta-methods that can find and capture this arbitrary complexity. Essential to these methods is that they can find good approximations, but the search for them should be by our methods, not by us. We want AI agents that can discover like we can, not which contain what we have discovered. Building in our discoveries only makes it harder to see how the discovering process can be done.\n",
-  "qwen_inference_time": 19.49976086616516,
-  "rwkv_inference_time": 29.02472949028015,
+  "qwen_inference_time": 22.259804010391235,
+  "rwkv_inference_time": 30.444334983825684,
   "qwen_compression_rate": 48.14428559434192,
   "rwkv_compression_rate": 47.62502588510778
 }

visualization/assets/main.css

@@ -25,14 +25,31 @@
         }
         .legend {
             display: flex;
-            gap: 15px;
+            flex-direction: column;
+            gap: 6px;
             margin-top: 10px;
         }
+        .legend-row {
+            display: flex;
+            gap: 15px;
+            align-items: center;
+            flex-wrap: wrap;
+        }
         .legend-item {
             display: flex;
             align-items: center;
             gap: 5px;
         }
+        .legend-toggle label {
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
+            color: #c8c8c8;
+            font-size: 12px;
+        }
+        .legend-toggle input[type="radio"] {
+            margin: 0 2px 0 6px;
+        }
         .legend-box {
             width: 20px;
             height: 12px;

visualization/assets/main.js

@@ -51,6 +51,7 @@
                 span.className = 'token';
                 span.dataset.tokenIdx = String(idx);
                 span.dataset.tunedDelta = (token && typeof token.tuned_delta === 'number') ? String(token.tuned_delta) : '0';
+                span.dataset.rawDelta = (token && typeof token.raw_delta === 'number') ? String(token.raw_delta) : '';
                 const kind = (token && token.display && token.display.kind) ? token.display.kind : 'normal';
                 const text = (token && token.display && typeof token.display.text === 'string') ? token.display.text : '';
                 const hasVisible = (() => {
@@ -531,6 +532,11 @@
 
         const slider = document.getElementById('color-range-slider');
         const rangeValue = document.getElementById('color-range-value');
+        const deltaModeInputs = document.querySelectorAll('input[name="delta-mode"]');
+        const legendBetter = document.getElementById('legend-better');
+        const legendEqual = document.getElementById('legend-equal');
+        const legendWorse = document.getElementById('legend-worse');
+        let deltaMode = 'relative';
 
         // Collect all tuned_delta values
         const tokenData = [];
@@ -541,19 +547,17 @@
                 return;
             }
             const tunedDelta = parseFloat(token.dataset.tunedDelta);
+            let rawDelta = parseFloat(token.dataset.rawDelta);
+            if (isNaN(rawDelta)) {
+                rawDelta = tunedDelta;
+            }
             if (!isNaN(tunedDelta)) {
-                tokenData.push({ token, tunedDelta, absDelta: Math.abs(tunedDelta) });
+                tokenData.push({ token, tunedDelta, rawDelta });
             }
         });
-
-        // Calculate max_abs_tuned_delta for normalization
-        const maxAbsDelta = Math.max(...tokenData.map(d => d.absDelta), 1e-9);
-
-        // Sort by |tuned_delta| to get rankings
-        const sortedByAbs = [...tokenData].sort((a, b) => b.absDelta - a.absDelta);
-        sortedByAbs.forEach((item, rank) => {
-            item.rank = rank;  // rank 0 = largest deviation
-        });
+        function getDeltaValue(item) {
+            return deltaMode === 'absolute' ? item.rawDelta : item.tunedDelta;
+        }
 
         function tunedDeltaToColor(tunedDelta, maxAbsDelta, exponent) {
             // Normalize to [-1, 1]
@@ -577,6 +581,13 @@
 
         function updateColors(colorRangePercent) {
             // colorRangePercent: 0-100, represents the proportion of tokens to color
+            const absValues = tokenData.map(item => Math.abs(getDeltaValue(item)));
+            const maxAbsDelta = Math.max(...absValues, 1e-9);
+
+            const sortedByAbs = [...tokenData].sort((a, b) => Math.abs(getDeltaValue(b)) - Math.abs(getDeltaValue(a)));
+            sortedByAbs.forEach((item, rank) => {
+                item.rank = rank;
+            });
             const colorCount = Math.round(tokenData.length * colorRangePercent / 100);
 
             // Calculate exponent: 100% -> 0.5, 0% -> 1.0
@@ -586,14 +597,15 @@
             let maxAbsDeltaInRange = 1e-9;
             tokenData.forEach(item => {
                 if (item.rank < colorCount) {
-                    maxAbsDeltaInRange = Math.max(maxAbsDeltaInRange, item.absDelta);
+                    maxAbsDeltaInRange = Math.max(maxAbsDeltaInRange, Math.abs(getDeltaValue(item)));
                 }
             });
 
             tokenData.forEach(item => {
                 if (item.rank < colorCount) {
                     // Use dynamic normalization based on colored range
-                    item.token.style.backgroundColor = tunedDeltaToColor(item.tunedDelta, maxAbsDeltaInRange, exponent);
+                    const deltaValue = getDeltaValue(item);
+                    item.token.style.backgroundColor = tunedDeltaToColor(deltaValue, maxAbsDeltaInRange, exponent);
                 } else {
                     // Outside color range, white
                     item.token.style.backgroundColor = 'rgb(255, 255, 255)';
@@ -604,12 +616,37 @@
             });
         }
 
+        function updateLegendText() {
+            if (!legendBetter || !legendEqual || !legendWorse) return;
+            if (deltaMode === 'absolute') {
+                legendBetter.textContent = 'RWKV better';
+                legendEqual.textContent = 'Equal';
+                legendWorse.textContent = 'RWKV worse';
+            } else {
+                legendBetter.textContent = 'RWKV better than avg delta';
+                legendEqual.textContent = 'Equal to avg delta';
+                legendWorse.textContent = 'RWKV worse than avg delta';
+            }
+        }
+
         slider.addEventListener('input', (e) => {
             const val = parseFloat(e.target.value);
             rangeValue.textContent = val.toFixed(1) + '%';
             updateColors(val);
         });
 
+        deltaModeInputs.forEach(input => {
+            input.addEventListener('change', (e) => {
+                const target = e.target;
+                if (target && target.checked) {
+                    deltaMode = target.value === 'absolute' ? 'absolute' : 'relative';
+                    updateLegendText();
+                    updateColors(parseFloat(slider.value));
+                }
+            });
+        });
+
+        updateLegendText();
         // Apply default color range on page load
         updateColors(10);
     

visualization/html_generator.py

@@ -534,6 +534,7 @@ def generate_comparison_html(
         token_deltas = deltas[byte_start:byte_end]
         avg_token_delta = sum(token_deltas) / len(token_deltas) if token_deltas else 0
         tuned_delta = avg_token_delta - avg_delta
+        raw_delta = avg_token_delta
 
         # Initial rendering uses white color, JavaScript will apply colors based on slider
         r, g, b = 255, 255, 255
@@ -588,6 +589,7 @@ def generate_comparison_html(
                     "rwkv": topk_a_data,
                     "qwen": topk_b_data,
                 },
+                raw_delta=raw_delta,
                 tuned_delta=tuned_delta,
             )
         )
@@ -622,22 +624,31 @@ def generate_comparison_html(
                 <div style="color: {delta_color}">Avg Delta: {avg_delta_compression:+.2f}%</div>
             </div>
             <div class="legend">
-                <div class="legend-item">
-                    <div class="legend-box" style="background-color: rgb(77, 255, 77)"></div>
-                    <span>RWKV better than avg</span>
+                <div class="legend-row">
+                    <div class="legend-item legend-toggle">
+                        <span style="color: #aaa;">Coloring Mode:</span>
+                        <label><input type="radio" name="delta-mode" value="relative" checked> vs Avg Delta</label>
+                        <label><input type="radio" name="delta-mode" value="absolute"> Absolute</label>
+                    </div>
+                    <div class="legend-item">
+                        <span style="color: #aaa;">Color Range:</span>
+                        <input type="range" id="color-range-slider" min="0" max="100" value="10" step="0.1" style="width: 200px; vertical-align: middle;">
+                        <span id="color-range-value" style="color: #fff; min-width: 45px; display: inline-block;">10%</span>
+                    </div>
                 </div>
-                <div class="legend-item">
-                    <div class="legend-box" style="background-color: rgb(255, 255, 255)"></div>
-                    <span>Equal to avg</span>
-                </div>
-                <div class="legend-item">
-                    <div class="legend-box" style="background-color: rgb(255, 77, 77)"></div>
-                    <span>RWKV worse than avg</span>
-                </div>
-                <div class="legend-item" style="margin-left: 20px;">
-                    <span style="color: #aaa;">Color Range:</span>
-                    <input type="range" id="color-range-slider" min="0" max="100" value="10" step="0.1" style="width: 200px; vertical-align: middle;">
-                    <span id="color-range-value" style="color: #fff; min-width: 45px; display: inline-block;">10%</span>
+                <div class="legend-row">
+                    <div class="legend-item">
+                        <div class="legend-box" style="background-color: rgb(77, 255, 77)"></div>
+                        <span id="legend-better">RWKV better than avg delta</span>
+                    </div>
+                    <div class="legend-item">
+                        <div class="legend-box" style="background-color: rgb(255, 255, 255)"></div>
+                        <span id="legend-equal">Equal to avg delta</span>
+                    </div>
+                    <div class="legend-item">
+                        <div class="legend-box" style="background-color: rgb(255, 77, 77)"></div>
+                        <span id="legend-worse">RWKV worse than avg delta</span>
+                    </div>
                 </div>
             </div>
         </div>