| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>latent-inspector</title> |
| <style> |
| :root { |
| color-scheme: dark; |
| --bg: #0d1117; |
| --panel: #161b22; |
| --panel-2: #11161d; |
| --text: #e6edf3; |
| --muted: #8b949e; |
| --accent: #79c0ff; |
| --accent-2: #58a6ff; |
| --border: #30363d; |
| } |
| * { box-sizing: border-box; } |
| body { |
| margin: 0; |
| min-height: 100vh; |
| font-family: "Segoe UI", system-ui, sans-serif; |
| color: var(--text); |
| background: radial-gradient(circle at top, #182032 0%, var(--bg) 45%); |
| } |
| main { |
| max-width: 1040px; |
| margin: 0 auto; |
| padding: 4rem 1.5rem 5rem; |
| } |
| .eyebrow { |
| margin: 0; |
| color: var(--muted); |
| text-transform: uppercase; |
| letter-spacing: 0.12em; |
| font-size: 0.78rem; |
| } |
| h1 { |
| margin: 0.35rem 0 0; |
| font-size: clamp(2.3rem, 5vw, 4rem); |
| line-height: 1.05; |
| } |
| .lede { |
| max-width: 760px; |
| margin: 1rem 0 0; |
| color: var(--muted); |
| font-size: 1.08rem; |
| line-height: 1.6; |
| } |
| .grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
| gap: 1rem; |
| margin-top: 2rem; |
| } |
| .card { |
| display: flex; |
| flex-direction: column; |
| gap: 0.9rem; |
| padding: 1.35rem; |
| border: 1px solid var(--border); |
| border-radius: 18px; |
| background: linear-gradient(180deg, var(--panel), var(--panel-2)); |
| } |
| .card h2 { |
| margin: 0; |
| font-size: 1.45rem; |
| color: var(--text); |
| } |
| .card p { |
| margin: 0; |
| color: var(--muted); |
| line-height: 1.6; |
| } |
| .meta { |
| color: var(--muted); |
| font-size: 0.9rem; |
| } |
| .cta { |
| display: inline-flex; |
| align-items: center; |
| width: fit-content; |
| padding: 0.7rem 1rem; |
| border-radius: 999px; |
| text-decoration: none; |
| color: white; |
| background: linear-gradient(135deg, var(--accent), var(--accent-2)); |
| font-weight: 600; |
| } |
| .footer { |
| margin-top: 2rem; |
| color: var(--muted); |
| font-size: 0.95rem; |
| } |
| a { |
| color: var(--accent); |
| } |
| </style> |
| </head> |
| <body> |
| <main> |
| <p class="eyebrow">latent-inspector</p> |
| <h1>Representation analysis, presentation, and report</h1> |
| <p class="lede">This GitHub Pages deployment has two public entry points: the narrative presentation of the project and a self-contained sample compare report with the raw metrics, PCA projections, and heatmaps behind the claims.</p> |
|
|
| <div class="grid"> |
| <section class="card"> |
| <div class="meta">Presentation</div> |
| <h2>How AI Models See the World</h2> |
| <p>Reveal.js slide deck for latent-inspector. It walks through the project, the model comparison setup, the corrected EUPE and V-JEPA 2 interpretations, and the broader thesis about how different training objectives reshape representation geometry.</p> |
| <a class="cta" href="slides.html">Open presentation</a> |
| </section> |
|
|
| <section class="card"> |
| <div class="meta">Sample Report</div> |
| <h2>Four-Model Elephant Compare Report</h2> |
| <p>Self-contained HTML report generated by <code>latent-inspector compare</code> for DINOv2, I-JEPA, V-JEPA 2, and EUPE on the canonical elephant image. Includes per-model metrics, pairwise CKA and k-NN overlap, PCA images, and exported artifact metadata.</p> |
| <a class="cta" href="reports/20260408-123006/report.html">Open sample report</a> |
| </section> |
| </div> |
|
|
| <p class="footer">Repository: <a href="https://github.com/AbdelStark/latent-inspector">github.com/AbdelStark/latent-inspector</a></p> |
| </main> |
| </body> |
| </html> |
|
|
