Перейти к содержимому
Антон ГончаровРазработчик ИИ-систем

Веб-приложение · звонок в браузере · распознавание и синтез речи

Голосовой оператор доставки

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

Сценарий: «Печь» — вымышленный ресторан в Екатеринбурге, тот же, что на демо-сайте: 22 блюда из меню, три зоны доставки с минимальной суммой и платной доставкой, улицы по зонам, доставка с 12:00 до 22:30.

Скриншот демо: Голосовой оператор доставки

Открыть демо

Нейросеть для распознавания речи грузится при первом звонке — около 141 МБ один раз, дальше из кеша браузера. Без микрофона можно писать оператору текстом.

Приложение работает в браузере: на сервер ничего не отправляется.

Что показывает демо

  • Звонок в браузере: оператор здоровается, слушает и отвечает голосом, конец фразы определяется по паузе

  • Распознавание Whisper на устройстве — без серверов, ключей и отправки звука в Google

  • Заказ целиком: блюда и количество, замены («вместо морса лимонад»), вопросы о цене, адрес, телефон и способ оплаты

  • Адрес проверяется по зонам: время доставки, минимальная сумма, платная доставка и порог бесплатной

  • Оператор читает заказ и сумму перед подтверждением и называет номер заказа

  • Перебивание голосом, переспрос неясной фразы, передача звонка человеку на третий раз или по просьбе

  • Задержка каждого ответа по частям: пауза, распознавание, логика, старт голоса

Как попробовать

  1. Позвоните

    Нажмите «Позвонить» и разрешите микрофон. При первом звонке загрузится модель распознавания, затем оператор поздоровается.

  2. Закажите голосом

    Скажите, что хотите: «две маргариты и морс». Можно спросить цену, заменить блюдо или убрать лишнее, затем «это всё».

  3. Назовите адрес, телефон и оплату

    Улицу и дом, номер — лучше по одной цифре, оплату — картой курьеру, наличными или по СБП. Заказ справа собирается по ходу разговора.

  4. Подтвердите заказ

    Оператор прочитает заказ и сумму. Скажите «да, всё верно» — и получите номер заказа. Без микрофона те же фразы можно нажимать или писать.

Что написать

  • Две маргариты и морс
  • Сколько стоит рибай?
  • Вместо морса лимонад
  • Улица Малышева, дом 5, квартира 12
  • Картой курьеру

Без платных нейросетей

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

Демо работает без API-ключей OpenAI, YandexGPT или GigaChat. Там, где рабочая система обращается к модели, стоит локальная заглушка с тем же интерфейсом — поэтому демо бесплатно, всегда доступно и ничего не выдумывает.

Что будет в рабочем проекте

  • Звонок на обычный номер: Asterisk и SIP-оператор, оператор отвечает на любое число линий
  • Whisper на своём сервере с видеокартой, синтез речи Silero или Piper — без облачных сервисов
  • Локальная языковая модель через Ollama или vLLM ведёт разговор, сумму и зону считает код
  • Заказ — в iiko, r_keeper или Telegram кухни, СМС клиенту со ссылкой на оплату

Стек

  • React 19
  • TypeScript
  • Whisper
  • Transformers.js
  • Web Workers
  • Web Audio
  • Web Speech Synthesis
  • Zustand
  • Vite

Нужен такой же для вашего бизнеса?

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

Другие демо в этом разделе

Все демо
  • Веб-приложение · распознавание речи · нейросеть в браузере

    работает

    Голосовая заявка

    Клиент наговаривает заявку голосом, а менеджер получает готовую карточку: имя, компания, телефон, бюджет, сроки, задача и оценка — горячий лид или нет. Речь распознаёт 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