Hugging Face's logo

Spaces:
jimmy60504
/
QML-Classifier-Explorer
Running

App Files Community
QML-Classifier-Explorer / index.html
jimmy60504's picture
jimmy60504
Fix images + add KaTeX math rendering
ee19dc9 verified
raw
history blame contribute delete
12.4 kB
<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>QML Classifier Explorer</title>
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 <link
 href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap"
 rel="stylesheet" />
 <script src="https://cdn.plot.ly/plotly-2.35.2.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css" />
 <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.js"></script>
 <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/auto-render.min.js"
 onload="window.__katexReady=true"></script>
 <link rel="stylesheet" href="css/base.css" />
 <link rel="stylesheet" href="css/components.css" />
 <link rel="stylesheet" href="css/overlays.css" />
 <link rel="stylesheet" href="css/charts.css" />
</head>
<body>
 <div class="page-shell">
<!-- ── left rail ──────────────────────────────────────────────────── -->
 <aside class="control-rail">
<div class="hero-card">
 <p class="eyebrow">D11224001 Huang, Chun-Ming</p>
 <div class="hero-title-row">
 <h1 id="page-title">QML Classifier Explorer</h1>
 <div class="hero-info-wrap">
 <button id="analysis-open" class="hero-info-button" type="button"
 aria-label="Open analysis notes" title="Open analysis notes">i</button>
 <button id="answers-open" class="hero-info-button hero-info-button-secondary"
 type="button" aria-label="Open assignment answers" title="Open assignment answers">?</button>
 <div id="analysis-hint" class="analysis-hint" hidden>
 <span class="analysis-hint-text">Tap here for notes</span>
 <button id="analysis-hint-close" class="analysis-hint-close" type="button"
 aria-label="Dismiss analysis hint">×</button>
 </div>
 </div>
 </div>
 <p id="page-subtitle" class="muted">HW1 Problem 2 results are loading…</p>
 <a href="https://github.com/jimmy60504/quantum_computing/tree/main/HW1/problem2"
 class="github-link" target="_blank" rel="noopener noreferrer">
 <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
 <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38
 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13
 -.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66
 .07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15
 -.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0
 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82
 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01
 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
 </svg>
 Source on GitHub
 </a>
 </div>
<!-- results / comparison table -->
 <div class="panel-card">
 <div class="panel-header">
 <h2>Results</h2>
 <span id="export-status" class="status-pill">loading</span>
 </div>
 <div id="loading-panel" class="loading-panel" hidden>
 <div class="loading-meta">
 <strong id="loading-label">Preparing viewer…</strong>
 <span id="loading-percent">0%</span>
 </div>
 <div class="loading-track" aria-hidden="true">
 <div id="loading-bar" class="loading-bar"></div>
 </div>
 </div>
 <label class="slider-label hidden-control" for="run-select">Run</label>
 <select id="run-select" class="run-select hidden-control"></select>
 <div class="results-table-wrap">
 <table class="results-table">
 <thead>
 <tr>
 <th title="Best test accuracy">Acc</th>
 <th title="Number of qubits">Q</th>
 <th title="Explicit encoding layers">LE</th>
 <th title="Re-uploading layers">LR</th>
 <th title="Training methods">Method</th>
 <th title="Datasets used">Dataset</th>
 <th title="Run name">Run</th>
 </tr>
 </thead>
 <tbody id="results-table-body"></tbody>
 </table>
 </div>
 <p id="run-note" class="muted">
 Choose a runtime export to compare different configurations.
 </p>
 </div>
<!-- experiment meta + dataset overview image -->
 <div class="panel-card experiment-card">
 <div class="panel-header">
 <h2>Experiment</h2>
 </div>
 <div class="experiment-scroll">
 <div class="reference-stack experiment-reference-stack">
 <figure class="reference-figure">
 <img id="datasets-image" class="previewable-image" alt="Dataset overview"
 data-preview-caption="Circle and moons datasets" />
 <figcaption>Dataset overview</figcaption>
 </figure>
 </div>
 <dl id="experiment-meta" class="meta-list"></dl>
 </div>
 </div>
</aside>
<!-- ── main pane ──────────────────────────────────────────────────── -->
 <main class="content-pane">
<!-- decision boundary grid -->
 <section class="canvas-card">
 <div class="section-heading">
 <div>
 <h2>Decision Boundaries</h2>
 </div>
 <div class="boundary-home-row">
 <button id="home-btn-circle" class="home-btn" type="button" title="Circle: isometric view">⌂ Circle</button>
 <button id="top-btn-circle" class="home-btn" type="button" title="Circle: top-down view">⊤ Circle</button>
 <button id="home-btn-moons" class="home-btn" type="button" title="Moons: isometric view">⌂ Moons</button>
 <button id="top-btn-moons" class="home-btn" type="button" title="Moons: top-down view">⊤ Moons</button>
 </div>
 </div>
