# சந்தை திட்டம் இந்த சந்தை திட்டம் GitHub Models பயன்படுத்தி ஒரு Chat Assistant உருவாக்குவது எப்படி என்பதை காட்டுகிறது. இது முடிந்த திட்டம் எப்படி இருக்கும் என்பதை இங்கே காணலாம்: ![சந்தை பயன்பாடு](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.ta.png) சில பின்னணி தகவல்கள், Generative AI பயன்படுத்தி Chat Assistant உருவாக்குவது AI பற்றி கற்றுக்கொள்வதற்கான சிறந்த வழியாகும். இந்த பாடத்தில், Generative AI-யை ஒரு வலை பயன்பாட்டில் ஒருங்கிணைப்பது எப்படி என்பதை நீங்கள் கற்றுக்கொள்வீர்கள். தொடங்குவோம். ## Generative AI-யுடன் இணைப்பு பின்புறத்தில், GitHub Models-ஐ பயன்படுத்துகிறோம். இது AI-யை இலவசமாக பயன்படுத்த அனுமதிக்கும் சிறந்த சேவையாகும். அதன் Playground-க்கு சென்று, உங்கள் தேர்ந்தெடுத்த பின்புற மொழிக்கு பொருந்தும் குறியீட்டை எடுக்கவும். இது [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) இல் எப்படி இருக்கும்: ![GitHub Models AI Playground](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.ta.png) நாம் கூறியபடி, "Code" tab-ஐ தேர்ந்தெடுத்து உங்கள் runtime-ஐ தேர்ந்தெடுக்கவும். ![Playground தேர்வு](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.ta.png) ### 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` செயல்பாட்டுடன், prompt மற்றும் system prompt-ஐ எடுத்துக்கொண்டு, செயல்பாடு முடிவில் முடிவைத் திருப்புகிறது. ### AI Assistant-ஐ தனிப்பயனாக்குதல் AI Assistant-ஐ தனிப்பயனாக்க விரும்பினால், system prompt-ஐ இவ்வாறு நிரப்புவதன் மூலம் அதன் நடத்தை எப்படி இருக்க வேண்டும் என்பதை குறிப்பிடலாம்: ```python call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive") ``` ## அதை ஒரு Web API மூலம் வெளிப்படுத்துதல் சிறந்தது, நாம் AI பகுதியை முடித்துவிட்டோம், அதை Web API-யுடன் ஒருங்கிணைப்பது எப்படி என்பதை பார்ப்போம். Web API-க்கு, Flask-ஐ பயன்படுத்துகிறோம், ஆனால் எந்தவொரு வலை framework-ஐ பயன்படுத்தலாம். இதற்கான குறியீட்டை பார்ப்போம்: ### 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" என்ற இயல்பான வழியை வரையறுக்கிறோம். பின்னணி கேள்விகளை frontend மூலம் அனுப்புவதற்காக "/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, cross-origin resource sharing போன்றவற்றை அமைத்துள்ளோம் என்பதை குறிப்பிட வேண்டும். இதன் பொருள், backend மற்றும் frontend வெவ்வேறு ports-ல் இயங்குவதால், frontend backend-ஐ அழைக்க அனுமதிக்க வேண்டும். ### Python பயன்படுத்துதல் *api.py* இல் இதை அமைக்கும் ஒரு குறியீடு உள்ளது: ```python from flask_cors import CORS app = Flask(__name__) CORS(app) # * example.com ``` இப்போது "*" என்று அனைத்து origin-களையும் அனுமதிக்க அமைக்கப்பட்டுள்ளது, இது கொஞ்சம் பாதுகாப்பற்றது, அதை உற்பத்திக்கு செல்லும்போது கட்டுப்படுத்த வேண்டும். ## உங்கள் திட்டத்தை இயக்கவும் உங்கள் திட்டத்தை இயக்க, முதலில் backend-ஐ தொடங்க வேண்டும், பின்னர் frontend-ஐ தொடங்க வேண்டும். ### Python பயன்படுத்துதல் சரி, *llm.py* மற்றும் *api.py* உள்ளது, backend-இன் மூலம் இதை எப்படி வேலை செய்ய வைக்கலாம்? இரண்டு விஷயங்களை செய்ய வேண்டும்: - Dependencies-ஐ நிறுவவும்: ```sh cd backend python -m venv venv source ./venv/bin/activate pip install openai flask flask-cors openai ``` - API-ஐ தொடங்கவும்: ```sh python api.py ``` Codespaces-ல் இருந்தால், editor-இன் கீழ் Ports-க்கு செல்லவும், அதில் right-click செய்து "Port Visibility" ஐ கிளிக் செய்து "Public" ஐ தேர்ந்தெடுக்கவும். ### ஒரு frontend-இல் வேலை செய்யவும் API இயங்கும் நிலையில், frontend உருவாக்குவோம். இது bare minimum frontend ஆகும், அதை படிப்படியாக மேம்படுத்துவோம். *frontend* கோப்பகத்தில் இதை உருவாக்கவும்: ```text backend/ frontend/ index.html app.js styles.css ``` **index.html**-இல் தொடங்குவோம்: ```html