Ich habe eine Bildgenerierungs-App mit Next.js und OpenAI API-DALL · E 3 (Tailwind CSS kompatibel) erstellt.

$ npx create-next-App@neueste Bild-Generator-Starter-TypePescript ✔ Möchten Sie Eslint verwenden? … Nein / Ja ✔ Möchten Sie Rückenwind -CSS verwenden? … Nein / Ja ✔ Möchten Sie Ihren Code in einem SRC / ` -Verzeichnis? … Nein / Ja ✔ Möchten Sie App -Router verwenden? (Empfohlen)… Nein / Ja ✔ Möchten Sie Turbopack für `Next Dev` verwenden? … Nein / Ja ✔ möchten Sie den Import -Alias (`@ /*` standardmäßig) anpassen? … Nein / Ja Erstellen einer neuen nächsten.js-App in / bildgeneratorstarter. Verwenden von NPM. Initializing project with template: app-tw Installing dependencies: - react - react-dom - next Installing devDependencies: - typescript - @types/node - @types/react - @types/react - @types/react-dom - @tailwindcss/postcss - tailwindcss - eslint - eslint-config-next - @eslint/eslintrc added 336 packages, and audited 337 Pakete in 16S 137 Pakete suchen nach Finanzmitteln, die "NPM Fund" für Details gefunden haben. Erfolg! Erstellte Bildgenerator-Starter bei /Bild-Generator-Starter

CD-Bild-Generator-Starter

Openai_api_key = sk -... openai_model = dall-e-3 openai_image_size = 1024x1024 openai_image_quality = Standard

NPM Run Dev

"Client verwenden"; importieren {usestate} aus "react"; Bild von "Next/Bild" importieren; Standardfunktion exportieren home () {// Status für Benutzereingaben (Bildaufforderung) // Die Eingabeaufforderung zur Bildgenerierung, die von der Benutzer const [Eingabeaufforderung, setPrompt] = usustate ("") eingegeben wurde; // Geben Sie generierte Bild -URL // URL der generierten Bild const [imageurl, setImageurl] = usestate (""); // Ladeantriebszustand // Ladeflag -const [Laden, Setloading] = Usestate (false); // Fehlermeldungszustand // zum Speichern von Fehlermeldungen const [Fehler, setError] = usustate (""); // Bildgenerierungsanforderung verwandeln // Bildgenerierungsanforderung const GenerateImage = async () => {if (! Prompt.trim ()) return; // Status vor Anfrage zurücksetzen // Status vor der Anforderung SETLOADING (TRUE) initialisieren; setError (""); setImageurl (""); Versuchen Sie {// Anforderung an interne API // Anforderung an interne API senden (/api/bild) const res = act fetch ("/api/bild", {methode: "post", header: {"content-type": "application/json"}, body: json.stringify ({{prompt}),}); const data = warte res.json (); if (res.ok && data.imageurl) {setImageUrl (data.imageurl); } else {setError (data.Error || "Image nicht generiert."); }} catch (e) {console.Error ("Fehler:", e); setError ("Ein unerwarteter Fehler ist aufgetreten"); } endlich {setloading (false); }}; zurückkehren (<main className="min-h-screen bg-gray-900 text-gray-100 flex items-center justify-center px-4 py-8"><div className="w-full max-w-xl bg-gray-800 rounded-xl shadow-lg p-6 space-y-6"> {/ * Title */}<h1 className="text-2xl font-bold text-center text-white"> AI -Bildgenerator</h1> {/ * Eingabeaufforderung/Eingabeaufforderung Eingabefeld */}<div className="space-y-2"> <label htmlFor="prompt" className="block text-sm font-medium text-gray-300" >Geben Sie Ihre Bildaufforderung ein</label><textarea id="prompt" rows={3} value={prompt} onChange={(e) => setPrompt (e.target.Value)} className = "W-Full P-3 Round-Lg Bg-Gray-700 Border-Gray-600 Text-White Focus: Umriss-2-Fokus: Ring-2 Fokus: Ring-Green-400-Größen-None" Placeholder = ", z. onclick = {generateImage} deaktiviert = {laden} className = "w-full py-3 gerundet-lg bg-Green-500 schweben: bg-green-600 text-schwarz-font-semibold deaktiviert: Deckkraft-50-Übergang"> {laden? "Generieren ...": "Bild generieren"} </button> {/ * Fehlermeldung/Fehleranzeige */} {error && (<div className = "text-red-400 text-sm text-center"> {error} </div>)} {/ * Bildanzeige/Bild-Anzeige */{ImageRl && (<Div-Classname h- [512px] "> <image src = {imageurl} alt =" generiertes result "fill unoptimierte className =" gerundet-lg-Objekt-Contain-Bordergrad-700 "/> </div>)} </div> </Main>); }

