Bygg ett enkelt gränssnitt till DALL-E API och börja experimentera med AI-genererat innehåll idag.

Artificiell intelligens förbättras ständigt och kan nu skapa häpnadsväckande bilder. Ett färskt viralt exempel skildrade världens rikaste och mest inflytelserika individer i trasiga kläder, som lever i en slummiljö. Det som är imponerande med bilderna är den höga detaljnivån som fångas i både människorna och deras omgivning.

Språkmodeller som DALL-E och Midjourney driver dessa bildgenererande funktioner, tar in textbeskrivningar som input och genererar fängslande bilder.

Lär dig hur du integrerar OpenAI: s DALL-E API för att generera bilder i en React-applikation.

Bildgenerering med OpenAI: s DALL-E språkmodell

Hur genererar språkmodellen DALL-E egentligen bilder? Utan att gräva alltför djupt i komplexiteten i AI-bildgenerering, tolkar DALL-E först textbeskrivningarna som matas till den som indata med hjälp av naturlig språkbehandling (NLP). Den återger sedan en realistisk bild som stämmer överens med den givna beskrivningen.

instagram viewer

Inmatningsuppmaningarna kan innehålla textbeskrivningar av en person, ett objekt eller en scen. Dessutom kan det också innehålla detaljer som en viss färg, form och storlek. Oavsett komplexiteten eller enkelheten i inmatningstexten kommer DALL-E att generera en bild som stämmer överens med inmatningsbeskrivningen.

Det är viktigt att notera att språkmodellen, precis som andra modeller, tränades på en stor datamängd med miljontals bilddata för att lära sig att identifiera och generera fotorealistiska bilder från givna ingångar.

Komma igång med OpenAI: s DALL-E API

OpenAI: s DALL-E API är tillgänglig för användning som en offentlig beta. För att integrera API: et för användning i din React-applikation behöver du en nyckel för OpenAI: s API. Gå över till OpenAIoch logga in på din kontoöversiktssida för att hämta din API-nyckel.

När du har loggat in klickar du på användarprofilikonen längst upp till höger på din översiktssida. Välj sedan och klicka på Visa API-nycklar.

På inställningssidan för API-nycklar klickar du på Skapa ny hemlig nyckel knappen, ange ett namn för din API-nyckel och klicka på Skapa hemlig nyckel för att generera din API-nyckel.

Skapa ett React-projekt

Kör kommandona nedan på din terminal för att skapa ett nytt React-projekt lokalt. Observera att du bör ha Node.js installerat.

Se dessa två artiklar för att lära dig hur du gör installera Node.js på Windows och hur man installerar Node.js på Ubuntu.

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

Alternativt, istället för att använda kommandot create-react-app, kan du använda Vite att ställa in ditt React-projekt. Vite är ett byggverktyg designat för att snabbt och effektivt bygga webbapplikationer.

Integrera OpenAI: s DALL-E API för att generera bilder

När du har din React-applikation igång, installera OpenAIs Node.js-bibliotek för användning i dina React-applikationer.

npm installera openai

Skapa sedan en ny i rotkatalogen i din projektmapp .env fil för att hålla din API-nyckel.

REACT_APP_OPENAI_API_KEY = "API-NYCKEL"

Du kan hitta detta projekts kod i denna GitHub-förråd.

Skapa en bildgeneratorkomponent

I den /src katalog, skapa en ny mapp, namnge den komponenter, och skapa en ny fil med namnet ImageGenerator.js. Lägg till koden nedan i den här filen.

Börja med att importera de nödvändiga modulerna:

importera'../App.css'; 
importera { useState } från"reagera"; 
importera { Konfiguration, OpenAIApi } från"openai";

Konfigurationsmodulen konfigurerar OpenAI: s API-klient för användning, medan OpenAIApi-modulen tillhandahåller metoder för att interagera med OpenAI: s API. Dessa två moduler gör det möjligt att komma åt och använda DALL-E: s funktioner från React-applikationen.

Definiera sedan en funktionell komponent och lägg till följande kod till den:

