使用 ToolJet 构建 AI BPMN 图表分析器🛠️

在本教程中，我们将使用 ToolJet 创建一个 BPMN 图表分析器应用程序。该应用程序允许用户通过上传图像格式的 BPMN 流程来生成详细的解释。我们将使用ToolJet 的 低代码应用程序构建器作为用户界面，并使用其查询构建器连接到 Gemini API，以对上传的 BPMN 流程进行深入分析。

以下是我们的应用程序的快速预览：

图片描述

先决条件

Gemini API Key ：Gemini API 是Google AI Studio提供的高级 AI 服务，使开发人员能够将强大的内容生成功能集成到他们的应用程序中。

ToolJet ( https://github.com/ToolJet/ToolJet )：一款开源、低代码的商业应用程序构建器。您可以注册一个免费的 ToolJet 云帐户，或使用 Docker在本地机器上运行 ToolJet 。

首先，创建一个名为BPMN Diagram Analyzer 的新应用程序。

步骤 1：添加 UI 元素

应用程序构建过程的第一步是利用 ToolJet 可定制的预构建组件在几分钟内构建一个 UI。我们将从标题开始。

应用程序标题

对于徽标，在画布顶部添加一个图标logo组件并将其命名为。
选择合适的图标（例如IconAnalyzeFilled）并将其颜色设置为#3e63ddff。
在图标组件旁边添加一个文本组件。
将其数据属性设置为“BPMN 图表分析器”。
#3e63ddff使用颜色、24px字体大小和字体粗细设置其样式。

我们使用蓝色（十六进制代码：#3e63ddff）作为主要颜色，并相应地设置即将出现的组件的样式。

输入部分

在左侧添加一个容器inputContainer来容纳输入元素，并将其命名为。
在这个容器里面，添加一个文本组件作为标题，并将其命名为inputLabel。
将文本组件的数据属性设置为“输入”。
在其下方放置一个图像组件，用于显示上传的 BPMN 图。将其命名为imagePreview。
添加文件选择器组件并将其命名为fileUploader。
添加一个按钮组件，标签为“Generate”。并将其命名为generateButton。
添加另一个标有“复制输出”的按钮copyButton，并将其命名为。
将按钮适当地放置在文件选择器旁边。

输出部分

为输出部分添加另一个容器outputContainer，并将其命名为。
在此容器内添加一个文本组件作为标题，并将其命名为outputLabel。
将文本组件的数据属性设置为“输出”。
为生成的解释添加另一个文本generatedOutput组件。将其命名为。
将数据格式设置为 HTML，因为生成的解释将采用 HTML 格式。

步骤2：配置查询

准备好 UI 后，我们现在可以连接到 Gemini API 并使用查询格式化图像预览。

生成图像预览查询

创建一个名为的新运行 JavaScript 代码查询generateImagePreview。
在查询中添加以下代码：

return `data:image;base64,${components.fileUploader.file[0].base64Data}`

上述查询将重构图像数据并返回。返回值将用作 URL，以便在图像组件中以预览形式显示图像。

分析图表查询

创建一个名为的新REST API查询analyseDiagram。
将方法设置为 POST，并在 URL 属性下输入以下 URL：

https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-pro:generateContent

在Headers下，添加一个新标题并将键设置为Content-Type，将值设置为application/json。
创建一个名为的新工作区常量GEMINI_API_KEY，并将您的 Gemini API Key 添加到其中。
在参数下，添加一个新行，其键为key，值为{{constants.GEMINI_API_KEY}}。
使用以下代码配置查询的 Body 属性：

{
  "contents": [
    {
      "parts": [
        {
          "text": "Explain in depth the content and overall of the uploaded BPMN (Business Process Model and Notation) diagram in HTML formatting only. Respond with only the explanation, and nothing else. Return the following information, with clear bullet points and headers (under 18 px) for each section: 1. **Title**: The title or main heading of the BPMN diagram. 2. **Description**: A brief description or summary of the BPMN diagram. 3. **Elements**: Explain all the processes identified in the diagram in the correct flow. If there are multiple sequences, explain them individually. 4. **Flows**: Describe the sequence flows, message flows, and associations between elements. 5. **Data Objects**: Identify and describe any data objects present in the diagram. 6. **Swimlanes**: If present, list the swimlanes (e.g., pools, lanes) and their roles or participants. Ensure the returned HTML is well-structured, with appropriate tags for headers, lists, and any other necessary elements for readability and organization."
        },
        {
          "inline_data": {
            "mime_type":"image/jpeg",
            "data": "{{components.fileUploader.file[0].base64Data}}"
          }
        }
      ]
    }
  ]
}