原文: How to Generate Images using React and the Dall-E 2 API – React and OpenAI API Tutorial

嘿,大家好!OpenAI 刚刚发布了它的 DALL-E API,用户可以通过键入查询生成自定义图像。

在本教程中,你将学习如何集成 OpenAI DALL-E 2 API 与 React app。

但首先,Dell-E 是如何工作的呢

正如你已经知道的,你必须输入一个查询——就像 熊拿着画笔在星空里,文森特·梵高画。这里面有很多关键词,比如“画笔”、“星空”和“文森特·梵高”。

Dall-E 要做的是搜索这些与我上面提到的关键字相关的图像。然后它将使用人工智能将所有的图像合并为一个,然后提供给我们。

现在让我们学习如何将其集成到 React 应用程序中,以创建具有这些很棒的特性的应用程序。

如何创建 React 应用程序

现在,创建一个 React 应用程序。你可以使用 CRA(create-react-app)命令创建它,也可以使用 Vite。

我们需要一个文本字段和一个按钮作为 UI 组件。文本字段将用于从用户获取查询,而按钮将用于触发 API 请求。让我们同时创建一个状态来存储查询和一个函数,该函数将在单击按钮时运行。

import { useState } from "react";
import "./App.css";

function App() {
  const [prompt, setPrompt] = useState("");

  const generateImage = async () => {};

  return (
    <div className="app-main">
      <>
        <h2>Generate an Image using Open AI API</h2>

        <textarea
          className="app-input"
          placeholder="Search Bears with Paint Brushes the Starry Night, painted by Vincent Van Gogh.."
          onChange={(e) => setPrompt(e.target.value)}
          rows="10"
          cols="40"
        />
        <button onClick={generateImage}>Generate an Image</button>
      </>
    </div>
  );
}

export default App;

我们的输出将会像这样:

Screenshot-2022-11-05-212826

如何将 DALL-E 2 API 集成到 React 应用程序

让我们看看如何将 DALL-E 2 API 集成到我们的应用程序中。

首先,我们需要访问 OpenAI网站。你需要注册以生成一个 API 密钥。你的账户里还会有 18 美元可以使用。

在注册时选择创建应用程序。

因此,在你创建了你的账户之后,转到 View API Keys 部分,在那里你可以创建你唯一的 API 密钥。查看下面的图片作为参考。

Screenshot-2022-11-05-213523

现在在 React App 中,创建一个 .env 文件。这是为了存储 API 密钥。

Screenshot-2022-11-05-213733

在这里添加 API 密钥。请注意,在 CRA 和 Vite React App 中,从 .env 文件中获取密钥的方法是不同的。所以请记住这一点。我使用的是 Vite,所以我们是这样做的:

VITE_Open_AI_Key = "Your API Key"

现在已经添加了 API 密钥,我们需要在 App.js 或 App.jsx 文件中导入一些东西,包括来自 openai SDK 的 Configuration 和 OpenAIApi。但是,我们首先需要在 React App 安装 openai SDK

只需输入下面的指令安装:

npm install openai

安装可能需要一些时间。然后,像这样导入我们之前提到的两个东西:

import { Configuration, OpenAIApi } from "openai";

我们需要创建一个配置变量,它将从 .env 文件中获取 API 密钥。

const configuration = new Configuration({
	apiKey: import.meta.env.VITE_Open_AI_Key,
});

现在,我们需要将这个配置实例传递给 OpenAIApi,并为 OpenAIApi 创建一个新实例。

const openai = new OpenAIApi(configuration);

以下是到目前为止的全部代码:

import { Configuration, OpenAIApi } from "openai";

import { useState } from "react";
import "./App.css";

function App() {
  const [prompt, setPrompt] = useState("");
  const configuration = new Configuration({
    apiKey: import.meta.env.VITE_Open_AI_Key,
  });

  const openai = new OpenAIApi(configuration);
  

  return (
    <div className="app-main">
      <>
        <h2>Generate an Image using Open AI API</h2>

        <textarea
          className="app-input"
          placeholder="Search Bears with Paint Brushes the Starry Night, painted by Vincent Van Gogh.."
          onChange={(e) => setPrompt(e.target.value)}
          rows="10"
          cols="40"
        />
        <button onClick={generateImage}>Generate an Image</button>
      </>
    </div>
  );
}

export default App;

现在,在 generateImage 函数中,我们需要调用之前创建的 OpenAIApi 实例。记住,功能需求是异步的。

const generateImage = async () => {
    await openai.createImage({
      prompt: prompt,
      n: 1,
      size: "512x512",
    });
  };

如你所见,我们使用的是 openai.createImage。这个 API 用于使用用户查询创建图像。它还需要数量 n,这是我们希望 API 返回的图像的数量,以及图像的尺寸 size

有三种不同的图像尺寸,不同的价格,如下表所示。如果你使用的是 1024x1024 大小,每张图像将花费 0.020 美元。

Screenshot-2022-11-05-215314

现在这个 openai.createImage 返回一些可以存储在变量中的 response 接口。然后,我们可以从 response 变量获得生成的图像链接。

const generateImage = async () => {
    const res = await openai.createImage({
      prompt: prompt,
      n: 1,
      size: "512x512",
    });

    console.log(res.data.data[0].url);
  };

但我们还是别这么做了。让我们再创建一个状态来存储这个图像链接,这样我们就可以在 UI 本身中查看图像。

const [result, setResult] = useState("");

const generateImage = async () => {
    const res = await openai.createImage({
      prompt: prompt,
      n: 1,
      size: "512x512",
    });

    setResult(res.data.data[0].url);
  };

现在,图像链接将存储在 result 状态中。让我们在 UI 中渲染图像。但是由于结果最初是空的,我们可以创建一个查验。我们将只看到在状态中有链接的图像标记。

{result.length > 0 ? (
          <img className="result-image" src={result} alt="result" />
        ) : (
          <></>
        )}

And here's the styling too:

.result-image {
  margin-top: 20px;
  width: 350px;
}

UI 现在看起来像这样:

Screenshot-2022-11-05-220108

让我们输入一些东西并查看输出:

Screenshot-2022-11-05-220222

在上面的例子中,我输入了一匹在红色沙滩里的马,这是结果。

让我们尝试一些更复杂的东西,比如熊拿着画笔在星空里,文森特·梵高画

结果如下:

Screenshot-2022-11-05-220423

以上就是你如何创建这个应用。你可以键入任何输入查询,它将通过人工智能生成该图像。

总结

这就是所有的内容。现在你知道了如何使用 DALL-E 2 API 创建自己的 React 应用程序,以使用 AI 生成图像。你可以添加更多的功能,所以不妨尝试一下。

如果你想看视频版本,请点击我的视频使用 React 和 Dall-E API 生成图像——React 和 OpenAI API 教程 在我的 YouTube 频道 Cybernatico

查看代码 GitHub 以供参考。

学习快乐~