AI-спрямовані чат-боти революціонізували спосіб взаємодії бізнесів з клієнтами, надаючи миттєві, персоналізовані відповіді. Використовуючи потужність ChatGPT, компанії можуть забезпечити ефективну та інтерактивну підтримку клієнтів. У цьому блозі ми розглянемо процес створення чат-бота на базі ChatGPT у реальному часі, використовуючи Node.js для бекенду та Vue.js для фронтенду. Поєднання цих двох технологій дозволяє безшовно інтегрувати взаємодії на основі ШІ з динамічною, реального часу комунікацією.

Що ви створите

До кінця цього посібника ви матимете повнофункціональний чат-бот, здатний спілкуватися з користувачами в реальному часі. Бекенд використовуватиме Node.js для управління запитами до OpenAI API, а Vue.js фронтенд забезпечить інтерактивний, зручний інтерфейс для користувачів.
Комунікація в реальному часі між сервером і клієнтом буде здійснюватися за допомогою Socket.IO, що забезпечить плавний і миттєвий обмін повідомленнями.

Попередні вимоги

• Базові знання JavaScript та Node.js
• Ознайомленість з Vue.js
• API-ключ ChatGPT від OpenAI (Потрібно зареєструватися та отримати ключ API)

Тепер давайте перейдемо до покрокового процесу!

Покрокова інструкція

1.

Налаштування бекенду (Node.js)

1.1 Ініціалізація проекту

Для початку створіть нову директорію для вашого проекту та ініціалізуйте новий проект Node.js за допомогою npm:

mkdir chatgpt-chatbot  
cd chatgpt-chatbot  
npm init -y

1.2 Встановлення необхідних пакетів

Нам знадобиться кілька npm пакетів для нашого бекенду:

• Express: Веб-фреймворк для Node.js.
• Socket.IO: Бібліотека для комунікації в реальному часі.
• OpenAI API клієнт: Для взаємодії з моделями GPT від OpenAI.

Встановіть їх за допомогою наступної команди:

npm install express socket.io openai

1.3 Налаштування сервера

Створіть файл з назвою server.js в корені вашого проекту.
Цей файл налаштує сервер Node.js і буде обробляти комунікацію з API OpenAI та фронтендом.

javascript

const express = require('express');  
const http = require('http');  
const socketIo = require('socket.io');  
const { Configuration, OpenAIApi } = require('openai');

// Ініціалізація Express і створення HTTP сервера  
const app = express();  
const server = http.createServer(app); // Ініціалізація Socket.IO  
const io = socketIo(server); // Налаштування клієнта OpenAI API  
const openai = new OpenAIApi(new Configuration({  
 apiKey: 'YOUR_OPENAI_API_KEY', // Замініть на свій ключ API OpenAI  
}));// Обробка підключень клієнтів через Socket.IO  
io.on('connection', (socket) => {  
 console.log('Користувач підключився'); // Обробка вхідних повідомлень від клієнта  
 socket.on('chatMessage', async (message) => {  
 try {  
 // Надсилаємо повідомлення до ChatGPT і отримуємо відповідь  
 const response = await openai.createChatCompletion({  
 model: 'gpt-4', // Використовуємо GPT-4 або вашу обрану модель  
 messages: [{ role: 'user', content: message }],  
 }); // Відправляємо відповідь назад клієнту  
 socket.emit('chatResponse', response.data.choices[0].message.content);  
 } catch (error) {  
 console.error('Помилка з API OpenAI:', error);  
 socket.emit('chatResponse', 'Вибачте, сталася помилка!');  
 }  
 }); // Обробка відключення клієнта  
 socket.on('disconnect', () => {  
 console.log('Користувач відключився');  
 });  
});// Обслуговування статичних файлів (наприклад, додатку Vue.js), якщо потрібно  
app.use(express.static('public'));// Запуск сервера  
const PORT = process.env.PORT || 3000;  
server.listen(PORT, () => {  
 console.log(`Сервер запущено на http://localhost:${PORT}`);  
})

У цьому налаштуванні бекенду:

• Express використовується для створення простого веб-сервера.
• Socket.IO обробляє комунікацію в реальному часі між сервером і клієнтом.
• Клієнт OpenAI API налаштований для відправлення повідомлень користувача до ChatGPT і отримання відповіді.

1.4 Тестування бекенду

Перед інтеграцією фронтенду, ви можете протестувати бекенд, запустивши:

node server.js

Це запустить сервер, і ви побачите повідомлення "Сервер запущено на http://localhost:3000".
Переконайтеся, що бекенд правильно взаємодіє з OpenAI, реєструючи тестові взаємодії.

2. Фронтенд на Vue.js

2.1 Встановлення Vue CLI

Для створення фронтенду на Vue.js вам потрібно мати встановлений Vue CLI. Якщо ви ще не маєте його, встановіть глобально за допомогою:

npm install -g @vue/cli

2.2 Створення Vue-проєкту

У кореневій директорії вашого проєкту створіть новий Vue-проєкт:

vue create client

Виберіть стандартний пресет або налаштуйте параметри згідно з вашими вподобаннями.

2.3 Встановлення клієнта Socket.IO

У директорії вашого Vue-проєкту (client) встановіть клієнт Socket.IO для встановлення комунікації з сервером Node.js:

cd client  
npm install socket.io-client

2.4 Створення компонентів Vue

У директорії client, перейдіть до src/components і створіть новий компонент під назвою ChatBot.vue.
Цей компонент буде обробляти інтерфейс чату.

У цьому компоненті:

• Клієнт Socket.IO встановлює реальний зв'язок з бекендом.
• Користувач може надсилати повідомлення, набираючи текст і натискаючи Enter, а повідомлення динамічно відображаються.
• Повідомлення як від користувача, так і від бота, відображаються у різних стилях.

2.5 Запуск Vue App

Після налаштування фронтенду запустіть Vue додаток

Це запустить сервер розробки для вашого Vue додатку.
Відкрийте http://localhost:8080 у вашому браузері, і ви зможете взаємодіяти з чат-ботом у реальному часі.

3. Запуск додатку

Тепер, коли і бекенд, і фронтенд налаштовані, переконайтеся, що обидва працюють одночасно:

1. Запустіть сервер бекенду, виконавши команду node server.js у кореневій теці проекту.
2. Запустіть фронтенд, виконавши команду npm run serve у теці client.

Відкрийте http://localhost:8080 у вашому браузері, щоб взаємодіяти з чат-ботом у реальному часі, який працює на ChatGPT!

Висновок

Ви успішно створили чат-бота в реальному часі, що працює на базі штучного інтелекту, використовуючи Node.js, Vue.js та ChatGPT! Бекенд обробляє з'єднання з API OpenAI та реальну комунікацію, а фронтенд надає безшовний інтерфейс чату для користувачів.
Ця налаштування дозволяє вам розширювати та налаштовувати чат-бота за вашим бажанням, чи то для підтримки клієнтів, інтерактивного навчання, чи для будь-якої іншої програми на базі штучного інтелекту.

Щасливого кодування!

джерело-посилання

Перекладено з: Creating a ChatGPT-Powered Chatbot with Node.js and Vue.js