كيفية إنشاء روبوت محادثة بالذكاء الاصطناعي باستخدام OpenAI GPT-4 و Node.js لتطبيق الويب
إنشاء روبوت محادثة مدعوم بالذكاء الاصطناعي لتطبيق الويب الخاص بك
يمكن أن يعزز إنشاء روبوت محادثة مدعوم بالذكاء الاصطناعي لتطبيق الويب الخاص بك التفاعل مع المستخدم بشكل كبير، ويوفر استجابات ذكية، ويؤتمت العديد من المهام. في هذا الدليل الشامل، سنرشدك خطوة بخطوة لإنشاء روبوت محادثة باستخدام OpenAI’s GPT-4 API، مع Node.js و Express.js للجزء الخلفي، و HTML/CSS/JavaScript للجزء الأمامي. بنهاية هذا الدليل، سيكون لديك روبوت محادثة يمكنه الاستفادة من تقنيات الذكاء الاصطناعي المتقدمة لفهم استفسارات المستخدمين والرد عليها بفعالية.
المتطلبات المسبقة
قبل البدء، تأكد من توفر المتطلبات التالية:
- معرفة أساسية بـJavaScript: فهم Node.js و frontend JavaScript.
- تثبيت Node.js و npm: قم بتنزيلهما من الموقع الرسمي لـ Node.js.
- حساب في OpenAI: قم بالتسجيل في OpenAI واحصل على الوصول إلى API.
- محرر نصوص أو بيئة تطوير متكاملة (IDE) مثل VS Code.
- Git (اختياري): للتحكم في الإصدارات والنشر.
الخطوة 1: إعداد بيئة التطوير
ابدأ بإنشاء دليل جديد لمشروعك والتنقل إليه:
mkdir ai-chatbot-webapp
cd ai-chatbot-webappثم قم بتهيئة مشروع Node.js جديد:
npm init -yتثبيت الحزم المطلوبة:
npm install express dotenv axios corsقم بتنظيم مشروعك كما يلي:
ai-chatbot-webapp/
├── node_modules/
├── public/
│ ├── index.html
│ ├── styles.css
│ └── script.js
├── server.js
├── .env
├── package.json
└── README.mdالخطوة 2: الحصول على الوصول إلى OpenAI API
توجه إلى OpenAI وقم بالتسجيل للحصول على حساب، ثم احصل على مفتاح API:
- انتقل إلى قسم API بعد تسجيل الدخول.
- اضغط على “Create new secret key” وانسخ المفتاح الناتج.
قم بتكوين المتغيرات البيئية:
OPENAI_API_KEY=your-openai-api-key
PORT=3000استبدل your-openai-api-key بمفتاح API الفعلي الذي حصلت عليه من OpenAI.
الخطوة 3: تطوير الجزء الخلفي باستخدام Node.js و Express
قم بإنشاء ملف server.js في جذر المشروع:
// server.js
require('dotenv').config();
const express = require('express');
const axios = require('axios');
const cors = require('cors');
const path = require('path');
const app = express();
const PORT = process.env.PORT || 3000;
app.use(cors());
app.use(express.json());
app.use(express.static(path.join(__dirname, 'public')));
// Endpoint to handle chatbot messages
app.post('/api/message', async (req, res) => {
const userMessage = req.body.message;
if (!userMessage) {
return res.status(400).json({ error: 'No message provided.' });
}
try {
const response = await axios.post(
'https://api.openai.com/v1/chat/completions',
{
model: 'gpt-4',
messages: [
{ role: 'system', content: 'You are a helpful assistant.' },
{ role: 'user', content: userMessage },
],
max_tokens: 150,
temperature: 0.7,
},
{
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`,
},
}
);
const botReply = response.data.choices[0].message.content.trim();
res.json({ reply: botReply });
} catch (error) {
console.error('Error communicating with OpenAI:', error.response ? error.response.data : error.message);
res.status(500).json({ error: 'An error occurred while processing your request.' });
}
});
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});هذا الكود يقوم بإعداد خادم Express الذي يتواصل مع OpenAI GPT-4 API، ويتعامل مع الرسائل المرسلة من الواجهة الأمامية.
الخطوة 4: بناء واجهة المستخدم الأمامية
قم بإنشاء ملف index.html داخل مجلد public/:
<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Chatbot</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="chat-container">
<div id="chatbox" class="chatbox"></div>
<div class="input-area">
<input type="text" id="userInput" placeholder="Type your message here..." />
<button id="sendBtn">Send</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>ثم قم بإنشاء ملف styles.css داخل مجلد public/:
/* public/styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.chat-container {
width: 400px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
overflow: hidden;
}
.chatbox {
flex: 1;
padding: 20px;
overflow-y: auto;
background-color: #fafafa;
}
.input-area {
display: flex;
border-top: 1px solid #ccc;
}
#userInput {
flex: 1;
padding: 10px;
border: none;
outline: none;
}
#sendBtn {
padding: 10px 20px;
border: none;
background-color: #007bff;
color: #fff;
cursor: pointer;
transition: background-color 0.3s;
}
#sendBtn:hover {
background-color: #0056b3;
}
.message {
margin-bottom: 15px;
display: flex;
}
.message.user {
justify-content: flex-end;
}
.message.bot {
justify-content: flex-start;
}
.message .text {
max-width: 70%;
padding: 10px 15px;
border-radius: 20px;
position: relative;
}
.message.user .text {
background-color: #dcf8c6;
border-bottom-right-radius: 0;
}
.message.bot .text {
background-color: #ececec;
border-bottom-left-radius: 0;
}أخيرًا، قم بإنشاء ملف script.js داخل مجلد public/:
// public/script.js
document.addEventListener('DOMContentLoaded', () => {
const sendBtn = document.getElementById('sendBtn');
const userInput = document.getElementById('userInput');
const chatbox = document.getElementById('chatbox');
sendBtn.addEventListener('click', sendMessage);
userInput.addEventListener('keypress', function (e) {
if (e.key === 'Enter') {
sendMessage();
}
});
async function sendMessage() {
const message = userInput.value.trim();
if (message === '') return;
appendMessage('user', message);
userInput.value = '';
try {
const response = await fetch('/api/message', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ message: message }),
});
const data = await response.json();
if (data.reply) {
appendMessage('bot', data.reply);
} else {
appendMessage('bot', 'Sorry, I did not understand that.');
}
} catch (error) {
console.error('Error:', error);
appendMessage('bot', 'Sorry, there was an error processing your request.');
}
}
function appendMessage(sender, text) {
const messageDiv = document.createElement('div');
messageDiv.classList.add('message', sender);
const textDiv = document.createElement('div');
textDiv.classList.add('text');
textDiv.textContent = text;
messageDiv.appendChild(textDiv);
chatbox.appendChild(messageDiv);
chatbox.scrollTop = chatbox.scrollHeight;
}
});الخطوة 5: دمج الواجهة الأمامية مع الخلفية
تأكد من أن الملفات الثابتة يتم تقديمها بشكل صحيح عبر express.static وأن الواجهة الأمامية تتصل بنقطة النهاية API.
الخطوة 6: اختبار روبوت المحادثة
قم بتشغيل الخادم باستخدام الأمر التالي:
node server.jsقم بزيارة http://localhost:3000 وتفاعل مع روبوت المحادثة لاختبار قدراته.
الخاتمة
إن إنشاء روبوت محادثة مدعوم بالذكاء الاصطناعي لتطبيق الويب الخاص بك يتطلب دمج نماذج لغة متقدمة مثل GPT-4 من OpenAI مع خلفية قوية وواجهة أمامية سهلة الاستخدام. باتباع هذا الدليل، قد أنشأت روبوت محادثة قادرًا على فهم استفسارات المستخدمين والرد عليها بذكاء.
اترك تعليقاً