Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /> | |
| <title>Smart Plate — Model Insights</title> | |
| <link rel="stylesheet" href="/static/css/theme.css" /> | |
| <link rel="stylesheet" href="/static/css/model.css" /> | |
| </head> | |
| <body data-page="model"> | |
| <div class="app"> | |
| <div class="topbar"> | |
| <a class="icon-btn" href="/home" data-icon="arrow-left"></a> | |
| <span class="h2">Model Insights</span> | |
| <span style="width:42px"></span> | |
| </div> | |
| <div class="screen no-nav model"> | |
| <p class="intro muted">How Smart Plate goes from a raw photo dataset to dish classification and calorie estimation.</p> | |
| <!-- KPI strip --> | |
| <div class="kpis" id="kpis"></div> | |
| <!-- Pipeline --> | |
| <section class="block"> | |
| <h3 class="block-title">From data to prediction</h3> | |
| <div class="pipeline" id="pipeline"></div> | |
| </section> | |
| <!-- Dataset --> | |
| <section class="block"> | |
| <h3 class="block-title">Dataset</h3> | |
| <div class="dataset"> | |
| <div class="donut-wrap"> | |
| <div class="donut" id="donut"></div> | |
| <div class="donut-legend" id="donutLegend"></div> | |
| </div> | |
| <div class="ds-facts" id="dsFacts"></div> | |
| </div> | |
| <div class="sub-title">Augmentations (training only)</div> | |
| <div class="chips" id="augChips"></div> | |
| </section> | |
| <!-- Model card --> | |
| <section class="block"> | |
| <h3 class="block-title">Model card</h3> | |
| <table class="spec" id="modelSpec"></table> | |
| <div class="sub-title">Training configuration</div> | |
| <table class="spec" id="hpSpec"></table> | |
| </section> | |
| <!-- Performance --> | |
| <section class="block"> | |
| <h3 class="block-title">Performance</h3> | |
| <div class="train-compare" id="trainCompare"></div> | |
| <p class="note" id="curveNote"></p> | |
| <div class="sub-title">Strongest classes (F1)</div> | |
| <div class="bars" id="bestBars"></div> | |
| <div class="sub-title">Weakest classes (F1)</div> | |
| <div class="bars" id="worstBars"></div> | |
| <details class="all-classes"> | |
| <summary>Show all 80 classes</summary> | |
| <div class="bars" id="allBars"></div> | |
| </details> | |
| </section> | |
| <!-- Confusion matrix --> | |
| <section class="block"> | |
| <h3 class="block-title">Confusion matrix</h3> | |
| <p class="muted small">80×80 — true label (rows) vs predicted (columns). Pinch / scroll to explore.</p> | |
| <div class="cm-scroll"> | |
| <img src="/static/img/confusion_matrix.png" alt="Confusion matrix" class="cm-img" loading="lazy" /> | |
| </div> | |
| </section> | |
| <!-- Limitations --> | |
| <section class="block"> | |
| <h3 class="block-title">Known limitations</h3> | |
| <ul class="limits" id="limits"></ul> | |
| </section> | |
| <a class="btn" href="/scan"><span data-icon="camera"></span> Try it live</a> | |
| </div> | |
| </div> | |
| <script src="/static/js/store.js"></script> | |
| <script src="/static/js/theme.js"></script> | |
| <script src="/static/js/icons.js"></script> | |
| <script src="/static/js/model.js"></script> | |
| </body> | |
| </html> | |