Merge branch 'develop' of github.com:VisActor/VMind into develop

docs/assets/guide/en/Basic_Tutorial/Chart_Generation.md

@@ -253,19 +253,19 @@ This can reduce the process of calling the large model once, reduce token consum
 
 ## Chart Types Supported by VMind
 VMind currently supports 13 common chart types in VChart:
-- Bar chart
-- Line chart
-- Pie chart
-- Scatter plot
-- Dual-axis chart
-- Word cloud
-- Rose chart
-- Radar chart
-- Box plot
-- Funnel chart
-- Sankey diagram
-- Waterfall chart
-- [Dynamic bar chart (ranking bar)](https://www.visactor.io/vchart/demo/storytelling/ranking-bar)
+- [Bar Chart](https://www.visactor.io/vchart/demo/bar-chart/basic-column)
+- [Line Chart](hhttps://www.visactor.io/vchart/demo/line-chart/basic-line)
+- [Pie Chart](https://www.visactor.io/vchart/demo/pie-chart/basic-pie)
+- [Scatter Chart](https://www.visactor.io/vchart/demo/scatter-chart/basic-scatter)
+- [Dual Axis Chart](https://www.visactor.io/vchart/demo/combination/dual-axis)
+- [Word Cloud](https://www.visactor.io/vchart/demo/word-cloud-chart/word-cloud-basic)
+- [Rose Chart](https://www.visactor.io/vchart/demo/rose-chart/basic-rose)
+- [Radar Chart](https://www.visactor.io/vchart/demo/radar-chart/basic-radar)
+- [Box Plot](https://www.visactor.io/vchart/demo/box-plot/basic-box-plot)
+- [Funnel Chart](https://www.visactor.io/vchart/demo/funnel-chart/basic-funnel)
+- [Sankey Chart](https://www.visactor.io/vchart/demo/sankey-chart/basic-sankey)
+- [Waterfall Chart](https://www.visactor.io/vchart/demo/waterfall/basic-waterfall)
+- [Dynamic Bar Chart (ranking bar)](https://www.visactor.io/vchart/demo/storytelling/ranking-bar)
 
 Depending on the `userPrompt` and `fieldInfo`, these chart types may all be recommended by the large language model.
 

docs/assets/guide/en/Intro_to_VMind.md

@@ -4,7 +4,7 @@
 VisActor is a full-process visualization solution, which takes "visual storytelling" and "intelligence" as its core development direction. The components of VisActor that carry the ability of "visual storytelling" mainly include VChart, VTable, and VGrammar, all of which provide simple and easy-to-use interfaces. However, we hope that in some typical scenarios, users can generate charts and narrative works without writing code, thereby reducing the learning cost and complexity for users. The powerful generation ability of the large language model provides a natural language interaction interface for the VisActor visualization system, allowing us to directly call various functions of visualization components such as VChart and VTable through natural language, thereby completing visualization creation simply, quickly, and with high quality.
 
 
-![VMind](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vmind/tutorials/VMind_intro.png)
+![VMind](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vmind/tutorials/VMind_intro_eng.png)
 
 
 VMind is an intelligent visualization component built on the basic capabilities of visualization component libraries such as VChart and VTable. We hope that in some typical scenarios, users can generate charts and narrative works with just one sentence, thereby reducing the learning cost and complexity for users.
@@ -13,15 +13,15 @@ VMind is an intelligent visualization component built on the basic capabilities
 Intelligence is the future core direction of VisActor. Only on this basis can we truly reduce the access and development costs of developers and allow them to focus on things outside of visualization. VMind is an intelligent visualization component in the VisActor system. It provides intelligent interfaces in various ways such as rule algorithms, artificial intelligence, machine learning, and large language models to minimize the mental burden of developers using visualization components.
 
 
-![VMind Architecture Diagram](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vmind/tutorials/VMind_structure.png)
+![VMind Architecture Diagram](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vmind/tutorials/VMind_structure_eng.png)
 
 
 In the VMind component, the bottom layer is the chart rendering, animation, annotation capabilities, VChart documentation provided by the VChart chart library, and the natural language understanding and code generation capabilities provided by the large model. Among them, the data processing and interaction layer is responsible for processing user input data and natural language, including data aggregation modules for field parsing, data conversion, aggregation, etc., and the interaction communication module is responsible for handling communication between users and VMind, VMind and the large model, including user intent recognition, Prompt management, model communication, result parsing.
 
 ## VMind Core Capabilities
 
 
-![VMind Capability Diagram](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vmind/tutorials/VMind_abilities.png)
+![VMind Capability Diagram](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vmind/tutorials/VMind_abilities_eng.png)
 
 
 The core capabilities of VMind include intelligent chart generation, intelligent chart editing, and intelligent color matching.
@@ -34,7 +34,7 @@ Advanced capabilities are further applications of core capabilities, including c
 ## VMind Chart Creation Process
 
 
-![VMind Capability Diagram](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vmind/tutorials/VMind_flow.png)
+![VMind Capability Diagram](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vmind/tutorials/VMind_progress_eng.png)
 
 
 Based on VMind's intelligent chart generation, conversational editing, and intelligent color matching modules, we can summarize the full process of using VMind for chart creation:

docs/assets/guide/en/VMind_Website_Guide.md

@@ -17,15 +17,15 @@ After you complete [Getting Started](./Getting_Started), you can learn about the
 
 The VMind documentation provides detailed information on functions and APIs. Depending on your needs, you can view the following sections:
 
-- [Tutorials](./todo): Introduces the basic concepts of VMind and various usage methods.
+- [Tutorials](./Basic_Tutorial/Create_VMind_Instance): Introduces the basic concepts of VMind and various usage methods.
 
-- [API](./todo): Provides detailed descriptions of all available interfaces of VMind.
+- [API](../api/VMind_Instance): Provides detailed descriptions of all available interfaces of VMind.
 
-- [Examples](./todo): Provides some functional examples of VMind.
+<!--- [Examples](./todo): Provides some functional examples of VMind.
 
 ## Examples
 
-The example page provides many practical application cases of VMind. Each example provides a detailed description, key configuration information, and source code.
+The example page provides many practical application cases of VMind. Each example provides a detailed description, key configuration information, and source code.-->
 
 ## How to Use the Search Function
 

docs/assets/guide/zh/Basic_Tutorial/Chart_Generation.md

@@ -254,18 +254,18 @@ const { spec, time } = await vmind.generateChart(userPrompt, fieldInfo, dataset,
 
 ## VMind支持的图表类型
 VMind目前支持VChart中常见的13种图表类型：
-- 柱状图
-- 折线图
-- 饼图
-- 散点图
-- 双轴图
-- 词云
-- 玫瑰图
-- 雷达图
-- 箱型图
-- 漏斗图
-- 桑基图
-- 瀑布图
+- [柱状图](https://www.visactor.io/vchart/demo/bar-chart/basic-column)
+- [折线图](hhttps://www.visactor.io/vchart/demo/line-chart/basic-line)
+- [饼图](https://www.visactor.io/vchart/demo/pie-chart/basic-pie)
+- [散点图](https://www.visactor.io/vchart/demo/scatter-chart/basic-scatter)
+- [双轴图](https://www.visactor.io/vchart/demo/combination/dual-axis)
+- [词云](https://www.visactor.io/vchart/demo/word-cloud-chart/word-cloud-basic)
+- [玫瑰图](https://www.visactor.io/vchart/demo/rose-chart/basic-rose)
+- [雷达图](https://www.visactor.io/vchart/demo/radar-chart/basic-radar)
+- [箱型图](https://www.visactor.io/vchart/demo/box-plot/basic-box-plot)
+- [漏斗图](https://www.visactor.io/vchart/demo/funnel-chart/basic-funnel)
+- [桑基图](https://www.visactor.io/vchart/demo/sankey-chart/basic-sankey)
+- [瀑布图](https://www.visactor.io/vchart/demo/waterfall/basic-waterfall)
 - [动态条形图（ranking bar）](https://www.visactor.io/vchart/demo/storytelling/ranking-bar)
 
 根据`userPrompt`和`fieldInfo`的不同，这些图表类型都有可能被大语言模型推荐。

docs/assets/guide/zh/Intro_to_VMind.md

@@ -3,7 +3,7 @@
 VisActor是一款全流程可视化解决方案，它以“可视化叙事”和“智能化”为核心发展方向。VisActor承载“可视化叙事” 能力的组件主要有VChart、VTable 和 VGrammar，它们都提供了简单易用的接口。然而，我们希望在一些典型场景中，用户能够无需编写代码就能生成图表和叙事作品，以此降低用户的学习成本和使用复杂度。大语言模型的强大生成能力为VisActor可视化体系提供了一个自然语言的交互接口，使我们能够通过自然语言直接调用VChart、VTable等可视化组件的各项功能，从而简单、快速、高质量地完成可视化创作。
 
 
-![VMind](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vmind/tutorials/VMind_intro.png)
+![VMind](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vmind/tutorials/VMind_intro_ch.png)
 
 
 VMind是在VChart、VTable等可视化组件库的基础能力之上，构建的一个智能可视化组件。我们希望在一些典型场景中，用户能够只需一句话就能生成图表和叙事作品，以此降低用户的学习成本和使用复杂度。
@@ -12,7 +12,7 @@ VMind是在VChart、VTable等可视化组件库的基础能力之上，构建的
 智能化是VisActor的未来核心方向，只有在此基础上，我们才能真正降低开发者的接入和研发成本，让他们能够将注意力集中在可视化之外。VMind是VisActor体系中的智能可视化组件，它基于规则算法、人工智能、机器学习、大语言模型等多种方式提供智能化接口，以最大限度降低开发者使用可视化组件的心智负担。
 
 
-![VMind架构图](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vmind/tutorials/VMind_structure.png)
+![VMind架构图](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vmind/tutorials/VMind_structrure_ch.png)
 
 
 在VMind组件中，最底层是由VChart图表库提供的图表渲染、动画、标注能力、VChart文档，以及大语言模型提供的自然语言理解、代码生成能力。其中，数据处理与交互层负责处理用户输入的数据和自然语言，包括数据聚合模块进行字段解析、数据转换、聚合等操作，交互通信模块负责处理用户与VMind、VMind与大语言模型之间的通信，包括用户意图识别、Prompt管理，模型通信，结果解析。
@@ -21,7 +21,7 @@ VMind是在VChart、VTable等可视化组件库的基础能力之上，构建的
 ## VMind核心能力
 
 
-![VMind能力图](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vmind/tutorials/VMind_abilities.png)
+![VMind能力图](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vmind/tutorials/VMind_abilities_ch.png)
 
 
 VMind的核心能力包括图表智能生成、图表智能编辑和智能配色。
@@ -35,7 +35,7 @@ VMind的核心能力包括图表智能生成、图表智能编辑和智能配色
 ## VMind图表创作流程
 
 
-![VMind能力图](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vmind/tutorials/VMind_flow.png)
+![VMind能力图](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vmind/tutorials/VMind_progress_ch.png)
 
 
 基于VMind的图表智能生成、对话式编辑和智能配色模块，我们可以概括出使用VMind进行图表创作的全流程：

docs/assets/guide/zh/VMind_Website_Guide.md

@@ -18,15 +18,15 @@
 
 VMind 的文档提供了详细的功能和 API 信息。根据你的需求，你可以查看以下几个部分：
 
-- [教程](./todo)：介绍了 VMind 的基本概念和各种使用方法。
+- [教程](./Basic_Tutorial/Create_VMind_Instance)：介绍了 VMind 的基本概念和各种使用方法。
 
-- [API](./todo)：提供了 VMind 的所有可用接口的详细说明。
+- [API](../api/VMind_Instance)：提供了 VMind 的所有可用接口的详细说明。
 
-- [示例](./todo)：提供了 VMind 的一些功能示例。
+<!--- [示例](./todo)：提供了 VMind 的一些功能示例。
 
 ## 示例
 
-示例页面提供了许多关于 VMind 的实际应用案例。每个示例都提供了详细的描述、关键配置信息以及源代码。
+示例页面提供了许多关于 VMind 的实际应用案例。每个示例都提供了详细的描述、关键配置信息以及源代码。-->
 
 ## 如何使用搜索功能
 

packages/vmind/__tests__/browser/src/pages/ChartPreview.tsx

@@ -2,8 +2,11 @@ import React, { useState, useCallback, useEffect } from 'react';
 import './index.scss';
 import { Button, Input, Card, Space, Modal, Spin } from '@arco-design/web-react';
 import VChart from '@visactor/vchart';
+import { ManualTicker, defaultTimeline } from '@visactor/vrender-core';
 import VMind from '../../../../src';
 import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
+import { createCanvas } from 'canvas';
+
 const TextArea = Input.TextArea;
 
 type IPropsType = {
@@ -61,7 +64,10 @@ export function ChartPreview(props: IPropsType) {
     const data = await vmind.exportVideo(spec, time, {
       VChart,
       FFmpeg: ffmpeg,
-      fetchFile
+      fetchFile,
+      ManualTicker,
+      defaultTimeline,
+      createCanvas
     } as any);
     const src = URL.createObjectURL(new Blob([data], { type: 'video/mp4' }));
     setSrc(src);
@@ -82,7 +88,10 @@ export function ChartPreview(props: IPropsType) {
     const data = await vmind.exportGIF(spec, time, {
       VChart,
       FFmpeg: ffmpeg,
-      fetchFile
+      fetchFile,
+      ManualTicker,
+      defaultTimeline,
+      createCanvas
     } as any);
     const src = URL.createObjectURL(new Blob([data], { type: 'video/mp4' }));
     setSrc(src);

packages/vmind/package.json

@@ -79,16 +79,16 @@
     "react-dom": "^18.0.0",
     "react-router-dom": "6.9.0",
     "@visactor/vchart": "^1.9.0",
-    "@visactor/vrender-core": "^0.17.19",
     "@rollup/plugin-dynamic-import-vars": "~2.1.0",
     "@types/lodash": "4.14.182",
     "@types/node": "*",
     "dotenv": "~16.3.1",
-    "@ffmpeg/ffmpeg": "^0.11.6"
+    "@ffmpeg/ffmpeg": "^0.11.6",
+    "@visactor/vrender-core": "^0.17.23",
+    "canvas": "^2.11.2"
   },
   "dependencies": {
     "@visactor/chart-advisor": "0.1.10",
-    "@visactor/vrender-core": "^0.17.19",
     "@visactor/vdataset": "~0.17.4",
     "@visactor/vutils": "~0.17.4",
     "axios": "^1.4.0",

packages/vmind/src/chart-to-video/index.ts

@@ -1,32 +1,34 @@
-import { ManualTicker, defaultTimeline } from '@visactor/vrender-core';
-import type { FFmpeg } from '@ffmpeg/ffmpeg';
 import { cloneDeep } from 'lodash';
-import { TimeType } from '../typings';
+import { OuterPackages, TimeType } from '../typings';
 
 let idx = 0;
 export async function _chatToVideoWasm(
-  VChart: any,
-  ffmpeg: FFmpeg,
-  fetchFile: (data: string | Buffer | Blob | File) => Promise<Uint8Array>,
   fps: number,
   propsSpec: any,
   propsTime: TimeType,
-  outName = 'out'
+  outName = 'out',
+  outerPackages: OuterPackages
 ) {
+  const { ManualTicker, defaultTimeline, VChart, fetchFile, FFmpeg, createCanvas } = outerPackages;
+
   idx++;
   const defaultTicker = new ManualTicker();
   const spec = cloneDeep(propsSpec);
   const time = cloneDeep(propsTime);
   const { totalTime, frameArr } = time;
+
+  const width = spec.width ?? 720;
+  const height = spec.height ?? 480;
+  spec.width = width;
+  spec.height = height;
+
   // 关闭player
   if (frameArr && frameArr.length) {
     spec.player && (spec.player.auto = false);
   }
   defaultTicker.mode = 'manual';
-  spec.width = 720;
-  spec.height = 480;
-  const canvas = document.createElement('canvas');
-  document.body.appendChild(canvas);
+
+  const canvas = createCanvas(width, height);
   const vchart = new VChart(spec, {
     renderCanvas: canvas,
     mode: 'desktop-browser',
@@ -93,11 +95,11 @@ export async function _chatToVideoWasm(
     // defaultTicker.mode = 'raf'
     // const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
     // console.log(new Uint8Array(imageData.data.buffer))
-    ffmpeg.FS('writeFile', `vchart${idx}.${num}.png`, await fetchFile((blob as any).data));
+    FFmpeg.FS('writeFile', `vchart${idx}.${num}.png`, await fetchFile((blob as any).data));
   }
 
   vchart.release();
-  await ffmpeg.run(
+  await FFmpeg.run(
     '-framerate',
     '30',
     '-pattern_type',
@@ -112,7 +114,7 @@ export async function _chatToVideoWasm(
   );
   for (let i = 0; i <= frame; i++) {
     const num = `0000${i}`.slice(-3);
-    ffmpeg.FS('unlink', `vchart${idx}.${num}.png`);
+    FFmpeg.FS('unlink', `vchart${idx}.${num}.png`);
   }
   // defaultTicker.mode = 'raf';
 }

packages/vmind/src/core/VMind.ts

@@ -97,17 +97,17 @@ class VMind {
   }
 
   async exportVideo(spec: any, time: TimeType, outerPackages: OuterPackages) {
-    const { VChart, FFmpeg, fetchFile } = outerPackages;
+    const { VChart, FFmpeg, fetchFile, ManualTicker } = outerPackages;
     const outName = `out`;
-    await _chatToVideoWasm(VChart, FFmpeg, fetchFile, this._FPS, spec, time, outName);
+    await _chatToVideoWasm(this._FPS, spec, time, outName, outerPackages);
     const data = FFmpeg.FS('readFile', `${outName}.mp4`);
     return data.buffer;
   }
 
   async exportGIF(spec: any, time: TimeType, outerPackages: OuterPackages) {
     const { VChart, FFmpeg, fetchFile } = outerPackages;
     const outName = `out`;
-    await _chatToVideoWasm(VChart, FFmpeg, fetchFile, this._FPS, spec, time, outName);
+    await _chatToVideoWasm(this._FPS, spec, time, outName, outerPackages);
     // 调色板
     await FFmpeg.run('-i', `${outName}.mp4`, '-filter_complex', '[0:v] palettegen', 'palette.png');
     await FFmpeg.run(

packages/vmind/src/typings/index.ts

@@ -1,5 +1,5 @@
 import type { FFmpeg } from '@ffmpeg/ffmpeg';
-import type { VChart } from '@visactor/vchart';
+import type { ManualTicker, DefaultTimeline } from '@visactor/vrender-core';
 
 export interface ILLMOptions {
   url?: string; //URL of your LLM service. For gpt, default is openAI API.
@@ -84,9 +84,12 @@ export type TimeType = {
 };
 
 export type OuterPackages = {
-  VChart: VChart;
+  VChart: any;
   FFmpeg: FFmpeg;
   fetchFile: (data: string | Buffer | Blob | File) => Promise<Uint8Array>;
+  ManualTicker: typeof ManualTicker;
+  defaultTimeline: DefaultTimeline;
+  createCanvas: any;
 };
 
 export enum DataType {