Kaip sukurti vaizdo generatorių „React“ naudojant DALL-E API

Dirbtinis intelektas nuolat tobulėja ir dabar gali sukurti stulbinančius vaizdus. Naujausias viruso pavyzdys vaizdavo turtingiausius ir įtakingiausius pasaulio asmenis suplėšytais drabužiais, gyvenančius lūšnynų aplinkoje. Įspūdingi vaizdai yra tai, kad tiek žmonės, tiek juos supa užfiksuotas didelis detalumas.

Kalbų modeliai, tokie kaip DALL-E ir Midjourney, suteikia galimybę kurti vaizdus, ​​​​kaip įvesties tekstinius aprašymus ir sukuria patrauklius vaizdus.

Sužinokite, kaip integruoti OpenAI DALL-E API, kad būtų generuojami vaizdai React programoje.

Vaizdo generavimas naudojant OpenAI DALL-E kalbos modelį

Kaip DALL-E kalbos modelis iš tikrųjų sukuria vaizdus? Per daug nesigilindama į AI vaizdų generavimo sudėtingumą, DALL-E pirmiausia interpretuoja jai pateiktus tekstinius aprašymus kaip įvestis, naudodama natūralios kalbos apdorojimą (NLP). Tada jis pateikia tikrovišką vaizdą, kuris labai atitinka pateiktą aprašymą.

Įvesties raginimai gali apimti tekstinius asmens, objekto ar scenos aprašymus. Be to, jame taip pat gali būti detalių, tokių kaip tam tikra spalva, forma ir dydis. Nepriklausomai nuo įvesties teksto sudėtingumo ar paprastumo, DALL-E sukurs vaizdą, kuris labai atitinka įvesties aprašymą.

Svarbu pažymėti, kad kalbos modelis, kaip ir kiti modeliai, buvo parengtas naudojant didelį duomenų rinkinį su milijonais vaizdų duomenų, kad išmoktumėte atpažinti ir generuoti fotorealistinius vaizdus iš pateiktų įėjimai.

Darbo su OpenAI DALL-E API pradžia

OpenAI DALL-E API galima naudoti kaip viešą beta versiją. Norėdami integruoti API naudojimui savo React programoje, jums reikės OpenAI API rakto. Eikite į OpenAIir prisijunkite prie paskyros apžvalgos puslapio, kad gautumėte API raktą.

Prisijungę spustelėkite naudotojo profilio piktogramą viršutinėje dešinėje apžvalgos puslapio skiltyje. Tada pasirinkite ir spustelėkite Peržiūrėkite API raktus.

API raktų nustatymų puslapyje spustelėkite Sukurkite naują slaptą raktą mygtuką, nurodykite API rakto pavadinimą ir spustelėkite Sukurkite slaptą raktą kad sugeneruotumėte savo API raktą.

Sukurkite Reagavimo projektą

Vykdykite toliau pateiktas komandas savo terminale, kad sukurtumėte naują „React“ projektą vietoje. Atminkite, kad turite būti įdiegtas Node.js.

Norėdami sužinoti, kaip tai padaryti, skaitykite šiuos du straipsnius įdiegti Node.js sistemoje Windows ir kaip įdiegti Node.js Ubuntu.

mkdir React-projektas 
cd React-projektas
npx sukurti-reaguoti-app image-generator-app
cd image-generator-app
npm pradžia

Arba, užuot naudoję komandą kurti-reaguoti-programą, galite naudoti Vite, kad nustatytumėte savo „React“ projektą. Vite yra kūrimo įrankis, skirtas greitai ir efektyviai kurti žiniatinklio programas.

Integruokite OpenAI DALL-E API, kad sukurtumėte vaizdus

Sukūrę ir paleidę „React“ programą, įdiekite „OpenAI“ Node.js biblioteką, kad galėtumėte ją naudoti „React“ programose.

npm įdiegti openai

Tada savo projekto aplanko šakniniame kataloge sukurkite naują .env failą, kuriame būtų jūsų API raktas.

REACT_APP_OPENAI_API_KEY = „API RAKTAS“

Šio projekto kodą rasite čia GitHub saugykla.

Sukurkite vaizdo generatoriaus komponentą

Viduje /src kataloge, sukurkite naują aplanką, pavadinkite jį komponentaiir sukurkite jame naują failą pavadinimu ImageGenerator.js. Pridėkite žemiau esantį kodą prie šio failo.

Pradėkite importuodami reikiamus modulius:

importuoti„../App.css“; 
importuoti { useState } iš"reaguoti"; 
importuoti { Konfigūracija, OpenAIApi } iš"Openai";

Konfigūravimo modulis sukonfigūruoja OpenAI API klientą naudojimui, o OpenAIApi modulis pateikia metodus, kaip sąveikauti su OpenAI API. Šie du moduliai suteikia galimybę pasiekti ir naudoti DALL-E funkcijas iš React programos.

Tada apibrėžkite funkcinį komponentą ir pridėkite prie jo šį kodą:

