前言
VisActor 提供从数据到展现的全流程解决方案，以“可视化叙事”及“智能化”为核心发展方向。该解决方案内承载“可视化叙事” 能力的组件主要有VChart、VTable 和 VGrammar。虽然各个组件都对外提供了简单易用的接口，但是我们希望在一些典型场景中，用户可以无代码生成图表和叙事作品，持续降低用户的学习成本和使用复杂度。
大语言模型强大的生成能力为VChart提供了一个自然语言的交互接口，允许我们通过自然语言直接调用VChart的各项能力，简单、快速、高质量地完成图表生成与编辑。
VisActor 团队基于 Open AI 的接口进行尝试和沉淀，对外发布了 VMind 智能可视化组件的“尝鲜版” NPM 包。本文从应用层面为您介绍VMind “尝鲜版”的基础能力及使用方法，最后会简单介绍后续的功能规划及代码开源计划。
VMind 是什么
VMind 是 可视化解决方案 VisActor体系中的智能可视化组件，基于规则算法、人工智能、机器学习、大语言模型等多种方式提供智能化接口，以最大限度降低开发者使用可视化组件的心智负担。
从VisActor的这张架构图，我们可以看到VMind所处的位置。
当前发布的 @VisActor/VMind “尝鲜版” 基于大语言模型的图表智能组件，面向是VChart，提供图表智能生成、智能配色、对话式图表编辑等能力。
使用VMind，用户仅需在收集好数据之后，一句话描述想要展示的内容，便能直接生成图表动画，并支持一键导出为视频和GIF，极大地降低了图表生成及数据视频的创作门槛。
VMind目前支持柱状图、饼图、折线图、散点图、词云、动态条形图。你可以参考VChart快速上手使用VChart将其绘制出来，或者继续使用VMind将其导出为视频或GIF。更丰富的特性正在紧张开发中。
接下来，我们将展示使用VMind制作图表的完整流程。
VMind 极速上手
第一步 快速体验
目前我们放置了一个demo在 VChart 仓库中，你只需要clone 或者直接下载github.com/VisActor/VC… 代码到本地，然后执行命令：
rush update
rush docs
然后浏览器打开 http://localhost:3020/vchart/VMind，就可以启动demo 页面。
通过如下步骤就可以快速生成一个图表。
同时，我们准备了多份数据帮助您进行快速体验。
最后，在图表生成之后，可以直接导出Gif 或者视频文件。
看看效果吧！
第二步 1分钟快餐
Github 中提供的并不是完整的可以使用的工具，是为开发者展示如何使用VMind 组件，下面我们展示如何在1分钟之内学会开发。
示例代码所在路径为：github.com/VisActor/VC…
备米
俗话说“巧妇难为无米之炊”，数据就是图表的米。我们准备如下一份汽车销售数据。
Time,Manufacturer,Sales
2022-01,SAIC Volkswagen,124491
2022-01,Changan Automobile,123707
2022-01,Geely Automobile,112325
2022-01,Dongfeng Nissan,110996
2022-01,FAW-Volkswagen,103462
2022-01,GAC Toyota,99707
2022-01,BYD,93363
2022-01,BMW Brilliance,79087
2022-01,GAC Honda,77377
（...)
备锅
VMind 就是可以用来煮饭的锅
首先，我们需要在项目中安装VMind：
# 使用 npm 安装
npm install @visactor/vmind
# 使用 yarn 安装
yarn add @visactor/vmind
接下来，在 JavaScript 文件顶部使用 import 引入 VMind
import VMind from '@visactor/vmind';
随后，我们便可在项目中使用VMind。
煮饭
VMind目前仅支持OpenAI GPT-3.5模型，你需要提供OpenAI API key才能使用。未来我们将支持更多的大模型，并允许用户自定义调用大模型的方法。
接下来，我们初始化一个VMind实例，并传入OpenAI Key：
const vmind = new VMind(openAIKey); //传入您的openAI key
我们想要展示的内容为“各品牌汽车销量排行的变化”。调用generateChart方法，将数据和展示内容描述直接传递给VMind。
const describe='show me the changes in sales rankings of various car brand'
const { spec, time } = await (vmind.generateChart(csvData, describe)); //图表智能生成，传入您的csv格式的数据和图表描述，返回图表spec和图表动画时长
这样我们就得到了对应动态图表的VChart spec。
吃饭
得到了VChart spec之后，我们可以基于该spec 渲染图表。
<body>
<!-- 为 vchart 准备一个具备大小（宽高）的 DOM，当然你也可以在 spec 配置中指定 -->
<div id="chart" style="width: 600px;height:400px;"></div>
</body>
// 创建 vchart 实例
const vchart = new VChart(spec, { dom: 'chart' });
// 绘制
vchart.renderAsync();
也可以导出图片和视频。
//导出视频
const videoSrc = await vmind.exportVideo(spec, time); //传入图表spec和视频时长，返回ObjectURL
//导出GIF图片
const gifSrc = await vmind.exportGIF(spec, time); //传入图表spec和GIF时长，返回ObjectURL
//创建dom元素，实现文件下载
const a = document.createElement('a');
a.href = videoSrc;
a.download = `${filename}.mp4`; //设置保存的文件名
a.dispatchEvent(new MouseEvent('click')); //保存文件
第三步 厨艺进阶
得益于大语言模型的能力，用户可以通过自然语言描述更多的需求。下面举例说明。
定制风味
用户可以指定不同的主题风格，例如：
const describe='show me the changes in sales rankings of various car brand,tech style'
const { spec, time } = await (vmind.generateChart(csvData, describe));
定制菜品
可以指定VMind 支持的图表类型，字段映射等等。比如：
const describe='show me the changes in sales rankings of various car brands,tech style.Using a line chart, Manufacturer makes the x-axis'
const { spec, time } = await (vmind.generateChart(csvData, describe));
定制烹饪时长
可以直接描述你要生成的图表动画时长。比如：
const describe='show me the changes in sales rankings of various car brands,for 10 seconds'
const { spec, time } = await (vmind.generateChart(csvData, describe));
数据视频
数据视频是一种通过图表、动画、标注、旁白等方式展示和介绍数据内容的视频形式。通过数据视频，可以将抽象的数据转化为直观的图形展示，以更加有趣的形式进行展现，让观众更加易于理解和接受。
基于VMind 结合视频编辑工具，可以很容易制作丰富多彩的数据视频。
导出视频
上面我们已经展示过如何生成图表，使用以下代码，将生成的图表导出为GIF或视频：
//导出视频
const videoSrc = await vmind.exportVideo(spec, time); //传入图表spec和视频时长，返回ObjectURL
//导出GIF图片
const gifSrc = await vmind.exportGIF(spec, time); //传入图表spec和GIF时长，返回ObjectURL
//创建dom元素，实现文件下载
const a = document.createElement('a')
a.href = videoSrc
a.download = `${filename}.mp4` //设置保存的文件名
a.dispatchEvent(new MouseEvent('click')) //保存文件
最终导出的视频如下：
你可以将导出的视频或GIF导入到视频编辑软件中，继续完成数据视频的制作。
编辑视频
我们可以将VMind生成的数据视频导入到剪映、Pr、Final Cut等视频制作工具中，添加字幕、背景音乐、音效、转场效果等，使得视频更生动有趣：
最终我们得到了如下的数据视频片段：
发布视频
你可以将它发布在抖音等各类短视频平台，或者插入到PPT中用于演示、汇报等方面，让更多人了解你的想法。
功能规划
目前 VMind 只提供了非常少量的功能供试用，接下来的版本我们将以下几个方面做重大的更新：
更丰富的图表类型
将全面支持 VChart （www.visactor.io/vchart）所包含的…
更全面的属性配置
可以通过自然语言的方式细粒度控制图表、动画、图片、视频的各种属性。
更智能的上下文理解
为满足更通用的图文和视频叙事场景，我们将加入从普通文字中解析数据及意图的能力。例如：
适配更多的模型
我们目前的实现基于Gpt-3.5，将来我们希望支持更多的模型，不限于大语言模型。
代码开源
目前我们只是发布了NPM包，将最简单的功能放出来供大家体验，没有将代码完整开源是因为核心功能还在开发中。另外同大模型结合是一个探索方向，我们需要得到更多的输入和反馈，以及真实的业务需求，进行一段打磨再进行开源。初步计划在2023年的最后一个季度。 这也是我们提前想让大家进行体验的原因，大家的真实反馈会加速代码开源。
为了搜集大家的建议，我们专门在github 上开了一个用于讨论的issue(github.com/VisActor/VC…)
- 如果你有使用VMind 的场景，请将你的需求反馈给我们
- 如果你愿意参与VMind 的开源建设，请积极评论
- 如果你有新的想法，请不吝赐教
- 如果你觉得我们的工作值得鼓励，欢迎 star
总结
长路漫漫，但是我们相信这是一个好的开端。欢迎持续关注、支持VisActor的开源建设。
官方网站： www.visactor.io/
github：github.com/VisActor/
微信公众号：
