So erstellen Sie einen Bildgenerator in React mithilfe der DALL-E-API

Künstliche Intelligenz wird immer besser und kann jetzt erstaunliche Bilder erstellen. Ein aktuelles virales Beispiel zeigt die reichsten und einflussreichsten Personen der Welt in zerrissenen Kleidern, die in einem Slum leben. Beeindruckend an den Bildern ist die hohe Detailtreue, die sowohl die Menschen als auch ihre Umgebung einfängt.

Sprachmodelle wie DALL-E und Midjourney treiben diese Bildgenerierungsfunktionen voran, indem sie Textbeschreibungen als Eingabe verwenden und fesselnde Bilder erzeugen.

Erfahren Sie, wie Sie die DALL-E-API von OpenAI integrieren, um Bilder in einer React-Anwendung zu generieren.

Bilderzeugung mit dem DALL-E-Sprachmodell von OpenAI

Wie erzeugt das DALL-E-Sprachmodell eigentlich Bilder? Ohne zu tief in die Komplexität der KI-Bilderzeugung einzutauchen, interpretiert DALL-E zunächst die Textbeschreibungen, die ihm als Eingaben zugeführt werden, mithilfe der Verarbeitung natürlicher Sprache (NLP). Es rendert dann ein realistisches Bild, das der gegebenen Beschreibung sehr nahe kommt.

Die Eingabeaufforderungen können Textbeschreibungen einer Person, eines Objekts oder einer Szene umfassen. Darüber hinaus kann es auch Details wie eine bestimmte Farbe, Form und Größe enthalten. Unabhängig von der Komplexität oder Einfachheit des Eingabetexts generiert DALL-E ein Bild, das der Eingabebeschreibung sehr nahe kommt.

Es ist wichtig zu beachten, dass das Sprachmodell, genau wie andere Modelle, mit einem großen Datensatz trainiert wurde mit Millionen von Bilddaten, um zu lernen, wie man fotorealistische Bilder aus Vorgegebenem identifiziert und generiert Eingänge.

Erste Schritte mit der DALL-E-API von OpenAI

Die DALL-E-API von OpenAI ist als öffentliche Betaversion verfügbar. Um die API zur Verwendung in Ihrer React-Anwendung zu integrieren, benötigen Sie einen Schlüssel für die API von OpenAI. Geh 'rüber zu OpenAIund melden Sie sich auf Ihrer Kontoübersichtsseite an, um Ihren API-Schlüssel zu erhalten.

Sobald Sie sich angemeldet haben, klicken Sie auf das Benutzerprofil-Symbol oben rechts auf Ihrer Übersichtsseite. Wählen Sie anschließend aus und klicken Sie auf API-Schlüssel anzeigen.

Klicken Sie auf der Seite mit den API-Schlüsseleinstellungen auf die Neuen geheimen Schlüssel erstellen Schaltfläche, geben Sie einen Namen für Ihren API-Schlüssel ein und klicken Sie auf Geheimen Schlüssel erstellen um Ihren API-Schlüssel zu generieren.

Erstellen Sie ein React-Projekt

Führen Sie die folgenden Befehle auf Ihrem Terminal aus, um lokal ein neues React-Projekt zu erstellen. Beachten Sie, dass Node.js installiert sein sollte.

In diesen beiden Artikeln erfahren Sie, wie das geht Installieren Sie Node.js unter Windows Und wie man Node.js auf Ubuntu installiert.

mkdir React-Projekt 
cd React-Projekt
npx create-react-app Bildgenerator-App
cd bildgenerator-app
npm starten

Alternativ können Sie anstelle des Befehls create-react-app verwenden Vite, um dein React-Projekt einzurichten. Vite ist ein Build-Tool zum schnellen und effizienten Erstellen von Webanwendungen.

Integrieren Sie die DALL-E-API von OpenAI, um Bilder zu generieren

Sobald Sie Ihre React-Anwendung eingerichtet und ausgeführt haben, installieren Sie die Node.js-Bibliothek von OpenAI zur Verwendung in Ihren React-Anwendungen.

npm installiere openai

Erstellen Sie als Nächstes im Stammverzeichnis Ihres Projektordners eine neue .env Datei, die Ihren API-Schlüssel enthält.

REACT_APP_OPENAI_API_KEY = "API-SCHLÜSSEL"

Sie finden den Code dieses Projekts darin GitHub-Repository.

Erstellen Sie eine Image Generator-Komponente

Im /src Verzeichnis, erstellen Sie einen neuen Ordner, benennen Sie ihn Komponenten, und erstellen Sie darin eine neue Datei mit dem Namen ImageGenerator.js. Fügen Sie dieser Datei den folgenden Code hinzu.

Beginnen Sie mit dem Import der erforderlichen Module:

importieren'../App.css'; 
importieren { useState } aus"reagieren"; 
importieren { Konfiguration, OpenAIApi } aus"öffnen";

Das Konfigurationsmodul konfiguriert den API-Client von OpenAI für die Verwendung, während das OpenAIApi-Modul Methoden zur Interaktion mit der API von OpenAI bereitstellt. Diese beiden Module ermöglichen den Zugriff und die Nutzung der Funktionen von DALL-E über die React-Anwendung.

Definieren Sie als Nächstes eine funktionale Komponente und fügen Sie den folgenden Code hinzu:

