I coded a website with my voice just like one of my french girls

TRANSCRIPT

I coded a website with my voice just like one of my french girls

What’s up, everyone, and welcome to part two of me building a website with my voice. Now, I got to admit, I have been over ambitious with the amount I ideas that I want to execute because I just had so many ideas that I could do to make this project seem really cool and to extend it. But there’s so many things that you can do that I overcompensated for my abilities and for my time, especially my time. And some things I started, I couldn’t complete But I do have a few things that I wanna share with you guys today that was totally going to revolutionize the way we ever program in the future. Yeah. Now, if you haven’t seen previous video, well, you can just check it out here. I really encourage you to watch it to get a context of what we have so far. But But if you haven’t watched it, here is a twenty second summary of the events that occurred in the previous. can’t see this. What the hell? That’s nice. What is it a sapphire? A diamond, a very rare diamond. Philip, I want you to program me like one of your French girls. Wearing this. Alright. Wearing only this. Yep. I’m a lucky dude.

Alright. Let’s recap. In the last video, we focused on nailing the fundamentals. we wrote some really good as code to automatically launch a web browser, which immediately asked us for permission to capture our voice by using the media capture and stream’s API. With that, we were then able to connect to Deepgram, which is a service that translates speech to text so well, your mama would be proud. Also, NASA uses it too. With those checkpoints ticked off, we were able to write an algorithm that recognized patterns in our speech and produced some impressive results. Then we built a simple login page and thus could wrap up part one of the video.

Now that you had a refresher of what I did in the previous video, hopefully it’s going to be much easier for you to understand the features that I implemented into the algorithm, which I’m going to showcase in today’s video. Let’s move on to the first feature and let me share that one with you guys. centering an element in the center of a dev. A question always asked by developers like it’s some magic. Like, It’s impossible while now positioning an element in the center of a div horizontally and vertically with your voice just like this. No problem. Watch this.

Here is a simple example of a div with a button inside it. As you can see it’s not positioned in the center, but when I say position content in the center as a row inside the div with an ID of container. How insane is that? You can’t say that that didn’t impress you. it definitely impressed you. You are most certainly thinking, but how did he do that? Got the magic. Now, actually, no, there wasn’t any magic in that regard. I wish it was magic. It was it was just about four hundred lines of color. Yeah. Okay.

And if you are wondering, this is what the injected styling looks like inside the HTML which was triggered by the highlighted keywords in the voice command that you just saw. Remote web dev, but literally at the distance. As you probably remember from my last video, I wanted to achieve the functionality of being able to speak into the microphone of my phone and be able to build websites remotely that way, meaning I can be very far away from my laptop and still build stuff because I’m able to establish that connection. and I think I’ve got the perfect way to test that. This wasn’t as simple as it seems. A bunch of code didn’t help. There were issues so many issues. But after figuring out that I had to toggle the media recorder and the Safari experimental features on my iPhone, well, it worked. So here I have my phone and my laptop connected on the same network. And if I just take my laptop and I’ll position it right here on the windowsill and I’ll just tilt the screen down so I can actually see it from the outside. Yeah. That seems be good and if I just pop down stirrers really quickly. I’m coding from the outside.

Oh my god. Oh my god. that actually worked. What? Yes. Oh my god. Yes. Let’s just revolutionize web dev right now. virtual assistant. Now on to the final feature. Even though that he is still not fully complete, and has a lot of errors. I want you guys to go ahead and meet Jonathan. Hey, Jonathan. How about you introduce yourself?

Hello, and welcome to your virtual assistant. My name is Jonathan. How can I help?

Well, Jonathan, I would love to build a website with you.

Very well. Let’s go ahead and pick a template. select a layout from the options.

How about we go for a layout number two? Awesome choice. Actually, you know what, Jonathan? Let’s pick something different. Which layout would you like this time? How about layout number three? Fantastic choice. Now actually you know what, Jonathan, let’s pick something different. This is too simple.

Which layout would you like this time? Let’s go for number one. Great choice.

And there you go, ladies and gentlemen. The amount of abilities you can achieve with speech recognition. JJ? Yes. How good of a web developer am I? Now as you solve for yourselves because Deepgram is so fantastic, at the speech to text recognition that they do. It allows me to achieve really accurate results and gives me so much flexibility when it comes to playing around with it and creating all these fun projects. Now you can play around with too. And by clicking on the link in the description, you can register for a free account and get hundred and fifty dollars credit to use with Deepgram to be able to interact with their speech to text services and play and play around and learn something new, so I highly suggest you guys do it. It’s free. Now, as always, thank very much for watching. I hope you guys enjoyed this video. If you did, make sure you subscribe to my channel if you wanna see more videos like this. And make sure you hit the thumbs up button. And as always, I’ll see you in the next video.