DEV Community

Cover image for Write Articles With AI Speech Recognition and Live Preview!
Mostafa Said
Mostafa Said

Posted on • Edited on

Write Articles With AI Speech Recognition and Live Preview!

Overview of My Submission

There is no doubt that we love writing and that's the main reason why we're here. Sometimes we love writing about something we learned or tech news or even something personal that we think it might be beneficial for other people, but writing takes time and time is not something that can be easily found within our busy days. Speech to text technology appeared to solve that for us, but it was mainly used by story writers and reporters but not by web developers and tech content creators! For a long time we used that technology to serve the user but not to serve ourselves, and from here I created Wordleit Editor.

Image description

Wordleit Editor is a free in-browser markdown text editor that gives you a seamless experience as both a reader and a writer. It's supported with Deepgram AI Speech Recognition service.

If you're addicted to tech writing, Wordleit isn't going to help you recover anytime soon, as with Deepgram AI speech and it's super accurate transcription you will be able to speak what's on your mind into an article and then style it with only few clicks or vocal commands. The AI speech to text is also useful for writing articles from your phone anytime during the day.

It provides side by side preview and it's using MarkedJS so that you have everything Github Flavored Markdown offers and styled with TailwindCSS to match Dev.to dark theme. The toolbar has the most common markdown syntax including tables, code blocks and many more.

The idea is to make you write more, better, faster and help you write anytime and from anywhere. Currently working on vocal commands to apply the desired styles for your article so that I won't have to use the mouse or click anything at all.

Wordleit Demo Gif

Built with:

More about Wordleit:

My plans for Wordleit as overall is to build free products where AI Speech Recognition services is used for the benefit of developers and my first project on it is this Wrodleit Editor. I built it with Laravel as I have big plans for making it an essential tool for web developers and create user profile for each user where he/she can keep drafts and any unfinished work.

I really wasn't going to release this unless it's 100% ready but I just found out that my wife is pregnant šŸ˜Š so I will be a bit busy the upcoming days and wanted to just release the project for now and work on it whenever I can.

My next update on Wordleit Editor will include vocal commands to apply specific styles. This will make it extremely easy for the user to write articles if he talks while he's asleep šŸ˜

Future improvements:

  • Vocal Commands.
  • Audio file uploads.
  • Drafts section.
  • Embed rich content.
  • Code coloring.

Submission Category:

  • Wacky Wildcards.

Link to Code on GitHub::

GitHub logo 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 šŸ‘‹

Documentation License: https://github.com/MooseSaeed/wordleup/blob/master/LICENSE Twitter: Moose_Said

Image description

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

šŸ¤ Contributing

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

āš™ļø Built with:

        <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/3cbc2c83e8970766a734b785bdc273512467ac80682fc66e037f6306f9629be4/68747470733a2f2f6d61726b65642e6a732e6f72672f696d672f6c6f676f2d626c61636b2e737667"><img src="https://camo.githubusercontent.com/3cbc2c83e8970766a734b785bdc273512467ac80682fc66e037f6306f9629be4/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/41324664372bf68511a4de3f96e22675e3560528231e5f31c00022f268a681a1/68747470733a2f2f692e6962622e636f2f534b564a526e732f616e696d6174656373732e706e67"><img src="https://camo.githubusercontent.com/41324664372bf68511a4de3f96e22675e3560528231e5f31c00022f268a681a1/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>
Enter fullscreen mode Exit fullscreen mode

Show your support

Give a ā­ļø if this project helped you!

ā€¦

Link to the tool live demo:

https://wordleit.herokuapp.com/

Additional Resources / Info:

Small demo to show you how it works:

I didn't do any preparations before making this video so please excuse me for the many times you'll hear "as you can see" and "of course" šŸ˜…

Thanks for checking this out and stay tuned for my next updates on this šŸ˜ Please let me know what you think below :)

Top comments (6)

Collapse
 
moose_said profile image
Mostafa Said

Oh! Thank you so much! Your comment made all my efforts worth it ā™„ļø :)

Collapse
 
muriithigakuru profile image
Muriithi Gakuru

I don't know if they'll view both of our projects as duplicates...such a bummer. Good work nonetheless.

Collapse
 
moose_said profile image
Mostafa Said

Thank you! There are many aspects and differences though :)

Collapse
 
muriithigakuru profile image
Muriithi Gakuru

Haha...We have been on the same line of thinking actually. I considered voice commands for formatting texts in a certain way too. In my use case I found that it might be a mouthful trying to speak out a command in the middle of the article. You're designs are mouthwatering man.

Thread Thread
 
moose_said profile image
Mostafa Said

See? Completely different in code, implementation, features, design and even category of submission šŸ˜‚ Thanks buddy and best of luck :)