The Weekend AI Engineer: Hassan El Mghari

In this talk I'm going to walk you through some of my projects that I've built, and all of the lessons that I learned along the way to build great AI apps that can scale to millions of users. So let's getright into it.

So to set the stage with some context, I've been building side projects pretty consistently for about 2 years now. And so last year I built about 11 side projects, and they got about 20,000 visitors total, so not too shabby.

So my goal for this year was to try to double that number and get to 40,000 visitors. And happy to announce that I did hit that goal and slightly exceeded it as well. And thank you. And basically here today to talk about how this happened, and you know, very thankful and very lucky that I managed to hit such a good number, over 8 million unique visitors across all of my projects, 20,000 GitHub stars, and about 2.8 million people that signed up.

And fun fact, every single one of these projects that I launched was built on The Weekend. So I'm going to pick through some of these projects, and we're going to go through them and talk about some lessons learned.

I also want to mention that everything I do is open source, so you can check out all of my projects at github.com/nutloop. Embarrassing gamer username from like 10 years ago that I can't get rid of. But yeah, no, I love building in open source, and it makes me so happy to see people use my projects.

But it's also a very good growth lever when you launch, and I get a lot of genuinely helpful PRs from a lot of people that are better at prompt engineering than I am, so that's always helpful. Disclaimer, I do have a bit of an audience on Twitter, which is very helpful, but honestly I don't think it's as important as people make it out to be.

A lot of people, a lot of people can kind of attribute having a lot of followers to having successful projects, but I've seen plenty of people have very successful side projects with little to no Twitter following. And in fact, less than 5% of the traffic of those 8.5 million people that have visited all of my projects, less than 5% of that traffic actually comes from my Twitter account.

So you may be thinking, where does this traffic come from? And honestly, it's a lot of word of mouth and Google and SEO and other influencers sharing it, so I'm going to get to that in a bit as well.

So today I want to talk to you all like friends, and when I talk to my friends about my projects, I kind of just share my laptop and go through a bunch of things. So I'm going to switch over to my laptop here and go through a bunch of my side projects.

So let's do that. Wonderful. So this is kind of my first AI project, how I got into AI last December. And really it stemmed from this problem that we had where we had just run a conference last year, and we had several hundred photos out there in an image gallery.

Andright before we published it, my CEO came up to me and was like, hey, we probably need to add alt tags for a lot of these images. And that would have been a very painful process, going through several hundred images.

So I looked stuff up, and I found a nice image-to-text API that ended up working really well. You know, I went and I checked a lot of the alt tags and maybe fixed like two of them and published.

But this was really my big light bulb moment of like, oh my god, AI can really, really help you save a ton of time. Like this isn't some Web3 hype from last year. You know, this is real. No, I'm kidding.

Web3 has its place for sure. But this was really the big thing when it came out. So I built this little open source project, I put it out there, and then I just started having fun and building other stuff.

So I built another project called QRGPT with my friend Kevin at a hackathon. And so the idea is that you just generate just pretty nice QR codes. So we can actually go and generate a QR code for

AI.engineer. I forgot the domain name. And we can select a prompt here. I'm going to just click one of the pre-generated ones, a forest overlooking a mountain. And hopefully in like five or six seconds it should generate a QR code that links to the conference that just looks a little bit better than the black and white QR codes.

And so we built this, and we weren't expecting way too much because people really don't have to generate QR codes every single minute. So yeah, we put it out there, got about 8,000 visitors, about 8,000 QR codes generated.

And so we were like, okay, cool. And I was like, allright, I want to try to build something that has more daily active users or people that will use it consistently. So I built this little tool that summarizes TechCrunch articles.

So the idea is that you go to techcrunch.com, you can click any article that you want, and all you have to do is add summary to the end of the URL over there, and it'll redirect you to my website and kind of summarize the whole article using GPT-3.5 in a couple bullet points.

And so the reason I'm showing you a video here and not a live demo is because I got a very nice email from the TechCrunch lawyers when I launched this telling me to take it down. So that was a lot of fun.

But yeah, anyway, I took it down and I moved on. That one did pretty good when I launched it, and then they made me take it down, and it kind of died off from there. And then I started just like replying to random people on Twitter.

So Samina here asked, can someone help me build an AI to help me pay classes? So I was like, allright, bet. I got you. And I built this little thing in like a couple hours where it takes some information about yourself, your face shape, and your gender, and you can add some relevant context.

