Check it headless ​

html

<!doctype html>
<meta charset="utf-8">
<div id="viewer" style="width: 800px; height: 600px"></div>
<script type="module">
  const RUNTIME_URL = 'https://onsite.holostep.io/serve/runtime/v2-canary/configurator-runtime.js';
  const ACCOUNT_ID = 164; // your Holostep account id
  const SCENE_URL = './scene.json'; // the scene model you hand off

  // Your page's start view, as llms.txt's boot pages set it after the first model.
  // A stored view converts as the package's cameraViewFromStored does (degrees; a stored
  // `position` wins over the angles; points copied as { x, y, z }); none frames the product.
  function startView(session, view) {
    if (!view) return session.camera.fit(undefined, { durationMs: 0 });
    const xyz = (p) => ({ x: p.x, y: p.y, z: p.z });
    const t = xyz(view.target);
    const p = view.position && xyz(view.position);
    const d = p && { x: p.x - t.x, y: p.y - t.y, z: p.z - t.z };
    const deg = 180 / Math.PI;
    const camera = d
      ? {
          azimuthDeg: Math.atan2(d.x, d.z) * deg,
          polarDeg: Math.atan2(Math.hypot(d.x, d.z), d.y) * deg,
          distance: Math.hypot(d.x, d.y, d.z),
        }
      : { azimuthDeg: view.azimuth, polarDeg: view.polar, distance: view.radius };
    const focal = view.focalOffset ? { focalOffset: xyz(view.focalOffset) } : {};
    return session.camera.set({ target: t, ...camera, ...focal }, { durationMs: 0 });
  }

  /** The product's world bounds as a screen rectangle, CSS px; null when a corner is behind the camera. */
  function projectedRect(session) {
    const box = session.find({ role: 'product' }).bounds();
    if (!box) return null;
    const corners = [];
    for (const x of [box.min.x, box.max.x])
      for (const y of [box.min.y, box.max.y])
        for (const z of [box.min.z, box.max.z]) corners.push({ x, y, z });
    const points = session.camera.project(corners);
    if (points.some((p) => p === null)) return null;
    const xs = points.map((p) => p.x);
    const ys = points.map((p) => p.y);
    return { left: Math.min(...xs), top: Math.min(...ys), right: Math.max(...xs), bottom: Math.max(...ys) };
  }

  async function check() {
    const runtime = await import(RUNTIME_URL);
    const el = document.getElementById('viewer');
    const session = await runtime.boot({ el, accountId: ACCOUNT_ID, contract: '2.0' });
    const model = await (await fetch(SCENE_URL)).json();
    const report = await session.setSceneModel(model);
    // the view your page starts on: its stored view, else a fit (no scene write moves the camera)
    await startView(session, model.defaultView);
    await session.idle();
    // Transparent: no colour stands for 'no product', so a pixel is the product's when it is
    // opaque (a ground shadow or a see-through part never is).
    const shot = await session.capture({ pixelRatio: 1, background: 'transparent' });
    const { width, height } = shot.snapshot.size; // CSS px, the image's pixels at ratio 1
    const image = await createImageBitmap(shot.image);
    const canvas = Object.assign(document.createElement('canvas'), { width, height });
    const context = canvas.getContext('2d');
    context.drawImage(image, 0, 0);
    const { data } = context.getImageData(0, 0, width, height);

    // 1. Pixels over the projected bounds: framed, drawn and lit.
    const rect = projectedRect(session);
    const area = (r) => Math.max(0, r.right - r.left) * Math.max(0, r.bottom - r.top);
    const seen = rect && {
      left: Math.max(0, Math.floor(rect.left)), top: Math.max(0, Math.floor(rect.top)),
      right: Math.min(width, Math.ceil(rect.right)), bottom: Math.min(height, Math.ceil(rect.bottom)),
    };
    let inside = 0, drawn = 0, brightness = 0;
    for (let y = seen?.top ?? 0; y < (seen?.bottom ?? 0); y++) {
      for (let x = seen.left; x < seen.right; x++) {
        const i = (y * width + x) * 4;
        inside++;
        // a product pixel: opaque in the transparent capture
        if (data[i + 3] >= 250) {
          drawn++;
          brightness += Math.max(data[i], data[i + 1], data[i + 2]) / 255;
        }
      }
    }
    const problems = session.info().problems.map((p) => `${p.code}: ${p.message}`);
    const checks = {
      // the whole product is in the view (90 % of its rectangle) and fills 5 % of it at least
      framed: rect !== null && area(seen) >= 0.9 * area(rect) && area(rect) >= 0.05 * width * height,
      // a tenth of its rectangle at least is product pixels
      drawn: inside > 0 && drawn / inside >= 0.1,
      // its pixels are not black: a light is on it
      lit: drawn > 0 && brightness / drawn >= 0.15,
      // 2. no Problem recorded, and the scene model committed
      problems: problems.length === 0 && report.outcome === 'committed',
      // 3. nothing was still moving or loading in the image
      settled: shot.snapshot.settled && shot.completed,
    };
    const ok = Object.values(checks).every(Boolean);
    return { ok, checks, problems, rect, drawnShare: inside ? drawn / inside : 0, brightness: drawn ? brightness / drawn : 0 };
  }

  window.holoCheck = check().catch((error) => ({ ok: false, error: String(error?.stack ?? error) }));
</script>

import { chromium } from 'playwright';

const url = process.argv[2];
// WebGL 2 in software, so it draws on any machine, GPU or not.
const browser = await chromium.launch({
  args: ['--use-gl=angle', '--use-angle=swiftshader', '--enable-unsafe-swiftshader', '--ignore-gpu-blocklist'],
});
try {
  const page = await browser.newPage({ viewport: { width: 1000, height: 800 } });
  page.on('console', (m) => ['warning', 'error'].includes(m.type()) && console.error(m.text()));
  await page.goto(url);
  const result = await page.evaluate(() => window.holoCheck);
  console.log(JSON.stringify(result, null, 2));
  process.exitCode = result.ok ? 0 : 1;
} finally {
  await browser.close();
}