Изградете прост интерфейс към DALL-E API и започнете да експериментирате с генерирано от AI съдържание днес.

Изкуственият интелект непрекъснато се подобрява и вече може да създава удивителни изображения. Скорошен вирусен пример изобразява най-богатите и влиятелни хора в света в скъсани дрехи, живеещи в беден квартал. Впечатляващото в изображенията е високото ниво на детайлност, уловена както на хората, така и на обкръжението им.

Езикови модели като DALL-E и Midjourney захранват тези възможности за генериране на изображения, като приемат текстови описания като вход и генерират завладяващи изображения.

Научете как да интегрирате DALL-E API на OpenAI, за да генерирате изображения в React приложение.

Генериране на изображения с помощта на езиковия модел DALL-E на OpenAI

Как езиковият модел DALL-E всъщност генерира изображения? Без да навлиза твърде дълбоко в сложността на генерирането на изображения с изкуствен интелект, DALL-E първо интерпретира текстовите описания, подавани към него като входни данни, използвайки обработка на естествен език (NLP). След това изобразява реалистично изображение, което съответства много на даденото описание.

instagram viewer

Подканите за въвеждане могат да включват текстови описания на човек, обект или сцена. Освен това може да включва и детайли като определен цвят, форма и размер. Независимо от сложността или простотата на въведения текст, DALL-E ще генерира изображение, което съответства много на входното описание.

Важно е да се отбележи, че езиковият модел, точно както другите модели, е обучен върху голям набор от данни с милиони данни за изображения, за да научите как да идентифицирате и генерирате фотореалистични изображения от дадени входове.

Първи стъпки с DALL-E API на OpenAI

DALL-E API на OpenAI е достъпен за използване като публична бета версия. За да интегрирате API за използване във вашето приложение React, ще ви трябва ключ за API на OpenAI. Насочете се към OpenAIи влезте в страницата за общ преглед на вашия акаунт, за да вземете вашия API ключ.

След като влезете, щракнете върху иконата на потребителския профил в горната дясна секция на страницата за общ преглед. След това изберете и щракнете върху Вижте API ключове.

На страницата с настройки на API ключове щракнете върху Създайте нов таен ключ бутон, въведете име за вашия API ключ и щракнете върху Създайте таен ключ за генериране на вашия API ключ.

Създайте проект React

Изпълнете командите по-долу на вашия терминал, за да създадете нов проект на React локално. Забележете, трябва да имате инсталиран Node.js.

Вижте тези две статии, за да научите как инсталирайте Node.js на Windows и как да инсталирате Node.js на Ubuntu.

mkdir React-проект 
cd React-проект
npx create-react-app приложение за генериране на изображения
cd приложение за генериране на изображения
npm стартиране

Като алтернатива, вместо да използвате командата create-react-app, можете да използвате Vite, за да настроите вашия React проект. Vite е инструмент за изграждане, предназначен за бързо и ефективно изграждане на уеб приложения.

Интегрирайте DALL-E API на OpenAI за генериране на изображения

След като стартирате вашето React приложение, инсталирайте Node.js библиотеката на OpenAI за използване във вашите React приложения.

npm инсталирайте openai

След това в главната директория на папката на вашия проект създайте нова .env файл за съхранение на вашия API ключ.

REACT_APP_OPENAI_API_KEY = „API КЛЮЧ“

Можете да намерите кода на този проект тук GitHub хранилище.

Създайте компонент за генериране на изображения

В /src директория, създайте нова папка, наименувайте я компонентии създайте нов файл в него с име ImageGenerator.js. Добавете кода по-долу към този файл.

Започнете с импортиране на необходимите модули:

импортиране„../App.css“; 
импортиране {useState} от"реагира"; 
импортиране {Конфигурация, OpenAIApi} от"опенай";

Модулът за конфигурация конфигурира API клиента на OpenAI за използване, докато модулът OpenAIApi предоставя методи за взаимодействие с API на OpenAI. Тези два модула позволяват достъп и използване на функциите на DALL-E от приложението React.

След това дефинирайте функционален компонент и добавете следния код към него:

