What is BI

BI stands for Business Intelligence. It is a technology and practice that helps businesses better understand and analyze their data in order to make more informed decisions. It mainly includes the following aspects:

Data collection and integration: Collecting and integrating internal and external data from various sources such as ERP and CRM systems. Data analysis and visualization: Analyzing and visualizing data in the form of reports, dashboards, charts, etc. to help users gain insights into trends and patterns behind the data. Forecasting and recommendations: Using advanced analytics techniques such as machine learning and predictive analytics to forecast future trends and provide recommendations for decision-making. Decision support: Effectively communicating the results of analysis to management to support them in making more informed business decisions.

BI systems typically involve multiple technology components such as data warehouses, OLAP, reports, dashboards, etc. Its goal is to help businesses better understand their business situation, identify problems, and formulate corresponding strategies to improve overall competitiveness and profitability. Many well-known BI platforms include Power BI, Tableau, Qlik Sense, etc.

What is needed

We will implement a BI Bot based on the Chrome browser, which will automatically perform BI analysis on selected text through visualization. To meet the requirements, we need:

• A Chrome extension to record the selection of text on web pages
• Choose a suitable large language model
• Write a prompt and use the large model to perform BI analysis on the selected text
• Generate charts using a suitable method

Standing on the shoulders of giants

We don't need to reinvent the wheel. We will choose mature tools in the industry to complete our project.

• Choose chrome-extension-typescript-starter to write our Chrome Extension
• Choose VChart as our chart library
• Choose gpt as the large language model behind the robot
• Choose VMind for chart recommendation

Selecting text

Listen to user events in the plugin's content.js and select the text of the selection

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

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

Extracting data

First, we need to extract the useful data content from the specified text and organize it into a table. We can write a prompt as follows:

Extract useful data from the following paragraph, generate a CSV file, the CSV file needs to include the indicator column and data column (the data column can be multiple columns), the percentage needs to be converted to the corresponding decimal, and the data needs to be accurate numbers, otherwise it will be filtered out. The language of the CSV file should be consistent with the language of the given text:

We will get the data in CSV format

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;
}

Recommendation & Display

We will use VMind for chart recommendation and VChart for chart display. VMind VMind is an intelligent visualization component built on the basic capabilities of visualization component libraries such as VChart and VTable. The core capabilities include intelligent chart generation, intelligent chart editing, and intelligent color matching. VChart VChart is a simple, cross-platform, high-performance front-end visualization chart library.

Using VMind to recommend charts

Create a VMind instance, pass in the data, and use the prompt: use appropriate charts to display this data to let VMind recommend a suitable chart and chart spec for us.

async function askVmind(csvData: string) {
  const vmind = new VMind({
    url: END_POINT,
    model: Model.GPT_4_0613, //Specify the model you want to use
    headers: {
      //Specify the headers when calling the large model service
      '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;
}

Displaying charts using VChart

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