Home

Awesome

chat-gpt-voice

Under 100 200 lines of plain HTML/CSS/JS code creates a voice bot using ChatGPT API and can also write its own code and push it to GitHub using GitHub REST API.

I wrote it primarily so I could easily ping ChatGPT on my mobile device using my voice instead of typing (Added PWA support using manifest.json)

I then thought it would be neat if it could write it's own code just like OpenAI Codex playground but also optionally publish to github instead of JSBin. I looked into publishing to JSBin but I didn't see a way to POST the data there without a paid subscription although it may be possible with other online JS editors. I did add a code editor using CodeMirror and it seems to work pretty well.

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

<strong>Live demo:</strong>

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

<strong>To get api key(s):</strong>

https://platform.openai.com/account/api-keys

https://github.com/settings/tokens

A checkbox is included to enable or disable STT and TTS whose state is also stored in localStorage

<strong>Screenshots</strong>:

screenshot

You can now instruct it to write runnable and editable JS apps and it can also push it to GitHub Pages and provide a link (requires GitHub API PAT with repo access-also stored in localStorage):

screenshot

Added CodeMirror for the code editor after exploring options:

screenshot

I've also added fieldset elements that act as accordians for the "ChatGPT Response", "Code Editor", and "Output Web Application" sections and have included error information in red for the latter so one does not have to go hunting in devtools to determine the cause of a script error. I've added a button that will then send errors if there are any back to ChatGPT for a resolution.

If you look under the html folder in the gh-pages branch you will find some apps this app has written

If you click the YouTube checkbox, you can now embed five YouTube videos based on the prompt and I've also added a dropdown to allow a larger variety of tab destinations

<strong>Inspiration:</strong>

https://github.com/casualwriter/vanilla-chatgpt

https://mdn.github.io/dom-examples/web-speech-api/speech-color-changer/

<i>Speech recognition does not work in Firefox but should be possible to get working using the whisper example</i>