原文: 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;
我们的输出将会像这样:
如何将 DALL-E 2 API 集成到 React 应用程序
让我们看看如何将 DALL-E 2 API 集成到我们的应用程序中。
首先,我们需要访问 OpenAI网站。你需要注册以生成一个 API 密钥。你的账户里还会有 18 美元可以使用。
在注册时选择创建应用程序。
因此,在你创建了你的账户之后,转到 View API Keys 部分,在那里你可以创建你唯一的 API 密钥。查看下面的图片作为参考。
现在在 React App 中,创建一个 .env 文件。这是为了存储 API 密钥。
在这里添加 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 美元。
现在这个 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 现在看起来像这样:
让我们输入一些东西并查看输出:
在上面的例子中,我输入了一匹在红色沙滩里的马,这是结果。
让我们尝试一些更复杂的东西,比如熊拿着画笔在星空里,文森特·梵高画
结果如下:
以上就是你如何创建这个应用。你可以键入任何输入查询,它将通过人工智能生成该图像。
总结
这就是所有的内容。现在你知道了如何使用 DALL-E 2 API 创建自己的 React 应用程序,以使用 AI 生成图像。你可以添加更多的功能,所以不妨尝试一下。
如果你想看视频版本,请点击我的视频使用 React 和 Dall-E API 生成图像——React 和 OpenAI API 教程 在我的 YouTube 频道 Cybernatico。
查看代码 GitHub 以供参考。
学习快乐~