前言
前几天，我体验了AI-Agents的国货圈。
一种软件程序，可以自主执行任务、与环境交互、做出决策并根据获得的信息采取行动。
您还可以创建自己的AIBot。这非常有趣，任何人都可以体验。
在体验过程中，我发现创建机器人时，需要输入机器人名称和相关描述，然后根据该内容生成头像。
这就是本文的由来。
实现
效果
前端
—html讲解
接下来我们就来解释一下这个效果是如何实现的
首先，通过bootstrap生成一个简单的表。
!DOCTYPE html
html lang=\’en\’
头
元字符集=\’UTF-8\’/
元名称=\’视口\’内容=\’宽度=设备宽度，初始比例=1.0\’/
titleAI生成头像/标题
关联
href=\’https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css\’
rel=\’样式表\’
/
风格
标识{
显示器： Flex。
}
形象标识{
显示：块；
宽度： 200 像素；
高度： 200 像素；
}
/风格
/头
身体
!– 网页布局–
div 类=\’容器\’
div 类=\’行\’
div 类=\’col-md-6col-md-offset-3\’
表单名称=\’徽标表单\’
div class=\’形成组\’
label for=\’titleInput\’机器人名称：/label
输入
类型=\’文本\’
类=\’表单控件\’
id=\’标题输入\’
名称=\’标题\’
placeholder=\’机器人名称\’
必要的
/
/div
div class=\’形成组\’
label for=\’descInput\’ 机器人介绍：/label
文本区域
类=\’表单控件\’
名称=\’描述\’
id=\’描述输入\’
placeholder=\’输入您的机器人简介\’
/文本区域
/div
div class=\’形成组\’
按钮type=\’submit\’ class=\’btn btn-primary\’ 生成图标/按钮
/div
/形状
/div
/div
div class=\’行\’ id=\’徽标\’
/div
/div
脚本
/剧本
/身体
/html
效果是：
这里我们介绍一下Bootstrap的CSS样式表。主要部分包含一行，分为两部分，包含机器人名称和简介的输入框以及生成的图标按钮。其他部分保留用于将显示生成的图标的区域。
—js讲解
脚本
const oForm=document.forms[\’logoForm\’];
const oLogo=document.getElementById(\’Logo\’);
oForm.addEventListener(\’提交\’, function (e) {
e.preventDefault();
const title=this[\’title\’].value.trim();
const desc=this[\’desc\’].value.trim();
//console.log(标题， 描述);
如果（标题）{
常数数据={
标题，
解释，
};
//发布提交表单
fetch(\’http://localhost:3000/标志\’, {
方法： ‘POST’,
标头： {
\’内容类型\’: \’application/json\’,
},
//请求正文字符串或文件二进制
body: JSON.stringify(数据),
})
.then((res)=res.json())
.then((数据)={
//控制台.log(数据);
if (data.code==200) {
const { 消息}=数据；
const oImg=document.createElement(\’img\’);
oImg.classList.add(\’col-md-6\’, \’col-md-offset-3\’);
oImg.src=消息；
//现在图像已加载，将其添加到页面中
oImg.onload=函数() {
oLogo.appendChild(oImg);
};
} 除此之外{
console.log(\’错误\’);
}
});
}
});
/剧本
首先，获取页面上的表单（logoForm）以及将显示生成的头像的区域（logo）。
接下来，将提交事件的侦听器添加到表单。提交表单时，它首先阻止默认提交行为，然后捕获表单中输入的机器人名称和推荐，并删除空格。如果机器人名称不为空，则数据将封装在对象中。
使用fetch 函数使用POST 方法向http://localhost:3000/logo 发送请求。请求正文是包含机器人名称和描述的JSON 数据。
收到响应后，将其解析为JSON 格式。如果响应code值为200（表示成功），则创建一个新的图像元素，设置其类名和源地址，如果code值不是200，则在图像加载后将其添加到徽标区域。控制站输出错误信息
后端(重点讲解)
首先，我们需要创建一个后端服务。
所以这里我们将使用koa框架来构建后端服务。 Koa 是一个基于Node.js 的Web 应用框架，是目前最流行、最简单的框架。
首先， npm i koa 安装依赖项。
从“koa”导入Koa。
现在就可以启动后端服务了
从“koa”导入Koa。
const app=new Koa();
//启动http服务3000端口
应用程序.listen(3000, ()={
console.log(\’服务器在http://localhost:3000 上运行\’);
});
接下来我们需要添加路由功能
使用npm i koa-router 安装依赖项
import Router from \’koa-router\’ //导入路由。
然后就可以使用路由功能了
从“koa”导入Koa。
import Router from \’koa-router\’ //导入路由。
const app=new Koa();
const Router=new Router();
//创建/logo 路由
router.post(\’/logo\’, async (ctx)={
console.log(\’标志\’);
ctx.body={
代码： 200，
msg: \’徽标\’,
};
})
//启动http服务3000端口
应用程序.listen(3000, ()={
console.log(\’服务器在http://localhost:3000 上运行\’);
});
您现在有了一个简单的/logo 路线。
但是当我通过前端访问这条路线时，我遇到了问题。
这是由于前端JS同源策略导致的跨域问题。同源是指协议、域名、端口都相同。如果两个URL 不具有完全相同的协议、域名或端口，则它们被视为具有不同的来源。
这里我们需要添加npm i @koa/cors 来解决这个问题。
项目中添加cors即可解决问题
从“@koa/cors”导入cors。
应用程序.use(cors());
但是，我需要获取访问参数。
因此，我引入了npm i @koa/bodyparser。
从\’@koa/bodyparser\’导入{bodyParser}；
app.use(bodyParser());
现在您可以从前端检索通过ctx.request.body 返回的数据。
接下来，我们需要添加并导入openai npm i openai 的依赖项。
从“openai”导入OpenAI。
同时使用dotenv管理openai密钥，安装npm i dotenv，并在同级目录下创建名为.env的目录。
插入钥匙
通过
import dotenv from \’dotenv\’;//管理键值
dotenv.config({
路径： ‘.env’,
});
//钥匙
process.env.OPENAI_KEY
就可以得到key的值了
接下来我们需要使用AI 创建窗口
const 客户端=新OpenAI({
apiKey: process.env.OPENAI_KEY，
BaseURL: \’https://api.gptsapi.net/v1\’,
});
您可以通过客户端发送指令。使用client.images.generate 发送图像请求。
router.post(\’/logo\’, async (ctx)={
//console.log(ctx.request.body);
const {标题，描述}=ctx.request.body;
const Prompt=`我想开发一个标题为${title} 和功能细节${desc} 的机器人？ `;
我们来回应一下吧。
允许URL。
尝试{
响应=等待client.images.generate({
型号：“Dar-e-3”，
提示：提示，
n: 1,
尺寸：\’1024×1024\’,
});
console.log(响应.数据);
URL=响应.data[0].url;
console.log(url, \’1111111111111111111111\’);
ctx.body={
代码： 200，
msg: 网址，
};
} 捕获(e) {
console.log(\’服务不可用\’);
ctx.body={
代码： 500，
msg: \’出了点问题\’,
};
}
});
const { title, desc }=ctx.request.body;从请求正文中分解并检索title 和desc 属性的值。这意味着当客户端发送POST请求时，请求体中必须包含这两个键值对。
我想开发一个产品，const Prompt=Title，功能详细信息为{desc}？通过模板字符串将检索到的标题和描述嵌入到新的字符串提示中，以便后续图像生成操作Masu。
let response; let url;声明了两个变量response和url，用于存储后续操作的结果。
尝试使用{.} 块：
response=wait client.images.generate({.});使用await关键字异步等待图像生成结果。传递的参数包括型号名称、提示信息、产量和尺寸等。 console.log(response.data);输出生成的响应数据。 url=response.data[0].url;从响应数据中获取第一个图像URL并将其分配给url变量。 ctx.body={.};成功生成图像后，设置响应的正文。状态码为200表示成功，msg字段包含生成图片的URL。 catch (e) {.} 块：如果生成图像时发生异常（可能是服务不可用、网络问题或其他错误），则捕获此异常
console.log(\’Service Unavailable\’);将错误消息打印到控制台。 ctx.body={.};向客户端返回状态码为500的错误响应。 msg 字段指示错误。
然后就可以通过coze来实现该功能了。
总结
随着时代的发展，人工智能与人类将更加紧密地结合、携手共进、共存，成为人类的重要伙伴。
本文介绍如何使用前端和后端来实现一个简单的人工智能生成头像功能。我希望您能从阅读本文中有所收获。
以上关于用#AI全栈生成coze logo的相关内容来源网络，仅供参考。相关信息请参见官方公告。
原创文章，作者：CSDN，如若转载，请注明出处：https://www.sudun.com/ask/91392.html
