在本文中,您将学习如何通过 ChatGPT 和Stable Diffusion的构建一个 Web 应用程序,为您网站描述生成描述和合适的LOGO。
背景介绍
人工智能正在接管世界。这些技术每天都在震撼我们的世界:ChatGPT和Stable Diffusion。
ChatGPT 可以使用其 GPT3.5 模型回答世界上的任何问题。 Stable Diffusion是一种文本到图像模型,可以将任何文本转换为图片。 结合这两种技术是人工智能的未来。
在本文中,我将向您展示如何通过将两者结合起来来创建整个网站LOGO 及描述。
我对这个🤩
感到非常兴奋,请点击“喜欢”按钮,这样我知道你喜欢它,你想要更多。
Novu - 第一个开源通知基础架构
Novu 是第一个开源通知基础架构。我们基本上通过他管理所有产品通知。它可以集成到应用内(像你在Facebook中的铃铛图标 - Websockets),电子邮件,短信等。
什么是Stable Diffusion?
Stable Diffusion是一种文本到图像的潜在扩散模型,使用户能够根据给定的文本输入在几秒钟内生成图像。它还用于诸如内涂、外涂和生成图像到图像转换等过程。
ChatGPT也是OpenAI训练的AI语言模型,用于生成文本并以类似人类的对话方式与用户交互。用户可以在几秒钟内提交请求并获得来自历史、科学、数学和时事等广泛主题的信息或问题的答案。
在本文的最后,您将学习如何使用Stable Diffusion WebUI从文本创建图像,以及如何从Node.js应用程序向ChatGPT发送消息。
安装和运行stable-diffusion Web UI
您可以在Windows,Linux和Apple Silicon上安装Stable Diffusion Web UI。在这里,我将指导您完成Apple Silicon上的安装。
先决条件: 确保在计算机上安装了homebrew。它是一个软件包,可让您安装Apple未提供的各种应用程序。
- 打开一个新的终端窗口并运行以下命令以安装 WebUI 依赖项。
**MAC: **
brew install cmake protobuf rust python@3.10 git wget
**基于 Debian: **
sudo apt install wget git python3 python3-venv
**基于小红帽: **
sudo dnf install wget git python3
基于Arch:
sudo pacman -S wget git python3
2.通过运行以下命令克隆 Web UI 存储库:
git clone https://github.com/AUTOMATIC1111/stable-diffusion-webui
3.我们需要下载Stable Diffusion模型(大文件)。访问到如下存储路径
cd stable-diffusion-webui/models/Stable-diffusion
4.下载模型 - 对于我们的用例,我们将使用Stable Diffusion 1.5版本,你也可下载您想要的任何其他版本。
wget https://huggingface.co/runwayml/stable-diffusion-v1-5/resolve/main/v1-5-pruned-emaonly.ckpt
5.将模型从 v1-5-pruned-emaonly.ckpt 重命名为 model.ckpt mv v1-5-pruned-emaonly.ckpt model.ckpt
6.导航到该文件夹并运行 Web UI 项目以创建虚拟环境并安装其依赖项。stable-diffusion-webui
cd stable-diffusion-webui
./webui.sh
7.访问本地 URL - 通过其用户界面与 Web UI 交互。http://127.0.0.1:7860
8.要稍后重新启动 Web UI 进程,请导航到终端上的文件夹并运行命令 。如果要使用 Web UI API,请将标志 api 标志添加到命令中stable-diffusion-webui``./webui.sh``./webui.sh --api
构建 Web 应用程序
在本节中,我将指导您为 Web 应用程序创建项目环境。我们将使用 React.js 用于前端,使用 Node.js 用于后端服务器。
通过运行以下代码为 Web 应用程序创建项目文件夹:
mkdir stable-diffusion-app
cd stable-diffusion-app
mkdir client server
设置 React 应用程序
通过终端导航到客户端文件夹并创建一个新的 React.js 项目。
cd client
npx create-react-app ./
从 React 应用程序中删除冗余文件,例如徽标和测试文件,并更新文件以显示“Hello World”,如下所示。App.js
function App() {
return (
<div>
<p>Hello World!</p>
</div>
);
}
export default App;
导航到该文件并复制下面的代码。它包含设置此项目样式所需的所有 CSS。src/index.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 (
<div className='app'>
<h1>Website Idea Generator</h1>
<form method='POST' onSubmit={handleSubmit}>
<label htmlFor='description'>Enter the description</label>
<textarea
name='description'
rows={6}
value={description}
onChange={(e) => setDescription(e.target.value)}
/>
<button>GENERATE</button>
</form>
</div>
);
};
export default App;
设置NODE.js服务器
导航到终端中的服务器文件夹并创建一个文件。package.json
cd server & npm init -y
安装 Express、Nodemon 和 CORS 库。
npm install express cors nodemon
ExpressJS是一个快速,简约的框架,它提供了几个用于在Node.js中构建Web应用程序的功能,CORS是一个Node.js包,允许不同域之间的通信,Nodemon是一个Node.js工具,在检测到文件更改后自动重新启动服务器。
创建一个文件 - Web 服务器的入口点。index.js
touch index.js
使用 ExpressJS 设置 Node.js 服务器。下面的代码片段会在您在浏览器中访问 时返回一个 JSON 对象。http://localhost:4000/api
//👇🏻index.js
const express = require("express");
const cors = require("cors");
const app = express();
const PORT = 4000;
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.use(cors());
app.get("/api", (req, res) => {
res.json({
message: "Hello world",
});
});
app.listen(PORT, () => {
console.log(`Server listening on ${PORT}`);
});
安装 Axios、非官方的 ChatGPT API 库和 Puppeteer。ChatGPT API 使用 Puppeteer 作为可选的对等依赖项来自动绕过 Cloudflare 保护。
npm install chatgpt puppeteer axios
要在文件中使用 ChatGPT API,您需要将文件配置为同时使用 and 关键字来导入库。
因此,请更新文件以包含关键字。server/index.js``require``import``server/package.json``type
{ "type": "module" }
在文件顶部添加下面的代码片段。server/index.js
import { createRequire } from "module";
const require = createRequire(import.meta.url);
//...other code statements
完成最后两个步骤后,您现在可以在文件中使用 ChatGPT。index.js
通过将启动命令添加到文件中的脚本列表中来配置 Nodemon。下面的代码片段使用 Nodemon 启动服务器。package.json
//In server/package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon index.js"
},
祝贺!现在,您可以使用以下命令启动服务器。
npm start
如何在 Node.js 应用程序中与 ChatGPT 通信
在本节中,您将学习如何通过非官方的 ChatGPT 库从 Node.js 服务器与 ChatGPT 通信。
该库使用基于浏览器的全自动解决方案,使我们能够快速进入 - 这意味着它执行完整的浏览器自动化,允许我们登录 OpenAI 网站、解决验证码并通过 OpenAI cookie 发送消息。
您已在上一节中安装了该库;接下来,将 ChatGPT API 库导入到文件中,如下所示。ChatGPT API 使用 Puppeteer 作为可选的对等依赖项来自动绕过 Cloudflare 保护。index.js
import { ChatGPTAPIBrowser } from "chatgpt";
我们需要 ChatGPT 为用户指定的任何描述生成域名,并为Stable Diffusion API 创建提示。
因此,在服务器上创建一个接受来自 React 应用程序的描述的路由。
app.post("/api", async (req, res) => {
const { prompt } = req.body;
console.log(prompt);
});
在 React 应用程序中创建一个函数,该函数在用户提交表单后将描述发送到服务器上的端点。/api
async function sendDescription() {
try {
const request = await fetch("http://localhost:4000/api", {
method: "POST",
body: JSON.stringify({
prompt: description,
}),
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
});
const res = await request.json();
console.log(res);
} catch (err) {
console.error(err);
}
}
在 React 应用程序中添加一个加载状态,用于保存请求状态,并在提交表单后调用异步函数。
const [description, setDescription] = useState("");
const [loading, setLoading] = useState(false);
const handleSubmit = (e) => {
e.preventDefault();
//👇🏻 calls the async function
sendDescription();
setDescription("");
setLoading(true);
};
更新端点以将描述发送到 ChatGPT,并生成域名并提示Stable Diffusion。/api
async function chatgptFunction(content) {
try {
const api = new ChatGPTAPIBrowser({
email: "YOUR_CHATGPT_EMAIL_ADDRESS",
password: "YOUR_CHATGPT_PASSWORD",
});
await api.initSession();
//👇🏻 sends the instruction for the domain name to ChatGPT
const getDomainName = await api.sendMessage(
`Can you generate a domain name for a website about: ${content}`
);
let domainName = getDomainName.response;
//👇🏻 sends the instruction for the prompt to ChatGPT
const generatePrompt = await api.sendMessage(
`I have a website for ${content}, and I want to generate a logo for it, can you generate a prompt for dall-e for me? make it long like 50 words, you don't need to tell me why you generated the prompt`
);
const diffusionPrompt = generatePrompt.response;
console.log({ domainName, diffusionPrompt });
} catch (err) {
console.error(err);
}
}
app.post("/api", async (req, res) => {
const { prompt } = req.body;
const result = await chatgptFunction(prompt);
res.json({ message: "Retrieved successfully!" });
});
上面的代码片段使用Puppeteer启动浏览器,并使您能够自动登录您的ChatGPT帐户。身份验证后,ChatGPT 处理请求并返回响应。
在下一节中,我将指导您如何将生成的提示发送到Stable Diffusion API。
如何与Stable Diffusion API 交互
要与Stable Diffusion API 交互,请通过运行以下命令重新启动 Web UI 进程:
cd stable-diffusion-webui
./webui.sh --api
可以在以下位置查看可用的 API 终结点 我们将使用该终结点进行文本到图像的转换。http://127.0.0.1:7860/docs``/sdapi/v1/txt2img
向端点发出 POST 请求,并将生成的提示作为有效负载。/sdapi/v1/txt2img
async function chatgptFunction(content) {
try {
const api = new ChatGPTAPIBrowser({
email: "asaoludavid234@yahoo.com",
password: "davidasaolu",
});
await api.initSession();
const getDomainName = await api.sendMessage(
`Can you generate a domain name for a website about: ${content}`
);
let domainName = getDomainName.response;
const generatePrompt = await api.sendMessage(
`I have a website for ${content}, and I want to generate a logo for it, can you generate a prompt for dall-e for me? make it long like 50 words, you don't need to tell me why you generated the prompt`
);
const diffusionPrompt = generatePrompt.response;
//👇🏻 Makes a POST request via Axios with the prompt as the payload
const request = await axios.post("http://127.0.0.1:7860/sdapi/v1/txt2img", {
prompt: diffusionPrompt,
});
//👇🏻 returns the generated logo and the domain name
let logoImage = await request.data.images;
return { logoImage, domainName };
} catch (err) {
console.error(err);
}
}
从上面的代码片段中,端点接受称为 prompt 的必需参数 - 要生成的图像的文本说明。/sdapi/v1/txt2img
更新 Node.js 服务器上的端点以保存结果并将其发送到 React.js 应用程序。/api
//👇🏻 holds the results
const database = [];
app.post("/api", async (req, res) => {
const { prompt } = req.body;
const result = await chatgptFunction(prompt);
//👇🏻 saves the result to the database array
database.push(result);
//👇🏻 return the result as a response
res.json({ message: "Retrieved successfully!", result: database });
});
使用 React 应用程序显示结果
更新函数以接收来自服务器的响应。sendDescription
//👇🏻 React state that holds the result
const [result, setResult] = useState([]);
async function sendDescription() {
try {
const request = await fetch("http://localhost:4000/api", {
method: "POST",
body: JSON.stringify({
prompt: description,
}),
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
});
const res = await request.json();
if (res.message) {
//👇🏻 update the loading and result states
setLoading(false);
setResult(res.result);
}
} catch (err) {
console.error(err);
}
}
创建一个加载组件,每当请求挂起时都会向用户显示该组件。
import React from "react";
const Loading = () => {
return (
<div className='loading'>
<h1>Loading, please wait...</h1>
</div>
);
};
export default Loading;
添加下面的代码片段,以便在请求挂起时显示组件。
if (loading) return <Loading />;
更新组件以呈现生成的结果,如下所示。
return (
<div className='app'>
<h1>Website Idea Generator</h1>
<form method='POST' onSubmit={handleSubmit}>
<label htmlFor='description'>Enter the description</label>
<textarea
name='description'
rows={6}
value={description}
onChange={(e) => setDescription(e.target.value)}
/>
<button>GENERATE</button>
</form>
<div className='result__container'>
{result.length > 0 &&
result.map((item, index) => (
<div key={index}>
<img
src={`data:image/png;base64,${item.logoImage}`}
alt={item.domainName}
className='image'
/>
<p>Domain: {item.domainName}</p>
</div>
))}
</div>
</div>
);
上面的代码片段显示了为各种请求生成的徽标和域名。恭喜!🎉你已完成本教程的项目。
以下是鸡尾酒网站获得的结果示例:
结论
到目前为止,您已经了解了:
- 什么是Stable Diffusion,
- 如何在您的计算机上安装和设置Stable Diffusion
- 如何从 Node.js 应用程序向 ChatGPT 发送消息,以及
- 如何通过Stable Diffusion API 从文本生成图像。
本教程将引导您完成一个可以使用Stable Diffusion和 ChatGPT 构建的应用程序示例。这些AI技术可用于创建在各个领域有用的强大应用程序。
本教程的源代码可在此处获得:
感谢您的阅读!
帮帮我!
如果你觉得这篇文章对你有帮助,如果你能给我们一颗星,我会非常高兴!并在评论❤️中让我知道
本文正在参加 人工智能创作者扶持计划