JavaScript와 Gemini AI로 챗봇 만들기: 백엔드 만들기-JS 튜토리얼-php.cn

저장하세요! 아

Javascript 및 Gemini AI를 사용하여 챗봇을 계속 생성하면서 프로젝트의 "백엔드"를 추가할 예정입니다. 지난번에 우리는 HTML, CSS 및 Javascript를 사용하여 프런트엔드를 만들었고 여기서 사용자 인터페이스가 사용자와 챗봇 간의 대화를 반영할 것임을 보장했습니다.

이제 Gemini API와 통신하기 위해 express.js로 경로를 구성하여 서버를 생성해야 합니다. 갑시다!

프로젝트 종속성 설치

Google Gemini SDK인 express.js가 필요하고 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());

로그인 후 복사

이 코드는 "public" 폴더에서 정적 파일을 제공하도록 Express를 구성하고 JSON 페이로드가 있는 요청을 수락합니다. 이것이 바로 이 폴더에 index.html, styles.css 및 script.js 파일을 넣는 이유입니다. 또한 포트 3000에서 실행되도록 애플리케이션을 구성했습니다.

@google/generative-ai 라이브러리를 사용하여 Gemini API를 통합하고 GOOGLE_GEMINI_API_KEY라는 환경 변수에 저장된 키로 이를 인증합니다.

그런데 이 API 키는 어디서 얻을 수 있나요? 이제부터 알아보겠습니다.

제미니 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()을 사용하면 응답에 원하는 최대 토큰 수(이 경우 응답당 100개 토큰)를 구성하여 Gemini와의 통신을 시작할 수 있습니다.

이제 chat.sendMessage(message)를 사용하여 모델에 메시지를 보낸 후 이 응답을 기다립니다. 응답을 받으면 모델이 반환한 텍스트 형식을 JSON으로 변환하여 요청한 사람에게 응답을 반환합니다.

마지막으로 오류가 발생하면 catch 내에서 이를 사용하여 이 오류를 콘솔에 던지고 상태 500을 반환할 수 있으므로 이 "미니 API"를 사용하는 클라이언트의 작업이 더 쉬워집니다. 아름다움?

이제 아래 코드 조각을 사용하여 "미니 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와 대화할 수 있었습니다.

하지만 그게 전부는 아닙니다. 우리는 언어 보조자부터 수학이나 프로그래밍에 대한 질문에 답하는 가상 교사까지 다양한 작업에 맞게 이 챗봇을 사용자 정의하고 구성할 수 있으며 이는 귀하의 창의성에 따라 달라집니다.

AI를 개인화된 비서로 전환하려면 모델을 훈련해야 하며, 이는 코드 자체보다는 모델이 반응하고 행동하기를 원하는 방식에 더 중점을 둡니다.

향후 기사에서 이에 대해 좀 더 살펴보겠습니다.

그럼 만나요!

위 내용은 JavaScript와 Gemini AI로 챗봇 만들기: 백엔드 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!