Byg en simpel front-end til DALL-E API, og begynd at eksperimentere med AI-genereret indhold i dag.

Kunstig intelligens forbedres løbende og kan nu skabe forbløffende billeder. Et nyligt viralt eksempel skildrede verdens rigeste og mest indflydelsesrige individer i iturevne tøj, der bor i et slummiljø. Det, der er imponerende ved billederne, er det høje detaljeniveau, der fanges i både personerne og deres omgivelser.

Sprogmodeller som DALL-E og Midjourney driver disse billedgenererende muligheder, idet de tager tekstmæssige beskrivelser ind som input og genererer fængslende billeder.

Lær, hvordan du integrerer OpenAI's DALL-E API for at generere billeder i en React-applikation.

Billedgenerering ved hjælp af OpenAI's DALL-E sprogmodel

Hvordan genererer DALL-E sprogmodellen egentlig billeder? Uden at grave for dybt ned i kompleksiteten af ​​AI-billedgenerering fortolker DALL-E først de tekstuelle beskrivelser, der er tilført den, som input ved hjælp af naturlig sprogbehandling (NLP). Det gengiver derefter et realistisk billede, der matcher den givne beskrivelse.

instagram viewer

Input-prompterne kan omfatte tekstmæssige beskrivelser af en person, et objekt eller en scene. Derudover kan det også omfatte detaljer såsom en bestemt farve, form og størrelse. Uanset kompleksiteten eller enkeltheden af ​​inputteksten, vil DALL-E generere et billede, der matcher inputbeskrivelsen nøje.

Det er vigtigt at bemærke, at sprogmodellen, ligesom andre modeller, blev trænet på et stort datasæt med millioner af billeddata for at lære at identificere og generere fotorealistiske billeder fra givne input.

Kom godt i gang med OpenAI's DALL-E API

OpenAI's DALL-E API er tilgængelig til brug som en offentlig beta. For at integrere API'et til brug i din React-applikation skal du bruge en nøgle til OpenAI's API. Gå over til OpenAIog log ind på din kontooversigtsside for at få fat i din API-nøgle.

Når du logger ind, skal du klikke på brugerprofilikonet øverst til højre på din oversigtsside. Vælg derefter og klik på Se API-nøgler.

På siden med indstillinger for API-nøgler skal du klikke på Opret ny hemmelig nøgle knappen, angiv et navn til din API-nøgle, og klik på Opret hemmelig nøgle for at generere din API-nøgle.

Opret et React-projekt

Kør kommandoerne nedenfor på din terminal for at oprette et nyt React-projekt lokalt. Bemærk, du skal have Node.js installeret.

Se disse to artikler for at lære hvordan installer Node.js på Windows og hvordan man installerer Node.js på Ubuntu.

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

Alternativt, i stedet for at bruge kommandoen create-react-app, kan du bruge Vite til at konfigurere dit React-projekt. Vite er et byggeværktøj designet til at bygge webapplikationer hurtigt og effektivt.

Integrer OpenAI's DALL-E API for at generere billeder

Når du har din React-applikation op at køre, skal du installere OpenAI's Node.js-bibliotek til brug i dine React-applikationer.

npm installer openai

Opret derefter en ny i rodmappen i din projektmappe .env fil for at holde din API-nøgle.

REACT_APP_OPENAI_API_KEY = "API NØGLE"

Du kan finde dette projekts kode i denne GitHub-depot.

Opret en billedgeneratorkomponent

I /src mappe, opret en ny mappe, navngiv den komponenter, og opret en ny fil med navnet ImageGenerator.js. Tilføj koden nedenfor til denne fil.

Start med at importere de nødvendige moduler:

importere'../App.css'; 
importere { useState } fra"reagere"; 
importere { Konfiguration, OpenAIApi } fra"openai";

Konfigurationsmodulet konfigurerer OpenAI's API-klient til brug, mens OpenAIApi-modulet giver metoder til at interagere med OpenAI's API. Disse to moduler gør det muligt at få adgang til og bruge DALL-Es funktioner fra React-applikationen.

Derefter skal du definere en funktionel komponent og tilføje følgende kode til den:

