LeafPace: PWA для пробежек по зелёным маршрутам с ИИ прямо на устройстве

LeafPace — прогрессивное веб-приложение (PWA) для бегунов, ходоков и туристов, которое строит маршруты-петли через зелёные зоны и отдаёт их на часы или в сторонние приложения. Автор описывает проект как заявку на Hacktoberfest Open-Source AI Challenge (Week 1: Touch Grass).

Ключевая идея, которую подчёркивает разработчик: экран должен занимать минимум времени — «30 секунд на телефоне → 45 минут на тропе».

Как работает маршрутизация

По описанию автора, пользователь выбирает:

• тип активности — бег, ходьба или поход;

• дистанцию — от 1 до 15 км;

• «зелёный» приоритет — Dense Canopy / Park Hopper / Dirt Trail.

Дальше приложение ищет реальные парки, лесные массивы и природные резерваты через OpenStreetMap, строит петлю и привязывает её к пешеходной сети (OSRM foot, с Valhalla как резервным движком). Автор противопоставляет это обычным навигаторам, которые, по его словам, ведут по самому шумному асфальту.

Солнце и тень

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

Экспорт GPX и «убери телефон»

Одним нажатием формируется файл GPX 1.1 (по описанию — 200–300 трекпоинтов) для Garmin, Apple Watch, Strava, Organic Maps или прямой отправки на часы. После экспорта экран тускнеет и предлагает убрать телефон в карман.

Приватность и архитектура

Заявленная особенность — отсутствие бэкенда: GPS-координаты не покидают устройство. Все сетевые обращения (OSM Overpass, Nominatim, OSRM/Valhalla) описаны как запросы к публичным API, не привязанные к местоположению пользователя, а ИИ работает полностью на устройстве.

ИИ на устройстве

Ядро — открытые модели, запускаемые на GPU телефона через WebLLM (WebGPU):

• модель SmolLM2-360M-Instruct (квантованная, ~250 МБ в кэше браузера);

• её можно заменить на Qwen2.5-0.5B/1.5B-Instruct, поменяв одну константу в src/services/webgpu-llm.ts;

• приложение собирает структурированный JSON-дайджест (активность, дистанция, пройденные зелёные зоны, тип покрытия, угол солнца, время суток) и превращает его в трёхчастный «брифинг натуралиста»: акцент на листве, советы по покрытию и настрою;

• если WebGPU недоступен или модель ещё не скачана, срабатывает детерминированный шаблонный генератор — «бюджет 30 секунд священен»;

• после кэширования весов в IndexedDB брифинги работают офлайн.

Геопространственный конвейер

Вокруг модели — открытый стек: Overpass API и Nominatim (поиск зелёных зон), OSRM foot и Valhalla (привязка к пешеходным путям), SunCalc (солнечная геометрия) и собственный сериализатор GPX 1.1.

Автор отдельно отмечает устойчивость поиска зелёных зон: приложение параллельно опрашивает три зеркала Overpass, при отсутствии ответа за 2,5 секунды переключается на Nominatim, повторяет попытки и только затем использует синтетические парки. В сниппете приведён фрагмент кода с firstSuccess([overpassWave, nominatimWave]).

Стек и тестирование

• React 18 + TypeScript + Vite + Tailwind

• Leaflet

• @mlc-ai/web-llm (ленивая загрузка)

• SunCalc

• Vitest

• собственный smoke-тест на CDP (scripts/smoke.mjs), который гоняет реальное приложение в headless Chromium: подстановка GPS, синтез маршрута, скачивание GPX и валидация XML.

Ссылки

• Демо: https://big0boy.github.io/LeafPace/ (GitHub Pages)

• Репозиторий: https://github.com/Big0boy/LeafPace

• Первоисточник: https://dev.to/big0boy/leafpace-touch-grass-516l

Что стоит проверить

Все технические детали выше — со слов автора в посте на DEV.to. Перед публикацией имеет смысл самостоятельно проверить работу демо, реальные размеры моделей, поведение при отсутствии WebGPU и лицензии используемых данных и зависимостей.