本教學將引導您完成使用 ToolJet 和 OpenAI 建立 Grammarly 替代方案的過程。我們將使用 ToolJet 的視覺化應用程式建構器為我們的應用程式設計優雅的使用者介面。然後我們將使用該平台的低程式碼查詢產生器與 OpenAI 連接以執行詳細的文字分析。完成的應用程式將允許您執行四項操作：
-
列出文本中的所有語法錯誤
-
修復所有語法錯誤並返回修改後的文本
-
根據特定參數為文本提供分數：清晰度、連貫性、語法和參與度
-
讓內容聽起來更自然（非常適合用更有機的語氣轉換通用人工智慧生成的內容）
您可以隨意調整應用程式的結構和功能，以滿足您的特定內容增強需求。
請參閱本教學課程，了解如何使用 ToolJet 和 Python 建立 QR 碼產生器。
這是該應用程式的最終預覽：
先決條件：
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 屬性設為“IconTextWrap”並將其字體大小變更為 28。
我們在此應用程式中使用淺藍色（“#d9e2fc”）作為主色。相應地更新所有元件的配色方案。
輸入部分
- 將Container元件拖曳到標題下方，並將其重新命名為mainContainer 。
我們將重命名容器和輸入欄位等重要元件，以確保我們可以輕鬆引用和存取應用程式建構器內與元件相關的資料。
-
在容器的左上角加入一個帶有標籤“輸入文字”的文字元件。
-
在其旁邊放置一個帶有“操作”標籤的下拉元件。將其重新命名為operationDropdown 。
-
將下拉清單的選項標籤設定為：
{{['List Grammatical Errors', 'Fix Grammatical Errors', 'Humanize Content', 'Provide Content Score']}}。 -
將選項值設為：
{{['listGrammaticalErrors', 'fixGrammaticalErrors', 'humanizeContent', 'provideAScore']}}。 -
在下面新增一個Textarea元件並將其重新命名為textInput 。 - 新增一個標記為「GENERATE OUTPUT ⚡」的按鈕元件，並將其重新命名為generateButton 。
-
在其旁邊加入另一個標有“COPY 🗒️”的Button元件，並將其重命名為copyButton 。
輸出部分
-
新增標記為“輸出”的文字元件。
-
在其下方放置另一個文字元件以顯示輸出。該元件將顯示 OpenAI 查詢傳回的資料。
-
將Text元件重新命名為output ，並在其 Data 屬性下，將 Markdown 設定為類型。
步驟 3. 建立查詢以與 OpenAI 交互
接下來，我們將建立四個 OpenAI查詢和一個 JavaScript 查詢，該查詢將根據所選操作有條件地觸發其中一個 OpenAI 查詢。
列出語法錯誤：
-
展開畫面底部的查詢面板，然後按一下新增按鈕以建立新查詢
-
將此查詢重新命名為listGrammaticalErrors 。
-
選擇 OpenAI 作為資料來源，選擇 Chat 作為操作。在訊息輸入欄位中，輸入以下提示：
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 。
提示修復語法錯誤查詢：
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}}提示提供AScore查詢：
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作為事件，然後在其 Text 屬性下輸入{{components.output.text}}。
透過此設置，每次按一下「複製」按鈕時，輸出元件內的文字都會複製到剪貼簿。
我們的應用程式的功能現已完全配置。在輸入欄位中輸入一些文本，按一下「產生輸出」按鈕並測試可用操作的輸出。
結論
恭喜！您在不到 10 分鐘的時間內就建立了 Grammarly 替代方案。使用 ToolJet 繼續調整應用程式的功能以滿足您特定的文字分析需求。您可以為各種內容增強場景建立新的 OpenAI 查詢，例如更改內容的語氣、改進 SEO、更改輸出內容的語言、提高清晰度等。
要了解更多訊息，請查看ToolJet 文件或透過Slack與我們聯繫。
原文出處：https://dev.to/tooljet/build-a-grammarly-alternative-using-tooljet-and-openai-in-10-minutes-ai9
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式