back to indexThe Weekend AI Engineer: Hassan El Mghari

Chapters
0:0 Introduction
1:53 Disclaimer
2:53 How Hassan got into AI
4:30 Techcrunch summary tool
5:23 Twitter
6:52 Twitter Biogenerator
8:27 Image Model
10:14 Architecture
11:14 Room GPT
11:50 Motivation
13:45 AI Enhancing Tools
15:37 Launching MVPs
00:00:18.520 |
and all of the lessons that I learned along the way 00:00:21.480 |
to build great AI apps that can scale to millions of users. 00:00:29.120 |
I've been building side projects pretty consistently 00:00:33.400 |
And so, last year, I built about 11 side projects, 00:00:40.860 |
So, my goal for this year was to try to double that number 00:00:45.740 |
And happy to announce that I did hit that goal 00:00:53.520 |
And basically, here today to talk about how this happened, 00:00:57.440 |
and, you know, I'm very thankful and very lucky 00:01:03.920 |
over 8 million unique visitors across all of my projects, 00:01:07.280 |
20,000 GitHub stars and about 2.8 million people that signed up. 00:01:11.520 |
And fun fact, every single one of these projects that I launched 00:01:16.720 |
So, I'm going to pick through some of these projects, 00:01:23.200 |
I also want to mention that everything I do is open source. 00:01:26.560 |
So, you can check out all of my projects at github.com/nutloop. 00:01:30.560 |
Embarrassing gamer username from, like, 10 years ago 00:01:34.000 |
But, yeah, no, I love building in open source, 00:01:37.000 |
and it makes me so happy to see people use my projects. 00:01:40.480 |
But it's also a very good growth lever when you launch. 00:01:43.440 |
And I get a lot of genuinely helpful PRs from a lot of people 00:01:48.120 |
that are better at prompt engineering than I am. 00:01:53.280 |
Disclaimer, I do have a bit of an audience on Twitter, 00:01:56.360 |
which is very helpful, but honestly, I don't think it's as important 00:02:01.360 |
A lot of people can kind of attribute having a lot of followers 00:02:08.000 |
but I've seen plenty of people have very successful side projects 00:02:13.640 |
And, in fact, less than 5% of the traffic of those 8.5 million people 00:02:19.640 |
less than 5% of that traffic actually comes from my Twitter account. 00:02:23.200 |
So, you may be thinking, where does this traffic come from? 00:02:25.640 |
And, honestly, it's a lot of word of mouth and Google and SEO, 00:02:31.120 |
So, I'm going to get to that in a bit as well. 00:02:33.800 |
So, today, I want to talk to you all like friends, 00:02:36.920 |
and when I talk to my friends about my projects, 00:02:38.720 |
I kind of just share my laptop and go through a bunch of things. 00:02:43.200 |
So, I'm going to switch over to my laptop here 00:02:57.840 |
And, really, it stemmed from this problem that we had 00:03:01.240 |
where we had just run a conference last year, 00:03:03.080 |
and we had several hundred photos out there in an image gallery. 00:03:07.320 |
And, right before we published it, my CEO came up to me and was like, 00:03:11.160 |
"Hey, we probably need to add alt tags for a lot of these images." 00:03:13.720 |
And that would have been a very painful process, 00:03:17.520 |
So, I looked stuff up, and I found a nice image-to-text API 00:03:23.240 |
You know, I went and I checked a lot of these -- 00:03:26.440 |
a lot of the alt tags and maybe fixed, like, two of them and published. 00:03:29.080 |
But, this is really my big, like, light bulb moment of like, 00:03:32.520 |
"Oh, my God. AI can really, really help you save a ton of time." 00:03:37.680 |
Like, this isn't some Web3 hype from last year. 00:03:42.520 |
No, I'm kidding. Web3 has its place for sure. 00:03:44.600 |
But, this is really the big thing when it came out. 00:03:50.240 |
And then, I just started having fun and building other stuff. 00:03:52.240 |
So, I built another project called QRGBT with my friend Kevin at a hackathon. 00:03:56.520 |
And so, the idea is that you just generate just pretty nice QR codes. 00:04:00.120 |
So, we can actually go and generate a QR code for AI.engineer. 00:04:09.520 |
I'm going to just click one of the pre-generated ones, 00:04:13.560 |
And hopefully, in like five or six seconds, it should generate a QR code that links to the conference 00:04:17.560 |
that just looks a little bit better than the black and white QR codes. 00:04:25.640 |
Because people really don't have to generate QR codes every single minute. 00:04:31.320 |
We got about 8,000 visitors, about 8,000 QR codes generated. 00:04:37.760 |
I want to try to build something that has more, like, daily active users 00:04:43.160 |
So, I built this little tool that summarizes TechCrunch articles. 00:04:47.320 |
So, the idea is that you go to TechCrunch.com. 00:04:51.760 |
And all you have to do is add summary to the end of the URL over there. 00:04:55.000 |
And it will redirect you to my website and kind of summarize the whole article using GPT 3.5 00:05:02.400 |
And so, the reason I'm showing you a video here and not a live demo is because I got a very 00:05:07.040 |
nice email from the TechCrunch lawyers when I launched this telling me to take it down. 00:05:15.120 |
But, yeah, anyway, I took it down and I moved on. 00:05:18.480 |
That one -- it did pretty good when I launched it. 00:05:24.120 |
And then I started just, like, replying to random people on Twitter. 00:05:27.120 |
So, Samina here asked, like, can someone help me build an AI to help me take classes? 00:05:34.160 |
And I built this little thing in, like, a couple hours where it takes some information 00:05:38.360 |
about yourself, your face shape, and your gender, and you can add some relevant context. 00:05:42.800 |
And it uses a combination of LLMs and the Amazon API to find the ideal glasses for you 00:05:47.960 |
and actually links them on there so that you can buy them. 00:05:50.880 |
So, yeah, I just started replying to a bunch of tweets. 00:05:52.880 |
Another one was by my friend Theo who said someone should make an app that kind of auto-generates 00:05:59.680 |
And then my CTO tagged me and was like, CeCe, I love that idea, which translates to build 00:06:12.880 |
So, essentially, you could run git add, you run the CLI tool that I built, AI commit, and 00:06:17.440 |
it analyzes your git diff and produces a little commit message for you that you can then use 00:06:22.700 |
And these are, like, very small, hacky solutions. 00:06:26.000 |
You know, my CTO tagged me at 7:53 p.m. on February 11th, and then less than two hours 00:06:38.860 |
And after I saw it get some attention, I was like, okay, I need to clean this up. 00:06:42.860 |
I need to figure out how to bundle it into an NPM package. 00:06:46.020 |
And so that's what I spent my Monday morning on. 00:06:53.500 |
And, yeah, I kind of bundled it out there and posted it as an NPM package. 00:06:56.960 |
And now I think over 30,000 developers are now using it to commit their messages. 00:07:04.000 |
And it's one of my more popular open source repos. 00:07:06.440 |
There's some PRs that I need to take a look at. 00:07:08.880 |
But, yeah, a bunch of 6,000 stars and about 25 contributors. 00:07:12.840 |
And so this was kind of my exploration with LLMs. 00:07:16.700 |
And so actually I have one more project called the Twitter bio generator. 00:07:20.140 |
And essentially also open source like most of my other projects. 00:07:23.600 |
But you just put in some context about you so we can do like engineer at Microsoft. 00:07:31.340 |
And pick a vibe and it will make your Twitter bio for you. 00:07:44.740 |
But you might take a look at some of these projects and think like this is so simple. 00:07:50.080 |
This is just like this little chat GPT wrapper. 00:07:52.620 |
Like everybody in this room can build this thing. 00:07:56.200 |
But I think we constantly underestimate like the majority of the world are not AI engineers. 00:08:03.680 |
A lot of people haven't even used chat GPT yet. 00:08:06.380 |
So even the simplest apps can do really, really well. 00:08:09.400 |
And so that's a common theme that you might see is like all of these are very simple apps. 00:08:13.720 |
So I launched it and I got about 200,000 visitors that used it. 00:08:17.900 |
I got about 100,000 people in a single weekend. 00:08:20.040 |
And then I hit my open AI bill and I had to shut it down for a little bit. 00:08:27.620 |
And so after this I kind of switched into image to image model. 00:08:30.340 |
So I built this photo restore website that basically unblurs old photos. 00:08:35.060 |
And the motivation behind this actually was my parents sending me these old photos. 00:08:38.860 |
So I'm actually going to put in a picture of my dad doing karate when he was like 18. 00:08:42.500 |
And he sent me this photo and his face is really blurry. 00:08:55.200 |
But hopefully in the space of a few seconds we should see. 00:09:02.040 |
It sends it to that model and it will basically scan like all the faces in a picture and restore 00:09:13.920 |
We'll hopefully see the image come in in a few seconds. 00:09:16.920 |
And if not, I can move on and come back to it. 00:09:29.840 |
And it kind of is my most consistent project. 00:09:31.760 |
It still has about 250,000 people that use it every month. 00:09:36.700 |
Mostly actually in India and Indonesia, which makes a lot of sense because the phone cameras 00:09:40.860 |
there are a lot lower quality, so it makes sense that they would use it. 00:09:44.360 |
But shortly after it went viral, I got a lot of inappropriate images being uploaded. 00:09:48.700 |
And so I had to -- I used actually TensorFlow.js and I published this as a library as well. 00:09:55.400 |
But yeah, I just ended up using this to scan the image and make sure it was safe before I 00:10:02.960 |
We'll actually put them side by side and zoom in a little bit. 00:10:03.960 |
So you can see his face before a little bit blurry. 00:10:06.280 |
And then after the transformation, you can see it really, really clears up. 00:10:09.960 |
And really, another thing I want to stress here is that this is one single API call to 00:10:21.640 |
And he's really getting that and displaying it back to the user. 00:10:24.780 |
So it's such an exciting time to be an AI engineer and to build this stuff because it's so easy 00:10:29.960 |
and it's so impressive to other people as well. 00:10:32.860 |
So I'm going to talk about one more project, and then I'm going to start to talk about some 00:10:37.760 |
And before that, actually, this is like the architecture for most of my apps. 00:10:40.760 |
Really, I use Next.js on the front end and the back end. 00:10:43.760 |
And you saw for restore photos, there's this little upload component that I use. 00:10:51.000 |
And then I send that image URL to my Next.js API route. 00:10:54.540 |
Or you can think of it as just like a Lambda function. 00:10:57.080 |
And then that sends it to my machine learning model, to GFPGAN, to get restored. 00:11:02.080 |
It gets back the image, sends it back to the client, and display it to the user. 00:11:06.180 |
So this is kind of the architecture I use for a lot of my image-to-image side projects. 00:11:14.280 |
But my last one that did the best is actually called Room GPT. 00:11:18.440 |
And it's that idea of if you give it a room -- I'm just going to give it a random living room 00:11:23.180 |
on the Internet, and we're going to select a couple themes. 00:11:25.880 |
But if you give it a room and some themes, the idea is that it will use this, and it will 00:11:34.460 |
It will give you different variations of that specific room, different color themes, different 00:11:42.280 |
You can see it really respects the structure of the room. 00:11:44.880 |
So it looks the same, but it gives you different ideas for these tables and backgrounds and tiles 00:11:51.060 |
So really the motivation behind this project was that I saw somebody else built this before, 00:11:57.420 |
And Stable Diffusion actually does a notoriously bad job at maintaining the original structure 00:12:04.040 |
Like you can give it a room, you can tell it, okay, redesign this in this theme, and the image 00:12:08.640 |
it produces looks nothing like the original room. 00:12:11.240 |
Like the dimensions are messed up, the depth is messed up. 00:12:14.220 |
And then I saw this new model called ControlNet that came out, and ControlNet does really well 00:12:21.200 |
So I saw that, and I was like, oh, this could be cool to build. 00:12:24.260 |
So I put it out there, and I launched it on Twitter, and obviously it's also open source. 00:12:30.620 |
But I launched it on Twitter, and it did pretty well on there, and kind of kept tweeting about 00:12:37.120 |
Because the thing about Twitter, when you tweet about something 24 hours later, it's kind 00:12:41.540 |
So what I like to do is I like to kind of post updates over and over again. 00:12:45.540 |
So we had about 10,000 people that used it in the first 12 hours, and then 30,000 in the 00:12:53.040 |
And then I added some testimonials, may or may not have paid these people. 00:12:57.940 |
And then, yeah, two days later, I had like 90,000 people, and then three days, 270,000 people. 00:13:05.260 |
And I feel like it was just -- it was mostly because I was one of the first people to kind 00:13:09.160 |
of productionize this ControlNet model that had just come out. 00:13:13.260 |
So a lot of people were seeing it for the first time and using it. 00:13:17.040 |
And most of these users, again, I can show you the analytics chart. 00:13:19.820 |
So I have about 6 million people that have visited the site, and about a little over 2 00:13:25.100 |
And you can see the vast majority of the traffic is just Google. 00:13:32.740 |
And, you know, part of that, I think, is because it was open source, and a lot of developers 00:13:36.980 |
liked it and re-shared it, but also the fact that I kept it free. 00:13:40.440 |
So I'm going to talk about how I did that kind of when I transitioned back to slides. 00:13:47.940 |
One thing I want to call out is it's a really good idea to use AI-enhancing tools when building 00:13:55.940 |
We have an AI SDK that you can use over at Vercel. 00:13:59.060 |
And we also have this product called V0 at Vercel. 00:14:05.100 |
And what's really cool is you can kind of see other people generating UIs. 00:14:08.000 |
We can click on this one, for example, which looks like the Apple Notes UI. 00:14:13.500 |
And we can actually fork it -- we can look at the code, which is cool. 00:14:18.200 |
But what's also cool is I can look at these templates or look at other people's code and 00:14:21.540 |
I can fork it, similar to how I can fork a GitHub repo. 00:14:25.800 |
I can kind of add additional prompts to change it. 00:14:28.200 |
Or I can click this button over here and actually select different elements within the page. 00:14:32.900 |
So I can select this div and tell it, like, add three more notes and alternate their colors. 00:14:41.900 |
And what it will do is it will just re-render this specific div. 00:14:45.900 |
It will stream in the data using our Vercel AI SDK. 00:14:50.600 |
And, yeah, hopefully it will keep going and add all this stuff in. 00:14:55.600 |
And, again, as it streams in these components, it adds them inside of this code box over here. 00:15:06.300 |
But eventually, you know, it will add all of the notes here and we can go into the code and kind of copy and paste it. 00:15:15.300 |
You can see it scrolls down because it's still generating. 00:15:17.300 |
Here's, yeah, note three, note four, note five. 00:15:20.300 |
I can go take all this code or run this command and get all the code and kind of iterate on UIs that way. 00:15:25.800 |
So it's just a way to kind of prototype a very early UIs. 00:15:29.600 |
So I'm going to go back to slides right now to talk about some takeaways. 00:15:42.300 |
But there's a lot of really amazing libraries. 00:15:44.300 |
I love using Replicate and Hugging Face and Modal and a lot of these other tools and Brev. 00:15:49.300 |
There's a lot of really cool stuff you can use to kind of train your models or move faster when you're coding. 00:15:57.300 |
I always tell people, don't do any fine tuning and don't build your own models. 00:16:04.000 |
Because, again, the purpose of this talk and everything is like building projects very quickly on weekends. 00:16:14.000 |
If you can't describe your idea to me in five words, like, it might not do great. 00:16:19.000 |
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. 00:16:28.700 |
And I just, like, stare into them and I'm like, that's not going to happen. 00:16:32.200 |
Like, that's not -- you can't build that in a weekend. 00:16:34.700 |
You know, if you can't build a -- so what I tell them is just basically downscope to an MVP and then launch it. 00:16:40.400 |
And even RoomGBT, when I launched that, I had so many machine learning engineers that DMed me on Twitter and were like, oh, my God, like, what models did you train? 00:16:50.400 |
I'm like, dude, I just used, like, an API off the shelf, you know? 00:16:54.100 |
You don't need -- you can do so much with off-the-shelf APIs. 00:16:59.600 |
I mentioned a big part of RoomGBT's success is using ControlNet, which had just come out a couple days before. 00:17:05.600 |
Launching early and iterating is so, so important because you don't know what's going to do well. 00:17:10.600 |
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? 00:17:17.600 |
You can pivot, you can move on to a new idea, and you can just -- yeah, you can just move on to other things. 00:17:23.800 |
And so -- and if it does well, then you can double down on it. 00:17:29.800 |
Another one is making it free and open source. 00:17:31.800 |
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. 00:17:38.300 |
And it will also get you a bunch of followers. 00:17:40.900 |
You know, I gained, like, 25,000 Twitter followers this year just from posting a bunch of these open source projects. 00:17:45.600 |
And they're just all developers wanting to learn and help me out. 00:17:50.800 |
Making things free is a little bit hard, right? 00:17:53.700 |
Because as we know, AI workloads are really, really expensive. 00:18:01.200 |
You know, I have a Twitter audience, so I can go to companies and be like, hey, I want to launch this project. 00:18:07.000 |
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. 00:18:12.000 |
But I've seen a lot of other people replicate this with no followers. 00:18:14.900 |
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. 00:18:21.000 |
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. 00:18:26.200 |
And the GitHub repo is open source, so when companies see this, they're kind of willing to give you some credit. 00:18:34.000 |
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. 00:18:41.000 |
And the last lesson that I have for you is making sure your UI looks good. 00:18:45.000 |
Nobody's going to use your product if it doesn't look good. 00:18:49.800 |
And so I actually spend, like, 80% of my time on the UI. 00:18:54.400 |
Even though these are, like, AI projects, most of the time it's on the UI because you need to make it look good. 00:19:00.000 |
And if you're not a designer, you can just take inspiration from a bunch of different websites. 00:19:07.200 |
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. 00:19:13.000 |
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. 00:19:23.800 |
If you do these five things, I think you can go very, very far. 00:19:27.200 |
And lastly, like, I tell people to use whatever tech stack they want to use. 00:19:30.800 |
I like the tech stack of, like, Next.js and TypeScript and Tailwind. 00:19:34.000 |
It lets me move really quickly and then using Vercel for deploying my apps. 00:19:38.400 |
Two final ideas, and then I'm going to get off the stage so better speakers can come and tell you about their projects. 00:19:43.600 |
But I don't work 24/7, despite what you might think with all of that. 00:19:47.800 |
I actually spend most of my weekends relaxing. 00:19:52.000 |
So I'll take a single weekend and I'll just drop everything and go and try to put out a project. 00:19:57.600 |
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. 00:20:04.600 |
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. 00:20:11.400 |
You know, I kind of drop everything and do that. 00:20:13.400 |
And so if you have flexibility in your life to do that, you can go ahead and try it. 00:20:17.400 |
If you're married or have kids or have other responsibilities, you can experiment with what works for you. 00:20:22.400 |
You know, you can spend a couple hours every weekend here and there. 00:20:25.200 |
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. 00:20:32.000 |
So, yeah, moral of the story is I think, like, do what works for you. 00:20:35.400 |
I'm just kind of sharing what's worked for me. 00:20:37.000 |
And the final thought I want to put out there is that you need to, like, put in the hours. 00:20:42.460 |
I think a lot of people DM me and are like, hey, like, I'm feeling really unmotivated because I'm trying to build these projects and they're taking me so much time. 00:20:53.500 |
And the first thing I ask them is, like, oh, like, I'm sorry to hear that. 00:20:59.380 |
And more often than not, they're like, oh, this is my second project. 00:21:03.900 |
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? 00:21:12.240 |
Like, where, where, it doesn't work like that, you know? 00:21:15.300 |
You have to go to the gym consistently over months to see progress. 00:21:18.040 |
And so the same thing happens with side projects and coding in general. 00:21:21.200 |
And if you're an engineer, that's even better. 00:21:24.580 |
I don't do, I don't write code for most of my time at work and I just learned to code a few years ago. 00:21:33.420 |
You just have to kind of put in the hours and build and good things will happen.