Spaces:

SebRincon
/

anycalib-wasm

Running

App Files Files Community

SebRincon commited on Feb 26

Commit

1313f05

verified ·

1 Parent(s): 608808e

Upload AnyCalib WASM demo (ONNX Runtime Web)

Browse files

Files changed (4) hide show

README.md +69 -5
index.html +214 -18
index.js +118 -0
package.json +13 -0

README.md CHANGED Viewed

@@ -1,10 +1,74 @@
 ---
-title: Anycalib Wasm
-emoji: 🌖
-colorFrom: indigo
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: AnyCalib WASM Demo
+emoji: 📷
+colorFrom: blue
+colorTo: green
 sdk: static
 pinned: false
+license: apache-2.0
+tags:
+  - wasm
+  - onnxruntime-web
+  - camera-calibration
+  - anycalib
 ---
+# AnyCalib WASM Demo
+Run camera calibration **entirely in the browser** using WebAssembly.
+## How it works
+1. The INT8 quantized ONNX model (~300 MB) is loaded via ONNX Runtime Web
+2. Images are preprocessed to 518x518 RGB float32 tensors
+3. The model predicts per-pixel ray directions
+4. A distortion heatmap is rendered from the ray predictions
+## Files
+| File | Description |
+|------|-------------|
+| `index.html` | Interactive demo page |
+| `index.js` | ES module with `AnyCalibrator` class |
+| `package.json` | npm dependencies |
+## Quick start
+```bash
+# Install ONNX Runtime Web
+npm install
+# Start local server
+npx http-server . -p 8080 -c-1
+# Open http://localhost:8080
+```
+## Using as an ES module
+```javascript
+import { AnyCalibrator } from './index.js';
+const calibrator = new AnyCalibrator({
+  // Options:
+  // modelUrl: 'custom-model-url.onnx',
+  // inputSize: 518,
+  // executionProvider: 'wasm' | 'webgpu',
+});
+await calibrator.init();
+const img = document.getElementById('myImage');
+const { rays, tangentCoords, elapsed } = await calibrator.predict(img);
+console.log(`Inference took ${elapsed.toFixed(0)}ms`);
+// Get distortion heatmap
+const heatmap = calibrator.computeDistortionMap(rays);
+```
+## Model source
+- ONNX models: [huggingface.co/SebRincon/anycalib-onnx](https://huggingface.co/SebRincon/anycalib-onnx)
+- Raw PyTorch: [huggingface.co/SebRincon/anycalib](https://huggingface.co/SebRincon/anycalib)
+- Original: [github.com/javrtg/AnyCalib](https://github.com/javrtg/AnyCalib)

index.html CHANGED Viewed

@@ -1,19 +1,215 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AnyCalib WASM Demo</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { font-family: system-ui, sans-serif; background: #0f172a; color: #e2e8f0; padding: 2rem; }
+    h1 { margin-bottom: 1rem; font-size: 1.5rem; }
+    .container { max-width: 900px; margin: 0 auto; }
+    .status { padding: 0.75rem 1rem; border-radius: 0.5rem; margin-bottom: 1rem; font-size: 0.9rem; }
+    .status.loading { background: #1e3a5f; border: 1px solid #3b82f6; }
+    .status.ready { background: #14532d; border: 1px solid #22c55e; }
+    .status.error { background: #7f1d1d; border: 1px solid #ef4444; }
+    .upload-area {
+      border: 2px dashed #475569; border-radius: 0.75rem; padding: 3rem;
+      text-align: center; cursor: pointer; transition: border-color 0.2s;
+      margin-bottom: 1.5rem;
+    }
+    .upload-area:hover { border-color: #3b82f6; }
+    .upload-area.active { border-color: #22c55e; background: #0f2a1d; }
+    .results { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
+    .results canvas, .results img { width: 100%; border-radius: 0.5rem; background: #1e293b; }
+    .results .label { font-size: 0.85rem; color: #94a3b8; margin-top: 0.25rem; text-align: center; }
+    .timing { font-size: 0.85rem; color: #94a3b8; margin-top: 0.5rem; }
+    input[type="file"] { display: none; }
+    #backendSelect { background: #1e293b; color: #e2e8f0; border: 1px solid #475569;
+      padding: 0.5rem; border-radius: 0.375rem; margin-bottom: 1rem; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>AnyCalib WASM Demo</h1>
+    <p style="margin-bottom: 1rem; color: #94a3b8;">
+      Camera calibration running entirely in your browser via WebAssembly.
+      Model: <a href="https://huggingface.co/SebRincon/anycalib-onnx" style="color:#60a5fa">
+      SebRincon/anycalib-onnx</a> (INT8, ~300 MB)
+    </p>
+    <label for="backendSelect">Backend: </label>
+    <select id="backendSelect">
+      <option value="wasm">WASM (CPU)</option>
+      <option value="webgpu">WebGPU (if available)</option>
+    </select>
+    <div id="status" class="status loading">Loading ONNX Runtime Web...</div>
+    <div id="uploadArea" class="upload-area">
+      <p>Drop an image here or click to upload</p>
+      <p style="font-size: 0.8rem; color: #64748b; margin-top: 0.5rem;">
+        Supports JPG, PNG, WebP
+      </p>
+      <input type="file" id="fileInput" accept="image/*">
+    </div>
+    <div class="results" id="results" style="display: none;">
+      <div>
+        <img id="inputImage" alt="Input">
+        <div class="label">Input Image</div>
+      </div>
+      <div>
+        <canvas id="heatmapCanvas"></canvas>
+        <div class="label">Distortion Heatmap</div>
+      </div>
+    </div>
+    <div id="timing" class="timing"></div>
+  </div>
+  <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.min.js"></script>
+  <script>
+    const INPUT_SIZE = 518;
+    const MODEL_URL = 'https://huggingface.co/SebRincon/anycalib-onnx/resolve/main/model_int8.onnx';
+    let session = null;
+    const statusEl = document.getElementById('status');
+    const uploadArea = document.getElementById('uploadArea');
+    const fileInput = document.getElementById('fileInput');
+    const resultsEl = document.getElementById('results');
+    const timingEl = document.getElementById('timing');
+    async function loadModel() {
+      try {
+        const backend = document.getElementById('backendSelect').value;
+        statusEl.textContent = `Loading model (${backend})... This may take a minute on first load.`;
+        statusEl.className = 'status loading';
+        ort.env.wasm.wasmPaths = 'https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/';
+        const t0 = performance.now();
+        session = await ort.InferenceSession.create(MODEL_URL, {
+          executionProviders: [backend],
+          graphOptimizationLevel: 'all',
+        });
+        const elapsed = ((performance.now() - t0) / 1000).toFixed(1);
+        statusEl.textContent = `Model loaded in ${elapsed}s. Ready for inference.`;
+        statusEl.className = 'status ready';
+      } catch (err) {
+        statusEl.textContent = `Error loading model: ${err.message}`;
+        statusEl.className = 'status error';
+        console.error(err);
+      }
+    }
+    function preprocessImage(img) {
+      const canvas = document.createElement('canvas');
+      canvas.width = INPUT_SIZE;
+      canvas.height = INPUT_SIZE;
+      const ctx = canvas.getContext('2d');
+      ctx.drawImage(img, 0, 0, INPUT_SIZE, INPUT_SIZE);
+      const imageData = ctx.getImageData(0, 0, INPUT_SIZE, INPUT_SIZE);
+      const { data, width, height } = imageData;
+      const float32Data = new Float32Array(3 * width * height);
+      for (let i = 0; i < width * height; i++) {
+        float32Data[i] = data[i * 4] / 255.0;
+        float32Data[width * height + i] = data[i * 4 + 1] / 255.0;
+        float32Data[2 * width * height + i] = data[i * 4 + 2] / 255.0;
+      }
+      return new ort.Tensor('float32', float32Data, [1, 3, height, width]);
+    }
+    function renderHeatmap(rays) {
+      const [batch, channels, height, width] = rays.dims;
+      const data = rays.data;
+      const canvas = document.getElementById('heatmapCanvas');
+      canvas.width = width;
+      canvas.height = height;
+      const ctx = canvas.getContext('2d');
+      const imageData = ctx.createImageData(width, height);
+      for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+          const idx = y * width + x;
+          const rx = data[idx];
+          const ry = data[height * width + idx];
+          const rz = data[2 * height * width + idx];
+          const deviation = Math.sqrt(rx * rx + ry * ry) / Math.max(Math.abs(rz), 1e-6);
+          const v = Math.min(255, Math.floor(deviation * 128));
+          // Viridis-ish colormap
+          const pixIdx = idx * 4;
+          imageData.data[pixIdx] = Math.min(255, v * 2);           // R
+          imageData.data[pixIdx + 1] = Math.min(255, 50 + v);     // G
+          imageData.data[pixIdx + 2] = Math.max(0, 200 - v);      // B
+          imageData.data[pixIdx + 3] = 255;                        // A
+        }
+      }
+      ctx.putImageData(imageData, 0, 0);
+    }
+    async function runInference(img) {
+      if (!session) {
+        statusEl.textContent = 'Model not loaded yet. Please wait...';
+        return;
+      }
+      statusEl.textContent = 'Running inference...';
+      statusEl.className = 'status loading';
+      // Show input
+      document.getElementById('inputImage').src = img.src;
+      resultsEl.style.display = 'grid';
+      try {
+        const inputTensor = preprocessImage(img);
+        const t0 = performance.now();
+        const results = await session.run({ image: inputTensor });
+        const elapsed = (performance.now() - t0).toFixed(0);
+        renderHeatmap(results.rays);
+        statusEl.textContent = `Inference complete.`;
+        statusEl.className = 'status ready';
+        timingEl.textContent = `Inference time: ${elapsed}ms | Input: ${INPUT_SIZE}x${INPUT_SIZE} | Rays shape: ${results.rays.dims.join('x')}`;
+      } catch (err) {
+        statusEl.textContent = `Inference error: ${err.message}`;
+        statusEl.className = 'status error';
+        console.error(err);
+      }
+    }
+    // File handling
+    uploadArea.addEventListener('click', () => fileInput.click());
+    uploadArea.addEventListener('dragover', (e) => {
+      e.preventDefault();
+      uploadArea.classList.add('active');
+    });
+    uploadArea.addEventListener('dragleave', () => uploadArea.classList.remove('active'));
+    uploadArea.addEventListener('drop', (e) => {
+      e.preventDefault();
+      uploadArea.classList.remove('active');
+      if (e.dataTransfer.files.length) handleFile(e.dataTransfer.files[0]);
+    });
+    fileInput.addEventListener('change', () => {
+      if (fileInput.files.length) handleFile(fileInput.files[0]);
+    });
+    function handleFile(file) {
+      const img = new Image();
+      img.onload = () => runInference(img);
+      img.src = URL.createObjectURL(file);
+    }
+    document.getElementById('backendSelect').addEventListener('change', () => {
+      session = null;
+      loadModel();
+    });
+    // Auto-load model on page load
+    loadModel();
+  </script>
+</body>
 </html>

index.js ADDED Viewed

	@@ -0,0 +1,118 @@

+/**
+ * AnyCalib WASM — Camera calibration inference via ONNX Runtime Web.
+ *
+ * This module loads the AnyCalib ONNX model and runs inference in the browser
+ * using WebAssembly (WASM) or WebGPU backends.
+ *
+ * Usage:
+ *   import { AnyCalibrayor } from './index.js';
+ *   const calibrator = new AnyCalibrator();
+ *   await calibrator.init();
+ *   const result = await calibrator.predict(imageElement);
+ */
+import * as ort from 'onnxruntime-web';
+// Configure WASM paths
+ort.env.wasm.wasmPaths = 'https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/';
+const MODEL_URL = 'https://huggingface.co/SebRincon/anycalib-onnx/resolve/main/model_int8.onnx';
+const INPUT_SIZE = 518;
+export class AnyCalibrator {
+  constructor(options = {}) {
+    this.modelUrl = options.modelUrl || MODEL_URL;
+    this.inputSize = options.inputSize || INPUT_SIZE;
+    this.session = null;
+    this.executionProvider = options.executionProvider || 'wasm';
+  }
+  async init() {
+    console.log(`[AnyCalib] Loading model from ${this.modelUrl}...`);
+    console.log(`[AnyCalib] Using ${this.executionProvider} backend`);
+    const startTime = performance.now();
+    this.session = await ort.InferenceSession.create(this.modelUrl, {
+      executionProviders: [this.executionProvider],
+      graphOptimizationLevel: 'all',
+    });
+    const elapsed = ((performance.now() - startTime) / 1000).toFixed(1);
+    console.log(`[AnyCalib] Model loaded in ${elapsed}s`);
+    return this;
+  }
+  /**
+   * Preprocess an image element or canvas to a float32 tensor.
+   * Resizes to inputSize x inputSize and normalizes to [0, 1].
+   */
+  preprocessImage(imageSource) {
+    const canvas = document.createElement('canvas');
+    canvas.width = this.inputSize;
+    canvas.height = this.inputSize;
+    const ctx = canvas.getContext('2d');
+    ctx.drawImage(imageSource, 0, 0, this.inputSize, this.inputSize);
+    const imageData = ctx.getImageData(0, 0, this.inputSize, this.inputSize);
+    const { data, width, height } = imageData;
+    // Convert RGBA HWC → RGB CHW float32 [0,1]
+    const float32Data = new Float32Array(3 * width * height);
+    for (let i = 0; i < width * height; i++) {
+      float32Data[i] = data[i * 4] / 255.0;                     // R
+      float32Data[width * height + i] = data[i * 4 + 1] / 255.0; // G
+      float32Data[2 * width * height + i] = data[i * 4 + 2] / 255.0; // B
+    }
+    return new ort.Tensor('float32', float32Data, [1, 3, height, width]);
+  }
+  /**
+   * Run inference on an image element, canvas, or video frame.
+   * Returns { rays, tangentCoords, elapsed }.
+   */
+  async predict(imageSource) {
+    if (!this.session) {
+      throw new Error('Model not initialized. Call init() first.');
+    }
+    const inputTensor = this.preprocessImage(imageSource);
+    const startTime = performance.now();
+    const results = await this.session.run({ image: inputTensor });
+    const elapsed = performance.now() - startTime;
+    return {
+      rays: results.rays,
+      tangentCoords: results.tangent_coords,
+      elapsed,
+    };
+  }
+  /**
+   * Compute a simple distortion heatmap from ray predictions.
+   * Returns a Uint8ClampedArray (H*W) with distortion magnitude per pixel.
+   */
+  computeDistortionMap(rays) {
+    const [batch, channels, height, width] = rays.dims;
+    const data = rays.data;
+    const heatmap = new Uint8ClampedArray(height * width);
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        const idx = y * width + x;
+        const rx = data[idx];                           // channel 0
+        const ry = data[height * width + idx];          // channel 1
+        const rz = data[2 * height * width + idx];      // channel 2
+        // Deviation from pinhole (rz=1 for undistorted center rays)
+        const deviation = Math.sqrt(rx * rx + ry * ry) / Math.max(Math.abs(rz), 1e-6);
+        heatmap[idx] = Math.min(255, Math.floor(deviation * 128));
+      }
+    }
+    return { data: heatmap, width, height };
+  }
+}
+// For script tag usage (non-module)
+if (typeof window !== 'undefined') {
+  window.AnyCalibrator = AnyCalibrator;
+}

package.json ADDED Viewed

	@@ -0,0 +1,13 @@

+{
+  "name": "anycalib-wasm",
+  "version": "1.0.0",
+  "description": "AnyCalib camera calibration running in the browser via ONNX Runtime Web (WASM)",
+  "main": "index.js",
+  "scripts": {
+    "start": "npx http-server . -p 8080 -c-1",
+    "build": "echo 'No build step needed - pure JS'"
+  },
+  "dependencies": {
+    "onnxruntime-web": "^1.17.0"
+  }
+}