mm/dr-sandbox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: mm:8db92089a19cca5f0ca7f6378f49600d23ac16b8
Branches Tags
mm:main
..
compare: mm:86e11a6a1136bf12259e36f3c22cca1e060a7c2b
Branches Tags
mm:main

No commits in common. "8db92089a19cca5f0ca7f6378f49600d23ac16b8" and "86e11a6a1136bf12259e36f3c22cca1e060a7c2b" have entirely different histories.
8db92089a1 ... 86e11a6a11

4 changed files with 19 additions and 123 deletions
Show Stats Expand all files Collapse all files

4
app/web/main.py
View File

@ -719,12 +719,10 @@ def _scan_metrics() -> List[Dict[str, Any]]:
@app.get("/metrics", response_class=HTMLResponse) @app.get("/metrics", response_class=HTMLResponse)
async def metrics_page(request: Request) -> HTMLResponse: async def metrics_page(request: Request) -> HTMLResponse:
async with httpx.AsyncClient(timeout=5.0) as client:
dep_id = await PREFECT.deployment_id(client)
return templates.TemplateResponse( return templates.TemplateResponse(
request, request,
"metrics.html", "metrics.html",
{"prefect_api": PREFECT_API, "deployment_id": dep_id}, {"prefect_api": PREFECT_API},
) )

22
app/web/static/style.css
View File

