| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>torch-neuronx model support</title> |
| <link rel="icon" type="image/png" href="aws-neuron.png"> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap"> |
| <style> |
| :root { |
| color-scheme: light dark; |
| --bg: #ffffff; |
| --fg: #1f2328; |
| --muted: #59636e; |
| --border: #d1d9e0; |
| --stripe: #f6f8fa; |
| --hover: #ddeeff; |
| --accent: #0969da; |
| --code: #eff1f3; |
| } |
| @media (prefers-color-scheme: dark) { |
| :root { |
| --bg: #0d1117; |
| --fg: #e6edf3; |
| --muted: #9198a1; |
| --border: #3d444d; |
| --stripe: #151b23; |
| --hover: #1c2b41; |
| --accent: #4493f8; |
| --code: #262c36; |
| } |
| } |
| body { |
| margin: 0 auto; |
| max-width: 1280px; |
| padding: 16px; |
| background: var(--bg); |
| color: var(--fg); |
| font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif; |
| } |
| a { color: var(--accent); } |
| code, pre { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; } |
| |
| .banner { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 24px; |
| padding: 20px 28px; |
| border-radius: 16px; |
| background: #f4e7d6; |
| color: #232f3e; |
| } |
| .banner h1, .tagline { font-family: Montserrat, -apple-system, "Segoe UI", sans-serif; font-weight: 800; text-transform: uppercase; } |
| .banner h1 { margin: 0; font-size: clamp(22px, 3.2vw, 34px); line-height: 1.15; } |
| .tagline { margin: 8px 0 14px; color: #1a8e3b; font-size: 15px; letter-spacing: 0.02em; } |
| .brands { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0; font-size: 15px; font-weight: 600; } |
| .brands span { display: inline-flex; align-items: center; gap: 8px; } |
| .brands img { height: 28px; width: auto; } |
| .brands .neuron { border-radius: 6px; } |
| .brands .sep { width: 1px; height: 24px; background: rgb(35 47 62 / 0.3); } |
| .mascot { flex: none; width: 196px; height: auto; } |
| @media (max-width: 640px) { |
| .banner { padding: 16px 20px; } |
| .mascot { display: none; } |
| } |
| .intro { color: var(--muted); } |
| .intro a { white-space: nowrap; } |
| [role=tablist] { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 16px 0; overflow-x: auto; } |
| [role=tab] { |
| background: none; |
| border: 1px solid transparent; |
| border-bottom: none; |
| border-radius: 6px 6px 0 0; |
| margin-bottom: -1px; |
| padding: 8px 16px; |
| color: var(--muted); |
| font: inherit; |
| cursor: pointer; |
| white-space: nowrap; |
| } |
| [role=tab][aria-selected=true] { background: var(--bg); border-color: var(--border); color: var(--fg); font-weight: 600; } |
| .views[role=tablist] { border-bottom: none; margin: 0 0 12px; } |
| .views [role=tab] { border: 1px solid var(--border); border-radius: 999px; margin: 0; padding: 4px 14px; } |
| .views [role=tab][aria-selected=true] { background: var(--fg); border-color: var(--fg); color: var(--bg); } |
| .pair { color: var(--muted); margin: 0; } |
| .controls { display: flex; flex-wrap: wrap; gap: 12px 24px; } |
| .controls label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 12px; } |
| select, input[type=search] { |
| font: inherit; |
| padding: 4px 8px; |
| border: 1px solid var(--border); |
| border-radius: 6px; |
| background: var(--bg); |
| color: var(--fg); |
| } |
| .tasks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 12px 0; } |
| .tasks > span { color: var(--muted); font-size: 12px; margin-right: 6px; } |
| .tasks button { |
| border: 1px solid var(--border); |
| border-radius: 999px; |
| padding: 2px 12px; |
| background: var(--bg); |
| color: var(--fg); |
| font: inherit; |
| cursor: pointer; |
| } |
| .tasks button[aria-pressed=true] { border-color: var(--accent); background: var(--hover); color: var(--accent); } |
| .status { color: var(--muted); } |
| .summary { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; } |
| .summary p { margin: 12px 0; } |
| .pager { display: flex; gap: 8px; } |
| .results > .pager { justify-content: flex-end; margin: 12px 0; } |
| .pager button { |
| font: inherit; |
| padding: 4px 12px; |
| border: 1px solid var(--border); |
| border-radius: 6px; |
| background: var(--bg); |
| color: var(--fg); |
| cursor: pointer; |
| } |
| .pager button:disabled { color: var(--muted); cursor: default; opacity: 0.6; } |
| .scroll { overflow-x: auto; } |
| table { border-collapse: collapse; width: 100%; min-width: 960px; } |
| th, td { border: 1px solid var(--border); padding: 6px 12px; text-align: left; vertical-align: top; } |
| th { font-weight: 600; white-space: nowrap; } |
| tbody tr:nth-child(even) { background: var(--stripe); } |
| tbody tr:not(.untested) { cursor: pointer; } |
| tbody tr:not(.untested):hover, tbody tr:focus-visible { background: var(--hover); outline: none; } |
| tr.untested { color: var(--muted); } |
| td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } |
| td.result { white-space: nowrap; } |
| td.notes { word-break: break-word; } |
| dialog { |
| width: min(900px, calc(100vw - 32px)); |
| max-height: calc(100vh - 64px); |
| padding: 0; |
| border: 1px solid var(--border); |
| border-radius: 12px; |
| background: var(--bg); |
| color: var(--fg); |
| } |
| dialog::backdrop { background: rgb(0 0 0 / 0.5); } |
| .dialog { padding: 16px 24px; } |
| .dialog h2 { margin: 0 32px 4px 0; font-size: 18px; overflow-wrap: anywhere; } |
| .close { float: right; border: none; background: none; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; } |
| pre { background: var(--code); padding: 8px 12px; border-radius: 6px; overflow-x: auto; } |
| pre.error { white-space: pre-wrap; overflow-wrap: anywhere; } |
| dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 16px; margin: 8px 0; } |
| dt { color: var(--muted); } |
| dd { margin: 0; overflow-wrap: anywhere; } |
| summary { cursor: pointer; color: var(--accent); margin: 12px 0 4px; } |
| </style> |
| <script type="module" src="app.js"></script> |
| </head> |
| <body> |
| <header class="banner"> |
| <div> |
| <h1>Does your model run on Trainium?</h1> |
| <p class="tagline">Look it up</p> |
| <p class="brands"> |
| <span><img class="neuron" src="aws-neuron.png" alt="" width="28" height="28">AWS Trainium</span> |
| <span class="sep" aria-hidden="true"></span> |
| <span><img src="hf-logo.svg" alt="" width="30" height="28">Hugging Face</span> |
| </p> |
| </div> |
| <img class="mascot" src="hf-character.webp" alt="" width="196" height="150"> |
| </header> |
| <p class="intro"> |
| Which Hugging Face Hub models run unmodified on AWS Trainium through the native PyTorch backend |
| <a href="https://github.com/aws-neuron/torch-neuronx" target="_blank" rel="noopener">torch-neuronx</a>.<br> |
| Select a model to see how to run it.<br> |
| Source: <a href="https://huggingface.co/datasets/aws-neuron/torch-neuronx-model-support" target="_blank" |
| rel="noopener">aws-neuron/torch-neuronx-model-support</a> |
| </p> |
| <nav id="tabs" role="tablist"></nav> |
| <main id="panel"><p class="status">Loading…</p></main> |
| <dialog id="run"></dialog> |
| </body> |
| </html> |
|
|
