让网站运营更简单
让搜索引擎更喜欢的网站
立即咨询
福利，定制网站送小程序， 名额有限，先到先得
大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！
今天给大家带来的是360奇舞团前端开发工程师翻译的一篇文章《使用 ChatGPT 、Stable Diffuison、React和NodeJS构建网站图库 》，原文链接在文末话不多说，直接开始！摘要在本文中，您将学习如何构建一个 Web 应用程序，该应用程序根据你提供的网站描述，使用 ChatGPT 和 Stable Diffusion ，生成图标和合适的域名。
简介人工智能正在接管世界这些技术每天都在震撼着我们的世界：ChatGPT 和 Stable DiffusionChatGPT 使用其 GPT3.5 模型回答世界上的任何问题Stable Diffusion是一个文本转图片的模型，可以将任何文本转换为图片。
结合使用这两种技术是人工智能的未来。在本文中，我将向您展示如何通过结合两者来创建整个网站品牌。我真的很兴奋关于这个技术
什么是 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:brewinstall。
cmakeprotobufrustpython@3.10 git wgetDebian-based:sudo apt install wget git python3 python3-venvRed Hat-based:
sudo dnf install wget git python3Arch-based:sudo pacman -S wget git python3通过运行以下命令克隆 Web UI 库git clone
OMATIC1111/stable-diffusion-webui我们需要下载稳定版本的Stable Diffusion 模型（大文件），然后cd进入到stable-diffusion-webui/models/Stable-diffusion
文件夹cd stable-diffusion-webui/models/Stable-diffusion下载此模型-对于本次的示例我们使用的是Stable Diffusion版本，但是你可以随意下载你想要的其他版本。
n/v1-5-pruned-emaonly.ckpt将模型从v1–5-pruned-emaonly.ckpt 重命名为model.ckpt
mvv1–5-pruned-emaonly.ckptmodel.ckpt进入到 stable-diffusion-webui 文件夹并且运行web UI工程，创建虚拟环境并安装依赖项cd stable-diffusion-webui ./webui.sh。
ui 文件夹并运行命令 。
./webui.sh如果要使用Web UI API，需要在命令中添加API标志./webui.sh --api构建web应用程序在本节中，我将指导你创建web应用程序的项目环境，我们将使用React.js做前端，Node.js做后端服务器。
使用下面的代码为web应用程序创建项目的文件夹：mkdirstable-diffusion-appcdstable-diffusion-appmkdirclient server设置 React 应用程序
通过命令进入到client文件夹，然后创建一个新的React.js项目cdclientnpxcreate-react-app ./从React程序中删除冗余的文件，比如logo和测试文件，并且更新App.js。
文件以显示”Hello World“，如下所示：functionApp() { return (
Hello World!
); * { 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: 5px0px; box-shadow: 02px8px0rgba(99, 99, 99, 0.2); } button { margin-top:
pointer; font-weight
: bold; border: none; border-radius: 5px; outlin
: #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: const。
App = () => { const [description, setDescription] = useState(""); const handleSubmit = (e) =>
{ e.preventDefault(); console.log({ description }); setDescription(""); };
return (
onChange={(e) => setDescription(e.target.value)} /> GENERATE
扫一扫，关注我们
