bug fix and improvements

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": 20.516680479049683,
-  "rwkv_inference_time": 31.14354944229126,
+  "qwen_inference_time": 20.116603136062622,
+  "rwkv_inference_time": 31.04107141494751,
   "qwen_compression_rate": 48.14428559434192,
   "rwkv_compression_rate": 47.62502588510778
 }

visualization/html_generator.py

@@ -166,9 +166,13 @@ def generate_comparison_html(
         HTML string with interactive visualization
     """
 
-    def decode_token(token_id: int, tokenizer, model_type: str) -> str:
-        """Decode a single token ID to text using the appropriate tokenizer."""
+    def decode_token(token_id: int, tokenizer, model_type: str) -> Tuple[str, bool]:
+        """Decode a single token ID to text using the appropriate tokenizer.
+        Returns (text, is_raw_bytes).
+        """
         def bytes_to_hex_str(byte_values) -> str:
+            if isinstance(byte_values, list):
+                byte_values = bytes(byte_values)
             return "".join([f"\\x{b:02x}" for b in byte_values])
 
         def get_bytes_converter(tokenizer):
@@ -189,7 +193,7 @@ def generate_comparison_html(
             return _token_bytes_converter_cache.get(key)
 
         if tokenizer is None:
-            return f"[{token_id}]"
+            return f"[{token_id}]", False
         try:
             if model_type in ["rwkv", "rwkv7"]:
                 # RWKV tokenizer provides raw bytes
@@ -197,10 +201,10 @@ def generate_comparison_html(
                 if token_bytes:
                     try:
                         decoded = token_bytes.decode("utf-8")
-                        return decoded if decoded else f"[{token_id}]"
+                        return (decoded if decoded else f"[{token_id}]"), False
                     except UnicodeDecodeError:
-                        return bytes_to_hex_str(token_bytes)
-                return f"[{token_id}]"
+                        return bytes_to_hex_str(token_bytes), True
+                return f"[{token_id}]", False
             else:
                 # HuggingFace tokenizer: prefer raw bytes when possible
                 converter = get_bytes_converter(tokenizer)
@@ -213,17 +217,17 @@ def generate_comparison_html(
                 if token_bytes:
                     try:
                         decoded = bytes(token_bytes).decode("utf-8")
-                        return decoded if decoded else f"[{token_id}]"
+                        return (decoded if decoded else f"[{token_id}]"), False
                     except UnicodeDecodeError:
-                        return bytes_to_hex_str(token_bytes)
+                        return bytes_to_hex_str(token_bytes), True
 
                 decoded = tokenizer.decode([token_id])
                 if decoded and "�" not in decoded:
-                    return decoded
-                return decoded if decoded else f"[{token_id}]"
+                    return decoded, False
+                return (decoded if decoded else f"[{token_id}]"), False
         except Exception as e:
             print(f"Warning: Failed to decode token {token_id} ({model_type}): {e}")
-            return f"[{token_id}]"
+            return f"[{token_id}]", False
 
     def build_byte_to_token_map(text: str, tokenizer, model_type: str):
         """Build mapping from byte position to token index using the correct tokenizer.
@@ -384,30 +388,30 @@ def generate_comparison_html(
         model_b_token_idx = find_token_for_byte(byte_start, model_b_token_ranges)
 
         # Build token info strings showing all tokens in this byte range
-        def token_bytes_to_display_text(token_bytes: bytes) -> str:
+        def token_bytes_to_display_text(token_bytes: bytes) -> Tuple[str, bool]:
             if token_bytes is None:
-                return ""
+                return "", False
             if isinstance(token_bytes, list):
                 token_bytes = bytes(token_bytes)
             if isinstance(token_bytes, str):
-                return token_bytes
+                return token_bytes, False
             if len(token_bytes) == 0:
-                return ""
+                return "", False
             try:
-                return token_bytes.decode("utf-8")
+                return token_bytes.decode("utf-8"), False
             except UnicodeDecodeError:
-                return "".join([f"\\x{b:02x}" for b in token_bytes])
+                return "".join([f"\\x{b:02x}" for b in token_bytes]), True
 
         # Model A (RWKV7) - tokens overlapping this byte range
         model_a_info = ""
         if token["rwkv_tokens"]:
-            model_a_list = [[tid, token_bytes_to_display_text(tb)] for tid, tb in token["rwkv_tokens"]]
+            model_a_list = [[tid, *token_bytes_to_display_text(tb)] for tid, tb in token["rwkv_tokens"]]
             model_a_info = base64.b64encode(json.dumps(model_a_list, ensure_ascii=False).encode("utf-8")).decode("ascii")
 
         # Model B (Qwen3) - tokens overlapping this byte range
         model_b_info = ""
         if token["qwen_tokens"]:
-            model_b_list = [[tid, token_bytes_to_display_text(tb)] for tid, tb in token["qwen_tokens"]]
+            model_b_list = [[tid, *token_bytes_to_display_text(tb)] for tid, tb in token["qwen_tokens"]]
             model_b_info = base64.b64encode(json.dumps(model_b_list, ensure_ascii=False).encode("utf-8")).decode("ascii")
 
         raw_bytes = list(text_bytes[byte_start:byte_end])
@@ -435,13 +439,13 @@ def generate_comparison_html(
                             actual_id,
                             rank,
                             actual_prob,
-                            [[tid, prob, decode_token(tid, tokenizer_a, model_type_a)] for tid, prob in topk_list],
+                            [[tid, prob, *decode_token(tid, tokenizer_a, model_type_a)] for tid, prob in topk_list],
                         ]
                     else:
                         decoded_pred = [
                             pred[0],
                             pred[1],
-                            [[tid, prob, decode_token(tid, tokenizer_a, model_type_a)] for tid, prob in pred[2]],
+                            [[tid, prob, *decode_token(tid, tokenizer_a, model_type_a)] for tid, prob in pred[2]],
                         ]
                     topk_a_json = base64.b64encode(json.dumps(decoded_pred, ensure_ascii=False).encode("utf-8")).decode("ascii")
                 except Exception as e:
@@ -457,10 +461,10 @@ def generate_comparison_html(
                             actual_id,
                             rank,
                             actual_prob,
-                            [[tid, prob, decode_token(tid, tokenizer_b, model_type_b)] for tid, prob in topk_list],
+                            [[tid, prob, *decode_token(tid, tokenizer_b, model_type_b)] for tid, prob in topk_list],
                         ]
                     else:
-                        decoded_pred = [pred[0], pred[1], [[tid, prob, decode_token(tid, tokenizer_b, model_type_b)] for tid, prob in pred[2]]]
+                        decoded_pred = [pred[0], pred[1], [[tid, prob, *decode_token(tid, tokenizer_b, model_type_b)] for tid, prob in pred[2]]]
                     topk_b_json = base64.b64encode(json.dumps(decoded_pred, ensure_ascii=False).encode("utf-8")).decode("ascii")
                 except Exception as e:
                     pass
@@ -734,6 +738,12 @@ def generate_comparison_html(
             display: inline-block;
             max-width: 100%;
         }}
+        #tooltip .esc-control {{
+            color: #fbbf24;
+        }}
+        #tooltip .esc-raw {{
+            color: #fb7185;
+        }}
         #tooltip .topk-prob {{
             color: #86efac;
             min-width: 45px;
