VizGPT 开源项目安装与使用指南

项目概述

VizGPT 是一个由 CSDN 公司开发的 InsCode AI 大模型类似的AI数据可视化工具，它通过聊天界面允许用户从表格数据生成上下文相关的数据可视化图表。该工具旨在简化复杂的数据可视化创建过程，尤其对于不熟悉配置和数据转换细节的用户。用户可以通过自然语言指令逐步构建和调整可视化效果，无需重写复杂的查询命令。

目录结构及介绍

VizGPT 的项目结构组织如下：

.
├── api                   # API相关服务代码
├── src                  # 主要源代码目录
│   ├── components       # 组件文件夹，包含UI组件
│   ├── pages            # 页面路由文件夹，每个页面有其对应的React组件
│   ├── utils            # 工具函数集合
│   └── ...              # 其他相关子目录
├── .eslintrc.cjs        # ESLint配置文件
├── .gitattributes       # Git属性文件
├── .gitignore           # Git忽略文件列表
├── LICENSE              # 许可证文件
├── README.md            # 项目说明文档
├── index.html           # HTML入口文件
├── package.json         # 包依赖与脚本定义文件
├── postcss.config.js    # PostCSS配置文件
├── tailwind.config.js   # Tailwind CSS配置文件
├── tsconfig.json        # TypeScript编译配置文件
├── tsconfig.node.json   # 特定于Node环境的TypeScript配置
├── vite.config.ts       # Vite构建配置文件
└── yarn.lock            # Yarn包锁定文件

启动文件介绍

启动VizGPT项目主要涉及到的是使用package.json中定义的脚本进行操作。虽然直接的“启动文件”可能不是显而易见的一个单独文件，但通常通过以下命令来启动开发服务器：

yarn install      # 安装依赖
yarn dev          # 启动本地开发服务器

yarn dev或npm run dev是用于启动开发环境中的应用的标准命令，它依据vite.config.ts配置文件运行。

配置文件介绍

.env 文件（需手动创建）

在项目根目录下，你需要手动创建一个.env文件来设置必要的环境变量，这对于应用的正确运行至关重要：

BASE_URL=<Azure OpenAI BaseURL>
DEPLOYMENT_NAME=<Deployment Name>
AZURE_OPENAI_KEY=<Your key>

这些环境变量确保了项目可以连接到Azure OpenAI服务进行文本到可视化图表的转换。

package.json

package.json存放着项目的元数据、依赖项以及脚本命令，是管理项目依赖和执行不同任务的核心文件。它包含了启动开发服务器、构建应用等命令定义。

tsconfig.json 和 tsconfig.node.json

这两个配置文件指导TypeScript编译器如何处理TypeScript代码。tsconfig.json适用于前端代码编译，而tsconfig.node.json则专门用于Node.js环境下的编译配置，确保代码兼容服务端需求。

通过遵循上述介绍，你可以顺利地搭建并开始探索VizGPT，利用其强大的AI辅助功能进行数据可视化的设计与定制。