在本快速教學中，我們將使用 Gemini API 和 ToolJet 建立一個由 AI 驅動的內容產生器，這一切只需 10 分鐘即可完成。該應用程式將根據上傳的圖像、選定的內容類型以及用戶輸入的附加資訊來產生內容。無論您需要標題、簡短描述、詳細描述、創意故事、部落格文章大綱、完整部落格文章、社交媒體標題還是廣告文案，此應用程式都能滿足您的需求。請跟隨使用 ToolJet 的快速開發流程和 Gemini 的先進 AI 功能將內容建立無縫整合到您的工作流程中。
這是我們最終應用程式的預覽：
先決條件
-
ToolJet (https://github.com/ToolJet/ToolJet)：一個開源、低程式碼的商業應用程式建構器。[註冊](https://www.tooljet.com/signup)免費的 ToolJet 雲端帳號或使用 Docker在本機上執行 ToolJet 。
-
Gemini API Key：Gemini API 是Google AI Studio提供的進階人工智慧服務。它使開發人員能夠將強大的內容生成功能整合到他們的應用程式中。
首先建立一個名為AI Content Generator的應用程式。
第一步 - 設計 UI 🎨
建立應用程式後，我們就可以開始使用 ToolJet 的預先建置元件設計 UI。
-
從右側元件庫中拖曳一個Container元件，並調整其大小，使其覆蓋大部分畫布。
-
將圖示元件和文字元件放在容器上。然後，將 Icon 元件重新命名為logo ，將 Text 元件重新命名為logoText 。
-
選擇 Icon 元件以查看右側的屬性面板。選擇IconListSearch作為圖示。
-
對於文字元件，在其文字屬性下輸入AI Content Generator ，並調整其字體粗細和文字大小。
-
將圖示和文字元件的顏色變更為深藍色（十六進位程式碼 - #354094）。
本教學使用深藍色（#354094）作為主色。在接下來的步驟中相應地更新元件的顏色。隨意使用不同的配色。
-
在我們剛剛建立的標題下方新增一個圖像元件和一個文字元件。分別將它們重新命名為imagePreview和output 。 imagePreview將顯示上傳圖像的預覽，輸出將顯示基於圖像和所選選項生成的文字。
-
在映像下方新增一個File Picker元件並將其重新命名為imageUploader 。
-
在其旁邊放置一個下拉元件和文字輸入元件。分別將它們重新命名為typeOfContentInput和additionalInfoInput 。
-
對於文字輸入元件，在佔位符屬性下輸入下列值：
Enter additional information
- 對於下拉元件，使用雙花括號將以下陣列貼到選項值和選項標籤屬性下：
{{["Title", "Short Description (1-2 sentences)", "Long Description (paragraph)", "Creative Story", "Blog Post Outline", "Blog Post", "Social Media Caption", "Advertisement Copy"]}}
- 在下拉元件的 Placeholder 屬性下輸入下列值：
Select type of content
當應用程式有大量元件並且我們需要引用應用程式內與元件相關的值時，重新命名元件會很有用。
- 在底部新增一個Button元件作為 UI 建置過程的最後一步。將元件重新命名為generateContentButton 。
我們為此應用程式設計了一個簡單的 UI，您可以完全自訂它以滿足您的特定要求。 ToolJet 提供了廣泛的靈活性，讓您可以完全按照您的設想定義和排列元件。
第二步 - 整合 AI 能力🛠️
UI 完成後，我們可以使用 ToolJet 的查詢與 Gemini API 連接，並根據上傳的圖像、內容類型和我們在元件中輸入的其他資訊來獲得回應。
為了保護您的 Gemini API 金鑰，我們將利用 ToolJet 的工作空間常數。這樣，您的金鑰就可以保持隱藏且安全。
-
點擊左上角的 ToolJet 標誌。從下拉清單中選擇工作空間常數。
-
點選建立新常數按鈕。將名稱設為GEMINI_API_KEY並在值輸入中輸入您的 Gemini API 金鑰。
點選新增常數按鈕。現在，該常數將在我們的工作區中可用，並且可以使用{{constants.GEMINI_API_KEY}}進行存取。
您可以使用現有的 Google 憑證登入Google AI Studio 。在 AI Studio 介面中，您將能夠找到並複製您的 API 金鑰。
-
導航回您的應用程式並展開底部的查詢面板。
-
點擊+ 新增按鈕並選擇REST API選項。將查詢重新命名為getContent 。
-
將請求方法變更為POST並將以下 URL 貼到 URL 輸入下：
https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-pro:generateContent?key={{constants.GEMINI_API_KEY}}
- 導航到getContent查詢的正文部分。切換到原始 JSON並輸入以下程式碼：
{{
`{
"contents": [{
"parts": [{
"text": "Generate the following content for this image in markdown format:
content type: ${components.typeOfContentInput.value},
additional info: ${components.additionalInfoInput.value}"
},
{
"inline_data": {
"mime_type":"image/jpeg",
"data": "${components.imageUploader.file[0].base64Data}"
}
},],
},],
}`
}}
在上面的配置中，我們建立了一個結合了使用者輸入文字和影像資料的結構化 JSON 有效負載。然後，JSON 物件被傳送到 Gemini API 端點以處理提供的內容和圖像。
第三步 - 將資料綁定到元件🔗
準備好查詢後，我們可以設定每次點擊 Button 元件時觸發它的方法。
-
選擇 Button 元件，然後導覽其右側的屬性面板。
-
在「事件」下，按一下「新事件處理程序」以建立新事件。
-
對於新事件，選擇“單擊時”作為“事件”，並選擇“執行查詢”作為“操作”。
-
選擇getContent作為查詢（在上一個步驟中建立的查詢）。
現在，每次單擊 Button 元件時，都會觸發getContent查詢，它將根據上傳的圖像和使用者輸入返回 AI 生成的內容。
接下來，我們將使用以下步驟使用getContent查詢傳回的值填入 Text(輸出) 元件：
-
選擇為查詢輸出建立的文字（輸出）元件。
-
在其Data屬性下，輸入以下程式碼：
{{queries.getContent.data.candidates[0].content.parts[0].text}}
同樣，使用從文件選擇器元件上傳的圖像填充圖像元件：
-
選擇影像元件。
-
在其URL屬性下，輸入以下程式碼：
{{'data:image;base64,' + components.imageUploader.file[0].base64Data}}
我們的應用程式現已準備就緒。讓我們嘗試一下並查看結果。選擇圖像，選擇內容類型，輸入一些附加訊息，然後按一下生成按鈕。我們現在應該能夠看到圖像的預覽和人工智慧生成的文字輸出。
結論
現在，我們使用 Gemini API 和 ToolJet 在短短 10 分鐘內建立了一個功能齊全的 AI 驅動的內容產生器。該應用程式演示了 ToolJet 的快速開發環境如何與 Gemini 的高級 AI 功能無縫集成，以根據用戶輸入自動建立內容。
要探索更多訊息，請查看ToolJet 文件或加入我們的slack 。快樂編碼！
原文出處：https://dev.to/tooljet/build-an-ai-content-generator-using-gemini-api-and-tooljet-in-10-minutes-2d0m
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式