<!--
 3 rows (methods) × 2 columns (datasets)
 Row labels are rendered as boundary-header method tags.
 -->
 <div class="boundary-grid">
<!-- Row 1: Circle dataset ─────────────────────────── -->
<!-- Explicit — Circle -->
 <article class="boundary-card">
 <div class="boundary-header">
 <span class="boundary-method-tag tag-explicit">Explicit</span>
 Circle
 <span id="acc-explicit-circle" class="acc-pill">—</span>
 </div>
 <div id="bp-explicit-circle" class="boundary-plot"></div>
 </article>
<!-- Kernel — Circle -->
 <article class="boundary-card">
 <div class="boundary-header">
 <span class="boundary-method-tag tag-kernel">Kernel</span>
 Circle
 <span id="acc-kernel-circle" class="acc-pill">—</span>
 </div>
 <div id="bp-kernel-circle" class="boundary-plot"></div>
 </article>
<!-- Reuploading — Circle -->
 <article class="boundary-card">
 <div class="boundary-header">
 <span class="boundary-method-tag">Reuploading</span>
 Circle
 <span id="acc-reupload-circle" class="acc-pill">—</span>
 </div>
 <div id="bp-reupload-circle" class="boundary-plot"></div>
 </article>
<!-- Row 2: Moons dataset ──────────────────────────── -->
<!-- Explicit — Moons -->
 <article class="boundary-card">
 <div class="boundary-header">
 <span class="boundary-method-tag tag-explicit">Explicit</span>
 Moons
 <span id="acc-explicit-moons" class="acc-pill">—</span>
 </div>
 <div id="bp-explicit-moons" class="boundary-plot"></div>
 </article>
<!-- Kernel — Moons -->
 <article class="boundary-card">
 <div class="boundary-header">
 <span class="boundary-method-tag tag-kernel">Kernel</span>
 Moons
 <span id="acc-kernel-moons" class="acc-pill">—</span>
 </div>
 <div id="bp-kernel-moons" class="boundary-plot"></div>
 </article>
<!-- Reuploading — Moons -->
 <article class="boundary-card">
 <div class="boundary-header">
 <span class="boundary-method-tag">Reuploading</span>
 Moons
 <span id="acc-reupload-moons" class="acc-pill">—</span>
 </div>
 <div id="bp-reupload-moons" class="boundary-plot"></div>
 </article>
</div>
 </section>
<!-- accuracy / loss chart -->
 <section class="canvas-card">
 <div class="section-heading">
 <div>
 <div class="timeline-title-row">
 <h2>Accuracy &amp; Loss</h2>
 <span id="current-step-label" class="timeline-title-pill">Final snapshot</span>
 <div class="timeline-slider-inline">
 <input id="step-slider" type="range" min="0" max="0" value="0" disabled />
 </div>
 <div id="timeline-metrics" class="timeline-metrics-row">
 <span id="timeline-caption" class="timeline-title-metrics timeline-title-metrics-status">
 Waiting for per-step trajectory export.
 </span>
 <span id="train-acc-pill" class="timeline-title-pill timeline-metric-pill" hidden>
 Train acc —
 </span>
 <span id="test-acc-pill"
 class="timeline-title-pill timeline-metric-pill timeline-metric-pill-test" hidden>
 Test acc —
 </span>
 </div>
 </div>
 </div>
 </div>
 <div class="chart-wrap">
 <div id="loss-chart" class="plot-surface plot-surface-wide"></div>
 <div id="chart-empty" class="chart-empty">
 No step timeline exported yet. The viewer is ready to replay training
 snapshots once <code>timeline_steps</code> are populated.
 </div>
 </div>
 </section>
</main>
 </div>
<!-- image lightbox -->
 <div id="image-lightbox" class="image-lightbox" hidden aria-hidden="true">
 <div class="image-lightbox-backdrop" data-lightbox-close="true"></div>
 <div class="image-lightbox-dialog" role="dialog" aria-modal="true" aria-label="Image preview">
 <button id="image-lightbox-close" class="image-lightbox-close" type="button"
 aria-label="Close image preview">×</button>
 <img id="image-lightbox-image" class="image-lightbox-image" alt="Preview" />
 <p id="image-lightbox-caption" class="image-lightbox-caption"></p>
 </div>
 </div>
<!-- analysis modal -->
 <div id="analysis-modal" class="analysis-modal" hidden aria-hidden="true">
 <div class="analysis-modal-backdrop" data-analysis-close="true"></div>
 <div class="analysis-modal-dialog" role="dialog" aria-modal="true"
 aria-label="Problem 2 analysis">
 <button id="analysis-close" class="analysis-modal-close" type="button"
 aria-label="Close analysis">×</button>
 <div class="analysis-modal-content">
 <div id="analysis-modal-label" class="analysis-modal-label">Analysis notes</div>
 <div id="analysis-markdown" class="analysis-markdown">
 Loading analysis notes…
 </div>
 </div>
 </div>
 </div>
<script src="js/app.js" type="module"></script>
</body>
</html>