@@ -800,7 +810,30 @@ def generate_comparison_html(
             words.forEach(w => w.classList.remove('highlighted'));
         }}
 
-        function drawLines(hoveredWord) {{
+        function pickRectByY(rects, targetY) {{
+            if (!rects || rects.length === 0) return null;
+            let best = rects[0];
+            let bestDist = Infinity;
+            rects.forEach(r => {{
+                const cy = r.top + r.height / 2;
+                const dist = Math.abs(cy - targetY);
+                if (dist < bestDist) {{
+                    best = r;
+                    bestDist = dist;
+                }}
+            }});
+            return best;
+        }}
+
+        function getAnchorRect(element, targetY) {{
+            const rects = Array.from(element.getClientRects());
+            if (rects.length === 0) return element.getBoundingClientRect();
+            if (rects.length === 1) return rects[0];
+            const picked = pickRectByY(rects, targetY);
+            return picked || rects[0];
+        }}
+
+        function drawLines(hoveredWord, evt) {{
             clearLines();
 
             const wordText = hoveredWord.getAttribute('data-word');
@@ -816,12 +849,13 @@ def generate_comparison_html(
 
             sameWords.forEach(w => w.classList.add('highlighted'));
 
-            const hoveredRect = hoveredWord.getBoundingClientRect();
+            const targetY = evt ? evt.clientY : (hoveredWord.getBoundingClientRect().top + hoveredWord.getBoundingClientRect().height / 2);
+            const hoveredRect = getAnchorRect(hoveredWord, targetY);
             const hoveredX = hoveredRect.left + hoveredRect.width / 2;
             const hoveredY = hoveredRect.top + hoveredRect.height / 2;
 
             previousWords.forEach(prevWord => {{
-                const prevRect = prevWord.getBoundingClientRect();
+                const prevRect = getAnchorRect(prevWord, hoveredY);
                 const prevX = prevRect.left + prevRect.width / 2;
                 const prevY = prevRect.top + prevRect.height / 2;
 
@@ -850,7 +884,7 @@ def generate_comparison_html(
         }}
 
         words.forEach(word => {{
-            word.addEventListener('mouseenter', () => drawLines(word));
+            word.addEventListener('mouseenter', (e) => drawLines(word, e));
             word.addEventListener('mouseleave', clearLines);
         }});
 
@@ -904,6 +938,14 @@ def generate_comparison_html(
                     return out;
                 }}
 
+                function renderEscapedWithControlColor(text) {{
+                    const escaped = (text || '')
+                        .replace(/&/g, '&amp;')
+                        .replace(/</g, '&lt;')
+                        .replace(/>/g, '&gt;');
+                    return escaped.replace(/\\\\(x[0-9a-fA-F]{2}|[nrt])/g, '<span class="esc-control">\\\\$1</span>');
+                }}
+
                 function formatTopkColumn(topkBase64, modelName, titleClass) {{
                     if (!topkBase64) return '<div class="topk-column"><div class="topk-title ' + titleClass + '">' + modelName + '</div><div class="topk-list">N/A</div></div>';
                     try {{
@@ -921,19 +963,30 @@ def generate_comparison_html(
                         html += '<div class="topk-title ' + titleClass + '">' + modelName + '</div>';
                         html += '<div class="topk-list">';
                         topkList.forEach((item, idx) => {{
-                            const [tokenId, prob, tokenText] = item;
+                            const tokenId = item[0];
+                            const prob = item[1];
+                            const tokenText = item[2];
+                            const isRaw = item.length > 3 ? item[3] : false;
                             const isHit = tokenId === actualId;
                             const rankClass = isHit ? 'topk-rank hit' : 'topk-rank';
                             const rawText = (tokenText !== undefined && tokenText !== null) ? tokenText : '';
-                            const visibleText = escapeControlChars(rawText);
-                            const displayText = (visibleText !== '') ? visibleText : ('[' + tokenId + ']');
-                            const escapedText = displayText
-                                .replace(/&/g, '&amp;')
-                                .replace(/</g, '&lt;')
-                                .replace(/>/g, '&gt;');
+                            let displayText = '';
+                            let htmlText = '';
+                            if (isRaw) {{
+                                displayText = (rawText !== '') ? rawText : ('[' + tokenId + ']');
+                                const escapedText = displayText
+                                    .replace(/&/g, '&amp;')
+                                    .replace(/</g, '&lt;')
+                                    .replace(/>/g, '&gt;');
+                                htmlText = '<span class="esc-raw">' + escapedText + '</span>';
+                            }} else {{
+                                const visibleText = escapeControlChars(rawText);
+                                displayText = (visibleText !== '') ? visibleText : ('[' + tokenId + ']');
+                                htmlText = renderEscapedWithControlColor(displayText);
+                            }}
                             html += '<div class="topk-item">';
                             html += '<span class="' + rankClass + '">' + (idx + 1) + '.</span>';
-                            html += '<span class="topk-token" title="ID: ' + tokenId + '">' + escapedText + '</span>';
+                            html += '<span class="topk-token" title="ID: ' + tokenId + '">' + htmlText + '</span>';
                             html += '<span class="topk-prob">' + (prob * 100).toFixed(1) + '%</span>';
                             if (isHit) html += '<span class="topk-hit">✓</span>';
                             html += '</div>';
@@ -967,15 +1020,24 @@ def generate_comparison_html(
                         tokenList.forEach((item) => {{
                             const tokenId = item[0];
                             const tokenText = item[1];
-                            const visible = escapeControlChars(tokenText || '');
-                            const displayText = (visible !== '') ? visible : '';
-                            const escapedText = displayText
-                                .replace(/&/g, '&amp;')
-                                .replace(/</g, '&lt;')
-                                .replace(/>/g, '&gt;');
+                            const isRaw = item.length > 2 ? item[2] : false;
+                            let displayText = '';
+                            let htmlText = '';
+                            if (isRaw) {{
+                                displayText = tokenText || '';
+                                const escapedText = displayText
+                                    .replace(/&/g, '&amp;')
+                                    .replace(/</g, '&lt;')
+                                    .replace(/>/g, '&gt;');
+                                htmlText = '<span class="esc-raw">' + escapedText + '</span>';
+                            }} else {{
+                                const visible = escapeControlChars(tokenText || '');
+                                displayText = (visible !== '') ? visible : '';
+                                htmlText = renderEscapedWithControlColor(displayText);
+                            }}
                             html += '<span class="token-chip-group" title="ID: ' + tokenId + '">';
                             html += '<span class="token-id">[' + tokenId + ']</span>';
-                            html += '<span class="topk-token token-chip">' + escapedText + '</span>';
+                            html += '<span class="topk-token token-chip">' + htmlText + '</span>';
                             html += '</span>';
                         }});
                         html += '</div></div>';