بناء صندوق محادثة Chat Box

صندوق المحادثة حلقة وصل بين المستخدم والذكاء الاصطناعي

يكتب المستخدم رسالة في الواجهة، ثم يرسلها البرنامج إلى خادم بايثون. يستقبل الخادم الرسالة ويرسلها إلى نموذج الذكاء الاصطناعي، وبعد ذلك يعيد الإجابة إلى الواجهة لتظهر للمستخدم.

User -> Chat Box -> Python Server -> AI Model
AI Model -> Python Server -> Chat Box -> User

ما الذي سنبنيه؟

أنشئ صندوق المحادثة باستخدام HTML

نبدأ بعناصر بسيطة: مساحة لعرض الرسائل، وحقل لكتابة رسالة جديدة، وزر للإرسال. لا يوجد ذكاء اصطناعي هنا بعد؛ نحن نبني المكان الذي ستظهر فيه المحادثة.

<div id="chat-box"></div>
<input id="user-input" type="text">
<button id="send-button">Send</button>

اجعل الزر يضيف رسالة

بعد ذلك نستخدم JavaScript لقراءة النص. عند ضغط المستخدم على الزر، ننشئ عنصراً جديداً ونضيفه إلى مساحة المحادثة. هذه الخطوة تجعل الصندوق تفاعلياً حتى قبل الاتصال بالذكاء الاصطناعي.

const input = document.querySelector('#user-input');
const chatBox = document.querySelector('#chat-box');

function addMessage(text) {
    const message = document.createElement('p');
    message.textContent = text;
    chatBox.appendChild(message);
}

ثبّت Flask لتشغيل خادم Python

نحتاج إلى إطار عمل Flask حتى نستطيع إنشاء خادم يستقبل رسائل صندوق المحادثة. Flask مكتبة Python خفيفة، وتوفر لنا المسارات مثل /chat التي تتصل بها الواجهة.

افتح موجّه الأوامر أو الطرفية داخل مجلد المشروع، ثم نفّذ الأمر التالي:

python -m pip install flask

بعد انتهاء التثبيت، تحقق من أن Flask أصبح متاحاً في نفس بيئة Python:

python -c "import flask; print(flask.__version__)"

أرسل الرسالة إلى Python

لا نضع مفتاح API في JavaScript داخل المتصفح. بدلاً من ذلك، ترسل الواجهة الرسالة إلى خادم Python، والخادم وحده يتواصل مع مزود الذكاء الاصطناعي ويحمي المفتاح السري.

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.post('/chat')
def chat():
    message = request.json['message']
    return jsonify({'reply': f'You said: {message}'})

استبدل الإجابة التجريبية بإجابة ذكية

بعد التأكد من أن الواجهة والخادم يعملان، نضيف استدعاء نموذج الذكاء الاصطناعي داخل دالة chat(). نبني المشروع على مراحل حتى نعرف مكان المشكلة إذا حدث خطأ، ولا نخلط بين واجهة المحادثة واتصال API.