AI Image Generation Trong Frontend: Integrate DALL-E Với Next.js

AI image generation không chỉ dành cho designers nữa. Với DALL-E API, frontend devs có thể build powerful image creation features trực tiếp trong web app — từ thumbnail generation đến product mockups.

Setup DALL-E với Next.js

OpenAI cung cấp simple API cho image generation. Tạo API route để proxy requests (đừng bao giờ expose API key ở client):

// app/api/generate-image/route.ts
import OpenAI from "openai";

const openai = new OpenAI();

export async function POST(req: Request) {
  const { prompt, size = "1024x1024", quality = "standard" } = await req.json();

  if (!prompt || prompt.length > 1000) {
    return Response.json({ error: "Invalid prompt" }, { status: 400 });
  }

  const response = await openai.images.generate({
    model: "dall-e-3",
    prompt,
    n: 1,
    size: size as "1024x1024" | "1792x1024" | "1024x1792",
    quality: quality as "standard" | "hd",
  });

  return Response.json({
    url: response.data[0].url,
    revisedPrompt: response.data[0].revised_prompt,
  });
}

Image Generator Component

Build UI cho phép users nhập prompt và xem kết quả:

// components/image-generator.tsx
"use client";
import { useState } from "react";
import Image from "next/image";

export function ImageGenerator() {
  const [prompt, setPrompt] = useState("");
  const [imageUrl, setImageUrl] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function handleGenerate() {
    setLoading(true);
    setError(null);
    try {
      const res = await fetch("/api/generate-image", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ prompt }),
      });
      if (!res.ok) throw new Error("Generation failed");
      const data = await res.json();
      setImageUrl(data.url);
    } catch (err) {
      setError("Không thể generate image. Thử lại.");
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="max-w-2xl mx-auto space-y-6">
      <div className="flex gap-2">
        <input
          value={prompt}
          onChange={(e) => setPrompt(e.target.value)}
          placeholder="Mô tả hình ảnh bạn muốn tạo..."
          className="flex-1 px-4 py-2 border rounded-lg"
        />
        <button
          onClick={handleGenerate}
          disabled={loading || !prompt}
          className="px-6 py-2 bg-purple-600 text-white rounded-lg"
        >
          {loading ? "Đang tạo..." : "Generate"}
        </button>
      </div>
      {error && <p className="text-red-500">{error}</p>}
      {imageUrl && (
        <div className="relative aspect-square rounded-xl overflow-hidden">
          <Image src={imageUrl} alt={prompt} fill className="object-cover" />
        </div>
      )}
    </div>
  );
}

Optimization và Best Practices

• Caching: DALL-E URLs expire sau 1 giờ. Download và store image trong S3/Cloudflare R2 ngay sau khi generate
• Rate limiting: Implement per-user rate limit để control costs — DALL-E 3 costs /bin/bash.04-0.08 per image
• Content moderation: DALL-E có built-in safety filters, nhưng bạn nên add thêm prompt validation ở server
• Progressive loading: Show skeleton placeholder while generating (thường mất 10-20 giây)
• Size options: Cho user chọn size phù hợp — square cho avatars, landscape cho banners

Use Cases Thực Tế

• Blog thumbnail generator cho content creators
• Product mockup tool cho e-commerce
• Social media image creator
• Custom illustration generator cho documentation

Image generation API đã mature đủ để integrate vào production apps. Key là control costs thông qua rate limiting và caching. Start small, measure usage, rồi scale.