In this article, we will guide you through the process of creating a simple AI image generator using OpenAI's DALL·E 3 API and the Next.js framework. You’ll learn how to set up the project, create an input form for image prompts, generate images, and facilitate downloads—all within a few minutes.
Create a Next.js app: If you haven't created a Next.js app yet, you can do so using the following command:
npx create-next-app my-ai-image-generator
cd my-ai-image-generator
Install Axios: Axios is necessary for making HTTP requests. Install it using:
npm install axios
Set Up Environment Variables:
Create a .env.local
file in the root of your project to store your OpenAI API key:
OPENAI_API_KEY=your_openai_api_key_here
Set Up API Route:
Navigate to the src/app/api
directory and create a new file named generate-image.js
. This will handle image generation requests.
Add the following code to the generate-image.js
file:
import axios from 'axios';
export default async function handler(req, res) (
if (req.method === 'POST') {
const { prompt ) = req.body;
try (
const response = await axios.post('https://api.openai.com/v1/images/generations', {
prompt,
n: 1,
size: "1024x1024"
), (
headers: {
'Authorization': `Bearer ${process.env.OPENAI_API_KEY)`,
'Content-Type': 'application/json'
}
});
res.status(200).json(response.data);
} catch (error) (
res.status(500).json({ error: 'Failed to generate image' ));
}
} else (
res.setHeader('Allow', ['POST']);
res.status(405).end(`Method ${req.method) Not Allowed`);
}
}
Create the Input Form:
In your main page component (e.g., src/app/page.js
), create an input form that allows users to type in prompts and generate images. The basic structure should include:
Here’s a simple example:
import ( useState ) from 'react';
import axios from 'axios';
export default function Home() (
const [prompt, setPrompt] = useState('');
const [imageUrl, setImageUrl] = useState('');
const handleGenerateImage = async () => {
const res = await axios.post('/api/generate-image', { prompt ));
setImageUrl(res.data.data[0].url);
};
return (
<div>
<h1>AI Image Generator</h1>
<input
type="text"
value=(prompt)
onChange=((e) => setPrompt(e.target.value))
placeholder="Enter image prompt here"
/>
<button onClick=(handleGenerateImage)>Generate Image</button>
(imageUrl && (
<div>
<img src={imageUrl) alt="Generated" />
<a href=(imageUrl) download="generated_image.png">Download</a>
</div>
)}
</div>
);
}
Q: What is Next.js?
A: Next.js is a React framework that enables developers to build fast, scalable web applications with server-side rendering and static site generation.
Q: What is the DALL·E 3 API?
A: The DALL·E 3 API is an AI model developed by OpenAI that generates images from textual descriptions.
Q: What do I need to run this image generator?
A: You need a Node.js environment, an OpenAI API key, and a basic understanding of React and Next.js.
Q: How can I install Axios?
A: You can install Axios in your Next.js project using the command npm install axios
.
Q: Can I customize the prompt for generating images?
A: Yes! You can input any textual description in the prompt field to generate corresponding images.
By following these steps, you successfully built a simple AI image generator using the OpenAI DALL·E 3 API and Next.js in just a few minutes. Feel free to expand and customize it further to suit your needs!
In addition to the incredible tools mentioned above, for those looking to elevate their video creation process even further, Topview.ai stands out as a revolutionary online AI video editor.
TopView.ai provides two powerful tools to help you make ads video in one click.
Materials to Video: you can upload your raw footage or pictures, TopView.ai will edit video based on media you uploaded for you.
Link to Video: you can paste an E-Commerce product link, TopView.ai will generate a video for you.