Vibe-coding an Autocue

OK, this was a fascinating evening of discovery - using VS Code and Github CoPilot to "Vibe Code" an entire Autocue app that automatically updates as you speak in a single HTML file.  Not bad!

I hope it's useful to someone! It's all fully open source (MIT licensed, so free for professional use), and easy to access. There's no server, so you can just save the page as HTML and use it in the field.

It needs the Chrome browser for the voice recognition, and/or you can operate using keys:

• Ctrl+Enter: Presentation mode (from where you were editing)
• Esc: Back to edit mode
• Home/End: Start/End of script
• Left/Right: Word backwards/forwards
• Up/Down: Line backwards/forwards
• Page Up/Down: Story backwards/forwards

The App: https://davidnmbond.github.io/Autocue/

Demo video: https://www.youtube.com/watch?v=pOnRsjKAUMM

Source code: https://github.com/davidnmbond/Autocue

Enjoy!

The first screen you will see is the edit mode.  Here, you can edit your script and add #headlines and *emphasis*.  Press return twice after headings and between paragraphs.

Press Ctrl+Enter or click "Present" to enter presentation mode.  Here, you can just speak the script out loud and Autocue will follow you as you go.  Words will grey out after you've said them, and the next word to speak is shown in green.