Zbuduj prosty interfejs API DALL-E i już dziś zacznij eksperymentować z treściami generowanymi przez sztuczną inteligencję.

Sztuczna inteligencja jest stale ulepszana i może teraz tworzyć zadziwiające obrazy. Niedawny wirusowy przykład przedstawiał najbogatszych i najbardziej wpływowych ludzi na świecie w podartych ubraniach, żyjących w slumsach. Imponujący w obrazach jest wysoki poziom szczegółowości uchwyconych zarówno ludzi, jak i ich otoczenia.

Modele językowe, takie jak DALL-E i Midjourney, napędzają te możliwości generowania obrazów, przyjmując opisy tekstowe jako dane wejściowe i generując urzekające obrazy.

Dowiedz się, jak zintegrować interfejs OpenAI DALL-E API w celu generowania obrazów w aplikacji React.

Generowanie obrazu przy użyciu modelu językowego DALL-E firmy OpenAI

W jaki sposób model języka DALL-E faktycznie generuje obrazy? Nie zagłębiając się zbytnio w złożoność generowania obrazów AI, DALL-E najpierw interpretuje dostarczone mu opisy tekstowe jako dane wejściowe przy użyciu przetwarzania języka naturalnego (NLP). Następnie renderuje realistyczny obraz, który ściśle pasuje do podanego opisu.

instagram viewer

Monity wejściowe mogą zawierać tekstowe opisy osoby, obiektu lub sceny. Dodatkowo może również zawierać szczegóły, takie jak określony kolor, kształt i rozmiar. Niezależnie od złożoności lub prostoty tekstu wejściowego, DALL-E wygeneruje obraz, który ściśle pasuje do opisu wejściowego.

Należy zauważyć, że model języka, podobnie jak inne modele, został przeszkolony na dużym zbiorze danych z milionami danych obrazu, aby dowiedzieć się, jak identyfikować i generować fotorealistyczne obrazy na podstawie danych wejścia.

Pierwsze kroki z interfejsem API DALL-E OpenAI

Interfejs OpenAI DALL-E API jest dostępny do użytku jako publiczna wersja beta. Aby zintegrować interfejs API do użycia w aplikacji React, będziesz potrzebować klucza do interfejsu API OpenAI. Udaj się do OpenAIi zaloguj się na stronie przeglądu konta, aby pobrać klucz API.

Po zalogowaniu kliknij ikonę profilu użytkownika w prawej górnej części strony przeglądu. Następnie wybierz i kliknij Wyświetl klucze API.

Na stronie ustawień API Keys kliknij na Utwórz nowy tajny klucz przycisk, podaj nazwę klucza API i kliknij Utwórz tajny klucz wygenerować swój klucz API.

Utwórz projekt React

Uruchom poniższe polecenia na swoim terminalu, aby utworzyć lokalnie nowy projekt React. Uwaga: powinieneś mieć zainstalowany Node.js.

Zapoznaj się z tymi dwoma artykułami, aby dowiedzieć się, jak to zrobić zainstaluj Node.js w systemie Windows I jak zainstalować Node.js na Ubuntu.

mkdir React-projekt 
cd Projekt React
npx utwórz-reaguj-aplikację-generator-aplikacji
aplikacja do generowania obrazów cd
np start

Alternatywnie, zamiast używać polecenia create-react-app, możesz użyć Vite, aby skonfigurować projekt React. Vite to narzędzie do budowania przeznaczone do szybkiego i wydajnego budowania aplikacji internetowych.

Zintegruj interfejs API DALL-E OpenAI, aby generować obrazy

Po skonfigurowaniu i uruchomieniu aplikacji React zainstaluj bibliotekę OpenAI Node.js do użycia w aplikacjach React.

npm zainstaluj openai

Następnie w katalogu głównym folderu projektu utwórz nowy .env plik do przechowywania klucza API.

REACT_APP_OPENAI_API_KEY = "KLUCZ API"

Możesz znaleźć kod tego projektu w this Repozytorium GitHub.

Utwórz komponent generatora obrazów

w /src katalog, utwórz nowy folder, nazwij go składnikii utwórz w nim nowy plik o nazwie ImageGenerator.js. Dodaj poniższy kod do tego pliku.

Zacznij od zaimportowania wymaganych modułów:

import„../Aplikacja.css”; 
import { stan użycia } z"reagować"; 
import { Konfiguracja, OpenAIApi} z„otwierać”;

Moduł konfiguracji konfiguruje klienta API OpenAI do użycia, podczas gdy moduł OpenAIApi zapewnia metody interakcji z interfejsem API OpenAI. Te dwa moduły umożliwiają dostęp i korzystanie z funkcji DALL-E z poziomu aplikacji React.

Następnie zdefiniuj komponent funkcjonalny i dodaj do niego następujący kod:

