JavaScript와 Gemini AI로 챗봇 만들기

그래서 잘 지내세요?

Github에서 일부 프로젝트를 보다가 최근에 Google Gemini를 사용하여 만든 챗봇을 발견했습니다. AI와 대화하여 원하는 언어 실력을 향상시킬 수 있는 언어 도우미를 만드는 것이 아이디어였습니다.

그래서 저는 "내가 이 프로젝트를 어떻게 진행했는지 모두와 공유하면 어떨까? "라고 생각했습니다. 이것이 제가 각 부분을 어떻게 수행했는지 보여드리기 위해 여기에 글을 쓰는 이유입니다. 이제 애플리케이션의 프런트엔드부터 시작해 보겠습니다.

새 프로젝트 시작하기

글쎄요, 제가 프로젝트에서 취할 몇 가지 조치를 정당화하기 위해, express.js를 사용하여 "서버"를 생성할 것이라고 바로 말씀드리겠습니다. 여기서 API를 제공할 것입니다. 프런트엔드와 Gemini API 간의 통신에 사용되는 '/chat' 경로입니다.

따라서 npm init -y 명령을 사용하여 프로젝트를 시작해야 합니다. 결과는 다음과 같은 package.json 파일입니다.

{
  "name": "chatbot-ia",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

또한 다음과 같이 파일을 정리해야 합니다.

public
  |__ index.html
  |__ style.css
  |__ script.js
package.json 

이 작업이 완료되면 챗봇의 시각적 부분을 만들어 보겠습니다. 가자!

채팅 모습 만들기

1시간짜리 라이브 코딩 프로젝트를 만들겠다는 아이디어였기 때문에 HTML, CSS, JavaScript를 사용하여 챗봇용 아주 간단한 인터페이스를 만들기로 결정했습니다. 제가 디자인에 약한 편이라 가장 마음에 드는 폰트와 색상으로 골랐어요. 그럼 HTML부터 시작하겠습니다.

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chatbot Assistente de Idiomas</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
  
  
    <div>



<p>E agora o CSS da página<br>
</p>

<pre class="brush:php;toolbar:false">* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f2f2f2;
}

.chat-container {
  width: 100%;
  max-width: 400px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.chat-box {
  height: 300px;
  max-height: 500px;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.chat-form {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.message {
  padding: 10px;
  margin-bottom: 8px;
  border-radius: 20px;
  width: auto;
  display: inline-flex;
  max-width: 50%;
  word-wrap: break-word;
}

.model {
  background-color: #e0e0e0;
  color: #333;
  align-self: flex-start;
  justify-content: flex-start;
}

.user {
  background-color: #4caf50;
  color: white;
  align-self: flex-end;
  justify-content: flex-end;
  margin-left: auto;
}

.input-container {
  display: flex;
  padding: 10px;
  border-top: 1px solid #ddd;
}

#user-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 20px;
  outline: none;
}

#send-button {
  margin-left: 10px;
  padding: 10px 15px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
}

#send-button:hover {
  background-color: #45a049;
}

이 결과는 아래 표시된 것과 유사한 화면이어야 합니다.

클라이언트 로직 생성

저희 애플리케이션은 Gemini API와 통신하는 챗봇입니다. 그래서 우리는 이러한 의사소통을 할 논리를 만들어야 합니다. 우리가 해야 할 일을 명확하게 하기 위해 아래에 나열하겠습니다.

• 사용자가 입력한 내용 가져오기
• 우리가 생성할 '/chat' 경로에 POST 요청을 합니다
• 채팅 화면에 사용자 및 모델(AI) 메시지 표시

자, 먼저 DOM 콘텐츠가 완전히 로드된 후에만 논리를 실행하도록 이벤트 리스너를 추가해 보겠습니다.

// script.js
document.addEventListener("DOMContentLoaded", () => {
  const chatForm = document.getElementById("chat-form");
  const chatWindow = document.getElementById("chat-window");
  const userInput = document.getElementById("user-input");

  // ...
});

사용자가 입력하는 입력, 메시지가 표시되는 창, 양식 필드 등 관심 있는 요소를 캡처하기 위해 상수를 생성합니다. 제출된 항목을 듣고 로직을 실행하기 때문입니다.

계속해서 사용자의 메시지를 보내 우리가 생성할 경로를 요청하는 두 번째 단계로 넘어가겠습니다.

{
  "name": "chatbot-ia",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

이 코드에서는 양식 요소의 제출 이벤트를 수신하고 있습니다. 따라서 먼저 메시지를 보낼 때마다 페이지가 다시 로드되는 것을 방지하기 위해 PreventDefault를 사용합니다. 그런 다음 사용자가 입력한 내용을 취하여 메시지의 처음부터 공백을 제거하고 Trim()으로 끝납니다. 그리고 메시지가 비어 있지 않은지, 비어 있는지 확인합니다. 메시지가 비어 있으면 바로 프로세스가 중단됩니다.

이제 사용자의 메시지가 있으면 addMessage() 함수를 사용하여 화면에 표시합니다. 이 함수는 다음과 같이 정의됩니다.

public
  |__ index.html
  |__ style.css
  |__ script.js
package.json 

기본적으로 메시지를 보낸 사람과 메시지 내용을 받아 이 정보를 채팅에 표시하고, 사용자의 올바른 스타일과 AI 모델인 모델을 추가합니다.

자, 이제 요청 논리로 돌아가서 사용자 메시지가 있는 경우 가져오기 API를 사용하여 POST 요청을 만들어야 하며 이 요청의 본문은 사용자 메시지입니다.

마지막으로 이 요청에 대한 응답을 받으면 채팅에 모델의 메시지가 표시됩니다. 그렇지 않으면 오류를 받아 console.error()를 사용하여 콘솔에 표시하거나 사용자 정의된 방식으로 채팅 자체에 메시지를 표시합니다. 그리고 채팅 유용성을 개선하기 위해 userInput.value = "";를 사용하여 사용자 메시지 입력을 정리했습니다.

script.js 파일은 다음과 같습니다.

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chatbot Assistente de Idiomas</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
  
  
    <div>



<p>E agora o CSS da página<br>
</p>

<pre class="brush:php;toolbar:false">* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f2f2f2;
}

.chat-container {
  width: 100%;
  max-width: 400px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.chat-box {
  height: 300px;
  max-height: 500px;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.chat-form {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.message {
  padding: 10px;
  margin-bottom: 8px;
  border-radius: 20px;
  width: auto;
  display: inline-flex;
  max-width: 50%;
  word-wrap: break-word;
}

.model {
  background-color: #e0e0e0;
  color: #333;
  align-self: flex-start;
  justify-content: flex-start;
}

.user {
  background-color: #4caf50;
  color: white;
  align-self: flex-end;
  justify-content: flex-end;
  margin-left: auto;
}

.input-container {
  display: flex;
  padding: 10px;
  border-top: 1px solid #ddd;
}

#user-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 20px;
  outline: none;
}

#send-button {
  margin-left: 10px;
  padding: 10px 15px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
}

#send-button:hover {
  background-color: #45a049;
}

---

이걸로 챗봇의 프론트엔드 부분을 마치겠습니다. 다음 단계는 "서버"를 만들고 Gemini API와 통신하여 생명, 우주 및 기타 모든 것에 대해 이야기하는 것입니다!

다음에 또 만나요!