Hvordan bygge en bildegenerator i React ved å bruke DALL-E API

Kunstig intelligens forbedres kontinuerlig og kan nå skape forbløffende bilder. Et nylig viralt eksempel skildret verdens rikeste og mest innflytelsesrike individer i revne klær, som lever i et slummiljø. Det som er imponerende med bildene er det høye detaljnivået som fanges både i personene og deres omgivelser.

Språkmodeller som DALL-E og Midjourney driver disse bildegenererende egenskapene, tar inn tekstlige beskrivelser som input og genererer fengslende bilder.

Lær hvordan du integrerer OpenAIs DALL-E API for å generere bilder i en React-applikasjon.

Bildegenerering ved hjelp av OpenAIs DALL-E språkmodell

Hvordan genererer egentlig DALL-E-språkmodellen bilder? Uten å grave for dypt inn i kompleksiteten til AI-bildegenerering, tolker DALL-E først tekstbeskrivelsene som er matet til den som input ved hjelp av naturlig språkbehandling (NLP). Den gjengir deretter et realistisk bilde som stemmer godt overens med den gitte beskrivelsen.

Inndatameldingene kan inkludere tekstlige beskrivelser av en person, et objekt eller en scene. I tillegg kan det også inkludere detaljer som en bestemt farge, form og størrelse. Uavhengig av kompleksiteten eller enkelheten til inndatateksten, vil DALL-E generere et bilde som stemmer godt overens med inputbeskrivelsen.

Det er viktig å merke seg at språkmodellen, akkurat som andre modeller, ble trent på et stort datasett med millioner av bildedata for å lære å identifisere og generere fotorealistiske bilder fra gitte innganger.

Komme i gang med OpenAIs DALL-E API

OpenAIs DALL-E API er tilgjengelig for bruk som en offentlig beta. For å integrere API for bruk i React-applikasjonen din, trenger du en nøkkel for OpenAIs API. Gå over til OpenAIog logg på kontooversiktssiden for å hente API-nøkkelen.

Når du har logget på, klikker du på brukerprofilikonet øverst til høyre på oversiktssiden. Deretter velger du og klikker på Se API-nøkler.

På innstillingssiden for API-nøkler klikker du på Lag ny hemmelig nøkkel -knappen, oppgi et navn for API-nøkkelen din, og klikk på Lag hemmelig nøkkel for å generere API-nøkkelen din.

Opprett et React-prosjekt

Kjør kommandoene nedenfor på terminalen din for å opprette et nytt React-prosjekt lokalt. Merk at du bør ha Node.js installert.

Se disse to artiklene for å finne ut hvordan installer Node.js på Windows og hvordan installere Node.js på Ubuntu.

mkdir React-prosjekt 
cd React-prosjekt
npx create-react-app image-generator-app
cd image-generator-app
npm start

Alternativt, i stedet for å bruke kommandoen create-react-app, kan du bruke Vite for å sette opp React-prosjektet ditt. Vite er et byggeverktøy designet for å bygge webapplikasjoner raskt og effektivt.

Integrer OpenAIs DALL-E API for å generere bilder

Når du har startet React-applikasjonen din, installer OpenAIs Node.js-bibliotek for bruk i React-applikasjonene dine.

npm installer openai

Deretter oppretter du en ny i rotkatalogen til prosjektmappen din .env fil for å holde API-nøkkelen din.

REACT_APP_OPENAI_API_KEY = "API NØKKEL"

Du finner dette prosjektets kode i denne GitHub-depot.

Lag en bildegeneratorkomponent

I /src katalog, opprett en ny mappe, navngi den komponenter, og lag en ny fil med navnet ImageGenerator.js. Legg til koden nedenfor i denne filen.

Start med å importere de nødvendige modulene:

import'../App.css'; 
import { useState } fra"reagere"; 
import { Konfigurasjon, OpenAIApi } fra"openai";

Konfigurasjonsmodulen konfigurerer OpenAIs API-klient for bruk, mens OpenAIApi-modulen gir metoder for å samhandle med OpenAIs API. Disse to modulene gjør det mulig å få tilgang til og bruke DALL-Es funksjoner fra React-applikasjonen.

Definer deretter en funksjonell komponent og legg til følgende kode til den:

