AI正在接管世界。這些技術(shù)每天都在震撼著我們的世界：ChatGPT 和 Stable Diffusion。ChatGPT 可以使用其 GPT3.5 模型回答世界上的任何問題。Stable Diffusion 是一種文本轉(zhuǎn)圖像模型，可以將任何文本轉(zhuǎn)換為圖片。結(jié)合這兩種技術(shù)是人工智能的未來。

AI驅(qū)動(dòng)的Web App開發(fā)實(shí)戰(zhàn)（ai驅(qū)動(dòng)是什么）

推薦：用 NSDT場(chǎng)景設(shè)計(jì)器快速搭建3D場(chǎng)景。

在本文中，我將向你展示如何通過結(jié)合兩者來創(chuàng)建一個(gè)Web應(yīng)用。使用 ChatGPT 和 Stable Diffusion，可以為你提供的任何網(wǎng)站描述生成徽標(biāo)和合適的域名。

AI驅(qū)動(dòng)的Web App開發(fā)實(shí)戰(zhàn)（ai驅(qū)動(dòng)是什么）

1、Stable Diffusion和ChatGPT

Stable Diffusion 是一種文本到圖像的潛在擴(kuò)散模型，使用戶能夠根據(jù)給定的文本輸入在幾秒鐘內(nèi)生成圖像。它還用于諸如內(nèi)畫、外畫和生成圖像到圖像的轉(zhuǎn)換等過程。

ChatGPT 是一種由 OpenAI 訓(xùn)練的 AI 語言模型，可以生成文本并以類似人類的對(duì)話方式與用戶進(jìn)行交互。用戶可以在幾秒鐘內(nèi)提交請(qǐng)求并獲得信息或問題的答案，主題范圍廣泛，例如歷史、科學(xué)、數(shù)學(xué)和時(shí)事。

在本文末尾，你將了解如何使用 Stable Diffusion WebUI 從文本創(chuàng)建圖像，以及如何從 Node.js 應(yīng)用程序向 ChatGPT 發(fā)送消息。

2、安裝和運(yùn)行Stable Diffusion Web UI

你可以在 Windows、Linux 和 Apple Silicon 上安裝 Stable Diffusion Web UI。在這里，我將指導(dǎo)你完成在 Apple Silicon 上的安裝。

前提條件：確保你的計(jì)算機(jī)上安裝了 Homebrew。它是一個(gè)軟件包，可讓你安裝 Apple 未提供的各種應(yīng)用程序。

打開一個(gè)新的終端窗口并運(yùn)行以下命令來安裝 WebUI 依賴項(xiàng)。

MAC：

brew install cmake protobuf rust python@3.10 git wget

Debian Linux：

sudo apt install wget git python3 python3-venv

Red Hat Linux：

sudo dnf install wget git python3

Arch Linux：

sudo pacman -S wget git python3

通過運(yùn)行以下命令克隆 Web UI 存儲(chǔ)庫：

git clone https://github.com/AUTOMATIC1111/stable-diffusion-webui

下載穩(wěn)定擴(kuò)散模型（大文件）。進(jìn)入目錄 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 重命名為 model.ckpt
mv v1-5-pruned-emaonly.ckpt 模型.ckpt

進(jìn)入 stable-diffusion-webui 文件夾并運(yùn)行 Web UI 項(xiàng)目以創(chuàng)建虛擬環(huán)境并安裝其依賴項(xiàng)。

cd stable-diffusion-webui./webui.sh

訪問本地 URL – http://127.0.0.1:7860 以通過其用戶界面與 Web UI 交互。

AI驅(qū)動(dòng)的Web App開發(fā)實(shí)戰(zhàn)（ai驅(qū)動(dòng)是什么）

要稍后重新啟動(dòng) Web UI 進(jìn)程，請(qǐng)?jiān)诮K端進(jìn)入 stable-diffusion-webui 文件夾并運(yùn)行命令 ./webui.sh。如果要使用Web UI API，使用命令 ./webui.sh –api。

3、構(gòu)建網(wǎng)絡(luò)應(yīng)用程序

