how to use

[ZhinanCai]

Hi its a great work! I Would Like To Ask If There Is A Document Or Tutorial Explaining How To Use It 。The Project Displays An Empty Page When It Is Started。

[wzmroot]

Indeed, I am also not sure how this project works with DB-GPT.

[Luooojunnn]

文档写依赖gpt-vis包，我去npm仓库看了，那个包是空包，这个项目的文档是不是有问题？只有一个markdown的运行展示

[lvisei]

文档写依赖gpt-vis包，我去npm仓库看了，那个包是空包，这个项目的文档是不是有问题？只有一个markdown的运行展示

关注 #4，这两天发布新版本。

[lvisei]

• Installation

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

• Usage

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

• Custom renderer

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

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

const customRenderers = { 'my-ui': ({ children }) => <div>{children}</div> };
const components = {
  code: withDefaultChartCode({ languageRenderers: customRenderers }),
};

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

• With 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)