使用 ToolJet 和 OpenAI 在 10 分钟内构建 Grammarly 替代方案

本教程将指导您使用 ToolJet 和 OpenAI 创建 Grammarly 替代方案。我们将使用 ToolJet 的可视化应用构建器为我们的应用程序设计一个优雅的用户界面。然后，我们将使用该平台的低代码查询构建器与 OpenAI 连接，进行详细的文本分析。完成的应用程序将允许您执行以下四项操作：

1. 列出文本中的所有语法错误
2. 修复所有语法错误并返回修改后的文本
3. 根据特定参数为文本评分：清晰度、连贯性、语法和参与度
4. 使内容听起来更自然（非常适合将通用的 AI 生成内容转换为更自然的音调）

请随意调整应用程序的结构和功能以满足您的确切内容增强需求。

查看本教程，了解如何使用 ToolJet 和 Python 构建二维码生成器。

以下是该应用程序的最终预览：

先决条件：
ToolJet ( https://github.com/ToolJet/ToolJet )：一个开源、低代码平台，旨在快速构建和部署内部工具。点击 此处注册免费的 ToolJet 云帐户。

OpenAI 账户：注册 OpenAI 账户，即可访问 GPT 等 API，在您的应用程序中使用 AI 功能，实现高级自然语言处理。点击 此处注册。

由于 ToolJet 中的集成非常简单，您可以使用任何其他服务而不是 OpenAI 来构建相同的应用程序。

步骤 1. 设置您的第一个 ToolJet 数据源

在以下步骤中，我们将设置数据源并创建一个新的应用程序。

• 访问OpenAI 控制台并生成一个新的密钥。请记住复制此密钥以供后续使用。
• 如果您还没有，请注册一个免费的ToolJet 云帐户并登录。
• 在 ToolJet 仪表板上，找到左侧边栏的“数据源”部分。在这里，单击OpenAI 插件下的“添加”按钮。
• 在 API 密钥字段中，粘贴从 OpenAI 控制台复制的 API 密钥，然后单击“保存”按钮

• 使用测试连接按钮确保 OpenAI 插件正确连接到您的 ToolJet 帐户。
• 最后，单击左侧边栏中的“应用程序”图标导航到应用程序部分。
• 选择“创建新应用程序”并将您的应用程序命名为“Wordly”（或根据您的用例命名为其他任何名称），然后单击“创建应用程序”以完成应用程序创建。

步骤2.构建用户界面

我们将首先为应用程序创建一个极简的 UI。UI 的构建大约需要五分钟。首先，我们将构建标题部分，然后是输入部分，最后是输出部分，我们将在输出部分显示文本分析的结果。

标题

• 对于标题，将一个Icon 组件拖放到空白画布上，并在其旁边放置一个Text组件。将其 Icon 属性设置为“IconTextWrap”，并将其字体大小更改为 28。

我们使用浅蓝色（“#d9e2fc”）作为此应用程序的主色调。请相应地更新所有组件的配色方案。

输入部分

• 将Container组件拖放到标题下方并将其重命名为mainContainer。

我们将重命名容器和输入字段等重要组件，以确保我们能够在应用程序构建器中轻松引用和访问与组件相关的数据。

• 在容器左上角添加一个带有标签“输入文本”的文本组件。
• 在其旁边放置一个Dropdown组件，并添加标签“Operation”。将其重命名为operationDropdown。
• 将下拉菜单的选项标签设置为：{{['List Grammatical Errors', 'Fix Grammatical Errors', 'Humanize Content', 'Provide Content Score']}}。
• 将选项值设置为：{{['listGrammaticalErrors', 'fixGrammaticalErrors', 'humanizeContent', 'provideAScore']}}。
• 在下面添加一个Textarea组件并将其重命名为textInput。 - 添加一个标有“GENERATE OUTPUT ⚡”的Button组件并将其重命名为generateButton。
• 在其旁边添加另一个标记为“COPY🗒️”的按钮组件，并将其重命名为copyButton。

输出部分

• 添加一个标记为“输出”的文本组件。
• 在其下方放置另一个文本组件以显示输出。该组件将显示 OpenAI 查询返回的数据。
• 将Text组件重命名为output，并在其 Data 属性下将 Markdown 设置为类型。

步骤 3. 创建与 OpenAI 交互的查询

接下来，我们将创建四个 OpenAI查询和一个 JavaScript 查询，该查询将根据所选操作有条件地触发其中一个 OpenAI 查询。

列出语法错误：

• 展开屏幕底部的查询面板，然后单击“添加”按钮以创建新查询
• 将此查询重命名为listGrammaticalErrors。
• 选择 OpenAI 作为数据源，并选择聊天作为操作。在消息输入字段中，输入以下提示：

Find all grammatical errors in the given text. List each error with a heading and a description using Markdown. Include the following elements:

Header: Use a bold header with an appropriate emoji, and mention the error type.
Sentence: Provide the sentence which contains the error.
Description: Provide a brief description of the error and two line breaks after it.

Use these emojis for different types of errors:

Subject-Verb Agreement: 🧑‍🏫
Verb Tense: ⏳
Punctuation: 📝
Spelling: 🔠
Sentence Structure: 🏗️
(…please use other more names and related emojis if needed)

Ensure that each section clearly identifies the error type and provides a description.

再创建三个 OpenAI 查询：

• 创建另外三个 OpenAI 查询 - fixGrammaticalErrors、humanizeContent和provideAScore。

提示fixGrammaticalErrors查询：

Review the following text, identify all grammatical errors, and provide a corrected version of the text. 

Provide the output in Markdown format.

Text: {{components.textInput.value}}

提示humanizeContent查询：

Rewrite the following content to make it sound more natural and human-written. 

Ensure the revised text is engaging, clear, and maintains the original meaning. 
Provide the output in Markdown format.

Text: {{components.textInput.value}}

提示provideAScore查询：

Analyze the following text and provide a score from 1 to 10 for 
each of the following categories: 
clarity, coherence, grammar, engagement, and overall quality. 

Present the results in Markdown format with the following structure and no header:
**Overall Quality🌟**: [score]

Show the next four paremeters inside a block quote
Clarity💡: [score]

Coherence🔗: [score]

Grammar✅: [score]

Engagement🔥: [score]

<insert a line break here>
-------------------------------------------------------------------

**Comments**:
Add comments below the results. 

Ensure to include a header before the results. 

Text: {{components.textInput.value}}

创建查询以有条件地触发 OpenAI 查询

使用以下代码创建名为triggerQuery的JavaScript查询：

switch (components.operationDropdown.value) {
    case 'listGrammaticalErrors':
        await queries.listGrammaticalErrors.run();
        break;
    case 'fixGrammaticalErrors':
        await queries.fixGrammaticalErrors.run();
        break;
    case 'humanizeContent':
        await queries.humanizeContent.run();
        break;
    case 'provideAScore':
        await queries.provideAScore.run();
        break;
}

此 JavaScript 查询将检查从 operationDropdown 组件中选择的操作并运行相关的 OpenAI 查询。

步骤 4.配置事件和其他功能

在最后一步中，我们将配置事件并将查询与组件绑定，并查看它们如何组合在一起。

查询成功后更新输出：

• 向listGrammaticalErrors查询添加一个新的查询成功事件处理程序，并选择操作作为控制组件。
• 在操作选项下，将组件设置为输出，将操作设置为设置文本，并将文本设置为{{queries.listGrammaticalErrors.data}}。
• 对其余三个 OpenAI 查询执行相同的步骤；这将output使用查询返回的数据填充组件。

生成按钮：

• 选择生成输出按钮，导航到右侧的属性面板，然后在事件下创建一个新事件。
• 对于事件配置，选择操作作为控制组件。 - 在操作选项下，将组件设置为输出，操作设置为清除。

每次单击按钮时，此事件都会清除输出组件。

• 向“生成输出”按钮添加另一个事件，以便在单击该按钮时运行 JavaScript 查询。

此事件将触发 JavaScript 查询。然后，JavaScript 查询将根据下拉菜单中选择的操作触发其中一个 OpenAI 查询，并将最新数据填充到输出组件中。

复制按钮

• 为复制按钮创建一个新事件，选择Copy to clipboard为事件，并{{components.output.text}}在其Text属性下输入。

使用此设置，每次单击“复制”按钮时，输出组件内的文本将被复制到剪贴板。

我们的应用程序功能现已完全配置。在输入字段中输入一些文本，单击“生成输出”按钮并测试可用操作的输出。

结论

恭喜！您不到 10 分钟就构建了 Grammarly 的替代方案。使用 ToolJet 的“继续”功能，您可以调整应用程序的功能以满足您特定的文本分析需求。您可以针对各种内容增强场景创建新的 OpenAI 查询，例如更改内容语气、改进 SEO、更改输出内容的语言、提高清晰度等。

要了解更多信息，请查看ToolJet 文档或通过Slack与我们联系。