@@ -10,36 +10,67 @@ type Box = [number, number, number, number];
 export interface Face { id: number; box: Box }
 let nextId = 1;
 
+/**
+ * Which way the detector runs, and why it stopped. The GPU delegate can be created and still
+ * fail on the first picture (some drivers, ANGLE/D3D11, software WebGL); then detection falls
+ * back to the CPU instead of switching itself off silently. A failed load is not kept, so
+ * switching face tracking on again retries.
+ */
+export const faceStatus: { delegate: 'GPU' | 'CPU' | null; error: string } = { delegate: null, error: '' };
+
 let detector: Promise<FaceDetector> | null = null;
-function getDetector() {
+function getDetector(delegate: 'GPU' | 'CPU' = 'GPU') {
   detector ??= (async () => {
     const base = new URL('.', location.href).href;
     const fileset = await FilesetResolver.forVisionTasks(`${base}mediapipe`);
-    const opts = (delegate: 'GPU' | 'CPU') => ({
-      baseOptions: { modelAssetPath: `${base}models/blaze_face_short_range.tflite`, delegate },
+    const opts = (d: 'GPU' | 'CPU') => ({
+      baseOptions: { modelAssetPath: `${base}models/blaze_face_short_range.tflite`, delegate: d },
       runningMode: 'VIDEO' as const, minDetectionConfidence: 0.5,
     });
-    try { return await FaceDetector.createFromOptions(fileset, opts('GPU')); } catch { return FaceDetector.createFromOptions(fileset, opts('CPU')); }
+    if (delegate === 'GPU') {
+      try { const det = await FaceDetector.createFromOptions(fileset, opts('GPU')); faceStatus.delegate = 'GPU'; return det; } catch (e) { console.warn('face tracking: GPU delegate unavailable, using CPU', e); }
+    }
+    const det = await FaceDetector.createFromOptions(fileset, opts('CPU'));
+    faceStatus.delegate = 'CPU';
+    return det;
   })();
+  detector.catch(() => { detector = null; });
   return detector;
 }
 
+/** Drop the GPU detector after a runtime failure and continue on the CPU. */
+async function fallBackToCpu(e: unknown) {
+  console.warn('face tracking: GPU detection failed, switching to CPU', e);
+  const old = detector; detector = null;
+  try { (await old)?.close(); } catch { /* already gone */ }
+  return getDetector('CPU');
+}
+
 const scratch = document.createElement('canvas');
-/** Something MediaPipe can read: the element itself or a copy of raw frames. */
-function imageOf(src: Source): TexImageSource | null {
-  if (src.element) return src.element;
+/** Raw frames are decimated to this width for detection (the model looks at 128 × 128 anyway). */
+const DETECT_W = 640;
+/**
+ * Something MediaPipe can read: the element itself or a decimated copy of raw frames, and the
+ * factor from its pixels back to source pixels.
+ */
+function imageOf(src: Source): { img: TexImageSource; scale: number } | null {
+  if (src.element) return { img: src.element, scale: 1 };
   if (!src.data) return null;
-  const w = src.width, h = src.height;
-  let px: Uint8ClampedArray;
-  if (src.yuv) {
-    const dec = src.decoder(), d = src.data;
-    px = new Uint8ClampedArray(w * h * 4);
-    for (let i = 0; i < px.length; i += 4) { const c = dec(d, i); px[i] = c[0] * 255; px[i + 1] = c[1] * 255; px[i + 2] = c[2] * 255; px[i + 3] = 255; }
-  } else if (src.depth === 8) px = new Uint8ClampedArray(src.data.buffer, src.data.byteOffset, w * h * 4);
-  else { px = new Uint8ClampedArray(w * h * 4); for (let i = 0; i < px.length; i++) px[i] = src.data[i] / 257; }
+  const step = Math.max(1, Math.ceil(src.width / DETECT_W));
+  const w = Math.floor(src.width / step), h = Math.floor(src.height / step), W = src.width;
+  const px = new Uint8ClampedArray(w * h * 4), d = src.data;
+  const dec = src.yuv ? src.decoder() : null, k = src.depth === 8 ? 1 : 1 / 257;
+  for (let y = 0; y < h; y++) {
+    for (let x = 0; x < w; x++) {
+      const i = ((y * step) * W + x * step) * 4, o = (y * w + x) * 4;
+      if (dec) { const c = dec(d, i); px[o] = c[0] * 255; px[o + 1] = c[1] * 255; px[o + 2] = c[2] * 255; }
+      else { px[o] = d[i] * k; px[o + 1] = d[i + 1] * k; px[o + 2] = d[i + 2] * k; }
+      px[o + 3] = 255;
+    }
+  }
   scratch.width = w; scratch.height = h;
   scratch.getContext('2d')!.putImageData(new ImageData(px as Uint8ClampedArray<ArrayBuffer>, w, h), 0, 0);
-  return scratch;
+  return { img: scratch, scale: step };
 }
 
 const center = (b: Box) => [(b[0] + b[2]) / 2, (b[1] + b[3]) / 2];
@@ -71,17 +102,24 @@ export function overlap(a: Box, b: Box) {
 }
 
 async function detect(s: Source): Promise<Box[]> {
-  const det = await getDetector();
-  const img = imageOf(s);
-  if (!img) return [];
+  let det = await getDetector();
+  const im = imageOf(s);
+  if (!im) return [];
+  const { img, scale } = im;
   lastTs = Math.max(lastTs + 1, performance.now());
-  const res = det.detectForVideo(img as HTMLVideoElement, lastTs);
+  let res;
+  try { res = det.detectForVideo(img as HTMLVideoElement, lastTs); } catch (e) {
+    if (faceStatus.delegate !== 'GPU') throw e;
+    det = await fallBackToCpu(e);
+    lastTs += 1;
+    res = det.detectForVideo(img as HTMLVideoElement, lastTs);
+  }
   // BlazeFace boxes run from the brows to the chin: extend upwards to include the forehead
   // (skin measurement), only a little sideways and down
   const side = 0.08, top = 0.3, bottom = 0.02;
   return res.detections.map((d) => d.boundingBox).filter((b): b is NonNullable<typeof b> => !!b).map((b) =>
     [b.originX - b.width * side, b.originY - b.height * top, b.originX + b.width * (1 + side), b.originY + b.height * (1 + bottom)]
-      .map((v, i) => Math.round(Math.max(0, Math.min(i % 2 ? s.height : s.width, v)))) as Box);
+      .map((v, i) => Math.round(Math.max(0, Math.min(i % 2 ? s.height : s.width, v * scale)))) as Box);
 }
 
 /** One-off check: the face that lies inside a hand-drawn rectangle, if any. */
@@ -107,8 +145,10 @@ export async function trackFaces(sources: Source[], onChange: () => void) {
       s.faces = matchFaces(s.faces, boxes);
       if (s.faces.map((f) => f.id).join() !== before) onChange(); // face list shows up in the UI
     }
+    faceStatus.error = '';
   } catch (e) {
     console.warn('face tracking', e);
+    faceStatus.error = e instanceof Error ? e.message : String(e);
     tracked.forEach((s) => (s.faceMode = 'off'));
     onChange();
   } finally {
 
@@ -160,4 +160,6 @@ export default {
   'panel.draw.castTowards': 'Richtung {hue}',
   'panel.draw.castNeutral': ' (neutral)',
   'panel.draw.justOutside': 'knapp außerhalb {gamut} (≤ 5 %)',
+  'panel.facesFailed': 'Gesichtserkennung angehalten: {error}. Hilfe → Feedback senden schickt die Details mit.',
+  'panel.facesCpu': 'Gesichtserkennung läuft auf dem Prozessor (die Grafikkarte hat abgelehnt) – funktioniert, etwas langsamer.',
 } satisfies Translation<typeof en>;
@@ -159,4 +159,6 @@ export default {
   'panel.draw.castTowards': 'towards {hue}',
   'panel.draw.castNeutral': ' (neutral)',
   'panel.draw.justOutside': 'just outside {gamut} (≤ 5 %)',
+  'panel.facesFailed': 'Face detection stopped: {error}. Help → Send Feedback includes the details.',
+  'panel.facesCpu': 'Face detection runs on the processor (the graphics card refused) – works, a little slower.',
 } as const satisfies Messages;
@@ -1027,8 +1027,11 @@ function panelSettings(p: PanelState): Node[] {
     if (s) {
       row(t('panel.faces'), select(s.faceMode, [['off', t('panel.offCap')], ['detect', t('panel.facesDetect')], ['all', t('panel.facesAll')]], (v) => {
         s.faceMode = v as Source['faceMode'];
-        if (s.faceMode === 'off') { s.faces = []; s.faceSel.clear(); }
+        if (s.faceMode === 'off') { s.faces = []; s.faceSel.clear(); } else { faceLoadError = ''; if (faceMod) faceMod.faceStatus.error = ''; }
         refreshHeads();      }, t('panel.facesTitle')));
+      const fe = faceLoadError || faceMod?.faceStatus.error;
+      if (fe) row('', h('p', { class: 'hint warn', role: 'alert' }, t('panel.facesFailed', { error: fe })));
+      else if (s.faceTrack && faceMod?.faceStatus.delegate === 'CPU') row('', h('p', { class: 'hint' }, t('panel.facesCpu')));
     }
   }
   if (p.scope === 'stats') {
@@ -1090,9 +1093,20 @@ function roiChip(p: PanelState): Node | string {
 }
 
 // face tracking (MediaPipe is only loaded once someone switches it on)
+let faceLoadError = '';
+let faceMod: typeof import('./face') | null = null;
+let faceTick = 0;
 setInterval(() => {
   if (!sources.some((s) => s.faceTrack)) return;
-  import('./face').then((m) => m.trackFaces(sources, refreshHeads));
+  // on the CPU (GPU delegate refused) detection costs more main-thread time: 5 instead of 10 per second
+  if (faceMod?.faceStatus.delegate === 'CPU' && faceTick++ % 2) return;
+  import('./face').then((m) => { faceMod = m; return m.trackFaces(sources, refreshHeads); }).catch((e) => {
+    // the MediaPipe module or its WASM did not load (offline browser, blocked file …)
+    console.warn('face tracking: module not loaded', e);
+    faceLoadError = (e as Error).message || String(e);
+    for (const s of sources) s.faceMode = 'off';
+    refreshHeads();
+  });
 }, 100);
 
 function toggleSolo(idx: number) {
 
@@ -0,0 +1,37 @@
+import { describe, expect, it, vi } from 'vitest';
+
+// The GPU delegate is created fine but fails on the first picture (seen on a Windows PC):
+// detection must continue on the CPU instead of switching itself off.
+const created: string[] = [];
+vi.mock('@mediapipe/tasks-vision', () => ({
+  FilesetResolver: { forVisionTasks: async () => ({}) },
+  FaceDetector: {
+    createFromOptions: async (_f: unknown, o: { baseOptions: { delegate: string } }) => {
+      const d = o.baseOptions.delegate; created.push(d);
+      return {
+        close: () => {},
+        detectForVideo: () => {
+          if (d === 'GPU') throw new Error('WebGL context lost');
+          return { detections: [{ boundingBox: { originX: 10, originY: 20, width: 100, height: 100 } }] };
+        },
+      };
+    },
+  },
+}));
+vi.stubGlobal('document', { createElement: () => ({}) });
+vi.stubGlobal('location', { href: 'http://localhost/' });
+const { trackFaces, faceStatus } = await import('../src/face');
+
+describe('face tracking fallback', () => {
+  it('falls back to the CPU when the GPU delegate fails on the first picture', async () => {
+    const src = { faceTrack: true, ready: true, element: {}, width: 1920, height: 1080, faces: [] as unknown[], faceMode: 'all' };
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    await trackFaces([src as never], () => {});
+    warn.mockRestore();
+    expect(created).toEqual(['GPU', 'CPU']);
+    expect(faceStatus.delegate).toBe('CPU');
+    expect(faceStatus.error).toBe('');
+    expect(src.faceMode).toBe('all');
+    expect(src.faces).toHaveLength(1);
+  });
+});