创建一个反应式 JavaScript 生成具有稳定扩散的 AI 图像

众所周知，生成式人工智能最近非常受欢迎。代表性的例子包括文本生成器，例如 OpenAI 的 ChatGPT 和 Google Bard。此外，还有文本转图像生成器，该领域的领先者是Stable Diffusion，一种开源图像创建AI系统。在这里，我们将使用 Stable Diffusion 的免费试用 API 创建一个连接到服务的工作 React.js 客户端。

ⓒ 盖蒂图片库

稳定扩散入门 Stable Diffusion可以从GitHub 存储库下

几个项目提供了与托管 老挝 WhatsApp 号码数据 的稳定扩散安装进行交互的端点，因此您不必自己设置和训练模型。最好的稳定扩散接口之一是稳定扩散 API，它提供免费试用。您可以使用此 API 通过 React（一个免费的开源前端 JavaScript 库）与 Stable Diffusion 进行交互。

首先，使用 create-react-app 命令行工具启动一个新的 React 应用程序。为此，您需要提前安装 Node 和 NPM。然后使用 $ npm i -g create-react-app 安装 create-react-app。现在您可以使用 $ create-react-app react-sd 命令创建一个简单的应用程序。要进行测试，请转到react-sd目录，输入$ npm start，然后访问位于localhost:3000的起始页面。

构建 React UI
现在您已经设置了 React 和 Stable Diffusion，是时候创建一个 UI，将文本提示输入到 Stable Diffusion API 端点并显示生成的图像。它的工作原理是使用一个简单的可滚动窗口来显示生成的图像列表。

首先，如<示例1>所示，创建一个用于接收提示的文本框和一个附加到此处的提交按钮。此代码替换了 React 的默认 App.js 文件。

 

应用程序现在接受文本输入并将其存储在数组

该数组在 UI 中显示 欧洲邮件 为无序列表。提示输入和提交的提示数组都是 useState 钩子变量。连接到 API 端点 到目前为止，generateImage() 函数什么也没做。让我们认真落实工作。第一步是向稳定扩散端点提交文本提示。Stable Diffusion API是 RESTful 风格，等待 JSON 请求和响应，如此处所述。本文档包含API 端点列表 ，其中包括此处描述的文本到图像端点。