Izveidojiet vienkāršu DALL-E API priekšgalu un sāciet eksperimentēt ar AI ģenerētu saturu jau šodien.

Mākslīgais intelekts nepārtraukti pilnveidojas un tagad var radīt pārsteidzošus attēlus. Nesenā vīrusa piemērā tika attēlotas pasaules bagātākās un ietekmīgākās personas saplēstās drēbēs, kas dzīvo graustu vidē. Attēlos iespaidīgais ir augstais detalizācijas līmenis, kas tverts gan cilvēkos, gan viņu apkārtnē.

Valodu modeļi, piemēram, DALL-E un Midjourney, nodrošina šīs attēlu ģenerēšanas iespējas, izmantojot teksta aprakstus kā ievadi un radot aizraujošus attēlus.

Uzziniet, kā integrēt OpenAI DALL-E API, lai ģenerētu attēlus React lietojumprogrammā.

Attēlu ģenerēšana, izmantojot OpenAI DALL-E valodas modeli

Kā DALL-E valodas modelis faktiski ģenerē attēlus? Pārāk neiedziļinoties AI attēlu ģenerēšanas sarežģītībā, DALL-E vispirms interpretē tam ievadītos teksta aprakstus kā ievadi, izmantojot dabiskās valodas apstrādi (NLP). Pēc tam tas atveido reālistisku attēlu, kas ļoti atbilst dotajam aprakstam.

instagram viewer

Ievades uzvednēs var būt ietverti personas, objekta vai ainas teksta apraksti. Turklāt tas var ietvert arī tādas detaļas kā noteikta krāsa, forma un izmērs. Neatkarīgi no ievades teksta sarežģītības vai vienkāršības, DALL-E ģenerēs attēlu, kas ļoti atbilst ievades aprakstam.

Ir svarīgi atzīmēt, ka valodas modelis, tāpat kā citi modeļi, tika apmācīts, izmantojot lielu datu kopu ar miljoniem attēlu datu, lai uzzinātu, kā identificēt un ģenerēt fotoreālistiskus attēlus no dotajiem ievades.

Darba sākšana ar OpenAI DALL-E API

OpenAI DALL-E API ir pieejama lietošanai kā publiska beta versija. Lai integrētu API lietošanai savā React lietojumprogrammā, jums būs nepieciešama OpenAI API atslēga. Dodieties uz OpenAIun pierakstieties sava konta pārskata lapā, lai iegūtu API atslēgu.

Kad esat pierakstījies, pārskata lapas augšējā labajā sadaļā noklikšķiniet uz lietotāja profila ikonas. Pēc tam atlasiet un noklikšķiniet uz Skatīt API atslēgas.

API atslēgu iestatījumu lapā noklikšķiniet uz Izveidojiet jaunu slepeno atslēgu pogu, norādiet API atslēgas nosaukumu un noklikšķiniet uz Izveidojiet slepeno atslēgu lai ģenerētu savu API atslēgu.

Izveidojiet reaģēšanas projektu

Palaidiet tālāk norādītās komandas savā terminālī, lai lokāli izveidotu jaunu React projektu. Ņemiet vērā, ka jums ir jābūt instalētam Node.js.

Skatiet šos divus rakstus, lai uzzinātu, kā to izdarīt instalējiet Node.js operētājsistēmā Windows un kā instalēt Node.js Ubuntu.

mkdir React-projekts 
cd React-projekts
npx Create-react-app image-generator-app
cd image-generator-app
npm sākums

Alternatīvi, tā vietā, lai izmantotu komandu create-react-app, varat izmantot Vite izveidot savu React projektu. Vite ir veidošanas rīks, kas paredzēts ātrai un efektīvai tīmekļa lietojumprogrammu izveidei.

Integrējiet OpenAI DALL-E API, lai ģenerētu attēlus

Kad jūsu React lietojumprogramma ir izveidota un darbojas, instalējiet OpenAI bibliotēku Node.js, lai to izmantotu savās React lietojumprogrammās.

npm instalēt openai

Pēc tam projekta mapes saknes direktorijā izveidojiet jaunu .env failu, lai turētu jūsu API atslēgu.

REACT_APP_OPENAI_API_KEY = "API KEY"

Jūs varat atrast šī projekta kodu GitHub repozitorijs.

Izveidojiet attēlu ģeneratora komponentu

Iekš /src direktorijā, izveidojiet jaunu mapi, nosauciet to sastāvdaļasun izveidojiet tajā jaunu failu ar nosaukumu ImageGenerator.js. Pievienojiet tālāk norādīto kodu šim failam.

Sāciet ar nepieciešamo moduļu importēšanu:

imports'../App.css'; 
imports { useState } no"reaģēt"; 
imports { Konfigurācija, OpenAIApi } no"Openai";

Konfigurācijas modulis konfigurē OpenAI API klientu lietošanai, savukārt OpenAIApi modulis nodrošina metodes mijiedarbībai ar OpenAI API. Šie divi moduļi ļauj piekļūt un izmantot DALL-E funkcijas no lietojumprogrammas React.

Pēc tam definējiet funkcionālo komponentu un pievienojiet tam šādu kodu:

