Bouw een eenvoudige front-end voor de DALL-E API en begin vandaag nog te experimenteren met door AI gegenereerde inhoud.

Kunstmatige intelligentie wordt continu verbeterd en kan nu verbazingwekkende beelden creëren. Een recent viraal voorbeeld beeldde 's werelds rijkste en meest invloedrijke individuen af ​​in gescheurde kleren, levend in een sloppenwijk. Het indrukwekkende aan de beelden is het hoge detailniveau dat is vastgelegd in zowel de mensen als hun omgeving.

Taalmodellen zoals DALL-E en Midjourney ondersteunen deze beeldgenererende mogelijkheden, nemen tekstuele beschrijvingen als input en genereren boeiende beelden.

Leer hoe u de DALL-E API van OpenAI integreert om afbeeldingen te genereren in een React-toepassing.

Beeldgeneratie met behulp van het DALL-E-taalmodel van OpenAI

Hoe genereert het DALL-E-taalmodel eigenlijk afbeeldingen? Zonder al te diep in te gaan op de complexiteit van het genereren van AI-afbeeldingen, interpreteert DALL-E eerst de tekstuele beschrijvingen die erin worden ingevoerd als invoer met behulp van natuurlijke taalverwerking (NLP). Vervolgens wordt een realistisch beeld weergegeven dat nauw overeenkomt met de gegeven beschrijving.

instagram viewer

De invoerprompts kunnen tekstuele beschrijvingen van een persoon, object of scène bevatten. Bovendien kan het ook details bevatten zoals een bepaalde kleur, vorm en maat. Ongeacht de complexiteit of eenvoud van de invoertekst, zal DALL-E een afbeelding genereren die nauw aansluit bij de invoerbeschrijving.

Het is belangrijk op te merken dat het taalmodel, net als andere modellen, is getraind op een grote dataset met miljoenen afbeeldingsgegevens om te leren hoe u fotorealistische afbeeldingen kunt identificeren en genereren ingangen.

Aan de slag met de DALL-E API van OpenAI

OpenAI's DALL-E API is beschikbaar voor gebruik als openbare bèta. Om de API voor gebruik in uw React-applicatie te integreren, heeft u een sleutel nodig voor de API van OpenAI. Ga naar AI openenen log in op uw accountoverzichtspagina om uw API-sleutel te pakken.

Zodra u zich aanmeldt, klikt u op het gebruikersprofielpictogram in de rechterbovenhoek van uw overzichtspagina. Selecteer vervolgens en klik op Bekijk API-sleutels.

Klik op de instellingenpagina API Keys op de Nieuwe geheime sleutel maken knop, geef een naam op voor uw API-sleutel en klik op Geheime sleutel maken om uw API-sleutel te genereren.

Maak een React-project

Voer de onderstaande opdrachten uit op uw terminal om lokaal een nieuw React-project te maken. Let op, u zou Node.js moeten hebben geïnstalleerd.

Raadpleeg deze twee artikelen voor meer informatie installeer Node.js op Windows En hoe Node.js op Ubuntu te installeren.

mkdir React-project 
cd React-project
npx create-react-app image-generator-app
cd image-generator-app
npm begin

Als alternatief kunt u in plaats van de opdracht create-react-app gebruiken Nodig uit om uw React-project op te zetten. Vite is een bouwtool die is ontworpen om snel en efficiënt webapplicaties te bouwen.

Integreer de DALL-E API van OpenAI om afbeeldingen te genereren

Zodra uw React-applicatie actief is, installeert u de Node.js-bibliotheek van OpenAI voor gebruik in uw React-applicaties.

npm installeer openai

Maak vervolgens in de hoofdmap van uw projectmap een nieuw .env bestand om uw API-sleutel te bewaren.

REACT_APP_OPENAI_API_KEY = "API SLEUTEL"

U kunt de code van dit project hierin vinden GitHub-opslagplaats.

Maak een Image Generator-component

In de /src directory, maak een nieuwe map aan, noem deze componenten, en maak een nieuw bestand aan met de naam ImageGenerator.js. Voeg onderstaande code toe aan dit bestand.

Begin met het importeren van de vereiste modules:

importeren'../App.css'; 
importeren { useState } van"Reageer"; 
importeren { Configuratie, OpenAIApi } van"openai";

De configuratiemodule configureert de API-client van OpenAI voor gebruik, terwijl de OpenAIApi-module methoden biedt voor interactie met de API van OpenAI. Deze twee modules maken het mogelijk om toegang te krijgen tot en gebruik te maken van de functies van DALL-E vanuit de React-applicatie.

Definieer vervolgens een functionele component en voeg de volgende code eraan toe:

