ASAL AI

Aplikasi Gambar AI (Image Generation)

Bangun studio gambar mini: prompt → gambar, dengan pilihan gaya, ukuran, dan riwayat hasil. Termasuk cara menangani biaya dan abuse.

Next.jsImage Generation APIObject storage≈ 75 menit

Aplikasi gambar itu demo paling memukau untuk klien — dan paling gampang bocor biaya kalau tidak dijaga. Project ini mencakup keduanya.

1. API generasi gambar

Provider besar punya endpoint serupa (OpenAI Images / Gemini Imagen / Stable Diffusion self-host). Pola dasar:

const res = await fetch(
  `${process.env.AI_BASE_URL}/images/generations`,
  {
    method: "POST",
    headers: {
      "content-type": "application/json",
      authorization: `Bearer ${process.env.AI_API_KEY}`,
    },
    body: JSON.stringify({
      model: process.env.AI_IMAGE_MODEL,
      prompt: promptFinal,
      size: "1024x1024",
      n: 1,
    }),
  }
);
const { data } = await res.json();
const urlGambar = data[0].url; // atau data[0].b64_json

2. Rekayasa prompt gaya

Kualitas gambar sangat ditentukan prompt. Bangun pilihan gaya di UI yang menambahkan sufiks ke prompt user:

const GAYA = {
  foto: "fotorealistis, pencahayaan natural, kamera 50mm",
  ilustrasi: "ilustrasi flat design, warna cerah, garis bersih",
  cat_air: "lukisan cat air, tekstur kertas, warna lembut",
};
const promptFinal = `${promptUser}, ${GAYA[pilihanGaya]}`;

Ini teknik yang baik: user tinggal memilih, sistem yang jago prompt.

3. Penjaga biaya — wajib

Generasi gambar mahal (puluhan kali lebih mahal dari teks). Tanpa pagar, satu user iseng = tagihan bengkak:

  • Rate limit per IP/user — mis. 10 gambar/jam (pola rate-limit dari situs ini).
  • Login dulu untuk aplikasi publik.
  • Queue — antrikan tugas (mis. BullMQ + Redis), proses berurutan, batasi paralel.
  • Cache prompt — prompt identik → kembalikan hasil lama.

4. Penyimpanan

URL provider biasanya kedaluwarsa. Unduh gambarnya, simpan di object storage (S3/R2/MinIO), catat URL permanen + metadata (prompt, gaya, pemilik) di database. Riwayat galeri user dibangun dari tabel itu.

5. Moderasi

API provider umumnya sudah memblokir konten terlarang, tapi tambahkan lapisanmu sendiri: daftar kata terlarang sebelum kirim, dan tanda air/logo pada hasil untuk aplikasi publik.

Tantangan

Tambahkan mode "variasi": kirim gambar hasil sebelumnya sebagai referensi edit (image-to-image), dan tombol "acak gaya" yang memilih kombinasi gaya + lensa + suasana secara acak.