In this project, we will use OpenAI and the DALL-E model to create a web app that will generate images from scratch based on the entered text.

💻 Code:
https://github.com/bradtraversy/nodejs-openai-image

📄OpenAI Docs:
https://beta.openai.com/

⭐ All Courses:
https://traversymedia.com

💖  Show Support
Patreon: https://www.patreon.com/traversymedia
PayPal: https://paypal.me/traversymedia

👇 Follow Traversy Media On Social Media:
Twitter: https://twitter.com/traversymedia
Instagram: https://www.instagram.com/traversymedia
Linkedin: https://www.linkedin.com/in/bradtraversy

Timestamps:
0:00 - Intro
2:00 - Setup & Install Dependencies
3:33 - Express Server & ENV Variables
6:03 - Route & Controller
9:58 - OpenAI Library Request/Response
15:17 - Request Body Data
19:34 - Frontend Setup
24:00 - Form Event Listener
26:38 - GenerateImageRequest() Function
31:45 - Display Image in DOM
33:20  - Using The App & Outro

Build An AI Image Generator With OpenAI & Node.js

Weather apps are one of the best projects to build as a beginner since they teach you tons of concepts around utilizing APIs and transforming complex data. They also generally have a ton of tricky CSS as well. In this video I will show you how to build a simple weather app that doesn’t even need a server to work.

JavaScript Simplified Course: https://javascriptsimplified.com


📚 Materials/References:

GitHub Code: https://github.com/WebDevSimplified/js-weather-app
JavaScript Simplified Course: https://javascriptsimplified.com
Why I Don’t Use Class Selectors In JavaScript Article: https://blog.webdevsimplified.com/2019-10/do-not-use-class-selectors-in-javascript


🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00 - Introduction
00:50 - Setup
02:35 - Header HTML
07:32 - Header CSS
12:37 - Day Section HTML
14:49 - Day Section CSS
16:40 - Hour Section HTML
19:29 - Hour Section CSS
20:56 - HTML Templates
23:09 - Connecting To The API
28:10 - Transforming API Data
39:10 - Rendering The  Data
52:52 - Getting The User’s Location


#WeatherApp #WDS #JavaScript