Kako zgraditi generator slik v Reactu z uporabo API-ja DALL-E

Umetna inteligenca se nenehno izboljšuje in zdaj lahko ustvarja osupljive slike. Nedavni viralni primer prikazuje najbogatejše in najvplivnejše posameznike na svetu v raztrganih oblačilih, ki živijo v barakarskem okolju. Tisto, kar je impresivno pri slikah, je visoka stopnja podrobnosti, ujetih v ljudeh in njihovi okolici.

Jezikovni modeli, kot sta DALL-E in Midjourney, poganjajo te zmožnosti generiranja slik, pri čemer sprejemajo besedilne opise kot vhod in ustvarjajo privlačne slike.

Naučite se integrirati DALL-E API OpenAI za ustvarjanje slik v aplikaciji React.

Generiranje slik z jezikovnim modelom DALL-E OpenAI

Kako jezikovni model DALL-E dejansko ustvarja slike? Ne da bi se preveč poglabljal v zapletenost generiranja slik z umetno inteligenco, DALL-E najprej interpretira besedilne opise, ki so mu posredovani kot vhodne podatke, z uporabo obdelave naravnega jezika (NLP). Nato upodobi realistično sliko, ki se zelo ujema z danim opisom.

Pozivi za vnos lahko vključujejo besedilne opise osebe, predmeta ali scene. Poleg tega lahko vključuje tudi podrobnosti, kot so določena barva, oblika in velikost. Ne glede na zapletenost ali preprostost vnesenega besedila bo DALL-E ustvaril sliko, ki se zelo ujema z opisom vnosa.

Pomembno je omeniti, da je bil jezikovni model, tako kot drugi modeli, učen na velikem naboru podatkov z milijoni slikovnih podatkov, da se naučite prepoznati in ustvariti fotorealistične slike iz danih vložki.

Kako začeti z OpenAI DALL-E API

OpenAI DALL-E API je na voljo za uporabo kot javna različica beta. Če želite integrirati API za uporabo v vaši aplikaciji React, boste potrebovali ključ za API OpenAI. Pojdite na OpenAIin se vpišite na stran s pregledom svojega računa, da pridobite ključ API.

Ko se prijavite, kliknite ikono uporabniškega profila v zgornjem desnem delu strani s pregledom. Nato izberite in kliknite Oglejte si ključe API.

Na strani z nastavitvami ključev API kliknite na Ustvari nov skrivni ključ vnesite ime za ključ API in kliknite Ustvarite skrivni ključ za ustvarjanje ključa API.

Ustvarite projekt React

Zaženite spodnje ukaze na svojem terminalu, da lokalno ustvarite nov projekt React. Upoštevajte, da morate imeti nameščen Node.js.

Preberite ta dva članka, če želite izvedeti, kako namestite Node.js v sistem Windows in kako namestiti Node.js na Ubuntu.

mkdir React-projekt 
cd React-projekt
npx create-react-app aplikacija za ustvarjanje slik
cd image-generator-aplikacija
npm začetek

Namesto uporabe ukaza create-react-app lahko uporabite tudi Vite, da nastavite svoj projekt React. Vite je orodje za gradnjo, zasnovano za hitro in učinkovito gradnjo spletnih aplikacij.

Integrirajte DALL-E API OpenAI za ustvarjanje slik

Ko zaženete in zaženete svojo aplikacijo React, namestite knjižnico Node.js OpenAI za uporabo v svojih aplikacijah React.

npm namestite openai

Nato v korenskem imeniku mape projekta ustvarite novo .env datoteko za shranjevanje ključa API.

REACT_APP_OPENAI_API_KEY = "KLJUČ API"

Tukaj lahko najdete kodo tega projekta Repozitorij GitHub.

Ustvarite komponento generatorja slik

V /src imenik, ustvarite novo mapo in jo poimenujte komponentein znotraj nje ustvarite novo datoteko z imenom ImageGenerator.js. V to datoteko dodajte spodnjo kodo.

Začnite z uvozom zahtevanih modulov:

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

Konfiguracijski modul konfigurira odjemalca API-ja OpenAI za uporabo, medtem ko modul OpenAIApi ponuja metode za interakcijo z API-jem OpenAI. Ta dva modula omogočata dostop in uporabo funkcij DALL-E iz aplikacije React.

Nato definirajte funkcionalno komponento in ji dodajte naslednjo kodo:

