Skip to content

Commit

Permalink
feat: change describe
Browse files Browse the repository at this point in the history
  • Loading branch information
da730 committed Feb 5, 2024
1 parent ab1e49f commit b2a544b
Show file tree
Hide file tree
Showing 14 changed files with 63 additions and 211 deletions.
14 changes: 7 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -136,9 +136,9 @@ const { fieldInfo, dataset } = await vmind.parseCSVDataWithLLM(csv, userInput);
We want to show "the changes in sales rankings of various car brands". Call the generateChart method and pass the data and display content description directly to VMind:

```typescript
const describe = 'show me the changes in sales rankings of various car brand';
const userPrompt = 'show me the changes in sales rankings of various car brand';
//Call the chart generation interface to get spec and chart animation duration
const { spec, time } = await vmind.generateChart(describe, fieldInfo, dataset);
const { spec, time } = await vmind.generateChart(userPrompt, fieldInfo, dataset);
```

In this way, we get the VChart spec of the corresponding dynamic chart. We can render the chart based on this spec:
Expand All @@ -161,19 +161,19 @@ Thanks to the capabilities of the large language model, users can describe more
Users can specify different theme styles (currently only gpt chart generation supports this feature). For example, users can specify to generate a tech-style chart:

```typescript
//describe can be in both Chinese and English
//userPrompt can be in both Chinese and English
//Specify to generate a tech-style chart
const describe = 'show me the changes in sales rankings of various car brand,tech style';
const { spec, time } = await vmind.generateChart(describe, fieldInfo, dataset);
const userPrompt = 'show me the changes in sales rankings of various car brand,tech style';
const { spec, time } = await vmind.generateChart(userPrompt, fieldInfo, dataset);
```

You can also specify the chart type, field mapping, etc. supported by VMind. For example:

```typescript
//Specify to generate a line chart, with car manufacturers as the x-axis
const describe =
const userPrompt =
'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, dataset));
const { spec, time } = await vmind.generateChart(userPrompt, fieldInfo, dataset);
```

#### Customizing LLM Request Method
Expand Down
12 changes: 6 additions & 6 deletions docs/assets/guide/en/Basic_Tutorial/Data_Aggregation.md
Original file line number Diff line number Diff line change
Expand Up @@ -181,11 +181,11 @@ const sourceFieldInfo = [
}
]

const describe=`Show the sales of each product`
const userPrompt=`Show the sales of each product`
const vmind = new VMind(options)

// Call dataQuery with describe, sourceFieldInfo, and sourceDataset to perform data aggregation
const { fieldInfo, dataset } = vmind.dataQuery(describe, sourceFieldInfo, sourceDataset);
// Call dataQuery with userPrompt, sourceFieldInfo, and sourceDataset to perform data aggregation
const { fieldInfo, dataset } = vmind.dataQuery(userPrompt, sourceFieldInfo, sourceDataset);
```

In this example, the dataset returned by the dataQuery function is as follows:
Expand Down Expand Up @@ -361,11 +361,11 @@ const sourceFieldInfo = [
Suppose we want to show the top three products in terms of sales in the north region, we can do this:

```ts
const describe = `Show me the top three products in terms of sales in the north region`
const userPrompt = `Show me the top three products in terms of sales in the north region`
const vmind = new VMind(options)

// Call the dataQuery method, pass in describe, sourceFieldInfo, and sourceDataset to perform data aggregation
const { fieldInfo, dataset } = vmind.dataQuery(describe, sourceFieldInfo, sourceDataset);
// Call the dataQuery method, pass in userPrompt, sourceFieldInfo, and sourceDataset to perform data aggregation
const { fieldInfo, dataset } = vmind.dataQuery(userPrompt, sourceFieldInfo, sourceDataset);
```

During the execution of the dataQuery method, the following SQL statement will be generated:
Expand Down
4 changes: 2 additions & 2 deletions docs/assets/guide/en/Basic_Tutorial/Data_Process.md
Original file line number Diff line number Diff line change
Expand Up @@ -221,8 +221,8 @@ Mirinda,east,830
Mirinda,west,532
Mirinda,north,498`