在本節(jié)中，我將指導(dǎo)你為 Web 應(yīng)用程序創(chuàng)建項(xiàng)目環(huán)境。我們將在前端使用 React.js，在后端服務(wù)器使用 Node.js。

通過運(yùn)行以下命令為 Web 應(yīng)用程序創(chuàng)建項(xiàng)目文件夾：

mkdir stable-diffusion-appcd stable-diffusion-appmkdir client server

3.1 設(shè)置 React 應(yīng)用程序

在終端進(jìn)入客戶端文件夾并創(chuàng)建一個(gè)新的 React.js 項(xiàng)目。

cd clientnpx create-react-app ./

從 React 應(yīng)用程序中刪除多余的文件，例如徽標(biāo)和測(cè)試文件，并更新 App.js 文件以顯示“Hello World”，如下所示。

Function App() { return ( <div> <p>Hello World!</p> </div> );}export default App;

導(dǎo)航到 src/index.CSS 文件并復(fù)制下面的代碼。它包含設(shè)置此項(xiàng)目樣式所需的所有 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 文件以顯示允許你輸入建議的網(wǎng)站描述的輸入字段。

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;

AI驅(qū)動(dòng)的Web App開發(fā)實(shí)戰(zhàn)（ai驅(qū)動(dòng)是什么）

4.2 設(shè)置 Node.js 服務(wù)器

導(dǎo)航到終端中的服務(wù)器文件夾并創(chuàng)建一個(gè) package.JSON 文件。

cd server & npm init -y

安裝 Express、Nodemon 和 CORS 庫。

npm install express cors nodemon

ExpressJS 是一個(gè)快速、極簡(jiǎn)的框架，它提供了在 Node.js 中構(gòu)建 Web 應(yīng)用程序的多種功能，CORS 是一個(gè)允許不同域之間通信的 Node.js 包，而 Nodemon 是一個(gè)在檢測(cè)到文件后自動(dòng)重啟服務(wù)器的 Node.js 工具變化。

創(chuàng)建一個(gè) index.js 文件——Web 服務(wù)器的入口點(diǎn)。

touch index.js

使用 ExpressJS 設(shè)置 Node.js 服務(wù)器。當(dāng)你在瀏覽器中訪問 http://localhost:4000/api 時(shí)，下面的代碼片段會(huì)返回一個(gè) JSON 對(duì)象。

//index.jsconst 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 作為可選的對(duì)等依賴項(xiàng)來自動(dòng)繞過 Cloudflare 保護(hù)。

npm install chatgpt puppeteer axios

要在 server/index.js 文件中使用 ChatGPT API，需要將文件配置為使用 require 和 import 關(guān)鍵字來導(dǎo)入庫。

因此，更新 server/package.json 文件以包含 type 關(guān)鍵字。

{ "type": "module" }

在 server/index.js 文件的頂部添加下面的代碼片段。

import { createRequire } from "module";const require = createRequire(import.meta.url);//...other code statements

完成最后兩個(gè)步驟后，現(xiàn)在可以在 index.js 文件中使用 ChatGPT。

通過將 start 命令添加到 package.json 文件中的腳本列表來配置 Nodemon。下面的代碼片段使用 Nodemon 啟動(dòng)服務(wù)器。

//In server/package.json"scripts": { "test": "echo "Error: no test specified" && exit 1", "start": "nodemon index.js" },

恭喜！現(xiàn)在可以使用以下命令啟動(dòng)服務(wù)器。

npm start

5、Node.js 應(yīng)用與 ChatGPT 通信

在本節(jié)中，我們將學(xué)習(xí)如何通過非官方的 ChatGPT 庫從 Node.js 服務(wù)器與 ChatGPT 通信。

該庫使用基于瀏覽器的全自動(dòng)解決方案，使我們能夠進(jìn)入——這意味著它執(zhí)行完全的瀏覽器自動(dòng)化，使我們能夠登錄 OpenAI 網(wǎng)站、解決驗(yàn)證碼并通過 OpenAI cookie 發(fā)送消息。

