index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Serving a model on your own GPU</title>
<!-- The Space renders inside an iframe and huggingface.co sends
     x-frame-options: DENY, so any link without a target tries to load a
     refused page in the frame and reads as broken. -->
<base target="_blank">
<style>
  :root {
    --bg: #fbfbfa; --panel: #ffffff; --ink: #1a1a19; --muted: #6b6b66;
    --line: #e4e3df; --accent: #3d5a80;
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #16171a; --panel: #1d1f23; --ink: #e8e6e3; --muted: #9a978f;
      --line: #2e3137; --accent: #8ab0d9;
    }
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--bg); color: var(--ink);
    font: 16px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  .wrap { max-width: 46rem; margin: 0 auto; padding: 3.5rem 1.25rem 5rem; }
  .brand { display: inline-block; margin-bottom: 1.75rem; }
  .brand img { height: 1.5rem; width: auto; display: block; filter: invert(1); opacity: .78; }
  @media (prefers-color-scheme: dark) { .brand img { filter: none; opacity: .9; } }

  h1 { font-size: clamp(1.6rem, 4.5vw, 2.2rem); line-height: 1.2;
       letter-spacing: -0.02em; margin: 0 0 .75rem; font-weight: 620; }
  header p { color: var(--muted); margin: 0 0 .6rem; }

  form { display: flex; gap: .5rem; margin: 2rem 0 .5rem; }
  input {
    flex: 1 1 auto; min-width: 0; height: 2.7rem; padding: 0 .8rem;
    border: 1px solid var(--line); border-radius: .5rem;
    background: var(--panel); color: var(--ink);
    font: inherit; font-family: var(--mono); font-size: .92rem;
  }
  input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
  .hint { font-size: .84rem; color: var(--muted); margin: 0 0 2.5rem; }

  ol.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; }
  ol.steps > li {
    counter-increment: s; position: relative;
    padding: 1.1rem 0 1.1rem 3rem; border-top: 1px solid var(--line);
  }
  ol.steps > li::before {
    content: counter(s); position: absolute; left: 0; top: 1.15rem;
    width: 1.9rem; height: 1.9rem; border-radius: 50%;
    border: 1px solid var(--line); background: var(--panel);
    display: grid; place-items: center;
    font-family: var(--mono); font-size: .82rem; color: var(--muted);
  }
  .q { display: block; font-size: .82rem; color: var(--muted); margin-bottom: .15rem; }
  .steps a { font-size: 1.03rem; font-weight: 600; color: var(--accent); text-decoration: none; }
  .steps a:hover { text-decoration: underline; }
  .steps p { margin: .35rem 0 0; color: var(--muted); font-size: .92rem; }
  .steps .go {
    display: inline-block; margin-top: .5rem; font-size: .84rem;
    font-family: var(--mono); color: var(--accent); text-decoration: none;
    border: 1px solid var(--line); border-radius: .4rem; padding: .25rem .6rem;
    font-weight: 400;
  }
  .steps .go:hover { border-color: var(--accent); text-decoration: none; }

  .row { display: flex; gap: 1.25rem; align-items: flex-start; }
  .text { flex: 1 1 auto; min-width: 0; }
  /* The figure sits beside the words on a wide screen and under them on
     a narrow one, where a 168px diagram beside text would squeeze both. */
  .fig { flex: 0 0 auto; padding-top: .3rem; }
  @media (max-width: 34rem) {
    .row { flex-direction: column; gap: .6rem; }
    .fig { padding-top: 0; }
  }

  h2 { font-size: 1.02rem; font-weight: 600; margin: 3rem 0 .6rem; }
  code { font-family: var(--mono); font-size: .86em; }
  footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
           font-size: .87rem; color: var(--muted); }
  footer a { color: var(--accent); }
</style>
</head>
<body>
<div class="wrap">

<header>
  <a class="brand" href="https://assert.gr" rel="noopener">
    <img src="./assert-logo.png" alt="ASSERT" width="420" height="87">
  </a>
  <h1>Serving a model on your own GPU</h1>
  <p>
    Five questions stand between a model page and a model that runs, and every
    one of them has an answer already sitting in the repo's metadata. These
    tools read it — in your browser, without downloading weights and without
    running anything.
  </p>
  <p>
    Put a model in the box and each step below opens with it already filled in.
  </p>
</header>

<form id="form">
  <input type="text" id="repo" placeholder="owner/model — optional"
         autocomplete="off" spellcheck="false" aria-label="Model repo id">
</form>
<p class="hint" id="hint">
  Leave it empty to browse, or try
  <a href="#" data-fill="google/gemma-4-12B-it">google/gemma-4-12B-it</a> ·
  <a href="#" data-fill="aleada/Nemotron-3.5-Lightning-30B-A3B-W4A16">aleada/Nemotron-3.5-…-W4A16</a>
</p>

<ol class="steps" id="steps"></ol>

<h2>Why metadata is enough</h2>
<p style="color:var(--muted)">
  A model repo publishes its architecture, its attention topology, its tensor
  index and its chat template before you download a byte of weights. Almost
  every serving failure — it will not fit, the context is too long, the answers
  come back empty, the pack is not what its name says — is decidable from that
  alone. None of these tools loads a model, so none of them can tell you how
  <em>good</em> it is. They tell you whether it will work, and what it will
  cost.
</p>

<footer>
  <p>
    Built from the tooling behind the
    <a href="https://huggingface.co/aleada" rel="noopener">aleada</a> W4A16
    packs — quantized models whose cards report what quantization actually cost
    them, measured against the original.
  </p>
</footer>

</div>
<script type="module" src="./app.js"></script>
</body>
</html>