FunktionBildgenerator() {
konst [Eingabeaufforderung, setPrompt] = useState("");
konst [Ergebnis, setResult] = useState("");
konst [Laden, setLoading] = useState(FALSCH);
konst [Platzhalter, setPlatzhalter] = useState(
"Suche mit Pinseln nach einem Löwen, der das Mona-Lisa-Gemälde malt ..."
 );
konst Konfiguration = neu Aufbau({
 apiKey: process.env. REACT_APP_OPENAI_API_KEY,
 });

konst openai = neu OpenAIApi (Konfiguration);

konst GenerateImage = asynchron () => {
 setPlatzhalter(„Suche ${Eingabeaufforderung}..`);
 setLoading(WAHR);
versuchen {
konst res = erwarten openai.createImage({
 Aufforderung: Aufforderung,
 N: 1,
 Größe: "512x512",
 });
 setLoading(FALSCH);
 setResult (res.data.data[0].url);
 } fangen (Fehler) {
 setLoading(FALSCH);
Konsole.Fehler(`Fehler beim Generieren des Bildes: ${error.response.data.error.message}`);
 }
 };

Dieser Code definiert eine aufgerufene React-Funktionskomponente Bildgenerator. Die Komponente verwendet mehrere Zustandsvariablen, um die Eingabeaufforderung, das Ausgabeergebnis, den Ladestatus und den Platzhaltertext zu verwalten.

Die Komponente erstellt auch eine Aufbau -Objekt für den OpenAI-API-Client, das den aus der Umgebungsvariablen abgerufenen API-Schlüssel enthält.

Das Asynchrone Bild erzeugen Die Funktion wird ausgeführt, wenn der Benutzer auf eine Schaltfläche klickt und die Benutzeraufforderung weitergibt.

Dann ruft es die openai.createImage Methode zum Generieren eines Bildes basierend auf der angegebenen Eingabeaufforderung. Diese Methode gibt ein Antwortobjekt zurück, das die generierte Bild-URL enthält.

Wenn der API-Aufruf erfolgreich ist, aktualisiert der Code die Ergebnis state-Variable mit der URL und setzt den Ladestatus auf FALSCH. Wenn der API-Aufruf fehlschlägt, wird der Ladestatus trotzdem auf gesetzt FALSCH, protokolliert aber auch eine Fehlermeldung in der Konsole.

Rendern Sie schließlich die React JSX-Elemente, aus denen die Image Generator-Komponente besteht.

zurückkehren (
"Container">
 { Wird geladen? (
 <>
Bild wird generiert... Bitte warten...</h3>
 </>
 ): (
 <>
Generieren Sie ein Bild mit Open AI API</h2>


 Klassenname="App-Eingabe"
 Platzhalter={Platzhalter}
 onChange={(e) => setPrompt (e.target.value)}
 Zeilen="10"
 cols="100"
 />
Bild erzeugen</button>
 { Ergebnis.Länge > 0? (
"Ergebnisbild" src={Ergebnis} alt="Ergebnis" />
 ): (
 <>
 </>
 )}
 </>
 )}
 </div>
 )
}
ExportStandard Bildgenerator

Der Code dieser Komponente rendert abhängig vom Wert von bedingt verschiedene Elemente Wird geladen Zustandsvariable.

Wenn Wird geladen wahr ist, wird eine Lademeldung angezeigt. Umgekehrt, wenn Wird geladen falsch ist, wird die Hauptschnittstelle zum Generieren eines Bildes mithilfe der OpenAI-API angezeigt, die aus einem Textbereich besteht, der die Eingabeaufforderungen des Benutzers erfasst, und einer Schaltfläche zum Senden.

Der Ergebnis state-Variable enthält die generierte Bild-URL, die später im Browser gerendert wird.

Aktualisieren Sie die App.js-Komponente

Fügen Sie diesen Code zu Ihrer App.js-Datei hinzu:

importieren'./App.css';
importieren Bildgenerator aus'./Komponente/ImageGenerator';
FunktionApp() {
zurückkehren (

"App">
"App-Header">

 </header>
 </div>
 );
}
ExportStandard Anwendung;

Jetzt können Sie fortfahren und den Entwicklungsserver hochfahren, um die Änderungen zu aktualisieren und zu navigieren http://localhost: 3000 mit Ihrem Browser, um die Bildgenerierungsfunktion zu testen.

Um die bestmöglichen Ergebnisse zu erzielen, wenn Sie ein KI-Tool zum Generieren eines Bildes verwenden, stellen Sie sicher, dass Sie eine detaillierte Eingabeaufforderung im Textbereich bereitstellen. Das bedeutet, das Bild so gründlich wie möglich zu beschreiben und kein Detail auszulassen.

Dieser Prozess wird als Prompt Engineering bezeichnet und umfasst die Bereitstellung detaillierter Eingabeaufforderungen, damit das Sprachmodell basierend auf den bereitgestellten Benutzereingaben die besten Ergebnisse erzielen kann.

Angesichts des jüngsten Anstiegs der auf dem Markt erhältlichen KI-Software, eine Karriere im Prompt Engineering anstreben kann eine lukrative Gelegenheit sein.

Maximieren Sie die Leistungsfähigkeit von Sprachmodellen in der Softwareentwicklung

KI-Tools, die auf großen Sprachmodellen basieren, haben den Bereich der Softwareentwicklung aufgrund ihrer unglaublichen Funktionen und Fähigkeiten im Sturm erobert.

Diese Tools besitzen das Potenzial, das aktuelle Software-Ökosystem zu verbessern, indem sie es Entwicklern ermöglichen, coole KI-Funktionen zu integrieren die die Nutzung verschiedener Produkte verbessern – der Einsatz von KI-Technologie bietet eine einzigartige Gelegenheit, Software innovativ zu entwickeln Wege.