ChatGPT一句话生成可视化图表

原创 krryguo 腾讯大讲堂

2023年09月19日 09:20

本文作者：krryguo，腾讯高级前端开发工程师

本文将 ChatGPT 接入图表配置化工具，支持用一段话描述图表信息，生成图表后直接进入配置页面，输入一句话生成图表内容，并可进行配置和导出，效果如下：

视频加载失败，请刷新页面再试

刷新

介绍

可视化图表配置工具：提供图表、数据可配置式的 BI 能力，支持多种基础图表属性并结合业务衍生更多业务型属性配置，可导出预览图、数据源和配置信息，并可保存用户配置过的图表。

接入 ChatGPT（GPT3.5-turbo），根据用户输入的内容生成图表，总的流程如下：

预置属性和 ChatGPT 返回的内容解析后 merge ，后者覆盖相同属性，从而顺利接入到现有流程：

实现方法

主要分三步实现。

prompt 规则

用户输入一句话，我们需要追加一些内容使其返回我们想要的格式，本质是通过它返回一段能描述图表信息的 DSL。

用户描述窗口：

用户可以指定生成图类型，未指定将默认按折线图渲染

GPT3.5-turbo API 参数：

messages=[  {"role": "system", "content": "You are a helpful assistant."},  {"role": "user", "content": "Who won the world series in 2020?"},  {"role": "assistant", "content": "The Los Angeles Dodgers won the World Series in 2020."},  {"role": "user", "content": "Where was it played?"}]

可以增加 system or assistant 约束返回规则，更好支持上下文，但我这边暂时不需要上下文，且 user prompt 遵循力度更高，所以我采用 user 追加 prompt 的方式实现。

为增加安全和隐私性，需要隐藏下面两个内容：

1. 开发者工具接口调用追加的 prompt

2. 具体 API 地址

还需要控制 API 的访问权限，因此在工具的后端服务重新封装此 API，进一步规范提供给前端的接口服务，现在前端能够看到的就只有用户自己输入的 prompt：

后端服务调用，部分 code 示例：

import { BaseController } from './base';
const system =  '。请你根据前面的描述回复一段json数据结构，包含四个同级属性，title：名称，data：纵坐标数组，xAxis：横坐标数组，column：列名数组（第一列是横坐标名称，第二列是纵坐标名称）';
export default class ChatgptController extends BaseController {  /**   * @description: chatGPT   * @return {*}   */  async getMessage() {    const { ctx } = this;
    const { prompt } = ctx.request.body;
    const { data } = await ctx.curl('http://***', {      method: 'POST',      contentType: 'json',      data: {        message: [{ role: 'user', content: prompt + system }],      },      dataType: 'json',    });
    console.log('回答内容：', data.data);    const response = data.data[0].message.content;    this.success({ result: getJSONConfig(response) });  }}

约束的 prompt 可进一步优化，这里给一个示例。

获取 JSON 数据

一般通过正则表达式或字符串 substring 方式获取 GPT 返回内容里包含的 json 代码。

若出现各种不规范的 json 数据，JSON.parse 就会解析错误。如存在单引号、对象字面量项尾存在逗号、存在中文逗号等等，采用字符串 replace + 正则的方式替换成规范的 JSON 格式。

解析数据

后端服务解析后返回到前端的 response：

通过 AI 生成的数据视为上传数据，保存表格数据和图表数据格式供后续步骤的渲染和导出。

数据注入 pinia：

// piniaconst customTable = ref({  name: '',  data: {},  table: {    data: [] as CustomMapType[],    column: [] as string[],  },});
// 数据存入 piniaconst [itemName, valueName] = result.column ?? result.columns;chartStore.setDefindTable(  result.title + '.xlsx',  {    [itemName]: result.xAxis,    [valueName]: result.data,  },  {    data: result.xAxis.map((ele, i) => ({      [itemName]: ele,      [valueName]: result.data[i],    })),    column: result.column,  },);

注入 option.series：

// 数据const tableData = isUpload ? customTable.data : tableMap[selectTable];// 数据列const tableDataKey = customTable.table.column;
option.series.push({  type: currentChart.type, // 解析的图类型  name: tableDataKey[1],  data: tableData[tableDataKey[1]],  ...cloneDeep(option.seriesOption), // 该图类型的预置属性});option.xAxis.data = tableData[tableDataKey[0]];