教你用WorkBuddy制作可视化数据大屏

0 评论 616 浏览 0 收藏 10 分钟

从机场展厅里那些密密麻麻的动态大屏说起,作者用 WorkBuddy 装上一个开源的大屏 Skill,选模板、造假数据、改配色和动效,最后接上 API 让页面自己刷新。全程没写一行代码,一台普通电脑就能跑起来。

说到可视化的数据大屏,相信大家都在机场高铁,政府服务中心,园区或者一些企业的展厅里面都看见过。一个酷炫的大屏上,上面密密麻麻各种数据动态展示着,如图:

实际上要做这样的可视化数据大屏,在如今Agent和模型能力足够的情况下,并不是一件很难的事情。换以前,都得找专业的公司搭建一套DB数据可视化系统,所以AI有时候就能把入门的门槛拉低很多。

老马前几天刚好刷到一个可以辅助制作数据大屏的开源Skill,正好这次结合WorkBuddy,以及刚上新的Hy4模型,Hy4目前还处于限时免费体验阶段,给大家介绍一下如何搭建自己的可视化数据大屏。

我们说Skill就是一本说明书,它除了自带很多基础提示词和工作流程的说明,还包括了一些素材资源和脚本代码啥的。这就等于给我们提前准备好了上下文材料,省得一点点去跟Agent沟通费口舌。

认识bigdata-dashboard-skill

而这个开源Skill技能叫bigdata-dashboard-skill,正好帮我们提供了这些上下文材料。但这个Skill并非完善完美的,比如它自带的模板有些太老太丑,它没有足够清晰的引导等等。

但这不并妨碍我们一步步去完善它,后续经过多轮沟通后,做出了我们自己想要的效果,那就可以把当前的Skill打包成我们自己的Skill,形成自己的一套工作标准。

技能推荐与安装部署

废话少话,我们先在WorkBuddy上新建个任务,最好是创建个工作空间,选择上本地的一个文件夹,因为待会方便生成的一些产物放到文件夹里面。

接着当然就是让WorkBuddy安装这个开源Skill,众所周知,大部分开源Skill都是放在了github的仓库上。而很多小伙伴的网络是受限的,无法访问github,因此早前老马也搓了一个Skill,写了篇文章帮大家解决这个问题。

奈何不知道是不是有些小可爱举报,又或者是被系统检测到了,认为此举不妥,那篇文章就被微信官方删掉了。但没有关系,老马发现5.9.3的WorkBuddy,已经更新了一个技能推荐的功能。

只要你在WorkBuddy的新建任务对话框中输入一些提示词,触发到了某些关键词,顶部就会自动弹出一些Skill啥的,推荐给你去使用。比如我们输入“受限网络访问github”,立马弹出了三个上架了技能市场的skill推荐:

然后你就可以随便点击使用一个,在后面补充上提示词,比如使用xxxx帮我修复一下github网络的访问,提交过去等待修复完成就行了。这些Skill老马都没有测试过,就留给小伙伴们去试试咸淡了:

所以世界就是这么玄幻,老马自己搓的Skill写成公众号文章会被删除。而别人搓的类似的作用的Skill,却可以上架WorkBuddy的官方技能市场,还能被推荐,这上哪儿说理去。

难道WorkBuddy的运营团队小伙伴看完老马这篇文章,还会去下架掉它们不成?开个玩笑,起码github访问的问题解决了,下面就直接把提示词发给WorkBuddy,安装我们制作数据大屏的Skill:

安装部署这个项目 github.com/AragornZJF/bigdata-dashboard-skill

由于这个Skill仓库是面向Windows系统的,所以一开始并不支持Mac系统的部署。好在Hy4模型这次的升级已经达到了国产模型中等能打的地步,它自动帮老马进行了系统的适配,最后安装部署成功。

生成与美化数据大屏

下一步当然是让WorkBuddy使用这个Skill去生成一个数据大屏了,数据大屏顾名思义,你得有数据。还有就是,你还得知道这套Skill自带了哪些模板。因此老马先让WorkBuddy查一下模板有哪些:

查完了模板,就暂且选择了一套园区物业管理的。接下来就是让WorkBuddy生成一些虚拟的数据,就是假数据,放进模板里面去生成数据大屏:

生成后的第一版效果如下图,这是2021的静态DataV模板,啥动态效果都没有,那是真叫一个丑:

因此老马继续让WorkBuddy对这个模板进行美化修改,正好也看看Hy4模型在生成网页方面的效果如何。经过一番改造,更新美化后的模板算是好看了一些,也有了实时的动效和数据的更新显示:

接真实数据:文件格式与pandas

所以大家不必拘泥于Skill原先自带的数据大屏模板不好看,或者是排版布局不符合自己的需求。没有关系的,你就截图告诉WorkBuddy去修改。或者给它一些参考的图片和文件都行,改到自己满意为止。

另外,这个数据大屏是支持json、xlsx、xls三类文件格式输入的,也就是说你后期要接入自己的真实数据,可以让WorkBuddy给你做个API的接口,你对接上自己的系统数据过去就行了:

如上图所示,老马就可以把这套生产的数据大屏项目,直接找一台专用的电脑部署上去。启动好API服务对接好数据接口。再用什么HDMI线插个LED大屏,有啥分辨率问题再调调,一套能用的数据大屏就做好了。

另外,如果了解过Python处理表格数据的标准库,即pandas的小伙伴。你也可以把CSV、Excel、数据库处理成标准的Json格式,再丢给html数据大屏,流程如图:

但是这里大家要搞清楚的一点是,虽然都是在拿数据获取数据。pandas是构建期的数据加工工具,API是运行期的刷新通道,两者是不在同一层的。

pandas是跑一次算一次,产出静态JSON文件。API是页面自己定时去拉取数据的局部刷新。生产环境里两者通常配合用,服务端拿pandas从数据库实时聚合成契约JSON作为接口响应,前端仍走API的模式。

当然这里是用老马搭建的项目举例,具体你自己去实操落地的时候。你可以用大白话告诉WorkBuddy,我这个数据是要实时从哪里更新获取的,数据大屏也是要实时刷新的,怎么弄,WorkBuddy会给你生成解决方案的。

作者:马佳彬 公众号:马佳彬

本文由 @马佳彬 原创发布于人人都是产品经理。未经作者许可,禁止转载

题图来自 Unsplash,基于CC0协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
海报
评论
评论请登录
  1. 目前还没评论,等你发挥!