funkcijaVaizdo generatorius() {
konst [prompt, setPrompt] = useState("");
konst [result, setResult] = useState("");
konst [įkeliama, setLoading] = useState(klaidinga);
konst [placeholder, setPlaceholder] = useState(
„Ieškokite liūto su teptukais, piešdami Mona Lisa paveikslą...“
 );
konst konfigūracija = naujas Konfigūracija({
 apiKey: process.env. REACT_APP_OPENAI_API_KEY,
 });

konst openai = naujas OpenAIApi (konfigūracija);

konst generuotiImage = async () => {
 setPlaceholder(`Ieškokite ${prompt}..`);
 setLoading(tiesa);
bandyti {
konst res = laukti openai.createImage({
 raginimas: raginimas,
 n: 1,
 dydis: "512x512",
 });
 setLoading(klaidinga);
 setResult (res.data.data[0].url);
 } sugauti (klaida) {
 setLoading(klaidinga);
konsolė.error(`Klaida generuojant vaizdą: ${error.response.data.error.message}`);
 }
 };

Šis kodas apibrėžia „React“ funkcinį komponentą, vadinamą Vaizdo generatorius. Komponentas naudoja kelis būsenos kintamuosius, kad tvarkytų įvesties raginimą, išvesties rezultatą, įkėlimo būseną ir rezervuotos vietos tekstą.

Komponentas taip pat sukuria a konfigūracija Objektas OpenAI API klientui, kuris apima API raktą, gautą iš aplinkos kintamojo.

Asinchroninis generuoti vaizdą funkcija veiks, kai vartotojas spustelėja mygtuką, perduodamas vartotojo raginimą.

Tada jis vadina openai.createImage būdas sukurti vaizdą pagal pateiktą raginimą. Šis metodas grąžina atsakymo objektą, kuriame yra sugeneruoto vaizdo URL.

Jei API skambutis sėkmingas, kodas atnaujina rezultatas būsenos kintamąjį su URL ir nustato įkėlimo būseną į klaidinga. Jei API skambutis nepavyksta, įkėlimo būsena vis tiek nustatoma į klaidinga, bet taip pat užregistruoja klaidos pranešimą konsolėje.

Galiausiai atvaizduokite „React JSX“ elementus, kurie sudaro vaizdo generatoriaus komponentą.

grąžinti (
"konteineris">
 { kraunasi? (
 <>
Generuojamas vaizdas... Prašome palaukti...</h3>
 </>
 ): (
 <>
Sukurkite vaizdą naudodami Open AI API</h2>


 className="programos įvestis"
 placeholder={placeholder}
 onChange={(e) => setPrompt (e.target.value)}
 eilutės ="10"
 cols="100"
 />
Sukurti vaizdą</button>
 { rezultatas.ilgis > 0? (
"rezultato vaizdas" src={rezultatas} alt="rezultatas" />
 ): (
 <>
 </>
 )}
 </>
 )}
 </div>
 )
}
eksportuotinumatytas Vaizdo generatorius

Šio komponento kodas sąlyginai pateikia skirtingus elementus pagal vertę pakrovimas būsenos kintamasis.

Jeigu pakrovimas tiesa, rodomas įkėlimo pranešimas. Ir atvirkščiai, jei pakrovimas yra klaidinga, rodoma pagrindinė sąsaja, skirta vaizdo generavimui naudojant OpenAI API, kurią sudaro tekstinė sritis, fiksuojanti vartotojo raginimus ir pateikimo mygtukas.

The rezultatas būsenos kintamasis turi sugeneruoto vaizdo URL, kuris vėliau pateikiamas naršyklėje.

Atnaujinkite App.js komponentą

Pridėkite šį kodą prie savo App.js failo:

importuoti„./App.css“;
importuoti Vaizdo generatorius iš„./component/ImageGenerator“;
funkcijaProgramėlė() {
grąžinti (

"Programėlė">
"Programos antraštė">

 </header>
 </div>
 );
}
eksportuotinumatytas Programėlė;

Dabar galite tęsti kūrimo serverį, kad atnaujintumėte pakeitimus ir pereitumėte prie http://localhost: 3000 naudodami naršyklę, kad išbandytumėte vaizdo generavimo funkciją.

Norėdami gauti geriausius įmanomus rezultatus vaizdui generuoti naudodami AI įrankį, teksto srityje būtinai pateikite išsamų raginimą. Tai reiškia, kad vaizdas turi būti aprašytas kuo išsamiau, nepaliekant jokių detalių.

Šis procesas vadinamas Prompt Engineering ir apima išsamių raginimų teikimą, kad kalbos modelis galėtų duoti geriausius rezultatus, remiantis pateikta vartotojo įvestimi.

Atsižvelgiant į pastaruoju metu rinkoje padaugėjusį dirbtinio intelekto programinės įrangos skaičių, siekianti karjeros Prompt Engineering srityje gali būti pelninga galimybė.

Maksimaliai padidinkite kalbos modelių galią kuriant programinę įrangą

Dirbtinio intelekto įrankiai, kuriuos maitina dideli kalbų modeliai, audringai užėmė programinės įrangos kūrimo sritį dėl savo neįtikėtinų savybių ir galimybių.

Šios priemonės turi potencialą pagerinti dabartinę programinės įrangos ekosistemą, leisdamos kūrėjams integruoti šaunias AI funkcijas. kurie pagerina skirtingų produktų naudojimą – AI technologijos naudojimas suteikia unikalią galimybę kurti naujovišką programinę įrangą būdai.