AI इमेज जनरेटर वेबसाइट बनाएँ: टेम्पलेट और GitHub प्रोजेक्ट

ज़्यादातर ट्यूटोरियल AI इमेज जनरेटर वेबसाइट बनाने के बारे में एक स्क्रीनशॉट और एक अस्पष्ट वादे पर खत्म होते हैं। यह गाइड एक काम करने वाले प्रोजेक्ट पर खत्म होती है: एक प्रॉम्प्ट बॉक्स, इमेज मॉडल को कॉल करने वाला सर्वर रूट, एक पोलिंग लूप, रिज़ल्ट व्यू और डिप्लॉय चेकलिस्ट। हर फ़ाइल इसी पेज पर आ जाती है, इसलिए आप उसे एक नए रिपॉज़िटरी में पेस्ट करके GitHub पर पुश कर सकते हैं और उसी दोपहर एक लाइव जनरेटर पा सकते हैं।

यह टेम्पलेट जानबूझकर छोटा रखा गया है। इसमें असली लॉजिक वाली चार फ़ाइलें हैं, कोई डेटाबेस नहीं, कोई लॉगिन प्रोवाइडर नहीं और कोई स्टेट लाइब्रेरी नहीं। इससे इसे एक बार में पढ़ना आसान है और बाद में अकाउंट, हिस्ट्री या वीडियो जोड़ना भी आसान है। अगर आप npm install चला सकते हैं, तो आप इसे शिप कर सकते हैं।

💡 त्वरित उत्तर: एक इमेज जनरेटर वेबसाइट एक फ़ॉर्म है, एक सर्वर रूट जो आपका API टोकन छिपाता है, एक पोलिंग लूप और एक <img> टैग। बाकी सब पॉलिश है।

टेम्पलेट क्या करता है

तैयार साइट एक टेक्स्ट प्रॉम्प्ट लेती है, उसे एक इमेज मॉडल को भेजती है, नतीजे का इंतज़ार करती है और डाउनलोड लिंक के साथ तस्वीर दिखाती है। ब्राउज़र आपका API टोकन कभी नहीं देखता, क्योंकि हर कॉल आपके अपने सर्वर रूट से होकर जाती है।

पूरा रिक्वेस्ट फ़्लो यह है:

1. विज़िटर प्रॉम्प्ट टाइप करता है और बटन दबाता है।
2. पेज आपके सर्वर पर /api/generate को प्रॉम्प्ट भेजता है।
3. आपका सर्वर उसे वैलिडेट करता है और इमेज API पर एक जॉब बनाता है।
4. पेज हर दो सेकंड में /api/generate/{id} से स्टेटस माँगता है।
5. जब स्टेटस succeeded हो जाता है, तो पेज इमेज URL दिखाता है।

एक नज़र में फ़ीचर

किसके लिए उपयोगी है: सोलो डेवलपर को एक पोर्टफ़ोलियो प्रोजेक्ट मिलता है जो सच में तस्वीरें बनाता है। एजेंसियाँ इसे एक दिन में क्लाइंट के लिए ब्रांड कर सकती हैं। प्रोडक्ट टीमों को पूरे प्लेटफ़ॉर्म में निवेश करने से पहले मांग परखने के लिए एक प्रोटोटाइप मिलता है।

टूल्स का सेट और प्रोजेक्ट लेआउट

टूल्स का सेट चुनें

टेम्पलेट में App Router, TypeScript और Tailwind CSS के साथ Next.js का इस्तेमाल होता है। एक फ़्रेमवर्क से पेज और सर्वर रूट एक ही रिपॉज़िटरी में मिल जाते हैं, इसलिए यह पहले प्रोजेक्ट के लिए ठीक है। सर्वर वाला कोई भी स्टैक इसी तरह काम करता है: Express के साथ React, SvelteKit, Nuxt या सादा Node।

चार कमांड में प्रोजेक्ट बनाएँ और उसे GitHub पर डालें:

npx create-next-app@latest ai-image-generator --ts --app --tailwind --eslint
cd ai-image-generator
git init && git add . && git commit -m "Initial template"
gh repo create ai-image-generator --public --source=. --push

