用Node.js开发基于稳定扩散的AI应用

news2024/11/16 3:14:38

在本文中,我们将介绍如何构建一个 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 python@3.10 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 (
        <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;

在这里插入图片描述

5、设置 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。

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

//In server/package.json

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

恭喜! 你现在可以使用以下命令启动服务器:

npm start

6、如何在 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 并生成域名和稳定扩散提示。

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。

7、如何与稳定扩散 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 端点接受一个名为提示的必需参数 - 要生成的图像的文本描述。

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

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

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

以下是鸡尾酒网站获得的结果示例:
在这里插入图片描述

9、结束语

到目前为止,你已经学会了:

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

本教程的源代码可在 github 获取。


原文链接:Node.js开发稳定扩散应用 — BimAnt

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1116353.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于GRU的 电影评论情感分析 - python 深度学习 情感分类 计算机竞赛

文章目录 1 前言1.1 项目介绍 2 情感分类介绍3 数据集4 实现4.1 数据预处理4.2 构建网络4.3 训练模型4.4 模型评估4.5 模型预测 5 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于GRU的 电影评论情感分析 该项目较为新颖&#xff0c;适合作为竞…

Hadoop3教程(二十六):(生产调优篇)NameNode核心参数配置与回收站的启用

文章目录 &#xff08;143&#xff09;NameNode内存配置&#xff08;144&#xff09;NN心跳并发配置&#xff08;145&#xff09;开启回收站参考文献 &#xff08;143&#xff09;NameNode内存配置 每个文件块&#xff08;的元数据等&#xff09;在内存中大概 占用150byte&…

Android 12.0 Launcher3定制化功能之抽屉式(双层)app列表排序功能实现

1.概述 在12.0的系统开发中,在定制Launcher3的开发中,对于抽屉式即双层桌面的workspace的app列表排序的功能,也是常有的需求,把常用的app图标放在前面,其他的可以放在列表后面做个整体的排序,这就需要了解app列表排序的流程,然后根据需求来实现功能 如图: 2.Launcher3 …

并发编程-延时队列DelayQueue

数据结构学习网站&#xff1a; Data Structure Visualization 思维导图 DelayQueue &#xff08;延时队列&#xff09; DelayQueue 是一个支持延时获取元素的阻塞队列 &#xff0c; 内部采用优先队列 PriorityQueue 存储元素&#xff0c;同时元素必须实现 Delayed 接口&#x…

Elasticsearch 8.X 分词插件版本更新不及时解决方案

1、关于 Elasticsearch 8.X IK 分词插件相关问题 球友在 ElasticSearch 版本选型问题中提及&#xff1a;如果要使用ik插件&#xff0c;是不是就使用目前最新的IK对应elasticsearch的版本“8.8.2”&#xff1f; https://github.com/medcl/elasticsearch-analysis-ik/releases/ta…

C++入门3+类和对象上

C入门3类和对象上 一.内联函数1.宏函数的缺点2.宏函数的优点3.内联函数的语法4.内联函数的优缺点5.内联函数的使用条件6.内联函数的展开7.内联函数的一大注意事项1.内联函数声明跟定义分离2.内联函数声明跟定义分离的"奇怪"现象 二.C11对于C语法的补充1.auto关键字1.…

【Nginx34】Nginx学习:安全链接、范围分片以及请求分流模块

Nginx学习&#xff1a;安全链接、范围分片以及请求分流模块 又迎来新的模块了&#xff0c;今天的内容不多&#xff0c;但我们都进行了详细的测试&#xff0c;所以可能看起来会多一点哦。这三个模块之前也从来都没用过&#xff0c;但是通过学习之后发现&#xff0c;貌似还都挺有…

python模块之feapder 爬虫框架

一、简介 官网&#xff1a;https://feapder.com/#/ feapder是一款上手简单&#xff0c;功能强大的Python爬虫框架&#xff0c;内置AirSpider、Spider、TaskSpider、BatchSpider四种爬虫解决不同场景的需求&#xff0c;但像任何工具一样&#xff0c;它也有其优点和缺点。以下是…

如何利用考培系统进行个性化学习和评估

考培系统作为一种现代化的学习和评估工具&#xff0c;可以为学生提供个性化的学习和评估服务。它利用先进的技术和算法&#xff0c;根据学生的学习情况和需求&#xff0c;为其量身定制学习计划&#xff0c;并提供相应的评估反馈。 1. 个性化学习 考培系统通过分析学生的学习情…

QML(25)——文本输入框组件的区别(TextField TextInput TextArea TextEdit)

目录 效果展示适用场景文本组件TextLabelText和Label的区别 单行文本输入框TextFieldTextInputTextField 和 TextInput的区别 多行文本输入框TextAreaTextArea 和 TextEdit 的区别 效果展示 适用场景 场景组件属性短文本Text长文本 末尾省略Textelide: Text.ElideRight文本设置…

通用FIFO设计深度8宽度64,verilog仿真,源码和视频

名称&#xff1a;通用FIFO设计深度8宽度64&#xff0c;verilog仿真 软件&#xff1a;Quartus 语言&#xff1a;verilog 本代码为FIFO通用代码&#xff0c;其他深度和位宽可简单修改以下参数得到 reg [63:0] ram [7:0];//RAM。深度8&#xff0c;宽度64 代码功能&#xff1a…

ArmSoM-RK3588编解码之mpp解码demo解析:mpi_dec_test

1. 简介 [RK3588从入门到精通] 专栏总目录 mpi_dec_test 是rockchip官方解码 demo 本篇文章进行mpi_dec_test 的代码解析&#xff0c;解码流程解析 2. 环境介绍 硬件环境&#xff1a; ArmSoM-W3 RK3588开发板 软件版本&#xff1a; OS&#xff1a;ArmSoM-W3 Debian11 3.…

低代码助力软件开发

低代码开发工具正在日益变得强大&#xff0c;它正不断弥合着前后端开发之间的差距。对于后端来说&#xff0c;基于低代码平台开发应用时&#xff0c;完全不用担心前端的打包、部署等问题&#xff0c;也不用学习各种框架&#xff08;Vue、React、Angular等等&#xff09;&#x…

GO 语言如何用好变长参数?

函数重载 对于函数重载相信编码过的 xdm 肯定不会陌生&#xff0c;函数重载就是在同一个作用域内定义多个具有相同名称但参数列表不同的函数 此处的参数列表不同&#xff0c;可以是参数的类型不同&#xff0c;参数的个数不同 那么我们一起分别来看看 C 语言&#xff0c;C 语…

物联网专业前景怎么样?

物联网专业前景怎么样&#xff1f; 物联网专业在当今技术发展迅速的背景下具有广阔的前景。以下是物联网专业的一些优势和就业前景&#xff1a; 1.市场需求大&#xff1a;物联网作为人工智能、云计算和大数据等技术的结合&#xff0c;已经成为许多行业的核心需求。各行各业都需…

【智能指针】

目录&#xff1a; 前言智能指针&#xff08;一&#xff09;智能指针初始了解内存泄漏1. 内存泄漏分类2. 如何检测内存泄漏3. 如何避免内存泄漏使用智能指针之前&#xff0c;异常安全的处理 &#xff08;二&#xff09;智能指针实现既原理智能指针RAII使用智能指针之后&#xff…

060:mapboxGL点击某处,通过flyTo,以动画的形式聚焦到此点

第060个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+mapbox中点击某处,通过flyto,以动画的形式聚焦到此点。这里用到了flyTo的方法,里面可以设置bearing,zoom,pitch等众多的属性内容。 直接复制下面的 vue+mapbox源代码,操作2分钟即可运行实现效果 文章目录 示…

数据结构与算法-(10)---列表(List)

&#x1f308;write in front&#x1f308; &#x1f9f8;大家好&#xff0c;我是Aileen&#x1f9f8;.希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流. &#x1f194;本文由Aileen_0v0&#x1f9f8; 原创 CSDN首发&#x1f412; 如…

Linux 最大可以打开多少文件描述符?

Linux 最大可以打开多少文件描述符&#xff1f; 在日常开发中&#xff0c;对文件的操作可谓是再寻常不过的意见事情。那么你是否有这样一个疑问&#xff0c; 我最多可以打开多少个文件呢&#xff1f; 在Linux系统中&#xff0c;当某个程序打开文件时&#xff0c;内核返回相应…

SQL查询命令互转vba格式

最近搞个Excel的vba查询数据库&#xff0c;发现vba有代码行长度限制需要转换下就弄了这个&#xff0c;布局和功能暂且这样了&#xff0c;哪位大佬如果有兴趣的可以再美化下&#xff01; 这次更新了SQL命令互转VBA格式&#xff0c; SQL原始格式要分行的不能一坨贴进去&#xff0…