欢迎来到 AI 驱动的应用程序世界！在这篇博文中，我们将探索使用 React 和强大的 OpenAI 平台创建图像生成器应用程序的激动人心的机会。
无论您是初学者还是经验丰富的开发人员，您都将学习如何利用机器学习的力量，只需几行代码即可生成令人惊叹的图像。从构建前端界面到集成 OpenAI API，如何将电影和视频从 iTunes、Netflix、云服务等下载到 iPad我们将引导您完成该过程的每一步。那么，让我们开始探索如何使用 OpenAI 创建一个由 AI 驱动的 React 图像生成器应用程序！
项目设置
让我们通过使用 Vite 设置一个新的 React 应用程序来开始构建我们的 AI 驱动的 React Image Generator 应用程序。确保在您的系统上安装了 Node.js 和 Yarn 并通过执行以下命令启动：
$ yarn create vite
然后 Vite 开始生成过程并要求您输入项目名称：
在下一步中，Vite 会要求您选择一个框架。通过使用键盘上的箭头键，您可以选择选项“React”，然后再次按回车键。最后，您需要决定应该使用 React 项目的哪个变体。对于本文的示例，我们选择选项“JavaScript + SWC”：
最后，您应该在命令行上收到项目已完全设置的确认信息：
使用以下命令输入新生成的项目文件夹：
$ cd react-image-gen
在该文件夹中执行 yarn 命令确保所有依赖项都已下载并安装在项目文件夹中：
$ yarn
此外，我们需要确保将 openai 包添加到我们的 React 项目中，以便能够访问 OpenAI API：
$ yarn add openai
可以通过输入以下命令启动开发 Web 服务器：
$ yarn dev
服务器启动后，您应该能够在浏览器中看到这个默认项目：
清理默认代码
让我们稍微清理一下默认代码。打开 src/App.jsx 并删除除以下基本 App 组件结构之外的所有内容：
import { useState } from 'react'import './App.css'function App() {return (<div className="App"><h1>React AI Image Generator</h1><div className="card"></div><p className="read-the-docs">Powered by OpenAI</p></div>)}export default App
清理代码后，浏览器中的输出应如下所示：
实施应用程序
是时候开始实施 React 应用程序了。
首先在 App.jsx 上插入另一个 import 语句：
import { Configuration, OpenAIApi } from 'openai'
该代码从包中导入两个对象，Configuration和。OpenAIApiopenai
接下来在 App 组件中插入以下代码：
const [prompt, setPrompt] = useState('')const [result, setResult] = useState('')const [loading, setLoading] = useState(false)
该代码使用 useState 挂钩在 App 组件中定义了三个状态变量。
prompt是一个字符串状态变量，最初设置为空字符串。它用于存储将发送到 OpenAI API 以生成图像或文本的文本提示。
result是一个字符串状态变量，最初也设置为空字符串。用于存储OpenAI API发送提示后返回的结果。
loading是一个布尔状态变量，最初设置为 false。它用于指示对 OpenAI API 的请求当前是否正在进行中。当loading设置为true时，表示请求正在进行中，当设置为false时，表示请求已经完成或尚未发起。
useState 钩子是一个内置的 React 钩子，允许您将状态添加到功能组件。它返回一个包含当前状态值的数组和一个更新它的函数。、和函数用于更新它们各自的状态变量setPrompt。setResultsetLoading
让我们继续实现并在 App 组件中添加以下代码行：
const configuration = new Configuration({apiKey: import.meta.env.VITE_OPENAI_API_KEY,})const openai = new OpenAIApi(configuration);
该代码正在创建两个对象，configuration并且openai.
configuration是从包中导入的配置类的一个实例openai。它以具有单个属性的对象apiKey作为参数。该属性的值是从import.meta.env.VITE_OPENAI_API_KEY变量中获得的。
VITE_OPENAI_API_KEY 包含用于访问 OpenAI API 的 API 密钥。为了使这个环境变量可用，您需要在我们的 React 项目的根文件夹中创建一个新文件 .env。在此文件中，您需要通过以下方式将此环境变量设置为您的个人 OpenAI API 密钥：
VITE_OPENAI_API_KEY=[INSERT YOUR OPENAI API KEY HERE]
要检索您的 OpenAI API 密钥，您需要在 / 创建一个用户帐户并访问 OpenAI 仪表板中的 API 密钥部分以创建一个新的 API 密钥。
OpenAIApi也是从包中导入的类openai。openai是此类的实例，它是通过将配置对象作为参数传递来创建的。
Configuration 类用于为 OpenAI API 设置必要的配置，例如 API 密钥。OpenAIApi 类用于与 OpenAI API 交互，例如发送生成图像或文本的请求。
然后将该configuration对象作为参数传递给类的构造函数OpenAIApi，创建可用于与 OpenAI API 交互的类实例。
现在让我们在 App 组件中创建一个图像生成函数：
const generateImage = async () => {setLoading(true)const response = await openai.createImage({prompt: prompt,n: 1,size: "512x512",});setLoading(false)setResult(response.data.data[0].url)};
该代码定义了一个名为的函数，generateImage该函数是一个异步函数，它向 OpenAI API 发送请求以根据用户提供的提示生成图像。
该函数首先将loading状态变量设置为true使用该setLoading函数。这样做是为了表明请求正在进行中。
然后它使用openai.createImageOpenAIApi 类提供的方法向 OpenAI API 发送请求。该请求包含提示，n 是要生成的图像数量和size图像的数量。
收到响应后，函数将loading状态变量设置为false使用setLoading函数，表示请求已完成。
然后它使用该函数用生成图像的 URLsetResult更新状态变量。result此 URL 可用于在前端显示图像。
最后，我们需要扩展从 App 组件返回的 JSX 代码，它需要构建用户界面：
return (<div className="app"><h1>React AI Image Generator</h1>{loading ? (<h2> Image generation in progress ... Please wait!</h2>) : (<></>)}<div className="card"><textareaclassName="text-input"placeholder="Enter a prompt"onChange={(e) => setPrompt(e.target.value)}row="5"cols="50"/><button className="button" onClick={generateImage}>Generate Image</button>{result.length > 0 ? (<img className="result-image" src={result} alt="Generated Image" />) : (<></>)}</div><p className="footer">Powered by OpenAI</p></div>)
这段 JSX 代码定义了呈现 React 应用程序用户界面的组件结构。它返回一个div类为“app”的元素。
它包含一个h1带有文本“React AI Image Generator”的标题，这是应用程序的标题。
然后它有一个三元运算符来检查状态变量的值loading。如果为真，它会显示一个h2带有文本“Image generation in progress...Please wait!”的元素，表示正在进行图像生成请求。如果为假，则返回一个空的 JSX 元素<></>。
在div元素内部，它有另一个div类为“card”的元素。该元素包含一个textarea用作文本输入区域的元素、一个占位符“输入提示”和一个onChange调用将setPrompt文本区域的值作为参数传递的函数的事件。它还有一个类为“button”的按钮元素和一个在单击时onClick调用该generateImage函数的事件。
然后它有另一个三元运算符来检查result状态变量的长度是否大于 0。如果为真，它会显示一个img元素，该元素是生成的图像，属性src设置为result状态变量，alt属性为“生成的图像”。如果为假，则返回一个空的 JSX 元素<></>。
这段 JSX 代码定义了组件的 UI，它使用状态变量和函数来控制 UI 和应用程序的流程。
React AI 图像生成器应用程序的完整源代码
总结实现让我们最后看一下 src/App.jsx 中的完整源代码：
import { useState } from 'react'import { Configuration, OpenAIApi } from 'openai'import './App.css'function App() {const [prompt, setPrompt] = useState('')const [result, setResult] = useState('')const [loading, setLoading] = useState(false)const configuration = new Configuration({apiKey: import.meta.env.VITE_OPENAI_API_KEY,})const openai = new OpenAIApi(configuration);const generateImage = async () => {setLoading(true)const response = await openai.createImage({prompt: prompt,n: 1,size: "512x512",});setLoading(false)setResult(response.data.data[0].url)};return (<div className="app"><h1>React AI Image Generator</h1>{loading ? (<h2> Image generation in progress ... Please wait!</h2>) : (<></>)}<div className="card"><textareaclassName="text-input"placeholder="Enter a prompt"onChange={(e) => setPrompt(e.target.value)}row="5"cols="50"/><button className="button" onClick={generateImage}>Generate Image</button>{result.length > 0 ? (<img className="result-image" src={result} alt="Generated Image" />) : (<></>)}</div><p className="footer">Powered by OpenAI</p></div>)}export default App
以及来自 src/App.css 的相应 CSS 代码：
#root {max-width: 1280px;margin: 0 auto;padding: 2rem;text-align: center;}.app {display: flex;flex-direction: column;align-items: center;}.text-input {height: 50px;width: 100%;margin-bottom: 20px;border: 2px solid lightgrey;padding: 10px;font-size: 14px;border-radius: 5px;}.result-image {margin-top: 20px;border: 2px solid lightgray;padding: 10px;width: 100%;}.card {padding: 2em;display: flex;flex-direction: column;}.footer {color: #888;}
测试应用程序
是时候测试我们的应用程序了。在浏览器中访问应用程序时，您现在应该能够看到以下用户界面：
尝试输入一个文本提示，其中包含您希望由 OpenAI 生成的图像的描述：
点击按钮“生成图像”。图像的生成需要几秒钟，之后您将在网页上看到生成的图像：
结论
使用 OpenAI 构建 AI 驱动的 React 图像生成器应用程序是体验机器学习强大功能的绝佳方式。通过遵循这篇博文中概述的步骤，您已经学会了如何创建一个视觉上令人惊叹的前端界面，以及如何使用 OpenAI API 仅用几行代码来生成图像。有了这个应用程序，您现在可以按需生成图像，并将它们用于各种应用程序，例如社交媒体、营销活动，甚至是艺术项目。我们希望本教程对您有所帮助，并激发您尝试其他 AI 支持的项目的兴趣。快乐编码！”
