Vytvorte si jednoduchý front-end pre DALL-E API a začnite experimentovať s obsahom generovaným AI už dnes.

Umelá inteligencia sa neustále zlepšuje a teraz dokáže vytvárať úžasné obrázky. Nedávny virálny príklad zobrazoval najbohatších a najvplyvnejších jednotlivcov sveta v roztrhaných šatách, ktorí žijú v prostredí slumu. Na obrázkoch je pôsobivá vysoká úroveň detailov zachytených na ľuďoch a ich okolí.

Jazykové modely ako DALL-E a Midjourney poháňajú tieto možnosti vytvárania obrázkov, pričom ako vstup využívajú textové popisy a vytvárajú podmanivé obrázky.

Zistite, ako integrovať OpenAI DALL-E API na generovanie obrázkov v aplikácii React.

Generovanie obrázkov pomocou jazykového modelu DALL-E OpenAI

Ako vlastne model jazyka DALL-E generuje obrázky? Bez toho, aby sme sa príliš hlboko zaoberali zložitosťou generovania obrázkov AI, DALL-E najprv interpretuje textové popisy, ktoré sú doň privedené, ako vstupy pomocou spracovania prirodzeného jazyka (NLP). Potom vykreslí realistický obraz, ktorý sa presne zhoduje s daným popisom.

instagram viewer

Vstupné výzvy môžu obsahovať textový popis osoby, objektu alebo scény. Okrem toho môže obsahovať aj detaily, ako je konkrétna farba, tvar a veľkosť. Bez ohľadu na zložitosť alebo jednoduchosť vstupného textu, DALL-E vygeneruje obrázok, ktorý sa čo najviac zhoduje so vstupným popisom.

Je dôležité poznamenať, že jazykový model, rovnako ako ostatné modely, bol trénovaný na veľkom súbore údajov s miliónmi obrazových údajov, aby ste sa naučili identifikovať a generovať fotorealistické obrázky z daného vstupy.

Začíname s OpenAI DALL-E API

OpenAI's DALL-E API je k dispozícii na použitie ako verejná beta verzia. Ak chcete integrovať API na použitie vo vašej aplikácii React, budete potrebovať kľúč pre API OpenAI. Zamierte k OpenAIa prihláste sa na stránku prehľadu účtu, aby ste získali kľúč API.

Po prihlásení kliknite na ikonu používateľského profilu v pravej hornej časti stránky súhrnu. Ďalej vyberte a kliknite na Zobraziť kľúče API.

Na stránke nastavení kľúčov API kliknite na Vytvorte nový tajný kľúč zadajte názov pre váš kľúč API a kliknite na Vytvorte tajný kľúč na vygenerovanie vášho API kľúča.

Vytvorte projekt React

Spustite nižšie uvedené príkazy na svojom termináli a vytvorte nový projekt React lokálne. Všimnite si, že by ste mali mať nainštalovaný Node.js.

V týchto dvoch článkoch sa dozviete, ako na to nainštalujte Node.js v systéme Windows a ako nainštalovať Node.js na Ubuntu.

mkdir React-project 
cd React-projekt
npx create-react-app image-generator-app
cd image-generator-app
npm štart

Prípadne namiesto použitia príkazu create-react-app môžete použiť Vite a nastavte svoj projekt React. Vite je zostavovací nástroj určený na rýchle a efektívne vytváranie webových aplikácií.

Integrujte OpenAI DALL-E API na generovanie obrázkov

Keď budete mať svoju aplikáciu React spustenú, nainštalujte si knižnicu Node.js OpenAI na použitie vo vašich aplikáciách React.

npm nainštalovať openai

Potom v koreňovom adresári priečinka projektu vytvorte nový .env súbor, ktorý bude obsahovať váš kľúč API.

REACT_APP_OPENAI_API_KEY = "API KEY"

Kód tohto projektu nájdete v tomto úložisko GitHub.

Vytvorte komponent Image Generator

V /src adresár, vytvorte nový priečinok, pomenujte ho komponentova vytvorte v ňom nový súbor s názvom ImageGenerator.js. Do tohto súboru pridajte kód uvedený nižšie.

Začnite importovaním požadovaných modulov:

importovať'../App.css'; 
importovať { useState } od"reagovať"; 
importovať { Konfigurácia, OpenAIApi } od"openai";

Konfiguračný modul konfiguruje klienta API OpenAI na použitie, zatiaľ čo modul OpenAIApi poskytuje metódy interakcie s API OpenAI. Tieto dva moduly umožňujú prístup a používanie funkcií DALL-E z aplikácie React.

Ďalej definujte funkčný komponent a pridajte k nemu nasledujúci kód:

