Jak vytvořit generátor obrázků v React pomocí DALL-E API

Umělá inteligence se neustále zlepšuje a nyní dokáže vytvářet úžasné obrázky. Nedávný virální příklad vyobrazoval nejbohatší a nejvlivnější jedince světa v roztrhaných šatech, žijící v prostředí slumu. Co je na snímcích působivé, je vysoká úroveň detailů zachycených jak na lidech, tak v jejich okolí.

Jazykové modely jako DALL-E a Midjourney pohánějí tyto schopnosti generování obrázků, přičemž jako vstup využívají textové popisy a generují podmanivé obrázky.

Naučte se, jak integrovat DALL-E API OpenAI pro generování obrázků v aplikaci React.

Generování obrázků pomocí jazykového modelu DALL-E OpenAI

Jak vlastně jazykový model DALL-E generuje obrázky? Aniž by se příliš hloubalo do složitosti generování obrázků AI, DALL-E nejprve interpretuje textové popisy, které jsou do něj přiváděny, jako vstupy pomocí zpracování přirozeného jazyka (NLP). Poté vykreslí realistický obraz, který se přesně shoduje s daným popisem.

Vstupní výzvy mohou obsahovat textový popis osoby, objektu nebo scény. Kromě toho může také obsahovat podrobnosti, jako je konkrétní barva, tvar a velikost. Bez ohledu na složitost nebo jednoduchost vstupního textu, DALL-E vygeneruje obrázek, který co nejvíce odpovídá vstupnímu popisu.

Je důležité poznamenat, že jazykový model, stejně jako ostatní modely, byl trénován na velkém souboru dat s miliony obrazových dat, abyste se naučili, jak identifikovat a generovat fotorealistické obrázky z daného vstupy.

Začínáme s DALL-E API OpenAI

OpenAI DALL-E API je k dispozici pro použití jako veřejná beta. Chcete-li integrovat API pro použití ve vaší aplikaci React, budete potřebovat klíč pro API OpenAI. Zamiřte k OpenAIa přihlaste se na stránku s přehledem účtu, abyste získali klíč API.

Po přihlášení klikněte na ikonu uživatelského profilu v pravé horní části stránky přehledu. Dále vyberte a klikněte na Zobrazit klíče API.

Na stránce nastavení klíčů API klikněte na Vytvořit nový tajný klíč zadejte název klíče API a klikněte na Vytvořte tajný klíč pro vygenerování vašeho klíče API.

Vytvořte projekt React

Spusťte níže uvedené příkazy na svém terminálu a vytvořte lokálně nový projekt React. Všimněte si, že byste měli mít nainstalovaný Node.js.

V těchto dvou článcích se dozvíte, jak na to nainstalovat Node.js na Windows a jak nainstalovat Node.js na Ubuntu.

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

Případně místo použití příkazu create-react-app můžete použít Vite a nastavte svůj projekt React. Vite je sestavovací nástroj určený pro rychlé a efektivní vytváření webových aplikací.

Integrujte OpenAI DALL-E API pro generování obrázků

Jakmile budete mít svou aplikaci React spuštěnou a spuštěnou, nainstalujte knihovnu Node.js OpenAI pro použití ve vašich aplikacích React.

npm nainstalovat openai

Dále v kořenovém adresáři složky projektu vytvořte nový .env soubor, do kterého bude uložen váš klíč API.

REACT_APP_OPENAI_API_KEY = "API KEY"

Zde najdete kód tohoto projektu úložiště GitHub.

Vytvořte komponentu Image Generator

V /src adresář, vytvořte novou složku, pojmenujte ji komponentya vytvořte v něm nový soubor s názvem ImageGenerator.js. Do tohoto souboru přidejte níže uvedený kód.

Začněte importem požadovaných modulů:

import'../App.css'; 
import { useState } z"reagovat"; 
import { Konfigurace, OpenAIApi } z"openai";

Modul Configuration konfiguruje klienta API OpenAI pro použití, zatímco modul OpenAIApi poskytuje metody pro interakci s API OpenAI. Tyto dva moduly umožňují přistupovat a používat funkce DALL-E z aplikace React.

Dále definujte funkční komponentu a přidejte k ní následující kód:

