| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>Research Roadmap | Ropedia Xperience-10M Task Suite</title> |
| <meta name="description" content="Focused research roadmap connecting the Xperience-10M 20-task suite, four research tracks, current sample results, Qwen3-Omni fine-tuning, and foundation-model branch selection."> |
| <meta name="theme-color" content="#020502"> |
| <link rel="icon" href="favicon.png" type="image/png" sizes="64x64"> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet"> |
| <style> |
| :root { |
| color-scheme: dark; |
| --ink: #f4f8ef; |
| --muted: #a5afa2; |
| --line: rgba(204, 255, 160, 0.24); |
| --soft-line: rgba(204, 255, 160, 0.14); |
| --page: #020502; |
| --panel: #061006; |
| --surface: #071207; |
| --green: #ccffa0; |
| --cyan: #7ae5c3; |
| --blue: #9bdfff; |
| --amber: #d8f4a5; |
| --red: #ff8f7a; |
| --card: rgba(5, 10, 6, 0.84); |
| --pill: rgba(255, 255, 255, 0.05); |
| --radius: 8px; |
| --max: 1360px; |
| --font-ui: "Inter Tight", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
| --font-btn: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
| --font-mono: "Space Grotesk", "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace; |
| } |
| |
| * { box-sizing: border-box; } |
| [hidden] { display: none !important; } |
| html { scroll-padding-top: 72px; } |
| body { |
| margin: 0; |
| color: var(--ink); |
| font-family: var(--font-ui); |
| line-height: 1.5; |
| background: var(--page); |
| font-synthesis-weight: none; |
| } |
| a { color: inherit; } |
| .page-progress { |
| position: fixed; |
| inset: 0 0 auto; |
| z-index: 60; |
| height: 2px; |
| pointer-events: none; |
| background: rgba(204, 255, 160, 0.08); |
| } |
| .page-progress span { |
| display: block; |
| width: calc(var(--scroll-progress, 0) * 100%); |
| height: 100%; |
| background: linear-gradient(90deg, var(--green), var(--cyan), var(--green)); |
| box-shadow: 0 0 18px rgba(204, 255, 160, 0.45); |
| transition: width 90ms linear; |
| } |
| .scroll-companion { |
| position: fixed; |
| right: max(18px, env(safe-area-inset-right)); |
| bottom: max(18px, env(safe-area-inset-bottom)); |
| z-index: 58; |
| display: grid; |
| grid-template-columns: minmax(160px, auto) auto; |
| gap: 8px; |
| align-items: stretch; |
| pointer-events: none; |
| opacity: 0; |
| transform: translateY(14px); |
| transition: opacity 180ms ease, transform 180ms ease; |
| } |
| .scroll-companion.is-visible { opacity: 1; transform: translateY(0); } |
| .scroll-status { |
| min-height: 44px; |
| display: grid; |
| align-content: center; |
| gap: 2px; |
| padding: 8px 12px; |
| border: 1px solid rgba(204, 255, 160, 0.22); |
| border-radius: 14px; |
| background: rgba(2, 5, 2, 0.86); |
| backdrop-filter: blur(16px); |
| box-shadow: 0 18px 46px rgba(0, 0, 0, 0.30); |
| pointer-events: auto; |
| } |
| .scroll-status strong { |
| color: var(--ink); |
| font-family: var(--font-mono); |
| font-size: 13px; |
| line-height: 1; |
| } |
| .scroll-status span { |
| max-width: 240px; |
| color: var(--muted); |
| font-size: 11px; |
| line-height: 1.2; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| .back-to-top { |
| min-width: 54px; |
| min-height: 44px; |
| border: 1px solid rgba(204, 255, 160, 0.34); |
| border-radius: 14px; |
| background: var(--green); |
| color: #020502; |
| font-family: var(--font-btn); |
| font-size: 12px; |
| font-weight: 820; |
| cursor: pointer; |
| box-shadow: 0 18px 46px rgba(0, 0, 0, 0.30); |
| pointer-events: auto; |
| } |
| .back-to-top:hover, |
| .back-to-top:focus-visible { background: #f4f8ef; border-color: #f4f8ef; } |
| .wrap { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; } |
| .site-nav { |
| position: sticky; |
| top: 0; |
| z-index: 20; |
| border-bottom: 1px solid var(--soft-line); |
| background: rgba(2, 5, 2, 0.88); |
| backdrop-filter: blur(18px); |
| } |
| .nav-inner { |
| height: 64px; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 18px; |
| } |
| .brand { |
| display: inline-flex; |
| align-items: center; |
| gap: 12px; |
| text-decoration: none; |
| font-weight: 700; |
| white-space: nowrap; |
| } |
| .brand img { |
| width: 38px; |
| height: 38px; |
| border-radius: 8px; |
| border: 1px solid rgba(204, 255, 160, 0.42); |
| background: #061006; |
| } |
| .nav-links { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| font-family: var(--font-btn); |
| font-size: 13px; |
| } |
| .nav-links a { |
| min-height: 36px; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| padding: 0 12px; |
| border: 1px solid transparent; |
| border-radius: 999px; |
| background: var(--pill); |
| text-decoration: none; |
| } |
| .nav-links a:hover, |
| .nav-links a.active { |
| color: var(--green); |
| border-color: var(--green); |
| background: rgba(255, 255, 255, 0.08); |
| } |
| .nav-links a.primary { |
| color: #020502; |
| border-color: var(--green); |
| background: var(--green); |
| } |
| .nav-links a.primary:hover { |
| color: #020502; |
| background: #f4f8ef; |
| } |
| button, select, input { font: inherit; } |
| button { color: inherit; } |
| button:focus-visible, a:focus-visible { |
| outline: 2px solid rgba(204, 255, 160, 0.58); |
| outline-offset: 3px; |
| } |
| .hero { |
| position: relative; |
| overflow: hidden; |
| padding: 86px 0 48px; |
| border-bottom: 1px solid var(--soft-line); |
| background: |
| linear-gradient(90deg, rgba(2, 5, 2, 0.96) 0%, rgba(2, 5, 2, 0.84) 52%, rgba(2, 5, 2, 0.70) 100%), |
| linear-gradient(180deg, rgba(2, 5, 2, 0.12), rgba(5, 6, 11, 0.98)), |
| url("assets/qwen3_omni_lora_pipeline.png?v=qwen3-lora-v1") center right / cover no-repeat; |
| } |
| .hero-grid { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr); |
| gap: 54px; |
| align-items: center; |
| } |
| .eyebrow { |
| display: inline-flex; |
| align-items: center; |
| gap: 9px; |
| margin-bottom: 22px; |
| color: var(--green); |
| font-family: var(--font-btn); |
| font-size: 12px; |
| letter-spacing: 0.08em; |
| text-transform: uppercase; |
| } |
| .eyebrow::before { |
| content: ""; |
| width: 34px; |
| height: 1px; |
| background: var(--green); |
| } |
| h1 { |
| margin: 0; |
| max-width: 900px; |
| font-size: clamp(44px, 7vw, 86px); |
| line-height: 0.98; |
| letter-spacing: 0; |
| text-wrap: balance; |
| } |
| .hero-copy { |
| max-width: 820px; |
| margin: 24px 0 0; |
| color: #c7d1c3; |
| font-size: 19px; |
| line-height: 1.65; |
| text-wrap: pretty; |
| } |
| .hero-actions { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 12px; |
| margin-top: 32px; |
| } |
| .button { |
| min-height: 46px; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| padding: 0 18px; |
| border: 1px solid rgba(255, 255, 255, 0.28); |
| border-radius: 999px; |
| background: var(--pill); |
| color: var(--ink); |
| font-family: var(--font-btn); |
| font-weight: 700; |
| text-decoration: none; |
| } |
| .button.primary { |
| color: #020502; |
| border-color: var(--green); |
| background: var(--green); |
| } |
| .button:hover { border-color: var(--green); } |
| .hero-panel { |
| border: 1px solid var(--line); |
| border-radius: var(--radius); |
| background: var(--card); |
| padding: 20px; |
| box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34); |
| } |
| .route { |
| display: grid; |
| gap: 12px; |
| } |
| .route-step { |
| display: grid; |
| grid-template-columns: 42px 1fr auto; |
| gap: 12px; |
| align-items: center; |
| padding: 12px; |
| border: 1px solid var(--soft-line); |
| border-radius: var(--radius); |
| background: rgba(2, 8, 2, 0.78); |
| } |
| .route-step strong { |
| width: 42px; |
| height: 42px; |
| display: grid; |
| place-items: center; |
| border-radius: 999px; |
| background: rgba(204, 255, 160, 0.12); |
| color: var(--green); |
| font-family: var(--font-btn); |
| } |
| .route-step span { |
| color: var(--muted); |
| font-size: 12px; |
| font-family: var(--font-btn); |
| } |
| .route-step b { display: block; } |
| .route-step em { |
| color: var(--green); |
| font-style: normal; |
| font-family: var(--font-mono); |
| font-size: 13px; |
| } |
| main { background: #05060b; } |
| .facts { |
| display: grid; |
| grid-template-columns: repeat(5, minmax(0, 1fr)); |
| gap: 10px; |
| padding: 22px 0; |
| } |
| .fact { |
| min-height: 96px; |
| border: 1px solid var(--line); |
| border-radius: var(--radius); |
| background: var(--card); |
| padding: 16px; |
| } |
| .fact strong { |
| display: block; |
| font-family: var(--font-mono); |
| font-size: 24px; |
| line-height: 1; |
| } |
| .fact span { |
| display: block; |
| margin-top: 8px; |
| color: var(--muted); |
| font-size: 13px; |
| } |
| .roadmap-section { |
| padding: 42px 0 76px; |
| border-top: 1px solid var(--soft-line); |
| } |
| .section-head { |
| display: grid; |
| grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.75fr); |
| gap: 54px; |
| align-items: start; |
| padding-top: 36px; |
| border-top: 1px solid rgba(255, 255, 255, 0.16); |
| } |
| .section-head h2 { |
| margin: 0; |
| font-size: clamp(34px, 5vw, 58px); |
| line-height: 1.02; |
| letter-spacing: 0; |
| } |
| .section-head p { |
| margin: 0; |
| color: #c7d1c3; |
| font-size: 17px; |
| line-height: 1.62; |
| } |
| .roadmap-jump-nav { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 10px; |
| margin: 26px 0 18px; |
| } |
| .roadmap-jump-nav a { |
| min-height: 42px; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| padding: 0 16px; |
| border: 1px solid var(--soft-line); |
| border-radius: 999px; |
| background: var(--pill); |
| color: #dce8d6; |
| font-family: var(--font-btn); |
| font-size: 13px; |
| font-weight: 700; |
| text-decoration: none; |
| } |
| .roadmap-jump-nav a:first-child, |
| .roadmap-jump-nav a:hover { |
| color: #020502; |
| border-color: var(--green); |
| background: var(--green); |
| } |
| .roadmap-detail-flow { |
| display: grid; |
| gap: 30px; |
| } |
| #roadmap-app, |
| #stage-timeline, |
| #research-tracks, |
| #scale-up, |
| #task-coverage, |
| #source-mirrors { |
| scroll-margin-top: 92px; |
| } |
| .reader-section { |
| border: 1px solid var(--line); |
| border-radius: var(--radius-lg); |
| background: var(--card); |
| padding: 24px; |
| box-shadow: 0 18px 54px rgba(0, 0, 0, 0.24); |
| } |
| .reader-section-head { |
| display: grid; |
| grid-template-columns: minmax(0, 0.75fr) minmax(320px, 0.55fr); |
| gap: 28px; |
| align-items: start; |
| margin-bottom: 18px; |
| } |
| .reader-section-head h2 { |
| margin: 6px 0 0; |
| font-size: clamp(28px, 3.4vw, 46px); |
| line-height: 1.04; |
| } |
| .reader-section-head p { |
| margin: 0; |
| color: #c7d1c3; |
| font-size: 16px; |
| line-height: 1.58; |
| } |
| .panel-label { |
| color: var(--green); |
| font-family: var(--font-btn); |
| font-size: 12px; |
| font-weight: 700; |
| letter-spacing: 0.08em; |
| text-transform: uppercase; |
| } |
| .stage-timeline, |
| .scale-grid, |
| .track-stack, |
| .task-index-grid { |
| display: grid; |
| gap: 10px; |
| } |
| .stage-timeline { |
| grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); |
| } |
| .scale-grid { |
| grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); |
| } |
| .track-stack { |
| grid-template-columns: 1fr; |
| } |
| .task-index-grid { |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
| } |
| .phase, |
| .scale-card, |
| .track-card, |
| .task-mini-card { |
| border: 1px solid var(--soft-line); |
| border-radius: var(--radius); |
| background: rgba(2, 8, 2, 0.76); |
| } |
| .phase, |
| .scale-card, |
| .task-mini-card { |
| padding: 14px; |
| } |
| .track-card { |
| padding: 18px; |
| } |
| .phase[data-stage="now"], |
| .phase[data-stage="scale_up"], |
| .phase[data-stage="omni"], |
| .track-card[data-status*="implemented"], |
| .track-card[data-status*="current"] { |
| border-color: rgba(204, 255, 160, 0.42); |
| } |
| .phase span { |
| display: inline-flex; |
| margin-bottom: 8px; |
| color: var(--green); |
| font-family: var(--font-btn); |
| font-size: 11px; |
| font-weight: 700; |
| text-transform: uppercase; |
| } |
| .phase strong { |
| display: block; |
| line-height: 1.12; |
| } |
| .phase p { |
| margin: 8px 0 0; |
| color: var(--muted); |
| font-size: 12px; |
| line-height: 1.4; |
| } |
| .track-card-head { |
| display: grid; |
| grid-template-columns: minmax(0, 0.68fr) minmax(260px, 0.42fr); |
| gap: 20px; |
| align-items: start; |
| } |
| .track-card h3, |
| .scale-card h3, |
| .task-mini-card h3 { |
| margin: 0; |
| line-height: 1.12; |
| } |
| .track-card h3 { |
| font-size: 28px; |
| } |
| .track-card p, |
| .scale-card p, |
| .task-mini-card p, |
| .track-card li { |
| color: #c7d1c3; |
| line-height: 1.52; |
| } |
| .track-card p, |
| .scale-card p { |
| margin: 10px 0 0; |
| font-size: 15px; |
| } |
| .track-summary { |
| display: grid; |
| gap: 10px; |
| align-content: start; |
| } |
| .track-summary strong { |
| color: var(--ink); |
| } |
| .track-meta, |
| .task-meta { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 6px; |
| margin-top: 10px; |
| } |
| .direction-task-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); |
| gap: 10px; |
| margin-top: 16px; |
| padding-top: 16px; |
| border-top: 1px solid var(--soft-line); |
| } |
| .task-mini-card { |
| display: grid; |
| gap: 9px; |
| min-height: 190px; |
| } |
| .task-mini-card h3 { |
| font-size: 17px; |
| } |
| .task-mini-card p { |
| margin: 0; |
| font-size: 13px; |
| } |
| .task-mini-card .task-metric { |
| display: grid; |
| gap: 5px; |
| margin-top: auto; |
| padding-top: 10px; |
| border-top: 1px solid var(--soft-line); |
| color: var(--muted); |
| font-family: var(--font-mono); |
| font-size: 12px; |
| } |
| .track-details { |
| margin-top: 16px; |
| border-top: 1px solid var(--soft-line); |
| padding-top: 14px; |
| } |
| .track-details summary { |
| cursor: pointer; |
| color: var(--green); |
| font-family: var(--font-btn); |
| font-weight: 700; |
| } |
| .track-details ul { |
| display: grid; |
| gap: 8px; |
| margin: 12px 0 0; |
| padding-left: 18px; |
| } |
| .chip { |
| display: inline-flex; |
| align-items: center; |
| min-height: 24px; |
| padding: 0 8px; |
| border: 1px solid var(--soft-line); |
| border-radius: 999px; |
| color: #dce8d6; |
| background: rgba(255, 255, 255, 0.04); |
| font-family: var(--font-btn); |
| font-size: 11px; |
| font-weight: 700; |
| } |
| .chip.green { color: var(--green); } |
| .chip.blue { color: var(--blue); } |
| .chip.cyan { color: var(--cyan); } |
| .chip.amber { color: var(--amber); } |
| .metric-grid { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 8px; |
| } |
| .metric { |
| border: 1px solid var(--soft-line); |
| border-radius: var(--radius); |
| padding: 10px; |
| background: rgba(2, 8, 2, 0.72); |
| } |
| .metric strong { |
| display: block; |
| font-family: var(--font-mono); |
| font-size: 18px; |
| line-height: 1; |
| } |
| .metric span { |
| display: block; |
| margin-top: 6px; |
| color: var(--muted); |
| font-size: 12px; |
| } |
| .artifact-row { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 10px; |
| margin-top: 20px; |
| } |
| .artifact-note { |
| margin: 20px 0 -8px; |
| color: var(--muted); |
| font-size: 13px; |
| line-height: 1.55; |
| } |
| .artifact-row a { |
| min-height: 38px; |
| display: inline-flex; |
| align-items: center; |
| padding: 0 13px; |
| border: 1px solid var(--soft-line); |
| border-radius: 999px; |
| background: var(--pill); |
| color: #dce8d6; |
| font-family: var(--font-btn); |
| font-size: 13px; |
| font-weight: 700; |
| text-decoration: none; |
| } |
| .artifact-row a:hover { border-color: var(--green); color: var(--green); } |
| .loading { |
| min-height: 480px; |
| display: grid; |
| place-items: center; |
| color: var(--muted); |
| border: 1px solid var(--line); |
| border-radius: var(--radius); |
| background: var(--card); |
| } |
| .static-summary { |
| display: grid; |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| gap: 12px; |
| margin: 18px 0 22px; |
| } |
| .static-card { |
| border: 1px solid var(--soft-line); |
| border-radius: var(--radius); |
| background: rgba(5, 10, 6, 0.74); |
| padding: 16px; |
| } |
| .static-card small { |
| display: block; |
| color: var(--green); |
| font-family: var(--font-btn); |
| font-size: 11px; |
| font-weight: 700; |
| letter-spacing: 0.06em; |
| text-transform: uppercase; |
| } |
| .static-card strong { |
| display: block; |
| margin-top: 7px; |
| color: var(--ink); |
| font-size: 18px; |
| line-height: 1.2; |
| } |
| .static-card p { |
| margin: 8px 0 0; |
| color: var(--muted); |
| font-size: 13px; |
| line-height: 1.55; |
| } |
| @media (max-width: 1180px) { |
| .hero-grid, |
| .section-head, |
| .reader-section-head, |
| .track-card-head { grid-template-columns: 1fr; } |
| } |
| @media (max-width: 760px) { |
| .wrap { width: min(100% - 28px, var(--max)); } |
| .scroll-companion { |
| right: max(12px, env(safe-area-inset-right)); |
| bottom: max(12px, env(safe-area-inset-bottom)); |
| grid-template-columns: minmax(0, 1fr) auto; |
| max-width: calc(100vw - 24px); |
| } |
| .scroll-status { min-width: 0; padding: 7px 10px; } |
| .scroll-status span { max-width: 52vw; } |
| .back-to-top { min-width: 48px; padding: 0 10px; } |
| .nav-links { display: none; } |
| .hero { padding-top: 52px; } |
| .hero-copy { font-size: 17px; } |
| .facts, |
| .stage-timeline, |
| .scale-grid, |
| .task-index-grid, |
| .direction-task-grid, |
| .metric-grid { grid-template-columns: 1fr; } |
| .route-step { grid-template-columns: 38px 1fr; } |
| .route-step em { grid-column: 2; } |
| .static-summary { grid-template-columns: 1fr; } |
| .section-head { gap: 18px; } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="page-progress" aria-hidden="true"><span></span></div> |
| <div class="scroll-companion" id="scrollCompanion" aria-live="polite"> |
| <div class="scroll-status" aria-label="Reading progress"> |
| <strong id="scrollPercent">0%</strong> |
| <span id="scrollSection">Top</span> |
| </div> |
| <button class="back-to-top" id="backToTop" type="button" aria-label="Back to top">Top</button> |
| </div> |
| <nav class="site-nav"> |
| <div class="wrap nav-inner"> |
| <a class="brand" href="index.html" aria-label="Ropedia Xperience-10M Task Suite home"> |
| <img src="assets/brand/xperience10m-logo-mark-192.png" alt="" aria-hidden="true" width="38" height="38"> |
| <span>Ropedia Xperience-10M Task Suite</span> |
| </a> |
| <div class="nav-links" aria-label="Page navigation"> |
| <a href="index.html">Project</a> |
| <a class="active" href="research_roadmap.html">Roadmap</a> |
| <a href="index.html#suite">Tasks</a> |
| <a href="index.html#takeaways">Results</a> |
| <a href="https://github.com/ChaoYue0307/ropedia-xperience-10m-task-suite/blob/main/THREE_FOUNDATION_PIPELINES.md">Scale-up note</a> |
| <a href="index.html#glossary">Glossary</a> |
| <a href="single_episode_explorer.html">Explorer</a> |
| <a class="primary" href="https://huggingface.co/spaces/cy0307/ropedia-xperience-10m-task-suite">HF</a> |
| <a class="primary" href="https://github.com/ChaoYue0307/ropedia-xperience-10m-task-suite">Repo</a> |
| </div> |
| </div> |
| </nav> |
|
|
| <header class="hero"> |
| <div class="wrap hero-grid"> |
| <div> |
| <div class="eyebrow">20 tasks / 4 tracks / scale-up path</div> |
| <h1>Research Roadmap Details.</h1> |
| <p class="hero-copy"> |
| A focused roadmap page for the project path: current public-sample task |
| evidence, four research tracks, the selected-episode Qwen3-Omni scale-up |
| path, Cosmos 3 / policy-model branch choices, and the future |
| Xperience-native foundation-model pretraining goal. The page is generated |
| from the same artifact data as the public matrix and uses simple anchors |
| instead of nested controls. |
| </p> |
| <div class="hero-actions"> |
| <a class="button primary" href="#stage-timeline">Stage timeline</a> |
| <a class="button" href="#research-tracks">Research tracks</a> |
| <a class="button" href="#task-coverage">20-task coverage</a> |
| <a class="button" href="index.html#roadmap">Back to main roadmap</a> |
| </div> |
| </div> |
| <aside class="hero-panel" aria-label="Roadmap route"> |
| <div class="route"> |
| <div class="route-step"> |
| <strong>01</strong> |
| <div><b>Public sample</b><span>20 task contracts and current baselines</span></div> |
| <em id="routeSample">1 episode</em> |
| </div> |
| <div class="route-step"> |
| <strong>02</strong> |
| <div><b>Data preparation</b><span>episode-level split and missing-view manifest</span></div> |
| <em id="routeData">32 target</em> |
| </div> |
| <div class="route-step"> |
| <strong>03</strong> |
| <div><b>Omni + branches</b><span>Qwen3-Omni first, Cosmos 3 and policy models next, native pretraining later</span></div> |
| <em id="routeOmni">pending data</em> |
| </div> |
| </div> |
| </aside> |
| </div> |
| </header> |
|
|
| <main> |
| <div class="wrap facts" id="facts" aria-label="Roadmap facts"></div> |
|
|
| <section class="roadmap-section" id="roadmap-app"> |
| <div class="wrap"> |
| <div class="section-head"> |
| <h2>From one public sample to multi-episode embodied-AI experiments.</h2> |
| <p> |
| The roadmap keeps stage timing, research |
| tracks, linked tasks, scale-up gates, and source mirrors visible without |
| a separate track selector. |
| </p> |
| </div> |
|
|
| <div class="roadmap-jump-nav" aria-label="Roadmap detail sections"> |
| <a href="#stage-timeline">Stage timeline</a> |
| <a href="#research-tracks">Research tracks</a> |
| <a href="#scale-up">Scale-up gates</a> |
| <a href="#task-coverage">20-task coverage</a> |
| <a href="#source-mirrors">Source mirrors</a> |
| </div> |
|
|
| <div class="static-summary" aria-label="Roadmap quick read"> |
| <article class="static-card"><small>Stage status</small><strong>Implementation state before task detail.</strong><p>Shipped, active, planned, and future stages stay separate from ambition.</p></article> |
| <article class="static-card"><small>Then compare</small><strong>Four tracks reuse the same 20 tasks.</strong><p>Human motion, 3D/4D reconstruction, egocentric interaction, and world modeling are research views over the shared task suite.</p></article> |
| <article class="static-card"><small>Source mirrors</small><strong>Structured data remains attached below.</strong><p>JSON mirrors and GitHub notes support validation, reproduction, and citation checks.</p></article> |
| </div> |
| <noscript> |
| <div class="loading">JavaScript is disabled, so the generated task cards are not expanded here. The quick summary, navigation links, and structured roadmap mirrors below remain available.</div> |
| </noscript> |
| <div id="loading" class="loading">Loading roadmap artifacts...</div> |
|
|
| <div class="roadmap-detail-flow" id="app" hidden> |
| <section class="reader-section" id="stage-timeline" aria-label="Stage timeline"> |
| <div class="reader-section-head"> |
| <div> |
| <div class="panel-label">01 / Stage timeline</div> |
| <h2>What has shipped, what is active, and what remains future work.</h2> |
| </div> |
| <p>The timeline keeps implementation state separate from ambition: public-sample task work, selected-episode baselines, Qwen3-Omni diagnostics, branch experiments, and the long-range pretraining goal.</p> |
| </div> |
| <div class="stage-timeline" id="phaseTimeline"></div> |
| </section> |
|
|
| <section class="reader-section" id="research-tracks" aria-label="Research tracks and linked tasks"> |
| <div class="reader-section-head"> |
| <div> |
| <div class="panel-label">02 / Research tracks</div> |
| <h2>Four tracks with their task evidence kept together.</h2> |
| </div> |
| <p>Each track lists the linked 20-task-suite heads, current evidence state, next steps, and extension probes in one card. Nothing is hidden behind a selected-track side panel.</p> |
| </div> |
| <div class="track-stack" id="trackStack"></div> |
| </section> |
|
|
| <section class="reader-section" id="scale-up" aria-label="Scale-up and model branch gates"> |
| <div class="reader-section-head"> |
| <div> |
| <div class="panel-label">03 / Scale-up gates</div> |
| <h2>Data preparation and model-branch decisions.</h2> |
| </div> |
| <p>This section keeps the selected-episode gate, Qwen3-Omni pilot contract, and foundation-model branch matrix separate from the task cards so the training route stays clear.</p> |
| </div> |
| <div class="scale-grid" id="scaleCards"></div> |
| </section> |
|
|
| <section class="reader-section" id="task-coverage" aria-label="All 20 task coverage"> |
| <div class="reader-section-head"> |
| <div> |
| <div class="panel-label">04 / 20-task coverage</div> |
| <h2>All task contracts in one index.</h2> |
| </div> |
| <p>The compact task index is for scanning. It shows each task’s output, metric, and direction roles without forcing another navigation layer.</p> |
| </div> |
| <div class="task-index-grid" id="taskIndex"></div> |
| </section> |
| </div> |
|
|
| <p class="artifact-note" id="source-mirrors">Structured mirrors for scripts and validators are attached here. The sections above summarize the roadmap before these records.</p> |
| <div class="artifact-row" aria-label="Structured roadmap mirrors"> |
| <a href="data/research_roadmap_interactive.json">Roadmap detail data</a> |
| <a href="data/foundation_model_plan.json">Foundation-plan mirror</a> |
| <a href="data/research_directions.json">Research-track mirror</a> |
| <a href="data/task_walkthroughs.json">Task walkthrough mirror</a> |
| <a href="data/summary_metrics.json">Summary-metric mirror</a> |
| <a href="https://github.com/ChaoYue0307/ropedia-xperience-10m-task-suite/blob/main/RESEARCH_ROADMAP.md">Roadmap document</a> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| <script> |
| const roadmapPrefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)"); |
| |
| function currentRoadmapSection() { |
| const candidates = Array.from(document.querySelectorAll(".reader-section[id], .hero")); |
| let current = "Top"; |
| for (const section of candidates) { |
| const rect = section.getBoundingClientRect(); |
| if (rect.top <= 112) { |
| const heading = section.querySelector("h1, h2"); |
| current = (heading?.textContent || section.id || "Top").replace(/\.$/, "").trim(); |
| } else { |
| break; |
| } |
| } |
| return current; |
| } |
| |
| function updateRoadmapProgress() { |
| const maxScroll = Math.max(1, document.documentElement.scrollHeight - window.innerHeight); |
| const progress = Math.min(1, Math.max(0, window.scrollY / maxScroll)); |
| const percent = Math.round(progress * 100); |
| document.documentElement.style.setProperty("--scroll-progress", progress.toFixed(4)); |
| document.getElementById("scrollCompanion")?.classList.toggle("is-visible", window.scrollY > 360); |
| const percentLabel = document.getElementById("scrollPercent"); |
| const sectionLabel = document.getElementById("scrollSection"); |
| if (percentLabel) percentLabel.textContent = `${percent}%`; |
| if (sectionLabel) sectionLabel.textContent = currentRoadmapSection(); |
| } |
| |
| window.addEventListener("scroll", updateRoadmapProgress, { passive: true }); |
| window.addEventListener("resize", updateRoadmapProgress); |
| document.getElementById("backToTop")?.addEventListener("click", () => { |
| window.scrollTo({ top: 0, behavior: roadmapPrefersReducedMotion.matches ? "auto" : "smooth" }); |
| }); |
| updateRoadmapProgress(); |
| |
| function esc(value) { |
| if (value === null || value === undefined || value === "") return "-"; |
| return String(value).replace(/[&<>"']/g, (char) => ({ |
| "&": "&", |
| "<": "<", |
| ">": ">", |
| '"': """, |
| "'": "'" |
| }[char])); |
| } |
| |
| function fmt(value) { |
| if (value === null || value === undefined || value === "") return "-"; |
| if (typeof value === "number") return new Intl.NumberFormat("en-US").format(value); |
| return String(value); |
| } |
| |
| function humanize(value) { |
| return fmt(value).replace(/_/g, " "); |
| } |
| |
| function metricText(metric) { |
| if (!metric || !metric.name) return "metric pending"; |
| const left = metric.minimal !== null && metric.minimal !== undefined ? metric.minimal : "-"; |
| const right = metric.neural_mlp !== null && metric.neural_mlp !== undefined ? metric.neural_mlp : "-"; |
| return `${metric.name}: minimal ${left} / neural ${right}`; |
| } |
| |
| function cssRole(role) { |
| if (role === "direct") return "green"; |
| if (role === "proxy") return "cyan"; |
| if (role === "diagnostic") return "amber"; |
| return "blue"; |
| } |
| |
| function roleChips(roles = {}) { |
| return Object.entries(roles).map(([code, role]) => ( |
| `<span class="chip ${cssRole(role)}">${esc(code)}: ${esc(role)}</span>` |
| )).join(""); |
| } |
| |
| function evidenceDetails(links = []) { |
| if (!links.length) return ""; |
| return ` |
| <details class="track-details"> |
| <summary>Evidence links</summary> |
| <div class="artifact-row"> |
| ${links.map((link) => `<a href="${esc(link.href)}">${esc(link.label)}</a>`).join("")} |
| </div> |
| </details> |
| `; |
| } |
| |
| function setFacts(data) { |
| const scope = data.scope; |
| const scale = data.scale_up; |
| const facts = [ |
| ["Sample episodes", scope.sample_episode_count], |
| ["Aligned windows", scope.num_windows], |
| ["Feature dimensions", scope.feature_dim], |
| ["Research tasks", data.tasks.length], |
| ["Pilot target episodes", scale.target_episodes] |
| ]; |
| document.getElementById("facts").innerHTML = facts.map(([label, value]) => ( |
| `<div class="fact"><strong>${esc(fmt(value))}</strong><span>${esc(label)}</span></div>` |
| )).join(""); |
| document.getElementById("routeSample").textContent = `${fmt(scope.sample_episode_count)} episode`; |
| document.getElementById("routeData").textContent = `${fmt(scale.target_episodes)} target`; |
| document.getElementById("routeOmni").textContent = data.omni_plan.backbone.replace("Qwen/", ""); |
| } |
| |
| function renderPhases(data) { |
| document.getElementById("phaseTimeline").innerHTML = data.phases.map((phase) => ` |
| <article class="phase" data-stage="${esc(phase.stage)}"> |
| <span>${esc(humanize(phase.status))}</span> |
| <strong>${esc(phase.name)}</strong> |
| <p>${esc(phase.reader_takeaway || phase.entry_condition || "")}</p> |
| </article> |
| `).join(""); |
| } |
| |
| function renderTaskCard(task, directionCode = null) { |
| const role = directionCode ? task.direction_roles?.[directionCode] : null; |
| return ` |
| <article class="task-mini-card"> |
| <div> |
| <h3>${esc(task.display_name)}</h3> |
| <p>${esc(task.why || task.research_name || "Task contract in the unified suite.")}</p> |
| </div> |
| <p><strong>Input:</strong> ${esc(task.input_short || task.input || "see task walkthrough")}</p> |
| <p><strong>Output:</strong> ${esc(task.output_short || task.research_name || "task target")}</p> |
| <div class="task-meta"> |
| ${role ? `<span class="chip ${cssRole(role)}">${esc(role)}</span>` : roleChips(task.direction_roles)} |
| <span class="chip">${esc(task.family || "task")}</span> |
| </div> |
| <div class="task-metric"> |
| <span>${esc(metricText(task.metric))}</span> |
| <span>${esc(task.current_limit || "")}</span> |
| </div> |
| ${evidenceDetails(task.evidence_links || [])} |
| </article> |
| `; |
| } |
| |
| function renderTracks(data) { |
| document.getElementById("trackStack").innerHTML = data.directions.map((direction) => { |
| const extensions = (direction.extension_tasks || []).map((item) => ( |
| `<li><strong>${esc(item.name)}:</strong> ${esc(item.metric_name)}; ${esc(item.current_limit)}</li>` |
| )).join(""); |
| const nextSteps = (direction.next_steps || []).map((step) => `<li>${esc(step)}</li>`).join(""); |
| const tasks = (direction.tasks || []).map((task) => renderTaskCard(task, direction.code)).join(""); |
| return ` |
| <article class="track-card" id="track-${esc(direction.code.toLowerCase())}" data-status="${esc(direction.current_status)}"> |
| <div class="track-card-head"> |
| <div> |
| <div class="panel-label">Track ${esc(direction.code)}</div> |
| <h3>${esc(direction.name)}</h3> |
| <p>${esc(direction.current_readout || direction.focus)}</p> |
| <div class="track-meta"> |
| <span class="chip green">${esc(humanize(direction.current_status))}</span> |
| <span class="chip">${esc(fmt(direction.counts?.direct || 0))} direct</span> |
| <span class="chip cyan">${esc(fmt(direction.counts?.proxy || 0))} proxy</span> |
| <span class="chip amber">${esc(fmt(direction.counts?.diagnostic || 0))} diagnostic</span> |
| </div> |
| </div> |
| <div class="track-summary"> |
| <p><strong>Focus:</strong> ${esc(direction.focus)}</p> |
| <p><strong>Useful background:</strong> ${esc(direction.preferred_background || "embodied AI and multimodal learning")}</p> |
| </div> |
| </div> |
| <div class="direction-task-grid">${tasks}</div> |
| <details class="track-details" open> |
| <summary>Next steps and extension probes</summary> |
| <ul>${nextSteps || "<li>No next step is currently mapped.</li>"}</ul> |
| <ul>${extensions || "<li>No extension probe is currently mapped to this track.</li>"}</ul> |
| </details> |
| </article> |
| `; |
| }).join(""); |
| } |
| |
| function renderScaleCards(data) { |
| const scope = data.scope; |
| const scale = data.scale_up; |
| const omni = data.omni_plan; |
| const foundation = data.foundation_model_plan; |
| const execution = (foundation.execution_order || []).map((item) => ( |
| `<li><strong>${esc(item.step)}. ${esc(item.name)}:</strong> ${esc(item.action)}</li>` |
| )).join(""); |
| document.getElementById("scaleCards").innerHTML = ` |
| <article class="scale-card"> |
| <div class="panel-label">Current public sample</div> |
| <h3>Task lab evidence</h3> |
| <p>${esc(data.baseline_summary.current_use)}</p> |
| <div class="metric-grid"> |
| <div class="metric"><strong>${esc(fmt(scope.num_windows))}</strong><span>windows</span></div> |
| <div class="metric"><strong>${esc(fmt(scope.feature_dim))}</strong><span>feature dimensions</span></div> |
| <div class="metric"><strong>${esc(fmt(data.baseline_summary.task_count))}</strong><span>task contracts</span></div> |
| <div class="metric"><strong>${esc(fmt(scope.feature_blocks))}</strong><span>feature blocks</span></div> |
| </div> |
| </article> |
| <article class="scale-card"> |
| <div class="panel-label">Selected-episode gate</div> |
| <h3>Multi-episode data preparation</h3> |
| <p>${esc(scale.access_status)}</p> |
| <div class="metric-grid"> |
| <div class="metric"><strong>${esc(fmt(scale.target_episodes))}</strong><span>target episodes</span></div> |
| <div class="metric"><strong>${esc(fmt(scale.valid_candidates))}</strong><span>valid candidates</span></div> |
| <div class="metric"><strong>${esc(fmt(scale.candidate_scan_top_level_sessions))}</strong><span>sessions scanned</span></div> |
| <div class="metric"><strong>${esc(fmt(Math.round((scale.estimated_bytes || 0) / 1e9)))} GB</strong><span>estimated selected data</span></div> |
| </div> |
| </article> |
| <article class="scale-card"> |
| <div class="panel-label">First model pilot</div> |
| <h3>Qwen3-Omni LoRA branch</h3> |
| <p>Backbone ${esc(omni.backbone)} with ${esc(omni.adapter)} over ${esc(omni.training_unit)}.</p> |
| <p><strong>First pilot:</strong> ${esc(omni.first_pilot)}</p> |
| <p><strong>Evaluation:</strong> ${esc(omni.evaluation)}</p> |
| </article> |
| <article class="scale-card"> |
| <div class="panel-label">Foundation-model branch order</div> |
| <h3>What scales after the pilot</h3> |
| <p>${esc(foundation.decision?.long_term_native_pretraining_goal || "Xperience-native pretraining remains a later stage.")}</p> |
| <details class="track-details" open> |
| <summary>Execution order</summary> |
| <ul>${execution}</ul> |
| </details> |
| </article> |
| `; |
| } |
| |
| function renderTaskIndex(data) { |
| document.getElementById("taskIndex").innerHTML = data.tasks.map((task) => renderTaskCard(task)).join(""); |
| } |
| |
| fetch("data/research_roadmap_interactive.json", { cache: "no-cache" }) |
| .then((response) => { |
| if (!response.ok) throw new Error(`HTTP ${response.status}`); |
| return response.json(); |
| }) |
| .then((data) => { |
| setFacts(data); |
| renderPhases(data); |
| renderTracks(data); |
| renderScaleCards(data); |
| renderTaskIndex(data); |
| document.getElementById("loading").hidden = true; |
| document.getElementById("app").hidden = false; |
| }) |
| .catch((error) => { |
| document.getElementById("loading").textContent = `Roadmap data could not be loaded: ${error.message}`; |
| }); |
| </script> |
| </body> |
| </html> |
|
|
