Kako izgraditi generator slika u Reactu koristeći DALL-E API

Umjetna inteligencija neprestano se poboljšava i sada može stvarati zapanjujuće slike. Nedavni viralni primjer prikazuje najbogatije i najutjecajnije pojedince svijeta u poderanoj odjeći, koji žive u sirotinjskom okruženju. Ono što je impresivno kod slika je visoka razina detalja snimljenih i kod ljudi i u njihovoj okolini.

Jezični modeli kao što su DALL-E i Midjourney pokreću ove mogućnosti generiranja slika, uzimajući tekstualne opise kao ulaz i generirajući zadivljujuće slike.

Naučite kako integrirati OpenAI DALL-E API za generiranje slika u React aplikaciji.

Generiranje slike korištenjem OpenAI-jevog DALL-E jezičnog modela

Kako DALL-E jezični model zapravo generira slike? Ne kopajući preduboko u složenost generiranja slike umjetnom inteligencijom, DALL-E prvo tumači tekstualne opise koji mu se šalju kao ulazne podatke koristeći obradu prirodnog jezika (NLP). Zatim prikazuje realističnu sliku koja u potpunosti odgovara danom opisu.

Upute za unos mogu uključivati ​​tekstualne opise osobe, predmeta ili scene. Osim toga, može uključivati ​​i detalje kao što su određena boja, oblik i veličina. Bez obzira na složenost ili jednostavnost unesenog teksta, DALL-E će generirati sliku koja u potpunosti odgovara opisu unesenog teksta.

Važno je napomenuti da je jezični model, kao i drugi modeli, treniran na velikom skupu podataka s milijunima slikovnih podataka kako biste naučili identificirati i generirati fotorealistične slike iz danih ulazi.

Početak rada s OpenAI DALL-E API-jem

OpenAI DALL-E API dostupan je za korištenje kao javna beta verzija. Za integraciju API-ja za korištenje u vašoj React aplikaciji trebat će vam ključ za OpenAI-jev API. Prijeđite na OpenAIi prijavite se na stranicu pregleda svog računa kako biste preuzeli svoj API ključ.

Nakon što se prijavite, kliknite na ikonu korisničkog profila u gornjem desnom dijelu vaše stranice pregleda. Zatim odaberite i kliknite na Pregledajte API ključeve.

Na stranici postavki API ključeva kliknite na Stvorite novi tajni ključ gumb, navedite naziv za svoj API ključ i kliknite na Stvorite tajni ključ za generiranje vašeg API ključa.

Napravite React projekt

Pokrenite donje naredbe na svom terminalu kako biste lokalno izradili novi React projekt. Napomena, trebali biste imati instaliran Node.js.

Pogledajte ova dva članka da biste saznali kako instalirajte Node.js na Windows i kako instalirati Node.js na Ubuntu.

mkdir React-projekt 
cd React-projekt
npx create-react-app aplikacija za generiranje slika
cd image-generator-aplikacija
npm početak

Alternativno, umjesto korištenja naredbe create-react-app, možete koristiti Vite za postavljanje vašeg React projekta. Vite je alat za izradu dizajniran za brzu i učinkovitu izradu web aplikacija.

Integrirajte OpenAI DALL-E API za generiranje slika

Nakon što svoju React aplikaciju pokrenete, instalirajte OpenAI-jevu biblioteku Node.js za korištenje u svojim React aplikacijama.

npm instalirajte openai

Zatim, u korijenskom direktoriju vaše mape projekta, stvorite novu .env datoteku za čuvanje vašeg API ključa.

REACT_APP_OPENAI_API_KEY = "API KEY"

Ovdje možete pronaći kod ovog projekta GitHub spremište.

Napravite komponentu generatora slike

u /src imenik, stvorite novu mapu, dajte joj naziv komponentei stvorite novu datoteku unutar nje pod nazivom ImageGenerator.js. Dodajte donji kod u ovu datoteku.

Započnite s uvozom potrebnih modula:

uvoz'../App.css'; 
uvoz {useState} iz"reagirati"; 
uvoz {Konfiguracija, OpenAIApi} iz"openaj";

Konfiguracijski modul konfigurira OpenAI-jev API klijent za korištenje, dok OpenAIApi modul pruža metode za interakciju s OpenAI-jevim API-jem. Ova dva modula omogućuju pristup i korištenje DALL-E značajki iz React aplikacije.

Zatim definirajte funkcionalnu komponentu i dodajte joj sljedeći kod:

