Spaces:
Running
Running
| body { | |
| font-family: Consolas, 'Courier New', monospace; | |
| margin: 0; | |
| padding: 0; | |
| background-color: #f5f5f5; | |
| } | |
| .header { | |
| background-color: #333; | |
| color: white; | |
| padding: 20px; | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| } | |
| .header h1 { | |
| margin: 0 0 15px 0; | |
| font-size: 18px; | |
| } | |
| .meta { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 20px; | |
| font-size: 12px; | |
| color: #c8c8c8; | |
| } | |
| .legend { | |
| display: flex; | |
| 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; | |
| border: 1px solid #666; | |
| } | |
| .content { | |
| background-color: white; | |
| margin: 10px; | |
| padding: 15px; | |
| border: 1px solid #ccc; | |
| font-size: 14px; | |
| line-height: 1.8; | |
| white-space: pre-wrap; | |
| overflow-wrap: anywhere; | |
| word-wrap: break-word; | |
| position: relative; | |
| } | |
| .content span { | |
| padding: 1px 0; | |
| } | |
| .word { | |
| cursor: pointer; | |
| position: relative; | |
| } | |
| .word:hover { | |
| outline: 2px solid #007bff; | |
| outline-offset: 1px; | |
| } | |
| .word.highlighted { | |
| outline: 2px solid #ff6b6b; | |
| outline-offset: 1px; | |
| } | |
| #svg-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| z-index: 1000; | |
| } | |
| .link-line { | |
| stroke: #007bff; | |
| stroke-width: 2; | |
| fill: none; | |
| opacity: 0.7; | |
| } | |
| .link-dot { | |
| fill: #007bff; | |
| opacity: 0.8; | |
| } | |
| .token { | |
| position: relative; | |
| cursor: help; | |
| } | |
| .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: #e5e7eb; | |
| padding: 10px 14px; | |
| border-radius: 6px; | |
| font-size: 12px; | |
| max-width: none; | |
| width: max-content; | |
| z-index: 2000; | |
| pointer-events: none; | |
| display: none; | |
| line-height: 1.6; | |
| box-shadow: 0 2px 10px rgba(0,0,0,0.3); | |
| } | |
| #tooltip .label { | |
| color: #9ca3af; | |
| font-weight: bold; | |
| } | |
| #tooltip .bytes { | |
| color: #a5f3fc; | |
| font-family: monospace; | |
| } | |
| #tooltip .loss-a { | |
| color: #fbbf24; | |
| font-family: monospace; | |
| } | |
| #tooltip .loss-b { | |
| color: #60a5fa; | |
| font-family: monospace; | |
| } | |
| #tooltip .model-a { | |
| color: #fbbf24; | |
| } | |
| #tooltip .model-b { | |
| color: #60a5fa; | |
| } | |
| #tooltip .topk-section { | |
| margin-top: 8px; | |
| padding-top: 8px; | |
| border-top: 1px solid #555; | |
| } | |
| #tooltip .topk-container { | |
| display: flex; | |
| gap: 16px; | |
| align-items: flex-start; | |
| } | |
| #tooltip .topk-column { | |
| flex: 0 0 auto; | |
| min-width: 180px; | |
| } | |
| #tooltip .topk-title { | |
| color: #9ca3af; | |
| font-weight: bold; | |
| margin-bottom: 4px; | |
| font-size: 11px; | |
| } | |
| #tooltip .topk-title.model-a { | |
| color: #fbbf24; | |
| } | |
| #tooltip .topk-title.model-b { | |
| color: #60a5fa; | |
| } | |
| #tooltip .topk-list { | |
| font-size: 11px; | |
| } | |
| #tooltip .topk-item { | |
| display: flex; | |
| gap: 4px; | |
| padding: 1px 0; | |
| align-items: flex-start; | |
| } | |
| #tooltip .token-block { | |
| margin-top: 6px; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| white-space: nowrap; | |
| flex-wrap: nowrap; | |
| overflow-x: visible; | |
| } | |
| #tooltip .token-chips { | |
| display: flex; | |
| flex-wrap: nowrap; | |
| gap: 15px; | |
| 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: #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: #6b7280; | |
| min-width: 18px; | |
| } | |
| #tooltip .topk-rank.hit { | |
| color: #22c55e; | |
| } | |
| #tooltip .topk-token { | |
| color: #e5e7eb; | |
| white-space: pre-wrap; | |
| overflow-wrap: anywhere; | |
| word-break: break-word; | |
| font-family: monospace; | |
| background-color: rgba(255, 255, 255, 0.08); | |
| padding: 0 4px; | |
| border-radius: 3px; | |
| display: inline-block; | |
| max-width: 100%; | |
| } | |
| #tooltip .esc-control { | |
| color: #fbbf24; | |
| } | |
| #tooltip .esc-raw { | |
| color: #fb7185; | |
| } | |
| #tooltip .topk-prob { | |
| color: #a7f3d0; | |
| min-width: 45px; | |
| text-align: right; | |
| } | |
| #tooltip .topk-hit { | |
| color: #22c55e; | |
| } | |
| #tooltip .topk-miss { | |
| color: #f87171; | |
| font-style: italic; | |
| } | |