diff --git "a/precomputed/example_visualization.html" "b/precomputed/example_visualization.html" --- "a/precomputed/example_visualization.html" +++ "b/precomputed/example_visualization.html" @@ -97,14 +97,21 @@ .token:hover { outline: 1px dashed #666; } + .token-kind-control { + color: #f59e0b; + } + .token-kind-raw { + color: #fb7185; + } #tooltip { position: fixed; background-color: rgba(0, 0, 0, 0.9); - color: white; + color: #e5e7eb; padding: 10px 14px; border-radius: 6px; font-size: 12px; - max-width: 500px; + max-width: none; + width: max-content; z-index: 2000; pointer-events: none; display: none; @@ -112,7 +119,7 @@ box-shadow: 0 2px 10px rgba(0,0,0,0.3); } #tooltip .label { - color: #aaa; + color: #9ca3af; font-weight: bold; } #tooltip .bytes { @@ -120,18 +127,18 @@ font-family: monospace; } #tooltip .loss-a { - color: #86efac; + color: #fbbf24; font-family: monospace; } #tooltip .loss-b { - color: #fca5a5; + color: #60a5fa; font-family: monospace; } #tooltip .model-a { - color: #fcd34d; + color: #fbbf24; } #tooltip .model-b { - color: #7dd3fc; + color: #60a5fa; } #tooltip .topk-section { margin-top: 8px; @@ -141,22 +148,23 @@ #tooltip .topk-container { display: flex; gap: 16px; + align-items: flex-start; } #tooltip .topk-column { - flex: 1; + flex: 0 0 auto; min-width: 180px; } #tooltip .topk-title { - color: #aaa; + color: #9ca3af; font-weight: bold; margin-bottom: 4px; font-size: 11px; } #tooltip .topk-title.model-a { - color: #86efac; + color: #fbbf24; } #tooltip .topk-title.model-b { - color: #fca5a5; + color: #60a5fa; } #tooltip .topk-list { font-size: 11px; @@ -173,33 +181,51 @@ align-items: center; gap: 6px; white-space: nowrap; + flex-wrap: nowrap; + overflow-x: visible; } #tooltip .token-chips { display: flex; flex-wrap: nowrap; gap: 4px; + align-items: center; + flex: 0 0 auto; } #tooltip .token-chip-group { display: inline-flex; align-items: center; gap: 4px; + flex: 0 0 auto; + white-space: nowrap; + } + #tooltip .token-prob { + color: #a7f3d0; + font-family: monospace; + font-size: 11px; + white-space: nowrap; } #tooltip .token-id { - color: #888; + color: #9ca3af; font-family: monospace; + white-space: nowrap; } #tooltip .token-chip { max-width: 100%; } + #tooltip .token-chip-group .topk-token { + white-space: pre; + overflow-wrap: normal; + word-break: normal; + } #tooltip .topk-rank { - color: #888; + color: #6b7280; min-width: 18px; } #tooltip .topk-rank.hit { - color: #ffd700; + color: #22c55e; } #tooltip .topk-token { - color: #a5f3fc; + color: #e5e7eb; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; @@ -217,7 +243,7 @@ color: #fb7185; } #tooltip .topk-prob { - color: #86efac; + color: #a7f3d0; min-width: 45px; text-align: right; } @@ -225,65 +251,139 @@ color: #22c55e; } #tooltip .topk-miss { - color: #ef4444; + color: #f87171; font-style: italic; } +
-