प्रॉम्प्ट कॉपी करें

बैकएंड एक टेक्स्ट-टू-इमेज API है। PicassoIA API Replicate कन्वेंशन को फ़ॉलो करता है: POST /v1/models/{owner}/{name}/predictions एक जॉब बनाता है, और GET /v1/predictions/{id} उसका स्टेटस लौटाता है। यह लिखे जाने के समय API चार मॉडल देता है: picassoia/picassoia-image, picassoia/picassoia-image-editor-pro, picassoia/picassoia-video और picassoia/seedance-2.5-lite। अपना टोकन PicassoIA API पेज पर बनाएँ।

फ़ोल्डर ट्री और वेरिएबल

ai-image-generator/
├── app/
│   ├── api/
│   │   └── generate/
│   │       ├── route.ts          # creates the prediction
│   │       └── [id]/route.ts     # returns status and output
│   ├── layout.tsx
│   └── page.tsx                  # renders <Generator />
├── components/
│   └── Generator.tsx             # form, polling, result
├── .env.example
├── .gitignore
└── README.md

प्रॉम्प्ट कॉपी करें

दो एनवायरनमेंट वेरिएबल सब कुछ चलाते हैं:

# .env.example
PICASSOIA_API_TOKEN=pia_sk_replace_me
PICASSOIA_MODEL=picassoia/picassoia-image

प्रॉम्प्ट कॉपी करें

फ़ाइल को .env.local में कॉपी करें और वहाँ अपना असली टोकन डालें। create-next-app हर .env* फ़ाइल को अनदेखा करता है, इसलिए अगर आप रिपॉज़िटरी में उदाहरण फ़ाइल चाहते हैं, तो .gitignore में लाइन !.env.example जोड़ें। कभी भी टोकन ऐसे वेरिएबल में न रखें जिसका नाम NEXT_PUBLIC_ से शुरू होता हो, क्योंकि Next.js उन्हें ब्राउज़र तक भेज देता है।

सर्वर रूट लिखें

प्रेडिक्शन बनाएँ

// app/api/generate/route.ts
import { NextResponse } from "next/server";

const API = "https://api.picassoia.com/v1";
const MODEL = process.env.PICASSOIA_MODEL ?? "picassoia/picassoia-image";

export async function POST(req: Request) {
  const { prompt } = await req.json();
  if (typeof prompt !== "string" || prompt.length < 3 || prompt.length > 4000) {
    return NextResponse.json({ error: "Invalid prompt" }, { status: 400 });
  }

  const res = await fetch(`${API}/models/${MODEL}/predictions`, {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.PICASSOIA_API_TOKEN}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ input: { prompt } }),
  });

  if (!res.ok) {
    return NextResponse.json({ error: "Upstream error" }, { status: 502 });
  }
  const prediction = await res.json();
  return NextResponse.json({ id: prediction.id });
}

प्रॉम्प्ट कॉपी करें

बॉडी Replicate कन्वेंशन को फ़ॉलो करती है, यानी एक input ऑब्जेक्ट जिसमें प्रॉम्प्ट होता है। हर मॉडल के पेज पर अतिरिक्त फ़ील्ड लिखे होते हैं, जैसे आस्पेक्ट रेशियो, जिन्हें आप prompt के बगल में जोड़ सकते हैं। 4,000 कैरेक्टर की जाँच दस्तावेज़ में लिखी प्रॉम्प्ट लिमिट से मेल खाती है, इसलिए रिक्वेस्ट आपके सर्वर से निकलने से पहले ही यूज़र को साफ़ एरर मिल जाता है।

पूरा होने तक पोल करें

जेनरेशन असिंक्रोनस है। पहली कॉल एक id लौटाती है, और आप तब तक स्टेटस माँगते हैं जब तक वह succeeded या failed न कहे।

// app/api/generate/[id]/route.ts
import { NextResponse } from "next/server";

