使用 ChatGPT 、Stable Diffuison、React和NodeJS构建网站图库

news2024/12/26 11:46:50

本文译者为360奇舞团前端开发工程师
原文标题:Building a website gallery with ChatGPT, Stable Diffusion, React and NodeJS
原文作者:Nevo David
原文地址:https://javascript.plainenglish.io/building-a-website-gallery-with-chatgpt-stable-diffusion-react-and-nodejs-afe8cdd9567a

1480ff8269460701d1eddb7211fb22da.jpeg

摘要

在本文中,您将学习如何构建一个 Web 应用程序,该应用程序根据你提供的网站描述,使用 ChatGPT 和 Stable Diffusion ,生成图标和合适的域名。

简介

人工智能正在接管世界。这些技术每天都在震撼着我们的世界:ChatGPT 和 Stable Diffusion。

ChatGPT 使用其 GPT3.5 模型回答世界上的任何问题。

Stable Diffusion是一个文本转图片的模型,可以将任何文本转换为图片。

结合使用这两种技术是人工智能的未来。

在本文中,我将向您展示如何通过结合两者来创建整个网站品牌。

我真的很兴奋关于这个技术🤩

ba8d6a1a93f79121ebd63785822c4fe9.jpeg

什么是 Stable Diffusion?

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

ChatGPT也是OpenAI训练的一个AI语言模型,用于生成文本以类似人类的对话方式与用户互动。用户可以在几秒钟内提交请求,并从历史、科学、数学和当前事件等广泛的主题中获得信息或问题的答案。

在本文的最后,你将学到如何使用 Stable Diffusion WebUI从文本创建图像,以及如何使用Node.js应用程序向ChatGPT发送消息。

安装和运行稳定版的 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-based:

sudo apt install wget git python3 python3-venv

Red Hat-based:

sudo dnf install wget git python3

Arch-based:

sudo pacman -S wget git python3
  • 通过运行以下命令克隆 Web UI 库

git clone https://github.com/AUTOMATIC1111/stable-diffusion-webui
  • 我们需要下载稳定版本的Stable Diffusion 模型(大文件),然后cd进入到stable-diffusion-webui/models/Stable-diffusion文件夹。

cd stable-diffusion-webui/models/Stable-diffusion

下载此模型-对于本次的示例我们使用的是Stable Diffusion版本,但是你可以随意下载你想要的其他版本。

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 model.ckpt
  • 进入到 stable-diffusion-webui 文件夹并且运行web UI工程,创建虚拟环境并安装依赖项。

cd stable-diffusion-webui
./webui.sh
  • 访问本地URL— http://127.0.0.1:7860以通过其用户界面与Web UI交互。

    54f3f34903344ecc7931e3f9996143e9.jpeg
  • 在之后要重新启动 Web UI 进程,请进入到终端上的 stable-diffusion-webui 文件夹并运行命令 ./webui.sh。如果要使用Web UI API,需要在命令中添加API标志./webui.sh --api

构建web应用程序

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

使用下面的代码为web应用程序创建项目的文件夹:

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

设置 React 应用程序

通过命令进入到client文件夹,然后创建一个新的React.js项目。

cd client
npx create-react-app ./

从React程序中删除冗余的文件,比如logo和测试文件,并且更新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;
c573c3ec4e9ebf0c64642717cb6dcd0a.jpeg

设置Node.js服务器

使用命令行终端进入到server文件夹创建一个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 library、 Puppeteer。ChatGPT API使用Puppeteer作为一个可选的对等依赖,以自动绕过Cloudflare的保护。

npm install chatgpt puppeteer axios

要在 server/index.js 文件中使用 ChatGPT API,您需要对该文件进行配置,以使用requireimport 关键词来导入库。 因此,更新 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文件的脚本列表中添加start命令来配置Nodemon。下面的代码片段使用Nodemon启动服务器。

//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的cookies发送消息。

你在一节中已经安装了库,接下来在index.js文件中导入ChatGPT API 库如下所示,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 应用程序中添加一个加载状态,用于保存请求状态,并在提交表单后调用async函数。

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 处理请求并返回响应信息。

在下面的部分,我将指导你如何将ChatGPT生成的提示发送到Stable Diffusion API。

如何与 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端点进行文本到图像的转换。

dc881755442e91a8eeb170d95dbd09af.jpeg

使用生成的提示作为payload向 /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 应用程序。

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

上面的代码展示为各样的请求生成图标和域名,恭喜!🎉 你完成了本项目的教程。

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

