Удаляем фон и пикселизуем лица в браузере: ONNX Runtime, MediaPipe и ловушки Service Worker

В статье на Habr ML автор демонстрирует, как реализовать два популярные задачи компьютерного зрения – удаление фона и замыливание (пикселизация) лиц – полностью в браузере. Для первой задачи используется модель silueta, упакованная в формат ONNX и запускаемая через ONNX Runtime Web. Для второй – BlazeFace из набора MediaPipe Tasks Vision. Оба решения работают на клиенте, поэтому ни один пиксель не покидает устройство пользователя, что повышает конфиденциальность и уменьшает нагрузку на сервер.

Автор подробно описывает процесс загрузки 43‑МБ модели silueta: реализован прогресс‑бар, который читает файл частями через fetch и сохраняет в IndexedDB, после чего модель импортируется динамически. Для MediaPipe используется готовый Web‑API, но вместо размытия лица выбран метод пикселизации – он проще реализуется на GPU и сохраняет более естественный вид при низком разрешении.

Особое внимание уделено «граблям» Service Worker. При кэшировании .mjs и .wasm файлов через Service Worker динамический import() начинает бросать ошибку Failed to evaluate script из‑за некорректного MIME‑типа. Решение – явно указывать type: 'module' и избегать кэширования WASM‑модулей, либо использовать Cache-Control: no-store.

В результате получаем полностью клиентскую pipeline: пользователь загружает страницу, модель скачивается с индикатором прогресса, а затем в реальном времени удаляется фон и пикселизуются лица на видеопотоке. Такой подход открывает новые возможности для приватных веб‑приложений, онлайн‑видеочатов и интерактивных AR‑эффектов без серверных затрат.