AI Image Generation - DALL-E/Stable Diffusion

Generating images with AI.

OpenAI DALL-E 🎨

1npm install openai

1import OpenAI from 'openai';
2
3const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
4
5async function generateImage(prompt: string) {
6  const response = await openai.images.generate({
7    model: "dall-e-3",
8    prompt,
9    n: 1,
10    size: "1024x1024"
11  });
12
13  return response.data[0].url;
14}
15
16function ImageGenerator() {
17  const [prompt, setPrompt] = useState("");
18  const [imageUrl, setImageUrl] = useState("");
19  const [loading, setLoading] = useState(false);
20
21  const handleGenerate = async () => {
22    setLoading(true);
23    const url = await generateImage(prompt);
24    setImageUrl(url);
25    setLoading(false);
26  };
27
28  return (
29    <div>
30      <textarea
31        value={prompt}
32        onChange={(e) => setPrompt(e.target.value)}
33        placeholder="Describe the image you want to generate..."
34        className="w-full border rounded p-3"
35      />
36      <button
37        onClick={handleGenerate}
38        disabled={loading}
39        className="bg-blue-600 text-white px-4 py-2 rounded"
40      >
41        {loading ? 'Generating...' : 'Generate Image'}
42      </button>
43      {imageUrl && <img src={imageUrl} alt="Generated" className="mt-4" />}
44    </div>
45  );
46}

See you soon! 🚀