export async function GET(
  _req: Request,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id } = await params;
  if (!/^[A-Za-z0-9_-]+$/.test(id)) {
    return NextResponse.json({ error: "Bad id" }, { status: 400 });
  }

  const res = await fetch(`https://api.picassoia.com/v1/predictions/${id}`, {
    headers: { Authorization: `Bearer ${process.env.PICASSOIA_API_TOKEN}` },
    cache: "no-store",
  });
  const p = await res.json();
  const output = Array.isArray(p.output) ? p.output[0] : p.output;
  return NextResponse.json({
    status: p.status,
    output: output ?? null,
    error: p.error ?? null,
  });
}

प्रॉम्प्ट कॉपी करें

id वाली जाँच ज़रूरी है। इसके बिना विज़िटर ../ सेगमेंट पास करके आपके सर्वर से एक अलग एंडपॉइंट कॉल करवा सकता है, जिसमें आपका टोकन लगा होगा।

एरर और लिमिट संभालें

असली ट्रैफ़िक में तीन तरह की विफलताएँ दिखती हैं:

1. गलत इनपुट: कोई रिक्वेस्ट खर्च करने से पहले 400 लौटाएँ।
2. अपस्ट्रीम एरर या भरी हुई queue: 502 या 429 लौटाएँ और पेज पर retry का संदेश दिखाएँ।
3. धीमी जॉब: लगभग दो मिनट बाद पोलिंग रोकें और यूज़र को बताएँ।

API हर अकाउंट के लिए एक साथ 5 प्रेडिक्शन की अनुमति देता है, जो हर टोकन में साझा होते हैं। अगर आपकी साइट पर एक साथ दस विज़िटर आ जाएँ, तो पाँच इंतज़ार करेंगे। एक छोटी queue जोड़ें या जॉब चलने के दौरान बटन बंद कर दें।

प्रॉम्प्ट पेज बनाएँ

फ़ॉर्म और स्टेट

// components/Generator.tsx
"use client";
import { useState } from "react";

export default function Generator() {
  const [prompt, setPrompt] = useState("");
  const [image, setImage] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function generate() {
    setBusy(true);
    setError(null);
    setImage(null);
    try {
      const start = await fetch("/api/generate", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ prompt }),
      });
      if (!start.ok) throw new Error("Could not start the job");
      const { id } = await start.json();

      for (let i = 0; i < 60; i++) {
        await new Promise((r) => setTimeout(r, 2000));
        const poll = await (await fetch(`/api/generate/${id}`)).json();
        if (poll.status === "succeeded") return setImage(poll.output);
        if (poll.status === "failed" || poll.status === "canceled") {
          throw new Error(poll.error ?? "Generation failed");
        }
      }
      throw new Error("Timed out, try again");
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setBusy(false);
    }
  }

  return (
    <main className="mx-auto max-w-3xl p-6">
      <textarea
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
        maxLength={4000}
        placeholder="A lighthouse at dawn, 35mm film, soft fog"
        className="w-full rounded border p-3"
      />
      <button
        onClick={generate}
        disabled={busy || prompt.length < 3}
        className="mt-3 rounded bg-black px-4 py-2 text-white disabled:opacity-50"
      >
        {busy ? "Generating..." : "Generate"}
      </button>
      {error && <p className="mt-3 text-red-600">{error}</p>}
      {image && <img src={image} alt={prompt} className="mt-6 w-full rounded" />}
    </main>
  );
}

प्रॉम्प्ट कॉपी करें

इसे app/page.tsx में इम्पोर्ट करें और <Generator /> रेंडर करें। npm run dev चलाएँ, localhost:3000 खोलें, कोई प्रॉम्प्ट टाइप करें और आपका काम करने वाला जनरेटर तैयार है।

गैलरी और डाउनलोड

बुनियादी काम चलने के बाद दो बदलाव जोड़ें। इमेज को download एट्रिब्यूट वाले लिंक में लपेटें ताकि यूज़र फ़ाइल सेव कर सकें। फिर हर रिज़ल्ट को localStorage में स्टोर करें, जो { prompt, url } ऑब्जेक्ट्स का एक एरे है, और उसे फ़ॉर्म के नीचे ग्रिड में दिखाएँ। इससे बिना डेटाबेस के हिस्ट्री मिल जाती है।

