Генерация изображений в React с помощью DALL·E от OpenAI
Модели искусственного интеллекта быстро развиваются и уже умеют создавать впечатляюще детализированные изображения. Вирусные примеры показывают, как ИИ воссоздаёт сцены с высокой степенью реализма. DALL·E и похожие модели (например, Midjourney) принимают текстовое описание и генерируют соответствующие изображения.
В этой статье вы научитесь интегрировать DALL·E API от OpenAI в React‑приложение, чтобы отправлять промпты и получать URL с результирующими изображениями.
Как DALL·E превращает текст в изображение
Коротко: DALL·E сначала анализирует ваш текстовый промпт, применяя методы обработки естественного языка (NLP), затем синтезирует изображение, максимально соответствующее описанию. Подробные внутренние механизмы — тема отдельного исследования, здесь важнее практическая интеграция.
Промпты могут содержать описание персонажа, объекта или сцены, а также указания по цвету, композиции, стилю и формату. Чем подробнее промпт — тем выше шанс получить ожидаемый результат. Модель обучалась на большом количестве изображений и пар «текст–изображение», поэтому умеет воссоздавать фотореалистичные сцены и стилизованные варианты.
Важно: модели имеют ограничения — они могут некорректно воспроизводить лица известных людей, давать нежелательный контент или ошибочно интерпретировать двусмысленные формулировки. Всегда проверяйте результат и соблюдайте правовые и этические нормы.
Начало работы с DALL·E API от OpenAI
OpenAI предоставляет API (обычно в публичной или бета‑версии). Для интеграции в своё приложение понадобится API‑ключ OpenAI.
- Войдите в аккаунт OpenAI и перейдите в раздел с ключами API.
- Создайте новый секретный ключ и сохраните его в надёжном месте.
Важно: никогда не храните секретный ключ напрямую в коде, который попадает в клиент (браузер). Используйте сервер‑прокси или переменные окружения на сервере, либо защищённый бэкенд, который будет обращаться к API от имени клиента.
Создайте проект React
Запустите команды для создания базового приложения React. На машине должен быть установлен Node.js.
mkdir React-project
cd React-project
npx create-react-app image-generator-app
cd image-generator-app
npm startАльтернатива: используйте Vite для быстрого старта — он часто даёт более быструю сборку и меньше накладных зависимостей.
Интеграция DALL·E API в React
Установите официальную Node.js‑библиотеку OpenAI (используется в примере):
npm install openaiВ корне проекта создайте файл .env и поместите туда переменную окружения с ключом API (локально):
REACT_APP_OPENAI_API_KEY = "API KEY"Примечание: для продакшена храните ключи в защищённом хранилище на сервере, а не в клиенте.
Компонент ImageGenerator — создаём генератор изображений
В каталоге /src создайте папку components и файл ImageGenerator.js. Ниже — пример компонента (код ниже сохраняйте как в оригинале):
import\u00A0'../App.css';
import { useState } from\u00A0"react";
import { Configuration, OpenAIApi } from\u00A0"openai";Описание ключевых частей:
- Configuration — объект конфигурации клиента OpenAI, включает API‑ключ.
- OpenAIApi — модуль с методами для работы с API (createImage и др.).
Далее функциональная компонента и логика вызова API:
function\u00A0ImageGenerator() {
\u00A0\u00A0 const [prompt, setPrompt] = useState("");
\u00A0\u00A0 const [result, setResult] = useState("");
\u00A0\u00A0 const [loading, setLoading] = useState(false);
\u00A0\u00A0 const [placeholder, setPlaceholder] = useState(
\u00A0\u00A0\u00A0"Search for a lion with Paint Brushes painting the mona lisa painting..."
\u00A0\u00A0);
\u00A0\u00A0 const configuration = new Configuration({
\u00A0\u00A0\u00A0 apiKey: process.env.REACT_APP_OPENAI_API_KEY,
\u00A0\u00A0});
\u00A0
\u00A0\u00A0const openai = new OpenAIApi(configuration);
\u00A0\u00A0const generateImage = async () => {
\u00A0\u00A0\u00A0 setPlaceholder(`Search ${prompt}..`);
\u00A0\u00A0\u00A0 setLoading(true);
\u00A0\u00A0\u00A0 try {
\u00A0\u00A0\u00A0\u00A0 const res = await openai.createImage({
\u00A0\u00A0\u00A0\u00A0\u00A0 prompt: prompt,
\u00A0\u00A0\u00A0\u00A0\u00A0 n: 1,
\u00A0\u00A0\u00A0\u00A0\u00A0 size: "512x512",
\u00A0\u00A0\u00A0\u00A0});
\u00A0\u00A0\u00A0\u00A0 setLoading(false);
\u00A0\u00A0\u00A0\u00A0 setResult(res.data.data[0].url);
\u00A0\u00A0\u00A0 } catch (error) {
\u00A0\u00A0\u00A0\u00A0 setLoading(false);
\u00A0\u00A0\u00A0\u00A0 console.error(`Error generating image: ${error.response.data.error.message}`);
\u00A0\u00A0\u00A0 }
\u00A0\u00A0};Этот компонент использует состояния для управления вводом (prompt), результатом (result), индикатором загрузки (loading) и текстом плейсхолдера.
Далее разметка компонента — условный рендеринг по состоянию loading и выводу результата:
\u00A0\u00A0return (
\u00A0\u00A0\u00A0
\u00A0\u00A0\u00A0\u00A0{ loading ? (
\u00A0\u00A0\u00A0\u00A0<>
\u00A0\u00A0\u00A0\u00A0\u00A0 Generating image... Please Wait...
\u00A0\u00A0\u00A0\u00A0
\u00A0\u00A0\u00A0\u00A0) : (
\u00A0\u00A0\u00A0\u00A0<>
\u00A0\u00A0\u00A0\u00A0\u00A0 Generate an Image using Open AI API
\u00A0\u00A0\u00A0\u00A0\u00A0