[web] Голосовой ввод в чате: запись → проверка распознанного текста → отправка #117

New Issue

2026-10-31T11:10:14+03:00

Eleboba commented

2026-10-31 11:10:14 +03:00

Описание

Часть эпика «Демо к гранту ВШЭ и пилоту „Династия“». UI голосового ввода по слайду 11: 1 Записать → 2 Проверить → отправить. Зависит от backend-ручки /me/{token}/stt.

Желаемый результат

В поле свободного текста (FreeText в web/src/screens/Flow.tsx, чат и шаги дневника) появляется кнопка микрофона. Показывается только при capabilities.voice_input.
Во время записи видны волна или индикатор уровня, таймер 00:24 и кнопка «Остановить запись», как на макете слайда 11. Лимит 60 с, затем автостоп.
После остановки: «Распознаю…», затем текст вставляется в поле ввода для проверки и правки. Подпись: «Видят только специалисты вашей программы». Пациент отправляет текст сам, автоотправки нет.
Запись кодируется в браузере в WAV 16 кГц mono: getUserMedia → AudioContext/AudioWorklet → ресемплинг → WAV. Должно работать в Chrome, Android и iOS Safari.
Ошибки: нет доступа к микрофону, сеть, 422. Каждая даёт понятный тост, и остаётся возможность написать текстом.
Тексты лежат в web/src/content/ru.ts.

Подзадачи

web/src/voice/recorder.ts: запись, ресемплинг, WAV-энкодер, лимит
web/src/components/VoiceButton.tsx: состояния idle, recording, transcribing, error
web/src/api/client.ts: transcribe(token, blob)
интеграция в FreeText (Flow.tsx)
тексты в ru.ts

Анализ

Ограничения и риски

getUserMedia работает только в secure context (https или localhost). Для демо на сервере нужен https, проверить nginx в web/nginx.conf.
Аудио не хранится на клиенте после отправки, blob освобождается.
Кризисная лексика в голосе обрабатывается так же, как в тексте: safety срабатывает при отправке текста. Автоотправку не добавляем.

Как проверить

make up → вход Андреем → чат → микрофон → сказать фразу → текст в поле → исправить → отправить → ответ агента. Проверить на телефоне в Safari.

2026-10-31

Что сделано: recorder.ts (WAV 16 кГц в браузере), VoiceInput в чате и шагах со свободным текстом, nginx 4 МБ. PR #124.
Результат: сквозной прогон в headless Chromium с фейковым микрофоном → живой OpenRouter → текст в поле за ~3–5 с. Осталось проверить на живом iPhone.

## Описание Часть эпика «Демо к гранту ВШЭ и пилоту „Династия“». UI голосового ввода по слайду 11: **1 Записать → 2 Проверить → отправить**. Зависит от backend-ручки `/me/{token}/stt`. ## Желаемый результат - В поле свободного текста (`FreeText` в `web/src/screens/Flow.tsx`, чат и шаги дневника) появляется кнопка микрофона. Показывается только при `capabilities.voice_input`. - Во время записи видны волна или индикатор уровня, таймер `00:24` и кнопка «Остановить запись», как на макете слайда 11. Лимит 60 с, затем автостоп. - После остановки: «Распознаю…», затем текст **вставляется в поле ввода** для проверки и правки. Подпись: «Видят только специалисты вашей программы». Пациент отправляет текст сам, автоотправки нет. - Запись кодируется в браузере в WAV 16 кГц mono: `getUserMedia` → AudioContext/AudioWorklet → ресемплинг → WAV. Должно работать в Chrome, Android и iOS Safari. - Ошибки: нет доступа к микрофону, сеть, 422. Каждая даёт понятный тост, и остаётся возможность написать текстом. - Тексты лежат в `web/src/content/ru.ts`. ## Подзадачи - [ ] `web/src/voice/recorder.ts`: запись, ресемплинг, WAV-энкодер, лимит - [ ] `web/src/components/VoiceButton.tsx`: состояния idle, recording, transcribing, error - [ ] `web/src/api/client.ts`: `transcribe(token, blob)` - [ ] интеграция в `FreeText` (Flow.tsx) - [ ] тексты в `ru.ts` ## Анализ ### Ограничения и риски - `getUserMedia` работает только в secure context (https или localhost). Для демо на сервере нужен https, проверить nginx в `web/nginx.conf`. - Аудио не хранится на клиенте после отправки, blob освобождается. - Кризисная лексика в голосе обрабатывается так же, как в тексте: safety срабатывает при отправке текста. Автоотправку не добавляем. ## Как проверить `make up` → вход Андреем → чат → микрофон → сказать фразу → текст в поле → исправить → отправить → ответ агента. Проверить на телефоне в Safari. ### 2026-10-31 - **Что сделано:** `recorder.ts` (WAV 16 кГц в браузере), `VoiceInput` в чате и шагах со свободным текстом, nginx 4 МБ. PR #124. - **Результат:** сквозной прогон в headless Chromium с фейковым микрофоном → живой OpenRouter → текст в поле за ~3–5 с. Осталось проверить на живом iPhone.

v_2_recording.png

41 KiB