Веб-приложение · распознавание речи · нейросеть в браузере
Голосовая заявка
Многие клиенты не хотят печатать длинную заявку и отправляют голосовое — в Telegram, в Max или на сайте. Менеджеру приходится слушать его целиком и переписывать данные руками. Здесь голос превращается в текст, из текста достаются поля, а заявка получает балл — как в боте приёма заявок. Звук никуда не отправляется: всё работает на вашем устройстве.
Сценарий: Заявки на разработку ботов и автоматизации: четыре примера — салон красоты, оптовая компания, бухгалтерия ИП и клиент, который пока присматривается.
Открыть демо
Нейросеть для распознавания речи грузится по кнопке — около 141 МБ один раз, дальше из кеша браузера. На телефоне лучше по Wi-Fi.
Приложение работает в браузере: на сервер ничего не отправляется.
Что показывает демо
Как попробовать
Начните с готового текста
У любого примера нажмите «Готовый текст» — карточка соберётся сразу, без загрузки модели.
Загрузите модель
Кнопка «Загрузить модель», затем «Распознать» у примера. Текст появится через несколько секунд — на телефоне чуть дольше.
Наговорите свою заявку
«Записать» и скажите, кто вы, что нужно, бюджет и срок. Или загрузите голосовое из мессенджера.
Проверьте карточку
Если распознавание ошиблось — например, в цифрах телефона, — поправьте поле, оценка пересчитается.
Что написать
- Меня зовут Ольга, компания «Ромашка», нужен бот для записи, бюджет двести тысяч, срок месяц
- Нужно срочно, бюджет от трёхсот до пятисот тысяч
- Пока просто присматриваюсь, сколько это стоит — не знаю
Без платных нейросетей
Распознавание настоящее: открытая модель Whisper работает в вашем браузере. Примеры озвучены синтезатором речи Piper, поэтому живой голос распознаётся иначе, а цифры телефона Whisper иногда путает — поля можно поправить. Поля из текста здесь достают правила, те же, что в демо-боте заявок. В рабочем проекте этот шаг делает языковая модель по JSON-схеме: она понимает и «к началу сезона», и «тысяч сто пятьдесят».
Демо работает без API-ключей OpenAI, YandexGPT или GigaChat. Там, где рабочая система обращается к модели, стоит локальная заглушка с тем же интерфейсом — поэтому демо бесплатно, всегда доступно и ничего не выдумывает.
Что будет в рабочем проекте
- Голосовые из Telegram и Max: бот сам распознаёт сообщение и присылает менеджеру карточку
- Whisper на своём сервере или облачное распознавание — по требованиям к хранению данных
- Языковая модель (GPT, Claude, YandexGPT или GigaChat) вытаскивает поля по JSON-схеме
- Заявка с оценкой и записью разговора — в amoCRM или Bitrix24
Стек
- Все демо по стеку:
- React
- TypeScript
- Нейросеть в браузере
- React 19
- TypeScript
- Whisper
- Transformers.js
- Web Workers
- MediaRecorder
- Zustand
- Vite
Основано на
Книги и дисциплины, идеи из которых работают в этом демо.
Дисциплина · ВМК МГУ
Операционные системы
Распознавание речи Whisper работает в фоновом потоке Web Worker, чтобы интерфейс не зависал.
Комментарий от разработчика
Антон Гончаров
Разработчик ИИ-систем · Python
Для бизнеса
- Голосовые клиентов больше не нужно слушать целиком и переписывать: менеджер получает карточку с полями и оценкой.
- Звук никуда не уходит — распознавание идёт прямо на устройстве.
- Горячая заявка из голосового попадает в работу так же быстро, как из формы.
Для разработчиков
- Whisper base через Transformers.js в Web Worker на WASM. Модель грузится по кнопке с нашего сервера, около 141 МБ один раз.
- Запись — MediaRecorder, звук декодируется и приводится к формату, который ждёт Whisper, ещё в браузере.
- Поля и оценка — те же правила, что у бота квалификации лидов: одна логика для текста и голоса.
Советы
Совет 01
Цифры — слабое место распознавания: телефон и сумму всегда показывайте редактируемыми полями.
Совет 02
Для потока голосовых ставьте Whisper на свой сервер; в браузере он хорош для приватных случаев и демо.
Нужен такой же для вашего бизнеса?
Расскажите о задаче — отвечу, что из демо подойдёт вам, сколько это займёт и что понадобится с вашей стороны.
Другие демо в этом разделе
Все демо- работает
Веб-приложение · звонок в браузере · распознавание и синтез речи
Голосовой оператор доставки
Робот принимает заказы по телефону вместо администратора: слушает, переспрашивает, проверяет адрес по зонам доставки, считает сумму и читает заказ перед подтверждением. Звонок идёт прямо в браузере — кнопка «Позвонить», без номера телефона.
- React
- TypeScript
- Нейросеть в браузере
- работает
Веб-приложение · распознавание речи · контроль отдела продаж
Речевая аналитика звонков
Звонок отдела продаж превращается в расшифровку по ролям, оценку по скрипту и заполненную карточку сделки: клиент, контакты, интерес, озвученная цена, следующий шаг и задача менеджеру. Речь распознаёт Whisper прямо в браузере.
- React
- TypeScript
- Нейросеть в браузере
- работает
Веб-приложение · документы · DOCX и PDF
Генератор КП и договора
Менеджер заполняет анкету сделки — покупатель, товары, скидка, НДС, — а коммерческое предложение, договор поставки и счёт собираются на листе A4 на глазах. На выходе — Word, PDF или JSON.
- React
- TypeScript
- работает
Веб-приложение · B2B · КП в PDF
Конфигуратор цены
Менеджер собирает заказ на все окна квартиры: тип, размер, створки на схеме, профиль, стеклопакет и цвет. Правила производства проверяются сразу, скидки и рассрочка считаются сами, КП с номером уходит в PDF.
- React
- TypeScript
- работает
Веб-приложение · финансы · сравнение
Ипотечный калькулятор
Пять программ банков на одном экране: какие подходят клиенту и почему остальные нет. Льготная ставка от застройщика, дифференцированный платёж, досрочное погашение, нагрузка на доход и налоговый вычет.
- React
- TypeScript
- работает
Веб-приложение · смета · PDF
Калькулятор сметы ремонта
Размеры комнат превращаются в площади пола, стен и потолка, а те — в работы по этапам. Работа и материалы отдельно, срок по выработке бригады, график оплаты и версии сметы для торга с клиентом.
- React
- TypeScript
- работает
Веб-приложение · витрина · чекаут · заказы
SPA-каталог на React
Магазин целиком в браузере: поиск с подсказками и исправлением раскладки, фасеты с живыми счётчиками, ссылки на любой фильтр, избранное, корзина с промокодом и чекаут с выбором слота доставки. Заказы видны в «Моих заказах» со статусами, их можно повторить или отменить.
- React
- TypeScript
- работает
Машинное обучение на Python · работает в браузере
Аналитика отзывов с маркетплейсов
Отзывы с Wildberries, Ozon и Яндекс Маркета через API продавца: модели scikit-learn определяют тональность и о чём пишут покупатели, тревога поднимается в первую неделю всплеска жалоб, новые темы находятся сами, а ответ уходит обратно через API площадки. Модели обучаются прямо в браузере.
- Python
- React
- TypeScript
- работает
Виджет для сайта · нативный JS · одна строка
Виджет AI-консультанта
Консультант для любого сайта, который ставится одной строкой: отвечает по базе знаний со ссылкой на источник, собирает заявку и зовёт оператора. Написан на чистом JavaScript без фреймворков — весь виджет 21 КБ в gzip.
- Нативный JS
- работает
Виджет для сайта · нативный JS · заявки
Квиз-форма заявки
Квиз вместо длинной формы: шесть вопросов с ветвлением, в конце — расчёт по прайсу. Менеджер получает заявку с оценкой «горячая / тёплая / холодная» и источником рекламы, а вкладка «Аналитика» показывает, на каком шаге уходят люди.
- Нативный JS
- работает
Backend на Python · вебхуки → amoCRM и Битрикс24
Интеграционный хаб заявок
Заявки с сайта, из рекламы, звонков, почты и ботов приходят на вебхуки, приводятся к одному виду, проверяются на дубли, распределяются по менеджерам и доставляются в amoCRM и Битрикс24 — с повторами, когда CRM недоступна.
- Python
- React
- TypeScript