DEV Community

Cover image for Add AI Robot 🤖 To Your Portfolio or Company Website
Mostafa Said
Mostafa Said

Posted on

Add AI Robot 🤖 To Your Portfolio or Company Website

Overview of My Submission

Deepgram is offering an amazing AI speech recognition service for multiple languages which can take the user's audio and transform it into text. So why don't we use this to get the user's request and send it back to our system and according to specific keywords with the right algorithm, the system will be able to identify the user's request and immediately provide back the information they want in audio. It's like speaking to your TV, Air-conditioner or even your light system but this time, you will be speaking with a robot.

Robot Banner

Meet Grammy! You can actually use this robot the way you want. You can use it to have a conversation with you visitors and present the data they requested as a response or you can just use it to tell jokes and have fun. The robot is as simple as VueJS components that you can copy and paste and it has ZERO dependencies.

In this demo, I only included generic and basic usage of Grammy but possibilities are unlimited. You can customize this robot and it's responses the way you like. You can make him funny, deep or even a sad and miserable robot, after all you're in charge. You can also set key words such as (price ,cost ..etc) and set the response to the prices of your products along with a pop up asking if the user would like to be redirected to prices and packages page.

This is my fourth project and fifth submission in this Hachathon. I have combined all projects in Wordleit Homepage so that you have access to them at all times.

Wordleit content

Built with:

How to use:

If you would like to have a copy of the bot, all you have to do is to head to the Github repo and fetch two components:
1- resources/js/components/grambot/ Userside.vue

In this component we're using recording toggle and initiating transcription websocket with Deepgram.

2- resources/js/components/grambot/ Botside.vue

In this component we're defining arrays of keys for different situation and customize our responses. Follow the comments in the component for the best use.

3- resources/js/components/main/ Grammybot.vue

You don't have to copy this file but if you want a peak on how to combine and use the above two components have a look at this one.

Future improvements:

There are a lot of things that can be improved but today is the last day in the hachathon :( But here is what I have in mind:

  • Improvements to the code readability.
  • Dynamic moving robot.
  • Response algorithm improvements.
  • Find a way to make it sound less robotic.
  • Small toggle for Grammy widget.
  • Remove recording button and replace with keyword such as (Grammy, do this) and it will trigger the action.

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:

Show your support

Give a ⭐️ if this project helped you!

Link to the tool live demo:

https://wordleit.herokuapp.com/

In this demo you can:

  • Greet.
  • Ask about how it feels.
  • Ask who it is.
  • Ask about it's creator.
  • Ask about it's name.
  • Ask about it's age.
  • Say compliments.
  • Say that you love or like it.
  • Say some insults.
  • Explain your feelings.
  • Ask for a story or a joke.
  • Refuse and agree.
  • Talk about food.

Additional Resources / Info:

Small demo to show you how it works:

As I mentioned, this demo is for basic usage and my own customized responses. You can set yours and make it all about your business, prices and way of contact.

This is my last project in the last day of this amazing Hachathon! I learnt so much and I really enjoyed my time working with Deepgram and their super helpful team ❤️ I'm going to miss this, it may sound a bit sentimental but after all I spent the whole month building interesting stuff with Deepgram and interacting with great people here in Dev Community 🥰

Thank you for checking this out and feel free to check out my other submissions for this Hachathon: 🔥

Top comments (2)

Collapse
 
bekahhw profile image
BekahHW

I love the name <3

Collapse
 
moose_said profile image
Mostafa Said

Thanks! I thought it would be catchy :)