chat-gpt-voice

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