什么是 BI

BI 指的是商业智能(Business Intelligence)。它是一种帮助企业更好地理解和分析自身数据,从而做出更明智决策的技术和实践。主要包括以下几个方面:

数据收集和集成: 从各种源头(如 ERP、CRM 系统等)收集和整合企业内部和外部的数据。数据分析和可视化: 利用报表、仪表板、图表等形式对数据进行分析和可视化展示,帮助用户洞察数据背后的趋势和洞察。预测和建议: 利用高级分析技术(如机器学习、预测分析等)对未来趋势进行预测,并为决策提供建议。支持决策: 将分析结果有效地传达给管理层,支持他们做出更明智的业务决策。 BI 系统通常涉及数据仓库、OLAP、报表、dashboards 等多个技术组件。其目标是帮助企业更好地理解自身的业务状况,发现问题并制定相应的策略,提高整体的竞争力和盈利能力。许多知名 BI 平台包括 Power BI、Tableau、Qlik Sense 等。

需要什么工作

我们会实现一个基于 Chrome 浏览器的 BI Bot，实现鼠标选中一段文字，自动进行 BI 分析通过可视化的形式进行数据分析。分析需求，我们需要：

一个 Chrome 插件来完成对网页文字的选择记录
选择一个合适的大语言模型
编写 prompt，使用大模型对选中文本进行 BI 分析
使用合适的方式生成图表

站在巨人的肩膀上

不必重复造轮子，我们将选择业界成熟的工具完成我们的项目

选择一个chrome-extension-typescript-starter，用来编写我们的 Chrome Extension
选择VChart作为我们的图表库
选择gpt作为机器人背后的大语言模型
选择VMind进行图表推荐

选择文本

在插件的 content.js 中监听用户时间，选择 selection 的文字

const handleMouseUp = (event: MouseEvent) => {
  const selection = window.getSelection();
  if (!selection) {
    return;
  }

  const text = selection.toString().trim();
  if (text) {
    // do something...
  }
};

提取数据

首先我们需要从指定的这段文字中提取出其中的数据内容，整理成一张表格，可以编写 prompt 如下：

从下面这段话中提取出有用的数据，生成 csv，csv 需要包含指标列数据列（数据列可以是多列），百分比需要转换为对应的小数，并且数据需要是准确的数字，否则就过滤掉，csv 的语言与给定话的语言保持一致：

我们将得到 csv 格式的数据

async function getCSVData(text: string) {
  const prompt = `${PROMPT}\n${text}`;
  const response = await fetch(END_POINT, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${API_KEY}`,
    },
    body: JSON.stringify({
      model: 'gpt-4-0613',
      messages: [{ role: 'user', content: prompt }],
      max_tokens: 2048,
      n: 1,
      stop: null,
      temperature: 0.5,
    }),
  });
  const result = await response.json();
  return result.choices[0].message.content as string;
}

推荐&展示

我们将使用 VMind 进行图表推荐，使用 VChart 展示图表 VMind VMind 是在 VChart、VTable 等可视化组件库的基础能力之上，构建的一个智能可视化组件。核心能力包括图表智能生成、图表智能编辑和智能配色。 VChart VChart 是一款简单易用、跨平台、高性能的前端可视化图表库。

使用 VMind 进行图表推荐

创建一个 VMind 实例，传入数据，使用 prompt: use appropriate charts to display this data让 VMind 给我们推荐一个可用的图表以及图表 spec

async function askVmind(csvData: string) {
  const vmind = new VMind({
    url: END_POINT,
    model: Model.GPT_4_0613, //指定你指定的模型
    headers: {
      //指定调用大模型服务时的header
      'api-key': API_KEY, //Your LLM API Key
    },
  });
  const dataset = csv2json(csvData) as any;
  const fieldInfo = vmind.getFieldInfo(dataset);
  const userPrompt = 'use appropriate charts to display this data';
  const { spec, time } = await vmind.generateChart(
    userPrompt,
    fieldInfo,
    dataset
  );
  return spec;
}

使用 VChart 展示图表

const vchart = new VChart(spec, { dom: 'chart' });
vchart.renderSync();