Építsen egy egyszerű kezelőfelületet a DALL-E API-hoz, és kezdjen el kísérletezni a mesterséges intelligencia által generált tartalommal még ma.

A mesterséges intelligencia folyamatosan fejlődik, és immár elképesztő képeket tud készíteni. Egy közelmúltbeli víruspélda a világ leggazdagabb és legbefolyásosabb egyedeit ábrázolta szakadt ruhákban, nyomornegyedben élve. Ami lenyűgöző a képeken, az az emberekben és a környezetükben megörökített nagy részletgazdagság.

Az olyan nyelvi modellek, mint a DALL-E és a Midjourney, erősítik ezeket a képgeneráló képességeket, szöveges leírásokat vesznek bemenetként, és lenyűgöző képeket generálnak.

Ismerje meg, hogyan integrálhatja az OpenAI DALL-E API-ját képek létrehozásához egy React alkalmazásban.

Képgenerálás az OpenAI DALL-E nyelvi modelljével

Hogyan generál valójában képeket a DALL-E nyelvi modell? Anélkül, hogy túlságosan elmélyülne az AI képgenerálás bonyolultságában, a DALL-E először a természetes nyelvi feldolgozás (NLP) segítségével bemenetként értelmezi a hozzá betáplált szöveges leírásokat. Ezután valósághű képet készít, amely szorosan illeszkedik a megadott leíráshoz.

instagram viewer

A beviteli promptok tartalmazhatnak egy személy, tárgy vagy jelenet szöveges leírását. Ezenkívül olyan részleteket is tartalmazhat, mint egy adott szín, forma és méret. A bemeneti szöveg bonyolultságától vagy egyszerűségétől függetlenül a DALL-E olyan képet generál, amely szorosan illeszkedik a beviteli leíráshoz.

Fontos megjegyezni, hogy a nyelvi modellt, csakúgy, mint a többi modellt, nagy adathalmazra képezték ki több millió képadattal, hogy megtanulja, hogyan lehet fotorealisztikus képeket azonosítani és előállítani az adott adatokból bemenetek.

Kezdő lépések az OpenAI DALL-E API-jával

Az OpenAI DALL-E API-ja nyilvános bétaként használható. Az API-nak a React alkalmazásban való használatához való integrálásához szükség lesz egy kulcsra az OpenAI API-jához. Irány a OpenAIés jelentkezzen be fiókja áttekintő oldalára az API-kulcs megszerzéséhez.

Miután bejelentkezett, kattintson a felhasználói profil ikonra az áttekintő oldal jobb felső részén. Ezután válassza ki és kattintson a gombra API-kulcsok megtekintése.

Az API kulcsok beállításai oldalon kattintson a gombra Új titkos kulcs létrehozása gombra, adjon nevet az API-kulcsának, majd kattintson a gombra Titkos kulcs létrehozása az API-kulcs létrehozásához.

Hozzon létre egy React projektet

Futtassa az alábbi parancsokat a terminálon egy új React projekt helyi létrehozásához. Megjegyzés: telepíteni kell a Node.js fájlt.

Tekintse meg ezt a két cikket, hogy megtudja, hogyan kell telepítse a Node.js-t Windows rendszeren és hogyan kell telepíteni a Node.js-t Ubuntu-ra.

mkdir React-projekt 
cd React-projekt
npx Create-react-app image-generator-app
cd image-generator-app
npm start

Alternatív megoldásként a create-react-app parancs használata helyett használhatja Vite a React projekt beállításához. A Vite egy webalkalmazások gyors és hatékony építésére tervezett eszköz.

Integrálja az OpenAI DALL-E API-ját a képek generálásához

Miután a React alkalmazást elindította és futtatta, telepítse az OpenAI Node.js könyvtárát a React alkalmazásaiban való használatra.

npm install openai

Ezután a projektmappa gyökérkönyvtárában hozzon létre egy újat .env fájlt az API-kulcs tárolására.

REACT_APP_OPENAI_API_KEY = "API KULCS"

A projekt kódját itt találja meg GitHub adattár.

Hozzon létre egy képgenerátor összetevőt

Ban,-ben /src könyvtárat, hozzon létre egy új mappát, nevezze el alkatrészek, és hozzon létre benne egy új nevű fájlt ImageGenerator.js. Adja hozzá az alábbi kódot ehhez a fájlhoz.

Kezdje a szükséges modulok importálásával:

import"../App.css"; 
import { useState } tól től"reagál"; 
import { Konfiguráció, OpenAIApi } tól től"Openai";

A konfigurációs modul az OpenAI API-kliensét konfigurálja a használatra, míg az OpenAIApi modul módszereket biztosít az OpenAI API-jával való interakcióhoz. Ez a két modul lehetővé teszi a DALL-E szolgáltatásainak elérését és használatát a React alkalmazásból.

Ezután definiáljon egy funkcionális összetevőt, és adja hozzá a következő kódot:

