开发AI驱动的Web应用

NSDT工具推荐： Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器 - REVIT导出3D模型插件 - 3D模型语义搜索引擎 - Three.js虚拟轴心开发包 - 3D模型在线减面 - STL模型在线切割

AI正在接管世界。这些技术每天都在震撼着我们的世界：ChatGPT 和 Stable Diffusion。ChatGPT 可以使用其 GPT3.5 模型回答世界上的任何问题。Stable Diffusion 是一种文本转图像模型，可以将任何文本转换为图片。结合这两种技术是人工智能的未来。

在本文中，我将向你展示如何通过结合两者来创建一个Web应用。使用 ChatGPT 和 Stable Diffusion，可以为你提供的任何网站描述生成徽标和合适的域名。

1、Stable Diffusion和ChatGPT

Stable Diffusion 是一种文本到图像的潜在扩散模型，使用户能够根据给定的文本输入在几秒钟内生成图像。它还用于诸如内画、外画和生成图像到图像的转换等过程。

ChatGPT 是一种由 OpenAI 训练的 AI 语言模型，可以生成文本并以类似人类的对话方式与用户进行交互。用户可以在几秒钟内提交请求并获得信息或问题的答案，主题范围广泛，例如历史、科学、数学和时事。

在本文末尾，你将了解如何使用 Stable Diffusion WebUI 从文本创建图像，以及如何从 Node.js 应用程序向 ChatGPT 发送消息。

2、安装和运行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 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

通过运行以下命令克隆 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 重命名为 model.ckpt
mv v1-5-pruned-emaonly.ckpt 模型.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。

3、构建网络应用程序

在本节中，我将指导你为 Web 应用程序创建项目环境。我们将在前端使用 React.js，在后端服务器使用 Node.js。

通过运行以下命令为 Web 应用程序创建项目文件夹：

mkdir stable-diffusion-app
cd stable-diffusion-app
mkdir client server

3.1 设置 React 应用程序

在终端进入客户端文件夹并创建一个新的 React.js 项目。

cd client
npx create-react-app ./

从 React 应用程序中删除多余的文件，例如徽标和测试文件，并更新 App.js 文件以显示“Hello World”，如下所示。

function App() {
    return (
        <div>
            <p>Hello World!</p>
        </div>
    );
}
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 (
        <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;

4.2 设置 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 工具变化。

创建一个 index.js 文件——Web 服务器的入口点。

touch index.js

使用 ExpressJS 设置 Node.js 服务器。当你在浏览器中访问 http://localhost:4000/api 时，下面的代码片段会返回一个 JSON 对象。

//👇🏻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

要在 server/index.js 文件中使用 ChatGPT API，需要将文件配置为使用 require 和 import 关键字来导入库。

因此，更新 server/package.json 文件以包含 type 关键字。

{ "type": "module" }

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

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

完成最后两个步骤后，现在可以在 index.js 文件中使用 ChatGPT。

通过将 start 命令添加到 package.json 文件中的脚本列表来配置 Nodemon。下面的代码片段使用 Nodemon 启动服务器。

//In server/package.json

"scripts": {
    "test": "echo \\"Error: no test specified\\" && exit 1",
    "start": "nodemon index.js"
  },

恭喜！现在可以使用以下命令启动服务器。

npm start

5、Node.js 应用与 ChatGPT 通信

在本节中，我们将学习如何通过非官方的 ChatGPT 库从 Node.js 服务器与 ChatGPT 通信。

该库使用基于浏览器的全自动解决方案，使我们能够进入——这意味着它执行完全的浏览器自动化，使我们能够登录 OpenAI 网站、解决验证码并通过 OpenAI cookie 发送消息。

你已经在上一节中安装了库；接下来，将 ChatGPT API 库导入 index.js 文件，如下所示。 ChatGPT API 使用 Puppeteer 作为可选的对等依赖项来自动绕过 Cloudflare 保护。

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

更新 /api 端点以将描述发送到 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 启动浏览器并使你能够自动登录到 ChatGPT 帐户。身份验证后，ChatGPT 处理请求并返回响应。

在接下来的部分中，我将指导你如何将生成的提示发送到 Stable Diffusion API。

6、如何与 Stable Diffusion API 交互

要与 Stable Diffusion API 交互，请通过运行以下命令重新启动 Web UI 进程：

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

你可以在 http://127.0.0.1:7860/docs 查看可用的 API 端点我们将使用 /sdapi/v1/txt2img 端点进行文本到图像的转换。

使用生成的提示作为负载向 /sdapi/v1/txt2img 端点发出 POST 请求。

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 端点接受一个名为 prompt 的必需参数——要生成的图像的文本描述。

更新 Node.js 服务器上的 /api 端点以保存结果并将其发送到 React.js 应用程序。

//👇🏻 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 });
});

6、使用 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);
    }
}

创建一个 Loading 组件，只要请求挂起，它就会显示给用户。

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

面的代码片段显示了为各种请求生成的徽标和域名。恭喜！🎉你已经完成了本教程的项目。

以下是鸡尾酒网站获得的结果示例：

7、结束语

到目前为止，你已经学会了：

什么是稳定扩散，
如何在你的计算机上安装和设置 Stable Diffusion
如何从 Node.js 应用程序向 ChatGPT 发送消息，以及
如何通过 Stable Diffusion API 从文本生成图像。

本教程引导你完成了一个应用程序示例，你可以使用 Stable Diffusion 和 ChatGPT 构建该应用程序。这些 AI 技术可用于创建适用于各个领域的强大应用程序。

本教程的源代码可在此处获得。

原文链接：Building a website gallery with ChatGPT, Stable Diffusion, React and NodeJS

bBimAnt翻译整理，转载请标明出处

开发AI驱动的Web应用

1、Stable Diffusion和ChatGPT

2、安装和运行Stable Diffusion Web UI

3、构建网络应用程序

3.1 设置 React 应用程序

4.2 设置 Node.js 服务器

5、Node.js 应用与 ChatGPT 通信

6、如何与 Stable Diffusion API 交互

6、使用 React 应用程序显示结果

7、结束语

admin

GPT-3问答机器人实战

幻觉-ChatGPT致命缺陷

1、Stable Diffusion和ChatGPT

2、安装和运行Stable Diffusion Web UI

3、构建网络应用程序

3.1 设置 React 应用程序

4.2 设置 Node.js 服务器

5、Node.js 应用与 ChatGPT 通信

6、如何与 Stable Diffusion API 交互

6、使用 React 应用程序显示结果

7、结束语

GPT-3问答机器人实战

幻觉-ChatGPT致命缺陷

You might also like...

You might also like...