Under 100 lines of plain JS code creates a voice bot using ChatGPT API
I wrote it primarily so I could easily ping ChatGPT on my mobile device (Added PWA support using manifest.json)
Employs Web Speech API’s interfaces for speech recognition and text synthesis, enabling speech-to-text and text-to-speech capabilities.
Simply tap/click on the body of the page to activate speech recognition
Live demo:
https://raw.githack.com/jay23606/chat-gpt-voice/main/chat.html (or tinyurl.com/gpt-voice)
I’ve also added a form of “tabs” using iframes and a way to toggle to vanilla-chatgpt
https://raw.githack.com/jay23606/chat-gpt-voice/main/tabs.html (or tinyurl.com/gpt-voice-tabs)
Added example of using Whisper endpoint for speech-to-text:
https://raw.githack.com/jay23606/chat-gpt-voice/main/record.html
Requires entering in an API key from openai.com which is stored in localStorage
To get api key:
https://platform.openai.com/account/api-keys
A checkbox is included to enable or disable STT and TTS whose state is also stored in localStorage
Screenshots:
You can now instruct it to write runnable and editable JS apps:
And I added CodeMirror for the code editor after exploring some other options:
Inspiration:
https://github.com/casualwriter/vanilla-chatgpt
https://mdn.github.io/dom-examples/web-speech-api/speech-color-changer/
Speech recognition does not work in Firefox but should be possible to get working using the whisper example
Alternate ways to serve the page easily (since PWA likes unique domains):
https://htmlpreview.github.io/?https://github.com/jay23606/chat-gpt-voice/blob/main/chat.html