File size: 7,190 Bytes
88f54b7 09eb6df e323008 09eb6df e323008 d543f27 09eb6df f4104eb 09eb6df 4f66a58 09eb6df 4f2e40d 09eb6df 210e29b 09eb6df d3e420f 09eb6df e323008 90c6911 e323008 09eb6df d543f27 09eb6df 88f54b7 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 | <!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; }
/* The banner takes the colors of the blog post's thumbnail, in both color schemes. */
.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>
|