Семь браузерных инструментов без сервера: WASM, WebGPU, шифрование на клиенте

от автора

Запись в Notion — и текст на чужом сервере. Задачи в облачном планировщике — данные в чужой аналитике.

Волна локальных LLM показала широкой аудитории, что on-device — это реально. Модель работает, данные не покидают машину. RAG в indexeddb — кто так не делал?

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

Я доделал свои 7 pet-проектов. Все работают целиком в браузере, без сервера, без регистрации, без отправки данных куда-либо. Только локальное хранилище, шифрование на стороне клиента и нативные браузерные API.

IDEF0-редактор для функциональных диаграмм

IDEF0 — простейший стандарт описания бизнес-процессов, разработанный в ВМФ США для описания производства. Им легко описывать любые бизнес-процессы верхнеуровнево. Для более детальной проработки — BPMN подойдет лучше. Когда компания рисует схему «как мы обрабатываем заявки» или «как устроена цепочка согласований» — это внутренняя кухня, которую не хочется отправлять в чужое облако. При этом специализированного браузерного редактора IDEF0 до сих пор не было вообще. Стандарт нишевой, и в универсальных рисовалках он превращается в набор прямоугольников без стандартизации. Я говорил об этом стандарте на архитектурном митапе в Альфа-Банке.

Редактор знает правила стандарта и проверяет диаграмму на лету. Неправильно подключённая стрелка подсвечивается прямо на схеме, как ошибка компилятора. Крупный блок можно «провалить» вглубь и расписать подробнее, так строится иерархия процессов. Готовая диаграмма выгружается в SVG, PNG или JSON.

Под капотом

SVG + Vue 3, строго по американскому федеральному стандарту FIPS 183. Валидация ICOM-правил даёт каждой стрелке строгую семантику. Вход слева, управление сверху, выход справа, механизм снизу. Данные хранятся в IndexedDB браузера, открытые вкладки синхронизируются между собой через localStorage.

→ IDEF0-редактор | Разбор архитектуры

Зашифрованный дневник в браузере

Большинство дневниковых приложений хранят записи в облаке разработчика и берут за это деньги. Day One синхронизирует через свои серверы, Notion индексирует всё, что в него попадает. Для текста, который пишется только для себя, это странная архитектура.

Этот дневник открывается паролем и мотивирует писать 500 слов в день, счётчик прогресса ведётся сам. Прошлые записи доступны в том же интерфейсе. Переносить между девайсами можно с помощью функций Импорт/Экспорт, наружу уходит только зашифрованный файл.

Под капотом

Шифрование AES-GCM, ключ выводится из пароля через PBKDF2 в 600 тысяч итераций и существует только в памяти открытой вкладки. Вкладка закрыта — с устройства взять нечего. В IndexedDB лежит только зашифрованный конверт { salt, iterations, iv, ciphertext }, всё в base64. Открытого текста на диске нет. Расшифровка происходит только после ввода пароля.

→ Дневник

Тренажёр фортепиано с MIDI-клавиатурой

Для разучивания пьес нужна мгновенная обратная связь, та нота сыграна или не та. Synthesia делает это давно, но это нативное приложение, которое надо ставить и покупать.

Здесь достаточно подключить MIDI-клавиатуру по USB, браузер увидит её сам, без программ и драйверов. На экране ноты, приложение в реальном времени сверяет сыгранное с партитурой. Режимов два, повтор такта для разучивания и проигрыш фразы целиком для шлифовки. Свои пьесы можно импортировать в форматах MusicXML, ABC и MIDI.

Под капотом

Web MIDI API нативно поддерживается в Chrome и Edge. Ноты рендерит OpenSheetMusicDisplay через MusicXML. MIDI-импорт читает тактовый размер из файла; если размера там нет, приложение спросит его перед разбором. Safari не поддерживает Web MIDI API, Firefox держит его под флагом в настройках.

→ Piano Teacher

Редактор поз OpenPose для ControlNet

В работе со Stable Diffusion ControlNet принимает скелет OpenPose как условие для управления позой персонажа. Обычно скелет готовят в AUTOMATIC1111 или ComfyUI, а это локальные Python-инструменты с отдельной установкой. Онлайн-редакторы на Hugging Face работают через их серверы, изображения туда уходят.

Здесь всё проще. Загружаете фото, хоть пачкой, и скелет распознаётся прямо в браузере, до двух человек на кадре. Точки поправляются мышью, людей можно добавлять и убирать. На выходе PNG с чёрным фоном для ControlNet и JSON в формате OpenPose. Фотографии при этом никуда не отправляются.

