docs: readme

README.md

@@ -1,78 +1,69 @@
-<h1 align="center">
-<b>GPT-VIS</b>
-</h1>
+<img src="https://gw.alipayobjects.com/zos/antfincdn/R8sN%24GNdh6/language.svg" width="18"> [English](./README.md) | 简体中文
+
+<h1 align="center">GPT-Vis</h1>
 
 <div align="center">
+
 Components for GPTs, generative AI, and LLM projects. Not only UI Components.
 
-![GPT-vis logo-06](https://github.com/eosphoros-ai/GPT-Vis/assets/17919400/c8804ffb-d3d6-45d3-846f-cf217681ab05)
+<p align="center">
+  <a href="https://gpt-vis.antv.com" target="_blank">Document</a> •
+  <a href="/knowledges" target="_blank">Knowledge</a> •
+  <a href="https://huggingface.co/antvis" target="_blank">Huggingface</a> •
+  <a href="https://tbox.alipay.com/share/202410APr1n200110168?platform=WebService" target="_blank">Agent Demo</a>
+</p>
 
+<div align="center">
+  <img src="https://github.com/eosphoros-ai/GPT-Vis/assets/17919400/c8804ffb-d3d6-45d3-846f-cf217681ab05" width=500">
 </div>
 
-## 特性
+</div>
 
-- 🤖 **LLM 相关**：针对 LLM 对话式交互，以及服务端序列化输出而设计，方便快速集成到 AI 应用中。
-- 🍡 **丰富组件**：内置有 20+ 美观好看的常用 UI 组件，满足常规需求。
-- 🔨 **易于扩展**：对于自己的特殊 UI 定制需求，提供方便的扩展机制和架构设计。
+## ✨ Features
 
-## 安装
+- 🤖 **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.
 
-使用 NodeJS 包管理工具安装依赖。
+## 📦 Installation
 
 ```bash
-$npm i --save gpt-vis
+$ npm add @antv/gpt-vis --save
 ```
 
-## 快速使用
-
-快速使用 gpt-vis 渲染出对话卡片的 UI。
+## 🔨 Usage
 
-```tsx
-import { Conversation, Components } from "gpt-vis";
+```jsx
+import { GPTVis } from '@antv/gpt-vis';
 
-function Demo() {
-  // 服务端返回的协议内容
-  const content =
-    "# GPT-VIS \n\nComponents for GPTs, generative AI, and LLM projects. Not only UI Components.";
+const markdownContent = `
+# GPT-VIS \n\nComponents for GPTs, generative AI, and LLM projects. Not only UI Components.
 
-  return <Conversation components={Components}>{content}</Conversation>;
-}
-```
-
-使用自定义的 UI 组件。UI 渲染最终使用 markdown 格式，所以自定义的方式有两种，一种是基于 markdown code 标签去扩展语言，一种是扩展标签。
+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.
 
-````tsx
-import { Conversation, Components } from "gpt-vis";
+\`\`\`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}] }
+\`\`\`
+`;
 
-const custom = {
-  "my-ui": () => {},
+export default () => {
+  return <GPTVis>{markdownContent}</GPTVis>;
 };
+```
 
-function Demo() {
-  // 服务端返回的协议内容
-  const content = '# GPT-VIS \n\n```my-ui\n{"value": "1"}```';
-
-  return (
-    <Conversation components={{ ...components, ...custom }}>
-      {content}
-    </Conversation>
-  );
-}
-````
-
-## Development
+## 💻 Development
 
 ```bash
 # install dependencies
-$ npm install
+$ pnpm install
 
 # develop library by docs demo
-$ npm run dev
+$ pnpm dev
 
 # build library source code
-$ npm run build
+$ pnpm build
 ```
 
 ## License
 
-MIT
+[MIT](./LICENSE)

README.zh-CN.md

@@ -0,0 +1,69 @@
+<img src="https://gw.alipayobjects.com/zos/antfincdn/R8sN%24GNdh6/language.svg" width="18"> [English](./README.md) | 简体中文
+
+<h1 align="center">GPT-Vis</h1>
+
+<div align="center">
+
+Components for GPTs, generative AI, and LLM projects. Not only UI Components.
+
+<p align="center">
+  <a href="https://gpt-vis.antv.com" target="_blank">文档</a> •
+  <a href="/knowledges" target="_blank">知识库</a> •
+  <a href="https://huggingface.co/antvis" target="_blank">Huggingface</a> •
+  <a href="https://tbox.alipay.com/share/202410APr1n200110168?platform=WebService" target="_blank">体验 Agent</a>
+</p>
+
+<div align="center">
+  <img src="https://github.com/eosphoros-ai/GPT-Vis/assets/17919400/c8804ffb-d3d6-45d3-846f-cf217681ab05" width=500">
+</div>
+
+</div>
+
+## 特性
+
+- 🤖 **LLM 协议**：面向 LLM Agent 卡片的可视化协议，针对 LLM 对话式交互，以及服务序列化输出而设计，方便快速集成到 AI 应用中。
+- 🍡 **LLM 组件**：面向 LLM 应用研发组件, 内置有 20+ 常用 VIS 组件，对于定制 UI 需求，提供方便的扩展机制和架构设计。
+- 📈 **LLM 接入**：面向 LLM 无缝接入的图表知识库和图表推荐模型，针对 LLM 直接输出可视化卡片，为 Agent 提供知识库以及推荐模型方案。
+
+## 📦 安装
+
+```bash
+$ npm add @antv/gpt-vis --save
+```
+
+## 🔨 使用
+
+```jsx
+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>;
+};
+```
+
+## 💻 本地开发
+
+```bash
+# install dependencies
+$ pnpm install
+
+# develop library by docs demo
+$ pnpm dev
+
+# build library source code
+$ pnpm build
+```
+
+## License
+
+[MIT](./LICENSE)