funkcióImageGenerator() {
const [prompt, setPrompt] = useState("");
const [eredmény, setResult] = useState("");
const [betöltés, setLoading] = useState(hamis);
const [placeholder, setPlaceholder] = useState(
"Keress oroszlánt ecsettel, amely a mona lisa festményt festi..."
 );


const konfiguráció = új Konfiguráció({
 apiKey: process.env. REACT_APP_OPENAI_API_KEY,
 });

const openai = új OpenAIApi (konfiguráció);

const generImage = async () => {
 setPlaceholder(`Keresés ${prompt}..`);
 setLoading(igaz);


próbáld ki {
const res = várja openai.createImage({
 felszólítás: felszólítás,
 n: 1,
 méret: "512x512",
 });
 setLoading(hamis);
 setResult (res.data.data[0].url);
 } fogás (hiba) {
 setLoading(hamis);
konzol.hiba(`Hiba a kép generálásakor: ${error.response.data.error.message}`);
 }
 };

Ez a kód egy React funkcionális komponenst határoz meg ImageGenerator. Az összetevő számos állapotváltozót használ a beviteli prompt, a kimeneti eredmény, a betöltési állapot és a helyőrző szöveg kezelésére.

A komponens létrehozza a konfigurációt objektum az OpenAI API-ügyfél számára, amely tartalmazza a környezeti változóból lekért API-kulcsot.

Az aszinkron generImage A funkció akkor fut le, amikor a felhasználó rákattint egy gombra, továbbítva a felhasználói parancssort.

Ezután hívja a openai.createImage módszer a kép létrehozására az adott prompt alapján. Ez a módszer egy válaszobjektumot ad vissza, amely tartalmazza a generált kép URL-címét.

Ha az API-hívás sikeres, a kód frissíti a eredmény állapotváltozót az URL-lel, és a betöltési állapotot erre állítja be hamis. Ha az API-hívás meghiúsul, akkor is a betöltési állapotot állítja be hamis, hanem hibaüzenetet is naplóz a konzolra.

Végül jelenítse meg az Image generator összetevőt alkotó React JSX elemeket.

Visszatérés (
"tartály">
 { Betöltés? (
 <>
Kép generálása... Kérem, várjon...</h3>
 </>
 ): (
 <>
Kép létrehozása Open AI API-val</h2>




 osztálynév="app-input"
 helyőrző={helyőrző}
 onChange={(e) => setPrompt (e.target.value)}
 sorok="10"
 cols="100"
 />




 { eredmény.hossz > 0? (
"eredmény-kép" src={eredmény} alt="eredmény" />
 ): (
 <>
 </>
 )}
 </>
 )}
 </div>
 )
}


exportalapértelmezett ImageGenerator

Ennek az összetevőnek a kódja feltételesen rendereli a különböző elemeket az értéke alapján Betöltés állapotváltozó.

Ha Betöltés igaz, betöltési üzenetet mutat. Ezzel szemben, ha Betöltés hamis, ez a fő felületet mutatja a kép létrehozásához az OpenAI API használatával, amely a felhasználói promptokat rögzítő szövegterületből és egy küldés gombból áll.

A eredmény állapotváltozó tartalmazza a generált kép URL-jét, amely később megjelenik a böngészőben.

Frissítse az App.js komponenst

Adja hozzá ezt a kódot App.js fájljához:

import'./App.css';
import ImageGenerator tól től'./component/ImageGenerator';
funkcióApp() {
Visszatérés (


"Alkalmazás">
"Alkalmazás fejléc">

 </header>
 </div>
 );
}


exportalapértelmezett App;

Most már továbbléphet, és felpörgetheti a fejlesztői kiszolgálót, hogy frissítse a változtatásokat, és navigáljon hozzá http://localhost: 3000 böngészőjével, hogy tesztelje a képgenerálási funkciót.

A lehető legjobb eredmény elérése érdekében, amikor mesterséges intelligencia eszközt használ a kép generálásához, ügyeljen arra, hogy a szöveges területen részletes felszólítást adjon meg. Ez azt jelenti, hogy a lehető legpontosabban le kell írni a képet, nem hagyva ki semmilyen részletet.

Ezt a folyamatot Prompt Engineering-nek nevezik, és részletes utasításokat tartalmaz, hogy a nyelvi modell a legjobb eredményeket tudja produkálni a megadott felhasználói bemenetek alapján.

Tekintettel a piacon elérhető mesterségesintelligencia-szoftverek közelmúltbeli felfutására, a Prompt Engineering területén folytatja karrierjét jövedelmező lehetőség lehet.

Maximalizálja a nyelvi modellek erejét a szoftverfejlesztésben

A nagy nyelvi modelleken alapuló mesterséges intelligencia-eszközök hihetetlen tulajdonságaik és képességeik miatt viharosan bevették a szoftverfejlesztés területét.

Ezek az eszközök képesek javítani a jelenlegi szoftver-ökoszisztémát azáltal, hogy lehetővé teszik a fejlesztők számára a menő mesterséges intelligencia funkciók integrálását. amelyek fokozzák a különböző termékek használatát – az AI technológia felhasználása egyedülálló lehetőséget kínál az innovatív szoftverek létrehozására módokon.