# چیٹ پروجیکٹ یہ چیٹ پروجیکٹ دکھاتا ہے کہ GitHub Models کا استعمال کرتے ہوئے ایک چیٹ اسسٹنٹ کیسے بنایا جا سکتا ہے۔ یہاں دیکھیں کہ مکمل پروجیکٹ کیسا نظر آتا ہے:  کچھ پس منظر، جنریٹو AI کا استعمال کرتے ہوئے چیٹ اسسٹنٹس بنانا AI کے بارے میں سیکھنے کا ایک بہترین طریقہ ہے۔ اس سبق کے دوران آپ سیکھیں گے کہ جنریٹو AI کو ویب ایپ میں کیسے شامل کیا جائے، آئیے شروع کرتے ہیں۔ ## جنریٹو AI سے جڑنا بیک اینڈ کے لیے، ہم GitHub Models استعمال کر رہے ہیں۔ یہ ایک بہترین سروس ہے جو آپ کو مفت میں AI استعمال کرنے کی سہولت دیتی ہے۔ اس کے پلے گراؤنڈ پر جائیں اور وہ کوڈ حاصل کریں جو آپ کی منتخب کردہ بیک اینڈ زبان سے مطابقت رکھتا ہو۔ یہ [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) پر اس طرح نظر آتا ہے۔  جیسا کہ ہم نے کہا، "Code" ٹیب اور اپنی منتخب کردہ رن ٹائم کو منتخب کریں۔  ### Python کا استعمال اس صورت میں ہم Python کا انتخاب کرتے ہیں، جس کا مطلب ہے کہ ہم یہ کوڈ منتخب کریں گے: ```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` کے ساتھ ہم اب ایک پرامپٹ اور سسٹم پرامپٹ لے سکتے ہیں اور فنکشن نتیجہ واپس کر دے گا۔ ### AI اسسٹنٹ کو حسب ضرورت بنائیں اگر آپ AI اسسٹنٹ کو اپنی مرضی کے مطابق بنانا چاہتے ہیں تو آپ سسٹم پرامپٹ کو اس طرح بھر کر اس کے برتاؤ کو مخصوص کر سکتے ہیں: ```python call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive") ``` ## اسے ویب API کے ذریعے ظاہر کریں زبردست، ہمارے پاس AI کا حصہ مکمل ہو گیا، آئیے دیکھتے ہیں کہ ہم اسے ویب API میں کیسے شامل کر سکتے ہیں۔ ویب API کے لیے، ہم Flask استعمال کرنے کا انتخاب کر رہے ہیں، لیکن کوئی بھی ویب فریم ورک اچھا ہونا چاہیے۔ آئیے اس کا کوڈ دیکھتے ہیں: ### Python کا استعمال ```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 API بناتے ہیں اور ایک ڈیفالٹ روٹ "/" اور "/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 }) ``` یہاں ہم آنے والی درخواست کو پارس کرتے ہیں تاکہ JSON باڈی سے `message` پراپرٹی حاصل کی جا سکے۔ اس کے بعد ہم LLM کو اس کال کے ساتھ کال کرتے ہیں: ```python response = call_llm(message, "You are a helpful assistant") # return the response as JSON return jsonify({ "response": response }) ``` زبردست، اب ہم نے وہ کر لیا جو ہمیں کرنا تھا۔ ## Cors کو ترتیب دیں ہمیں یہ بتانا چاہیے کہ ہم نے کچھ ایسا سیٹ اپ کیا ہے جیسے CORS، کراس-اورجن ریسورس شیئرنگ۔ اس کا مطلب یہ ہے کہ چونکہ ہمارا بیک اینڈ اور فرنٹ اینڈ مختلف پورٹس پر چلیں گے، ہمیں فرنٹ اینڈ کو بیک اینڈ میں کال کرنے کی اجازت دینی ہوگی۔ ### Python کا استعمال *api.py* میں ایک کوڈ کا حصہ ہے جو اسے سیٹ اپ کرتا ہے: ```python from flask_cors import CORS app = Flask(__name__) CORS(app) # * example.com ``` فی الحال یہ "*" کو اجازت دینے کے لیے سیٹ اپ کیا گیا ہے جو کہ تمام اوریجنز ہیں اور یہ تھوڑا غیر محفوظ ہے، ہمیں پروڈکشن میں جانے کے بعد اسے محدود کرنا چاہیے۔ ## اپنا پروجیکٹ چلائیں اپنا پروجیکٹ چلانے کے لیے، آپ کو پہلے اپنا بیک اینڈ اور پھر اپنا فرنٹ اینڈ شروع کرنا ہوگا۔ ### Python کا استعمال ٹھیک ہے، ہمارے پاس *llm.py* اور *api.py* ہے، ہم اسے بیک اینڈ کے ساتھ کیسے کام کر سکتے ہیں؟ ٹھیک ہے، دو چیزیں ہیں جو ہمیں کرنے کی ضرورت ہے: - ڈیپینڈنسیز انسٹال کریں: ```sh cd backend python -m venv venv source ./venv/bin/activate pip install openai flask flask-cors openai ``` - API شروع کریں ```sh python api.py ``` اگر آپ Codespaces میں ہیں تو آپ کو ایڈیٹر کے نیچے والے حصے میں Ports پر جانا ہوگا، اس پر دائیں کلک کریں اور "Port Visibility" پر کلک کریں اور "Public" منتخب کریں۔ ### فرنٹ اینڈ پر کام کریں اب جب کہ ہمارے پاس API چل رہا ہے، آئیے اس کے لیے ایک فرنٹ اینڈ بنائیں۔ ایک بالکل بنیادی فرنٹ اینڈ جسے ہم مرحلہ وار بہتر کریں گے۔ *frontend* فولڈر میں، درج ذیل بنائیں: ```text backend/ frontend/ index.html app.js styles.css ``` آئیے **index.html** سے شروع کرتے ہیں: ```html

Send