用Node.js开发基于稳定扩散的AI应用
在本文中，我们将介绍如何构建一个 Web 应用程序，该应用程序使用 ChatGPT 和 Stable Diffusion 为你提供的任何网站描述生成徽标和合适的域名。
推荐：用 NSDT编辑器 快速搭建可编程3D场景
1、介绍
人工智能正在接管世界。 这些技术每天都在震撼我们的世界：ChatGPT 和 Stable Diffusion。
ChatGPT 可以使用其 GPT3.5 模型回答世界上的任何问题。稳定扩散是一种文本到图像的模型，可以将任何文本转换为图片。结合这两种技术是人工智能的未来。我将在本文中向拟展示如何将两者结合起来创建整个网站品牌。
我对这个真的很兴奋
2、什么是稳定扩散？
稳定扩散是一种文本到图像的潜在扩散模型，使用户能够根据给定的文本输入在几秒钟内生成图像。 它还用于诸如内绘画、外绘画和生成图像到图像转换等过程。
ChatGPT 也是经过 OpenAI 训练的 AI 语言模型，用于生成文本并以类人对话方式与用户交互。 用户可以提交请求并在短短几秒钟内获得历史、科学、数学和时事等广泛主题的信息或问题的答案。
在本文末尾，拟将了解如何使用 Stable Diffusion WebUI 从文本创建图像，以及如何从 Node.js 应用程序向 ChatGPT 发送消息。
3、安装并运行稳定的 Diffusion Web UI
可以在 Windows、Linux 和 Apple Silicon 上安装 Stable Diffusion Web UI。 在这里，我将指导拟完成 Apple Silicon 上的安装。
先决条件：确保拟的计算机上安装了 Homebrew。 它是一个软件包，可让拟安装 Apple 未提供的各种应用程序。
打开一个新的终端窗口并运行以下命令来安装 WebUI 依赖项。
MAC：
brew install cmake protobuf rust [email protected] git wget
Debian系Linux：
sudo apt install wget git python3 python3-venv
红帽系Linux：
sudo dnf install wget git python3
Arch系Linux：
sudo pacman -S wget git python3
通过运行以下命令克隆 Web UI 存储库：
git clone https://github.com/AUTOMATIC1111/stable-diffusion-webui
我们需要下载稳定扩散模型（大文件）。 进入目录 stable-diffusion-webui/models/Stable-diffusion ：
cd stable-diffusion-webui/models/Stable-diffusion
下载模型 - 对于我们的用例，我们将使用 Stable Diffusion 1.5，但请随意下载拟想要的任何其他版本：
wget https://huggingface.co/runwayml/stable-diffusion-v1-5/resolve/main/v1-5-pruned-emaonly.ckpt
下载后将模型从 v1-5-pruned-emaonly.ckpt 重命名为 `odel.ckpt
mv v1-5-pruned-emaonly.ckpt model.ckpt 。
进入 stable-diffusion-webui 文件夹并运行 Web UI 项目以创建虚拟环境并安装其依赖项：
cd stable-diffusion-webui
./webui.sh
访问本地 URL - http://127.0.0.1:7860，通过其用户界面与 Web UI 进行交互：
要稍后重新启动 Web UI 进程，请导航到终端上的 stable-diffusion-webui 文件夹并运行命令 ./webui.sh。 如果要使用Web UI API，请在命令 ./webui.sh --api中添加flag api标志。
4、构建Web应用程序
在本节中，我将指导拟创建 Web 应用程序的项目环境。 我们将使用 React.js 作为前端，使用 Node.js 作为后端服务器。
通过运行以下代码为 Web 应用程序创建项目文件夹：
mkdir stable-diffusion-app
cd stable-diffusion-app
mkdir client server
通过终端导航到客户端文件夹并创建一个新的 React.js 项目：
cd client
npx create-react-app ./
删除React应用程序中的冗余文件，例如徽标和测试文件，并更新App.js文件以显示“Hello World”，如下所示。
function App() {
return (
Hello World!
);
}
export default App;
导航到 src/index.css 文件并复制以下代码。 它包含该项目样式所需的所有 CSS。
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Space Grotesk", sans-serif;
}
.app,
.loading,
.result__container > div {
display: flex;
align-items: center;
justify-content: center;
}
.app {
width: 100%;
margin: 50px auto;
flex-direction: column;
}
.app > h1 {
margin-bottom: 30px;
color: #2b3467;
}
form {
display: flex;
flex-direction: column;
width: 80%;
}
textarea {
padding: 20px;
border: 1px solid #ddd;
outline: none;
border-radius: 5px;
margin: 5px 0px;
box-shadow: 0 2px 8px 0 rgba(99, 99, 99, 0.2);
}
button {
margin-top: 15px;
display: inline-block;
width: 200px;
padding: 20px;
cursor: pointer;
font-weight: bold;
border: none;
border-radius: 5px;
outline: none;
font-size: 18px;
background-color: #f0dbdb;
}
.loading {
width: 100%;
height: 100vh;
background-color: #fefcf3;
}
.result__container {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-top: 30px;
}
.result__container > div {
margin: 5px;
flex-direction: column;
}
.image {
width: 400px;
height: 300px;
margin-bottom: 15px;
}
更新 App.js 文件以显示一个输入字段，允许拟输入建议的网站描述：
import React, { useState } from "react";
const App = () => {
const [description, setDescription] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
console.log({ description });
setDescription("");
};
return (
Website Idea Generator