fungereImageGenerator() {
konst [prompt, setPrompt] = useState("");
konst [result, setResult] = useState("");
konst [loading, setLoading] = useState(falsk);
konst [pladsholder, sætPlaceholder] = useState(
"Søg efter en løve med pensler, der maler mona lisa-maleriet..."
 );


konst konfiguration = ny Konfiguration({
 apiKey: process.env. REACT_APP_OPENAI_API_KEY,
 });

konst åbenai = ny OpenAIApi (konfiguration);

konst generImage = asynkron () => {
 sætPlaceholder('Søg ${prompt}..`);
 sætLoading(rigtigt);


prøve {
konst res = vente openai.createImage({
 prompt: prompt,
 n: 1,
 størrelse: "512x512",
 });
 sætLoading(falsk);
 setResult (res.data.data[0].url);
 } fangst (fejl) {
 sætLoading(falsk);
konsol.fejl(`Fejl ved generering af billede: ${error.response.data.error.message}`);
 }
 };

Denne kode definerer en React funktionel komponent kaldet ImageGenerator. Komponenten bruger flere tilstandsvariable til at administrere inputprompten, outputresultatet, indlæsningsstatus og pladsholdertekst.

Komponenten skaber også en konfiguration objekt for OpenAI API-klienten, som inkluderer API-nøglen hentet fra miljøvariablen.

Det asynkrone generere billede funktionen kører, når brugeren klikker på en knap og passerer brugerprompten.

Så kalder det openai.createImage metode til at generere et billede baseret på den givne prompt. Denne metode returnerer et svarobjekt, der inkluderer den genererede billed-URL.

Hvis API-kaldet lykkes, opdaterer koden resultat tilstandsvariabel med URL'en og indstiller indlæsningsstatus til falsk. Hvis API-kaldet mislykkes, sætter det stadig indlæsningsstatus til falsk, men logger også en fejlmeddelelse til konsollen.

Til sidst skal du gengive React JSX-elementerne, der udgør billedgenerator-komponenten.

Vend tilbage (
"beholder">
 { Indlæser? (
 <>
Genererer billede... Vent venligst...</h3>
 </>
 ): (
 <>
Generer et billede ved hjælp af Open AI API</h2>




 klassenavn="app-input"
 pladsholder={pladsholder}
 onChange={(e) => setPrompt (e.target.value)}
 rækker ="10"
 cols="100"
 />




 { resultat.længde > 0? (
"resultatbillede" src={resultat} alt="resultat" />
 ): (
 <>
 </>
 )}
 </>
 )}
 </div>
 )
}


eksportStandard ImageGenerator

Denne komponents kode gengiver betinget forskellige elementer baseret på værdien af Indlæser tilstandsvariabel.

Hvis Indlæser er sandt, viser det en indlæsningsmeddelelse. Omvendt, hvis Indlæser er falsk, viser den hovedgrænsefladen til at generere et billede ved hjælp af OpenAI API, der består af et tekstområde, der fanger brugerprompts og en send-knap.

Det resultat tilstandsvariabel indeholder den genererede billed-URL, som senere gengives i browseren.

Opdater App.js-komponenten

Tilføj denne kode til din App.js-fil:

importere'./App.css';
importere ImageGenerator fra'./component/ImageGenerator';
fungereApp() {
Vend tilbage (


"App">
"App-header">

 </header>
 </div>
 );
}


eksportStandard App;

Nu kan du gå videre og skrue udviklingsserveren op for at opdatere ændringerne og navigere til http://localhost: 3000 med din browser for at teste billedgenereringsfunktionaliteten.

For at få de bedst mulige resultater, når du bruger et AI-værktøj til at generere et billede, skal du sørge for at give en detaljeret prompt i tekstområdet. Det betyder at beskrive billedet så grundigt som muligt, uden at udelade nogen detaljer.

Denne proces kaldes Prompt Engineering, og den involverer at give detaljerede prompter, så sprogmodellen kan producere de bedste resultater baseret på de leverede brugerinput.

I betragtning af den seneste stigning i AI-software tilgængelig på markedet, forfølger en karriere i Prompt Engineering kan være en lukrativ mulighed.

Maksimer styrken af ​​sprogmodeller i softwareudvikling

AI-værktøjer drevet af store sprogmodeller har taget softwareudviklingsområdet med storm på grund af deres utrolige funktioner og muligheder.

Disse værktøjer har potentialet til at forbedre det nuværende software-økosystem ved at give udviklere mulighed for at integrere fede AI-funktioner der forbedrer brugen af ​​forskellige produkter - at bruge AI-teknologi giver en unik mulighed for at bygge innovative software måder.