@ -572,14 +572,6 @@ button.submit:disabled { background: var(--faint); border-color: var(--faint); c
border-top: 1px solid var(--rule); border-top: 1px solid var(--rule);
} }
.colophon span.k { color: var(--mute); } .colophon span.k { color: var(--mute); }
.colophon .prefect-badge { display: inline-flex; align-items: center; gap: 4px; }
.colophon .prefect-badge .dot {
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--good);
}
.colophon .prefect-badge .dot.bad { background: var(--alarm); }
/* subtle htmx indicator */ /* subtle htmx indicator */
.htmx-indicator { .htmx-indicator {
@ -658,14 +650,11 @@ button.submit:disabled { background: var(--faint); border-color: var(--faint); c
font-size: 0.74rem; font-size: 0.74rem;
color: var(--faint); color: var(--faint);
letter-spacing: 0; letter-spacing: 0;
white-space: nowrap;
} }
.dataset-picker .picker-toggle::before { content: "[ edit ]"; } .dataset-picker .picker-toggle::before { content: "[ edit ]"; }
.dataset-picker[open] .picker-toggle::before { content: "[ collapse ]"; color: var(--accent); } .dataset-picker[open] .picker-toggle::before { content: "[ collapse ]"; color: var(--accent); }
.dataset-picker.intro .picker-toggle::before { content: "[ read ]"; } .dataset-picker.intro .picker-toggle::before { content: "[ read ]"; }
.dataset-picker.intro[open] .picker-toggle::before { content: "[ collapse ]"; color: var(--accent); } .dataset-picker.intro[open] .picker-toggle::before { content: "[ collapse ]"; color: var(--accent); }
.dataset-picker.metrics-inline .picker-toggle::before { content: "[ expand ]"; }
.dataset-picker.metrics-inline[open] .picker-toggle::before { content: "[ collapse ]"; color: var(--accent); }
.intro-body { .intro-body {
display: grid; display: grid;
@ -1079,17 +1068,14 @@ button.submit:disabled { background: var(--faint); border-color: var(--faint); c
.masthead-link:hover { border-bottom-color: var(--accent); } .masthead-link:hover { border-bottom-color: var(--accent); }
.theme-toggle { .theme-toggle {
position: absolute;
top: 0.6rem;
right: 0.8rem;
z-index: 50;
background: transparent; background: transparent;
border: 0; border: 0;
color: var(--mute); color: var(--mute);
font-size: 1.05rem; font-size: 1.05rem;
line-height: 1; line-height: 1;
cursor: pointer; cursor: pointer;
padding: 0.25rem 0.35rem; padding: 0 0 0 0.55rem;
vertical-align: middle;
transition: color 120ms ease, transform 240ms ease; transition: color 120ms ease, transform 240ms ease;
user-select: none; user-select: none;
} }
@ -1107,7 +1093,6 @@ button.submit:disabled { background: var(--faint); border-color: var(--faint); c
color: var(--accent); color: var(--accent);
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
margin-left: 0.8rem; margin-left: 0.8rem;
white-space: nowrap;
} }
.masthead .nav-link:hover { border-bottom-color: var(--accent); } .masthead .nav-link:hover { border-bottom-color: var(--accent); }
@ -1360,8 +1345,7 @@ button.submit:disabled { background: var(--faint); border-color: var(--faint); c
max-width: 30ch; max-width: 30ch;
} }
.metrics-page .empty, .metrics-page .empty {
.metrics-inline .empty {
border: 1px dashed var(--rule-2); border: 1px dashed var(--rule-2);
padding: 1.4rem; padding: 1.4rem;
text-align: center; text-align: center;

103
app/web/templates/index.html
View File

@ -3,8 +3,8 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="viewport" content="width=device-width,initial-scale=1" />
<title>embedding notebook</title> <title>embedding notebook — web1</title>
<link rel="stylesheet" href="/static/style.css?v=16" /> <link rel="stylesheet" href="/static/style.css?v=11" />
<script src="https://unpkg.com/htmx.org@2.0.4"></script> <script src="https://unpkg.com/htmx.org@2.0.4"></script>
<script type="importmap"> <script type="importmap">
{ {
@ -30,8 +30,11 @@
<h1 class="title">embedding notebook <em>&mdash; drift &amp; projection</em></h1> <h1 class="title">embedding notebook <em>&mdash; drift &amp; projection</em></h1>
</div> </div>
<div class="meta"> <div class="meta">
<a href="#metrics" class="nav-link">metrics &darr;</a> <span class="dot {% if not deployment_id %}bad{% endif %}"></span>
<button type="button" class="theme-toggle" id="theme-toggle" aria-label="toggle theme">◐</button> {% if deployment_id %}prefect · deployment {{ deployment_id[:8] }}{% else %}prefect · unreachable{% endif %}
<a href="/metrics" class="nav-link">metrics &rarr;</a>
<button type="button" class="theme-toggle" id="theme-toggle" aria-label="toggle theme">◐</button><br/>
<span style="color:var(--faint)">{{ prefect_api }}</span>
</div> </div>
</header> </header>
@ -315,98 +318,12 @@
</main> </main>
<details class="dataset-picker metrics-inline" id="metrics">
<summary>
<span class="picker-meta">
<span class="section-number">§ 5</span>
<span class="picker-title">stability metrics</span>
<span class="picker-selection">
<span class="lbl">view</span>
<code>frame-to-frame travel · vs-initial drift · kNN retention</code>
</span>
</span>
<span class="picker-toggle" aria-hidden="true"></span>
</summary>
<div class="picker-body">
<div class="filter-bar">
<div class="filter-group">
<span class="ctl-label">dataset</span>
<div class="chips" id="flt-dataset" aria-label="filter by dataset"></div>
</div>
<div class="filter-group">
<span class="ctl-label">algorithm</span>
<div class="chips" id="flt-algo" aria-label="filter by algorithm"></div>
</div>
<div class="filter-group stat-group">
<span class="ctl-label">travel stat</span>
<div class="segmented count-4" role="radiogroup" aria-label="travel stat">
<label><input type="radio" name="stat" value="mean" checked><span>mean</span></label>
<label><input type="radio" name="stat" value="median"><span>median</span></label>
<label><input type="radio" name="stat" value="p95"><span>p95</span></label>
<label><input type="radio" name="stat" value="max"><span>max</span></label>
</div>
</div>
<div class="filter-count">
<span id="match-count">0</span>&thinsp;/&thinsp;<span id="total-count">0</span> <span class="muted">runs</span>
</div>
</div>
<div class="plots">
<figure class="plot">
<figcaption>
<span class="plot-title">frame-to-frame travel</span>
<span class="plot-sub">‖&thinsp;y(t) − y(t−1)&thinsp;‖ &nbsp;·&nbsp; output 2-D space</span>
</figcaption>
<div id="plot-ff" class="plot-area"></div>
</figure>
<figure class="plot">
<figcaption>
<span class="plot-title">vs-initial travel</span>
<span class="plot-sub">‖&thinsp;y(t) − y(0)&thinsp;‖ &nbsp;·&nbsp; drift from first timestep</span>
</figcaption>
<div id="plot-vi" class="plot-area"></div>
</figure>
<figure class="plot">
<figcaption>
<span class="plot-title">kNN retention</span>
<span class="plot-sub">fraction of input-space k-NN preserved in 2-D (higher = more faithful)</span>
</figcaption>
<div id="plot-knn" class="plot-area"></div>
</figure>
</div>
<div class="legend" id="legend"></div>
<div id="empty" class="empty" hidden>
No metrics to show. Dispatch a run above — sidecar JSONs appear in <code>figs/</code> after the flow completes.
</div>
</div>
</details>
<footer class="colophon"> <footer class="colophon">
<span>&copy; 2026 Mind the Math LLC</span> <span><span class="k">web</span> · scientific instrument · port 8001</span>
<span class="prefect-badge">
<span class="dot {% if not deployment_id %}bad{% endif %}"></span>
{% if deployment_id %}prefect · {{ deployment_id[:8] }}{% else %}prefect · unreachable{% endif %}
</span>
</footer> </footer>
<script src="/static/theme.js?v=11"></script> <script src="/static/theme.js?v=7"></script>
<script type="module" src="/static/dataset-picker.js?v=11"></script> <script type="module" src="/static/dataset-picker.js?v=7"></script>
<script type="module" src="/static/metrics.js?v=11"></script>
<script>
// Anchor-links alone don't expand <details>; force it.
document.querySelector('a[href="#metrics"]')?.addEventListener('click', () => {
const d = document.getElementById('metrics');
if (d) d.open = true;
});
</script>
</body> </body>
</html> </html>

13
app/web/templates/metrics.html
View File

@ -3,8 +3,8 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="viewport" content="width=device-width,initial-scale=1" />
<title>embedding notebook · metrics</title> <title>metrics — embedding notebook</title>
<link rel="stylesheet" href="/static/style.css?v=16" /> <link rel="stylesheet" href="/static/style.css?v=5" />
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3' fill='%231f4e5f'/%3E%3C/svg%3E" /> <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3' fill='%231f4e5f'/%3E%3C/svg%3E" />
<script> <script>
(function(){try{ (function(){try{
@ -22,7 +22,8 @@
</div> </div>
<div class="meta"> <div class="meta">
<a href="/" class="masthead-link">&larr; runs</a> <a href="/" class="masthead-link">&larr; runs</a>
<button type="button" class="theme-toggle" id="theme-toggle" aria-label="toggle theme">◐</button> <button type="button" class="theme-toggle" id="theme-toggle" aria-label="toggle theme">◐</button><br/>
<span style="color:var(--faint)">{{ prefect_api }}</span>
</div> </div>
</header> </header>
@ -89,11 +90,7 @@
</section> </section>
<footer class="colophon"> <footer class="colophon">
<span>&copy; 2026 Mind the Math LLC</span> <span><span class="k">web</span> · metrics · port 8001</span>
<span class="prefect-badge">
<span class="dot {% if not deployment_id %}bad{% endif %}"></span>
{% if deployment_id %}prefect · {{ deployment_id[:8] }}{% else %}prefect · unreachable{% endif %}
</span>
</footer> </footer>
<script src="/static/theme.js?v=5"></script> <script src="/static/theme.js?v=5"></script>