Coze初体验——为城市创作独特的天气图景

前言

Coze是一个AI Chat Bot 的应用编辑平台,上面预设了大语言模型以及许多插件,我们可以轻松利用它来开发自己的AI聊天应用。本文就以一个城市天气图景应用来介绍一下Coze平台的一些使用与体验。

Hello Coze

首先点击主页的创建Bot按钮,先来体验一下Coze的对话场景。

首先我们定义这个bot的人设:

你是一个资深的前端专家,对前端领域有着十分深刻的见解,我会跟你讨论一些前端的问题,你对此输出专业的答复。

然后点击优化 按钮,让Coze来帮我们优化这个前置的Prompt

markdown 复制代码
# 角色
你是一个资深的前端专家,对前端领域有着十分深刻的见解,能够提供专业的前端技术支持和解决方案。

## 技能
- 能够深入理解前端开发的各种技术和框架,并能够熟练运用它们解决实际问题。
- 能够提供专业的前端技术咨询和建议,帮助开发者提高开发效率和代码质量。
- 能够对前端项目进行评估和优化,提高项目的性能和用户体验。
- 能够对前端技术的发展趋势进行分析和预测,为企业的技术战略提供参考。

## 限制
- 除了优化提示词之外,其他的问题一律拒绝回答。

这是Coze帮我们生成的一个前置Prompt,我们还可以点击中间区域,预设一些插件以及开场白,让整个Bot更加智能。

生成完之后,整个Bot的版面丰富了不少,下面就来试一下这个Bot的功能吧!

工作流

上面一个简单的Bot就已经生成了,整个过程5分钟都不到,体验相当良好。但Coze的功能远远不止于此,要想创建功能强大的Bot,就需要用到Coze的工作流能力。工作流中预设了很多插件,比如说生成图片、查询天气、查询古诗词等等。那么我们就利用这些插件来实现一个绘画城市独特天气图景的Bot

Bot会实现下面的功能:

  • 输入城市名称
  • 输出城市当前的天气
  • 并根据当前的城市天气与城市的特点绘制一张图片

首先我们先来创建一个工作流,可以这里主要有三块:

  • 基础节点
  • 插件
  • 工作流

我们主要用到基础节点的代码节点以及插件中的绘图插件和查询天气插件。

首先会有一个开始节点,这里接受的是整个工作流的输入参数,定义一个city参数作为用户输入的城市名称。

然后选择这个墨迹天气的插件,将用户输入的参数用于调用该插件。这里调用插件的时候其实跟调用API差不多,就是一个入参出参,把用户输入的城市参数传到天气插件中,让天气插件来调用。

可以看到天气插件的输出结果如下:

json 复制代码
{
	"data": [{
		"wind_level_night": "1",
		"predictDate": "2024-02-01",
		"predict_date": "2024-02-01",
		"temp_high": 25,
		"wind_dir_night": "北风",
		"wind_level_day": "1",
		"condition": "多云",
		"humidity": 79,
		"temp_low": 18,
		"weather_day": "多云",
		"wind_dir_day": "北风"
	}]
}

我们主要关注几个参数:

  • predict_date:日期
  • temp_high:最高温
  • condition:天气
  • temp_low:最低温

然后我们这里新建一个代码节点,去处理这些参数,生成一个Prompt去调用下一个绘图节点。

ts 复制代码
async function main({ params }: Args): Promise<Output> {
    const d = params.data[0]
    const result = `绘制一张${params.city}的图片,它今天的天气是:${d.condition} ${d.temp_low}摄氏度到${d.temp_low}摄氏度`
    const ret = { result: result }
    return ret
}

main函数的返回值记得要在左侧输出值的先定义好。

经过这么一个处理之后,我们调用绘图节点的Prompt是:

bash 复制代码
绘制一张${params.city}的图片,它今天的天气是:${d.condition} ${d.temp_low}摄氏度到${d.temp_low}摄氏度

然后来使用ByteArtist下的ImageToolPro插件,来生成一个绘图节点

绘图节点的Prompt引用前置的代码节点处理后的结果

以下就是绘图节点的输出接口:

json 复制代码
{
	"log_id": "2024020116385108A748D309AB100746D6",
	"msg": "success",
	"code": 0,
	"data": {
		"image_url": "https://lf-plugin-resouce.oceancloudapi.com/obj/bot-studio-platform-plugin-tos/artist/image/729d6c964109496cbd90353de24410b6.png",
		"prompt": "绘制一张上海市的图片,它今天的天气是:小雨 5摄氏度到5摄氏度"
	}
}

拿到绘图结果之后,再来处理一下输出值,依旧是新增一个代码节点:

填入如下代码:

ts 复制代码
async function main({ params }: Args): Promise<Output> {
    const d = params.data[0]
    const ret = {
        res: `${params.city} ${d.predict_date} ${d.condition} ${d.temp_low}摄氏度到${d.temp_high}摄氏度 ![img](${params.img})`
    }
    return ret;
}

然后在结束节点中,使用设定的内容直接回答:

整个工作流搭建完之后,就可以点击右上角的试运行按钮,来试一下这个工作流。运行完成之后,每一个节点都有运行结果,如果有报错的话,也是在这里看:

经过处理之后,整个工作流的输出结果如下:

less 复制代码
上海市 2024-02-01 小雨 5摄氏度到9摄氏度 ![img](https://lf-plugin-resouce.oceancloudapi.com/obj/bot-studio-platform-plugin-tos/artist/image/61eaadb499194c8e97e35cf7d3e84aaa.png)

然后就可以右上角发布工作流,这样我们就可以在Bot里面使用这个工作流了。

效果

Bot里面添加工作流,把我们刚才创建的工作流添加进去。整体的Bot界面就变成了这个样子:

看看运行结果吧:

然后点击右上角的发布按钮,就可以选择你需要发布的平台,把这个Bot发布出去:

最后

整体体验Coze下来还是感觉挺便利的,发挥你自己的想象力,创建属于自己的Bot机器人吧!如果你觉得有意思的话,点点关注点点赞吧~欢迎评论区或者私信交流~

bot ID:7330504187488272394

相关推荐
小白小白从不日白6 分钟前
react 组件通讯
前端·react.js
罗_三金16 分钟前
前端框架对比和选择?
javascript·前端框架·vue·react·angular
Fan_web1 小时前
JavaScript高级——闭包应用-自定义js模块
开发语言·前端·javascript·css·html
冯宝宝^1 小时前
基于mongodb+flask(Python)+vue的实验室器材管理系统
vue.js·python·flask
叫我:松哥1 小时前
基于Python flask的医院管理学院,医生能够增加/删除/修改/删除病人的数据信息,有可视化分析
javascript·后端·python·mysql·信息可视化·flask·bootstrap
cc蒲公英2 小时前
Vue2+vue-office/excel 实现在线加载Excel文件预览
前端·vue.js·excel
好名字08212 小时前
monorepo基础搭建教程(从0到1 pnpm+monorepo+vue)
前端·javascript
森叶2 小时前
Electron-vue asar 局部打包优化处理方案——绕开每次npm run build 超级慢的打包问题
vue.js·electron·npm
c#上位机2 小时前
C#事件的用法
java·javascript·c#
小小竹子2 小时前
前端vue-实现富文本组件
前端·vue.js·富文本