Rakenna yksinkertainen käyttöliittymä DALL-E API: lle ja aloita tekoälyn luoman sisällön kokeilu jo tänään.

Tekoäly kehittyy jatkuvasti ja voi nyt luoda hämmästyttäviä kuvia. Äskettäinen virusesimerkki kuvasi maailman rikkaimpia ja vaikutusvaltaisimpia yksilöitä repeytyneissä vaatteissa, jotka asuvat slummiympäristössä. Kuvissa vaikuttavaa on sekä ihmisissä että heidän ympäristössään vangittu korkea yksityiskohta.

DALL-E: n ja Midjourneyn kaltaiset kielimallit tukevat näitä kuvanmuodostusominaisuuksia, ottavat tekstin kuvaukset syötteenä ja luovat kiehtovia kuvia.

Opi integroimaan OpenAI: n DALL-E API kuvien luomiseksi React-sovelluksessa.

Kuvan luominen OpenAI: n DALL-E-kielimallilla

Miten DALL-E-kielimalli itse asiassa luo kuvia? Syventymättä liian syvälle tekoälykuvan luomisen monimutkaisuuteen, DALL-E tulkitsee ensin sille syötetyt tekstikuvaukset syötteiksi käyttämällä luonnollisen kielen käsittelyä (NLP). Sitten se tuottaa realistisen kuvan, joka vastaa tarkasti annettua kuvausta.

Syötekehotteet voivat sisältää tekstillisiä kuvauksia henkilöstä, esineestä tai kohtauksesta. Lisäksi se voi sisältää myös yksityiskohtia, kuten tietyn värin, muodon ja koon. Riippumatta syötetyn tekstin monimutkaisuudesta tai yksinkertaisuudesta, DALL-E luo kuvan, joka vastaa tarkasti syötettyä kuvausta.

instagram viewer

On tärkeää huomata, että kielimalli, kuten muutkin mallit, on koulutettu suurelle tietojoukolle miljoonien kuvatietojen avulla oppia tunnistamaan ja luomaan fotorealistisia kuvia annetuista kuvista tulot.

OpenAI: n DALL-E API: n käytön aloittaminen

OpenAI: n DALL-E API on saatavilla käytettäväksi julkisena betaversiona. Tarvitset OpenAI: n API-avaimen, jotta voit integroida sovellusliittymän käytettäväksi React-sovelluksessasi. Suuntaa kohti OpenAIja kirjaudu sisään tilisi yleiskatsaussivulle saadaksesi API-avaimesi.

Kun olet kirjautunut sisään, napsauta yleiskuvaussivusi oikeassa yläkulmassa olevaa käyttäjäprofiilikuvaketta. Valitse seuraavaksi ja napsauta Näytä API-avaimet.

Napsauta API Keys -asetussivulla Luo uusi salainen avain -painiketta, anna API-avaimellesi nimi ja napsauta Luo salainen avain luodaksesi API-avaimesi.

Luo React-projekti

Luo uusi React-projekti paikallisesti suorittamalla alla olevat komennot terminaalissasi. Huomaa, että sinulla pitäisi olla Node.js asennettuna.

Näistä kahdesta artikkelista saat lisätietoja asenna Node.js Windowsiin ja kuinka Node.js asennetaan Ubuntuun.

mkdir React-projekti 
cd React-projekti
npx create-react-app image-generator-app
cd image-generator-app
npm aloitus

Vaihtoehtoisesti voit käyttää komennon create-react-app sijaan Vite perustaa React-projektisi. Vite on rakennustyökalu, joka on suunniteltu verkkosovellusten nopeaan ja tehokkaaseen rakentamiseen.

Integroi OpenAI: n DALL-E API kuvien luomiseen

Kun olet ottanut React-sovelluksesi käyttöön, asenna OpenAI: n Node.js-kirjasto käytettäväksi React-sovelluksissasi.

npm install openai

Luo seuraavaksi uusi projektikansiosi juurihakemistoon .env tiedostoa API-avaimesi säilyttämiseen.

REACT_APP_OPENAI_API_KEY = "API-AVAIN"

Löydät tämän projektin koodin tästä GitHub-arkisto.

Luo Image Generator -komponentti

Vuonna /src hakemistoon, luo uusi kansio, anna sille nimi komponentit, ja luo sen sisään uusi tiedosto nimeltä ImageGenerator.js. Lisää alla oleva koodi tähän tiedostoon.

Aloita tuomalla tarvittavat moduulit:

tuonti'../App.css'; 
tuonti { useState } alkaen"reagoi"; 
tuonti { Määritykset, OpenAIApi } alkaen"openai";

Konfigurointimoduuli määrittää OpenAI: n API-asiakkaan käyttöä varten, kun taas OpenAIApi-moduuli tarjoaa menetelmiä vuorovaikutukseen OpenAI: n API: n kanssa. Nämä kaksi moduulia mahdollistavat DALL-E: n ominaisuuksien käytön ja käytön React-sovelluksesta.

Määritä seuraavaksi toiminnallinen komponentti ja lisää siihen seuraava koodi:

