Создайте простой интерфейс для API DALL-E и начните экспериментировать с контентом, созданным ИИ, уже сегодня.

Искусственный интеллект постоянно совершенствуется и теперь может создавать удивительные изображения. Недавний вирусный пример изображал самых богатых и влиятельных людей мира в рваной одежде, живущих в трущобах. Что впечатляет в изображениях, так это высокий уровень детализации как людей, так и их окружения.

Такие языковые модели, как DALL-E и Midjourney, поддерживают эти возможности создания изображений, принимая текстовые описания в качестве входных данных и создавая увлекательные изображения.

Узнайте, как интегрировать API OpenAI DALL-E для создания изображений в приложении React.

Генерация изображений с использованием языковой модели OpenAI DALL-E

Как языковая модель DALL-E на самом деле генерирует изображения? Не вдаваясь слишком глубоко в сложности генерации изображений ИИ, DALL-E сначала интерпретирует переданные ему текстовые описания как входные данные, используя обработку естественного языка (NLP). Затем он отображает реалистичное изображение, которое точно соответствует данному описанию.

instagram viewer

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

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

Начало работы с API OpenAI DALL-E

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

После входа в систему щелкните значок профиля пользователя в правом верхнем углу страницы обзора. Далее выбираем и нажимаем Просмотр ключей API.

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

Создать реагирующий проект

Запустите приведенные ниже команды на своем терминале, чтобы создать новый проект React локально. Обратите внимание, у вас должен быть установлен Node.js.

Обратитесь к этим двум статьям, чтобы узнать, как установить Node.js в Windows и как установить Node.js на Ubuntu.

mkdir React-проект 
cd React-проект
npx создать-реагировать-приложение-генератор-приложение-изображения
cd-приложение-генератор изображений
запуск нпм

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

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

После того, как ваше приложение React будет запущено и запущено, установите библиотеку OpenAI Node.js для использования в ваших приложениях React.

нпм установить опенай

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

REACT_APP_OPENAI_API_KEY = "АПИ КЛЮЧ"

Вы можете найти код этого проекта в этом Репозиторий GitHub.

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

в /src каталог, создайте новую папку, назовите ее компоненты, и создайте внутри него новый файл с именем ImageGenerator.js. Добавьте приведенный ниже код в этот файл.

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

Импортировать'../App.css'; 
Импортировать { состояние использования } от"реагировать"; 
Импортировать {Конфигурация, OpenAIApi} от"опенай";

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

Затем определите функциональный компонент и добавьте к нему следующий код:

функцияГенератор изображений() {
константа [подсказка, setPrompt] = useState("");
константа [результат, setResult] = useState("");
константа [загрузка, setLoading] = useState(ЛОЖЬ);
константа [заполнитель, setPlaceholder] = useState(
«Поиск льва с кистями, рисующего картину Моны Лизы…»
 );


константа конфигурация = новый Конфигурация({
 APIKey: процесс.env. REACT_APP_OPENAI_API_KEY,
 });

константа опенай = новый OpenAIApi (конфигурация);

константа ГенерироватьИзображение = асинхронный () => {
 установить заполнитель (`Поиск $ {подсказка}..`);
 установитьЗагрузка(истинный);


пытаться {
константа разрешение = Ждите openai.createImage({
 подсказка: подсказка,
 н: 1,
 размер: "512x512",
 });
 установитьЗагрузка(ЛОЖЬ);
 setResult (рез.данные.данные[0].url);
 } ловить (ошибка) {
 установитьЗагрузка(ЛОЖЬ);
консоль.ошибка(`Ошибка создания изображения: ${ошибка.ответ.данные.ошибка.сообщение}`);
 }
 };

Этот код определяет функциональный компонент React, называемый Генератор изображений. Компонент использует несколько переменных состояния для управления приглашением ввода, результатом вывода, состоянием загрузки и текстом-заполнителем.

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

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

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

Если вызов API завершается успешно, код обновляет результат переменная состояния с URL-адресом и устанавливает статус загрузки на ЛОЖЬ. Если вызов API завершается неудачно, он все равно устанавливает статус загрузки в ЛОЖЬ, но также выводит сообщение об ошибке на консоль.

Наконец, визуализируйте элементы React JSX, составляющие компонент генератора изображений.

возвращаться (
"контейнер">
 { загрузка? (
 <>
Генерация изображения... Пожалуйста, подождите...</h3>
 </>
 ): (
 <>
Создайте изображение с помощью Open AI API</h2>




 имя_класса="приложение-ввод"
 заполнитель = {заполнитель}
 onChange={(e) => setPrompt (e.target.value)}
 строки ="10"
 столбцы ="100"
 />




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


экспортпо умолчанию Генератор изображений

Код этого компонента условно отображает различные элементы в зависимости от значения параметра загрузка переменная состояния.

Если загрузка верно, он показывает сообщение о загрузке. И наоборот, если загрузка имеет значение false, он показывает основной интерфейс для создания изображения с использованием API OpenAI, состоящий из текстовой области, в которой фиксируются пользовательские подсказки, и кнопки отправки.

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

Обновите компонент App.js

Добавьте этот код в свой файл App.js:

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


"Приложение">
"Заголовок приложения">

 </header>
 </div>
 );
}


экспортпо умолчанию Приложение;

Теперь вы можете запустить сервер разработки, чтобы обновить изменения и перейти к http://localhost: 3000 в браузере, чтобы проверить функциональность генерации изображений.

Чтобы получить наилучшие результаты при использовании инструмента искусственного интеллекта для создания изображения, обязательно укажите подробное приглашение в текстовой области. Это означает максимально подробное описание изображения, не упуская ни одной детали.

Этот процесс называется подсказкой и включает в себя предоставление подробных подсказок, чтобы языковая модель могла давать наилучшие результаты на основе введенных пользователем данных.

Учитывая недавний всплеск программного обеспечения ИИ, доступного на рынке, продолжение карьеры в Prompt Engineering может быть выгодной возможностью.

Максимально используйте возможности языковых моделей в разработке программного обеспечения

Инструменты искусственного интеллекта, основанные на больших языковых моделях, штурмом захватили область разработки программного обеспечения благодаря своим невероятным функциям и возможностям.

Эти инструменты обладают потенциалом для улучшения текущей экосистемы программного обеспечения, позволяя разработчикам интегрировать интересные функции ИИ. которые улучшают использование различных продуктов — использование технологии искусственного интеллекта предоставляет уникальную возможность создавать программное обеспечение в инновационных способы.