Looge DALL-E API-le lihtne kasutajaliides ja alustage tehisintellekti loodud sisuga katsetamist juba täna.

Tehisintellekt paraneb pidevalt ja suudab nüüd luua hämmastavaid pilte. Hiljutine viirusnäide kujutas maailma jõukamaid ja mõjukamaid inimesi rebenenud riietes elamas slummikeskkonnas. Piltide juures on muljetavaldav nii inimeste kui ka nende ümbruse kõrge detailsus.

Keelemudelid, nagu DALL-E ja Midjourney, toetavad neid kujutiste loomise võimalusi, võttes sisendiks tekstilisi kirjeldusi ja luues köitvaid pilte.

Siit saate teada, kuidas integreerida OpenAI DALL-E API, et luua pilte Reacti rakenduses.

Piltide genereerimine OpenAI DALL-E keelemudeli abil

Kuidas DALL-E keelemudel tegelikult pilte genereerib? Süvenemata liiga sügavale tehisintellekti kujutise genereerimise keerukusesse, tõlgendab DALL-E talle sisestatud tekstikirjeldusi esmalt sisenditena, kasutades loomuliku keele töötlust (NLP). Seejärel renderdab see realistliku pildi, mis vastab täpselt antud kirjeldusele.

Sisestusviibad võivad sisaldada inimese, objekti või stseeni tekstilisi kirjeldusi. Lisaks võib see sisaldada ka selliseid üksikasju nagu konkreetne värv, kuju ja suurus. Olenemata sisendteksti keerukusest või lihtsusest genereerib DALL-E kujutise, mis vastab täpselt sisendi kirjeldusele.

instagram viewer

Oluline on märkida, et keelemudelit, nagu ka teisi mudeleid, koolitati suure andmestiku põhjal miljonite pildiandmetega, et õppida, kuidas tuvastada ja genereerida antud fotorealistlikke pilte sisendid.

OpenAI DALL-E API-ga alustamine

OpenAI DALL-E API on saadaval kasutamiseks avaliku beetaversioonina. API integreerimiseks oma Reacti rakenduses kasutamiseks vajate OpenAI API võtit. Suunduge poole OpenAIja logige sisse oma konto ülevaatelehele, et haarata oma API võti.

Pärast sisselogimist klõpsake ülevaatelehe paremas ülanurgas kasutajaprofiili ikoonil. Järgmisena valige ja klõpsake nuppu Vaadake API võtmeid.

API võtmete seadete lehel klõpsake nuppu Looge uus salajane võti nuppu, sisestage oma API võtmele nimi ja klõpsake nuppu Loo salajane võti oma API-võtme loomiseks.

Looge reageerimisprojekt

Käivitage oma terminalis allolevad käsud, et luua kohapeal uus Reacti projekt. Pange tähele, et teil peaks olema installitud Node.js.

Nendest kahest artiklist saate teada, kuidas seda teha installige Node.js Windowsi ja kuidas installida Node.js Ubuntule.

mkdir React-projekt 
cd React-projekt
npx loo-reageeri-rakendus pildigeneraator-rakendus
cd image-generator-app
npm start

Alternatiivina võite käsu loo-react-app kasutamise asemel kasutada Vite oma Reacti projekti seadistamiseks. Vite on ehitustööriist, mis on loodud veebirakenduste kiireks ja tõhusaks loomiseks.

Piltide genereerimiseks integreerige OpenAI DALL-E API

Kui olete oma Reacti rakenduse käivitanud ja käivitanud, installige oma Reacti rakendustes kasutamiseks OpenAI Node.js teek.

npm install openai

Järgmisena looge oma projektikausta juurkataloogis uus .env faili oma API võtme hoidmiseks.

REACT_APP_OPENAI_API_KEY = "API VÕTI"

Selle projekti koodi leiate siit GitHubi hoidla.

Looge pildigeneraatori komponent

Aastal /src kataloogi, looge uus kaust, andke sellele nimi komponendidja looge selle sees uus fail nimega ImageGenerator.js. Lisage sellele failile allolev kood.

Alustage vajalike moodulite importimisega:

importida'../App.css'; 
importida { useState } alates"reageerida"; 
importida { Konfiguratsioon, OpenAIApi } alates"openai";

Konfiguratsioonimoodul konfigureerib OpenAI API kliendi kasutamiseks, samas kui OpenAIApi moodul pakub meetodeid OpenAI API-ga suhtlemiseks. Need kaks moodulit võimaldavad juurdepääsu DALL-E funktsioonidele ja neid kasutada rakenduses React.

Järgmisena määratlege funktsionaalne komponent ja lisage sellele järgmine kood:

