Как мы делаем nopa, часть 2

В первой части я обещал заглянуть под капот. Заглядываем: почему у nopa нет бэкенда, как тяжёлая работа помещается во вкладку браузера, где живёт то, что вы делаете, — и как проверить каждое слово здесь самостоятельно примерно за минуту.

Загружать некуда

Большинство сайтов с инструментами — это страница перед сервером: файл уезжает наверх, сервер делает работу, результат возвращается. nopa устроена наоборот. Сайт — это статичные файлы: HTML, JavaScript, шрифты, — и к вам едет код, а не ваш файл к нему. Когда вы объединяете два PDF, объединение идёт в вашей вкладке, и PDF её не покидает.

Поэтому же нет и аккаунта. Аккаунт нужен, чтобы хранить что-то ваше на сервере, а сервера, который что-то хранит, нет — значит, и входить некуда.

Тяжёлая работа — во вкладке

Браузер стал серьёзной машиной, и каждый инструмент берёт ту его часть, что подходит к задаче:

  • PDF: pdf-lib собирает и переписывает файл, PDF.js рисует страницы, которые вы видите. Сжимаете PDF — оба работают на вашем устройстве.
  • Фото и звук: нейросети работают в WebAssembly на ONNX Runtime. Удаление фона и расшифровка речи скачивают свою модель один раз и хранят её; ваше фото едет к модели, а не наоборот.
  • Сканы: tesseract.js читает текст отсканированной страницы в отдельном потоке. В первый раз он скачивает модель чтения на 4–5 МБ, дальше она уже на месте.
  • Файлы Word: mammoth читает .docx, а docx собирает его обратно, поэтому редактор Word открывает присланный договор и отдаёт его настоящим файлом Word.
  • Игры: jsnes запускает целую NES на JavaScript. На странице NES — две homebrew-игры, авторы которых это разрешают, и она играет ваш собственный .nes-файл, никуда его не загружая.

Цена: код должен приехать к вам

У этого есть обратная сторона. Серверный инструмент отдаёт лёгкую страницу и делает тяжёлое там, где вы не видите; нам тяжёлое приходится отправлять вам. Поэтому мы его считаем: скрипт в репозитории открывает каждую страницу в настоящем браузере и складывает JavaScript, который она скачивает до первого нажатия. Первый прогон нашёл страницы, тянувшие 1,4 МБ впустую, — вся история с цифрами в одном из прошлых постов.

С тех пор правило: движок загружается, когда нажали его кнопку. PDF-движок приезжает, когда вы открыли PDF, модель чтения — когда попросили прочитать скан. На этой неделе правило поймало ещё один случай: доска при каждом открытии скачивала PDF-библиотеку на 170 КБ ради одного пункта меню.

Где живёт ваша работа

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

Честная часть: это хранилище принадлежит этому браузеру. Очистите данные сайта — и его нет; возьмёте телефон — там его нет. Поэтому резервная копия в одном клике — весь рабочий стол одним файлом, в Настройки → Данные, — а на том же экране можно попросить браузер не стирать nopa, когда на диске кончается место.

Офлайн — после первого визита

Service worker держит копию приложения на вашем устройстве, поэтому, однажды открыв nopa, вы откроете инструменты и без сети. Заранее хранится не всё: модели нейросетей и модель чтения скачиваются, только когда они нужны инструменту, — телефону незачем держать сотню мегабайт моделей «на всякий случай».

Проверьте сами

Откройте инструменты разработчика, вкладку Network, и поработайте с любым инструментом. Вы увидите два вида запросов: наш собственный код, который приезжает с nopa.space, и статистику посещений для Яндекс Метрики и PostHog — какую страницу открыли, каким инструментом воспользовались. Вы не увидите, как ваш файл куда-то уезжает, потому что он никуда не уезжает. Блокировщик отключает статистику, и все инструменты работают так же.

Однажды мы сами здесь ошиблись. Панель на наших продуктовых страницах обещала «ни одного POST» — это мерили на сборке без статистики, а на проде счётчик шлёт свои POST. Читатель поймал бы это за десять секунд; мы поймали на этой неделе и переписали панель так, чтобы она говорила ровно то, что вы увидите.

Чего это устройство не умеет

Сервер умеет то, чего не умеет вкладка, и мы лучше скажем об этом сами:

  • Нет синхронизации. У телефона и ноутбука — каждый свой экземпляр; резервный файл переносит его, живой связи нет.
  • Нет совместной работы в реальном времени. Двум людям, правящим одну доску, нужен сервер между ними.
  • Первый запуск ИИ-инструмента ждёт, пока скачается модель.
  • Телефон медленнее дата-центра. Большинство задач — дело мгновения; час записи — дело небыстрое.

Что дальше

Если что-то ломается на вашем устройстве или нужен инструмент, которого у нас нет, — пишите на hello@nopa.space, читает живой человек. Или начните с каталога; первая часть — о том, зачем вообще nopa, — здесь.