roadmap.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>PyHealth Roadmap</title>
  <meta name="description" content="What the PyHealth community is currently building — upcoming features and extensions on the roadmap.">
  <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=IBM+Plex+Sans:wght@400;500;600&family=Source+Serif+4:opsz,wght@8..60,500;8..60,600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="assets/css/styles.css">
  <style>
    /* ── Hero ── */
    .ph-hero {
      background: linear-gradient(140deg, #1c2b3a 0%, #28425e 60%, #1e3348 100%);
      border-radius: 16px;
      padding: 3rem 2.4rem 2.8rem;
      color: white;
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.07);
      box-shadow: 0 20px 48px rgba(22, 33, 31, 0.18);
      animation: rise 420ms ease;
    }
    .ph-hero::before {
      content: "";
      position: absolute;
      top: -80px; right: -80px;
      width: 340px; height: 340px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(201,95,38,0.22) 0%, transparent 70%);
      pointer-events: none;
    }
    .ph-hero::after {
      content: "";
      position: absolute;
      bottom: -100px; left: -60px;
      width: 280px; height: 280px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(90,160,230,0.1) 0%, transparent 70%);
      pointer-events: none;
    }
    .ph-eyebrow {
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(201,95,38,0.9);
      margin: 0 0 0.6rem;
    }
    .ph-hero h1 {
      color: white;
      font-size: clamp(2rem, 4.5vw, 3.2rem);
      margin: 0 0 0.5rem;
      letter-spacing: -0.01em;
    }
    .ph-tagline {
      color: rgba(255,255,255,0.72);
      font-size: 1.05rem;
      line-height: 1.55;
      max-width: 620px;
      margin: 0 0 1.8rem;
    }
    .ph-cta-row {
      display: flex;
      gap: 0.7rem;
      flex-wrap: wrap;
      position: relative;
      z-index: 1;
    }
    .ph-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      text-decoration: none;
      border-radius: 10px;
      padding: 0.64rem 1.15rem;
      font-size: 0.95rem;
      font-weight: 500;
      font-family: "IBM Plex Sans", sans-serif;
      transition: filter 0.15s, transform 0.1s;
    }
    .ph-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
    .ph-btn.primary {
      background: var(--accent);
      color: white;
      border: 1px solid rgba(255,255,255,0.1);
      box-shadow: 0 4px 12px rgba(201,95,38,0.35);
    }
    .ph-btn.outline {
      background: rgba(255,255,255,0.09);
      color: rgba(255,255,255,0.9);
      border: 1px solid rgba(255,255,255,0.22);
      backdrop-filter: blur(6px);
    }

    /* ── Back nav ── */
    .back-link {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      text-decoration: none;
      color: var(--muted);
      font-size: 0.94rem;
      padding: 0.35rem 0.65rem;
      border-radius: 999px;
      border: 1px solid transparent;
      transition: color 0.12s, background 0.12s, border-color 0.12s;
    }
    .back-link:hover {
      color: var(--accent);
      border-color: var(--line);
      background: var(--paper);
    }

    /* ── Roadmap table ── */
    .roadmap-section {
      margin-top: 2rem;
      animation: rise 500ms ease;
    }
    .roadmap-table-wrap {
      overflow-x: auto;
      border-radius: 14px;
      border: 1px solid var(--line);
      box-shadow: 0 4px 16px rgba(22,33,31,0.06);
    }
    .roadmap-table {
      width: 100%;
      border-collapse: collapse;
      background: var(--paper);
      font-size: 0.97rem;
    }
    .roadmap-table thead tr {
      background: var(--bg);
      border-bottom: 1px solid var(--line);
    }
    .roadmap-table th {
      text-align: left;
      font-size: 0.78rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--muted);
      padding: 0.85rem 1.4rem;
    }
    .roadmap-table td {
      padding: 1.1rem 1.4rem;
      vertical-align: top;
      border-bottom: 1px solid var(--line);
      line-height: 1.55;
    }
    .roadmap-table tbody tr:last-child td {
      border-bottom: none;
    }
    .roadmap-table tbody tr:hover td {
      background: color-mix(in srgb, var(--accent-soft) 30%, transparent);
    }
    .feature-name {
      font-weight: 600;
      color: var(--ink);
      white-space: nowrap;
    }
    .feature-desc {
      color: var(--muted);
    }
    .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.75rem;
      font-weight: 600;
      padding: 0.2rem 0.6rem;
      border-radius: 100px;
      background: rgba(74,222,128,0.12);
      color: #16a34a;
      white-space: nowrap;
    }
    .status-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #4ade80;
      box-shadow: 0 0 0 2px rgba(74,222,128,0.3);
      animation: pulse-dot 2s ease-in-out infinite;
    }
    @keyframes pulse-dot {
      0%, 100% { box-shadow: 0 0 0 2px rgba(74,222,128,0.3); }
      50% { box-shadow: 0 0 0 5px rgba(74,222,128,0.1); }
    }

    .contribute-callout {
      margin-top: 2rem;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 1.5rem 1.6rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1rem;
      animation: rise 560ms ease;
    }
    .contribute-callout p {
      margin: 0.25rem 0 0;
      color: var(--muted);
      font-size: 0.95rem;
    }
    .contribute-callout h3 {
      margin: 0;
      font-size: 1.1rem;
    }
    .callout-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      text-decoration: none;
      background: var(--accent);
      color: white;
      border-radius: 10px;
      padding: 0.6rem 1.1rem;
      font-size: 0.93rem;
      font-weight: 500;
      font-family: "IBM Plex Sans", sans-serif;
      white-space: nowrap;
      transition: filter 0.15s, transform 0.1s;
    }
    .callout-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
  </style>
  <link rel="icon" href="/favicon.ico" sizes="any">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