funksjonImageGenerator() {
konst [prompt, setPrompt] = useState("");
konst [result, setResult] = useState("");
konst [loading, setLoading] = useState(falsk);
konst [plassholder, settPlassholder] = brukState(
"Søk etter en løve med pensler som maler mona lisa-maleriet..."
 );
konst konfigurasjon = ny Konfigurasjon({
 apiKey: process.env. REACT_APP_OPENAI_API_KEY,
 });

konst openai = ny OpenAIApi (konfigurasjon);

konst generImage = asynkron () => {
 settPlassholder(`Søk ${prompt}..`);
 setLoading(ekte);
prøve {
konst res = avvente openai.createImage({
 ledetekst: ledetekst,
 n: 1,
 størrelse: "512x512",
 });
 setLoading(falsk);
 setResult (res.data.data[0].url);
 } å fange (feil) {
 setLoading(falsk);
konsoll.feil(`Feil under generering av bilde: ${error.response.data.error.message}`);
 }
 };

Denne koden definerer en React funksjonell komponent kalt ImageGenerator. Komponenten bruker flere tilstandsvariabler for å administrere inndatamelding, utdataresultat, lastestatus og plassholdertekst.

Komponenten lager også en konfigurasjon objekt for OpenAI API-klienten, som inkluderer API-nøkkelen hentet fra miljøvariabelen.

Det asynkrone generere bilde funksjonen vil kjøre når brukeren klikker på en knapp, og passerer brukerprompten.

Deretter kaller den openai.createImage metode for å generere et bilde basert på den gitte ledeteksten. Denne metoden returnerer et svarobjekt som inkluderer den genererte bilde-URLen.

Hvis API-kallet lykkes, oppdaterer koden resultat tilstandsvariabel med URL-en, og setter lastestatusen til falsk. Hvis API-kallet mislykkes, angir den fortsatt lastestatusen til falsk, men logger også en feilmelding til konsollen.

Til slutt, gjengi React JSX-elementene som utgjør bildegeneratorkomponenten.

komme tilbake (
"container">
 { laster inn? (
 <>
Genererer bilde... Vennligst vent...</h3>
 </>
 ): (
 <>
Generer et bilde ved hjelp av Open AI API</h2>


 klassenavn="app-inngang"
 plassholder={plassholder}
 onChange={(e) => setPrompt (e.target.value)}
 rader="10"
 cols="100"
 />
Generer et bilde</button>
 { resultat.lengde > 0? (
"resultatbilde" src={resultat} alt="resultat" />
 ): (
 <>
 </>
 )}
 </>
 )}
 </div>
 )
}
eksportmisligholde ImageGenerator

Denne komponentens kode gjengir betinget forskjellige elementer basert på verdien av lasting tilstandsvariabel.

Hvis lasting er sant, viser den en lastemelding. Omvendt, If lasting er falsk, viser det hovedgrensesnittet for å generere et bilde ved hjelp av OpenAI API som består av et tekstområde som fanger opp brukermeldingene og en send-knapp.

De resultat tilstandsvariabelen inneholder den genererte bilde-URLen som senere gjengis i nettleseren.

Oppdater App.js-komponenten

Legg til denne koden i App.js-filen din:

import'./App.css';
import ImageGenerator fra'./component/Image Generator';
funksjonApp() {
komme tilbake (

"App">
"App-header">

 </header>
 </div>
 );
}
eksportmisligholde App;

Nå kan du gå videre og snurre opp utviklingsserveren for å oppdatere endringene og navigere til http://localhost: 3000 med nettleseren din for å teste bildegenereringsfunksjonaliteten.

For å få best mulig resultater når du bruker et AI-verktøy for å generere et bilde, sørg for å gi en detaljert melding i tekstområdet. Dette betyr å beskrive bildet så grundig som mulig, uten å utelate noen detaljer.

Denne prosessen kalles Prompt Engineering, og den innebærer å gi detaljerte spørsmål slik at språkmodellen kan gi de beste resultatene basert på de oppgitte brukerinndataene.

Gitt den nylige økningen i AI-programvare tilgjengelig på markedet, forfølge en karriere i Prompt Engineering kan være en lukrativ mulighet.

Maksimer kraften til språkmodeller i programvareutvikling

AI-verktøy drevet av store språkmodeller har tatt feltet programvareutvikling med storm på grunn av deres utrolige funksjoner og muligheter.

Disse verktøyene har potensialet til å forbedre det nåværende programvareøkosystemet ved å la utviklere integrere kule AI-funksjoner som forbedrer bruken av forskjellige produkter – bruk av AI-teknologi gir en unik mulighet til å bygge nyskapende programvare måter.