About/Caveats

About this project and some caveats.

About

This project is an exercise in absurdity by Andy McGuinness. Take with a large grain of salt.

Code.

Stack

This project is built on Next.js using the ever-awesome Framer Motion and Tailwind CSS. It also makes heavy use of OpenAI's API.

Credits

In addition to the stack listed here, there's a few repos/websites I could not have done this without.

The first is Brad Traversy's nodejs-openai-image. This provided the groundwork for what I've done here. Though I've bastardized it pretty badly, this project would never have gotten off the ground without this repo. Cheers to you, Brad.

I also made heavy use of LogRocket's blog. Several tutorials they provided were fundamental to the success of this project. Thanks y'all.

I'd also like to shout out the Side Project Generator, where this idea came from to begin with. If you're curious, my words were "Tea" and "Copywriting".

The spinning squares on the hero are thanks to Bjorn Rombaut, and the fun-colored title is from Flowbite.

Caveats

Why is the loading time so long?

The answer there is pretty simple: to maximize the congruence between the image and the text, I make three calls to OpenAI's API: a first one to get a product name, and from there, one to generate the text from that product name, and one to generate the image from that product name. Yes, it increses the latency quite a bit, but it also ups the funny factor. Trade-offs.

Can I make a product less imaginary?

I mean... by all means. I'd check with OpenAI about using their intellectual property first, though.

Can I take this idea and do ______?

Sure! Please just fork the code, first -- I'd love to see what people do with the idea.