const [prompt, setprompt] = usustate (""); const [imageurl, setImageurl] = usustate (""); const [laden, setloading] = usustate (false); const [Fehler, setError] = usustate ("");

const generateImage = async () => {if (! prompt.trim ()) return; setloading (true); setError (""); setImageurl (""); try {const res = warte fetch ("/api/image", {methode: "post", header: {"content-type": "application/json"}, body: json.stringify ({prompt}),}); const data = warte res.json (); if (res.ok && data.imageurl) {setImageUrl (data.imageurl); } else {setError (data.Error || "Image nicht generiert."); }} catch (e) {console.Error ("Fehler:", e); setError ("Ein unerwarteter Fehler ist aufgetreten"); } endlich {setloading (false); }};

<textarea id="prompt" rows={3} value={prompt} onChange={(e) =>setPrompt(e.target.value)} className="w-full p-3 rounded-lg bg-gray-700 border border-gray-600 text-white focus:outline-none focus:ring-2 focus:ring-green-400 resize-none" placeholder="eg A cat surfing on waves, digital art" /> <button onClick={generateImage} disabled={loading} className = "W-Ful Py-3 Round-LG BG-Green-500 Schwebe: BG-Green-600 Text-schwarz-Schrift-Semibold Deaktiviert: Opazität-50-Übergang"> {Laden? "Generieren ...": "Bild generieren"} </button>

{Fehler && (<div className="text-red-400 text-sm text-center"> {Fehler}</div> )} {imageUrl && (( <div className="mt-4 relative w-full h-[512px]"><Image src={imageUrl} alt="Generated result" layout="fill" className="rounded-lg object-contain border border-gray-700" /></div> )}

// src/app/api/image/Route.ts importieren {nexTrequest, nexTesponse} aus "next/server"; // HANDLER für die Bildgenerierung mithilfe von OpenAI -API // Bilder mit OpenAI -API -Post -Handler -Exportieren von Async -Funktionspost (req: nexTrequest) {// Die Eingabeaufforderung aus der Anforderungsgremium analysieren // die Eingabeaufforderung aus der Anforderungskörper -Konstant {Eingabeaufforderung} = uaait req.json () abrufen; // Eingabe validieren // Überprüfen Sie, ob die Eingabeaufforderung angegeben ist, wenn (! Eingabeaufforderung) {return nexTesponse.json ({Fehler: "Eingabeaufforderung ist erforderlich"}, {Status: 400}); } try {// Konfiguration aus Umgebungsvariablen (mit Fallback -Werten) // Einstellungen aus Umgebungsvariablen (wenn nicht der Standardwert) const model = process.env.openai_model || "Dall-e-3"; const size = process.env.openai_image_size || "1024x1024"; const quality = process.env.openai_image_Quality || "Standard"; // Anfrage an OpenAIs Bildgenerierungendpunkt senden // Anforderung an OpenAIs Bildgenerierung Endpunkt const response = warte fetch ("https://api.openai.com/v1/images/generations", {methode: "post", headers: {Autorisierung: `Bearer $ {{{Antrag. Körper: json.stringify ({modell, // EG, "Dall-e-3" Eingabeaufforderung, Eingabeaufforderung des Benutzers für die Größe der Bildgenerierung, // z. const data = warte auf response.json (); // API -Fehlerantwort verwalten // Was tun, wenn ein API -Fehler zurückgegeben wird, wenn (data.Error) {console.Error ("OpenAI -API -Fehler:", Data.Error); return nexTesponse.json ({Fehler: "Bildgenerierung fehlgeschlagen"}, {Status: 500}); } // Die generierte Bild -URL extrahieren // die URL des generierten Bilds const imageurl = data.data?.[0?.url abrufen; // Die Bild -URL an den Client zurückgeben // Die Bild -URL an den Client zurückgeben. } catch (error) {// Unerwartete Serverfehler verwandeln // Unerwartete Serverfehler Console.Error ("Server -Fehler:", Fehler); return nexTesponse.json ({error: "Internal Server error"}, {Status: 500}); }}

importieren {nexTrequest, nexTesponse} aus "next/server"; Exportieren Sie die asynchronisierende Funktion post (req: nexTrequest) {const {prompt} = warte req.json ();

const response = actait fetch ("https://api.openai.com/v1/images/generations", {methode: "post", Header: {Autorisierung: `Bearer $ {process.env.openai_api_key}`, "Inhalt-type": "Anwendung/JSON,},}, Body: Json: JON. process.env.openai_model ||. const data = warte auf response.json ();

  if (data.Error) {console.Error (data.Error); return nexTesponse.json ({Fehler: "Bildgenerierung fehlgeschlagen"}, {Status: 500}); } const imageurl = data.data?.[0?.url; return nexTesponse.json ({imageurl}); }