funkcijaGenerator slika() {
konst [prompt, setPrompt] = useState("");
konst [rezultat, setResult] = useState("");
konst [učitavanje, setLoading] = useState(lažno);
konst [placeholder, setPlaceholder] = useState(
"Potražite lava s kistovima koji slikaju sliku mona lize..."
 );
konst konfiguracija = novi Konfiguracija({
 apiKey: proces.env. REACT_APP_OPENAI_API_KEY,
 });

konst openai = novi OpenAIApi (konfiguracija);

konst generiraj sliku = asinkroni () => {
 setPlaceholder(`Traži ${prompt}..`);
 setLoading(pravi);
probati {
konst res = čekati openai.createImage({
 prompt: prompt,
 n: 1,
 veličina: "512x512",
 });
 setLoading(lažno);
 setResult (res.data.data[0].url);
 } ulov (pogreška) {
 setLoading(lažno);
konzola.greška(`Pogreška pri generiranju slike: ${error.response.data.error.message}`);
 }
 };

Ovaj kod definira React funkcionalnu komponentu tzv Generator slika. Komponenta koristi nekoliko varijabli stanja za upravljanje upitom za unos, izlaznim rezultatom, statusom učitavanja i tekstom rezerviranog mjesta.

Komponenta također stvara a konfiguracija objekt za OpenAI API klijent, koji uključuje API ključ dohvaćen iz varijable okruženja.

Asinkroni generirajSliku funkcija će se pokrenuti kada korisnik klikne gumb, prosljeđujući korisnički upit.

Zatim, poziva openai.createImage metoda za generiranje slike na temelju zadanog odzivnika. Ova metoda vraća objekt odgovora koji uključuje URL generirane slike.

Ako API poziv uspije, kôd ažurira proizlaziti varijablu stanja s URL-om i postavlja status učitavanja na lažno. Ako API poziv ne uspije, on i dalje postavlja status učitavanja na lažno, ali također bilježi poruku o pogrešci na konzoli.

Na kraju, renderirajte React JSX elemente koji čine komponentu Image generator.

povratak (
"kontejner">
 { Učitavam? (
 <>
Generiranje slike... Molimo pričekajte...</h3>
 </>
 ): (
 <>
Generirajte sliku koristeći Open AI API</h2>


 ime klase="unos aplikacije"
 placeholder={placeholder}
 onChange={(e) => setPrompt (e.target.value)}
 redovi="10"
 cols="100"
 />
Generirajte sliku</button>
 { rezultat.duljina > 0? (
"rezultat-slika" src={rezultat} alt="proizlaziti" />
 ): (
 <>
 </>
 )}
 </>
 )}
 </div>
 )
}
izvozzadano Generator slika

Kod ove komponente uvjetno prikazuje različite elemente na temelju vrijednosti Učitavam varijabla stanja.

Ako Učitavam je istina, prikazuje poruku o učitavanju. Nasuprot tome, Ako Učitavam je lažno, prikazuje glavno sučelje za generiranje slike pomoću OpenAI API-ja koje se sastoji od tekstualnog područja koje bilježi korisničke upite i gumba za slanje.

The proizlaziti varijabla stanja sadrži generirani URL slike koji se kasnije prikazuje u pregledniku.

Ažurirajte App.js komponentu

Dodajte ovaj kod svojoj datoteci App.js:

uvoz'./App.css';
uvoz Generator slika iz'./component/ImageGenerator';
funkcijaaplikacija() {
povratak (

"Aplikacija">
"Zaglavlje aplikacije">

 </header>
 </div>
 );
}
izvozzadano aplikacija;

Sada možete pokrenuti razvojni poslužitelj kako biste ažurirali promjene i navigirali do njega http://localhost: 3000 sa svojim preglednikom da testirate funkcionalnost generiranja slike.

Kako biste dobili najbolje moguće rezultate pri korištenju AI alata za generiranje slike, svakako navedite detaljan upit u tekstualnom području. To znači da sliku opišete što je temeljitije moguće, ne izostavljajući nijedan detalj.

Taj se proces naziva brzi inženjering i uključuje pružanje detaljnih upita kako bi jezični model mogao dati najbolje rezultate na temelju korisničkih unosa.

S obzirom na nedavni porast softvera umjetne inteligencije dostupnog na tržištu, nastavlja karijeru u Prompt Engineeringu može biti unosna prilika.

Povećajte snagu jezičnih modela u razvoju softvera

AI alati koje pokreću veliki jezični modeli zauzeli su područje razvoja softvera zbog svojih nevjerojatnih značajki i mogućnosti.

Ovi alati imaju potencijal za poboljšanje trenutnog softverskog ekosustava dopuštajući programerima da integriraju cool AI značajke koji poboljšavaju korištenje različitih proizvoda—upotreba AI tehnologije predstavlja jedinstvenu priliku za izradu softvera na inovativan način načine.