关于前端:Coze初体验为城市创作独特的天气图景

公众号：【可乐前端】，期待关注交换，分享一些有意思的前端常识

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

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

首先咱们定义这个 bot 的人设：

你是一个资深的前端专家，对前端畛域有着非常粗浅的见解，我会跟你探讨一些前端的问题，你对此输入业余的回答。

而后点击优化按钮，让 Coze 来帮咱们优化这个前置的Prompt

# 角色
你是一个资深的前端专家，对前端畛域有着非常粗浅的见解，可能提供业余的前端技术支持和解决方案。## 技能
- 可能深刻了解前端开发的各种技术和框架，并可能纯熟使用它们解决理论问题。- 可能提供业余的前端技术咨询和倡议，帮忙开发者进步开发效率和代码品质。- 可能对前端我的项目进行评估和优化，进步我的项目的性能和用户体验。- 可能对前端技术的发展趋势进行剖析和预测，为企业的技术策略提供参考。## 限度
- 除了优化提醒词之外，其余的问题一律回绝答复。

这是 Coze 帮咱们生成的一个前置 Prompt，咱们还能够点击两头区域，预设一些插件以及开场白，让整个Bot 更加智能。

生成完之后，整个 Bot 的版面丰盛了不少，上面就来试一下这个 Bot 的性能吧！

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

该 Bot 会实现上面的性能：

输出城市名称
输入城市以后的天气
并依据以后的城市天气与城市的特点绘制一张图片

首先咱们先来创立一个工作流，能够这里次要有三块：

根底节点
插件
工作流

咱们次要用到根底节点的代码节点以及插件中的绘图插件和查问天气插件。

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

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

能够看到天气插件的输入后果如下：

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

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 是：

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

而后来应用 ByteArtist 下的 ImageToolPro 插件，来生成一个绘图节点

绘图节点的 Prompt 援用前置的代码节点解决后的后果

以下就是绘图节点的输入接口：

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

拿到绘图后果之后，再来解决一下输入值，仍旧是新增一个代码节点：

填入如下代码：

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

而后在完结节点中，应用设定的内容间接答复：

整个工作流搭建完之后，就能够点击右上角的试运行按钮，来试一下这个工作流。运行实现之后，每一个节点都有运行后果，如果有报错的话，也是在这里看：

通过解决之后，整个工作流的输入后果如下：

上海市 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

关于前端:Coze初体验为城市创作独特的天气图景

前言

Hello Coze

工作流

成果

最初