| <div class="fw-cards" style="width:100%;margin:14px 0;"></div> |
| <style> |
| .fw-cards { |
| border: 1px solid var(--border-color); |
| border-radius: 12px; |
| background: var(--surface-bg); |
| overflow: hidden; |
| color: var(--text-color); |
| } |
| .fw-cards__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; |
| } |
| .fw-cards__title { |
| font-size: 10.5px; |
| font-weight: 800; |
| letter-spacing: 1px; |
| text-transform: uppercase; |
| color: var(--muted-color); |
| margin-right: auto; |
| } |
| .fw-cards__view { |
| display: inline-flex; |
| background: var(--surface-bg); |
| border: 1px solid var(--border-color); |
| border-radius: 6px; |
| padding: 2px; |
| gap: 2px; |
| } |
| .fw-cards__view button { |
| border: 0; |
| background: transparent; |
| color: var(--muted-color); |
| font-size: 10.5px; |
| font-weight: 700; |
| padding: 5px 10px; |
| border-radius: 4px; |
| cursor: pointer; |
| letter-spacing: 0.4px; |
| text-transform: uppercase; |
| } |
| .fw-cards__view button.active { |
| color: var(--text-color); |
| background: color-mix(in oklab, var(--text-color) 8%, transparent); |
| } |
| |
| .fw-cards__body > div { display: none; } |
| .fw-cards__body > div.active { display: block; } |
| |
| |
| .fw-cards__grid { |
| display: grid; |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| gap: 12px; |
| padding: 12px; |
| background: color-mix(in oklab, var(--muted-color) 3%, transparent); |
| } |
| @media (max-width: 880px) { .fw-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } |
| @media (max-width: 580px) { .fw-cards__grid { grid-template-columns: minmax(0, 1fr); } } |
| |
| .fw-card { |
| position: relative; |
| border: 1px solid var(--border-color); |
| border-radius: 10px; |
| background: var(--surface-bg); |
| padding: 14px 14px 12px 14px; |
| box-sizing: border-box; |
| display: flex; |
| flex-direction: column; |
| gap: 8px; |
| overflow: hidden; |
| min-width: 0; |
| } |
| .fw-card::before { |
| content: ''; |
| position: absolute; |
| top: 0; left: 0; right: 0; |
| height: 2px; |
| background: var(--fw-accent); |
| } |
| .fw-card__row { |
| display: flex; |
| justify-content: space-between; |
| align-items: flex-start; |
| gap: 10px; |
| min-width: 0; |
| } |
| .fw-card__title-block { flex: 1 1 auto; min-width: 0; } |
| .fw-card__name { |
| font-size: 14.5px; |
| font-weight: 700; |
| color: var(--text-color); |
| line-height: 1.2; |
| } |
| .fw-card__creator { |
| font-size: 11px; |
| color: var(--muted-color); |
| margin-top: 2px; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| .fw-card__transport { |
| flex-shrink: 0; |
| display: inline-flex; |
| align-items: center; |
| gap: 3px; |
| padding: 2px 7px; |
| border-radius: 999px; |
| border: 1px solid color-mix(in oklab, var(--fw-accent) 30%, var(--border-color)); |
| color: color-mix(in oklab, var(--fw-accent) 90%, var(--text-color)); |
| background: color-mix(in oklab, var(--fw-accent) 10%, transparent); |
| font-size: 9px; |
| font-weight: 700; |
| letter-spacing: 0.3px; |
| text-transform: uppercase; |
| white-space: nowrap; |
| line-height: 1; |
| } |
| .fw-card__transport svg { width: 9px; height: 9px; flex-shrink: 0; } |
| .fw-card__tagline { |
| font-size: 12px; |
| line-height: 1.5; |
| color: var(--muted-color); |
| } |
| .fw-card__meta { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| flex-wrap: wrap; |
| margin-top: auto; |
| } |
| .fw-card__pkg { |
| font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; |
| font-size: 11px; |
| background: color-mix(in oklab, var(--muted-color) 8%, transparent); |
| border: 1px solid var(--border-color); |
| border-radius: 5px; |
| padding: 2px 7px; |
| color: var(--text-color); |
| } |
| .fw-card__pyver { |
| font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; |
| font-size: 10.5px; |
| color: var(--muted-color); |
| } |
| .fw-card__action { |
| display: inline-flex; |
| align-items: center; |
| gap: 5px; |
| color: var(--muted-color); |
| font-size: 11.5px; |
| font-weight: 600; |
| text-decoration: none; |
| transition: color .12s ease; |
| margin-left: auto; |
| } |
| .fw-card__action:hover { color: var(--fw-accent); } |
| .fw-card__action svg { width: 12px; height: 12px; flex-shrink: 0; } |
| |
| |
| .fw-cards__table-wrap { overflow-x: auto; } |
| .fw-cards__table-wrap table { |
| width: 100%; |
| border-collapse: collapse; |
| font-size: 12.5px; |
| min-width: 640px; |
| } |
| .fw-cards__table-wrap 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; |
| } |
| .fw-cards__table-wrap 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: 12px; |
| line-height: 1.5; |
| } |
| .fw-cards__table-wrap tbody tr:last-child td { border-bottom: 0; } |
| .fw-cards__table-wrap tbody tr:hover td { |
| background: color-mix(in oklab, var(--muted-color) 3%, transparent); |
| } |
| .fw-cards__table-wrap td.idx { |
| font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; |
| color: var(--muted-color); |
| font-size: 11px; |
| width: 28px; |
| } |
| .fw-cards__table-wrap td.fw-name { |
| font-weight: 700; |
| white-space: nowrap; |
| } |
| .fw-cards__table-wrap td.fw-name a { |
| color: var(--text-color); |
| text-decoration: none; |
| border-bottom: 2px solid var(--fw-accent); |
| padding-bottom: 1px; |
| } |
| .fw-cards__table-wrap td.fw-name a:hover { color: var(--fw-accent); } |
| .fw-cards__table-wrap td.fw-name .swatch { |
| width: 8px; height: 8px; border-radius: 50%; |
| background: var(--fw-accent); |
| display: inline-block; |
| margin-right: 7px; |
| vertical-align: middle; |
| } |
| .fw-cards__table-wrap 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; |
| } |
| .fwt-pill { |
| display: inline-flex; align-items: center; gap: 4px; |
| padding: 1px 8px; |
| border-radius: 999px; |
| font-size: 10.5px; |
| font-weight: 700; |
| letter-spacing: 0.4px; |
| } |
| .fwt-pill.http { background: color-mix(in oklab, #3b82f6 12%, transparent); color: color-mix(in oklab, #3b82f6 80%, var(--text-color)); border: 1px solid color-mix(in oklab, #3b82f6 30%, transparent); } |
| .fwt-pill.inproc { background: color-mix(in oklab, #ec4899 10%, transparent); color: color-mix(in oklab, #ec4899 80%, var(--text-color)); border: 1px solid color-mix(in oklab, #ec4899 28%, transparent); } |
| </style> |
| <script> |
| (() => { |
| const bootstrap = () => { |
| const scriptEl = document.currentScript; |
| let container = scriptEl ? scriptEl.previousElementSibling : null; |
| if (!(container && container.classList && container.classList.contains('fw-cards'))) { |
| const cands = Array.from(document.querySelectorAll('.fw-cards')) |
| .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 = [ |
| { name: 'OpenEnv', creator: 'Meta PyTorch', accent: '#3b82f6', transport: 'http', typeLabel: 'HTTP server (MCP)', tagline: 'MCP-based protocol with composable Rubric rewards.', package: 'openenv-core', pkgSrc: 'PyPI', python: '≥3.11', repo: 'https://github.com/meta-pytorch/OpenEnv' }, |
| { name: 'ORS', creator: 'General Reasoning', accent: '#a855f7', transport: 'http', typeLabel: 'HTTP server (REST+SSE)', tagline: 'Per-tool-call rewards via ToolOutput, large catalog.', package: 'ors-sdk', pkgSrc: 'PyPI', python: '≥3.10', repo: 'https://openrewardstandard.io/' }, |
| { name: 'NeMo Gym', creator: 'NVIDIA', accent: '#22c55e', transport: 'http', typeLabel: 'HTTP server (REST)', tagline: 'FastAPI tools + post-episode /verify endpoint.', package: 'nemo_gym', pkgSrc: 'Git', python: '≥3.12', repo: 'https://github.com/NVIDIA-NeMo/Gym' }, |
| { name: 'Verifiers', creator: 'PrimeIntellect', accent: '#ec4899', transport: 'inproc', typeLabel: 'In-process Python', tagline: 'Bundled dataset, tools, Rubric, and trainer.', package: 'verifiers', pkgSrc: 'PyPI', python: '≥3.11', repo: 'https://github.com/PrimeIntellect-ai/verifiers' }, |
| { name: 'SkyRL Gym', creator: 'NovaSky-AI · Berkeley', accent: '#f59e0b', transport: 'inproc', typeLabel: 'In-process (Gym)', tagline: 'Lightweight Gym-style API with ToolGroups.', package: 'skyrl-gym', pkgSrc: 'PyPI', python: '≥3.10', repo: 'https://github.com/NovaSky-AI/SkyRL' }, |
| { name: 'GEM', creator: 'Axon-RL', accent: '#14b8a6', transport: 'inproc', typeLabel: 'In-process (Gymnasium)', tagline: 'Strict Gymnasium 5-tuple, 24+ built-in envs.', package: 'gem-llm', pkgSrc: 'PyPI', python: '≥3.10', repo: 'https://github.com/axon-rl/gem' }, |
| ]; |
| |
| const ICON_HTTP = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.5 19a4.5 4.5 0 1 0-1.4-8.78A6 6 0 0 0 4 12.5 4.5 4.5 0 0 0 6.5 19h11Z"/></svg>`; |
| const ICON_INPROC = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="6" width="12" height="12" rx="2"/><path d="M9 1v3M15 1v3M9 20v3M15 20v3M1 9h3M1 15h3M20 9h3M20 15h3"/></svg>`; |
| const ICON_REPO = `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.4-4-1.4-.6-1.4-1.4-1.8-1.4-1.8-1.1-.8.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1.1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.8-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.3.5-2.4 1.2-3.2-.1-.3-.5-1.5.1-3.2 0 0 1-.3 3.3 1.2a11 11 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.7.2 2.9.1 3.2.8.8 1.2 1.9 1.2 3.2 0 4.7-2.8 5.7-5.5 6 .4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A12 12 0 0 0 12 .3Z"/></svg>`; |
| |
| const cardsHtml = FRAMEWORKS.map(fw => { |
| const transportIcon = fw.transport === 'http' ? ICON_HTTP : ICON_INPROC; |
| const transportLabel = fw.transport === 'http' ? 'HTTP' : 'In-proc'; |
| return ` |
| <div class="fw-card" style="--fw-accent:${fw.accent};"> |
| <div class="fw-card__row"> |
| <div class="fw-card__title-block"> |
| <div class="fw-card__name">${fw.name}</div> |
| <div class="fw-card__creator">${fw.creator}</div> |
| </div> |
| <span class="fw-card__transport">${transportIcon}<span>${transportLabel}</span></span> |
| </div> |
| <div class="fw-card__tagline">${fw.tagline}</div> |
| <div class="fw-card__meta"> |
| <span class="fw-card__pkg">${fw.package}</span> |
| <span class="fw-card__pyver">python ${fw.python}</span> |
| <a class="fw-card__action" href="${fw.repo}" target="_blank" rel="noopener">${ICON_REPO}<span>Repo</span></a> |
| </div> |
| </div> |
| `; |
| }).join(''); |
| |
| const tableRows = FRAMEWORKS.map((fw, i) => ` |
| <tr style="--fw-accent:${fw.accent};"> |
| <td class="idx">${i + 1}</td> |
| <td class="fw-name"><span class="swatch"></span><a href="${fw.repo}" target="_blank" rel="noopener">${fw.name}</a></td> |
| <td>${fw.creator}</td> |
| <td><span class="fwt-pill ${fw.transport}">${fw.typeLabel}</span></td> |
| <td><code>${fw.package}</code> <span style="color:var(--muted-color); font-size:10.5px;">(${fw.pkgSrc})</span></td> |
| </tr> |
| `).join(''); |
| |
| container.innerHTML = ` |
| <div class="fw-cards__head"> |
| <span class="fw-cards__title">Frameworks we implemented and compared</span> |
| <div class="fw-cards__view" role="tablist"> |
| <button type="button" data-view="table" class="active">Table</button> |
| <button type="button" data-view="cards">Cards</button> |
| </div> |
| </div> |
| <div class="fw-cards__body"> |
| <div data-pane="table" class="active"> |
| <div class="fw-cards__table-wrap"> |
| <table> |
| <thead> |
| <tr> |
| <th>#</th> |
| <th>Framework</th> |
| <th>Creator</th> |
| <th>Type</th> |
| <th>Package</th> |
| </tr> |
| </thead> |
| <tbody>${tableRows}</tbody> |
| </table> |
| </div> |
| </div> |
| <div data-pane="cards"> |
| <div class="fw-cards__grid">${cardsHtml}</div> |
| </div> |
| </div> |
| `; |
| |
| const buttons = container.querySelectorAll('.fw-cards__view button'); |
| const panes = container.querySelectorAll('.fw-cards__body > div'); |
| buttons.forEach(b => b.addEventListener('click', () => { |
| const v = b.getAttribute('data-view'); |
| buttons.forEach(x => x.classList.toggle('active', x === b)); |
| panes.forEach(p => p.classList.toggle('active', p.getAttribute('data-pane') === v)); |
| })); |
| }; |
| |
| if (document.readyState === 'loading') { |
| document.addEventListener('DOMContentLoaded', bootstrap, { once: true }); |
| } else { |
| bootstrap(); |
| } |
| })(); |
| </script> |
|
|
