Vectornaut/dyna3
1
0
Fork 0
forked from StudioInfinity/dyna3
Code Pull requests Activity

feat: Engine diagnostics (#92)

Browse source 
Adds a `Diagnostics` component that shows the following diagnostics from the last realization:

- Confirmation of success or a short description of what failed.
- The value of the loss function at each step.
- The spectrum of the Hessian at each step.

The loss and spectrum plots are shown on switchable panels.

Also includes some refactoring/renaming of existing code.

Co-authored-by: Aaron Fenyes <aaron.fenyes@fareycircles.ooo>
Reviewed-on: StudioInfinity/dyna3#92
Co-authored-by: Vectornaut <vectornaut@nobody@nowhere.net>
Co-committed-by: Vectornaut <vectornaut@nobody@nowhere.net>
This commit is contained in:
Vectornaut 2025-07-21 04:18:49 +00:00 • committed by Glen Whitney
parent 4cb3262555
commit 5864017e6f
17 changed files with 1120 additions and 150 deletions
Download patch file Download diff file Expand all files Collapse all files

66
app-proto/main.css
View file

@ -18,6 +18,17 @@ body {
font-family: 'Fira Sans', sans-serif;
}
.invalid {
color: var(--text-invalid);
}
.status {
width: 20px;
text-align: center;
font-family: 'Noto Emoji';
font-style: normal;
}
/* sidebar */
#sidebar {
@ -138,6 +149,7 @@ details[open]:has(li) .element-switch::after {
}
.regulator-input {
margin-right: 4px;
color: inherit;
background-color: inherit;
border: 1px solid var(--border);
@ -159,22 +171,56 @@ details[open]:has(li) .element-switch::after {
border-color: var(--border-invalid);
}
.status {
width: 20px;
padding-left: 4px;
text-align: center;
font-family: 'Noto Emoji';
font-style: normal;
}
.regulator-input.invalid + .status::after, details:has(.invalid):not([open]) .status::after {
content: '⚠';
color: var(--text-invalid);
}
/* diagnostics */
#diagnostics {
margin: 10px;
}
#diagnostics-bar {
display: flex;
}
#realization-status {
display: flex;
flex-grow: 1;
}
#realization-status .status {
margin-right: 4px;
}
#realization-status :not(.status) {
flex-grow: 1;
}
#realization-status .status::after {
content: '✓';
}
#realization-status.invalid .status::after {
content: '⚠';
}
.diagnostics-panel {
margin-top: 10px;
min-height: 180px;
}
.diagnostics-chart {
background-color: var(--display-background);
border: 1px solid var(--border);
border-radius: 8px;
}
/* display */
canvas {
#display {
float: left;
margin-left: 20px;
margin-top: 20px;
@ -183,7 +229,7 @@ canvas {
border-radius: 16px;
}
canvas:focus {
#display:focus {
border-color: var(--border-focus-dark);
outline: none;
}