Web app · speech recognition · neural network in the browser
Voice request
Many customers don’t want to type a long request and send a voice message — in Telegram, Max or on the website. The manager has to listen to all of it and copy the data by hand. Here the voice becomes text, fields are extracted from the text, and the request gets a score — as in the lead qualification bot. The audio isn’t sent anywhere: everything runs on your device.
Scenario: Requests for bot and automation development: four examples — a beauty salon, a wholesale company, a sole proprietor’s accounting and a customer who is just looking around.
Open the demo
The speech recognition neural network loads on a button press — about 141 MB once, then from the browser cache. On a phone, Wi-Fi is better.
The app runs in your browser: nothing is sent to a server.
What the demo shows
How to try it
Start with the ready text
Press “Ready text” on any example — the card is assembled immediately, without loading the model.
Load the model
The “Load model” button, then “Recognize” on an example. The text appears in a few seconds — a bit longer on a phone.
Dictate your own request
“Record” and say who you are, what you need, the budget and the timeline. Or upload a voice message from a messenger.
Check the card
If recognition made a mistake — for example, in the phone digits — correct the field and the score is recalculated.
What to write
- My name is Olga, Romashka company, we need a booking bot, budget two hundred thousand, one month
- It’s urgent, budget from three to five hundred thousand
- Just looking around for now, I don’t know how much it costs
No paid neural networks
Recognition is real: the open Whisper model runs in your browser. The examples are voiced by the Piper speech synthesizer, so a live voice is recognized differently, and Whisper sometimes mixes up phone digits — the fields can be corrected. Fields are extracted from the text by rules, the same as in the lead demo bot. In a production project this step is done by a language model with a JSON schema: it understands both “by the start of the season” and “a hundred and fifty thousand or so”.
The demo runs without OpenAI, YandexGPT or GigaChat API keys. Wherever a production system calls a model, there’s a local stub with the same interface — so the demo is free, always available and never makes things up.
What a production project adds
- Voice messages from Telegram and Max: the bot recognizes the message itself and sends the manager a card
- Whisper on your own server or cloud recognition — depending on data storage requirements
- A language model (GPT, Claude, YandexGPT or GigaChat) extracts fields with a JSON schema
- The request with a score and the recording goes to amoCRM or Bitrix24
Stack
- All demos by stack:
- React
- TypeScript
- In-browser neural network
- React 19
- TypeScript
- Whisper
- Transformers.js
- Web Workers
- MediaRecorder
- Zustand
- Vite
Based on
Books and university courses whose ideas are at work in this demo.
University course · CMC MSU
Operating Systems
Whisper speech recognition runs in a background Web Worker thread so the interface doesn’t freeze.
Developer’s comment
Anton Goncharov
AI systems developer · Python
For business
- Customers’ voice messages no longer need to be listened to in full and retyped: the manager gets a card with fields and a score.
- The audio goes nowhere — recognition happens right on the device.
- A hot lead from a voice message gets into the pipeline as quickly as one from a form.
For developers
- Whisper base via Transformers.js in a Web Worker on WASM. The model loads on a button press from our server, about 141 MB once.
- Recording uses MediaRecorder; the audio is decoded and converted to the format Whisper expects while still in the browser.
- Fields and the score use the same rules as the lead qualification bot: one logic for text and voice.
Tips
Tip 01
Numbers are the weak spot of speech recognition: always show the phone and amount as editable fields.
Tip 02
For a stream of voice messages, run Whisper on your own server; in the browser it’s good for private cases and demos.
Want the same for your business?
Tell me about your task — I’ll tell you what from the demo fits, how long it will take and what I’ll need from you.
Other demos in this section
All demos- live
Web app · call in the browser · speech recognition and synthesis
Voice delivery operator
A robot takes phone orders instead of the host: it listens, asks again, checks the address against delivery zones, totals the order and reads it back before confirming. The call runs right in the browser — a “Call” button, no phone number.
- React
- TypeScript
- In-browser neural network
- live
Web app · speech recognition · sales team quality control
Call speech analytics
A sales call becomes a transcript by role, a score against the script and a completed deal card: customer, contacts, interest, the quoted price, the next step and a task for the manager. Speech is recognized by Whisper right in the browser.
- React
- TypeScript
- In-browser neural network
- live
Web app · documents · DOCX and PDF
Proposal and contract generator
A manager fills in a deal form — buyer, products, discount, VAT — and the commercial proposal, supply contract and invoice are assembled on an A4 page before their eyes. The output is Word, PDF or JSON.
- React
- TypeScript
- live
Web app · B2B · proposal in PDF
Price configurator
A manager builds an order for all the windows in an apartment: type, size, sashes on a diagram, profile, glazing unit and color. Production rules are checked instantly, discounts and installments are calculated automatically, and a numbered proposal goes out as a PDF.
- React
- TypeScript
- live
Web app · finance · comparison
Mortgage calculator
Five bank programs on one screen: which suit the client and why the others don’t. A developer-subsidized rate, differentiated payments, early repayment, debt-to-income ratio and the tax deduction.
- React
- TypeScript
- live
Web app · estimate · PDF
Renovation estimate calculator
Room dimensions turn into floor, wall and ceiling areas, and those into work by stage. Labor and materials separately, the timeline based on crew output, a payment schedule and estimate versions for negotiating with the client.
- React
- TypeScript
- live
Web app · storefront · checkout · orders
React SPA catalog
A whole store in the browser: search with suggestions and keyboard layout correction, facets with live counters, links to any filter, favorites, a cart with a promo code and checkout with a delivery slot. Orders are visible in “My orders” with statuses and can be repeated or cancelled.
- React
- TypeScript
- live
Machine learning in Python · runs in the browser
Marketplace review analytics
Reviews from Wildberries, Ozon and Yandex Market via the seller API: scikit-learn models determine sentiment and what buyers write about, an alert fires in the first week of a complaint spike, new topics are discovered automatically, and replies go back through the marketplace API. The models train right in the browser.
- Python
- React
- TypeScript
- live
Website widget · vanilla JS · one line
AI consultant widget
A consultant for any website, installed with a single line: it answers from a knowledge base with a link to the source, collects requests and calls an operator. Written in plain JavaScript without frameworks — the whole widget is 21 KB gzipped.
- Vanilla JS
- live
Website widget · vanilla JS · leads
Quiz lead form
A quiz instead of a long form: six questions with branching and a price estimate at the end. The manager gets a lead rated “hot / warm / cold” with its ad source, and the “Analytics” tab shows at which step people leave.
- Vanilla JS
- live
Python backend · webhooks → amoCRM and Bitrix24
Lead integration hub
Leads from the website, ads, calls, email and bots arrive at webhooks, are normalized, checked for duplicates, routed to managers and delivered to amoCRM and Bitrix24 — with retries when the CRM is unavailable.
- Python
- React
- TypeScript