Hugging Face's logo

Spaces:
OpenEvals
/
evaluation-guidebook
Running

App Files Community
4
evaluation-guidebook / app /src /content /embeds /d3-tokenization-timeline.html
Clémentine
Init
ffdff5d
Raw History Blame Contribute Delete
9.47 kB
<div class="d3-prompt-evolution">
<svg viewBox="0 0 900 370" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arrowhead-prompt" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
<polygon points="0 0, 10 3, 0 6" fill="currentColor" />
</marker>
</defs>
<!-- Stage 1: Raw Text -->
<g class="stage">
<rect x="30" y="40" width="240" height="140" rx="8" class="stage-box stage-1"/>
<text x="150" y="65" text-anchor="middle" class="stage-title">Raw Text</text>
<text x="150" y="85" text-anchor="middle" class="stage-subtitle">Early Models (before 2022)</text>
<foreignObject x="45" y="95" width="210" height="80">
<div xmlns="http://www.w3.org/1999/xhtml" class="code-example">
<div class="code-line">Translate to French:</div>
<div class="code-line">Hello world</div>
</div>
</foreignObject>
</g>
<!-- Arrow 1 -->
<path d="M 270 110 L 320 110" class="arrow" marker-end="url(#arrowhead-prompt)"/>
<text x="295" y="100" text-anchor="middle" class="arrow-label">Evolution</text>
<!-- Stage 2: JSON + Chat Templates -->
<g class="stage">
<rect x="320" y="20" width="260" height="180" rx="8" class="stage-box stage-2"/>
<text x="450" y="45" text-anchor="middle" class="stage-title">Chat Templates (in JSON)</text>
<text x="450" y="65" text-anchor="middle" class="stage-subtitle">Chat Models (2022-2025)</text>
<foreignObject x="335" y="75" width="230" height="120">
<div xmlns="http://www.w3.org/1999/xhtml" class="code-example">
<div class="code-line json-brace">{</div>
<div class="code-line indent">"role": "system",</div>
<div class="code-line indent">"content": "You are..."</div>
<div class="code-line json-brace">},</div>
<div class="code-line json-brace">{</div>
<div class="code-line indent">"role": "user",</div>
<div class="code-line indent">"content": "Hello"</div>
<div class="code-line json-brace">}</div>
</div>
</foreignObject>
</g>
<!-- Arrow 2 -->
<path d="M 580 110 L 630 110" class="arrow" marker-end="url(#arrowhead-prompt)"/>
<text x="605" y="100" text-anchor="middle" class="arrow-label">Evolution</text>
<!-- Stage 3: JSON + XML (Reasoning) -->
<g class="stage">
<rect x="630" y="10" width="240" height="200" rx="8" class="stage-box stage-3"/>
<text x="750" y="35" text-anchor="middle" class="stage-title">JSON + XML</text>
<text x="750" y="55" text-anchor="middle" class="stage-subtitle">Reasoning Models (2025+)</text>
<foreignObject x="645" y="65" width="210" height="140">
<div xmlns="http://www.w3.org/1999/xhtml" class="code-example">
<div class="code-line json-brace">{</div>
<div class="code-line indent">"role": "assistant",</div>
<div class="code-line indent">"content": [</div>
<div class="code-line indent2 xml-tag">&lt;thinking&gt;</div>
<div class="code-line indent2">reasoning...</div>
<div class="code-line indent2 xml-tag">&lt;/thinking&gt;</div>
<div class="code-line indent2 xml-tag">&lt;output&gt;</div>
<div class="code-line indent2">response</div>
<div class="code-line indent2 xml-tag">&lt;/output&gt;</div>
<div class="code-line indent">]</div>
<div class="code-line json-brace">}</div>
</div>
</foreignObject>
</g>
<!-- Key Features Labels -->
<g class="features">
<text x="150" y="200" text-anchor="middle" class="feature-label">• Simple prompts</text>
<text x="150" y="220" text-anchor="middle" class="feature-label">• Generally no structure</text>
<text x="150" y="240" text-anchor="middle" class="feature-label">• Completion-based</text>
</g>
<g class="features">
<text x="450" y="220" text-anchor="middle" class="feature-label">• Role separation</text>
<text x="450" y="240" text-anchor="middle" class="feature-label">• Chat/Turn-based</text>
</g>
<g class="features">
<text x="750" y="230" text-anchor="middle" class="feature-label">• Chat/Turn-based</text>
<text x="750" y="250" text-anchor="middle" class="feature-label">with added tags for control</text>
</g>
<!-- Timeline -->
<line x1="50" y1="320" x2="850" y2="320" class="timeline"/>
<circle cx="150" cy="320" r="6" class="timeline-dot"/>
<circle cx="450" cy="320" r="6" class="timeline-dot"/>
<circle cx="750" cy="320" r="6" class="timeline-dot"/>
<text x="150" y="345" text-anchor="middle" class="timeline-label">Before 2022</text>
<text x="450" y="345" text-anchor="middle" class="timeline-label">2022-2025</text>
<text x="750" y="345" text-anchor="middle" class="timeline-label">2025+</text>
</svg>
</div>
<style>
.d3-prompt-evolution {
position: relative;
width: 100%;
}
.d3-prompt-evolution svg {
display: block;
width: 100%;
height: auto;
}
/* Stage boxes */
.d3-prompt-evolution .stage-box {
stroke-width: 2;
}
.d3-prompt-evolution .stage-1 {
fill: #e3f2fd;
stroke: #1976d2;
}
.d3-prompt-evolution .stage-2 {
fill: #f3e5f5;
stroke: #7b1fa2;
}
.d3-prompt-evolution .stage-3 {
fill: #e8f5e9;
stroke: #388e3c;
}
[data-theme="dark"] .d3-prompt-evolution .stage-1 {
fill: rgba(25, 118, 210, 0.15);
}
[data-theme="dark"] .d3-prompt-evolution .stage-2 {
fill: rgba(123, 31, 162, 0.15);
}
[data-theme="dark"] .d3-prompt-evolution .stage-3 {
fill: rgba(56, 142, 60, 0.15);
}
/* Text styles */
.d3-prompt-evolution .stage-title {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 16px;
font-weight: 700;
fill: var(--text-color, #333);
}
.d3-prompt-evolution .stage-subtitle {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 11px;
fill: var(--muted-color, #666);
}
/* Code examples */
.d3-prompt-evolution .code-example {
font-family: 'Monaco', 'Courier New', monospace;
font-size: 9px;
line-height: 1.4;
color: var(--text-color, #333);
padding: 4px;
}
.d3-prompt-evolution .code-line {
margin: 1px 0;
}
.d3-prompt-evolution .indent {
padding-left: 12px;
}
.d3-prompt-evolution .indent2 {
padding-left: 24px;
}
.d3-prompt-evolution .json-brace {
color: var(--primary-color, #1976d2);
font-weight: 600;
}
.d3-prompt-evolution .xml-tag {
color: #d32f2f;
font-weight: 600;
}
/* Arrows */
.d3-prompt-evolution .arrow {
fill: none;
stroke: var(--muted-color, #999);
stroke-width: 2;
color: var(--muted-color, #999);
}
.d3-prompt-evolution .arrow-label {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 10px;
font-style: italic;
fill: var(--muted-color, #666);
}
/* Feature labels */
.d3-prompt-evolution .feature-label {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 11px;
fill: var(--text-color, #555);
}
/* Timeline */
.d3-prompt-evolution .timeline {
stroke: var(--border-color, #ddd);
stroke-width: 2;
}
.d3-prompt-evolution .timeline-dot {
fill: var(--primary-color, #1976d2);
}
.d3-prompt-evolution .timeline-label {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 12px;
font-weight: 600;
fill: var(--text-color, #333);
}
.d3-prompt-evolution .model-example {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 11px;
font-style: italic;
fill: var(--muted-color, #666);
}
/* Benefits section */
.d3-prompt-evolution .benefits-box {
fill: var(--surface-bg, #fafafa);
stroke: var(--border-color, #e0e0e0);
stroke-width: 1.5;
}
.d3-prompt-evolution .benefits-title {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 13px;
font-weight: 700;
fill: var(--text-color, #333);
}
.d3-prompt-evolution .benefit-text {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 11px;
fill: var(--text-color, #555);
}
[data-theme="dark"] .d3-prompt-evolution .benefits-box {
fill: rgba(255, 255, 255, 0.05);
}
</style>
<script>
(() => {
const bootstrap = () => {
const scriptEl = document.currentScript;
let container = scriptEl ? scriptEl.previousElementSibling : null;
if (!(container && container.classList && container.classList.contains('d3-prompt-evolution'))) {
const candidates = Array.from(document.querySelectorAll('.d3-prompt-evolution'))
.filter((el) => !(el.dataset && el.dataset.mounted === 'true'));
container = candidates[candidates.length - 1] || null;
}
if (!container) return;
if (container.dataset) {
if (container.dataset.mounted === 'true') return;
container.dataset.mounted = 'true';
}
};
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', bootstrap, { once: true });
} else {
bootstrap();
}
})();
</script>