06f7904e9b438002c517933f3c6222df.jpeg

结论:

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

  • 什么是Stable Diffusion,

  • 如何在你的电脑上安装和配置Stable Diffusion

  • 如何从Node.js 应用发送消息给ChatGPT

  • 如何通过Stable Diffusion API 从文本生成图像。

本教程带领你完成一个应用程序示例,你可以使用Stable Diffusion和ChatGPT构建应用程序,这些AI技术可以被应用在各个领域创建强大的应用程序。

这个教程的源代码在这里:

https://github.com/novuhq/blog/tree/main/webapp-with-stable-diffusion-and-chatgpt

感谢你的阅读!

- END -

关于奇舞团

奇舞团是 360 集团最大的大前端团队,代表集团参与 W3C 和 ECMA 会员(TC39)工作。奇舞团非常重视人才培养,有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择,并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。

b553f8dd1162812e0efd3b9200d5a696.png

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

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

相关文章

Apollo Planning规划算法仿真调试(15):使用Vscode断点调试apollo的方法更新版

前言 使用Vscode断点调试apollo的方法之前在该专栏写过一篇分享,后台很多粉丝留言希望写的更详细一点,所以更新一版,尽量将配置过程详细描述,并且附上完整的配置文档。 Vscode 作为轻量化的调试工具深受广大开发者的青睐,虽然大家都用它来看新闻逛论坛炒股,但是用它开发…

【郭东白架构课 模块一:生存法则】01|模块导学:是什么在影响架构活动的成败?

你好&#xff0c;我是郭东白。这节课是我们模块一的导入部分&#xff0c;我会先来介绍模块的主要内容&#xff0c;以及为什么我要讲生存法则这个话题。 一名软件架构师要为相对复杂的业务制定&#xff0c;并且引导实施一个结构化的软件方案。这个发现最终方案和推动实施的过程&…

智加科技上市箭在弦上,头部自动驾驶技术企业何去何从?

/ 导读 /受禾赛科技美股上市成功的影响&#xff0c;中国商用车自动驾驶技术公司智加科技也传出了即将拆分在美股上市的消息。其中&#xff0c;智加科技的中国部分据传将被满帮收购&#xff0c;并且将并入自动驾驶卡车公司挚途科技。至于美国部分&#xff0c;将寻求独立上市。对…

python切片总算搞明白了

不会python已久矣&#xff01; 简单切片 简单切片指的是这样的切片形式&#xff1a;a[start:stop]&#xff0c; 左闭右开 负索引可以直接代表那个值 >>> a[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]>>> a[2:3][2]>>> a[5:9][5, 6, 7, 8]>>> a[5…

电商导购CPS,拼多多(多多进宝)如何跟单实现用户和订单绑定

前言 大家好&#xff0c;我是小悟 做过自媒体的小伙伴都知道&#xff0c;不管是发图文还是发短视频&#xff0c;直播也好&#xff0c;可以带货。在你的内容里面挂上商品&#xff0c;你自己都不需要囤货&#xff0c;如果用户通过这个商品下单成交了&#xff0c;自媒体平台就会…

Cortex-M0中断控制和系统控制

目录1.NVIC和系统控制块特性2.中断使能和清除使能3.中断挂起和清除挂起4.中断优先级5.中断控制的通用汇编代码使能和禁止中断设置和清除中断挂起状态设置中断优先级6.异常屏蔽寄存器&#xff08;PRIMASK&#xff09;7.中断输入和挂起行为8.中断等待9.系统异常的控制寄存器10.系…

JuiceFS 在火山引擎边缘计算的应用实践

火山引擎边缘云是以云计算基础技术和边缘异构算力结合网络为基础&#xff0c;构建在边缘大规模基础设施之上的云计算服务&#xff0c;形成以边缘位置的计算、网络、存储、安全、智能为核心能力的新一代分布式云计算解决方案。边缘存储主要面向适配边缘计算的典型业务场景&#…

Python seek()和tell()函数详解

在讲解 seek() 函数和 tell() 函数之前&#xff0c;首先来了解一下什么是文件指针。我们知道&#xff0c;使用 open() 函数打开文件并读取文件中的内容时&#xff0c;总是会从文件的第一个字符&#xff08;字节&#xff09;开始读起。那么&#xff0c;有没有办法可以自定指定读…

分布式事务实现机制及二阶段提交

