使用 ToolJet 和 OpenAI 构建音频转录器和分析器🎙️

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

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

先决条件：

• ToolJet ( https://github.com/ToolJet/ToolJet )：一个开源、低代码平台，旨在快速构建和部署内部工具。点击此处注册免费的 ToolJet 云帐户。
• 开放 AI 账户：注册一个开放 AI 账户，即可在您的 ToolJet 应用程序中使用 AI 功能。点击此处注册。

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

开始之前，请前往Open AI 控制台，并复制您的密钥。接下来，登录您的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/*"。
• 在其下方放置一个按钮组件并将其重命名为，analyzeButton并为其添加“分析按钮”标签。

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

• 最后，在右侧放置四个统计组件，分别表示流利度、发音、语调和词汇分数。
• 在其下方放置一个标记为“复制输出”的按钮组件，并将其重命名为copyButton。

UI 现已准备就绪！接下来是配置与 Open AI 的交互。

第二步：与 Open 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以及其他评分标准。

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

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

• 返回查询transcribe，导航到事件并添加新的事件处理程序。
• 选择查询成功作为事件，选择运行查询作为操作，并analyze选择作为查询。

通过使用事件，我们设置了查询触发analyze后触发查询的过程transcribe，并准备好输出以供分析。

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

进入最后一步。我们已经构建了 UI，并创建了与 Open AI 交互的查询。现在我们可以将所有内容连接起来，并查看应用程序的运行情况。

• 选择“分析音频”按钮，导航到右侧的属性面板并添加新事件。
• 选择“单击”作为事件，选择“运行查询”作为操作，并transcribe选择“作为查询”。

现在每次单击“分析音频”按钮时，它都会触发transcribe查询。

• 选择复制输出按钮并向其添加新事件。
• 选择“单击”作为事件，选择“复制到剪贴板”作为操作，并{{queries.analyze.data}}选择“作为文本”。

此配置将确保当您单击“复制输出”按钮时，已分析的输出会被复制。

• 选择我们放置的用于显示成绩单的Text组件。在其 Data 属性下输入以下值：
  Transcript： {{queries.transcribe.data.text}}

• 选择Text组件来显示反馈。在其 Data 属性下输入以下值：
  Feedback： {{JSON.parse(queries.analyze.data).feedback}}

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

• 选择“流畅度”的统计组件，并在其属性下输入以下值Primary value：
  {{JSON.parse(queries.analyze.data).fluency}}

• 使用相同的逻辑更新其余统计组件。

我们的音频转录和分析器现已全面完成。上传音频文件，然后点击“分析音频”按钮，即可在用户界面中查看转录、反馈和乐谱。

结论

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

为了进一步定制应用程序，请尝试使用不同的 UI 组件来增强用户体验或集成其他 API 来分析音频的其他方面，例如情绪检测或语言翻译。

要了解更多信息，请查看 ToolJet 的官方文档或通过Slack联系以提出问题或疑问。