DEV Community

Cover image for ๐Ÿš€ How I built AI pictures generator in a GitHub logo style ๐Ÿ˜ป and got featured in GitHub's Twitter and Instagram ๐Ÿคฏ
Igor Kotua
Igor Kotua

Posted on

๐Ÿš€ How I built AI pictures generator in a GitHub logo style ๐Ÿ˜ป and got featured in GitHub's Twitter and Instagram ๐Ÿคฏ

Hi there ๐Ÿ‘‹

My name is Igor and I really like building cool apps ๐Ÿค—

A month ago I saw a very interesting project by Steven Tey - Spirals. It is an app that allows to generate AI pictures with spirals "hidden" in them.

I really liked the idea and went on to build OctoArt - generator of AI pictures in a GitHub logo style.

Example of a picture generate by OctoArt

The project turned out to be quite successful - more than 4.5k pictures have been generated since then and more importantly GitHub posted about the project in their official Twitter and Instagram accounts (yes they have Insta account lol).


How I build OctoArt

As I said earlier, idea of this app came to me after I saw Spirals app. So I just went on and forked it ๐Ÿ™ˆ

It's beauty of open-source, you can just take someones code and they are gonna be fine with it!

I just changed some colors and styles, added my Replicate API key, swapped spiral image with a GitHub logo, changed website logo (my wife created it in ProCreate) and went live with a tweet. Simple as that.

How it works

From the tech side of things, the app is pretty simple. It is built with Next.js app router, Replicate, Vercel KV (Redis) and Blob (S3).

The generation process works like this:

  • User types a prompt
  • We generate unique id using nanoid
  • Prompt together with GitHub logo is sent to Replicate API
  • Once generation is completed (~10 seconds), Replicate sends a webhook back to us together with id
  • In a webhook route we save the image to Vercel Blob and then save the image url into Vercel KV
  • Finally, we show a generated picture to users

You can see all the code on GitHub.

LogoPicture AI

Capitalizing on this success, recently I decided to build and app that allows to generate AI pictures with any logo. It's very early, but I already managed to generate $100 in revenue from a single Hacker News post ๐Ÿคฏ

Check out LogoPicture AI

In the next article I am going to tell about how I built LogoPicture AI with Next.js, Replicate, Supabase and LemonSqueezy. Don't miss it ๐Ÿ˜‰

All the best,
Igor

Top comments (17)

Collapse
 
srbhr profile image
Saurabh Rai

I'm loving it! This thing is awesome @garrrikkotua

Image description

Collapse
 
srbhr profile image
Saurabh Rai

Two roads diverged, and I took the one in the middle.
Embarking on an open source journey. XD

Collapse
 
garrrikkotua profile image
Igor Kotua

That's definitely a right choice ๐Ÿ˜œ

Collapse
 
garrrikkotua profile image
Igor Kotua

Glad you liked it!

Collapse
 
nevodavid profile image
Nevo David

I tried it and it's awesome!

Collapse
 
garrrikkotua profile image
Igor Kotua

Thank you for trying out! I am glad you liked it ๐Ÿ™‚

Collapse
 
scofieldidehen profile image
Scofield Idehen

Would check it out!!!

Collapse
 
fernandezbaptiste profile image
Bap

This is super cool!

Collapse
 
ritirathod0 profile image
Riti Rathod

This is amazing

Collapse
 
garrrikkotua profile image
Igor Kotua

Thank you!

Collapse
 
shreya_gr profile image
Shreya

Great article :)

Collapse
 
garrrikkotua profile image
Igor Kotua

Thank you!

Collapse
 
nathan_tarbert profile image
Nathan Tarbert

Wow this is really cool, thanks for sharing @garrrikkotua!

Collapse
 
garrrikkotua profile image
Igor Kotua

Thank you for the kind words!

Collapse
 
gilarc profile image
Gillar Prasatya

Emejing, wow..

Collapse
 
jrohatiner profile image
Judith

Absolutely great Igor! And so concise. Really highlights how you know what youโ€™re talking about, thanks for a great post!

Collapse
 
shweta profile image
Shweta Kale

This is so cool! How much did it cost to generate 4.5k images using Replicate API?