Spaces:

lorien-danger
/

I-JEPA_Keypoint_Matching

Running

App Files Files Community

lorien-danger commited on Sep 16, 2025

Commit

768e90f

verified ·

1 Parent(s): bc892ce

Update index.html

Browse files

Files changed (1) hide show

index.html +902 -424

index.html CHANGED Viewed

@@ -1,437 +1,915 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width,initial-scale=1" />
-<title>I-JEPA Patch Matching (Browser, ONNX)</title>
-<style>
-  :root { --w: 256; --gap: 40; --bg: #0b0d10; --fg: #e8f0f2; --muted:#92a2aa; --accent:#7bdcff; }
-  html,body { height:100%; margin:0; background:var(--bg); color:var(--fg); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }
-  header { padding:16px 18px; border-bottom:1px solid #1b2228; display:flex; gap:16px; align-items:center; flex-wrap:wrap;}
-  header h1 { font-size:16px; margin:0; font-weight:600; letter-spacing:.2px;}
-  header .pill { padding:6px 10px; border:1px solid #24313a; border-radius:999px; color:#cfe7ff; }
-  main { display:grid; grid-template-columns: 320px 1fr; gap:16px; height:calc(100% - 66px); }
-  aside { border-right:1px solid #1b2228; padding:16px; overflow:auto; }
-  section { padding:16px; overflow:auto;}
-  fieldset { border:1px solid #24313a; border-radius:10px; padding:12px; margin:0 0 12px 0;}
-  legend { padding:0 6px; color:#c0d1da; font-size:12px; }
-  label { display:block; font-size:12px; color:#a9bac4; margin:8px 0 4px;}
-  input[type="file"] { width:100%; }
-  .row { display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
-  .row > * { flex:1; min-width:0; }
-  input[type="range"] { width:100%; }
-  button { background:#0f1418; color:var(--fg); border:1px solid #2a3945; padding:10px 12px; border-radius:8px; cursor:pointer;}
-  button:disabled { opacity:.6; cursor:not-allowed;}
-  small.muted { color:var(--muted); }
-  .canv-wrap { display:flex; align-items:center; justify-content:center; }
-  canvas { background:#0a0c0f; border:1px solid #1f2830; border-radius:10px; }
-  .status { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; color:#c5e3ff; white-space:pre-wrap; background:#0a0f13; border:1px solid #23313b; padding:8px; border-radius:8px; min-height:2.5em;}
-  .gridlabel { font-size:11px; color:#7e909b; }
-  .foot { color:#7a8b95; font-size:12px; }
 </style>
 </head>
 <body>
-<header>
-  <h1>I-JEPA Patch Matching (Transformers.js + ONNX)</h1>
-  <span class="pill">Model: onnx-community/ijepa_vith14_22k · dtype=q8</span>
-</header>
-<main>
-  <aside>
-    <fieldset>
-      <legend>Inputs</legend>
-      <label>Image A</label>
-      <input id="fileA" type="file" accept="image/*" />
-      <label>Image B</label>
-      <input id="fileB" type="file" accept="image/*" />
-      <div class="row" style="margin-top:10px;">
-        <button id="runBtn" disabled>Run patch matching</button>
-        <button id="clearBtn">Clear</button>
-      </div>
-      <small class="muted">Images are resized to 224×224 internally to match the model.</small>
-    </fieldset>
-    <fieldset>
-      <legend>Matching</legend>
-      <label>Top-K lines <span id="kVal" class="gridlabel"></span></label>
-      <input id="k" type="range" min="8" max="256" step="8" value="64" />
-      <label>Min similarity (cosine) <span id="thrVal" class="gridlabel"></span></label>
-      <input id="thr" type="range" min="0" max="100" step="1" value="40" />
-      <div class="row">
-        <label class="row" style="gap:6px;align-items:center;">
-          <input id="mutual" type="checkbox" checked />
-          Mutual nearest neighbors only
-        </label>
-      </div>
-      <div class="row">
-        <label class="row" style="gap:6px;align-items:center;">
-          <input id="showGrid" type="checkbox" />
-          Show 16×16 patch grid overlay
-        </label>
-      </div>
-    </fieldset>
-    <fieldset>
-      <legend>Runtime</legend>
-      <div class="row">
-        <label class="row" style="gap:6px;align-items:center;">
-          <input id="preferGPU" type="checkbox" />
-          Try WebGPU (if available)
-        </label>
-      </div>
-      <label>Quantization</label>
-      <select id="dtype">
-        <option value="q8" selected>q8 (smallest, default)</option>
-        <option value="fp32">fp32</option>
-      </select>
-      <label>Model repo</label>
-      <input id="modelId" type="text" value="onnx-community/ijepa_vith14_22k" />
-      <small class="muted">Patch size is 14; tokens map to a 16×16 grid. CLS token is dropped if present.</small>
-    </fieldset>
-    <fieldset>
-      <legend>Status</legend>
-      <div id="status" class="status">Idle.</div>
-    </fieldset>
-    <div class="foot">
-      Preprocess (from model card): resize 224, rescale 1/255, normalize mean=std=0.5. Patch size=14.
-      Outputs are per-patch hidden states; we build a full cosine similarity matrix.
     </div>
-  </aside>
-  <section>
-    <div class="canv-wrap">
-      <canvas id="viz" width="544" height="240" aria-label="Patch correspondence visualizer"></canvas>
     </div>
-    <div class="row" style="margin-top:8px;">
-      <small class="muted">Left = Image A (224×224). Right = Image B (224×224). Lines connect matched patch centers.</small>
     </div>
-  </section>
-</main>
-<!-- Transformers.js UMD (exposes window.transformers) -->
-<script src="https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.7.3/dist/transformers.min.js"></script>
-<script>
-(async () => {
-  const status = (msg) => document.getElementById('status').textContent = msg;
-  // UI elements
-  const fileA = document.getElementById('fileA');
-  const fileB = document.getElementById('fileB');
-  const runBtn = document.getElementById('runBtn');
-  const clearBtn = document.getElementById('clearBtn');
-  const preferGPU = document.getElementById('preferGPU');
-  const dtypeSel = document.getElementById('dtype');
-  const modelIdInput = document.getElementById('modelId');
-  const kSlider = document.getElementById('k');
-  const thrSlider = document.getElementById('thr');
-  const kVal = document.getElementById('kVal');
-  const thrVal = document.getElementById('thrVal');
-  const mutualChk = document.getElementById('mutual');
-  const gridChk = document.getElementById('showGrid');
-  const W = 224, H = 224, PATCH = 14; // per config
-  const GRID = W / PATCH;             // 16
-  const GAP = 96;                      // gap between images on the canvas
-  const cvs = document.getElementById('viz');
-  const ctx = cvs.getContext('2d');
-  const setSliders = () => {
-    kVal.textContent = `(${kSlider.value})`;
-    thrVal.textContent = `(${(thrSlider.value/100).toFixed(2)})`;
-  };
-  setSliders();
-  kSlider.addEventListener('input', setSliders);
-  thrSlider.addEventListener('input', setSliders);
-  // Enable buttons when both files chosen
-  const updateReady = () => runBtn.disabled = !(fileA.files?.[0] && fileB.files?.[0]);
-  fileA.addEventListener('change', updateReady);
-  fileB.addEventListener('change', updateReady);
-  clearBtn.onclick = () => {
-    fileA.value = ''; fileB.value = '';
-    runBtn.disabled = true;
-    ctx.clearRect(0,0,cvs.width,cvs.height);
-    status('Cleared.');
-  };
-  // Load Transformers.js and configure runtime
-  const { pipeline, env } = window.transformers;
-  // Configure ONNX Runtime Web assets and caching
-  env.backends.onnx.wasm.wasmPaths = "https://cdn.jsdelivr.net/npm/onnxruntime-web@1.19.2/dist/";
-  env.useBrowserCache = true;
-  env.allowRemoteModels = true;
-  // WebGPU hint (Transformers.js chooses the best available)
-  preferGPU.addEventListener('change', () => {
-    // Hint: runtime picks WebGPU automatically if available; keeping as a user toggle placeholder
-    status(preferGPU.checked ? 'Will try WebGPU where possible.' : 'Defaulting to WASM backend.');
-  });
-  // Helpers
-  const loadImageURL = (file) => new Promise((resolve, reject) => {
-    const url = URL.createObjectURL(file);
-    const img = new Image();
-    img.onload = () => resolve({ url, img });
-    img.onerror = reject;
-    img.crossOrigin = "anonymous";
-    img.src = url;
-  });
-  function drawSideBySide(imgA, imgB) {
-    // Clear
-    ctx.fillStyle = '#0a0c0f';
-    ctx.fillRect(0, 0, cvs.width, cvs.height);
-    // Draw A and B (padded)
-    const leftX = 8, topY = 8;
-    ctx.drawImage(imgA, leftX, topY, W, H);
-    const rightX = leftX + W + GAP;
-    ctx.drawImage(imgB, rightX, topY, W, H);
-    // Optional grid
-    if (gridChk.checked) {
-      ctx.strokeStyle = 'rgba(255,255,255,0.15)';
-      ctx.lineWidth = 1;
-      for (let i=1;i<GRID;i++) {
-        const xA = leftX + i*PATCH, xB = rightX + i*PATCH, y = topY + i*PATCH;
-        ctx.beginPath(); ctx.moveTo(xA, topY); ctx.lineTo(xA, topY+H); ctx.stroke();
-        ctx.beginPath(); ctx.moveTo(leftX, y); ctx.lineTo(leftX+W, y); ctx.stroke();
-        ctx.beginPath(); ctx.moveTo(xB, topY); ctx.lineTo(xB, topY+H); ctx.stroke();
-        ctx.beginPath(); ctx.moveTo(rightX, y); ctx.lineTo(rightX+W, y); ctx.stroke();
-      }
-    }
-    return { leftX, rightX, topY };
-  }
-  // Normalize a [L,D] flat Float32Array in-place to unit vectors per row
-  function rowNormalize(data, L, D) {
-    for (let i=0; i<L; i++) {
-      let sum=0.0, off = i*D;
-      for (let j=0; j<D; j++) { const v = data[off+j]; sum += v*v; }
-      const inv = 1.0 / Math.max(Math.sqrt(sum), 1e-12);
-      for (let j=0; j<D; j++) data[off+j] *= inv;
-    }
-  }
-  // Cosine sim matrix S (L1 x L2) = A_norm (L1 x D) * B_norm^T (D x L2)
-  function simMatrix(A, L1, B, L2, D) {
-    const S = new Float32Array(L1 * L2);
-    for (let i=0; i<L1; i++) {
-      const ai = i*D;
-      for (let j=0; j<L2; j++) {
-        const bj = j*D;
-        let acc = 0.0;
-        // unrolled loop could help but keep simple & correct
-        for (let d=0; d<D; d++) acc += A[ai+d] * B[bj+d];
-        S[i*L2 + j] = acc;
-      }
-    }
-    return S;
-  }
-  function argmaxPerRow(S, rows, cols) {
-    const idx = new Int32Array(rows);
-    const val = new Float32Array(rows);
-    for (let i=0; i<rows; i++) {
-      let bestV = -Infinity, bestJ = -1, off = i*cols;
-      for (let j=0; j<cols; j++) {
-        const v = S[off + j];
-        if (v > bestV) { bestV = v; bestJ = j; }
-      }
-      idx[i] = bestJ; val[i] = bestV;
-    }
-    return { idx, val };
-  }
-  function argmaxPerCol(S, rows, cols) {
-    const idx = new Int32Array(cols);
-    const val = new Float32Array(cols);
-    for (let j=0; j<cols; j++) {
-      let bestV = -Infinity, bestI = -1;
-      for (let i=0; i<rows; i++) {
-        const v = S[i*cols + j];
-        if (v > bestV) { bestV = v; bestI = i; }
-      }
-      idx[j] = bestI; val[j] = bestV;
-    }
-    return { idx, val };
-  }
-  function gridCenter(k) {
-    // k in [0, L). grid is row-major over 16x16.
-    const r = Math.floor(k / GRID);
-    const c = k % GRID;
-    return { r, c, cx: c*PATCH + PATCH/2, cy: r*PATCH + PATCH/2 };
-  }
-  function drawMatches(base, matches, L2, topK, thr, mutualOnly) {
-    const { leftX, rightX, topY } = base;
-    // Sort by similarity desc
-    matches.sort((a,b) => b.sim - a.sim);
-    const K = Math.min(topK, matches.length);
-    // Draw lines
-    for (let n=0, drawn=0; n<matches.length && drawn<K; n++) {
-      const m = matches[n];
-      if (m.sim < thr) continue;
-      if (mutualOnly && !m.mutual) continue;
-      const A = gridCenter(m.i);
-      const B = gridCenter(m.j);
-      const x1 = leftX + A.cx, y1 = topY + A.cy;
-      const x2 = rightX + B.cx, y2 = topY + B.cy;
-      // color by similarity (blue→cyan)
-      const t = Math.min(1, Math.max(0, (m.sim - thr) / (1 - thr)));
-      const r = Math.floor(60 + 40*t);
-      const g = Math.floor(200 + 30*t);
-      const b = Math.floor(255);
-      ctx.strokeStyle = `rgba(${r},${g},${b},${0.85})`;
-      ctx.lineWidth = 1.25;
-      ctx.beginPath();
-      ctx.moveTo(x1, y1);
-      ctx.lineTo(x2, y2);
-      ctx.stroke();
-      drawn++;
-    }
-  }
-  // Extract per-patch tokens as a flat Float32Array [L,D]
-  function tokens2D(tensor) {
-    // Expect dims [B, L, D] OR [L, D]
-    const dims = tensor.dims;
-    let L, D, data = tensor.data;
-    if (dims.length === 3) {
-      L = dims[1]; D = dims[2];
-    } else if (dims.length === 2) {
-      L = dims[0]; D = dims[1];
-    } else {
-      throw new Error(`Unexpected tensor shape: [${dims.join(',')}]`);
-    }
-    // If CLS present, drop first token to get a perfect square (16x16)
-    const isSquare = (n) => Number.isInteger(Math.sqrt(n));
-    if (!isSquare(L) && isSquare(L - 1)) {
-      // Slice off the first token (CLS) → returns [L-1, D]
-      const out = new Float32Array((L - 1) * D);
-      let dst = 0, src = D; // skip first row
-      for (let i=1;i<L;i++, src += D) {
-        out.set(data.subarray(src, src + D), dst);
-        dst += D;
-      }
-      return { data: out, L: L - 1, D };
-    }
-    // Already square grid
-    return { data: Float32Array.from(data), L, D };
-  }
-  let extractor = null;
-  async function ensureExtractor() {
-    if (extractor) return extractor;
-    const modelId = modelIdInput.value.trim();
-    const dtype = dtypeSel.value; // "q8" or "fp32"
-    status(`Loading model: ${modelId} (${dtype}) ...`);
-    const t0 = performance.now();
-    extractor = await pipeline(
-      "image-feature-extraction",
-      modelId,
-      { dtype } // uses ONNX + wasm/webgpu under the hood
-    );
-    const t1 = performance.now();
-    status(`Model ready in ${(t1 - t0).toFixed(0)} ms. Awaiting images...`);
-    return extractor;
-  }
-  async function run() {
-    try {
-      runBtn.disabled = true;
-      const [{img: imgA}, {img: imgB}] = await Promise.all([
-        loadImageURL(fileA.files[0]),
-        loadImageURL(fileB.files[0]),
-      ]);
-      // Draw base images
-      const base = drawSideBySide(imgA, imgB);
-      // Load extractor (once)
-      await ensureExtractor();
-      status('Extracting per-patch features ...');
-      const t0 = performance.now();
-      // We can pass Blob URLs/HTMLImageElements; Transformers.js handles preprocessing
-      const out = await extractor([imgA, imgB]); // returns a Tensor of shape [2, L, D]
-      const dims = out.dims; // expect [B, L, D]
-      // Split the batch into two separate tensors (copying data slices)
-      if (!(dims.length === 3 && dims[0] === 2)) {
-        throw new Error(`Unexpected output dims: [${dims.join(',')}]`);
-      }
-      const B = dims[0], L = dims[1], D = dims[2];
-      // Slice batch 0 and 1
-      const stride = L * D;
-      const dataA = out.data.subarray(0, stride);
-      const dataB = out.data.subarray(stride, 2*stride);
-      // Convert to [L',D] and drop CLS if present (to get 16x16)
-      const Atd = tokens2D({ data: dataA, dims: [L, D] });
-      const Btd = tokens2D({ data: dataB, dims: [L, D] });
-      if (Atd.L !== GRID*GRID || Btd.L !== GRID*GRID) {
-        console.warn('Token count not 16x16; continuing anyway.', Atd.L, Btd.L);
-      }
-      // Normalize rows for cosine similarity
-      rowNormalize(Atd.data, Atd.L, Atd.D);
-      rowNormalize(Btd.data, Btd.L, Btd.D);
-      status('Computing similarity matrix ... (this is O(L^2·D))');
-      const S = simMatrix(Atd.data, Atd.L, Btd.data, Btd.L, Atd.D);
-      // Argmaxes for A→B and B→A
-      const A2B = argmaxPerRow(S, Atd.L, Btd.L);
-      const B2A = argmaxPerCol(S, Atd.L, Btd.L);
-      // Build match list
-      const thr = Number(thrSlider.value)/100.0;
-      const pairs = [];
-      for (let i=0; i<Atd.L; i++) {
-        const j = A2B.idx[i];
-        const sim = A2B.val[i];
-        const mutual = (B2A.idx[j] === i);
-        pairs.push({ i, j, sim, mutual });
-      }
-      // Redraw base (so grid toggle applies immediately)
-      drawSideBySide(imgA, imgB);
-      drawMatches(base, pairs, Btd.L, Number(kSlider.value), thr, mutualChk.checked);
-      const t1 = performance.now();
-      status(`Done. Tokens: ${Atd.L}×${Atd.D}. Max sim: ${Math.max(...pairs.map(p=>p.sim)).toFixed(3)}. Total ${(t1-t0).toFixed(0)} ms.`);
-    } catch (err) {
-      console.error(err);
-      status('Error: ' + (err && err.message ? err.message : String(err)));
-    } finally {
-      runBtn.disabled = false;
-    }
-  }
-  runBtn.onclick = run;
-  status('Ready. Load two images, then click “Run patch matching”.');
-})();
 </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>I-JEPA Patch Correspondence Analyzer</title>
+    <style>
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            margin: 0;
+            padding: 20px;
+            background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
+            min-height: 100vh;
+            color: #e2e8f0;
+        }
+```
+    .container {
+        max-width: 1400px;
+        margin: 0 auto;
+        background: rgba(45, 55, 72, 0.8);
+        backdrop-filter: blur(10px);
+        border-radius: 20px;
+        padding: 30px;
+        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+        border: 1px solid #4a5568;
+    }
+    h1 {
+        text-align: center;
+        background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        margin-bottom: 10px;
+        font-size: 2.5em;
+        font-weight: 700;
+    }
+    .subtitle {
+        text-align: center;
+        color: #a0aec0;
+        margin-bottom: 30px;
+        font-size: 1.1em;
+    }
+    .upload-section {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 30px;
+        margin-bottom: 30px;
+    }
+    .upload-box {
+        border: 2px dashed #4a5568;
+        border-radius: 15px;
+        padding: 40px;
+        text-align: center;
+        transition: all 0.3s ease;
+        background: rgba(26, 32, 44, 0.6);
+        position: relative;
+        overflow: hidden;
+    }
+    .upload-box:hover {
+        border-color: #60a5fa;
+        background: rgba(26, 32, 44, 0.8);
+    }
+    .upload-box.has-image {
+        border-color: #48bb78;
+        background: rgba(26, 32, 44, 0.9);
+    }
+    .upload-input {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        cursor: pointer;
+    }
+    .upload-content {
+        pointer-events: none;
+    }
+    .upload-icon {
+        font-size: 3em;
+        margin-bottom: 15px;
+        color: #718096;
+    }
+    .upload-text {
+        font-size: 1.1em;
+        color: #e2e8f0;
+        margin-bottom: 10px;
+        font-weight: 600;
+    }
+    .upload-hint {
+        font-size: 0.9em;
+        color: #a0aec0;
+    }
+    .preview-image {
+        max-width: 100%;
+        max-height: 200px;
+        border-radius: 10px;
+        margin-top: 15px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    }
+    .controls {
+        display: flex;
+        justify-content: center;
+        gap: 20px;
+        margin-bottom: 30px;
+        flex-wrap: wrap;
+    }
+    .btn {
+        padding: 12px 30px;
+        border: none;
+        border-radius: 12px;
+        cursor: pointer;
+        font-size: 1em;
+        font-weight: 600;
+        transition: all 0.3s ease;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+    }
+    .btn-primary {
+        background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
+        color: white;
+    }
+    .btn-primary:hover:not(:disabled) {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 20px rgba(96, 165, 250, 0.4);
+    }
+    .btn-secondary {
+        background: #4a5568;
+        color: #e2e8f0;
+    }
+    .btn-secondary:hover {
+        background: #2d3748;
+        transform: translateY(-2px);
+    }
+    .btn:disabled {
+        background: #2d3748;
+        color: #718096;
+        cursor: not-allowed;
+        transform: none;
+    }
+    .loading {
+        text-align: center;
+        padding: 40px;
+        display: none;
+    }
+    .spinner {
+        width: 50px;
+        height: 50px;
+        border: 4px solid #2d3748;
+        border-top: 4px solid #60a5fa;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+        margin: 0 auto 20px;
+    }
+    @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+    .results {
+        display: none;
+    }
+    .visualization {
+        background: rgba(26, 32, 44, 0.6);
+        border-radius: 15px;
+        padding: 20px;
+        margin-bottom: 20px;
+        border: 1px solid #4a5568;
+    }
+    .images-container {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 30px;
+        margin-bottom: 30px;
+    }
+    .image-analysis {
+        text-align: center;
+    }
+    .image-analysis h3 {
+        color: #e2e8f0;
+        margin-bottom: 15px;
+    }
+    .canvas-container {
+        position: relative;
+        display: inline-block;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    }
+    .analysis-canvas {
+        display: block;
+        max-width: 100%;
+        height: auto;
+        cursor: crosshair;
+    }
+    .stats {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 15px;
+        margin-top: 20px;
+    }
+    .stat-card {
+        background: rgba(26, 32, 44, 0.8);
+        padding: 20px;
+        border-radius: 10px;
+        text-align: center;
+        border-left: 4px solid #60a5fa;
+    }
+    .stat-value {
+        font-size: 2em;
+        font-weight: bold;
+        color: #e2e8f0;
+    }
+    .stat-label {
+        color: #a0aec0;
+        margin-top: 5px;
+    }
+    .similarity-threshold {
+        margin: 20px 0;
+        text-align: center;
+        color: #e2e8f0;
+    }
+    .threshold-slider {
+        width: 300px;
+        margin: 0 10px;
+        -webkit-appearance: none;
+        appearance: none;
+        height: 8px;
+        background: #4a5568;
+        border-radius: 4px;
+        outline: none;
+    }
+    .threshold-slider::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 20px;
+        height: 20px;
+        background: #60a5fa;
+        cursor: pointer;
+        border-radius: 50%;
+    }
+    .threshold-slider::-moz-range-thumb {
+        width: 20px;
+        height: 20px;
+        background: #60a5fa;
+        cursor: pointer;
+        border-radius: 50%;
+        border: none;
+    }
+    .error {
+        background: rgba(245, 101, 101, 0.2);
+        color: #fc8181;
+        padding: 15px;
+        border-radius: 10px;
+        margin: 20px 0;
+        text-align: center;
+        display: none;
+        border: 1px solid rgba(245, 101, 101, 0.3);
+    }
+    .info-panel {
+        background: rgba(26, 32, 44, 0.6);
+        border-radius: 10px;
+        padding: 20px;
+        margin-bottom: 20px;
+        border: 1px solid #4a5568;
+    }
+    .info-panel h4 {
+        color: #60a5fa;
+        margin-bottom: 10px;
+    }
+    .info-panel p {
+        color: #a0aec0;
+        margin: 5px 0;
+        font-size: 0.9em;
+    }
+    @media (max-width: 768px) {
+        .upload-section {
+            grid-template-columns: 1fr;
+        }
+        .images-container {
+            grid-template-columns: 1fr;
+        }
+        .controls {
+            flex-direction: column;
+            align-items: center;
+        }
+        .threshold-slider {
+            width: 200px;
+        }
+    }
 </style>
+```
 </head>
 <body>
+    <div class="container">
+        <h1>I-JEPA Patch Correspondence Analyzer</h1>
+        <p class="subtitle">Upload two images to analyze cross-patch correspondences using I-JEPA embeddings</p>
+```
+    <div class="upload-section">
+        <div class="upload-box" id="upload1">
+            <input type="file" class="upload-input" accept="image/*" id="file1">
+            <div class="upload-content">
+                <div class="upload-icon">🖼️</div>
+                <div class="upload-text">Upload Image 1</div>
+                <div class="upload-hint">Click or drag image here</div>
+            </div>
+        </div>
+        <div class="upload-box" id="upload2">
+            <input type="file" class="upload-input" accept="image/*" id="file2">
+            <div class="upload-content">
+                <div class="upload-icon">🖼️</div>
+                <div class="upload-text">Upload Image 2</div>
+                <div class="upload-hint">Click or drag image here</div>
+            </div>
+        </div>
+    </div>
+    <div class="controls">
+        <button class="btn btn-primary" id="analyzeBtn" disabled>
+            🔍 Analyze Cross-Patch Correspondences
+        </button>
+        <button class="btn btn-secondary" id="clearBtn">
+            🗑️ Clear Images
+        </button>
     </div>
+    <div class="error" id="errorMsg"></div>
+    <div class="loading" id="loading">
+        <div class="spinner"></div>
+        <p>Loading I-JEPA model and analyzing images...</p>
+        <p><small>Using onnx-community/ijepa_vith14_1k for optimal browser performance</small></p>
     </div>
+    <div class="results" id="results">
+        <div class="info-panel">
+            <h4>How to Use:</h4>
+            <p>• Hover over any patch in either image to see its corresponding patches in the other image</p>
+            <p>• Adjust the similarity threshold to show more or fewer correspondences</p>
+            <p>• Blue outline shows the patch you're hovering over</p>
+            <p>• Colored patches show corresponding regions based on I-JEPA embeddings</p>
+        </div>
+        <div class="visualization">
+            <div class="similarity-threshold">
+                <label>Similarity Threshold: </label>
+                <input type="range" class="threshold-slider" id="thresholdSlider"
+                       min="0" max="1" step="0.01" value="0.7">
+                <span id="thresholdValue">0.70</span>
+            </div>
+            <div class="images-container">
+                <div class="image-analysis">
+                    <h3>Image 1</h3>
+                    <div class="canvas-container">
+                        <canvas id="canvas1" class="analysis-canvas"></canvas>
+                    </div>
+                </div>
+                <div class="image-analysis">
+                    <h3>Image 2</h3>
+                    <div class="canvas-container">
+                        <canvas id="canvas2" class="analysis-canvas"></canvas>
+                    </div>
+                </div>
+            </div>
+            <div class="stats">
+                <div class="stat-card">
+                    <div class="stat-value" id="totalPatches">0</div>
+                    <div class="stat-label">Patches per Image</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-value" id="strongCorrespondences">0</div>
+                    <div class="stat-label">Strong Correspondences</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-value" id="avgSimilarity">0.00</div>
+                    <div class="stat-label">Average Cross-Similarity</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-value" id="maxSimilarity">0.00</div>
+                    <div class="stat-label">Maximum Similarity</div>
+                </div>
+            </div>
+        </div>
     </div>
+</div>
+<script type="module">
+    import { pipeline, RawImage, matmul } from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.7.2";
+    // Configuration
+    const MODEL_ID = "onnx-community/ijepa_vith14_1k";
+    const SUPPORTED_RESOLUTIONS = [224, 336, 448];
+    const MAX_PIXELS = 2097152; // 2MP limit for performance
+    // DOM elements
+    const file1Input = document.getElementById('file1');
+    const file2Input = document.getElementById('file2');
+    const upload1 = document.getElementById('upload1');
+    const upload2 = document.getElementById('upload2');
+    const analyzeBtn = document.getElementById('analyzeBtn');
+    const clearBtn = document.getElementById('clearBtn');
+    const loading = document.getElementById('loading');
+    const results = document.getElementById('results');
+    const errorMsg = document.getElementById('errorMsg');
+    const thresholdSlider = document.getElementById('thresholdSlider');
+    const thresholdValue = document.getElementById('thresholdValue');
+    const canvas1 = document.getElementById('canvas1');
+    const canvas2 = document.getElementById('canvas2');
+    const ctx1 = canvas1.getContext('2d');
+    const ctx2 = canvas2.getContext('2d');
+    // State
+    let extractor = null;
+    let image1Data = null;
+    let image2Data = null;
+    let features1 = null;
+    let features2 = null;
+    let crossSimilarities = null;
+    let patchesPerRow = 0;
+    let originalImages = { img1: null, img2: null };
+    let imageCropParams = { img1: null, img2: null };
+    // Utility functions
+    function showError(message) {
+        errorMsg.textContent = message;
+        errorMsg.style.display = 'block';
+        setTimeout(() => {
+            errorMsg.style.display = 'none';
+        }, 5000);
+    }
+    function showLoading(show) {
+        loading.style.display = show ? 'block' : 'none';
+        analyzeBtn.disabled = show;
+    }
+    function showResults(show) {
+        results.style.display = show ? 'block' : 'none';
+    }
+    function updateAnalyzeButton() {
+        analyzeBtn.disabled = !image1Data || !image2Data || !extractor;
+    }
+    function findClosestSupportedResolution(targetDim) {
+        return SUPPORTED_RESOLUTIONS.reduce((prev, curr) =>
+            Math.abs(curr - targetDim) < Math.abs(prev - targetDim) ? curr : prev
+        );
+    }
+    // Initialize model
+    async function initializeModel() {
+        try {
+            showLoading(true);
+            const isWebGpuSupported = !!navigator.gpu;
+            const device = isWebGpuSupported ? "webgpu" : "wasm";
+            const dtype = isWebGpuSupported ? "q4" : "q8";
+            console.log(`Loading I-JEPA model with ${device.toUpperCase()}...`);
+            extractor = await pipeline("image-feature-extraction", MODEL_ID, { device, dtype });
+            // Disable automatic resizing - we'll handle it ourselves
+            if (extractor?.processor?.image_processor) {
+                extractor.processor.image_processor.do_resize = false;
+            }
+            console.log('Model loaded successfully');
+            updateAnalyzeButton();
+            showLoading(false);
+            return true;
+        } catch (error) {
+            console.error('Error loading model:', error);
+            showError('Failed to load I-JEPA model. Please refresh and try again.');
+            showLoading(false);
+            return false;
+        }
+    }
+    // Process image to canvas
+    function processImageToCanvas(file, canvas, ctx, imageKey) {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => {
+                const { naturalWidth: w, naturalHeight: h } = img;
+                // Crop to square from center
+                const cropSize = Math.min(w, h);
+                const sx = (w - cropSize) / 2;
+                const sy = (h - cropSize) / 2;
+                imageCropParams[imageKey] = { sx, sy, sWidth: cropSize, sHeight: cropSize };
+                // Find optimal resolution
+                let scaledCropSize = cropSize;
+                if (scaledCropSize * scaledCropSize > MAX_PIXELS) {
+                    scaledCropSize = Math.sqrt(MAX_PIXELS);
+                }
+                const chosenResolution = findClosestSupportedResolution(scaledCropSize);
+                // Set canvas size and draw
+                canvas.width = chosenResolution;
+                canvas.height = chosenResolution;
+                ctx.drawImage(
+                    img,
+                    sx, sy, cropSize, cropSize,
+                    0, 0, chosenResolution, chosenResolution
+                );
+                originalImages[imageKey] = img;
+                resolve(chosenResolution);
+            };
+            img.onerror = reject;
+            img.src = URL.createObjectURL(file);
+        });
+    }
+    // File upload handling
+    function handleFileUpload(fileInput, uploadBox, imageKey, canvasId) {
+        const file = fileInput.files[0];
+        if (!file) return;
+        const canvas = document.getElementById(canvasId);
+        const ctx = canvas.getContext('2d');
+        processImageToCanvas(file, canvas, ctx, imageKey)
+            .then(() => {
+                // Store image data
+                if (imageKey === 'img1') {
+                    image1Data = file;
+                } else {
+                    image2Data = file;
+                }
+                // Update UI
+                uploadBox.classList.add('has-image');
+                const content = uploadBox.querySelector('.upload-content');
+                content.innerHTML = `
+                    <img src="${URL.createObjectURL(file)}" class="preview-image" alt="Preview">
+                    <div style="margin-top: 10px; color: #48bb78; font-weight: 600;">✓ Image loaded</div>
+                `;
+                updateAnalyzeButton();
+            })
+            .catch(error => {
+                console.error('Error processing image:', error);
+                showError('Failed to process image. Please try a different file.');
+            });
+    }
+    // Extract features from canvas
+    async function extractFeatures(canvas) {
+        try {
+            const imageData = await RawImage.fromCanvas(canvas);
+            const features = await extractor(imageData, { pooling: "none" });
+            // Remove CLS token (first token)
+            const totalTokens = features.dims[1];
+            const nPatches = totalTokens - 1;
+            const patchFeatures = features.slice(null, [1, nPatches]);
+            // Calculate patches per row
+            const patchesPerRowCalc = Math.round(Math.sqrt(nPatches));
+            if (patchesPerRowCalc * patchesPerRowCalc !== nPatches) {
+                console.warn("Patch count is not a perfect square:", nPatches);
+            }
+            return { features: patchFeatures, patchesPerRow: patchesPerRowCalc };
+        } catch (error) {
+            console.error('Error extracting features:', error);
+            throw error;
+        }
+    }
+    // Calculate cross-similarities between two images
+    async function calculateCrossSimilarities(features1, features2) {
+        try {
+            // Normalize features
+            const normalized1 = features1.normalize(2, -1);
+            const normalized2 = features2.normalize(2, -1);
+            // Calculate cross-similarity matrix: img1_patches x img2_patches
+            const similarities = await matmul(normalized1, normalized2.permute(0, 2, 1));
+            return (await similarities.tolist())[0];
+        } catch (error) {
+            console.error('Error calculating similarities:', error);
+            throw error;
+        }
+    }
+    // Redraw original image on canvas
+    function redrawOriginalImage(canvas, ctx, imageKey) {
+        if (!originalImages[imageKey] || !imageCropParams[imageKey]) return;
+        const img = originalImages[imageKey];
+        const params = imageCropParams[imageKey];
+        ctx.drawImage(
+            img,
+            params.sx, params.sy, params.sWidth, params.sHeight,
+            0, 0, canvas.width, canvas.height
+        );
+    }
+    // Color mapping for similarity visualization
+    const INFERNO_COLORMAP = [
+        [0.0, [0,0,4]], [0.1, [39,12,69]], [0.2, [84,15,104]], [0.3, [128,31,103]], [0.4, [170,48,88]],
+        [0.5, [209,70,68]], [0.6, [240,97,47]], [0.7, [253,138,28]], [0.8, [252,185,26]], [0.9, [240,231,56]], [1.0, [252,255,160]]
+    ];
+    function getInfernoColor(t) {
+        for (let i = 1; i < INFERNO_COLORMAP.length; i++) {
+            const [tp, cp] = INFERNO_COLORMAP[i-1];
+            const [tc, cc] = INFERNO_COLORMAP[i];
+            if (t <= tc) {
+                const a = (t - tp) / (tc - tp);
+                const r = cp[0] + a * (cc[0] - cp[0]);
+                const g = cp[1] + a * (cc[1] - cp[1]);
+                const b = cp[2] + a * (cc[2] - cp[2]);
+                return `rgb(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)})`;
+            }
+        }
+        const last = INFERNO_COLORMAP[INFERNO_COLORMAP.length-1][1];
+        return `rgb(${last.join(",")})`;
+    }
+    // Draw highlights on canvas
+    function drawHighlights(canvas, ctx, imageKey, queryPatchIndex, isQueryImage) {
+        if (!crossSimilarities || !patchesPerRow) return;
+        const patchSize = canvas.width / patchesPerRow;
+        const threshold = parseFloat(thresholdSlider.value);
+        // Redraw original image
+        redrawOriginalImage(canvas, ctx, imageKey);
+        if (isQueryImage) {
+            // Draw query patch highlight
+            const qy = Math.floor(queryPatchIndex / patchesPerRow);
+            const qx = queryPatchIndex % patchesPerRow;
+            ctx.strokeStyle = "#60a5fa";
+            ctx.lineWidth = 3;
+            ctx.strokeRect(qx * patchSize, qy * patchSize, patchSize, patchSize);
+        } else {
+            // Draw corresponding patches
+            const similarities = crossSimilarities[queryPatchIndex] || [];
+            const maxSim = Math.max(...similarities);
+            const minSim = Math.min(...similarities);
+            const range = maxSim - minSim;
+            for (let i = 0; i < similarities.length; i++) {
+                const sim = similarities[i];
+                if (sim >= threshold) {
+                    const py = Math.floor(i / patchesPerRow);
+                    const px = i % patchesPerRow;
+                    // Normalize similarity for color mapping
+                    const normalizedSim = range > 1e-4 ? (sim - minSim) / range : 1;
+                    const alpha = Math.pow(normalizedSim, 2) * 0.8;
+                    ctx.fillStyle = `rgba(96, 165, 250, ${alpha})`;
+                    ctx.fillRect(px * patchSize, py * patchSize, patchSize, patchSize);
+                }
+            }
+        }
+    }
+    // Clear highlights
+    function clearHighlights() {
+        redrawOriginalImage(canvas1, ctx1, 'img1');
+        redrawOriginalImage(canvas2, ctx2, 'img2');
+    }
+    // Mouse event handlers
+    function handleMouseMove(canvas, imageKey, isImage1) {
+        return function(event) {
+            if (!crossSimilarities || !patchesPerRow) return;
+            const rect = canvas.getBoundingClientRect();
+            const scaleX = canvas.width / rect.width;
+            const scaleY = canvas.height / rect.height;
+            const x = (event.clientX - rect.left) * scaleX;
+            const y = (event.clientY - rect.top) * scaleY;
+            if (x < 0 || x >= canvas.width || y < 0 || y >= canvas.height) return;
+            const patchSize = canvas.width / patchesPerRow;
+            const patchX = Math.floor(x / patchSize);
+            const patchY = Math.floor(y / patchSize);
+            const patchIndex = patchY * patchesPerRow + patchX;
+            if (patchIndex < 0 || patchIndex >= patchesPerRow * patchesPerRow) return;
+            // Draw highlights on both canvases
+            drawHighlights(canvas1, ctx1, 'img1', patchIndex, isImage1);
+            drawHighlights(canvas2, ctx2, 'img2', patchIndex, !isImage1);
+        };
+    }
+    // Update statistics
+    function updateStatistics() {
+        if (!crossSimilarities) return;
+        const threshold = parseFloat(thresholdSlider.value);
+        const totalPatches = patchesPerRow * patchesPerRow;
+        let strongCorrespondences = 0;
+        let totalSimilarity = 0;
+        let maxSim = 0;
+        let count = 0;
+        for (let i = 0; i < crossSimilarities.length; i++) {
+            for (let j = 0; j < crossSimilarities[i].length; j++) {
+                const sim = crossSimilarities[i][j];
+                totalSimilarity += sim;
+                maxSim = Math.max(maxSim, sim);
+                count++;
+                if (sim >= threshold) {
+                    strongCorrespondences++;
+                }
+            }
+        }
+        document.getElementById('totalPatches').textContent = totalPatches;
+        document.getElementById('strongCorrespondences').textContent = strongCorrespondences;
+        document.getElementById('avgSimilarity').textContent = (totalSimilarity / count).toFixed(3);
+        document.getElementById('maxSimilarity').textContent = maxSim.toFixed(3);
+    }
+    // Event listeners
+    file1Input.addEventListener('change', () => handleFileUpload(file1Input, upload1, 'img1', 'canvas1'));
+    file2Input.addEventListener('change', () => handleFileUpload(file2Input, upload2, 'img2', 'canvas2'));
+    clearBtn.addEventListener('click', () => {
+        // Reset all data
+        image1Data = null;
+        image2Data = null;
+        features1 = null;
+        features2 = null;
+        crossSimilarities = null;
+        patchesPerRow = 0;
+        originalImages = { img1: null, img2: null };
+        imageCropParams = { img1: null, img2: null };
+        // Reset UI
+        file1Input.value = '';
+        file2Input.value = '';
+        upload1.classList.remove('has-image');
+        upload2.classList.remove('has-image');
+        upload1.querySelector('.upload-content').innerHTML = `
+            <div class="upload-icon">🖼️</div>
+            <div class="upload-text">Upload Image 1</div>
+            <div class="upload-hint">Click or drag image here</div>
+        `;
+        upload2.querySelector('.upload-content').innerHTML = `
+            <div class="upload-icon">🖼️</div>
+            <div class="upload-text">Upload Image 2</div>
+            <div class="upload-hint">Click or drag image here</div>
+        `;
+        // Clear canvases
+        ctx1.clearRect(0, 0, canvas1.width, canvas1.height);
+        ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
+        showResults(false);
+        updateAnalyzeButton();
+    });
+    thresholdSlider.addEventListener('input', () => {
+        const threshold = parseFloat(thresholdSlider.value);
+        thresholdValue.textContent = threshold.toFixed(2);
+        updateStatistics();
+    });
+    // Main analysis function
+    analyzeBtn.addEventListener('click', async () => {
+        if (!image1Data || !image2Data || !extractor) return;
+        showLoading(true);
+        showResults(false);
+        try {
+            console.log('Extracting features from both images...');
+            // Extract features from both images
+            const result1 = await extractFeatures(canvas1);
+            const result2 = await extractFeatures(canvas2);
+            features1 = result1.features;
+            features2 = result2.features;
+            patchesPerRow = result1.patchesPerRow;
+            console.log(`Patch grid: ${patchesPerRow}x${patchesPerRow} patches per image`);
+            // Calculate cross-similarities
+            console.log('Calculating cross-similarities...');
+            crossSimilarities = await calculateCrossSimilarities(features1, features2);
+            // Set up mouse event listeners
+            canvas1.addEventListener('mousemove', handleMouseMove(canvas1, 'img1', true));
+            canvas1.addEventListener('mouseleave', clearHighlights);
+            canvas2.addEventListener('mousemove', handleMouseMove(canvas2, 'img2', false));
+            canvas2.addEventListener('mouseleave', clearHighlights);
+            // Update statistics
+            updateStatistics();
+            // Show results
+            showResults(true);
+            showLoading(false);
+            console.log('Analysis complete!');
+        } catch (error) {
+            console.error('Analysis error:', error);
+            showError('Failed to analyze images. Please try again with different images.');
+            showLoading(false);
+        }
+    });
+    // Drag and drop support
+    ['upload1', 'upload2'].forEach((id, index) => {
+        const uploadBox = document.getElementById(id);
+        const fileInput = document.getElementById(`file${index + 1}`);
+        uploadBox.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            uploadBox.style.borderColor = '#60a5fa';
+        });
+        uploadBox.addEventListener('dragleave', (e) => {
+            e.preventDefault();
+            uploadBox.style.borderColor = '#4a5568';
+        });
+        uploadBox.addEventListener('drop', (e) => {
+            e.preventDefault();
+            uploadBox.style.borderColor = '#4a5568';
+            const files = e.dataTransfer.files;
+            if (files.length > 0 && files[0].type.startsWith('image/')) {
+                fileInput.files = files;
+                const imageKey = index === 0 ? 'img1' : 'img2';
+                const canvasId = index === 0 ? 'canvas1' : 'canvas2';
+                handleFileUpload(fileInput, uploadBox, imageKey, canvasId);
+            }
+        });
+    });
+    // Initialize on load
+    window.addEventListener('load', () => {
+        console.log('Initializing I-JEPA Patch Correspondence Analyzer...');
+        initializeModel();
+    });
 </script>
+```
 </body>
 </html>