Под капотом

MediaPipe BlazePose работает в браузере как WASM, без серверных вызовов. 33 ключевые точки BlazePose конвертируются в 18 точек COCO OpenPose (шея вычисляется как середина плеч, в BlazePose такой точки нет). JSON соответствует формату OpenPose v1.3 с нормализованными координатами 0-1. Модель весит ~10,8 МБ и загружается при старте с этого же сайта, не с чужого сервера.

→ OpenPose Editor

Планировщик задач

База обычная. Проекты, задачи, приоритеты, сроки, канбан-доска и список. Шифрование то же, что в дневнике, ключ живёт только в памяти сессии. Приватные заметки к задачам не покидают зашифрованное хранилище никогда.

Отдельная возможность — совместная работа с AI-агентом. Планировщик кладёт задачи в обычный файл на диске, и агент вроде Claude Code может читать и править их вместе с вами, не зная пароля и не видя приватных заметок.

Под капотом

Мост работает через File System Access API (только Chrome и Edge). В выбранную папку пишется plaintext tasks.json, структура данных без заметок. При фокусе окна приложение перечитывает файл и сливает изменения по принципу last-write-wins, побеждает задача с большим updatedAt. Отсутствие задачи в файле не считается удалением, устаревший файл не сотрёт данные.

→ Планировщик

Трекер решений

Самый нишевый из семи. Решение фиксируется в момент принятия. Контекст, варианты, выбор, ожидаемый исход, уверенность в процентах, дата пересмотра. Когда дата наступает, приложение спросит, сбылось или нет. Из накопленных ответов складывается таблица вида «заявлено 70% уверенности, сбылось X%».

Смысл не в угадывании, а в обратной связи. Насколько субъективные оценки соответствуют реальности. Уверенность «на 90%» в событиях, которые сбываются в 60% случаев, — полезный факт о собственном мышлении.

Локальных аналогов практически нет. Существующие инструменты для отслеживания решений — либо тетрадь, либо корпоративные платформы для командных ретроспектив. Приватный зашифрованный журнал с калибровочной статистикой — пустующая ниша.

Под капотом

Калибровка считается оценкой Брайера, где 0 — идеальная калибровка, а 0.25 — уровень подбрасывания монетки. Плюс разбивка по корзинам уверенности. Хранение и шифрование те же, что в дневнике и планировщике.

→ Трекер решений

AR Engine, аудиовизуализатор на WebGPU

Задача — не просто слышать звук, а видеть его структуру. Где бас, где атака, насколько «яркий» тембр в данный момент.

Бросаете трек в окно или шарите вкладку с яндекс-музыкой, и музыка превращается в живую графику. Плазма, узоры Хладни, «зрачок», расширяющийся на каждый удар, и авторежим, который переключает картины в такт. Бас, высокие и атаки двигают разные части картинки независимо.

Под капотом

Аудиоанализ написан на C и собран в WASM через Emscripten. FFT, четыре полосы RMS-огибающих (суб, бас, мид, высокие), детектор битов по спектральному потоку, спектральный центроид. JS читает структуру AudioFrame из 13 чисел прямо из WASM-кучи каждый кадр, без сериализации между слоями. Рендеринг построен на compute shaders WebGPU, до 500 тысяч частиц; на слабом железе число автоматически снижается до 300k или 150k. WebGPU начинался как «только Chrome 113+», за последний год подтянулись Safari 26 и Firefox на Windows; самый предсказуемый вариант всё ещё Chrome.

→ AR Engine (Chrome 113+, WebGPU) | Разбор архитектуры

Все семь инструментов сделаны для личного использования, отсюда их форма. Без регистрации, без мультитенантности, без монетизации. Только браузерные API, шифрование на клиенте и данные, которые не уходят с устройства.

Честности ради, у local-first есть цена. IndexedDB — хранилище браузера, и браузер вправе его почистить. Поэтому в каждом инструменте есть экспорт в файл. Бэкапы — ответственность пользователя, а не чьего-то облака.

Это инженерный размен. Меньше чужих серверов, больше собственной ответственности. Поскольку нет ни продуктовой аналитики, ни метрик, ни мониторинга, а основной пользователь — сам разработчик. Прошу — если что-то не работает, сообщите мне. Я поправлю.

Является репостом из моего блога.

ссылка на оригинал статьи https://habr.com/ru/articles/1047200/