The complete source code of this project is on GitHub<\/a> and here\u2019s what it looks like.<\/p>\n\n\n\n Dall-E 3 by OpenAI is an AI image generation<\/a> model that creates realistic images based on text descriptions. The text is converted into a numerical code; then, it\u2019s fed into a powerful image generation model, which utilizes its vast training in text-image pairs to understand the connection between words and visuals. <\/p>\n\n\n\n The model produces a clear and detailed image, ensuring it aligns with the user’s description. Remarkably, DALL-E 3 can generate multiple variations of an image with a single prompt, offering users a range of creative options.<\/p>\n\n\n\n Currently, Dall-E 3 isn\u2019t part of the OpenAI API for free public use, as access is currently limited to ChatGPT Plus, Team, and Enterprise users. <\/strong><\/p>\n\n\n\n To get the most out of this article, you must have the following:<\/p>\n\n\n\n With your Cloudinary and ChatGPT Plus account ready, bootstrap a Next.js app with the command below:<\/p>\n\n\n As you receive prompts to set up the app, make sure to select Typescript<\/strong>, Tailwind CSS<\/strong>, and App Router<\/strong>, as they\u2019re essential for building this project. After making your selections, install the necessary dependencies using the following command.<\/p>\n\n\n These installed packages perform the following tasks:<\/p>\n\n\n\n Once done, head to the This prioritizes AVIF and WebP formats for image optimization. It also allows Next.js to display images served from the endpoint that Cloudinary’s API uses.<\/p>\n\n\n\n![\"Display](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_511,c_scale\/f_auto,q_auto\/v1723240605\/Web_Assets\/blog\/blog-Auto-Generate-User-Avatar-Images-With-AI-and-Cloudinary-in-Next.js-1\/blog-Auto-Generate-User-Avatar-Images-With-AI-and-Cloudinary-in-Next.js-1.png?_i=AA\"){kind=avatar}
<\/figure>\n\n\n\nHow Dall-E 3 Works<\/h2>\n\n\n\n
Prerequisites<\/h2>\n\n\n\n
\n
Set Up the Project<\/h2>\n\n\n\n
Initialize the Project<\/strong><\/h3>\n\n\n\n
npx<\/span> create-next-app<\/span>@latest<\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nnpm<\/span> install<\/span> cloudinary<\/span> react-copy-to-clipboard<\/span> @types<\/span>\/react-copy-to-clipboard react-icons openai<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n\n
cloudinary<\/code>. Provides an interface to interact with Cloudinary.<\/li>\n\n\n\nreact-copy-to-clipboard<\/code>. Provides a React component that enables users to copy texts with a single click.<\/li>\n\n\n\n@types\/react-copy-to=clipboard<\/code>. This is a type definition file for the react-copy-to-clipboard package.<\/li>\n\n\n\nreact-icons<\/code>. Offers a collection of icons (e.g., Font Awesome or Material UI) that can be easily integrated into your application.<\/li>\n\n\n\nopenai<\/code>. Interacts with the OpenAI API.<\/li>\n<\/ul>\n\n\n\nConfigure the OpenAI API<\/strong><\/h3>\n\n\n\n
next.config.js<\/code> file in the project’s root directory and add this code snippet to allow Next.js to display images generated from Cloudinary:<\/p>\n\n\n\n\/** @type {import('next').NextConfig}<\/span> <\/span>*\/<\/span>\nconst<\/span> nextConfig = {\n images<\/span>: {\n formats<\/span>: [\"image\/avif\"<\/span>, \"image\/webp\"<\/span>],\n remotePatterns<\/span>: [\n {\n protocol<\/span>: \"https\"<\/span>,\n hostname<\/span>: \"res.cloudinary.com\"<\/span>,\n },\n ],\n },\n};\nexport<\/span> default<\/span> nextConfig;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nGet the Cloudinary Account and OpenAI API Credentials<\/strong><\/h3>\n\n\n\n
![\"Cloudinary](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_302,c_scale\/f_auto,q_auto\/v1723240602\/Web_Assets\/blog\/blog-Auto-Generate-User-Avatar-Images-With-AI-and-Cloudinary-in-Next.js-2\/blog-Auto-Generate-User-Avatar-Images-With-AI-and-Cloudinary-in-Next.js-2.png?_i=AA\"){kind=avatar}
<\/figure>\n\n\n\n![\"Create](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_511,c_scale\/f_auto,q_auto\/v1723240597\/Web_Assets\/blog\/blog-Auto-Generate-User-Avatar-Images-With-AI-and-Cloudinary-in-Next.js-3\/blog-Auto-Generate-User-Avatar-Images-With-AI-and-Cloudinary-in-Next.js-3.png?_i=AA\"){kind=avatar}
<\/figure>\n\n\n\n![\"App](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_511,c_scale\/f_auto,q_auto\/v1723240593\/Web_Assets\/blog\/blog-Auto-Generate-User-Avatar-Images-With-AI-and-Cloudinary-in-Nextjs-4\/blog-Auto-Generate-User-Avatar-Images-With-AI-and-Cloudinary-in-Nextjs-4.png?_i=AA\"){kind=avatar}
<\/figure>\n\n\n\n