ModelVisualization/index.html at main · Democratizing-Models/ModelVisualization · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>DEMOS Model Viewer</title>
  <meta name="description" content="Browser viewer for serialized statistical models (HS3, XS3, FlatPPL): tree, dependency graph, and node inspector. Runs client-side." />
  <meta name="theme-color" content="#1a1b26" />
  <meta property="og:type" content="website" />
  <meta property="og:title" content="DEMOS Model Viewer" />
  <meta property="og:description" content="Browser viewer for serialized statistical models (HS3, XS3, FlatPPL): tree, dependency graph, and node inspector." />
  <meta property="og:url" content="https://democratizing-models.github.io/ModelVisualization/" />
  <meta name="twitter:card" content="summary" />
  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' rx='3' fill='%231a1b26'/%3E%3Ccircle cx='5' cy='5' r='1.8' fill='%237aa2f7'/%3E%3Ccircle cx='11' cy='8' r='1.8' fill='%239ece6a'/%3E%3Ccircle cx='6' cy='11' r='1.8' fill='%23bb9af7'/%3E%3Cpath d='M5 5L11 8M11 8L6 11' stroke='%23565f89' stroke-width='1'/%3E%3C/svg%3E" />
  <link rel="stylesheet" href="/src/styles.css" />
</head>
<body>
  <a class="skip-link" href="#dag-pane">Skip to graph</a>
  <header class="topbar">
    <h1>DEMOS Model Viewer</h1>
    <div class="controls">
      <label class="file-label">
        Load model
        <!-- `.json` is listed so JSON-encoded models keep their double extension
             (model.hs3.json) and still appear in the picker; detection is by
             content, so the extension only affects what the dialog shows. -->
        <input id="file-input" type="file" accept=".hs3,.xs3,.flatppl,.json,application/json" aria-describedby="file-hint" />
      </label>
      <span id="file-hint" class="visually-hidden">Accepts model files: .hs3, .xs3, .flatppl, or JSON (including .hs3.json). You can also drag and drop a file anywhere on the page.</span>
      <button id="paste-btn" class="btn" type="button">Paste…</button>
      <select id="sample-select" aria-label="Load bundled sample">
        <option value="">Load a sample…</option>
        <!-- options populated from the format registry in main.ts -->
      </select>
      <input id="node-search" type="search" placeholder="Find node…  (/)" aria-label="Find a node by name, id, or type. Press slash to focus, Enter again for the next match." list="node-search-list" disabled />
      <datalist id="node-search-list"></datalist>
      <button id="format-badge" class="badge" type="button" hidden aria-live="polite"></button>
      <button id="diag-btn" class="btn diag-btn" type="button" hidden></button>
      <button id="theme-toggle" class="theme-toggle" type="button" aria-label="Toggle theme">☾</button>
    </div>
  </header>

  <nav class="pane-tabs" role="tablist" aria-label="View panes">
    <button class="pane-tab" role="tab" type="button" data-pane="tree" aria-controls="tree-pane" aria-selected="true">Tree</button>
    <button class="pane-tab" role="tab" type="button" data-pane="dag" aria-controls="dag-pane" aria-selected="false">Graph</button>
    <button class="pane-tab" role="tab" type="button" data-pane="inspector" aria-controls="inspector-pane" aria-selected="false">Inspector</button>
  </nav>

  <main class="layout" data-active-pane="tree">
    <section id="tree-pane" class="tree-pane" role="tabpanel" aria-label="Model tree"></section>
    <div class="splitter" data-edge="tree" role="separator" tabindex="0" aria-orientation="vertical"
         aria-label="Resize tree pane" aria-valuemin="180" aria-valuemax="720" aria-valuenow="320"></div>
    <section id="dag-pane" class="dag-pane" role="tabpanel" aria-label="Dependency graph"></section>
    <div class="splitter" data-edge="inspector" role="separator" tabindex="0" aria-orientation="vertical"
         aria-label="Resize inspector pane" aria-valuemin="180" aria-valuemax="720" aria-valuenow="380"></div>
    <aside id="inspector-pane" class="inspector-pane" role="tabpanel" aria-label="Node inspector"></aside>
  </main>

  <div id="status" class="status" role="status" aria-live="polite"></div>

  <!-- Shown while a drag carrying files is over the window (see main.ts). -->
  <div id="drop-overlay" class="drop-overlay" hidden>
    <div class="drop-overlay-inner">Drop a model file to load<br /><small>.hs3, .xs3, or .flatppl</small></div>
  </div>

  <!-- Model metadata + the full diagnostic list (the status bar only counts them). -->
  <dialog id="model-dialog" class="model-dialog" aria-label="Model information">
    <form method="dialog" class="model-form">
      <h2 class="model-title">Model</h2>
      <div id="model-body" class="model-body"></div>
      <div class="paste-actions">
        <button class="btn btn-primary" value="close" type="submit">Close</button>
      </div>
    </form>
  </dialog>

  <dialog id="paste-dialog" class="paste-dialog" aria-label="Paste model text">
    <form method="dialog" class="paste-form">
      <label for="paste-text">Paste model text (HS3, XS3, or FlatPPL)</label>
      <textarea id="paste-text" rows="14" spellcheck="false" autocomplete="off" placeholder="Paste model source here…"></textarea>
      <div class="paste-actions">
        <button class="btn" value="cancel" type="submit">Cancel</button>
        <button class="btn btn-primary" value="load" type="submit">Load</button>
      </div>
    </form>
  </dialog>

  <script type="module" src="/src/main.ts"></script>
</body>
</html>