funkcijuImageGenerator() {
konst [prompt, setPrompt] = useState("");
konst [rezultāts, setResult] = useState("");
konst [loading, setLoading] = useState(viltus);
konst [placeholder, setPlaceholder] = useState(
"Meklējiet lauvu ar otām, gleznojot mona lisa gleznu..."
 );


konst konfigurācija = jauns Konfigurācija({
 apiKey: process.env. REACT_APP_OPENAI_API_KEY,
 });

konst openai = jauns OpenAIApi (konfigurācija);

konst generateImage = asinhrons () => {
 setPlaceholder(`Meklēt ${prompt}..`);
 setLoading(taisnība);


mēģināt {
konst res = gaidīt openai.createImage({
 uzvedne: uzvedne,
 n: 1,
 Izmērs: "512x512",
 });
 setLoading(viltus);
 setResult (res.data.data[0].url);
 } noķert (kļūda) {
 setLoading(viltus);
konsole.error(`Kļūda, ģenerējot attēlu: ${error.response.data.error.message}`);
 }
 };

Šis kods definē React funkcionālo komponentu, ko sauc ImageGenerator. Komponents izmanto vairākus stāvokļa mainīgos, lai pārvaldītu ievades uzvedni, izvades rezultātu, ielādes statusu un viettura tekstu.

Komponents arī rada a konfigurācija objekts OpenAI API klientam, kas ietver API atslēgu, kas izgūta no vides mainīgā.

Asinhronais ģenerēt attēlu funkcija darbosies, kad lietotājs noklikšķinās uz pogas, ejot garām lietotāja uzvednei.

Pēc tam tas izsauc openai.createImage metode attēla ģenerēšanai, pamatojoties uz doto uzvedni. Šī metode atgriež atbildes objektu, kas ietver ģenerētā attēla URL.

Ja API izsaukums izdodas, kods atjaunina rezultāts stāvokļa mainīgais ar URL un iestata ielādes statusu uz viltus. Ja API izsaukums neizdodas, tas joprojām iestata ielādes statusu uz viltus, bet arī reģistrē kļūdas ziņojumu konsolē.

Visbeidzot, renderējiet React JSX elementus, kas veido attēla ģeneratora komponentu.

atgriezties (
"konteiners">
 { ielāde? (
 <>
Notiek attēla ģenerēšana... Lūdzu uzgaidiet...</h3>
 </>
 ): (
 <>
Ģenerējiet attēlu, izmantojot Open AI API</h2>




 klasesNosaukums="lietotnes ievade"
 placeholder={placeholder}
 onChange={(e) => setPrompt (e.target.value)}
 rindas="10"
 cols="100"
 />




 { rezultāts.garums > 0? (
"rezultāta attēls" src={rezultāts} alt="rezultāts" />
 ): (
 <>
 </>
 )}
 </>
 )}
 </div>
 )
}


eksportētnoklusējuma ImageGenerator

Šī komponenta kods nosacīti atveido dažādus elementus, pamatojoties uz vērtību iekraušana stāvokļa mainīgais.

Ja iekraušana ir taisnība, tas parāda ielādes ziņojumu. Un otrādi, ja iekraušana ir nepatiess, tas parāda galveno interfeisu attēla ģenerēšanai, izmantojot OpenAI API, kas sastāv no teksta apgabala, kas tver lietotāja uzvednes, un iesniegšanas pogas.

The rezultāts stāvokļa mainīgais satur ģenerētā attēla URL, kas vēlāk tiek renderēts pārlūkprogrammā.

Atjauniniet App.js komponentu

Pievienojiet šo kodu savam App.js failam:

imports'./App.css';
imports ImageGenerator no'./component/ImageGenerator';
funkcijuApp() {
atgriezties (


"Lietotne">
"Lietotnes galvene">

 </header>
 </div>
 );
}


eksportētnoklusējuma Lietotne;

Tagad varat iet uz priekšu un izveidot izstrādes serveri, lai atjauninātu izmaiņas un pārietu uz to http://localhost: 3000 ar pārlūkprogrammu, lai pārbaudītu attēlu ģenerēšanas funkcionalitāti.

Lai iegūtu labākos iespējamos rezultātus, izmantojot AI rīku attēla ģenerēšanai, teksta apgabalā noteikti norādiet detalizētu uzvedni. Tas nozīmē, ka attēls ir jāapraksta pēc iespējas rūpīgāk, neatstājot nekādas detaļas.

Šo procesu sauc par tūlītēju inženieriju, un tas ietver detalizētu uzvedņu nodrošināšanu, lai valodas modelis varētu sniegt vislabākos rezultātus, pamatojoties uz lietotāja sniegto ievadi.

Ņemot vērā neseno tirgū pieejamā AI programmatūras pieaugumu, turpinot karjeru Prompt Engineering var būt ienesīga iespēja.

Maksimāli palieliniet valodu modeļu jaudu programmatūras izstrādē

AI rīki, ko darbina lieli valodu modeļi, ir iekarojuši programmatūras izstrādes jomu to neticamo funkciju un iespēju dēļ.

Šie rīki var uzlabot pašreizējo programmatūras ekosistēmu, ļaujot izstrādātājiem integrēt lieliskas AI funkcijas kas uzlabo dažādu produktu izmantošanu — mākslīgā intelekta tehnoloģijas izmantošana sniedz unikālu iespēju izstrādāt programmatūru inovatīvā veidā veidus.