技术拆解-GPT-Vis

基本信息

https://github.com/antvis/GPT-Vis

一个基于 LLM + 知识库推荐可视化图表的Agent。

这个库只是前端库（渲染），没提供后端部分的代码（推荐），不能直接用，不过可以参考他们的思路，我们自己实现一个基于知识库的 Agent 来做图表推荐

应用

据说支小宝里面有应用，但是我试了几次都没触发。

可以通过百宝箱中的数据分析师这个 Agent 进行体验。

技术细节

application

上图是百宝箱中的数据分析师这个 Agent 中，询问“东方财富近五年的归母净利润”所返回的内容。
从 SSE 返回的结果中，可以看到和可视化相关的内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
{
  "card": {
    "card_config_id": "20241109FL7q00651820",
    "card_id": "20241106i4jy00088644",
    "card_resource": {
      "PC": {
        "package_version": "1.0.5",
        "filepath": "https://gw.alipayobjects.com/render/p/yuyan_npm/@alipay_tbox-gpt-vis-card/1.0.5/dist/umd-named/index.umd.min.js",
        "package_name": "@alipay/tbox-gpt-vis-card"
      },
      "MINIAPP": {
        "package_version": "",
        "filepath": "https://gw.alipayobjects.com/render/p/yuyan_npm///dist/umd-named/index.umd.min.js",
        "package_name": ""
      },
      "CUBE": {
        "cube_template_id": ""
      },
      "H5": {
        "package_version": "1.0.5",
        "filepath": "https://gw.alipayobjects.com/render/p/yuyan_npm/@alipay_tbox-gpt-vis-card/1.0.5/dist/umd-named/index.umd.min.js",
        "package_name": "@alipay/tbox-gpt-vis-card"
      }
    },
    "card_type": "custom"
  },
  "content": "",
  "data": {
    "result": "基于东方财富近五年归母净利润的数据，以下是以折线图形式展现这些数据的图表配置：\n\n```vis-chart\n{\n \"type\": \"line\",\n \"data\": [\n {\"time\": \"2018\", \"value\": 91.9},\n {\"time\": \"2019\", \"value\": 99.1},\n {\"time\": \"2020\", \"value\": 101.6},\n {\"time\": \"2021\", \"value\": 114.4},\n {\"time\": \"2022\", \"value\": 121}\n ],\n \"title\": \"东方财富近五年归母净利润\",\n \"axisXTitle\": \"年份\",\n \"axisYTitle\": \"归母净利润(亿元)\"\n}\n```\n\n此折线图清晰展示了东方财富公司自2018年至2022年间归母净利润的年度变动情况。从图表中可以看出，公司归母净利润整体呈上升趋势，从2018年的91.9亿元增长至2022年的121亿元，显示出公司盈利能力的稳定提升。这一趋势可能受到多种因素影响，包括业务扩张、成本控制优化、市场需求增加等。",
    "$$__metaInfo": {
      "messageId": "20241125zE2f10342477",
      "lane": "default"
    },
    "messageId": "20241125zE2f10342477",
    "lane": "default"
  }
}

在 data.result 中，包含了自定义的 vis-chart 的语法：

1
2
3
4
5
6
7
8
9
10
11
12
13
{
    "type": "line",
    "data": [
        {"time": "2018", "value": 91.9},
        {"time": "2019", "value": 99.1},
        {"time": "2020", "value": 101.6},
        {"time": "2021", "value": 114.4},
        {"time": "2022", "value": 121}
    ],
    "title": "东方财富近五年归母净利润",
    "axisXTitle": "年份",
    "axisYTitle": "归母净利润(亿元)"
}

可参考的内容

知识库 + RAG 的模式

rag

这个和我们做的 一模一样。
我后面准备切 RAG 了，把 SFT 的数据，和各种文档，放 rag 里面，用通用模型搞。
rag 的思路，我也计划基于折线图 - Line Chart 的 Knowledge这么做，每个里面再嵌入 SFT 的数据到 RAG 里。
–韩博

antv 的 AVA 也可以结合起来用:https://github.com/antvis/AVA
上周搞叙事可视化的时候我看了 AVA 的代码，有些 LLM 不好处理的内容(比如数据的处理、特征提取、函数分析等等)可以借鉴 AVA 的方式去做
他这个就是基于 AVA 做的，只是把之前AVA 的 rule改成了文本，喂给 LLM
–Me

Markdown 渲染器

字符串的方式，对 LLM 友好

基于这个协议：
https://github.com/remarkjs/react-markdown

做成一个卡片组件对外输出

降低业务方的接入成本，方便快速集成到 AI 应用中，这样才能大面积铺开。

跨语言

提供了 Python 的 Streamlit 库的支持。

Streamlit 是一个开源的 Python 库，它允许数据科学家和开发者快速创建和分享美观的、交互式的 Web 应用。

可视化知识库

https://github.com/antvis/GPT-Vis/tree/main/knowledges

评测数据集

https://github.com/antvis/GPT-Vis/tree/main/evaluations/datastes/chart

https://github.com/antvis/GPT-Vis/tree/main/evaluations/datastes