internal/adminui/assets/models.html


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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Browse AIGW models, API protocols, context limits, and current token prices.">
  <title>Models | AIGW</title>
  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23102a3a'/%3E%3Ctext x='16' y='22' text-anchor='middle' font-family='Arial' font-weight='700' font-size='18' fill='%23b8eef7'%3EA%3C/text%3E%3C/svg%3E">
  <link rel="stylesheet" href="./models.css">
  <script src="./models.js" defer></script>
</head>
<body>
  <header class="catalog-header">
    <a class="catalog-brand" href="./models" aria-label="AIGW model catalog"><span>A</span><strong>AIGW</strong><small>MODEL CATALOG</small></a>
    <nav aria-label="Account access"><a class="button secondary" href="./">Sign in</a><a class="button primary" id="create-account" href="./?auth=register">Create account</a></nav>
  </header>
  <main>
    <section class="catalog-intro">
      <div><span class="eyebrow">UNIFIED API</span><h1>Models</h1></div>
      <div class="catalog-stats" aria-live="polite"><span><strong id="model-count">0</strong> models</span><span><strong id="provider-count">0</strong> routes</span><span><strong id="protocol-count">0</strong> APIs</span></div>
    </section>

    <form class="catalog-filters" id="catalog-filters">
      <label class="search-field">Search<input id="search" type="search" placeholder="Model, developer, or capability" autocomplete="off"></label>
      <label>Protocol<select id="protocol"><option value="">All protocols</option></select></label>
      <label>Input<select id="input"><option value="">Any input</option><option value="text">Text</option><option value="image">Image</option><option value="audio">Audio</option><option value="video">Video</option></select></label>
      <label>Developer<select id="owner"><option value="">All developers</option></select></label>
      <label>Sort<select id="sort"><option value="newest">Newest</option><option value="name">Name</option><option value="input_price">Lowest input price</option><option value="output_price">Lowest output price</option><option value="context">Largest context</option></select></label>
    </form>

    <div class="catalog-status hidden" id="catalog-error" role="alert"></div>
    <div class="catalog-grid" id="catalog-grid" aria-live="polite"></div>
    <div class="catalog-status hidden" id="catalog-empty">No models match these filters.</div>
  </main>

  <dialog id="model-dialog">
    <article class="model-dialog">
      <header><div><span class="eyebrow" id="detail-owner"></span><h2 id="detail-name"></h2><code id="detail-id"></code></div><button class="icon-button" id="close-dialog" type="button" aria-label="Close">&times;</button></header>
      <p id="detail-description"></p>
      <div class="detail-tags" id="detail-tags"></div>
      <dl class="detail-grid" id="detail-grid"></dl>
      <section class="price-estimator">
        <div><span class="eyebrow">COST ESTIMATE</span><h3>Token estimate</h3></div>
        <div class="estimate-inputs"><label>Input tokens<input id="estimate-input" type="number" min="0" step="100" value="1000"></label><label>Output tokens<input id="estimate-output" type="number" min="0" step="100" value="500"></label><output id="estimate-total"></output></div>
      </section>
      <footer><a class="button secondary" href="./">Sign in</a><a class="button primary" id="detail-register" href="./?auth=register">Start with this model</a></footer>
    </article>
  </dialog>
</body>
</html>