手把手教你创建一个基于OpenAI和React的图片生成器（支持中文）

Midjourney 创作，未来AI机器人

欢迎来到人工智能应用的世界！在本文中，我们将探索使用React和强大的OpenAI平台创建图像生成器应用程序的激动人心机会。无论你是初学者还是经验丰富的开发人员，你都将学习如何利用机器学习的力量，只需几行代码即可生成令人惊叹的图像。从构建前端界面到集成OpenAI API，我们将为您逐步介绍整个过程。那么，让我们开始，发现如何使用OpenAI创建基于人工智能的React图像生成器应用程序！

项目设置

让我们通过使用Vite设置新的React应用程序来构建我们的基于人工智能的React图像生成器应用程序。确保在您的系统上安装了Node.js和Yarn，并开始执行以下命令：

$ yarn create vite

接着，Vite将启动生成过程，并要求您输入一个项目名称：

在下一步中，Vite会要求您选择一个框架。您可以使用键盘上的箭头键选择“React”选项，然后再次按回车键。最后，您需要决定使用哪个React项目。在本文的示例中，我们选择了“JavaScript + SWC”选项。

延伸阅读：什么是JavaScript + SWC？

"JavaScript + SWC" 是一个React项目的变体，其中 "SWC" 是指一个JavaScript编译器。在这个配置中，SWC编译器将用于编译JavaScript代码，以提高React应用程序的性能和执行效率。相比较于其他选项，例如 "TypeScript" 或者 "JavaScript + Babel"，使用 "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>