funkcijoImageGenerator() {
konst [prompt, setPrompt] = useState("");
konst [rezultat, setResult] = useState("");
konst [nalaganje, setLoading] = useState(lažno);
konst [placeholder, setPlaceholder] = useState(
"Iščite leva s čopiči, ki slika mona lizo ..."
 );
konst konfiguracija = novo Konfiguracija ({
 apiKey: process.env. REACT_APP_OPENAI_API_KEY,
 });

konst openai = novo OpenAIApi (konfiguracija);

konst generiraj sliko = asinh () => {
 setPlaceholder(`Išči ${prompt}..`);
 setLoading(prav);
poskusi {
konst res = čakati openai.createImage({
 poziv: poziv,
 n: 1,
 velikost: "512 x 512",
 });
 setLoading(lažno);
 setResult (res.data.data[0].url);
 } ulov (napaka) {
 setLoading(lažno);
konzola.napaka(`Napaka pri ustvarjanju slike: ${error.response.data.error.message}`);
 }
 };

Ta koda definira funkcionalno komponento React, imenovano ImageGenerator. Komponenta uporablja več spremenljivk stanja za upravljanje vnosnega poziva, izhodnega rezultata, statusa nalaganja in besedila nadomestnega mesta.

Komponenta ustvarja tudi a konfiguracijo za odjemalca OpenAI API, ki vključuje ključ API, pridobljen iz spremenljivke okolja.

Asinhroni generateImage funkcija se bo zagnala, ko bo uporabnik kliknil gumb in posredoval uporabniški poziv.

Nato pokliče openai.createImage način za ustvarjanje slike na podlagi danega poziva. Ta metoda vrne odzivni objekt, ki vključuje ustvarjeni URL slike.

Če klic API-ja uspe, koda posodobi rezultat spremenljivko stanja z URL-jem in nastavi status nalaganja na lažno. Če klic API-ja ne uspe, še vedno nastavi status nalaganja na lažno, ampak tudi zabeleži sporočilo o napaki v konzolo.

Na koncu upodobite elemente React JSX, ki sestavljajo komponento Image generator.

vrnitev (
"posoda">
 { nalaganje? (
 <>
Ustvarjanje slike... Prosim počakajte...</h3>
 </>
 ): (
 <>
Ustvarite sliko z Open AI API</h2>


 className="vnos aplikacije"
 placeholder={placeholder}
 onChange={(e) => setPrompt (e.target.value)}
 vrstice="10"
 cols="100"
 />
Ustvari sliko</button>
 {rezultat.dolžina > 0? (
"rezultat-slika" src={rezultat} alt="rezultat" />
 ): (
 <>
 </>
 )}
 </>
 )}
 </div>
 )
}
izvozprivzeto ImageGenerator

Koda te komponente pogojno upodobi različne elemente glede na vrednost nalaganje spremenljivka stanja.

če nalaganje je res, prikaže sporočilo o nalaganju. Nasprotno, če nalaganje je false, prikazuje glavni vmesnik za generiranje slike z uporabo API-ja OpenAI, sestavljen iz besedilnega polja, ki zajema uporabniške pozive, in gumba za pošiljanje.

The rezultat spremenljivka stanja vsebuje ustvarjeni URL slike, ki je pozneje upodobljena v brskalniku.

Posodobite komponento App.js

Dodajte to kodo v datoteko App.js:

uvoz'./App.css';
uvoz ImageGenerator od'./component/ImageGenerator';
funkcijoaplikacija() {
vrnitev (

"Aplikacija">
"Glava aplikacije">

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

Zdaj lahko nadaljujete in zavrtite razvojni strežnik, da posodobite spremembe in se pomaknete do njega http://localhost: 3000 s svojim brskalnikom, da preizkusite funkcionalnost generiranja slik.

Če želite doseči najboljše možne rezultate pri uporabi orodja AI za ustvarjanje slike, zagotovite podroben poziv v besedilnem polju. To pomeni, da sliko opišete čim bolj temeljito, pri čemer ne izpustite nobenih podrobnosti.

Ta postopek se imenuje Prompt Engineering in vključuje zagotavljanje podrobnih pozivov, tako da lahko jezikovni model ustvari najboljše rezultate na podlagi posredovanih uporabniških vnosov.

Glede na nedavni porast programske opreme AI, ki je na voljo na trgu, nadaljuje kariero v Prompt Engineering je lahko donosna priložnost.

Povečajte moč jezikovnih modelov pri razvoju programske opreme

Orodja umetne inteligence, ki jih poganjajo veliki jezikovni modeli, so zaradi svojih neverjetnih funkcij in zmogljivosti prevzela področje razvoja programske opreme.

Ta orodja imajo potencial za izboljšanje trenutnega ekosistema programske opreme, saj razvijalcem omogočajo integracijo kul funkcij AI ki izboljšujejo uporabo različnih izdelkov – uporaba tehnologije umetne inteligence predstavlja edinstveno priložnost za izdelavo programske opreme na inovativen način načine.