💡 प्रॉम्प्ट को ही alt टेक्स्ट के रूप में रखें। इससे स्क्रीन रीडर को मदद मिलती है, और आपकी गैलरी को सर्च इंजन के लिए उपयोगी टेक्स्ट मिलता है।

PicassoIA पर Imagen 4 कैसे इस्तेमाल करें

किसी लुक को अपनी साइट में हार्ड-कोड करने से पहले उसे वहाँ परखें जहाँ बार-बार बदलना सस्ता है। PicassoIA वेबसाइट पर हर मॉडल के लिए एक प्लेग्राउंड है, और उसके कंट्रोल एक ही पैटर्न पर चलते हैं: एक प्रॉम्प्ट फ़ील्ड, कुछ सेटिंग्स और एक जेनरेट बटन।

एक टेस्ट प्रॉम्प्ट चलाएँ

1. Imagen 4 पेज खोलें।
2. एक स्ट्रक्चर्ड प्रॉम्प्ट पेस्ट करें: सब्जेक्ट, सेटिंग, लाइट, लेंस और टेक्सचर।
3. अगर मॉडल सपोर्ट करता है, तो 16:9 आस्पेक्ट रेशियो चुनें।
4. जेनरेट दबाएँ और रिज़ल्ट को पूरे आकार में देखें।
5. एक बार में एक ही डिटेल बदलें और फिर से जेनरेट करें।

फ़ोटोग्राफ़िक आउटपुट के लिए एक अच्छा काम करने वाला प्रॉम्प्ट:

घिसी हुई ओक की मेज़ पर काली कॉफ़ी का एक सिरेमिक कप, बाईं ओर से खिड़की की रोशनी, f/2 पर 50mm लेंस, उथला डेप्थ ऑफ़ फ़ील्ड, लकड़ी की दिखती बनावट और भाप, Kodak Portra 400 के रंग।

उस प्रॉम्प्ट का हर हिस्सा एक काम करता है:

तीन मॉडल की तुलना करें