funkcjonowaćImageGenerator() {
konst [prompt, setPrompt] = useState("");
konst [wynik, setResult] = useState("");
konst [ładowanie, ładowanie set] = useState(FAŁSZ);
konst [symbol zastępczy, setPlaceholder] = useState(
„Szukaj lwa pędzlami malującymi obraz Mona Lisy…”
 );


konst konfiguracja = nowy Konfiguracja({
 apiKey: proces.env. REACT_APP_OPENAI_API_KEY,
 });

konst otwórz = nowy OpenAIApi (konfiguracja);

konst generuj obraz = asynchroniczny () => {
 setPlaceholder(`Szukaj ${podpowiedź}..`);
 ładowanie zestawu(PRAWDA);


próbować {
konst res = czekać na openai.createImage({
 zachęta: zachęta,
 N: 1,
 rozmiar: „512x512”,
 });
 ładowanie zestawu(FAŁSZ);
 setResult (res.data.data[0].url);
 } złapać (błąd) {
 ładowanie zestawu(FAŁSZ);
konsola.błąd(`Błąd generowania obrazu: ${error.response.data.error.message}`);
 }
 };

Ten kod definiuje komponent funkcjonalny React o nazwie ImageGenerator. Komponent używa kilku zmiennych stanu do zarządzania monitami wejściowymi, wynikami wyjściowymi, stanem ładowania i tekstem zastępczym.

Komponent tworzy również plik konfiguracja obiekt dla klienta OpenAI API, który zawiera klucz API pobrany ze zmiennej środowiskowej.

asynchroniczne wygeneruj obraz funkcja zostanie uruchomiona, gdy użytkownik kliknie przycisk, przekazując monit użytkownika.

Następnie wywołuje tzw openai.createImage metoda generowania obrazu na podstawie podanego monitu. Ta metoda zwraca obiekt odpowiedzi, który zawiera wygenerowany adres URL obrazu.

Jeśli wywołanie interfejsu API powiedzie się, kod aktualizuje plik wynik state zmienną z adresem URL i ustawia stan ładowania na FAŁSZ. Jeśli wywołanie interfejsu API nie powiedzie się, nadal ustawia stan ładowania na FAŁSZ, ale również rejestruje komunikat o błędzie w konsoli.

Na koniec wyrenderuj elementy React JSX, które składają się na komponent Image generator.

powrót (
"pojemnik">
 { Ładowanie? (
 <>
Generowanie obrazu... Proszę czekać...</h3>
 </>
 ): (
 <>
Wygeneruj obraz za pomocą Open AI API</h2>




 nazwa klasy=„wprowadzanie aplikacji”
 symbol zastępczy={symbol zastępczy}
 onChange={(e) => setPrompt (e.target.value)}
 wiersze="10"
 cols="100"
 />




 { wynik.długość > 0? (
„obraz-wynik” src={wynik} alt="wynik" />
 ): (
 <>
 </>
 )}
 </>
 )}
 </div>
 )
}


eksportdomyślny ImageGenerator

Kod tego komponentu warunkowo renderuje różne elementy na podstawie wartości Ładowanie zmienna stanu.

Jeśli Ładowanie jest prawdą, wyświetla komunikat ładowania. I odwrotnie, jeśli Ładowanie jest fałszywe, pokazuje główny interfejs do generowania obrazu przy użyciu OpenAI API składający się z obszaru tekstowego, który przechwytuje monity użytkownika i przycisk wysyłania.

The wynik state zmienna przechowuje wygenerowany adres URL obrazu, który jest później renderowany w przeglądarce.

Zaktualizuj komponent App.js

Dodaj ten kod do pliku App.js:

import'./App.css';
import ImageGenerator z„./component/Generator obrazów”;
funkcjonowaćAplikacja() {
powrót (


„Aplikacja”>
„Nagłówek aplikacji”>

 </header>
 </div>
 );
}


eksportdomyślny Aplikacja;

Teraz możesz śmiało uruchomić serwer programistyczny, aby zaktualizować zmiany i przejść do niego http://localhost: 3000 z przeglądarką, aby przetestować funkcję generowania obrazu.

Aby uzyskać najlepsze możliwe wyniki podczas używania narzędzia AI do generowania obrazu, pamiętaj o umieszczeniu szczegółowego monitu w polu tekstowym. Oznacza to opisanie obrazu tak dokładnie, jak to możliwe, bez pomijania żadnych szczegółów.

Proces ten nosi nazwę Prompt Engineering i polega na dostarczaniu szczegółowych monitów, tak aby model językowy mógł generować najlepsze wyniki w oparciu o dane wprowadzone przez użytkownika.

Biorąc pod uwagę niedawny wzrost liczby oprogramowania AI dostępnego na rynku, kontynuując karierę w Prompt Engineering może być lukratywną okazją.

Maksymalizuj moc modeli językowych w tworzeniu oprogramowania

Narzędzia sztucznej inteligencji oparte na dużych modelach językowych podbiły dziedzinę tworzenia oprogramowania ze względu na ich niesamowite funkcje i możliwości.

Narzędzia te mogą ulepszyć obecny ekosystem oprogramowania, umożliwiając programistom integrację fajnych funkcji AI które usprawniają korzystanie z różnych produktów — wykorzystanie technologii sztucznej inteligencji stwarza wyjątkową okazję do tworzenia innowacyjnego oprogramowania sposoby.