</head>
<body>

  <header class="site-header">
    <div class="site-wrap header-inner">
      <nav class="nav" aria-label="Main navigation">
        <a href="index.html" class="back-link">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
          PyHealth
        </a>
      </nav>
      <span style="color: var(--muted); font-size: 0.88rem; font-weight: 500;">Roadmap</span>
    </div>
  </header>

  <main class="site-wrap" style="padding: 2.2rem 0 3.5rem;">

    <!-- ── Hero ── -->
    <section class="ph-hero">
      <p class="ph-eyebrow">PyHealth Roadmap</p>
      <h1>What We're Building Next</h1>
      <p class="ph-tagline">A transparent look at the features the PyHealth community is actively developing — from new model modalities to agentic workflows and rigorous evaluation frameworks.</p>
      <div class="ph-cta-row">
        <a href="https://pyhealth.readthedocs.io/en/latest/how_to_contribute.html" class="ph-btn primary" target="_blank" rel="noopener">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
          Get Involved
        </a>
        <a href="https://github.com/sunlabuiuc/PyHealth" class="ph-btn outline" target="_blank" rel="noopener">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0 0 22 12.017C22 6.484 17.522 2 12 2z"/></svg>
          GitHub
        </a>
        <a href="https://discord.gg/mpb835EHaX" class="ph-btn outline" target="_blank" rel="noopener">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.055 20.03 20.03 0 0 0 5.993 3.029.078.078 0 0 0 .084-.026 13.83 13.83 0 0 0 1.185-1.93.076.076 0 0 0-.041-.106 13.201 13.201 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.184 1.929a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.029.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
          Discord Community
        </a>
      </div>
    </section>

    <!-- ── Roadmap table ── -->
    <section class="roadmap-section">
      <h2 style="font-size: clamp(1.3rem, 2.5vw, 1.8rem); margin: 0 0 0.4rem;">What the PyHealth Community is Currently Building</h2>
      <p style="color: var(--muted); font-size: 1rem; margin: 0 0 1.4rem;">These extensions are actively in development. Want to help? See how to contribute below.</p>

      <div class="roadmap-table-wrap">
        <table class="roadmap-table">
          <thead>
            <tr>
              <th>Extension</th>
              <th>Description</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="feature-name">Standardized Interpretability API</td>
              <td class="feature-desc">Build recipes to interpret custom models with state-of-the-art interpretability approaches.</td>
              <td><span class="status-pill"><span class="status-dot"></span>In Progress</span></td>
            </tr>
            <tr>
              <td class="feature-name">PyHealth Agent / MCP</td>
              <td class="feature-desc">Directly enable agents to write and run PyHealth code for you.</td>
              <td><span class="status-pill"><span class="status-dot"></span>In Progress</span></td>
            </tr>
            <tr>
              <td class="feature-name">Multimodal Models</td>
              <td class="feature-desc">Feed any combination of features and modalities and train a model — even in cases of data missingness.</td>
              <td><span class="status-pill"><span class="status-dot"></span>In Progress</span></td>
            </tr>
            <tr>
              <td class="feature-name">EHR Foundational Models</td>
              <td class="feature-desc">Enable fine-tuning of existing EHR foundational models within the PyHealth pipeline.</td>
              <td><span class="status-pill"><span class="status-dot"></span>In Progress</span></td>
            </tr>
            <tr>
              <td class="feature-name">EHR Generative Models</td>
              <td class="feature-desc">Train and deploy your own synthetic patient generators.</td>
              <td><span class="status-pill"><span class="status-dot"></span>In Progress</span></td>
            </tr>
            <tr>
              <td class="feature-name">Conformal Prediction Benchmarks</td>
              <td class="feature-desc">Test whether conformal methods can provide robust guarantees of predictions in high-stakes healthcare settings.</td>
              <td><span class="status-pill"><span class="status-dot"></span>In Progress</span></td>
            </tr>
          </tbody>
        </table>
      </div>
    </section>

    <!-- ── Contribute callout ── -->
    <div class="contribute-callout">
      <div>
        <h3>Want to help build PyHealth?</h3>
        <p>Join 750+ community members and 10+ active researchers — contributions of all kinds are welcome.</p>
      </div>
      <a href="https://pyhealth.readthedocs.io/en/latest/how_to_contribute.html" class="callout-btn" target="_blank" rel="noopener">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
        How to Contribute
      </a>
    </div>

  </main>

  <footer class="site-footer">
    <div class="site-wrap" style="display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.5rem;">
      <span>Copyright <span id="year"></span> PyHealth Team</span>
      <a href="index.html" style="color:var(--accent); text-decoration:none; font-size:0.9rem;">← Back to PyHealth</a>
    </div>
  </footer>

  <script>
    document.getElementById('year').textContent = new Date().getFullYear();
  </script>
</body>
</html>