用 ToolJet 和 OpenAI 快速做音频处理

使用 ToolJet 和 OpenAI 构建音频转录和分析工具

在这个实践教程中，我们将学习如何使用 ToolJet 和 Open AI 构建一个强大的音频转录和分析工具。我们将快速使用 ToolJet 预构建的组件设计一个直观的用户界面，然后使用平台的查询构造器与 Open AI 交互进行音频转录和分析。

在本教程结束时，我们将拥有一个基础架构来构建更复杂的转录和音频分析应用程序。

前置条件：

ToolJet： 一个开源的低代码平台，专为快速构建和部署内部工具而设计。注册一个免费的 ToolJet 云账户。

Open AI 账户： 注册一个 Open AI 账户，通过访问 GPT 等 API 来利用 AI 动力功能，实现高级自然语言处理。注册。

以下是我们即将构建的内容的快速预览：

在开始之前，去 Open AI 控制台复制你的密钥。接下来，登录到你的 ToolJet 账户，在左侧边栏找到数据源部分，使用密钥将 Open AI 配置为数据源。

一旦数据源配置完成，从仪表板创建一个名为"Speech Insight"的新应用。现在我们准备好开始构建应用程序了。

第 1 步：为音频转录器构建 UI

让我们使用 ToolJet 的可视化应用构造器来设计我们的 UI。

对于应用的头部，在画布上拖放一个 Icon 组件。导航到右侧的属性面板，选择 IconBrandDingtalk 图标。

在它旁边放置一个 Text 组件，在其数据属性中输入"Speech Insight"。

将这两个组件的颜色改为蓝色（十六进制代码：#3E63DD）。这将是我们应用的主要配色方案，相应地更新其余组件的颜色方案。

在头部下方放置一个 Container 组件。我们将在 Container 组件中组织即将到来的组件。

将其重命名为 mainContainer。

在 Container 组件的左上方放置一个标签为"Output"的 Text 组件。

在它下方添加另一个 Container，并在其中放置两个 Text 组件。我们将使用这些组件来显示转录的文本和反馈。分别将它们命名为 transcribedText 和 feedback。

在下方添加一个 File Picker 组件并将其重命名为 uploader。将其"接受文件类型"属性改为 {{"audio/*"}}。

在下方放置一个 Button 组件，将其重命名为 analyzeButton，并添加"Analyze Button"标签。

注意：我们正在重命名关键组件，使其更容易在应用程序的其他部分中引用。

最后，在右侧放置四个 Statistics 组件，分别用于流利度、发音、语调和词汇量评分。

在下方放置一个标签为"Copy Output"的 Button 组件，并将其重命名为 copyButton。

UI 现在已准备好！是时候配置与 Open AI 的交互了。

第 2 步：与 Open AI 交互

在下面的步骤中，我们将通过 REST API 和 ToolJet 的原生集成来配置与 Open AI 的交互。

展开底部的查询面板，点击"Add"按钮创建一个新的 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] }}。这将确保在我们的 uploader/File Picker 组件中选择的音频文件被包括。

添加 model 作为键，输入 whisper-1 作为值。

现在，如果我们在 uploader/File Picker 组件中选择一个音频文件并点击"Run"按钮，我们将看到转录的音频作为输出。

音频转录后，我们需要对其进行分析以提供评分。让我们使用 Open AI 的原生集成来处理此查询。

点击"Add"按钮并添加一个新查询。选择 Open AI 作为此查询的数据源。这与我们在开始时设置的数据源相同。将其重命名为 analyze。

选择 Chat 作为操作，Message 作为输入，输入下面的 prompt。

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

在此 prompt 中，我们使用 Open AI 对音频转录进行详细分析。我们在 prompt 中引用由 transcribe 查询返回的数据以及其他评分标准。

运行此查询将产生以下输出：

现在我们的两个查询都已准备好。作为最后一步，让我们自动化触发 analyze 查询的过程，每次 transcribe 查询成功执行时都会这样做。

回到 transcribe 查询，导航到"Events"并添加一个新的事件处理程序。

选择"Query Success"作为事件，"Run Query"作为操作，"analyze"作为查询。

通过使用事件，我们已经设置了触发 analyze 查询的过程，在 transcribe 查询被触发并准备好用于分析的输出之后。

第 3 步：将转录和分析绑定到组件

到了最后一步。我们已经构建了 UI，也构建了与 Open AI 交互的查询。现在我们可以将它们全部连接在一起，看到应用的运行效果。

选择"Analyze Audio"按钮，导航到右侧的属性面板并添加一个新事件。

选择"On click"作为事件，"Run Query"作为操作，"transcribe"作为查询。

现在每次点击"Analyze Audio"按钮时，它将触发 transcribe 查询。

选择"Copy Output"按钮并为其添加一个新事件。

选择"On click"作为事件，"Copy to clipboard"作为操作，{{queries.analyze.data}} 作为文本。

此配置将确保在点击"Copy Output"按钮时分析的输出被复制。

选择我们放置用于显示转录的 Text 组件。

在其数据属性中输入以下值：

<b>Transcript:</b> {{queries.transcribe.data.text}}

选择 Text 组件以显示反馈。

在其数据属性中输入以下值：

<b>Feedback:</b> {{JSON.parse(queries.analyze.data).feedback}}

注意：我们收到了对 analyze 查询的 JSON 字符串响应。因此，在显示之前，我们需要解析它以构造一个 JavaScript 对象。

选择"Fluency"的 Statistics 组件，在其"Primary value"属性中输入以下值：

{{JSON.parse(queries.analyze.data).fluency}}

使用相同的逻辑更新其余的 Statistics 组件。

我们的音频转录和分析工具现已完全完成。上传一个音频文件，点击"Analyze Audio"按钮，查看转录、反馈和评分在 UI 中被填充。

在本教程中，我们学习了如何使用 ToolJet 和 OpenAI 创建完整的音频转录和分析工具。我们完成了设计直观的用户界面、设置与 OpenAI 交互的 API 查询，以及将结果绑定到显示转录、反馈和语音分析评分。

要进一步自定义应用程序，可以尝试使用不同的 UI 组件来增强用户体验，或集成其他 API 来分析音频的其他方面，如情感检测或语言翻译。

如需了解更多，请查看 ToolJet 的官方文档或在 Slack 上连接以解答任何问题。