使用 Gemini API 和 ToolJet 在 10 分钟内构建 AI 内容生成器🛠️

在本快速教程中，我们将使用 Gemini API 和 ToolJet 构建一个 AI 驱动的内容生成器，只需 10 分钟。这款应用将根据用户上传的图片、所选内容类型以及输入的附加信息生成内容。无论您需要标题、简短描述、详细描述、创意故事、博客文章大纲、完整博客文章、社交媒体标题还是广告文案，这款应用都能满足您的需求。请继续学习如何使用 ToolJet 的快速开发流程和 Gemini 的先进 AI 功能，将内容创作无缝集成到您的工作流程中。

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

先决条件

ToolJet ( https://github.com/ToolJet/ToolJet )：一款开源、低代码的商业应用程序构建器。您可以注册一个免费的 ToolJet 云账户，或使用 Docker在本地机器上运行 ToolJet 。
Gemini API Key：Gemini API 是Google AI Studio提供的高级 AI 服务，它使开发人员能够将强大的内容生成功能集成到他们的应用程序中。

第一步 - 设计 UI

首先创建一个名为AI Content Generator 的应用程序。

应用程序创建完成后，我们可以开始使用 ToolJet 的预构建组件设计 UI。

从右侧的组件库中拖放一个 Container 组件，并调整其大小，使其覆盖大部分画布。
将Icon组件和Text组件拖放到容器上。然后，将 Icon 组件重命名为logo，将 Text 组件重命名为logoText。
选择 Icon 组件，在右侧查看属性面板。选择IconListSearch作为图标。
对于文本组件，在其 文本属性下输入AI Content Generator，并调整其字体粗细和文本大小。
将图标和文本组件的颜色更改为深蓝色（十六进制代码 - #354094）。

本教程使用深蓝色 (#354094) 作为主色调。请在接下来的步骤中相应地更新组件的颜色。您也可以使用其他配色方案。

在刚刚创建的标题下方添加一个图像组件和一个文本组件。分别将它们重命名为imagePreview和output。imagePreview将显示已上传图像的预览，而output将显示根据图像和所选选项生成的文本。
在图像下方添加一个文件选择器组件，并将其重命名为imageUploader。
在其旁边放置一个Dropdown组件和一个 Text Input组件，并分别重命名为typeOfContentInput和additionalInfoInput。
对于文本输入组件，在占位符属性下输入以下值：Enter additional information
对于 Dropdown 组件，使用双花括号将以下数组粘贴到Option values和Option tags属性下：

{{["Title", "Short Description (1-2 sentences)", "Long Description (paragraph)", "Creative Story", "Blog Post Outline", "Blog Post", "Social Media Caption", "Advertisement Copy"]}}

在 Dropdown 组件的 Placeholder 属性下输入以下值：Select type of content

当应用程序有大量组件并且我们需要引用应用程序内部与组件相关的值时，重命名组件会很有用。

在底部添加一个Button组件，作为 UI 构建过程的最后一步。将该组件重命名为generateContentButton。

我们为这款应用程序设计了简洁的用户界面，您可以根据自己的特定需求进行完全自定义。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查询的Body部分。切换到Raw 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 端点，以处理提供的内容和图像。

第三步 - 将数据绑定到组件

查询准备好后，我们可以设置一种方法，在每次单击按钮组件时触发它。

选择按钮组件，然后导航到右侧的属性面板。
在“事件”下，单击“新事件处理程序”以创建新事件。
对于新事件，选择“单击”作为事件，选择“运行查询”作为操作。
选择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}}

我们的应用程序现已准备就绪。让我们试用一下，看看效果。选择一张图片，选择一种内容类型，输入一些附加信息，然后点击“生成”按钮。现在我们应该能够看到图片的预览和 AI 生成的文本输出。

结论

我们仅用 10 分钟就利用 Gemini API 和 ToolJet 构建了一个功能齐全的 AI 内容生成器。该应用程序展示了 ToolJet 的快速开发环境如何与 Gemini 先进的 AI 功能无缝集成，从而根据用户输入自动创建内容。

想要了解更多，请查看 ToolJet 文档或加入我们的 Slack团队。祝您编码愉快！

鏂囩珷鏉ユ簮锛�https://dev.to/tooljet/build-an-ai-content-generator-using-gemini-api-and-tooljet-in-10-minutes-2d0m