funkciuImageGenerator() {
konšt [prompt, setPrompt] = useState("");
konšt [result, setResult] = useState("");
konšt [loading, setLoading] = useState(falošný);
konšt [placeholder, setPlaceholder] = useState(
"Hľadajte leva pomocou štetcov, ktorí maľujú obraz mona lisa..."
 );


konšt konfigurácia = Nový Konfigurácia ({
 apiKey: process.env. REACT_APP_OPENAI_API_KEY,
 });

konšt openai = Nový OpenAIApi (konfigurácia);

konšt vygenerovaťObrázok = async () => {
 setPlaceholder(„Hľadaj ${prompt}..`);
 setLoading(pravda);


skúste {
konšt res = čakať openai.createImage({
 prompt: prompt,
 n: 1,
 veľkosť: "512 x 512",
 });
 setLoading(falošný);
 setResult (res.data.data[0].url);
 } chytiť (chyba) {
 setLoading(falošný);
konzoly.chyba(`Chyba pri generovaní obrázka: ${error.response.data.error.message}`);
 }
 };

Tento kód definuje funkčný komponent React tzv ImageGenerator. Komponent používa niekoľko stavových premenných na správu vstupnej výzvy, výsledku výstupu, stavu načítania a zástupného textu.

Komponent vytvára aj a konfigurácia objekt pre klienta OpenAI API, ktorý obsahuje kľúč API získaný z premennej prostredia.

Asynchrónne generovaťObrázok funkcia sa spustí, keď používateľ klikne na tlačidlo, pričom prejde cez výzvu používateľa.

Potom zavolá openai.createImage metóda na vygenerovanie obrázka na základe danej výzvy. Táto metóda vráti objekt odpovede, ktorý obsahuje vygenerovanú adresu URL obrázka.

Ak je volanie API úspešné, kód aktualizuje výsledok stavová premenná s adresou URL a nastaví stav načítania na falošný. Ak volanie API zlyhá, nastaví stav načítania na falošný, ale tiež prihlási chybové hlásenie do konzoly.

Nakoniec vyrenderujte prvky React JSX, ktoré tvoria komponent generátora obrázkov.

vrátiť (
"kontajner">
 { načítava? (
 <>
Generuje sa obrázok... Čakajte prosím...</h3>
 </>
 ): (
 <>
Vygenerujte obrázok pomocou Open AI API</h2>




 className="aplikačný vstup"
 zástupný symbol={placeholder}
 onChange={(e) => setPrompt (e.target.value)}
 riadky="10"
 stĺpec ="100"
 />




 { result.length > 0? (
"výsledkový obrázok" src={result} alt="výsledok" />
 ): (
 <>
 </>
 )}
 </>
 )}
 </div>
 )
}


exportpredvolená ImageGenerator

Kód tohto komponentu podmienečne vykresľuje rôzne prvky na základe hodnoty načítava stavová premenná.

Ak načítava je pravda, zobrazuje sa správa o načítaní. Naopak, Ak načítava je nepravda, zobrazuje hlavné rozhranie na generovanie obrázka pomocou API OpenAI pozostávajúceho z textovej oblasti, ktorá zachytáva výzvy používateľa a tlačidla na odoslanie.

The výsledok stavová premenná obsahuje vygenerovanú adresu URL obrázka, ktorá sa neskôr vykreslí v prehliadači.

Aktualizujte komponent App.js

Pridajte tento kód do súboru App.js:

importovať'./App.css';
importovať ImageGenerator od'./component/ImageGenerator';
funkciuApp() {
vrátiť (


"aplikácia">
"Hlavička aplikácie">

 </header>
 </div>
 );
}


exportpredvolená App;

Teraz môžete pokračovať a spustiť vývojový server, aby ste aktualizovali zmeny a prešli naň http://localhost: 3000 pomocou prehliadača otestujte funkčnosť generovania obrázkov.

Ak chcete dosiahnuť najlepšie možné výsledky pri použití nástroja AI na generovanie obrázka, nezabudnite v textovej oblasti poskytnúť podrobnú výzvu. To znamená opísať obrázok čo najdôkladnejšie a nevynechať žiadne detaily.

Tento proces sa nazýva inžinierstvo výziev a zahŕňa poskytovanie podrobných výziev, aby jazykový model mohol produkovať najlepšie výsledky na základe poskytnutých vstupov používateľa.

Vzhľadom na nedávny nárast softvéru AI dostupného na trhu, pokračovať v kariére v rýchlom inžinierstve môže byť lukratívna príležitosť.

Maximalizujte silu jazykových modelov pri vývoji softvéru

Nástroje AI poháňané veľkými jazykovými modelmi vzali oblasť vývoja softvéru útokom vďaka svojim neuveriteľným vlastnostiam a schopnostiam.

Tieto nástroje majú potenciál zlepšiť súčasný softvérový ekosystém tým, že umožňujú vývojárom integrovať skvelé funkcie AI ktoré zlepšujú používanie rôznych produktov – využitie technológie AI predstavuje jedinečnú príležitosť vytvoriť inovatívny softvér spôsoby.