likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 9

前言

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

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

Hello Coze

首先点击主页的创建Bot按钮,先来体验一下Coze的对话场景。 Coze初体验——为城市创作独特的天气图景

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

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

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

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

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

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

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

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

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

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

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

工作流

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

Bot会实现下面的功能:

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

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

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

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

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

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

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

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

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

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

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

{
	"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去调用下一个绘图节点。

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

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函数的返回值记得要在左侧输出值的先定义好。

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

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

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

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

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

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

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

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

{
	"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摄氏度"
	}
}

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

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

填入如下代码:

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;
}

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

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

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

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

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

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

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

效果

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

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

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

看看运行结果吧:

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

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

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

最后

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

bot ID:7330504187488272394