注&#xff1a;本文章引自终于把分布式事务讲明白了&#xff01; 分布式事务 分布式事务是指在分布式环境下事务&#xff0c;一个事务由多个数据库节点共同完成。分布式事务也必须要保证事务的ACID的特性。 实现分布式事务原子性的通常做法就是采用两阶段提交协议&#xff0c…

07- Rossmann商店销售预测 (Xgboost集成算法) (项目七)

查看数据是否为空: train.isnull().sum()查看特征元素: train[StateHoliday].unique() # array([0, a, b, c], dtypeobject)绘制热力图: sns.heatmap(df_train.corr(),cmap RdYlGn_r,annotTrue,vmin -1,vmax1)合并商店信息和销售数据: train pd.merge(train, store, on …

高校房产管理系统有哪些管理功能范围?

数图互通高校房产管理系统是基于公司自主研发的FMCenterV5.0平台&#xff0c;是针对中国高校房产的管理特点和管理要求&#xff0c;研发的一套标准产品&#xff1b;通过在中国100多所高校的成功实施和迭代&#xff0c;形成了一套成熟、完善、全生命周期的房屋资源管理解决方案。…

世界上最健康的程序员作息表!「值得一看」

昨晚看了一篇“传说中”的“世界上最健康的作息时间表”&#xff0c;开始纠结自己还要不要5点半起床。 都说程序员这一行&#xff0c;猝死概率极高&#xff0c;究其原因还是加班太狠、作息不规律、缺乏运动… 今天和大家分享一下这篇文章&#xff0c;还是非常值得参考的&#…

基于Java+SpringBoot+Vue+Uniapp前后端分离商城系统设计与实现

博主介绍&#xff1a;✌全网粉丝3W&#xff0c;全栈开发工程师&#xff0c;从事多年软件开发&#xff0c;在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战✌ 博主作品&#xff1a;《微服务实战》专栏是本人的实战经验总结&#xff0c;《Spring家族及…

PyQt5 界面预览工具

简介 一款为了预览PyQt5设计的UI界面而开发的工具&#xff0c;使用时需要结合PyCharm同时使用。 下载 PyQt5界面预览工具 参数说明 使用配置 启动PyCharm&#xff0c;找到File -> Settings&#xff0c;打开 找到Tools -> External Tools点击打开&#xff0c;在新界面…

GuLi商城-SpringCloud Alibaba-Nacos注册中心

简介&#xff1a; Nacos&#xff08;Dynamic Naming and Configuration Service&#xff09;是构建以 “服务” 为中心的现代应用架构 (例 如微服务范式、云原生范式) 的服务基础设施。致力于服务发现、配置和管理&#xff0c;且提供了一组简单 易用的特性集。让微服务的发现…

GEE学习笔记 八十一:【GEE之Python版教程十二】

这一节介绍一下日期类&#xff0c;那么GEE基础的类型基本上介绍完成。后续开始介绍GEE在遥感GIS处理上的一些API内容&#xff0c;比如矢量数据、栅格数据处理等。 这段代码是在程序之前必须执行的&#xff0c;用来注册GEE。 import ee ee.Initialize() 1、日期类API 首先看一…

C语言-文件操作-10

题目&#xff1a; 修改下列程序&#xff0c;用命令行界面代替交互式界面 #include <stdio.h> #include <stdlib.h> #include <string.h> #define BUFSIZE 4096 #define SLEN 81 void append(FILE * source,FILE * dest); char * s_gets(char * st,int n); i…

Spring3定时任务

简介 Spring 内部有一个 task 是 Spring 自带的一个设定时间自动任务调度&#xff0c;提供了两种方式进行配置&#xff0c;一种是注解的方式&#xff0c;而另外一种就是 XML 配置方式了;注解方式比较简洁&#xff0c;XML 配置方式相对而言有些繁琐&#xff0c;但是应用场景的不…

借助 APISIX Ingress,实现与注册中心的无缝集成

作者张晋涛&#xff0c;API7.ai 云原生技术专家&#xff0c;Apache APISIX PMC 成员&#xff0c;Apache APISIX Ingress Controller 项目维护者。 原文链接 云原生场景下是否需要服务发现 背景 微服务架构是当前最为流行的应用架构之一。 应用被拆分为多个服务组件&#xff…

流批一体架构在快手的实践和思考

摘要&#xff1a;本文整理自快手技术专家、Apache Flink & Apache Calcite Committer 张静&#xff0c;在 FFA 流批一体专场的分享。本篇内容主要分为四个部分&#xff1a;Flink 在快手的发展流批一体在快手的规划第一阶段&#xff08;加强批能力&#xff09;的进展第二阶段…