functieImageGenerator() {
const [prompt, setPrompt] = useState("");
const [resultaat, setResult] = useState("");
const [laden, setLaden] = useState(vals);
const [placeholder, setPlaceholder] = useState(
"Zoek naar een leeuw met verfborstels die het schilderij van Mona Lisa schildert..."
 );


const configuratie = nieuw Configuratie({
 apiKey: proces.env. REACT_APP_OPENAI_API_KEY,
 });

const open = nieuw OpenAIApi (configuratie);

const genererenAfbeelding = asynchroon () => {
 setPlaceholder(`Zoeken ${prompt}..`);
 setBezig met laden(WAAR);


poging {
const res = wachten openai.createImage({
 prompt: prompt,
 N: 1,
 maat: "512x512",
 });
 setBezig met laden(vals);
 setResultaat (res.data.data[0].url);
 } vangst (fout) {
 setBezig met laden(vals);
troosten.fout(`Fout bij genereren afbeelding: ${error.response.data.error.message}`);
 }
 };

Deze code definieert een functionele React-component genaamd ImageGenerator. De component gebruikt verschillende statusvariabelen om de invoerprompt, het uitvoerresultaat, de laadstatus en plaatsaanduidingstekst te beheren.

De component maakt ook een configuratie object voor de OpenAI API-client, inclusief de API-sleutel die is opgehaald uit de omgevingsvariabele.

De asynchrone genereerAfbeelding functie wordt uitgevoerd wanneer de gebruiker op een knop klikt en de gebruikersprompt doorgeeft.

Dan roept het de openai.createImage methode om een ​​afbeelding te genereren op basis van de gegeven prompt. Deze methode retourneert een responsobject dat de gegenereerde afbeeldings-URL bevat.

Als de API-aanroep slaagt, werkt de code het resultaat state variabele met de URL, en stelt de laadstatus in op vals. Als de API-aanroep mislukt, wordt de laadstatus nog steeds ingesteld op vals, maar registreert ook een foutmelding in de console.

Geef ten slotte de React JSX-elementen weer die deel uitmaken van de component Image generator.

opbrengst (
"houder">
 { bezig met laden? (
 <>
Afbeelding genereren... Even geduld...</h3>
 </>
 ): (
 <>
Genereer een afbeelding met Open AI API</h2>




 classNaam="app-invoer"
 plaatshouder={plaatshouder}
 onChange={(e) => setPrompt (e.target.value)}
 rijen="10"
 cols="100"
 />




 {resultaat.lengte > 0? (
"resultaat-beeld" src={resultaat} alt="resultaat" />
 ): (
 <>
 </>
 )}
 </>
 )}
 </div>
 )
}


exporterenstandaard ImageGenerator

De code van deze component geeft voorwaardelijk verschillende elementen weer op basis van de waarde van de bezig met laden staat variabele.

Als bezig met laden waar is, het toont een laadbericht. Omgekeerd, als bezig met laden is false, het toont de hoofdinterface voor het genereren van een afbeelding met behulp van de OpenAI API, bestaande uit een tekstgebied dat de gebruikersprompts vastlegt en een verzendknop.

De resultaat state-variabele bevat de gegenereerde afbeeldings-URL die later in de browser wordt weergegeven.

Werk de App.js-component bij

Voeg deze code toe aan uw App.js-bestand:

importeren'./App.css';
importeren ImageGenerator van'./component/ImageGenerator';
functieapp() {
opbrengst (


"App">
"App-header">

 </header>
 </div>
 );
}


exporterenstandaard App;

Nu kunt u doorgaan en de ontwikkelingsserver opstarten om de wijzigingen bij te werken en ernaartoe te navigeren http://localhost: 3000 met uw browser om de functionaliteit voor het genereren van afbeeldingen te testen.

Om de best mogelijke resultaten te krijgen bij het gebruik van een AI-tool om een ​​afbeelding te genereren, moet u ervoor zorgen dat u een gedetailleerde prompt in het tekstgebied opgeeft. Dit betekent dat de afbeelding zo grondig mogelijk wordt beschreven, waarbij geen enkel detail wordt weggelaten.

Dit proces wordt Prompt Engineering genoemd en omvat het verstrekken van gedetailleerde aanwijzingen zodat het taalmodel de beste resultaten kan produceren op basis van de verstrekte gebruikersinvoer.

Gezien de recente toename van AI-software die op de markt beschikbaar is, nastreven van een carrière in Prompt Engineering kan een lucratieve kans zijn.

Maximaliseer de kracht van taalmodellen bij softwareontwikkeling

AI-tools aangedreven door grote taalmodellen hebben het gebied van softwareontwikkeling stormenderhand veroverd vanwege hun ongelooflijke functies en mogelijkheden.

Deze tools hebben het potentieel om het huidige software-ecosysteem te verbeteren door ontwikkelaars in staat te stellen coole AI-functies te integreren die het gebruik van verschillende producten verbeteren - het gebruik van AI-technologie biedt een unieke kans om innovatieve software te bouwen manieren.