funktsiooniImageGenerator() {
konst [prompt, setPrompt] = useState("");
konst [result, setResult] = useState("");
konst [laadimine, setLoading] = useState(vale);
konst [placeholder, setPlaceholder] = useState(
"Otsige pintslitega lõvi, mis maalib mona lisa maali..."
 );


konst konfiguratsioon = uus Seadistused({
 apiKey: process.env. REACT_APP_OPENAI_API_KEY,
 });

konst openai = uus OpenAIApi (konfiguratsioon);

konst genereeridaImage = asünkr () => {
 setPlaceholder(`Otsi ${prompt}..`);
 setLoading(tõsi);


proovi {
konst res = ootama openai.createImage({
 viip: viip,
 n: 1,
 suurus: "512x512",
 });
 setLoading(vale);
 setResult (res.data.data[0].url);
 } püüda (viga) {
 setLoading(vale);
konsool.error(`Viga pildi loomisel: ${error.response.data.error.message}`);
 }
 };

See kood määratleb Reacti funktsionaalse komponendi, mida nimetatakse ImageGenerator. Komponent kasutab sisendviipa, väljundtulemuse, laadimisoleku ja kohatäite teksti haldamiseks mitut olekumuutujat.

Komponent loob ka a konfiguratsiooni OpenAI API kliendi objekt, mis sisaldab keskkonnamuutujast hangitud API-võtit.

Asünkroonne genereeri pilt funktsioon käivitub, kui kasutaja klõpsab nuppu, edastades kasutajaviipa.

Seejärel kutsub see üles openai.createImage meetod pildi genereerimiseks antud viipa alusel. See meetod tagastab vastuseobjekti, mis sisaldab loodud pildi URL-i.

Kui API kõne õnnestub, värskendab kood faili tulemus olekumuutuja koos URL-iga ja määrab laadimise olekuks vale. Kui API-kõne nurjub, määrab see ikkagi laadimise olekuks vale, vaid logib konsooli ka veateate.

Lõpuks renderdage React JSX elemendid, mis moodustavad pildigeneraatori komponendi.

tagasi (
"konteiner">
 { laaditakse? (
 <>
Pildi genereerimine... Palun oota...</h3>
 </>
 ): (
 <>
Looge pilt Open AI API abil</h2>




 klassinimi="rakenduse sisend"
 kohahoidja={kohahoidja}
 onChange={(e) => setPrompt (e.target.value)}
 read="10"
 veergud="100"
 />




 { tulemus.pikkus > 0? (
"tulemuse pilt" src={tulemus} alt="tulemus" />
 ): (
 <>
 </>
 )}
 </>
 )}
 </div>
 )
}


eksportidavaikimisi ImageGenerator

Selle komponendi kood renderdab tinglikult erinevad elemendid parameetri väärtuse alusel laadimine oleku muutuja.

Kui laadimine on tõsi, see näitab laadimisteadet. Ja vastupidi, kui laadimine on vale, näitab see peamist liidest pildi genereerimiseks OpenAI API abil, mis koosneb tekstialast, mis salvestab kasutajaviipasid ja esitamisnupu.

The tulemus olekumuutuja sisaldab loodud pildi URL-i, mis hiljem brauseris renderdatakse.

Värskendage komponenti App.js

Lisage see kood oma App.js-faili:

importida'./App.css';
importida ImageGenerator alates'./component/ImageGenerator';
funktsiooniRakendus() {
tagasi (


"Rakendus">
"Rakenduse päis">

 </header>
 </div>
 );
}


eksportidavaikimisi Rakendus;

Nüüd saate arendusserverit muudatuste värskendamiseks ja sinna navigeerimiseks edasi minna http://localhost: 3000 oma brauseriga, et testida pildi genereerimise funktsioone.

Parimate võimalike tulemuste saamiseks pildi loomiseks tehisintellekti tööriista kasutamisel esitage tekstialal kindlasti üksikasjalik viip. See tähendab pildi võimalikult põhjalikku kirjeldamist, jätmata välja ühtegi detaili.

Seda protsessi nimetatakse Prompt Engineeringiks ja see hõlmab üksikasjalike viipade esitamist, et keelemudel saaks kasutaja esitatud sisendite põhjal parimaid tulemusi anda.

Arvestades turul saadaoleva tehisintellekti tarkvara hiljutist tõusu, jätkates karjääri Prompt Engineeringis võib olla tulus võimalus.

Maksimeerige keelemudelite võimsus tarkvaraarenduses

Suurtel keelemudelitel töötavad AI-tööriistad on oma uskumatute funktsioonide ja võimaluste tõttu tormiliselt vallutanud tarkvaraarenduse valdkonna.

Need tööriistad võivad parandada praegust tarkvara ökosüsteemi, võimaldades arendajatel integreerida lahedaid AI funktsioone mis täiustavad erinevate toodete kasutamist – tehisintellekti tehnoloogia kasutamine annab ainulaadse võimaluse uuendusliku tarkvara loomiseks viise.