funkceImageGenerator() {
konst [prompt, setPrompt] = useState("");
konst [result, setResult] = useState("");
konst [načítání, setLoading] = useState(Nepravdivé);
konst [placeholder, setPlaceholder] = useState(
"Hledejte lva pomocí štětců malujících obraz mona lisa..."
 );
konst konfigurace = Nový Konfigurace({
 apiKey: process.env. REACT_APP_OPENAI_API_KEY,
 });

konst openai = Nový OpenAIApi (konfigurace);

konst generovatObrázek = asynchronní () => {
 setPlaceholder(„Hledej ${prompt}..`);
 setLoading(skutečný);
Snaž se {
konst res = čekat openai.createImage({
 prompt: prompt,
 n: 1,
 velikost: "512 x 512",
 });
 setLoading(Nepravdivé);
 setResult (res.data.data[0].url);
 } chytit (chyba) {
 setLoading(Nepravdivé);
řídicí panel.chyba(`Chyba při generování obrázku: ${error.response.data.error.message}`);
 }
 };

Tento kód definuje volanou funkční komponentu React ImageGenerator. Komponenta používá několik stavových proměnných ke správě vstupní výzvy, výstupního výsledku, stavu načítání a zástupného textu.

Komponenta také vytváří a konfigurace objekt pro klienta OpenAI API, který obsahuje klíč API načtený z proměnné prostředí.

Asynchronní generovat obrázek funkce se spustí, když uživatel klepne na tlačítko a předá výzvu uživatele.

Poté zavolá openai.createImage způsob generování obrázku na základě dané výzvy. Tato metoda vrací objekt odpovědi, který obsahuje vygenerovanou adresu URL obrázku.

Pokud je volání API úspěšné, kód aktualizuje výsledek stavová proměnná s adresou URL a nastaví stav načítání na Nepravdivé. Pokud volání API selže, stále nastaví stav načítání na Nepravdivé, ale také zaznamená do konzole chybovou zprávu.

Nakonec vyrenderujte prvky React JSX, které tvoří komponentu generátoru obrázků.

vrátit se (
"kontejner">
 { načítání? (
 <>
Generování obrázku... Čekejte prosím...</h3>
 </>
 ): (
 <>
Vygenerujte obrázek pomocí Open AI API</h2>


 className="aplikační vstup"
 zástupný symbol={placeholder}
 onChange={(e) => setPrompt (e.target.value)}
 řádky="10"
 cols="100"
 />
Vygenerovat obrázek</button>
 { result.length > 0? (
"výsledkový obrázek" src={result} alt="výsledek" />
 ): (
 <>
 </>
 )}
 </>
 )}
 </div>
 )
}
vývoznívýchozí ImageGenerator

Kód této komponenty podmíněně vykresluje různé prvky na základě hodnoty načítání stavová proměnná.

Li načítání je pravda, zobrazí se zpráva o načítání. Naopak, If načítání je false, ukazuje hlavní rozhraní pro generování obrázku pomocí OpenAI API sestávající z textové oblasti, která zachycuje uživatelské výzvy a tlačítka pro odeslání.

The výsledek stavová proměnná obsahuje vygenerovanou adresu URL obrázku, která se později vykreslí v prohlížeči.

Aktualizujte komponentu App.js

Přidejte tento kód do souboru App.js:

import'./App.css';
import ImageGenerator z'./component/ImageGenerator';
funkceAplikace() {
vrátit se (

"Aplikace">
"Záhlaví aplikace">

 </header>
 </div>
 );
}
vývoznívýchozí Aplikace;

Nyní můžete pokračovat a roztočit vývojový server, abyste aktualizovali změny a přešli na něj http://localhost: 3000 s vaším prohlížečem a otestujte funkci generování obrázků.

Chcete-li dosáhnout nejlepších možných výsledků při použití nástroje AI ke generování obrázku, nezapomeňte v textové oblasti poskytnout podrobnou výzvu. To znamená popsat obrázek co nejdůkladněji a nevynechat žádné detaily.

Tento proces se nazývá Prompt Engineering a zahrnuje poskytování podrobných výzev, aby jazykový model mohl produkovat nejlepší výsledky na základě poskytnutých uživatelských vstupů.

Vzhledem k nedávnému nárůstu softwaru AI dostupného na trhu, pokračovat v kariéře v rychlém inženýrství může být lukrativní příležitost.

Maximalizujte sílu jazykových modelů při vývoji softwaru

Nástroje umělé inteligence poháněné velkými jazykovými modely vzaly pole vývoje softwaru útokem kvůli svým neuvěřitelným funkcím a schopnostem.

Tyto nástroje mají potenciál zlepšit současný softwarový ekosystém tím, že umožňují vývojářům integrovat skvělé funkce umělé inteligence které zlepšují používání různých produktů – využití technologie AI představuje jedinečnou příležitost vytvářet inovativní software způsoby.