English | 简体中文

Components for GPTs, generative AI, and LLM projects. Not only UI Components.

特性

• 🤖 LLM 协议：面向 LLM Agent 卡片的可视化协议，针对 LLM 对话式交互，以及服务序列化输出而设计，方便快速集成到 AI 应用中。
• 🍡 LLM 组件：面向 LLM 应用研发组件, 内置有 20+ 常用 VIS 组件，对于定制 UI 需求，提供方便的扩展机制和架构设计。
• 📈 LLM 接入：面向 LLM 无缝接入的图表知识库和图表推荐模型，针对 LLM 直接输出可视化卡片，为 Agent 提供知识库以及推荐模型方案。

📦 安装

$ npm i @antv/gpt-vis --save

🔨 使用

import { GPTVis } from '@antv/gpt-vis';

const markdownContent = `
# GPT-VIS \n\nComponents for GPTs, generative AI, and LLM projects. Not only UI Components.

Here’s a visualization of Haidilao's food delivery revenue from 2013 to 2022. You can see a steady increase over the years, with notable *growth* particularly in recent years.

\`\`\`vis-chart
{
  "type": "line",
  "data": [
    { "time":2013,"value":59.3 },
    { "time":2014,"value":64.4 },
    { "time":2015,"value":68.9 },
    { "time":2016,"value":74.4 },
    { "time":2017,"value":82.7 },
    { "time":2018,"value":91.9 },
    { "time":2019,"value":99.1 },
    { "time":2020,"value":101.6 },
    { "time":2021,"value":114.4 },
    { "time":2022,"value":121 }
  ]
}
\`\`\`
`;

export default () => {
  return <GPTVis>{markdownContent}</GPTVis>;
};

import { GPTVisLite, withChartCode, ChartType, Pie } from '@antv/gpt-vis';

const markdownContent = `
\`\`\`my-ui
my data
\`\`\`

\`\`\`vis-chart
{
  "type": "pie",
  "data": [
    { "category": "分类一", "value": 27 },
    { "category": "分类二", "value": 25 },
    { "category": "分类三", "value": 18 },
    { "category": "其他", "value": 5 }
  ]
}
\`\`\`
`;

const customRenderers = { 'my-ui': ({ children }) => <div>{children}</div> };
const components = {
  code: withChartCode({
    languageRenderers: customRenderers, // register custom block renderer
    components: { [ChartType.Pie]: Pie }, // register a pie chart
  }),
};

export default () => {
  return <GPTVisLite components={components}>{markdownContent}</GPTVisLite>;
};

🐍 Streamlit

import streamlit as st
from streamlit_gpt_vis import set_gpt_vis

content = '''
Here’s a visualization of Haidilao's food delivery revenue from 2013 to 2022. You can see a steady increase over the years, with notable *growth* particularly in recent years.

\`\`\`vis-chart
{"type": "line","data": [{"time":2013,"value":59.3},{"time":2014,"value":64.4},{"time":2015,"value":68.9},{"time":2016,"value":74.4},{"time":2017,"value":82.7},{"time":2018,"value":91.9},{"time":2019,"value":99.1},{"time":2020,"value":101.6},{"time":2021,"value":114.4},{"time":2022,"value":121}]}
\`\`\`
'''

set_gpt_vis(content)

更多了解 👉 streamlit-gpt-vis

🗂 可视化知识库

可视化知识库的目的是为了提供一个全面、系统的资源，帮助 Agent 理解、选择、创建各种数据可视化图表，以下是 Agent 通过 RAG 方式接入知识，根据评测数据集生成准确图表协议的指标。

| | | | | | | | | ------------- | ----------------------- | -------------------- | ------------- | -------------------- | --------------- | ------- | | Line(Multi) | Column(Grouped/Stacked) | Pie | Area(Stacked) | Bar(Grouped/Stacked) | Scatter(Bubble) | Heatmap | | 40/40 | 25/27 | 13/14 | 18/18 | 18/20 | 10/10 | 9/10 | | Histogram | Tree Map | Word Cloud | Radar | Dual Axis | Rich Text NTV | Pin Map | | 15/16 | 13/15 | 11/12 | 23/23 | 13/14 | 7.3/10 | 10/11 | | Network Graph | Mind Map | Organizational Chart | Flow Diagram | Fishbone Diagram | | | | 8/10 | 12/14 | 10/12 | 10/11 | 10/12 | | | | | | | | | | |

💻 本地开发

# install dependencies
$ pnpm install

# develop library by docs demo
$ pnpm dev

# build library source code
$ pnpm build

License

MIT