fungeraImageGenerator() {
konst [prompt, setPrompt] = useState("");
konst [result, setResult] = useState("");
konst [loading, setLoading] = useState(falsk);
konst [platshållare, setPlaceholder] = useState(
"Sök efter ett lejon med målarpenslar som målar mona lisa-målningen..."
 );


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

konst openai = ny OpenAIApi (konfiguration);

konst generera Bild = asynkron () => {
 setPlaceholder(`Sök ${prompt}..`);
 setLoading(Sann);


Prova {
konst res = vänta openai.createImage({
 prompt: prompt,
 n: 1,
 storlek: "512x512",
 });
 setLoading(falsk);
 setResult (res.data.data[0].url);
 } fånga (fel) {
 setLoading(falsk);
trösta.fel(`Fel vid generering av bild: ${error.response.data.error.message}`);
 }
 };

Denna kod definierar en React funktionell komponent som kallas ImageGenerator. Komponenten använder flera tillståndsvariabler för att hantera inmatningsprompten, utmatningsresultat, laddningsstatus och platshållartext.

Komponenten skapar också en konfiguration objekt för OpenAI API-klienten, som inkluderar API-nyckeln hämtad från miljövariabeln.

Den asynkrona generera bild funktionen körs när användaren klickar på en knapp och passerar användarprompten.

Sedan kallar den openai.createImage metod för att generera en bild baserat på den givna prompten. Den här metoden returnerar ett svarsobjekt som inkluderar den genererade bildens URL.

Om API-anropet lyckas uppdaterar koden resultat tillståndsvariabel med URL: en och ställer in laddningsstatusen till falsk. Om API-anropet misslyckas ställer det fortfarande in laddningsstatusen till falsk, men loggar också ett felmeddelande till konsolen.

Till sist, rendera React JSX-elementen som utgör bildgeneratorkomponenten.

lämna tillbaka (
"behållare">
 { läser in? (
 <>
Skapar bild... Vänta...</h3>
 </>
 ): (
 <>
Generera en bild med Open AI API</h2>




 klassnamn="app-ingång"
 platshållare={platshållare}
 onChange={(e) => setPrompt (e.target.value)}
 rader="10"
 cols="100"
 />




 { resultat.längd > 0? (
"resultatbild" src={resultat} alt="resultat" />
 ): (
 <>
 </>
 )}
 </>
 )}
 </div>
 )
}


exporterastandard ImageGenerator

Den här komponentens kod återger villkorligt olika element baserat på värdet av läser in tillståndsvariabel.

Om läser in är sant, visar det ett laddningsmeddelande. Omvänt, If läser in är falskt visar det huvudgränssnittet för att generera en bild med OpenAI API som består av ett textområde som fångar användarmeddelanden och en skicka-knapp.

De resultat tillståndsvariabeln innehåller den genererade bildens URL som senare renderas i webbläsaren.

Uppdatera App.js-komponenten

Lägg till den här koden i din App.js-fil:

importera'./App.css';
importera ImageGenerator från'./component/ImageGenerator';
fungeraApp() {
lämna tillbaka (


"App">
"App-header">

 </header>
 </div>
 );
}


exporterastandard App;

Nu kan du gå vidare och snurra upp utvecklingsservern för att uppdatera ändringarna och navigera till http://localhost: 3000 med din webbläsare för att testa bildgenereringsfunktionen.

För att få bästa möjliga resultat när du använder ett AI-verktyg för att generera en bild, se till att ge en detaljerad uppmaning i textområdet. Detta innebär att beskriva bilden så noggrant som möjligt, utan att lämna några detaljer ute.

Denna process kallas Prompt Engineering, och den innebär att tillhandahålla detaljerade uppmaningar så att språkmodellen kan ge de bästa resultaten baserat på de angivna användarinmatningarna.

Med tanke på den senaste tidens ökning av AI-programvara som finns tillgänglig på marknaden, satsa på en karriär inom Prompt Engineering kan vara en lukrativ möjlighet.

Maximera kraften hos språkmodeller i mjukvaruutveckling

AI-verktyg som drivs av stora språkmodeller har tagit fältet mjukvaruutveckling med storm på grund av deras otroliga funktioner och möjligheter.

Dessa verktyg har potential att förbättra det nuvarande mjukvaruekosystemet genom att tillåta utvecklare att integrera coola AI-funktioner som förbättrar användningen av olika produkter – att använda AI-teknik ger en unik möjlighet att bygga innovativ mjukvara sätt.