在本實作教程中，我們將學習如何使用 ToolJet 和 Open AI 建立功能強大的音訊轉錄器和分析器。我們將使用 ToolJet 的預先建置元件快速設計直覺的 UI，然後使用該平台的查詢產生器與 Open AI 互動以進行音訊轉錄和分析。
在本教程結束時，我們將擁有建立更複雜的轉錄和音訊分析應用程式的基本結構。
先決條件：
-
ToolJet (https://github.com/ToolJet/ToolJet)：一個開源、低程式碼的平台，旨在快速建置和部署內部工具。[在此](https://app.tooljet.com/)註冊免費的 ToolJet 雲端帳號。
-
開放 AI 帳戶：註冊開放 AI 帳戶，以在 ToolJet 應用程式中使用 AI 驅動的功能。在這裡註冊。
以下是我們將要建立的內容的快速預覽：
在開始之前，請前往Open AI Console並複製您的金鑰。接下來，登入您的ToolJet 帳戶，找到左側側邊欄的資料來源部分，然後使用金鑰將 Open AI 配置為資料來源。
配置資料來源後，從儀表板建立一個名為「Speech Insight」的新應用程式。這樣，我們就可以開始建立我們的應用程式了。
第 1 步：建立音訊轉錄器的 UI
讓我們使用 ToolJet 的視覺化應用程式建構器來設計我們的 UI。
-
對於應用程式標題，將圖示元件拖曳到畫布上。導覽至右側的屬性面板，然後選擇
IconBrandDingtalk圖示。 -
將文字元件拖放到其旁邊，然後在其資料屬性下輸入“Speech Insight”。
-
將兩個元件的顏色變更為藍色 (
#3E63DD)。這將是我們應用程式的主要配色方案，相應地更新其餘元件的配色方案。
-
將容器元件放置在標題下方。我們將在容器元件中組織即將推出的元件。
-
將其重新命名為
mainContainer。
-
在容器元件的左上角，放置一個標籤為「Output」的文字元件。
-
在其下方，新增另一個Container並在其中放置兩個Text元件。我們將使用這些元件來顯示轉錄的文字和回饋。分別將它們命名為
transcribedText和feedback。 -
在其下方新增一個File Picker元件並將其重新命名為
uploader。將其Accept file types屬性變更為"audio/*"。 -
在其下方放置一個Button元件，並將其重命名為
analyzeButton，並為其加入“Analyze Button”標籤。
注意：我們正在重命名關鍵元件，以便更容易在應用程式的其他部分中引用它們。
-
最後，將四個統計元件放在右側，分別表示流暢度、發音、語調和詞彙分數。
-
將一個Button元件拖曳到其下方標記為「Copy Output」的元件，並將其重新命名為
copyButton。
使用者介面現已準備就緒！是時候配置與 Open AI 的互動了。
第 2 步：與開放 AI 交互
在下面的步驟中，我們將使用 REST API 和 ToolJet 的本機整合完成設定以與 Open AI 互動。
-
展開底部的查詢面板，然後按一下「新增」按鈕以建立新的 REST API 查詢。將查詢重新命名為
transcribe。 -
在
URL屬性下輸入 Open AI URL：https://api.openai.com/v1/audio/transcriptions。 -
在Header下方新增一行，輸入
Content-Type作為鍵，輸入multipart/form-data作為值。 -
新增另一個金鑰用於
Authorization。在值中輸入Bearer <OPEN_AI_KEY>。
-
在Body下，加入
file作為鍵，並將值加為{{ components.uploader.file[0] }}。這將確保發送在我們的上傳器/檔案選擇器元件中選擇的音訊檔案。 -
新增
model作為鍵並輸入whisper-1作為值。
現在，如果我們在上傳器/檔案選擇器元件中選擇音訊檔案並點擊「執行」按鈕，我們將看到轉錄的音訊作為輸出。
音頻轉錄後，我們需要對其進行分析以提供分數。讓我們使用本機 Open AI 整合來執行此查詢。
-
點擊“新增”按鈕並新增查詢。選擇Open AI作為此查詢的資料來源。這與我們一開始設定的資料來源相同。將其重命名為
analyze。 -
選擇「聊天」作為操作，選擇「訊息」作為輸入，然後輸入以下提示：
Based on the transcribed audio below, provide a
JSON object in response with the following details:
- Fluency (out of 10)
- Pronunciation (out of 10)
- Vocabulary (out of 10)
- Intonation (out of 10)
- A paragraph that gives general feedback
on the transcribed text's quality and overall improvement suggestions.
Return the object in the following format:
{fluency: "...", pronunciation: "...",
vocabulary: "...", intonation: "...", feedback: "..."}
Transcribed text:
{{queries.transcribe.data.text}}
在此提示中，我們使用 Open AI 對音訊轉錄進行詳細分析。我們引用提示中transcribe查詢傳回的資料以及其他評分標準。
執行此查詢將產生以下輸出：
兩個查詢都已準備就緒。最後一步，讓我們在每次成功執行transcribe查詢時自動觸發analyze查詢的過程。
-
返回
transcribe查詢，導航至事件並新增新的事件處理程序。 -
選擇“查詢成功”作為“事件”，選擇“執行查詢”作為“操作”，然後
analyze作為“查詢”。
透過使用事件，我們設定了在觸發transcribe查詢並準備好輸出進行分析後觸發analyze查詢的過程。
步驟 3：將轉錄本和分析綁定到元件上
進入最後一步。我們已經建立了 UI，也建立了與 Open AI 互動的查詢。現在我們可以將它們連接在一起並查看應用程式的執行情況。
-
選擇“分析音訊”按鈕，導航到右側的屬性面板並新增事件。
-
選擇“單擊時”作為“事件”，選擇“執行查詢”作為“操作”，然後
transcribe作為“查詢”。
現在，每次單擊“分析音訊”按鈕時，都會觸發transcribe查詢。
-
選擇複製輸出按鈕並新增事件。
-
選擇點擊作為事件，複製到剪貼簿作為操作，並
{{queries.analyze.data}}作為文字。
此配置將確保在您按一下「複製輸出」按鈕時複製分析的輸出。
- 選擇我們放置的用於顯示文字記錄的文字元件。在其 Data 屬性下輸入以下值：
文字記錄： {{queries.transcribe.data.text}}
- 選擇文字元件以顯示回饋。在其 Data 屬性下輸入以下值：
回饋： {{JSON.parse(queries.analyze.data).feedback}}
注意：我們收到了一個回應analyze查詢的 JSON 字串。因此，我們需要在顯示它之前對其進行解析以建構一個 JavaScript 物件。
- 選擇「流暢度」的統計元件，並在其
Primary value屬性下輸入以下值：
{{JSON.parse(queries.analyze.data).fluency}}
- 使用相同的邏輯更新其餘的統計元件。
我們的音頻轉錄器和分析器現已完全完成。上傳音訊檔案並點擊「分析音訊」按鈕以查看 UI 中填充的轉錄、回饋和分數。
結論
在本教程中，我們學習如何使用 ToolJet 和 OpenAI 建立完整的音訊轉錄和分析工具。我們逐步設計了直覺的使用者介面、設定 API 查詢以與 OpenAI 交互，以及綁定結果以顯示轉錄、回饋和語音分析分數。
要進一步自訂應用程式，請嘗試不同的 UI 元件以增強用戶體驗或整合其他 API 來分析音訊的其他方面，例如情緒檢測或語言翻譯。
要了解更多訊息，請查看 ToolJet 的官方文件或在Slack上聯繫以提出問題或疑問。
原文出處：https://dev.to/tooljet/build-an-audio-transcriber-and-analyzer-using-tooljet-and-openai-1109
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式