在本教程中，我們將使用 ToolJet 建立一個 BPMN 圖分析器應用程式。該應用程式允許用戶透過以圖像格式上傳來產生 BPMN 流程的詳細說明。我們將使用ToolJet 的低程式碼應用程式建構器作為使用者介面及其查詢建構器來連接到 Gemini API，以產生對上傳的 BPMN 流程的深入分析。
以下是我們應用程式的快速預覽：
先決條件
Gemini API 金鑰：Gemini API 是Google AI Studio提供的進階 AI 服務。它使開發人員能夠將強大的內容生成功能整合到他們的應用程式中。
ToolJet (https://github.com/ToolJet/ToolJet)：一個開源、低程式碼的商業應用程式建構器。[註冊](https://www.tooljet.com/signup)免費的 ToolJet 雲端帳號或使用 Docker在本機上執行 ToolJet 。
首先，建立一個名為BPMN 圖分析器的新應用程式。
步驟 1： 新增 UI 元素🖼️
應用程式建置流程的第一步是利用 ToolJet 的可自訂預建置元件在幾分鐘內建立 UI。我們將從標題開始。
應用程式標題
-
對於徽標，在畫布頂部加入一個Icon元件並將其命名為
logo。 -
選擇適當的圖示（例如
IconAnalyzeFilled）並將其顏色設為#3e63ddff。 -
在圖示元件旁邊新增一個文字元件。
-
將其資料屬性設定為“BPMN 圖分析器”。
-
使用
#3e63ddff作為顏色，24px作為字體大小，字體粗細為粗體。
我們使用藍色（十六進位程式碼：#3e63ddff）作為主要顏色，相應地設計即將到來的元件。
輸入部分
-
在左側新增一個Container來儲存輸入元素，並將其命名為
inputContainer。 -
在此容器內，新增一個Text元件作為標題，並將其命名為
inputLabel。 -
將文字元件的資料屬性設定為“輸入”。
-
在其下方放置一個Image元件來顯示上傳的 BPMN 圖。將其命名為
imagePreview。 -
新增檔案選擇器元件並將其命名為
fileUploader。 -
新增一個標記為「生成」的按鈕元件。將其命名為
generateButton。 -
新增另一個標有「複製輸出」的按鈕，並將其命名為
copyButton。 -
將按鈕放置在文件選擇器旁的適當位置。
輸出部分
-
為輸出部分新增另一個容器，並將其命名為
outputContainer。 -
在此容器內新增一個Text元件作為標題，並將其命名為
outputLabel。 -
將文字元件的資料屬性設定為“輸出”。
-
為產生的解釋加入另一個文字元件。將其命名為
generatedOutput。 -
將資料格式設為 HTML，因為產生的解釋將採用 HTML 格式。
第 2 步：設定查詢🔗
UI 準備好後，我們現在可以連接到 Gemini API 並使用查詢格式化映像預覽。
產生圖像預覽查詢
-
建立一個名為
generateImagePreview的新執行JavaScript程式碼查詢。 -
在查詢中加入以下程式碼：
return `data:image;base64,${components.fileUploader.file[0].base64Data}`上面的查詢將重構圖像資料並傳回它。傳回的值將用作 URL，以在 Image 元件中將圖像顯示為預覽。
分析圖查詢
-
建立一個名為
analyseDiagram的新REST API查詢。 -
將方法設為 POST 並在 URL 屬性下輸入以下 URL：
https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-pro:generateContent-
在Headers下，新增標頭並將鍵設為
Content-Type並將值設為application/json。 -
建立一個名為
GEMINI_API_KEY的新工作區常數，並在其中新增您的 Gemini API 金鑰。 -
在「Parameters」下，新增一行，其中鍵為
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}}"
}
}
]
}
]
}此 JSON 請求發送上傳的 BPMN 圖圖像進行分析，要求提供其內容的詳細 HTML 解釋，包括標題、描述、元素、流、資料物件和泳道。
第三步：使用事件進行動態互動🔘
ToolJet 中的事件可讓您根據按鈕點擊或查詢完成等觸發器輕鬆建立動態應用程式互動。
產生按鈕點擊
-
將新事件新增至「生成」按鈕。
-
將“事件”保留為“單擊時” ，選擇“執行查詢”作為“操作”，選擇“查詢”作為
analyseDiagram。
現在，每次按一下「產生」按鈕時，都會執行analyseDiagram查詢並產生輸出。
複製按鈕點擊
-
在「複製輸出」按鈕上新增按一下事件，以將產生的輸出複製到剪貼簿。
-
將操作設定為「複製到剪貼簿」 ，然後在「文字」屬性下輸入以下程式碼：
{{components.generatedOutput.text}}
每次我們點擊“複製輸出”按鈕時，上述設定都會從相關元件複製輸出文字。
文件選擇器載入：
-
在檔案選擇器元件上新增檔案載入事件以執行generateImagePreview 查詢。
-
此配置將確保每次將檔案上傳到檔案選擇器元件時都會執行
generateImagePreview查詢。
此配置將確保每次將檔案上傳到檔案選擇器元件時都會執行generateImagePreview 查詢。
圖像預覽
- 在Image元件的 URL 屬性下，輸入以下程式碼：
{{queries.generateImagePreview.data}}現在，使用檔案選擇器上傳 BPMN 圖表圖像後，圖像元件將顯示該圖像。
第 4 步：測試 ✅
是時候測試所有功能了。
-
使用檔案選擇器上傳圖像 - 預覽應該在圖像元件上可見。
-
點選「產生」按鈕- 輸出中的「文字」元件應透過 HTML 格式顯示 BPMN 圖的深入解釋。
-
點擊“複製輸出”按鈕- 產生的解釋應該被複製，並且您應該收到一條通知，顯示“已複製到剪貼簿！”
結論
透過遵循本教學課程，您已使用 ToolJet 成功建立了 BPMN 圖分析器。該應用程式允許用戶上傳圖像格式的 BPMN 圖並接收詳細解釋，從而增強他們的工作流程分析能力。您可以根據您的具體要求隨意進一步擴展和自訂應用程式。快樂建設！
要了解和探索有關 ToolJet 的更多訊息，請查看ToolJet 文件或聯絡我們並在Slack上發布您的問題。
原文出處：https://dev.to/tooljet/build-an-ai-bpmn-diagram-analyzer-using-tooljet-2b00
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式