Creați un front-end simplu pentru API-ul DALL-E și începeți să experimentați astăzi conținutul generat de AI.

Inteligența artificială se îmbunătățește continuu și acum poate crea imagini uimitoare. Un exemplu viral recent i-a descris pe cei mai bogați și influenți oameni din lume îmbrăcați în haine rupte, care trăiesc într-un mediu de mahala. Ceea ce este impresionant la imagini este nivelul ridicat de detaliu surprins atât în ​​oameni, cât și în împrejurimile lor.

Modelele de limbaj precum DALL-E și Midjourney alimentează aceste capacități de generare de imagini, luând descrieri textuale ca intrare și generând imagini captivante.

Aflați cum să integrați API-ul DALL-E al OpenAI pentru a genera imagini într-o aplicație React.

Generarea de imagini folosind modelul de limbaj DALL-E OpenAI

Cum generează de fapt imaginile modelul de limbaj DALL-E? Fără să pătrundă prea adânc în complexitatea generării imaginilor AI, DALL-E interpretează mai întâi descrierile textuale furnizate ca intrări folosind procesarea limbajului natural (NLP). Apoi redă o imagine realistă care se potrivește îndeaproape cu descrierea dată.

instagram viewer

Solicitările de introducere pot include descrieri textuale ale unei persoane, obiect sau scenă. În plus, poate include și detalii precum o anumită culoare, formă și dimensiune. Indiferent de complexitatea sau simplitatea textului introdus, DALL-E va genera o imagine care se potrivește îndeaproape cu descrierea introdusă.

Este important de menționat că modelul de limbaj, la fel ca și alte modele, a fost antrenat pe un set de date mare cu milioane de date de imagine pentru a învăța cum să identifici și să generezi imagini fotorealiste din date intrări.

Noțiuni introductive cu API-ul DALL-E al OpenAI

API-ul DALL-E al OpenAI este disponibil pentru utilizare ca beta publică. Pentru a integra API-ul pentru utilizare în aplicația dvs. React, veți avea nevoie de o cheie pentru API-ul OpenAI. Du-te la OpenAIși conectați-vă la pagina de prezentare generală a contului pentru a obține cheia API.

După ce v-ați conectat, faceți clic pe pictograma profilului de utilizator din secțiunea din dreapta sus a paginii de prezentare generală. Apoi, selectați și faceți clic pe Vedeți cheile API.

Pe pagina de setări API Keys, faceți clic pe Creați o cheie secretă nouă butonul, furnizați un nume pentru cheia dvs. API și faceți clic pe Creați cheia secretă pentru a genera cheia API.

Creați un proiect React

Rulați comenzile de mai jos pe terminalul dvs. pentru a crea un nou proiect React la nivel local. Rețineți, ar trebui să aveți instalat Node.js.

Consultați aceste două articole pentru a afla cum instalați Node.js pe Windows și cum se instalează Node.js pe Ubuntu.

mkdir React-proiect 
cd React-proiect
npx create-react-app generator-aplicație de imagine
aplicație-generator de imagini cd
npm start

Alternativ, în loc să utilizați comanda create-react-app, puteți utiliza Vite pentru a-ți configura proiectul React. Vite este un instrument de compilare conceput pentru a construi aplicații web rapid și eficient.

Integrați API-ul DALL-E al OpenAI pentru a genera imagini

După ce aveți aplicația React în funcțiune, instalați biblioteca Node.js a OpenAI pentru utilizare în aplicațiile React.

npm instalează openai

Apoi, în directorul rădăcină al folderului de proiect, creați un nou .env fișier pentru a păstra cheia API.

REACT_APP_OPENAI_API_KEY = „CHEIA API”

Puteți găsi codul acestui proiect în aceasta Depozitul GitHub.

Creați o componentă de generator de imagini

În /src director, creați un folder nou, denumiți-l componente, și creați un fișier nou în interiorul acestuia numit ImageGenerator.js. Adăugați codul de mai jos la acest fișier.

Începeți prin a importa modulele necesare:

import„../App.css”; 
import { useState } din"reacţiona"; 
import { Configurare, OpenAIApi } din"openai";

Modulul de configurare configurează clientul API al OpenAI pentru utilizare, în timp ce modulul OpenAIApi oferă metode de interacțiune cu API-ul OpenAI. Aceste două module fac posibilă accesarea și utilizarea caracteristicilor DALL-E din aplicația React.

Apoi, definiți o componentă funcțională și adăugați următorul cod la ea:

funcţieImageGenerator() {
const [prompt, setPrompt] = useState("");
const [rezultat, setResult] = useState("");
const [încărcare, setLoading] = useState(fals);
const [substituent, setPlaceholder] = useState(
„Căutați un leu cu pensule pictând pictura Mona Lisa...”
 );


const configurație = nou Configurație({
 apiKey: process.env. REACT_APP_OPENAI_API_KEY,
 });

const openai = nou OpenAIApi (configurare);

const generateImage = asincron () => {
 setplaceholder(`Caută ${prompt}..`);
 setLoading(Adevărat);


încerca {
const res = așteaptă openai.createImage({
 prompt: prompt,
 n: 1,
 mărimea: „512x512”,
 });
 setLoading(fals);
 setResult (res.data.data[0].url);
 } captură (eroare) {
 setLoading(fals);
consolă.eroare(`Eroare la generarea imaginii: ${error.response.data.error.message}`);
 }
 };

Acest cod definește o componentă funcțională React numită ImageGenerator. Componenta folosește mai multe variabile de stare pentru a gestiona promptul de intrare, rezultatul de ieșire, starea încărcării și textul substituent.

Componenta creează, de asemenea, a configurație obiect pentru clientul API OpenAI, care include cheia API preluată din variabila de mediu.

Cel asincron generateImage funcția va rula atunci când utilizatorul face clic pe un buton, trecând de-a lungul promptului utilizatorului.

Apoi, se numește openai.createImage metoda de a genera o imagine pe baza promptului dat. Această metodă returnează un obiect de răspuns care include adresa URL a imaginii generate.

Dacă apelul API reușește, codul actualizează rezultat variabilă de stat cu adresa URL și setează starea de încărcare la fals. Dacă apelul API eșuează, se setează în continuare starea de încărcare la fals, dar înregistrează și un mesaj de eroare pe consolă.

În cele din urmă, redați elementele React JSX care alcătuiesc componenta Generator de imagini.

întoarcere (
"container">
 { Se încarcă? (
 <>
Se generează imaginea... Vă rugăm să așteptați...</h3>
 </>
 ): (
 <>
Generați o imagine folosind Open AI API</h2>




 className="intrare aplicație"
 substituent={placeholder}
 onChange={(e) => setPrompt (e.target.value)}
 rânduri="10"
 cols="100"
 />




 { rezultat.lungime > 0? (
"imagine-rezultat" src={rezultat} alt="rezultat" />
 ): (
 <>
 </>
 )}
 </>
 )}
 </div>
 )
}


exportMod implicit ImageGenerator

Codul acestei componente redă condiționat diferite elemente în funcție de valoarea lui Se încarcă variabilă de stare.

Dacă Se încarcă este adevărat, arată un mesaj de încărcare. În schimb, dacă Se încarcă este fals, arată interfața principală pentru generarea unei imagini folosind API-ul OpenAI constând dintr-o zonă de text care captează solicitările utilizatorului și un buton de trimitere.

The rezultat variabila de stat deține adresa URL a imaginii generate, care este redată ulterior în browser.

Actualizați componenta App.js

Adăugați acest cod în fișierul dvs. App.js:

import„./App.css”;
import ImageGenerator din„./component/ImageGenerator”;
funcţieApp() {
întoarcere (


„Aplicație”>
„Aplicație antet”>

 </header>
 </div>
 );
}


exportMod implicit Aplicație;

Acum puteți continua și porniți serverul de dezvoltare pentru a actualiza modificările și a naviga la http://localhost: 3000 cu browserul dvs. pentru a testa funcționalitatea de generare a imaginilor.

Pentru a obține cele mai bune rezultate posibile atunci când utilizați un instrument AI pentru a genera o imagine, asigurați-vă că furnizați o solicitare detaliată în zona de text. Aceasta înseamnă să descrii imaginea cât mai detaliat posibil, fără a lăsa niciun detaliu afară.

Acest proces se numește Prompt Engineering și implică furnizarea de prompturi detaliate, astfel încât modelul de limbă să poată produce cele mai bune rezultate pe baza intrărilor furnizate de utilizator.

Având în vedere creșterea recentă a software-ului AI disponibil pe piață, urmând o carieră în Prompt Engineering poate fi o oportunitate profitabilă.

Maximizați puterea modelelor de limbaj în dezvoltarea software-ului

Instrumentele AI alimentate de modele de limbaj mari au luat cu asalt domeniul dezvoltării software datorită caracteristicilor și capabilităților lor incredibile.

Aceste instrumente au potențialul de a îmbunătăți ecosistemul software actual, permițând dezvoltatorilor să integreze funcții interesante de AI care îmbunătățesc utilizarea diferitelor produse—utilizarea tehnologiei AI reprezintă o oportunitate unică de a construi software inovator moduri.