And it uses a combination of LLMs and the Amazon API to find the ideal glasses for you and actually links them on there so that you can buy them. So yeah, I just started replying to a bunch of tweets.

Another one was by my friend Theo, who said someone should make an app that kind of auto-generates commit messages for you. And then my CTO tagged me and was like, CC Hassan. I love that idea, which translates to build this as soon as possible.

So I was like, allright, I got you. And I built a little tool. So essentially you could run git add, you run the CLI tool that I built, AI Commit, and it analyzes your git diff and produces a little commit message for you that you can then use to commit.

And these are very small hacky solutions. You know, my CTO tagged me at 7:53 p.m. on February 11th, and then less than two hours later I replied with that little script. Thank you.

And after I saw it get some attention, I was like, okay, I need to clean this up. I need to figure out how to bundle it into an NPM package. And so that's what I spent my Monday morning on.

I hope my manager isn't watching. But that was a fun Monday. And yeah, I kind of bundled it out there and posted it as an NPM package. And now I think over 30,000 developers are now using it to commit their messages, and it's one of my more popular open source repos.

There's some PRs that I need to take a look at. But yeah, a bunch of 6,000 stars and about 25 contributors. And so this was kind of my exploration with LLMs. And so actually I have one more project called the Twitter Bio Generator.

And essentially also open source like most of my other projects. But you just put in some context about you so we can do like engineer at Microsoft, and we can say loves volleyball. And pick a vibe and it'll make your Twitter bio for you and kind of stream in text from GPT-3.5.

Spiking code bugs and volleyball balls. You can't get any better than that. But you might take a look at some of these projects and think like, this is so simple. Like nobody's going to use this. This is just like this little ChatGPT wrapper.

Like everybody in this room can build this thing. But I think we constantly underestimate that the majority of the world are not AI engineers. Nobody can build this. A lot of people haven't even used ChatGPT yet. Like it's crazy.

So even the simplest apps can do really, really well. And so that's a common theme that you might see is like all of these are very, very simple apps. So I launched it and it got about 200,000 visitors that used it.

It got about 100,000 people in a single weekend. And then I hit my OpenAI bill and had to shut it down for a little bit. So it's always a good sign. And so after this I kind of switched into image-to-image models.

So I built this photo restore website that basically unblurs old photos. And the motivation behind this actually was my parents sending me these old photos. So I'm actually going to put in a picture of my dad doing karate when he was like 18.

And he sent me this photo and his face is really blurry. And you'll see, yeah, he's flexible. I do not. I did not inherit that. But you see his face is a little bit blurry. You can't see it too well.

But hopefully in the space of a few seconds we should see. And so this is used as just a GAN model. It's called GFPGAN. It sends it to that model and it will basically scan like all the faces in a picture and restore it.

So we'll see if the internet is working out. We'll hopefully see the image come in in a few seconds. And if not, I can move on and come back to it. Allright, I'll come back to it. So again, open source repo.

And this one really, really did well. And it kind of is my most consistent project. It still has about 250,000 people that use it every month. Mostly actually in India and Indonesia, which makes a lot of sense because the phone cameras there are a lot lower quality.

So it makes sense that they would use it. But shortly after it went viral, I got a lot of inappropriate images being uploaded. And so I had to, I used actually tensorflow.js and I published this as a library as well.

But yeah, I just ended up using this to scan the image and make sure it was safe before I processed it. So let's go back. Okay, so it looks like it was restored. I'll actually put them side by side and zoom in a little bit so you can see his face before a little bit blurry.

And then after the transformation you can see it really, really clears up. Thank you.

And really another thing I want to stress here is that this is one single API call to this GFPGAN model. And that's it. And he's really getting that and displaying it back to the user. So it's such an exciting time to be an AI engineer and to build this stuff because it's so easy and it's so impressive to other people as well.

So I'm going to talk about one more project and then I'm going to start to talk about some takeaways. But before that actually, this is like the architecture for most of my apps. Really I use Next.js on the front end and the back end.

And you saw for restore photos there's this little upload component that I use. And so that the user uploads an image, it gets sent to cloud storage. And then I send that image URL to my Next.js API route.

Or you can think of it as just like a lambda function. And then that sends it to my machine learning model to GFPGAN to get restored. It gets back the image, sends it back to the client, and displays it to the user.

