Image Generation with OpenAI DALL·E 3 & SvelteKit! ⏱️ Chrono App 🔴 LIVE Coding & Chill

ChatGPT has had integrated image generation with DALL·E for a while, but… Can we wrap the OpenAI API to give our users something better? 🤔

We’ll pick up our helper app for creators called Chrono, and see if we can add functionality to suggest and render some interesting thumbnails!

Another important thing we’ll be implementing today: A download button that “just works ™”!

🚀 Click around the app yourself: https://chronokit.vercel.app/
💻 See the code (private repo 😱): https://github.com/johnnify & https://github.com/johnnify/chrono

If you’re a beginner, you may want to start with our Portfolio "Paulina Puppers" series, and end up with the same or an equivalent project: https://www.youtube.com/watch?v=9_y1J_4BKts&list=PLD9qSm-W5DLrKMChNEir_3kR4EE5e7FrK&index=1

No need to watch the previous episode, but this series playlist is: https://www.youtube.com/watch?v=xSPC7vbsG50&list=PLD9qSm-W5DLov165iP1cb5eupEgg4YswT&index=1

Check around the channel for more playlists and increasingly complicated tech stack choices 🙌

— JOHNNIFY PREMIUM —
Get this repository AND MORE with Johnnify Premium: https://johnnify.com/premium
— 🙌🙌🙌 —

— COMMUNITY —
Our DISCORD SERVER 👾: https://discord.gg/eR5Q52Sfm3
— 🥳🥳🥳 —

— Agenda —
✅ What are we doing today? Programmatic image generation?
✅ What was the Chrono app again?
✅ Let’s add a “give me thumbnails!” button to our UI!
✅ Let’s create the OpenAI client and send an image generation request: https://platform.openai.com/docs/api-reference/images/create
✅ Rendering our generated thumbnails!
✅ Adding a download 💾 button / anchor: https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/download
✅ What about image edits and variations? https://platform.openai.com/docs/api-reference/images/createEdit
✅ Feature Flagging!
✅ Final 🥳 DEMO + LIKE 💜 SUBSCRIBE
— HAVE FUN —

No affiliations whatsoever: if I show something, you know you're hearing my unfiltered thoughts 😄

— Highlighted software —
OpenAI: https://openai.com/
SvelteKit: https://kit.svelte.dev/
Turso: https://docs.turso.tech/introduction
Playwright: https://playwright.dev/
Tailwind: https://tailwindcss.com/
Vercel: https://vercel.com/johnnify

My own website: https://magrippis.com/

Search for `@jmagrippis` to find me on socials like Instagram & Twitter! And remember our DISCORD SERVER 😉: https://discord.gg/eR5Q52Sfm3

Between the comment section and the socials, let me know **somewhere** what you’d like me to cover next 🙌

Stream number 129!

— TIMESTAMPS —
00:00 - What are we doing today? Programmatic image generation?
5:00 - What was the Chrono app again?
12:15 - Let’s add a “give me thumbnails!” button to our UI!
24:46 - Let’s create the OpenAI client and send an image generation request
58:55 - Rendering our generated thumbnails!
1:07:06 - Base64-encoded vs direct image urls?
1:14:08 - Cache responses!
1:24:10 - Adding a download 💾 button / anchor
1:35:58 - What about image edits and variations?
1:38:08 - Feature Flagging!
1:51:11 - Final 🥳 DEMO + LIKE 💜 SUBSCRIBE

Видео Image Generation with OpenAI DALL·E 3 & SvelteKit! ⏱️ Chrono App 🔴 LIVE Coding & Chill канала Johnny Magrippis