Use Vocal Commands to Apply Markdown to Your Article!

Hello everyone 👋

This is a second release for a project I previously submitted. But if you're not going to check out the first submission then you should just know that Wordleit Editor is a free in-browser markdown text editor that gives you a seamless experience as both a reader and a writer. And also it's supported with Deepgram AI Speech Recognition service.

What's new?

1- Fixed "Stop Recording" button to make it close Deepgram connection and stop listening to the mic.
2- Some improvements for the UI.
3- Markdown improvements.
4- MAGIC KEYS!!

"Magic Keys" 🎩?

Magic keys are keywords you can use while recording in order to apply a specific markdown action. I tried to include as many as I could and make things as smooth as possible at the same time.

This is all VueJS and Deepgram magic 🚀

Show me 👀!

This is a quick video I recorded to demonstrate the new feature and show you how it can be used.

Try it out yourself:

https://wordleit.herokuapp.com

Link to Code on GitHub:

MooseSaeed / wordleit

Wordleit is a free open source markdown text editor that gives you a seamless experience as both a reader and a writer. Supported with AI Speech Recognition.

Welcome To My Wordleit 👋

Wordleit Editor is a free open source markdown text editor that gives you a seamless experience as both a reader and a writer. Supported with AI Speech Recognition. Text to speech - Speech to text - Mp3 to Text.

Wordleit Streamer is a free open source video streamer and online transcriptor tool.

Wordleit Grammy AI Bot AI speaking Bot created to serve your purposes.

🏠 Homepage

✨ Editor Demo

✨ Streamer Demo

✨ Grammy Demo

Hackathon Submissions:

• Wordleit Editor

1- https://dev.to/moose_said/write-articles-with-ai-speech-recognition-and-live-preview-508k

2- https://dev.to/moose_said/use-vocal-commands-to-apply-markdown-to-your-article-99

3- https://dev.to/moose_said/text-editor-with-text-to-speech-and-speech-to-text-4l37

• Wordleit Streamer:

https://dev.to/moose_said/online-video-streamer-and-audio-transcription-2ein

• Wordleit Grammy

https://dev.to/moose_said/add-ai-robot-to-your-portfolio-or-company-website-3045

Author

👤 Mostafa Said

• Website: https://twitter.com/Moose_Said
• Twitter: @Moose_Said
• Github: @MooseSaeed
• LinkedIn: @moosesaid

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

⚙️ Built with:

• Visual Studio Code

• Laravel 9
• VueJS 3
• TailwindCSS

        <ul dir="auto">
            <li>
                <div dir="auto">
                    <a target="_blank" rel="noopener noreferrer nofollow" href="https://avatars.githubusercontent.com/u/17422641?s=200"><img src="https://avatars.githubusercontent.com/u/17422641?s=200" alt="deepgram" width="40" height="40" style="max-width: 100%;"></a>
                    <a href="https://deepgram.com/" rel="nofollow">Deepgram</a>
                </div>
            </li>
            <li>
                <div dir="auto">
                    <a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/23579958/143738613-d374adcf-24b8-4f44-8e75-673d5681c1a5.png"><img src="https://user-images.githubusercontent.com/23579958/143738613-d374adcf-24b8-4f44-8e75-673d5681c1a5.png" alt="plyr" height="20" style="max-width: 100%;"></a>
                    <a href="https://github.com/redxtech/vue-plyr">Plyr Vue</a>
                </div>
            </li>
            <li>
                <div dir="auto">
                    <a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/881b3d162f1a3fdb13e9c8507afe5f40be73e59b6c4b907901e06a1ccd7f70df/68747470733a2f2f6d61726b65642e6a732e6f72672f696d672f6c6f676f2d626c61636b2e737667"><img src="https://camo.githubusercontent.com/881b3d162f1a3fdb13e9c8507afe5f40be73e59b6c4b907901e06a1ccd7f70df/68747470733a2f2f6d61726b65642e6a732e6f72672f696d672f6c6f676f2d626c61636b2e737667" alt="deepgram" width="40" height="40" data-canonical-src="https://marked.js.org/img/logo-black.svg" style="max-width: 100%;"></a>
                    <a href="https://marked.js.org/" rel="nofollow">MarkedJS</a>
                </div>
            </li>
            <li>
                <div dir="auto">
                    <a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/61d22c54c2d885e3364693b3a15d0a8d17d7f4294f14ff41622fdd64373b10b0/68747470733a2f2f692e6962622e636f2f534b564a526e732f616e696d6174656373732e706e67"><img src="https://camo.githubusercontent.com/61d22c54c2d885e3364693b3a15d0a8d17d7f4294f14ff41622fdd64373b10b0/68747470733a2f2f692e6962622e636f2f534b564a526e732f616e696d6174656373732e706e67" alt="animatecss" width="40" height="40" data-canonical-src="https://i.ibb.co/SKVJRns/animatecss.png" style="max-width: 100%;"></a>
                    <a href="https://animate.style/" rel="nofollow">AnimateCSS</a>
                </div>
            </li>
        </ul>

Show your support

Give a ⭐️ if this project helped you!

…

View on GitHub

Possible improvements:

There is still a big room of improvement to the UI and to the code but there is something that I would like to add in the next update which is a new feature to check your article positive vibes after finishing. Mainly track positive and negative keywords and then gives you a score.

Thank you for checking this out and please let me know if you think it's cool 🤘

Comments

[Andy Piper]

Wow, this is really impressive, I watched the demo and it seemed very smooth. I have not generally been a fan of dictating my writing, but I like what you’ve built here. Well done!

[Mostafa Said]

Thank you Andy! ❤️ I'm so glad you liked it.