So this is kind of the architecture I use for a lot of my image-to-image side projects. My last one, which I'll restart, but my last one that did the best is actually called RoomGPT. And it's that idea of if you give it a room, I'm just going to give it a random living room from the internet and we're going to select a couple themes.

But if you give it a room and some themes, the idea is that it'll use this and it'll help you redesign your room. It'll give you different variations of that specific room, different color themes, different couch styles and stuff like that.

So we can see it just finished. And you can see it really respects the structure of the room. So it looks the same, but it gives you different ideas for these tables and backgrounds and tiles and everything like that.

So really the motivation behind this project was that I saw somebody else built this before, but they used Stable Diffusion. And Stable Diffusion actually does a notoriously bad job at maintaining the original structure of a room. Like you give it a room, you can tell it, okay, redesign this in this theme.

And the image it produces looks nothing like the original room. Like the dimensions are messed up, the depth is messed up. And then I saw this new model called ControlNet that came out. And ControlNet does really well at maintaining that structure of the room.

So I saw that and I was like, oh, this could be cool to build. So I put it out there and I launched it on Twitter. And obviously it's also open source. But I launched it on Twitter and it did pretty well on there.

And kind of kept tweeting about it. Because the thing about Twitter, when you tweet about something 24 hours later, it's kind of dead. So what I like to do is I like to kind of post updates over and over again.

So we had about 10,000 people that used it in the first 12 hours and then 30,000 in the first day. And then I added some testimonials. May or may not have paid these people. And then yeah, two days later it had like 90,000 people and then three days 270,000 people.

And so it kind of just blew up. And I feel like it was just, it was mostly because I was one of the first people to kind of productionize this ControlNet model that had just come out. So a lot of people were seeing it for the first time and using it.

And most of these users, again, I can show you the analytics chart. So I have about 6 million people that have visited the site and about a little over 2 million that have registered and used it. And you can see the vast majority of the traffic is just Google.

It's just straight up from Google. A lot of people kept sharing it. And part of that I think is because it was open source and a lot of developers liked it and reshared it. But also the fact that I kept it free.

So I'm going to talk about how I did that kind of when I transition back to slides. So those are some of my side projects. One thing I want to call out is it's a really good idea to use AI enhancing tools when building a lot of this stuff.

So use GPT-4 for your code. We have an AI SDK that you can use over at Vercel. And we also have this product called V0 at Vercel. And so it helps you kind of generate UIs. And what's really cool is you can kind of see other people generating UIs.

We can click on this one, for example, which looks like the Apple Notes UI. And we can actually fork, we can look at the code, which is cool. So I can copy all this code. But what's also cool is I can look at these templates or look at other people's code and I can fork it.

Similar to how I can fork a GitHub repo. So now this is mine. I can kind of add additional prompts to change it. Or I can click this button over here and actually select different elements within the page.

I can select this div and tell it like add three more notes and alternate their colors. I can press enter and update. And what it'll do is it'll just re-render this specific div and it'll stream in the data using our Vercel AI SDK.

It'll stream in these React components. And yeah, hopefully it'll keep going and add all this stuff in. And again, as it streams in these components, it adds them inside of this code box over here. So I think it's still generating.

But eventually it'll add all of the notes here and we can go into the code and kind of copy and paste it. We can also run a CLI command. You can see it scrolls down because it's still generating.

Here's yeah, note three, note four, note five. There you go. So added the five notes. I can go take all this code or run this command and get all the code and kind of iterate on UIs that way.

So it's just a way to kind of prototype a very early UIs. So I'm going to go back to slidesright now to talk about some takeaways.

So use AI tools to move faster. I mentioned that. I mentioned the AI SDK. I mentioned V0. But there's a lot of really amazing libraries. I love using Replicate and Hugging Face and Modal and a lot of these other tools and Brev.

There's a lot of really cool stuff you can use to kind of train your models or move faster when you're coding. So this is a bit of a spicy one. I always tell people, don't do any fine-tuning and don't build your own models.

And this is specifically for launching MVPs. Because again, the purpose of this talk and everything is like building projects very quickly on weekends. So you don't have time to fine-tune. You want to keep things very, very simple. If you can't describe your idea to me in five words, like it might not do great.

I have friends that come up to me that are like, oh, I want to build this platform for developers where they can connect them to clients and they can have their portfolios there and they can have a chat and they can have this.

And I just like stare into them and I'm like, that's not going to happen. You can't build that in a weekend. If you can't build a quick, so what I tell them is just basically downscope to an MVP and then launch it.

