# مشروع الدردشة هذا المشروع يوضح كيفية بناء مساعد دردشة باستخدام نماذج GitHub. إليك كيف يبدو المشروع النهائي:  بعض السياق، بناء مساعدي دردشة باستخدام الذكاء الاصطناعي التوليدي هو طريقة رائعة للبدء في تعلم الذكاء الاصطناعي. ما ستتعلمه هو كيفية دمج الذكاء الاصطناعي التوليدي في تطبيق ويب خلال هذه الدرس، لنبدأ. ## الاتصال بالذكاء الاصطناعي التوليدي بالنسبة للجزء الخلفي، نحن نستخدم نماذج GitHub. إنها خدمة رائعة تمكنك من استخدام الذكاء الاصطناعي مجانًا. انتقل إلى منطقة التجربة الخاصة بها واحصل على الكود الذي يتوافق مع لغة الجزء الخلفي التي اخترتها. إليك كيف يبدو ذلك في [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)  كما ذكرنا، اختر علامة التبويب "Code" ولغة التشغيل التي اخترتها.  ### استخدام بايثون في هذه الحالة، نختار بايثون، مما يعني أننا نختار هذا الكود: ```python """Run this model in Python > pip install openai """ import os from openai import OpenAI # To authenticate with the model you will need to generate a personal access token (PAT) in your GitHub settings. # Create your PAT token by following instructions here: https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens client = OpenAI( base_url="https://models.github.ai/inference", api_key=os.environ["GITHUB_TOKEN"], ) response = client.chat.completions.create( messages=[ { "role": "system", "content": "", }, { "role": "user", "content": "What is the capital of France?", } ], model="openai/gpt-4o-mini", temperature=1, max_tokens=4096, top_p=1 ) print(response.choices[0].message.content) ``` لنقم بتنظيف هذا الكود قليلاً ليصبح قابلاً لإعادة الاستخدام: ```python def call_llm(prompt: str, system_message: str): response = client.chat.completions.create( messages=[ { "role": "system", "content": system_message, }, { "role": "user", "content": prompt, } ], model="openai/gpt-4o-mini", temperature=1, max_tokens=4096, top_p=1 ) return response.choices[0].message.content ``` مع هذه الوظيفة `call_llm` يمكننا الآن أخذ نص الإدخال ونص النظام، وستعيد الوظيفة النتيجة. ### تخصيص مساعد الذكاء الاصطناعي إذا كنت ترغب في تخصيص مساعد الذكاء الاصطناعي، يمكنك تحديد كيفية تصرفه عن طريق ملء نص النظام كما يلي: ```python call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive") ``` ## عرضه عبر واجهة برمجة تطبيقات ويب رائع، لقد انتهينا من جزء الذكاء الاصطناعي، دعونا نرى كيف يمكننا دمجه في واجهة برمجة تطبيقات ويب. بالنسبة لواجهة برمجة التطبيقات، اخترنا استخدام Flask، ولكن أي إطار عمل ويب سيكون جيدًا. لنرى الكود الخاص بذلك: ### استخدام بايثون ```python # api.py from flask import Flask, request, jsonify from llm import call_llm from flask_cors import CORS app = Flask(__name__) CORS(app) # * example.com @app.route("/", methods=["GET"]) def index(): return "Welcome to this API. Call POST /hello with 'message': 'my message' as JSON payload" @app.route("/hello", methods=["POST"]) def hello(): # get message from request body { "message": "do this taks for me" } data = request.get_json() message = data.get("message", "") response = call_llm(message, "You are a helpful assistant.") return jsonify({ "response": response }) if __name__ == "__main__": app.run(host="0.0.0.0", port=5000) ``` هنا، نقوم بإنشاء واجهة برمجة تطبيقات Flask ونحدد مسارًا افتراضيًا "/" و "/chat". المسار الأخير مخصص لاستخدامه من قبل الواجهة الأمامية لتمرير الأسئلة إليه. لدمج *llm.py* إليك ما نحتاج إلى القيام به: - استيراد وظيفة `call_llm`: ```python from llm import call_llm from flask import Flask, request ``` - استدعاؤها من المسار "/chat": ```python @app.route("/hello", methods=["POST"]) def hello(): # get message from request body { "message": "do this taks for me" } data = request.get_json() message = data.get("message", "") response = call_llm(message, "You are a helpful assistant.") return jsonify({ "response": response }) ``` هنا نقوم بتحليل الطلب الوارد لاسترداد خاصية `message` من جسم JSON. بعد ذلك، نستدعي LLM بهذا الاستدعاء: ```python response = call_llm(message, "You are a helpful assistant") # return the response as JSON return jsonify({ "response": response }) ``` رائع، الآن قمنا بما نحتاج إليه. ## إعداد Cors يجب أن نشير إلى أننا قمنا بإعداد شيء مثل CORS، مشاركة الموارد عبر الأصل. هذا يعني أنه نظرًا لأن الجزء الخلفي والواجهة الأمامية سيعملان على منافذ مختلفة، نحتاج إلى السماح للواجهة الأمامية بالاتصال بالجزء الخلفي. ### استخدام بايثون هناك قطعة من الكود في *api.py* تقوم بإعداد هذا: ```python from flask_cors import CORS app = Flask(__name__) CORS(app) # * example.com ``` حاليًا تم إعدادها للسماح بـ "*" وهو جميع الأصول، وهذا غير آمن قليلاً، يجب أن نقوم بتقييده بمجرد الانتقال إلى الإنتاج. ## تشغيل المشروع لتشغيل المشروع، تحتاج إلى تشغيل الجزء الخلفي أولاً ثم الواجهة الأمامية. ### استخدام بايثون حسنًا، لدينا *llm.py* و *api.py*، كيف يمكننا جعل هذا يعمل مع الجزء الخلفي؟ حسنًا، هناك شيئان نحتاج إلى القيام بهما: - تثبيت التبعيات: ```sh cd backend python -m venv venv source ./venv/bin/activate pip install openai flask flask-cors openai ``` - تشغيل واجهة برمجة التطبيقات ```sh python api.py ``` إذا كنت تستخدم Codespaces، تحتاج إلى الانتقال إلى المنافذ في الجزء السفلي من المحرر، انقر بزر الماوس الأيمن فوقه وانقر على "Port Visibility" واختر "Public". ### العمل على واجهة أمامية الآن بعد أن أصبح لدينا واجهة برمجة تطبيقات تعمل، دعونا ننشئ واجهة أمامية لهذا. واجهة أمامية بسيطة للغاية سنقوم بتحسينها خطوة بخطوة. في مجلد *frontend*، قم بإنشاء ما يلي: ```text backend/ frontend/ index.html app.js styles.css ``` لنبدأ بـ **index.html**: ```html

Send