Поиск по сайту:

Как создать генератор изображений в React с использованием API DALL-E


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

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

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

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

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

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

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

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

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

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

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

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

Создать проект React

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

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

mkdir React-project 
cd React-project
npx create-react-app image-generator-app
cd image-generator-app
npm start

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

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

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

npm install openai

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

REACT_APP_OPENAI_API_KEY = "API KEY"

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

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

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

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

import '../App.css'; 
import { useState } from "react"; 
import { Configuration, OpenAIApi } from "openai";

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

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

function ImageGenerator() {
    const [prompt, setPrompt] = useState("");
    const [result, setResult] = useState("");
    const [loading, setLoading] = useState(false);
    const [placeholder, setPlaceholder] = useState(
      "Search for a lion with Paint Brushes painting the mona lisa painting..."
    );
    const configuration = new Configuration({
      apiKey: process.env.REACT_APP_OPENAI_API_KEY,
    });
  
    const openai = new OpenAIApi(configuration);
  
    const generateImage = async () => {
      setPlaceholder(`Search ${prompt}..`);
      setLoading(true);
      try {
        const res = await openai.createImage({
          prompt: prompt,
          n: 1,
          size: "512x512",
        });
        setLoading(false);
        setResult(res.data.data[0].url);
      } catch (error) {
        setLoading(false);
        console.error(`Error generating image: ${error.response.data.error.message}`);
      }
    };

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

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

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

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

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

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

    return (
      <div className="container">
        { loading ? (
        <>
          <h3>Generating image... Please Wait...</h3>
        </>
        ) : (
        <>
          <h2>Generate an Image using Open AI API</h2>
          <textarea
            className="app-input"
            placeholder={placeholder}
            onChange={(e) => setPrompt(e.target.value)}
            rows="10"
            cols="100"
          />
          <button onClick={generateImage}>Generate an Image</button>
          { result.length > 0 ? (
            <img className="result-image" src={result} alt="result" />
          ) : (
            <>
            </>
          )}
        </>
        )}
      </div>
    )
}
export default ImageGenerator

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

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

Переменная состояния result содержит URL-адрес сгенерированного изображения, которое позже отображается в браузере.

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

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

import './App.css';
import ImageGenerator from './component/ImageGenerator';
function App() {
  return (
    <div className="App">
      <header className="App-header">
       <ImageGenerator />
      </header>
    </div>
  );
}
export default App;

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

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

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

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

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

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

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

Статьи по данной тематике: