@antv/gpt-vis 0.6.1 → 1.0.0-beta.2

package/README.zh-CN.md

@@ -1,162 +1,237 @@
-<img src="https://gw.alipayobjects.com/zos/antfincdn/R8sN%24GNdh6/language.svg" width="18"> [English](./README.md) | 简体中文 | [日本語](./README.ja-JP.md)
+<img src="https://gw.alipayobjects.com/zos/antfincdn/R8sN%24GNdh6/language.svg" width="18"> [English](./README.md) | 简体中文
 
-<div align="center">
-  <img src="https://github.com/eosphoros-ai/GPT-Vis/assets/17919400/c8804ffb-d3d6-45d3-846f-cf217681ab05" height=70">
-</div>
-
-<h1 align="center">GPT-Vis</h1>
+<h1 align="center">GPT-Vis，为 AI 而生的可视化方案</h1>
 
 <div align="center">
+<img src="https://github.com/eosphoros-ai/GPT-Vis/assets/17919400/c8804ffb-d3d6-45d3-846f-cf217681ab05" height="70">
+
+面向 LLM 时代的 AI 原生可视化组件，为 AI 驱动应用设计的框架无关可视化库。
 
-Components for GPTs, generative AI, and LLM projects. **Not only UI Components**. Use it by [MCP](https://github.com/antvis/mcp-server-chart).
+[![npm version](https://img.shields.io/npm/v/@antv/gpt-vis.svg)](https://www.npmjs.com/package/@antv/gpt-vis)
+[![npm downloads](https://img.shields.io/npm/dm/@antv/gpt-vis.svg)](https://www.npmjs.com/package/@antv/gpt-vis)
+[![License](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)
 
 <p align="center">
-  <a href="https://gpt-vis.antv.vision" target="_blank">文档</a> •
-  <a href="/knowledges" target="_blank">知识库</a> •
-  <a href="https://www.tbox.cn/share/202504APmv6c00373739?platform=WebService" target="_blank">体验 Agent</a> •
-  <a href="https://github.com/antvis/mcp-server-chart" target="_blank">MCP Server</a>
+  <a href="https://gpt-vis.antv.vision" target="_blank">📖 文档</a> •
+  <a href="/skills/chart-visualization" target="_blank">🤖 图表技能</a> •
+  <a href="/knowledges" target="_blank">🧠 知识库</a> •
+  <a href="https://www.tbox.cn/share/202504APmv6c00373739?platform=WebService" target="_blank">🎮 在线体验</a> •
+  <a href="https://github.com/antvis/mcp-server-chart" target="_blank">🔌 MCP 服务器</a>
 </p>
+
 </div>
 
 <div align="center">
   <video src="https://github.com/user-attachments/assets/b8eb4a89-b0ed-4a39-8fab-316161949446" />
 </div>
 
-## 特性
+<br/>
+
+> **📢 Version 1.0 预览版**: 为 AI 优化的全新架构。正式版预计 **2026 年 3 月 21 日**发布。
+
+## ✨ 核心特性
 
-- 🤖 **LLM 协议**：面向 LLM Agent 卡片的可视化协议，针对 LLM 对话式交互，以及服务序列化输出而设计，方便快速集成到 AI 应用中。
-- 🍡 **LLM 组件**：面向 LLM 应用研发组件, 内置有 20+ 常用 VIS 组件，对于定制 UI 需求，提供方便的扩展机制和架构设计。
-- 📈 **LLM 接入**：面向 LLM 无缝接入的图表知识库和图表推荐模型，针对 LLM 直接输出可视化卡片，为 Agent 提供知识库以及推荐模型方案。
+- **🚀 框架无关**: 支持原生 JavaScript、React、Vue、Angular 或任何框架
+- **✍️ 自然语法**: 简单的类 Markdown 语法，LLM 可以轻松生成
+- **🌊 流式支持**: 内置支持 AI 模型的流式输出
+- **🛡️ 容错性**: 优雅处理不完整或格式错误数据
+- **📊 20+ 图表类型**: 统计图表、关系图表和高级可视化图表
+- **🧠 智能默认值**: 自动数据检测、智能配色方案、自适应布局
 
-## 📦 安装
+## 🚀 快速开始
+
+### 安装
 
 ```bash
-$ npm i @antv/gpt-vis --save
+npm install @antv/gpt-vis
 ```
 
-## 🔨 使用
+### 基础用法
 
-```jsx
+```javascript
 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 }
-  ]
-}
-\`\`\`
+const gptVis = new GPTVis({
+  container: 'container',
+  width: 600,
+  height: 400,
+});
+
+// 使用类 Markdown 语法渲染
+const visSyntax = `
+vis line
+data
+  - time 2020
+    value 100
+  - time 2021
+    value 120
+  - time 2022
+    value 150
 `;
 
-export default () => {
-  return <GPTVis>{markdownContent}</GPTVis>;
-};
+gptVis.render(visSyntax);
 ```
 
-<details>
-<summary>🛠 定制渲染 UI</summary>
+### 流式支持
 
-```jsx
-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 }
-  ]
+```javascript
+import { GPTVis, isVisSyntax } from '@antv/gpt-vis';
+
+const gptVis = new GPTVis({ container: 'container', width: 600, height: 400 });
+let buffer = '';
+
+function onToken(token) {
+  buffer += token;
+  if (isVisSyntax(buffer)) {
+    gptVis.render(buffer);
+  }
 }
-\`\`\`
-`;
+```
+
+## 📚 语法指南
+
+### 基本结构
 
-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>;
-};
+```
+vis [图表类型]
+[属性] [值]
+data
+  - [键] [值]
 ```
 
-</details>
+### 示例
 
-## 🐍 Streamlit
+**简单图表:**
 
-```python
-import streamlit as st
-from streamlit_gpt_vis import set_gpt_vis
+```
+vis pie
+data
+  - category 销售
+    value 30
+  - category 市场
+    value 25
+innerRadius 0.6
+```
+
+**带样式:**
 
-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 line
+data
+  - time 2020
+    value 100
+  - time 2021
+    value 120
+style
+  lineWidth 3
+  palette
+    - #5B8FF9
+    - #5AD8A6
+```
 
-\`\`\`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)
+```
+vis mind-map
+data
+  - name 项目
+    children
+      - name 阶段一
+      - name 阶段二
 ```
 
-更多了解 👉 [streamlit-gpt-vis](https://github.com/antvis/GPT-Vis/tree/main/bindings/streamlit-gpt-vis)
+## 🔧 框架集成
 
-## 🗂 可视化知识库
+<details>
+<summary><strong>原生 JavaScript</strong></summary>
 
-[可视化知识库](https://github.com/antvis/GPT-Vis/tree/main/knowledges)的目的是为了提供一个全面、系统的资源，帮助 Agent 理解、选择、创建各种数据可视化图表，以下是 Agent 通过 RAG 方式接入知识，根据[评测数据集](https://github.com/antvis/GPT-Vis/tree/main/evaluations/datastes/chart)生成准确图表协议的指标。
+```javascript
+import { GPTVis } from '@antv/gpt-vis';
 
-|               |                         |                      |               |                      |                 |         |
-| ------------- | ----------------------- | -------------------- | ------------- | -------------------- | --------------- | ------- |
-| 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                |                 |         |
-|               |                         |                      |               |                      |                 |         |
+const gptVis = new GPTVis({ container: 'chart', width: 600, height: 400 });
+gptVis.render(visSyntaxString);
+```
 
-## 🤖 图表模型推荐数据集
+</details>
 
-图表推荐数据集用于评测/微调大模型在“给定数据，推荐图表类型”任务上的能力。数据集目前涵盖了 16 种图表类型，每种图表类型下 1-3 个不同数据场景，每个场景下 15+ 个图表数据。数据会持续更新，也欢迎向我们贡献你的使用场景中收集的图表数据。数据集详细信息见 [evaluations/recommend](https://github.com/antvis/GPT-Vis/blob/main/evaluations/datastes/recommend/README.md)
+<details>
+<summary><strong>React</strong></summary>
 
-## 💻 本地开发
+```jsx
+import { GPTVis } from '@antv/gpt-vis';
+import { useEffect, useRef } from 'react';
 
-```bash
-# install dependencies
-$ pnpm install
+function ChartComponent({ visSyntax }) {
+  const containerRef = useRef();
+  const gptVisRef = useRef();
+
+  useEffect(() => {
+    gptVisRef.current = new GPTVis({ container: containerRef.current, width: 600, height: 400 });
+    return () => gptVisRef.current?.destroy();
+  }, []);
+
+  useEffect(() => {
+    if (gptVisRef.current && visSyntax) {
+      gptVisRef.current.render(visSyntax);
+    }
+  }, [visSyntax]);
+
+  return <div ref={containerRef} />;
+}
+```
+
+</details>
+
+<details>
+<summary><strong>Vue</strong></summary>
 
-# develop library by docs demo
-$ pnpm dev
+```vue
+<template>
+  <div ref="chartRef"></div>
+</template>
 
-# build library source code
-$ pnpm build
+<script setup>
+import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { GPTVis } from '@antv/gpt-vis';
+
+const props = defineProps(['visSyntax']);
+const chartRef = ref(null);
+let gptVis = null;
+
+onMounted(() => {
+  gptVis = new GPTVis({ container: chartRef.value, width: 600, height: 400 });
+  gptVis.render(props.visSyntax);
+});
+
+watch(
+  () => props.visSyntax,
+  (newSyntax) => {
+    if (gptVis) {
+      gptVis.render(newSyntax);
+    }
+  },
+);
+
+onUnmounted(() => gptVis?.destroy());
+</script>
 ```
 
-## License
+</details>
+
+## 🧠 知识库
+
+GPT-Vis 包含全面的[知识库](https://github.com/antvis/GPT-Vis/tree/main/knowledges)，帮助 LLM 理解何时使用每种图表类型以及如何构建数据结构。在 200+ 场景中评估，准确率超过 90%。
+
+## 🤝 贡献
+
+> **⚠️ AI 生成代码策略**: 本项目仅合并 AI 生成的代码。
+
+贡献方式：
+
+1. 提交 Issue 描述问题或功能
+2. 标记 @copilot 生成实现
+3. 提交包含 AI 生成代码的 PR
+
+## 📄 开源协议
 
-[MIT](./LICENSE)
+[MIT](./LICENSE) © [AntV](https://antv.antgroup.com/)

package/dist/cjs/gpt-vis/index.d.ts

@@ -0,0 +1,115 @@
+import type { VisualizationOptions } from '../types';
+import type { AreaConfig } from '../vis/area';
+import type { BarConfig } from '../vis/bar';
+import type { BoxplotConfig } from '../vis/boxplot';
+import type { ColumnConfig } from '../vis/column';
+import type { DualAxesConfig } from '../vis/dual-axes';
+import type { FishboneDiagramConfig } from '../vis/fishbone-diagram';
+import type { FlowDiagramConfig } from '../vis/flow-diagram';
+import type { FunnelConfig } from '../vis/funnel';
+import type { HistogramConfig } from '../vis/histogram';
+import type { IndentedTreeConfig } from '../vis/indented-tree';
+import type { LineConfig } from '../vis/line';
+import type { LiquidConfig } from '../vis/liquid';
+import type { MindmapConfig } from '../vis/mindmap';
+import type { NetworkGraphConfig } from '../vis/network-graph';
+import type { OrganizationChartConfig } from '../vis/organization-chart';
+import type { PieConfig } from '../vis/pie';
+import type { RadarConfig } from '../vis/radar';
+import type { SankeyConfig } from '../vis/sankey';
+import type { ScatterConfig } from '../vis/scatter';
+import type { SummaryConfig } from '../vis/summary';
+import type { TableConfig } from '../vis/table';
+import type { TreemapConfig } from '../vis/treemap';
+import type { VennConfig } from '../vis/venn';
+import type { ViolinConfig } from '../vis/violin';
+import type { WaterfallConfig } from '../vis/waterfall';
+import type { WordCloudConfig } from '../vis/word-cloud';
+/**
+ * Union type for all supported chart configurations
+ */
+export type GPTVisConfig = AreaConfig | BarConfig | BoxplotConfig | ColumnConfig | DualAxesConfig | FlowDiagramConfig | FunnelConfig | HistogramConfig | IndentedTreeConfig | LineConfig | LiquidConfig | MindmapConfig | NetworkGraphConfig | OrganizationChartConfig | PieConfig | RadarConfig | SankeyConfig | ScatterConfig | SummaryConfig | TableConfig | TreemapConfig | VennConfig | ViolinConfig | WaterfallConfig | WordCloudConfig | FishboneDiagramConfig;
+/**
+ * GPTVis is the unified API for all chart types.
+ * It provides a simple interface to render different types of visualizations.
+ *
+ * @example
+ * ```ts
+ * import { GPTVis } from '@antv/gpt-vis';
+ *
+ * const g = new GPTVis({
+ *   container: '#container',
+ *   width: 600,
+ *   height: 400,
+ *   theme: 'academy', // Optional theme
+ *   wrapper: true, // Enable wrapper with tabs and controls (default: false)
+ * });
+ *
+ * // Render with config object
+ * g.render({
+ *   type: 'pie',
+ *   data: [
+ *     { category: '分类一', value: 27 },
+ *     { category: '分类二', value: 25 },
+ *   ],
+ *   innerRadius: 0.6,
+ * });
+ *
+ * // Or render with syntax string
+ * g.render(`
+ * vis pie
+ * data
+ *   - category 分类一
+ *     value 27
+ *   - category 分类二
+ *     value 25
+ * innerRadius: 0.6
+ * `);
+ *
+ * g.destroy();
+ * ```
+ */
+export declare class GPTVis {
+    private options;
+    private currentChart;
+    private currentChartType;
+    private wrapperInstance;
+    /**
+     * Chart type registry mapping type strings to factory functions
+     */
+    private static readonly chartRegistry;
+    /**
+     * Constructor
+     * @param options - Visualization options containing container, dimensions, and optional theme
+     */
+    constructor(options: VisualizationOptions);
+    /**
+     * Render a chart based on the provided configuration or syntax string.
+     *
+     * @param config - Chart configuration object (with type field) or syntax string (starting with 'vis [type]')
+     *
+     * @example
+     * ```ts
+     * // With config object
+     * g.render({
+     *   type: 'pie',
+     *   data: [{ category: 'A', value: 30 }, { category: 'B', value: 70 }]
+     * });
+     *
+     * // With syntax string
+     * g.render(`
+     * vis pie
+     * data
+     *   - category A
+     *     value 30
+     *   - category B
+     *     value 70
+     * `);
+     * ```
+     */
+    render(config: string | Record<string, unknown>): void;
+    /**
+     * Destroy the current chart instance and clean up resources
+     */
+    destroy(): void;
+}

package/dist/cjs/gpt-vis/index.js

@@ -0,0 +1,196 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/gpt-vis/index.ts
+var gpt_vis_exports = {};
+__export(gpt_vis_exports, {
+  GPTVis: () => GPTVis
+});
+module.exports = __toCommonJS(gpt_vis_exports);
+var import_parser = require("../syntax/parser");
+var import_container = require("../util/container");
+var import_vis_wrapper = require("../vis-wrapper");
+var import_area = require("../vis/area");
+var import_bar = require("../vis/bar");
+var import_boxplot = require("../vis/boxplot");
+var import_column = require("../vis/column");
+var import_dual_axes = require("../vis/dual-axes");
+var import_fishbone_diagram = require("../vis/fishbone-diagram");
+var import_flow_diagram = require("../vis/flow-diagram");
+var import_funnel = require("../vis/funnel");
+var import_histogram = require("../vis/histogram");
+var import_indented_tree = require("../vis/indented-tree");
+var import_line = require("../vis/line");
+var import_liquid = require("../vis/liquid");
+var import_mindmap = require("../vis/mindmap");
+var import_network_graph = require("../vis/network-graph");
+var import_organization_chart = require("../vis/organization-chart");
+var import_pie = require("../vis/pie");
+var import_radar = require("../vis/radar");
+var import_sankey = require("../vis/sankey");
+var import_scatter = require("../vis/scatter");
+var import_summary = require("../vis/summary");
+var import_table = require("../vis/table");
+var import_treemap = require("../vis/treemap");
+var import_venn = require("../vis/venn");
+var import_violin = require("../vis/violin");
+var import_waterfall = require("../vis/waterfall");
+var import_word_cloud = require("../vis/word-cloud");
+var _GPTVis = class {
+  /**
+   * Constructor
+   * @param options - Visualization options containing container, dimensions, and optional theme
+   */
+  constructor(options) {
+    this.currentChart = null;
+    this.currentChartType = "";
+    this.wrapperInstance = null;
+    this.options = {
+      ...options,
+      container: (0, import_container.resolveContainer)(options.container)
+    };
+  }
+  /**
+   * Render a chart based on the provided configuration or syntax string.
+   *
+   * @param config - Chart configuration object (with type field) or syntax string (starting with 'vis [type]')
+   *
+   * @example
+   * ```ts
+   * // With config object
+   * g.render({
+   *   type: 'pie',
+   *   data: [{ category: 'A', value: 30 }, { category: 'B', value: 70 }]
+   * });
+   *
+   * // With syntax string
+   * g.render(`
+   * vis pie
+   * data
+   *   - category A
+   *     value 30
+   *   - category B
+   *     value 70
+   * `);
+   * ```
+   */
+  render(config) {
+    let type = "";
+    let chartConfig;
+    if (!(0, import_parser.isVisSyntax)(config) && typeof config === "string") {
+      type = "summary";
+      chartConfig = config;
+    } else {
+      chartConfig = typeof config === "string" ? (0, import_parser.parse)(config) : config;
+      type = chartConfig.type;
+    }
+    if (!type) {
+      throw new Error(
+        'Chart type is required. Please provide a "type" field in the config object or use syntax string starting with "vis [type]".'
+      );
+    }
+    if (!type) {
+      throw new Error("Chart type is required");
+    }
+    const chartFactory = _GPTVis.chartRegistry[type];
+    if (!chartFactory) {
+      const availableTypes = Object.keys(_GPTVis.chartRegistry).join(", ");
+      throw new Error(`Unsupported chart type: "${type}". Available types: ${availableTypes}`);
+    }
+    let chartContainer = this.options.container;
+    if (this.options.wrapper) {
+      if (!this.wrapperInstance) {
+        this.wrapperInstance = (0, import_vis_wrapper.createVisWrapper)(this.options.container, {
+          chartType: type,
+          syntax: config,
+          locale: this.options.locale || "zh-CN"
+        });
+      } else {
+        this.wrapperInstance.update(config);
+      }
+      chartContainer = this.wrapperInstance.chartContainer;
+    }
+    if (this.currentChart && this.currentChartType === type) {
+      this.currentChart.render(chartConfig);
+    } else {
+      if (this.currentChart) {
+        this.currentChart.destroy();
+      }
+      const chartOptions = {
+        ...this.options,
+        container: chartContainer
+      };
+      this.currentChart = chartFactory(chartOptions);
+      this.currentChartType = type;
+      this.currentChart.render(chartConfig);
+    }
+    if (this.wrapperInstance) {
+      this.wrapperInstance.setChartRef(this.currentChart);
+    }
+  }
+  /**
+   * Destroy the current chart instance and clean up resources
+   */
+  destroy() {
+    if (this.currentChart) {
+      this.currentChart.destroy();
+      this.currentChart = null;
+      this.currentChartType = "";
+    }
+    if (this.wrapperInstance) {
+      this.wrapperInstance.destroy();
+      this.wrapperInstance = null;
+    }
+  }
+};
+var GPTVis = _GPTVis;
+/**
+ * Chart type registry mapping type strings to factory functions
+ */
+GPTVis.chartRegistry = {
+  area: import_area.Area,
+  bar: import_bar.Bar,
+  boxplot: import_boxplot.Boxplot,
+  column: import_column.Column,
+  "dual-axes": import_dual_axes.DualAxes,
+  "flow-diagram": import_flow_diagram.FlowDiagram,
+  funnel: import_funnel.Funnel,
+  histogram: import_histogram.Histogram,
+  "indented-tree": import_indented_tree.IndentedTree,
+  line: import_line.Line,
+  liquid: import_liquid.Liquid,
+  mindmap: import_mindmap.Mindmap,
+  "network-graph": import_network_graph.NetworkGraph,
+  "organization-chart": import_organization_chart.OrganizationChart,
+  pie: import_pie.Pie,
+  radar: import_radar.Radar,
+  sankey: import_sankey.Sankey,
+  scatter: import_scatter.Scatter,
+  summary: import_summary.Summary,
+  table: import_table.Table,
+  treemap: import_treemap.Treemap,
+  venn: import_venn.Venn,
+  violin: import_violin.Violin,
+  waterfall: import_waterfall.Waterfall,
+  "word-cloud": import_word_cloud.WordCloud,
+  "fishbone-diagram": import_fishbone_diagram.FishboneDiagram
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GPTVis
+});