And even RoomGPT, when I launched that, I had so many machine learning engineers that DM'd me on Twitter and were like, oh my God, like what models did you train? What parameters did you use? How did you get the data?

How did you clean your data? I'm like, dude, you just use like an API off the shelf. You don't need, you can do so much with off-the-shelf APIs. Another one is use the latest models. I mentioned a big part of RoomGPT's success is using ControlNet, which had just come out a couple days before.

Launching early and iterating is so, so important because you don't know what's going to do well. So if you can de-risk your projects, if you can get a project out in one or two weekends, and if it fails, so what?

You can pivot, you can move on to a new idea, and you can just, yeah, you can just move on to other things. And if it does well, then you can double down on it, then you can add additional things to it.

So I've found that to be great. Another one is making it free and open source. Making things open source is always great because people learn from it and are incentivized to share it and will open PRs to your project.

And it'll also get you a bunch of followers. I gained like 25,000 Twitter followers this year just from posting a bunch of these open source projects. And they're just all developers wanting to learn and help me out. So open source is amazing.

Making things free is a little bit hard. Because as we know, AI workloads are really, really expensive. And so there's a few ways you can do this. I kind of played on my strengths. I have a Twitter audience.

So I can go to companies and be like, hey, I want to launch this project. I think it'll get X amount of users. Please give me some credits and I'll shout you out in the footer and I'll put you in the read me and all this stuff.

But I've seen a lot of other people replicate this with no followers. And the key is to just build a very high-quality open source project, put it out there, put like a $50 limit on it. And when you run out, you can reach out to the company and say, hey, like my project went viral on Twitter and it's featuring you and the GitHub repo is open source.

So when companies see this, they're kind of willing to give you some credit. So shout out to Replicate and Bytescale and Neon and a bunch of my other sponsors that help me keep a lot of my AI projects free.

And the last lesson that I have for you is making sure your UI looks good. Nobody's going to use your product if it doesn't look good. That's just something that's been learned. And so I actually spend like 80% of my time on the UI.

Even though these are like AI projects, most of the time is on the UI because you need to make it look good. And if you're not a designer, you can just take inspiration from a bunch of different websites.

And that's what I do. I'm not a designer, so I just look at like five other websites and I kind of steal a little bit of each site to make it look good. Because I don't know how to just come and make a website that looks good, but I know when something looks good when I see it.

So that's kind of what I do. So very quick summary. If you do these five things, I think you can go very, very far. And lastly, I tell people to use whatever tech stack they want to use. I like the tech stack of like Next.js and TypeScript and Tailwind.

It lets me move really quickly and then using Vercel for deploying my apps. Two final ideas and then I'm going to get off the stage so better speakers can come and tell you about their project. But I don't work 24/7 despite what you might think with all of that.

I actually spend most of my weekends relaxing. But what I do is I work in sprints. So I'll take a single weekend and I'll just drop everything and go and try to put out a project. And then for the next like two or three weekends, I'll just binge Netflix shows and hang out with friends and live my life.

So this has worked out for me. But when I say like I work all weekend, I mean like 12 hours Saturday, 12 hours Sunday kind of deal. I kind of drop everything and do that. And so if you have flexibility in your life to do that, you can go ahead and try it.

If you're married or have kids or have other responsibilities, you can experiment with what works for you. You can spend a couple hours every weekend here and there. But that's what I do. Basically a weekend a month where I sit down and I put out a project and then relax for a little bit.

So yeah, moral of the story is I think like do what works for you. I'm just kind of sharing what's worked for me. And the final thought I want to put out there is that you need to put in the hours.

I think a lot of people DM me and are like, hey, I'm feeling really unmotivated because I'm trying to build these projects and they're taking me so much time. And how do you do it? What's your secret? And the first thing I ask them is like, oh, I'm sorry to hear that.

How many projects have you built? And more often than not, they're like, oh, this is my second project. And I just stare at them and I'm like, you can't go to the gym for the second time ever and then look down and be like, where are my biceps?

It doesn't work like that. You have to go to the gym consistently over months to see progress. And so the same thing happens with side projects and coding in general. And if you're an engineer, that's even better. I'm not an engineer actually.

I don't write code for most of my time at work and I just learned to code a few years ago. So I think genuinely anybody can do it. You just have to kind of put in the hours and build and good things will happen.

So thank you so much for having me.