demo · v152

Quality Tier Selector

The canonical use case from the WICG explainer: a video conferencing tile that scales virtual backgrounds, noise reduction, and frame rate to the device's CPU tier — plus an "AI: local or server?" decision that flips at tier 3+.

Origin trial: navigator.cpuPerformance is behind the CpuPerformance origin trial in Chrome 152. Without a token the page reads the tier as n/a and falls back to the manual tier selector below.

read or override

live read: checking… · pick a tier to preview the experience:

thermal pressure override

Compute Pressure simulation: nominal · effective tier 3

video tile

1080p 30fps virtual bg noise reduction face retouch

per-effect cost

Virtual background on

cost: GPU + ML segmentation

Noise reduction on

cost: real-time DSP

Face retouch on

cost: face mesh + filter

Live captions on

cost: local speech model

ai inference router

Summarise meeting transcript → deciding…

—

how it maps

const baseTier = typeof navigator.cpuPerformance === "number"
  ? navigator.cpuPerformance
  : 2;
// 0 unknown · 1 low · 2 mid · 3 high · 4 top

let pressureState = "nominal";
if ("PressureObserver" in globalThis) {
  const observer = new PressureObserver(records => {
    pressureState = records.at(-1)?.state ?? "nominal";
    // Recompute the effective tier and update the call UI.
  });
  await observer.observe("cpu");
}

const tier = pressureState === "critical"
  ? Math.min(baseTier, 2)
  : pressureState === "serious"
    ? Math.min(baseTier, 2)
    : pressureState === "fair"
      ? Math.min(baseTier, 3)
      : baseTier;

const profile = {
  resolution: tier >= 3 ? 1080 : tier >= 2 ? 720 : 480,
  fps:        tier >= 3 ? 30   : tier >= 2 ? 24  : 15,
  virtualBg:  tier >= 2,
  noiseRed:   tier >= 2,
  retouch:    tier >= 3,
  captions:   tier >= 4,
};

const runAiLocally = tier >= 3;
const summary = runAiLocally
  ? await localLLM.summarise(transcript)
  : await fetch('/api/summarise', { method: 'POST', body: transcript });