你已經(jīng)在上一節(jié)中安裝了庫；接下來，將 ChatGPT API 庫導(dǎo)入 index.js 文件，如下所示。 ChatGPT API 使用 Puppeteer 作為可選的對(duì)等依賴項(xiàng)來自動(dòng)繞過 Cloudflare 保護(hù)。

import { ChatGPTAPIBrowser } from "chatgpt";

我們需要 ChatGPT 為用戶指定的任何描述生成域名，并為 Stable Diffusion API 創(chuàng)建提示。

因此，在服務(wù)器上創(chuàng)建一個(gè)路由來接受來自 React 應(yīng)用程序的描述。

app.post("/api", async (req, res) => { const { prompt } = req.body; console.log(prompt);});

在 React 應(yīng)用程序中創(chuàng)建一個(gè)函數(shù)，該函數(shù)在用戶提交表單后將描述發(fā)送到服務(wù)器上的 /api 端點(diǎn)

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); }}

在包含請(qǐng)求狀態(tài)的 React 應(yīng)用程序中添加一個(gè)加載狀態(tài)，并在提交表單后調(diào)用異步函數(shù)。

const [description, setDescription] = useState("");const [loading, setLoading] = useState(false);const handleSubmit = (e) => { e.preventDefault(); // calls the async function sendDescription(); setDescription(""); setLoading(true);};

更新 /api 端點(diǎn)以將描述發(fā)送到 ChatGPT 并生成域名并提示 Stable Diffusion。

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 啟動(dòng)瀏覽器并使你能夠自動(dòng)登錄到 ChatGPT 帳戶。身份驗(yàn)證后，ChatGPT 處理請(qǐng)求并返回響應(yīng)。

在接下來的部分中，我將指導(dǎo)你如何將生成的提示發(fā)送到 Stable Diffusion API。

6、如何與 Stable Diffusion API 交互

要與 Stable Diffusion API 交互，請(qǐng)通過運(yùn)行以下命令重新啟動(dòng) Web UI 進(jìn)程：

cd stable-diffusion-webui./webui.sh --api

你可以在 http://127.0.0.1:7860/docs 查看可用的 API 端點(diǎn)我們將使用 /sdapi/v1/txt2img 端點(diǎn)進(jìn)行文本到圖像的轉(zhuǎn)換。

AI驅(qū)動(dòng)的Web App開發(fā)實(shí)戰(zhàn)（ai驅(qū)動(dòng)是什么）

使用生成的提示作為負(fù)載向 /sdapi/v1/txt2img 端點(diǎn)發(fā)出 POST 請(qǐng)求。

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); }}

從上面的代碼片段中，/sdapi/v1/txt2img 端點(diǎn)接受一個(gè)名為 prompt 的必需參數(shù)——要生成的圖像的文本描述。

更新 Node.js 服務(wù)器上的 /api 端點(diǎn)以保存結(jié)果并將其發(fā)送到 React.js 應(yīng)用程序。

// holds the resultsconst 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 });});

6、使用 React 應(yīng)用程序顯示結(jié)果

更新 sendDescription 函數(shù)以接收來自服務(wù)器的響應(yīng)。

// React state that holds the resultconst [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); }}

創(chuàng)建一個(gè) Loading 組件，只要請(qǐng)求掛起，它就會(huì)顯示給用戶。

import React from "react";const Loading = () => { return ( <div className='loading'> <h1>Loading, please wait...</h1> </div> );};export default Loading;

添加下面的代碼片段以在請(qǐng)求掛起時(shí)顯示組件。

if (loading) return <Loading />;

更新組件以呈現(xiàn)如下所示生成的結(jié)果。

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>);

面的代碼片段顯示了為各種請(qǐng)求生成的徽標(biāo)和域名。恭喜！你已經(jīng)完成了本教程的項(xiàng)目。

以下是雞尾酒網(wǎng)站獲得的結(jié)果示例：

AI驅(qū)動(dòng)的Web App開發(fā)實(shí)戰(zhàn)（ai驅(qū)動(dòng)是什么）