- Notifications
You must be signed in to change notification settings - Fork26
🤖 GPT Vision, Open Source Vision components for GPTs, generative AI, and LLM projects. Not only UI Components.
License
antvis/GPT-Vis
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Components for GPTs, generative AI, and LLM projects.Not only UI Components.
agent.mov
- 🤖LLM Protocol: A visual protocol for LLM Agent cards, designed for LLM conversational interaction and service serialized output, to facilitate rapid integration into AI applications.
- 🍡LLM Component: Developed components for LLM applications, with 20+ commonly used VIS components built-in, providing convenient expansion mechanism and architecture design for customized UI requirements.
- 📈LLM access: Chart knowledge base and chart recommendation model for seamless access to LLM, directly output visual cards for LLM, and provide knowledge base and recommended model solutions for Agent.
$ npm i @antv/gpt-vis --save
import{GPTVis}from'@antv/gpt-vis';constmarkdownContent=`# 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 } ]}\`\`\``;exportdefault()=>{return<GPTVis>{markdownContent}</GPTVis>;};
🛠 Custom renderer UI
import{GPTVisLite,withChartCode,ChartType,Pie}from'@antv/gpt-vis';constmarkdownContent=`\`\`\`my-uimy data\`\`\`\`\`\`vis-chart{ "type": "pie", "data": [ { "category": "category 1", "value": 27 }, { "category": "category 2", "value": 25 }, { "category": "category 3", "value": 18 }, { "category": "other", "value": 5 } ]}\`\`\``;constcustomRenderers={'my-ui':({ children})=><div>{children}</div>};constcomponents={code:withChartCode({languageRenderers:customRenderers,// register custom block renderercomponents:{[ChartType.Pie]:Pie},// register a pie chart}),};exportdefault()=>{return<GPTVisLitecomponents={components}>{markdownContent}</GPTVisLite>;};
importstreamlitasstfromstreamlit_gpt_visimportset_gpt_viscontent='''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)
Learn more 👉streamlit-gpt-vis
The purpose of theVisual Knowledge Base is to provide a comprehensive and systematic resource to help Agents understand, select, create various data visualization charts. Below are the metrics for generating accurate chart protocols based on theevaluation dataset through the 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 | ||
Note: The numbers in the format of X/Y represent the metrics of the respective chart types when evaluated against the dataset.
The chart recommendation dataset is designed to evaluate or fine-tune large language models on their ability to recommend chart types based on given data. The dataset currently encompasses 16 types of charts, with 1-3 different data scenarios per chart type, and more than 15 chart data instances for each scenario. The dataset is continuously updated, and we welcome contributions of chart data collected from your own use cases. For more detailed information about the dataset, please visitevaluations/recommend.
# install dependencies$ pnpm install# develop library by docs demo$ pnpm dev# build library source code$ pnpm build
About
🤖 GPT Vision, Open Source Vision components for GPTs, generative AI, and LLM projects. Not only UI Components.