What is the OpenAI gpt-image-2 model used for according to the lesson?

Generates images from a text description (prompt)

Compiles TypeScript code into JavaScript

Vibe coding with AI course · Module 10: TikTok Clone

AI Image Generation - GPT Image/Stable Diffusion

1 min read

Generating images with AI.

OpenAI GPT Image

The DALL-E models were shut down in the OpenAI API on May 12, 2026. Current image models, such as gpt-image-2, return the image as base64 (the b64_json field) rather than as a URL.

npm install openai

import OpenAI from 'openai';

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

async function generateImage(prompt: string) {
  const response = await openai.images.generate({
    model: "gpt-image-2",
    prompt,
    n: 1,
    size: "1024x1024"
  });

  return `data:image/png;base64,${response.data[0].b64_json}`;
}

function ImageGenerator() {
  const [prompt, setPrompt] = useState("");
  const [imageUrl, setImageUrl] = useState("");
  const [loading, setLoading] = useState(false);

  const handleGenerate = async () => {
    setLoading(true);
    const url = await generateImage(prompt);
    setImageUrl(url);
    setLoading(false);
  };

  return (
    <div>
      <textarea
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
        placeholder="Describe the image you want to generate..."
        className="w-full border rounded p-3"
      />
      <button
        onClick={handleGenerate}
        disabled={loading}
        className="bg-blue-600 text-white px-4 py-2 rounded"
      >
        {loading ? 'Generating...' : 'Generate Image'}
      </button>
      {imageUrl && <img src={imageUrl} alt="Generated" className="mt-4" />}
    </div>
  );
}

See you soon!

Code for this lesson: App.jsx

// Video Recorder
import { useState, useEffect } from 'react';

export default function App() {
  const [isRecording, setIsRecording] = useState(false);
  const [duration, setDuration] = useState(0);
  const maxDuration = 60;

  useEffect(() => {
    let interval;
    if (isRecording) {
      interval = setInterval(() => {
        setDuration(d => {
          if (d >= maxDuration) {
            setIsRecording(false);
            return d;
          }
          return d + 0.1;
        });
      }, 100);
    } else {
      setDuration(0);
    }
    return () => clearInterval(interval);
  }, [isRecording]);

  return (
    <div className="h-screen bg-black flex flex-col">
      {/* Video Preview */}
      <div className="flex-1 relative bg-gradient-to-br from-purple-900 to-blue-900 flex items-center justify-center">
        <div className="text-9xl">◆</div>

        {/* Recording Indicator */}
        {isRecording && (
          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
            <div className="w-20 h-20 border-4 border-red-500 rounded-full animate-pulse"></div>
          </div>
        )}

        {/* Sound Indicator */}
        <div className="absolute top-4 right-4 bg-black/50 px-3 py-2 rounded-full text-white text-sm flex items-center gap-2">
          Pirate's Anthem
        </div>
      </div>

      {/* Controls */}
      <div className="bg-black border-t border-gray-800 p-6">
        {/* Duration Bar */}
        <div className="mb-6">
          <div className="h-1 bg-gray-700 rounded-full overflow-hidden">
            <div
              className={`h-full transition-all ${isRecording ? 'bg-red-500' : 'bg-gray-500'}`}
              style={{ width: `${(duration / maxDuration) * 100}%` }}
            />
          </div>
          <div className="flex justify-between mt-2 text-xs text-gray-400">
            <span>{duration.toFixed(1)}s</span>
            <span>{maxDuration}s</span>
          </div>
        </div>

        {/* Actions */}
        <div className="flex items-center justify-around">
          {/* Effects */}
          <button className="flex flex-col items-center gap-1">
            <div className="w-12 h-12 bg-gray-800 rounded-full flex items-center justify-center text-2xl">
              ◆
            </div>
            <span className="text-xs text-white">Effects</span>
          </button>

          {/* Record Button */}
          <button
            onClick={() => setIsRecording(!isRecording)}
            className={`w-20 h-20 rounded-full border-4 flex items-center justify-center transition ${
              isRecording ? 'border-red-500 bg-red-500' : 'border-white bg-transparent'
            }`}
          >
            {isRecording && <div className="w-8 h-8 bg-white rounded"></div>}
          </button>

          {/* Sounds */}
          <button className="flex flex-col items-center gap-1">
            <div className="w-12 h-12 bg-gray-800 rounded-full flex items-center justify-center text-2xl">
              ◉
            </div>
            <span className="text-xs text-white">Sounds</span>
          </button>
        </div>
      </div>
    </div>
  );
}

Spotted a mistake in this lesson?

Check yourself

Answer the questions from this lesson. Pick an answer to see right away whether it is correct.

1. What is the OpenAI gpt-image-2 model used for according to the lesson?
2. Which model name does the image generation code use?

Hands-on tasks in the game

Horizontal ordering
Arrange the start of the OpenAI image generation call:

OpenAI GPT Image

Check yourself

Hands-on tasks in the game

Useful articles