तय करने से पहले कि साइट को कौन-सा मॉडल चलाएगा, वही प्रॉम्प्ट कई मॉडल से चलाएँ। यह लिखे जाने के समय API केवल चार picassoia/* मॉडल देता है, इसलिए इस टेबल के बाकी मॉडल प्लेग्राउंड में लुक चुनने के लिए हैं।

जीतने वाले प्रॉम्प्ट को placeholder एट्रिब्यूट में अपना स्टार्टर टेक्स्ट रखें, और अपने तीन सबसे अच्छे प्रॉम्प्ट को टेक्स्टएरिया के नीचे क्लिक करने योग्य उदाहरण चिप्स बनाएँ। जो विज़िटर अच्छे उदाहरण देखते हैं, वे बेहतर प्रॉम्प्ट लिखते हैं, और बेहतर प्रॉम्प्ट का मतलब है कम बर्बाद जेनरेशन।

बाद में LLM और वीडियो जोड़ें

LLM से कोड का ड्राफ़्ट बनाएँ

ऊपर का पूरा टेम्पलेट आप कोडिंग असिस्टेंट के साथ बना सकते हैं। Claude Sonnet 5 और GPT 5.6 Sol दोनों कोडिंग कामों के लिए सूचीबद्ध हैं, और Gemini 3.5 Flash जल्दी के बदलावों के लिए ठीक है। इस लेख का फ़ोल्डर ट्री पेस्ट करें और एक बार में एक फ़ाइल माँगें, फिर हर लाइन पढ़कर ही उसे commit करें।

छोटे प्रॉम्प्ट को विस्तार दें

ज़्यादातर विज़िटर पाँच शब्द टाइप करते हैं। इमेज कॉल से पहले एक लैंग्वेज मॉडल उन्हें बढ़ा सकता है:

1. route.ts में एक rewrite स्टेप जोड़ें, जो यूज़र का टेक्स्ट Kimi K2.6 जैसे मॉडल को भेजे।
2. उसे निर्देश दें कि वह सब्जेक्ट, लाइट, लेंस और टेक्सचर वाला एक प्रॉम्प्ट लौटाए।
3. वह प्रॉम्प्ट इमेज मॉडल को भेजें और यूज़र को दोनों वर्ज़न दिखाएँ।

नतीजों को एनिमेट करें

वही दो रूट वीडियो भी संभालते हैं। PICASSOIA_MODEL को picassoia/seedance-2.5-lite जैसे वीडियो मॉडल में बदलें, और आउटपुट एक MP4 लिंक बन जाएगा। उसे <video controls> टैग से रेंडर करें और पोलिंग इंटरवल बढ़ाएँ, क्योंकि वीडियो में इमेज से ज़्यादा समय लगता है। पहले विकल्पों की तुलना के लिए Seedance 2.5 Lite पेज और Wan 3 पेज दिखाते हैं कि हर मॉडल क्या बनाता है।

बिना किसी झटके के शिप करें

प्रॉम्प्ट मॉडरेट करें

सार्वजनिक जनरेटर का कुछ ही दिनों में दुरुपयोग होने लगता है। प्रेडिक्शन बनाने से पहले हर प्रॉम्प्ट को एक मॉडरेशन मॉडल से चलाएँ। Llama Guard 4 12B इसी काम के लिए बना है: यह प्रॉम्प्ट को सुरक्षित या असुरक्षित लेबल देता है, और जब वह असुरक्षित कहे तो आप रिक्वेस्ट ब्लॉक कर देते हैं। फ़ॉर्म के नीचे एक साफ़ दिखने वाली शर्तों की सूचना भी जोड़ें।

रेट लिमिट और queue

इन-मेमोरी काउंटर एक ही सर्वर पर काम करता है। सर्वरलेस होस्टिंग पर हर फ़ंक्शन इंस्टेंस की अपनी मेमोरी होती है, इसलिए लिमिटर के लिए एक साझा स्टोर इस्तेमाल करें।

डिप्लॉय और मॉनिटर करें

डिप्लॉय करने में पाँच स्टेप लगते हैं:

1. रिपॉज़िटरी को GitHub पर पुश करें।
2. उसे अपने पसंदीदा होस्टिंग प्लेटफ़ॉर्म में इम्पोर्ट करें।
3. PICASSOIA_API_TOKEN और PICASSOIA_MODEL को एनवायरनमेंट वेरिएबल के रूप में जोड़ें।
4. फ़ंक्शन की अधिकतम अवधि इतनी सेट करें कि आपका पोलिंग रूट पूरा हो सके।
5. लाइव URL खोलें और तीन टेस्ट इमेज जेनरेट करें।

लॉन्च के बाद हर जॉब का स्टेटस लॉग करें (टोकन कभी नहीं) और हर हफ़्ते फ़ेल्योर रेट जाँचें। अचानक बढ़त आमतौर पर मॉडल में बदलाव या किसी लिमिट तक पहुँचने का संकेत होती है। एक छोटी README.md फ़ाइल भी लिखें, जिसमें दोनों वेरिएबल, रन कमांड और एक स्क्रीनशॉट हो, क्योंकि GitHub प्रोजेक्ट पर लोग सबसे पहले README ही देखते हैं।

Picasso IA पर अपना बनाएँ

अब आपके पास सारे हिस्से हैं: टूल्स का सेट, एक फ़ोल्डर ट्री, दो सर्वर रूट, एक प्रॉम्प्ट पेज और एक सेफ़्टी चेकलिस्ट। साइट को पूरा महसूस कराने का सबसे तेज़ तरीका है कि और कोड लिखने से पहले उसका लुक चुन लें।

Picasso IA खोलें, Imagen 4 या FLUX 2 Pro से अपना पहला प्रॉम्प्ट चलाएँ, और तीन सबसे पसंदीदा नतीजे सेव करें। वही प्रॉम्प्ट आपके उदाहरण चिप्स, आपके लैंडिंग पेज और आपके पहले टेस्ट केस बनेंगे। फिर PicassoIA API पेज पर अपना API टोकन बनाएँ, इस लेख का कोड एक नए रिपॉज़िटरी में पेस्ट करें और जेनरेट दबाएँ। आपके अपने डोमेन पर पहली इमेज ही वह पल है जब प्रोजेक्ट असली बनता है, इसलिए वह प्रॉम्प्ट अच्छा चुनें।