toimintoImageGenerator() {
konst [prompt, setPrompt] = useState("");
konst [tulos, setResult] = useState("");
konst [lataus, setLoading] = useState(väärä);
konst [placeholder, setPlaceholder] = useState(
"Etsi leijonaa siveltimellä, joka maalaa mona lisa -maalauksen..."
 );


konst kokoonpano = Uusi Asetukset({
 apiKey: process.env. REACT_APP_OPENAI_API_KEY,
 });

konst openai = Uusi OpenAIApi (kokoonpano);

konst generoImage = asynk () => {
 setPlaceholder(`Hae ${prompt}..`);
 setLoading(totta);


yrittää {
konst res = odottaa openai.createImage({
 kehote: kehote,
 n: 1,
 koko: "512x512",
 });
 setLoading(väärä);
 setResult (res.data.data[0].url);
 } ottaa kiinni (virhe) {
 setLoading(väärä);
konsoli.virhe(`Virhe luotaessa kuvaa: ${error.response.data.error.message}`);
 }
 };

Tämä koodi määrittelee React-toiminnallisen komponentin nimeltä ImageGenerator. Komponentti käyttää useita tilamuuttujia syöttökehotteen, tulosteen, lataustilan ja paikkamerkkitekstin hallintaan.

Komponentti luo myös a kokoonpano OpenAI API -asiakkaan objekti, joka sisältää ympäristömuuttujasta haetun API-avaimen.

Asynkroninen generoidaImage toiminto käynnistyy, kun käyttäjä napsauttaa painiketta, joka kulkee käyttäjän kehotteen mukana.

Sitten se kutsuu openai.createImage tapa luoda kuva annetun kehotteen perusteella. Tämä menetelmä palauttaa vastausobjektin, joka sisältää luodun kuvan URL-osoitteen.

Jos API-kutsu onnistuu, koodi päivittää tulos tilamuuttuja URL-osoitteen kanssa ja asettaa lataustilaksi väärä. Jos API-kutsu epäonnistuu, se asettaa silti lataustilaksi väärä, mutta myös kirjaa virheilmoituksen konsoliin.

Suorita lopuksi React JSX -elementit, jotka muodostavat Image generator -komponentin.

palata (
"kontti">
 { Ladataan? (
 <>
Luodaan kuvaa... Odota...</h3>
 </>
 ): (
 <>
Luo kuva Open AI API: lla</h2>




 luokannimi="sovellussyöttö"
 paikkamerkki={paikkamerkki}
 onChange={(e) => setPrompt (e.target.value)}
 riviä ="10"
 sarakkeet="100"
 />




 { tulos.pituus > 0? (
"tulos-kuva" src={tulos} alt="tulos" />
 ): (
 <>
 </>
 )}
 </>
 )}
 </div>
 )
}


viedäoletuksena ImageGenerator

Tämän komponentin koodi tekee ehdollisesti eri elementtejä arvon perusteella Ladataan tilamuuttuja.

Jos Ladataan on totta, se näyttää latausviestin. Päinvastoin, jos Ladataan on epätosi, se näyttää pääliittymän kuvan luomiseen OpenAI API: lla, joka koostuu tekstialueesta, joka kaappaa käyttäjän kehotteet ja lähetyspainikkeen.

The tulos tilamuuttuja sisältää luodun kuvan URL-osoitteen, joka hahmonnetaan myöhemmin selaimessa.

Päivitä App.js-komponentti

Lisää tämä koodi App.js-tiedostoosi:

tuonti'./App.css';
tuonti ImageGenerator alkaen'./component/ImageGenerator';
toimintoSovellus() {
palata (


"Sovellus">
"Sovelluksen otsikko">

 </header>
 </div>
 );
}


viedäoletuksena Sovellus;

Nyt voit käynnistää kehityspalvelimen päivittääksesi muutokset ja siirtyäksesi niihin http://localhost: 3000 selaimesi kanssa kuvien luomisen toiminnallisuuden testaamiseksi.

Jotta saat parhaat mahdolliset tulokset, kun käytät tekoälytyökalua kuvan luomiseen, varmista, että annat tekstialueelle yksityiskohtaisen kehotteen. Tämä tarkoittaa, että kuva kuvataan mahdollisimman perusteellisesti jättämättä yksityiskohtia pois.

Tätä prosessia kutsutaan Prompt Engineeringiksi, ja se sisältää yksityiskohtaisten kehotteiden tarjoamisen, jotta kielimalli voi tuottaa parhaat tulokset annettujen käyttäjän syötteiden perusteella.

Koska markkinoilla saatavilla olevien tekoälyohjelmistojen määrä on viime aikoina lisääntynyt, jatkaa uraa Prompt Engineeringissä voi olla tuottoisa tilaisuus.

Maksimoi kielimallien teho ohjelmistokehityksessä

Suurilla kielimalleilla toimivat tekoälytyökalut ovat valloittaneet ohjelmistokehityksen alan uskomattomien ominaisuuksiensa ja kykyjensä vuoksi.

Näillä työkaluilla on potentiaalia parantaa nykyistä ohjelmistoekosysteemiä antamalla kehittäjille mahdollisuuden integroida upeita tekoälyominaisuuksia jotka tehostavat eri tuotteiden käyttöä – tekoälyteknologian hyödyntäminen tarjoaa ainutlaatuisen mahdollisuuden rakentaa ohjelmistoja innovatiivisesti tavoilla.