Dion Background Lab

Хакатонный прототип динамической замены фона для видеозвонков. Проект был подготовлен для хакатона T1 и занял 3 место.

Идея близка к виртуальным фонам в Zoom, но ориентирована на сценарий корпоративной видеосвязи в Dion от T1: пользователь включает камеру, приложение отделяет человека от фона в реальном времени и заменяет фон на цвет, размытие, изображение или видео.

Возможности

• обработка изображения с веб-камеры прямо в браузере;
• сегментация человека с помощью TensorFlow.js-модели;
• режимы фона:
  • оригинальное видео без обработки;
  • однотонный цвет;
  • размытие реального фона;
  • автоматический цвет по окружению;
  • предустановленные изображения;
  • пользовательские изображения и видео;
• настраиваемая сила размытия;
• оверлей приватности с данными сотрудника из employee.json;
• счетчики FPS и времени обработки кадра для быстрой оценки производительности.

Как это работает

Приложение является статическим сайтом без backend-части.

1. Браузер получает поток с веб-камеры через navigator.mediaDevices.getUserMedia.
2. TensorFlow.js загружает модель из папки model/.
3. Каждый кадр проходит через модель сегментации.
4. Canvas собирает итоговое изображение: выбранный фон + вырезанный человек + приватный оверлей.
5. UI позволяет переключать режимы и загружать собственные фоны.

Структура проекта

.
├── index.html              # Разметка приложения
├── style.css               # Стили интерфейса
├── app.js                  # Инициализация камеры, модели и UI-состояния
├── scripts.js              # Рендеринг canvas, анализ цвета и оверлей приватности
├── employee.json           # Демонстрационные данные сотрудника
├── background/
│   ├── index.json          # Список встроенных фонов
│   └── *.png               # Изображения фонов
├── docs/
│   └── architecture.md     # Подробности архитектуры и потока данных
├── model/
│   ├── model.json          # TensorFlow.js graph model
│   └── *.bin               # Веса модели
├── Dockerfile              # Сборка статического контейнера
├── nginx.conf              # Конфигурация nginx для контейнера
└── package.json            # Локальные команды запуска

Быстрый запуск

Проект нужно открывать через HTTP-сервер. При открытии index.html напрямую из файловой системы браузер может заблокировать загрузку модели и JSON-файлов.

Через Node.js

npm install
npm start

После запуска откройте:

http://localhost:3000

Через Python

python3 -m http.server 8000

После запуска откройте:

http://localhost:8000

Запуск в Docker

Собрать образ:

docker build -t dion-background-lab .

Запустить контейнер:

docker run --rm -p 8080:80 dion-background-lab

После запуска откройте:

http://localhost:8080

То же самое через npm-скрипты:

npm run docker:build
npm run docker:run

Настройка данных сотрудника

Файл employee.json управляет текстом приватного оверлея:

• full_name - имя сотрудника;
• position - должность;
• company - компания;
• department - подразделение;
• office_location - локация;
• contact - контакты;
• branding - демонстрационные бренд-данные;
• privacy_level - уровень приватности по умолчанию: low, medium или high.

Добавление встроенных фонов

1. Положите изображение в папку background/.
2. Добавьте имя файла в background/index.json.
3. Перезапустите HTTP-сервер или обновите страницу.

Пример:

[
  "bg1.png",
  "bg2.png",
  "bg3.png",
  "office.png"
]

Ограничения прототипа

• камера работает только в защищенном контексте: localhost или HTTPS;
• производительность зависит от устройства, браузера и размера модели;
• TensorFlow.js подключается с CDN, поэтому для первого запуска нужен интернет;
• текущая версия является демо-прототипом и не интегрирована напрямую в клиент Dion;
• данные в employee.json демонстрационные.

Технологии

• HTML, CSS, JavaScript;
• TensorFlow.js;
• Canvas API;
• Docker + nginx для статической раздачи.

Дополнительная документация

• Architecture - поток данных, роли файлов и ограничения прототипа.

Контекст

Проект создавался как хакатонное решение для T1. Основной фокус был на демонстрации real-time computer vision в браузере: сегментации пользователя, замене фона и сценариях приватности для корпоративной видеосвязи.