функцияГенератор на изображения() {
конст [подкана, setPrompt] = useState("");
конст [резултат, setResult] = useState("");
конст [зареждане, setLoading] = useState(невярно);
конст [placeholder, setPlaceholder] = useState(
„Търсете лъв с четки за рисуване, рисуващ картината на мона лиза...“
 );


конст конфигурация = нов Конфигурация ({
 apiKey: process.env. REACT_APP_OPENAI_API_KEY,
 });

конст openai = нов OpenAIApi (конфигурация);

конст генериране на изображение = асинхронен () => {
 setPlaceholder(`Търси ${подкана}..`);
 setLoading(вярно);


опитвам {
конст res = изчакайте openai.createImage({
 подкана: подкана,
 н: 1,
 размер: "512x512",
 });
 setLoading(невярно);
 setResult (res.data.data[0].url);
 } улов (грешка) {
 setLoading(невярно);
конзола.грешка(`Грешка при генериране на изображение: ${error.response.data.error.message}`);
 }
 };

Този код дефинира функционален компонент на React, наречен Генератор на изображения. Компонентът използва няколко променливи на състоянието, за да управлява подканата за въвеждане, изходния резултат, състоянието на зареждане и текста на контейнера.

Компонентът също така създава a конфигурация обект за OpenAI API клиента, който включва API ключа, извлечен от променливата на средата.

Асинхронният генериране на изображение функцията ще се изпълнява, когато потребителят щракне върху бутон, предавайки потребителската подкана.

След това извиква openai.createImage метод за генериране на изображение въз основа на дадената подкана. Този метод връща обект на отговор, който включва генерирания URL адрес на изображението.

Ако извикването на API е успешно, кодът актуализира резултат променлива на състоянието с URL адреса и задава състоянието на зареждане на невярно. Ако извикването на API е неуспешно, то все още задава състоянието на зареждане на невярно, но също така регистрира съобщение за грешка в конзолата.

Накрая изобразете React JSX елементите, които съставляват компонента за генериране на изображения.

връщане (
"контейнер">
 { Зареждане? (
 <>
Изображението се генерира... Моля, изчакайте...</h3>
 </>
 ): (
 <>
Генерирайте изображение с помощта на Open AI API</h2>




 className="въвеждане на приложение"
 placeholder={placeholder}
 onChange={(e) => setPrompt (e.target.value)}
 редове="10"
 cols="100"
 />




 {резултат.дължина > 0? (
"резултат-изображение" src={резултат} alt="резултат" />
 ): (
 <>
 </>
 )}
 </>
 )}
 </div>
 )
}


износпо подразбиране Генератор на изображения

Кодът на този компонент условно изобразява различни елементи въз основа на стойността на Зареждане променлива на състоянието.

Ако Зареждане е вярно, показва съобщение за зареждане. Обратно, Ако Зареждане е false, той показва основния интерфейс за генериране на изображение с помощта на OpenAI API, състоящ се от текстово поле, което улавя потребителските подкани и бутон за изпращане.

The резултат променливата state съдържа генерирания URL адрес на изображението, който по-късно се изобразява в браузъра.

Актуализирайте компонента App.js

Добавете този код към вашия файл App.js:

импортиране'./App.css';
импортиране Генератор на изображения от'./component/ImageGenerator';
функцияПриложение() {
връщане (


"приложение">
„Заглавка на приложението“>

 </header>
 </div>
 );
}


износпо подразбиране Приложение;

Сега можете да продължите и да завъртите сървъра за разработка, за да актуализирате промените и да отидете до него http://localhost: 3000 с вашия браузър, за да тествате функционалността за генериране на изображения.

За да получите възможно най-добри резултати, когато използвате AI инструмент за генериране на изображение, не забравяйте да предоставите подробна подкана в текстовото поле. Това означава да опишете изображението възможно най-подробно, без да пропускате подробности.

Този процес се нарича Prompt Engineering и включва предоставяне на подробни подкани, така че езиковият модел да може да произведе най-добри резултати въз основа на предоставените потребителски данни.

Като се има предвид неотдавнашното нарастване на AI софтуера, наличен на пазара, преследвайки кариера в Prompt Engineering може да бъде доходоносна възможност.

Увеличете максимално силата на езиковите модели в разработката на софтуер

AI инструментите, задвижвани от големи езикови модели, превзеха полето на разработката на софтуер с буря поради своите невероятни характеристики и възможности.

Тези инструменти притежават потенциала да подобрят текущата софтуерна екосистема, като позволяват на разработчиците да интегрират готини AI функции които подобряват използването на различни продукти—използването на AI технологията предоставя уникална възможност за изграждане на иновативен софтуер начини.