| <div class="task-flow-matrix" style="width:100%;margin:14px 0;"></div> |
| <style> |
| .task-flow-matrix { |
| border: 1px solid var(--border-color); |
| border-radius: 12px; |
| background: var(--surface-bg); |
| overflow: hidden; |
| color: var(--text-color); |
| } |
| .task-flow-matrix__head { |
| display: flex; align-items: center; gap: 12px; |
| padding: 8px 12px; |
| border-bottom: 1px solid var(--border-color); |
| background: color-mix(in oklab, var(--muted-color) 4%, transparent); |
| flex-wrap: wrap; |
| } |
| .task-flow-matrix__title { |
| font-size: 10.5px; |
| font-weight: 800; |
| letter-spacing: 1px; |
| text-transform: uppercase; |
| color: var(--muted-color); |
| margin-right: auto; |
| } |
| .tfm-pill { |
| display: inline-flex; align-items: center; gap: 5px; |
| padding: 2px 9px; |
| font-size: 10.5px; |
| font-weight: 700; |
| border-radius: 999px; |
| white-space: nowrap; |
| } |
| .tfm-pill.byo { |
| color: var(--muted-color); |
| border: 1px dashed color-mix(in oklab, var(--muted-color) 50%, transparent); |
| background: transparent; |
| } |
| .tfm-pill.bundled { |
| background: color-mix(in oklab, #22c55e 14%, transparent); |
| color: #16a34a; |
| border: 1px solid color-mix(in oklab, #22c55e 35%, transparent); |
| } |
| .tfm-pill.server { |
| background: color-mix(in oklab, #a855f7 12%, transparent); |
| color: #7c3aed; |
| border: 1px solid color-mix(in oklab, #a855f7 35%, transparent); |
| } |
| .tfm-pill.file { |
| background: color-mix(in oklab, #3b82f6 12%, transparent); |
| color: #1d4ed8; |
| border: 1px solid color-mix(in oklab, #3b82f6 35%, transparent); |
| } |
| |
| .task-flow-matrix__wrap { overflow-x: auto; } |
| .task-flow-matrix table { |
| width: 100%; |
| border-collapse: collapse; |
| font-size: 12px; |
| min-width: 760px; |
| } |
| .task-flow-matrix table thead th { |
| text-align: left; |
| font-size: 10.5px; |
| font-weight: 700; |
| text-transform: uppercase; |
| letter-spacing: 0.6px; |
| color: var(--muted-color); |
| padding: 10px 12px; |
| border-bottom: 1px solid var(--border-color); |
| background: color-mix(in oklab, var(--muted-color) 3%, transparent); |
| white-space: nowrap; |
| } |
| .task-flow-matrix table thead th .swatch { |
| width: 7px; height: 7px; |
| border-radius: 50%; |
| background: var(--c, var(--muted-color)); |
| display: inline-block; |
| margin-right: 5px; |
| vertical-align: middle; |
| } |
| .task-flow-matrix table tbody td { |
| padding: 10px 12px; |
| border-bottom: 1px solid color-mix(in oklab, var(--border-color) 60%, transparent); |
| vertical-align: middle; |
| color: var(--text-color); |
| font-size: 11.5px; |
| line-height: 1.5; |
| } |
| .task-flow-matrix table tbody tr:last-child td { border-bottom: 0; } |
| .task-flow-matrix table tbody tr:hover td { |
| background: color-mix(in oklab, var(--muted-color) 3%, transparent); |
| } |
| .task-flow-matrix table tbody td.row-name { |
| font-weight: 600; |
| color: var(--text-color); |
| white-space: nowrap; |
| } |
| .task-flow-matrix code { |
| background: color-mix(in oklab, var(--muted-color) 10%, transparent); |
| border-radius: 3px; |
| padding: 0 5px; |
| font-size: 11px; |
| font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; |
| } |
| </style> |
| <script> |
| (() => { |
| const bootstrap = () => { |
| const scriptEl = document.currentScript; |
| let container = scriptEl ? scriptEl.previousElementSibling : null; |
| if (!(container && container.classList && container.classList.contains('task-flow-matrix'))) { |
| const cands = Array.from(document.querySelectorAll('.task-flow-matrix')) |
| .filter(el => !(el.dataset && el.dataset.mounted === 'true')); |
| container = cands[cands.length - 1] || null; |
| } |
| if (!container || (container.dataset && container.dataset.mounted === 'true')) return; |
| container.dataset.mounted = 'true'; |
| |
| const FRAMEWORKS = [ |
| { key: 'openenv', name: 'OpenEnv', color: '#3b82f6' }, |
| { key: 'ors', name: 'ORS', color: '#a855f7' }, |
| { key: 'nemo', name: 'NeMo Gym', color: '#22c55e' }, |
| { key: 'verifs', name: 'Verifiers', color: '#ec4899' }, |
| { key: 'skyrl', name: 'SkyRL Gym', color: '#f59e0b' }, |
| { key: 'gem', name: 'GEM', color: '#14b8a6' }, |
| ]; |
| |
| const byo = '<span class="tfm-pill byo">BYO</span>'; |
| const bundled = '<span class="tfm-pill bundled">Bundled</span>'; |
| const server = '<span class="tfm-pill server">Server-side</span>'; |
| const file = '<span class="tfm-pill file">File-based</span>'; |
| |
| const ROWS = [ |
| { name: 'Source', cells: { |
| openenv: byo, |
| ors: server + ' task DB', |
| nemo: file + ' JSONL', |
| verifs: bundled + ' HF <code>Dataset</code>', |
| skyrl: byo + ' (JSONL or generator)', |
| gem: bundled + ' 24+ built-in envs', |
| }}, |
| { name: 'Loader', cells: { |
| openenv: 'Trainer loop · feeds <code>reset()</code>', |
| ors: '<code>list_tasks(split)</code> at runtime', |
| nemo: '<code>ng_prepare_data</code> CLI', |
| verifs: '<code>vf.ToolEnv(dataset=…)</code>', |
| skyrl: '<code>BaseTextEnv.init(prompt)</code>', |
| gem: '<code>gem.make("Env-v0")</code>', |
| }}, |
| { name: 'Prompt template', cells: { |
| openenv: 'BYO', |
| ors: '<code>get_prompt()</code> from server', |
| nemo: 'In JSONL · <code>responses_create_params</code>', |
| verifs: '<code>system_prompt</code> param', |
| skyrl: 'BYO', |
| gem: 'Per-env instructions', |
| }}, |
| { name: 'Splits', cells: { |
| openenv: '—', |
| ors: 'Yes · <code>list_splits()</code>', |
| nemo: 'Yes · per file', |
| verifs: 'Yes · HF splits', |
| skyrl: '—', |
| gem: 'Per-env', |
| }}, |
| { name: 'Versioning', cells: { |
| openenv: 'Up to you', |
| ors: 'Server-versioned', |
| nemo: 'Filename / commit', |
| verifs: 'HF dataset commit', |
| skyrl: 'Up to you', |
| gem: 'Env id (e.g. <code>-v0</code>)', |
| }}, |
| ]; |
| |
| const headerCells = FRAMEWORKS.map(f => |
| `<th><span class="swatch" style="--c:${f.color};"></span>${f.name}</th>` |
| ).join(''); |
| |
| const bodyHtml = ROWS.map(r => { |
| const cells = FRAMEWORKS.map(f => `<td>${r.cells[f.key]}</td>`).join(''); |
| return `<tr><td class="row-name">${r.name}</td>${cells}</tr>`; |
| }).join(''); |
| |
| container.innerHTML = ` |
| <div class="task-flow-matrix__head"> |
| <span class="task-flow-matrix__title">Tasks & datasets · 6 frameworks</span> |
| </div> |
| <div class="task-flow-matrix__wrap"> |
| <table> |
| <thead> |
| <tr><th>Capability</th>${headerCells}</tr> |
| </thead> |
| <tbody>${bodyHtml}</tbody> |
| </table> |
| </div> |
| `; |
| }; |
| |
| if (document.readyState === 'loading') { |
| document.addEventListener('DOMContentLoaded', bootstrap, { once: true }); |
| } else { |
| bootstrap(); |
| } |
| })(); |
| </script> |
|
|
