首页 > web前端 > js教程 > 使用 JavaScript 和 Gemini AI 创建聊天机器人:创建后端

使用 JavaScript 和 Gemini AI 创建聊天机器人:创建后端

Patricia Arquette
发布: 2025-01-04 09:26:35
原创
854 人浏览过

保存!哦

继续使用 Javascript 和 Gemini AI 创建我们的聊天机器人,我们将添加项目的“后端”。上次我们使用 HTML、CSS 和 Javascript 创建前端,我们保证用户界面将反映用户和聊天机器人之间的对话。

现在我们需要创建一个服务器,使用express.js配置路由来与Gemini API进行通信。我们走吧!

安装项目依赖项

好吧,我们需要express.js、Google Gemini SDK,为了保护我们的API密钥,我将安装dotenv来使用环境变量。

npm install @google/generative-ai express dotenv
登录后复制
登录后复制

现在我们准备好采用最佳实践创建服务器,例如使用本地环境变量来保护私有数据。

为此,我们将在项目根文件夹中创建一个名为 server.js 的文件。在此文件中,我们将首先导入依赖项并配置必要的资源。

const express = require("express");
require("dotenv").config();
const { GoogleGenerativeAI } = require("@google/generative-ai");

const app = express();
const port = 3000;

const genAI = new GoogleGenerativeAI(process.env.GOOGLE_GEMINI_API_KEY);

app.use(express.static("public"));

app.use(express.json());
登录后复制
登录后复制

此代码将 Express 配置为从“public”文件夹提供静态文件,并接受带有 JSON 负载的请求。这就是为什么我们将index.html、styles.css 和script.js 文件放在这个文件夹中。我们还将应用程序配置为在端口 3000 上运行。

我们使用 @google/generative-ai 库来集成 Gemini API,并使用存储在名为 GOOGLE_GEMINI_API_KEY 的环境变量中的密钥对其进行身份验证。

但是我们从哪里获得这个 API Key 呢?这就是我们现在要找出的。

双子座 API 密钥

获取密钥

要获取 Gemini API 密钥,我建议您登录“@gmail.com”帐户。之后,访问此链接,您将看到如下屏幕:

Criando um Chatbot com JavaScript e Gemini AI: criando o backend

单击“创建 API 密钥”按钮,指定您将在其中使用此密钥的项目,然后就完成了。您的密钥将显示在下方,您可以查看它,甚至可以复制它以进行下一步。

保护您的 API 密钥

现在在您的项目中,在项目的根文件夹中创建一个名为 .env.local 或仅 .env 的文件。在此文件中输入您的 API 密钥,如下所示:

GOOGLE_GEMINI_API_KEY="sua-chave-vai-aqui"
登录后复制
登录后复制

现在保存您的文件即可。如果您正确执行了上一步,您的 API 密钥将起作用。

PS:请注意您的 API 密钥中显示的计划。 Gemini 提供免费计划,您的钥匙可以返还有限数量的代币。如果您想要更多的代币,请考虑订阅付费计划。我们将使用免费计划,该计划虽然有限,但允许我们与聊天机器人交换一些消息。

创建 /chat 路由

现在配置了依赖项并掌握了 API 密钥,让我们打开人工智能的可能性之门。

在 server.js 文件中,我们将创建 /chat 路由:

npm install @google/generative-ai express dotenv
登录后复制
登录后复制

我们的路由是 POST 类型,因为您将在正文中收到一条消息,正是来自将与聊天交互的用户的消息。因此,对于此消息,我们使用了一些防御性编程(小心一点不会伤害任何人,哈哈)并检查我们是否没有收到消息。如果不这样做,则会返回一个错误作为响应,并抛出一条消息。

如果我们有消息,那么我们会将其作为我们选择的模型的提示发送,如下所示:

const express = require("express");
require("dotenv").config();
const { GoogleGenerativeAI } = require("@google/generative-ai");

const app = express();
const port = 3000;

const genAI = new GoogleGenerativeAI(process.env.GOOGLE_GEMINI_API_KEY);

app.use(express.static("public"));

app.use(express.json());
登录后复制
登录后复制

由于此通信是一个异步过程,因此我们将使用 try/catch 来处理响应。首先,我定义将使用的 Gemini 模型(您可以在此链接中查看模型列表)。在这种情况下,我选择了gemini-1.5-flash。

第二步是开始聊天。因此,通过 model.startChat() 我可以开始与 Gemini 通信,配置我想要在响应中的最大令牌数(在本例中每个响应 100 个令牌)。

现在,我们在使用 chat.sendMessage(message) 将消息发送到模型后等待此响应。当我们收到响应时,我们会将其返回给发出请求的人,并将模型返回的文本格式转换为 JSON。

最后但并非最不重要的一点是,如果我们遇到错误,我们可以在 catch 中使用它在控制台中抛出此错误,并返回状态 500,使使用此“迷你 api”的客户端的生活更轻松。美丽?

现在我们只需要使用下面的代码片段来指示我们的“mini api”将在哪里运行:

GOOGLE_GEMINI_API_KEY="sua-chave-vai-aqui"
登录后复制
登录后复制

我们的 api 将在我们一开始指定的端口上运行。完整的server.js代码如下所示:

app.post("/chat", async (req, res) => {
  const { message } = req.body;

  if (!message) {
    return res.status(400).json({ error: "Mensagem não pode estar vazia." });
  }

  //...
});
登录后复制

测试聊天机器人

现在最期待的时刻到了,测试我们的聊天机器人。为此,我们打开终端并输入以下命令:

try {
    const model = genAI.getGenerativeModel({
      model: "gemini-1.5-flash",
    });

    const chat = model.startChat({
      history: [],
      generationConfig: { maxOutputTokens: 100 },
    });

    const result = await chat.sendMessage(message);
    res.json({ response: result.response.text() });
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: "Erro ao processar mensagem." });
  }
登录后复制

运行此命令后,您应该在终端中收到以下消息:

app.listen(port, () => {
  console.log(`Servidor rodando em http://localhost:${port}`);
});
登录后复制

现在,通过访问 URL http://localhost:3000 并在输入中写入消息并按发送按钮,AI 会回复您的消息并将其显示在屏幕上。

Criando um Chatbot com JavaScript e Gemini AI: criando o backend

非常酷,对吧?

结论

至此,我们使用 JavaScript 和 Google Gemini API 完成了聊天机器人的创建。我们了解了如何从头开始创建前端、应用样式、操作 DOM。我们使用express.js创建了一个服务器,使用了Gemini API,配置了一条POST路由来与应用程序客户端通信,并能够通过我们自己开发的接口与AI对话。


但这并不是您能做的全部。我们可以为不同的任务定制和配置这个聊天机器人,从语言助理,到回答你的数学或编程问题的虚拟老师,这将取决于你的创造力。

将人工智能转变为个性化助手需要训练模型,更多的是关于你希望它响应和表现的方式,而不是代码本身。

我们将在以后的文章中探讨其中的一些内容。

到时候见!

以上是使用 JavaScript 和 Gemini AI 创建聊天机器人:创建后端的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板