const describe=`Show the sales of each product in different regions`
const userPrompt=`Show the sales of each product in different regions`
const vmind = new VMind(options)
const { fieldInfo, dataset } = vmind.parseCSVData(parseCSVDataWithLLM, describe);
const { fieldInfo, dataset } = vmind.parseCSVData(csv, userPrompt);
```
In this example, the returned dataset and fieldInfo are the same as the product sales dataset in the previous chapter.
42 changes: 21 additions & 21 deletions docs/assets/guide/en/Getting_Started.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,23 +66,23 @@ And to generate a chart with VMind, you only need to:
For example, we want to use the following product sales data to show the sales of various products in different regions:

| Product Name | region | Sales |
| -------- | ------ | ------ |
| Cola | south | 2350 |
| Cola | east | 1027 |
| Cola | west | 1027 |
| Cola | north | 1027 |
| Sprite | south | 215 |
| Sprite | east | 654 |
| Sprite | west | 159 |
| Sprite | north | 28 |
| Fanta | south | 345 |
| Fanta | east | 654 |
| Fanta | west | 2100 |
| Fanta | north | 1679 |
| Red Bull | south | 1476 |
| Red Bull | east | 830 |
| Red Bull | west | 532 |
| Red Bull | north | 498 |
| ------------ | ------ | ----- |
| Cola | south | 2350 |
| Cola | east | 1027 |
| Cola | west | 1027 |
| Cola | north | 1027 |
| Sprite | south | 215 |
| Sprite | east | 654 |
| Sprite | west | 159 |
| Sprite | north | 28 |
| Fanta | south | 345 |
| Fanta | east | 654 |
| Fanta | west | 2100 |
| Fanta | north | 1679 |
| Red Bull | south | 1476 |
| Red Bull | east | 830 |
| Red Bull | west | 532 |
| Red Bull | north | 498 |

In order to use csv data in the subsequent process, you need to call the data processing method, extract the field information in the data, and convert it into a structured dataset. VMind provides methods based on rules and large models to obtain field information:
```ts
Expand Down Expand Up @@ -111,9 +111,9 @@ const { fieldInfo, dataset } = await vmind.parseCSVDataWithLLM(csvData, userInpu

The content we want to show is "the changes in the sales rankings of various car brands". Call the generateChart method and pass the data and display content description directly to VMind:
```typescript
const describe='show me the changes in sales rankings of various car brand'
const userPrompt='show me the changes in sales rankings of various car brand'
//Call the chart generation interface to get spec and chart animation duration
const { spec, time } = await vmind.generateChart(userInput, fieldInfo, dataset);
const { spec, time } = await vmind.generateChart(userPrompt, fieldInfo, dataset);
```

Next, we can use VChart to draw the generated chart.
Expand Down Expand Up @@ -142,8 +142,8 @@ The generated chart is as follows:
We can also make more requests for the chart, for example:

```typescript
const describe = 'Help me show the sales of various products in different regions, use line charts, and use region as the x-axis';
const { spec, time } = await vmind.generateChart(userInput, fieldInfo, dataset);
const userPrompt = 'Help me show the sales of various products in different regions, use line charts, and use region as the x-axis';
const { spec, time } = await vmind.generateChart(userPrompt, fieldInfo, dataset);
```

The generated chart is as follows:
Expand Down
4 changes: 2 additions & 2 deletions docs/assets/guide/zh/Basic_Tutorial/Data_Process.md
Original file line number Diff line number Diff line change
Expand Up @@ -215,9 +215,9 @@ Mirinda,east,830
Mirinda,west,532
Mirinda,north,498`

const describe=`展示各商品在不同区域销售额`
const userPrompt=`展示各商品在不同区域销售额`
const vmind = new VMind(options)
const { fieldInfo, dataset } = vmind.parseCSVData(parseCSVDataWithLLM, describe);
const { fieldInfo, dataset } = vmind.parseCSVData(csv, userPrompt);
```

关于VMind实例的创建以及options中的详细配置,可以参见[创建VMind实例](./Create_VMind_Instance.md)
Expand Down
8 changes: 4 additions & 4 deletions docs/assets/guide/zh/Getting_Started.md
Original file line number Diff line number Diff line change
Expand Up @@ -111,9 +111,9 @@ const { fieldInfo, dataset } = await vmind.parseCSVDataWithLLM(csvData, userInpu

我们想要展示的内容为“各品牌汽车销量排行的变化”。调用generateChart方法,将数据和展示内容描述直接传递给VMind:
```typescript
const describe='show me the changes in sales rankings of various car brand'
const userPrompt='show me the changes in sales rankings of various car brand'
//调用图表生成接口,获得spec和图表动画时长
const { spec, time } = await vmind.generateChart(userInput, fieldInfo, dataset);
const { spec, time } = await vmind.generateChart(userPrompt, fieldInfo, dataset);
```

接下来,我们就可以使用 VChart 绘制生成的图表。
Expand Down Expand Up @@ -142,8 +142,8 @@ vchart.renderSync();
我们还可对图表提更多的要求,例如:

```typescript
const describe = '帮我展示不同区域各商品销售额,使用折线图,region做x轴';
const { spec, time } = await vmind.generateChart(userInput, fieldInfo, dataset);
const userPrompt = '帮我展示不同区域各商品销售额,使用折线图,region做x轴';
const { spec, time } = await vmind.generateChart(userPrompt, fieldInfo, dataset);
```

生成的图表如下:
Expand Down
14 changes: 7 additions & 7 deletions packages/vmind/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -136,9 +136,9 @@ const { fieldInfo, dataset } = await vmind.parseCSVDataWithLLM(csv, userInput);
We want to show "the changes in sales rankings of various car brands". Call the generateChart method and pass the data and display content description directly to VMind:

```typescript
const describe = 'show me the changes in sales rankings of various car brand';
const userPrompt = 'show me the changes in sales rankings of various car brand';
//Call the chart generation interface to get spec and chart animation duration
const { spec, time } = await vmind.generateChart(describe, fieldInfo, dataset);
const { spec, time } = await vmind.generateChart(userPrompt, fieldInfo, dataset);
```

In this way, we get the VChart spec of the corresponding dynamic chart. We can render the chart based on this spec:
Expand All @@ -161,19 +161,19 @@ Thanks to the capabilities of the large language model, users can describe more
Users can specify different theme styles (currently only gpt chart generation supports this feature). For example, users can specify to generate a tech-style chart:

```typescript
//describe can be in both Chinese and English
//userPrompt can be in both Chinese and English
//Specify to generate a tech-style chart
const describe = 'show me the changes in sales rankings of various car brand,tech style';
const { spec, time } = await vmind.generateChart(describe, fieldInfo, dataset);
const userPrompt = 'show me the changes in sales rankings of various car brand,tech style';
const { spec, time } = await vmind.generateChart(userPrompt, fieldInfo, dataset);
```

You can also specify the chart type, field mapping, etc. supported by VMind. For example:

```typescript
//Specify to generate a line chart, with car manufacturers as the x-axis
const describe =
const userPrompt =
'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, dataset));
const { spec, time } = await vmind.generateChart(userPrompt, fieldInfo, dataset);
```

#### Customizing LLM Request Method
Expand Down
Binary file removed packages/vmind/docs/bar-eng.gif
Binary file not shown.
Binary file removed packages/vmind/docs/bar.gif
Binary file not shown.
148 changes: 0 additions & 148 deletions packages/vmind/docs/getting-started.md

This file was deleted.

Binary file removed packages/vmind/docs/line-eng.gif
Binary file not shown.
Binary file removed packages/vmind/docs/line.gif
Binary file not shown.
14 changes: 7 additions & 7 deletions packages/vmind/readme-zh.md
Original file line number Diff line number Diff line change
Expand Up @@ -136,9 +136,9 @@ const { fieldInfo, dataset } = await vmind.parseCSVDataWithLLM(csv, userInput);
我们想要展示的内容为“各品牌汽车销量排行的变化”。调用 generateChart 方法,将数据和展示内容描述直接传递给 VMind:

```typescript
const describe = 'show me the changes in sales rankings of various car brand';
const userPrompt = 'show me the changes in sales rankings of various car brand';
//调用图表生成接口,获得 spec 和图表动画时长
const { spec, time } = await vmind.generateChart(describe, fieldInfo, dataset);
const { spec, time } = await vmind.generateChart(userPrompt, fieldInfo, dataset);
```

这样我们就得到了对应动态图表的 VChart spec。我们可以基于该 spec 渲染图表:
Expand All @@ -161,19 +161,19 @@ vchart.renderAsync();
用户可以指定不同的主题风格(目前只有 gpt 版图表生成支持该功能)。例如,用户可以指定生成科技感风格的图表:

```typescript
//describe使用中英文均可
//userPrompt使用中英文均可
//指定生成科技感风格的图表
const describe = 'show me the changes in sales rankings of various car brand,tech style';
const { spec, time } = await vmind.generateChart(describe, fieldInfo, dataset);
const userPrompt = 'show me the changes in sales rankings of various car brand,tech style';
const { spec, time } = await vmind.generateChart(userPrompt, fieldInfo, dataset);
```

也可以指定 VMind 支持的图表类型,字段映射等等。比如:

```typescript
//指定生成折线图,汽车厂商做 x 轴
const describe =
const userPrompt =
'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, dataset));
const { spec, time } = await vmind.generateChart(userPrompt, fieldInfo, dataset);
```

#### 自定义大模型调用方式
Expand Down
Loading

0 comments on commit b2a544b

Please sign in to comment.