# Chat projekt Ez a chat projekt bemutatja, hogyan lehet Chat Asszisztenst építeni GitHub Modellek segítségével. Így néz ki a kész projekt:  Néhány háttérinformáció: generatív AI használatával chat asszisztensek építése remek módja annak, hogy elkezdjünk tanulni az AI-ról. Ebben a leckében megtanulhatod, hogyan integrálj generatív AI-t egy webalkalmazásba. Kezdjük! ## Kapcsolódás a generatív AI-hoz A backendhez a GitHub Modelleket használjuk. Ez egy nagyszerű szolgáltatás, amely lehetővé teszi az AI ingyenes használatát. Látogass el a playgroundjára, és szerezd meg a kódot, amely megfelel a választott backend nyelvednek. Így néz ki a [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground).  Ahogy mondtuk, válaszd ki a "Code" fület és a kívánt futtatási környezetet.  ### Python használata Ebben az esetben a Python-t választjuk, ami azt jelenti, hogy ezt a kódot választjuk: ```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) ``` Tisztítsuk meg ezt a kódot, hogy újrahasználható legyen: ```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 ``` Ezzel a `call_llm` függvénnyel most már megadhatunk egy promptot és egy rendszerpromptot, és a függvény visszaadja az eredményt. ### AI Asszisztens testreszabása Ha testre szeretnéd szabni az AI asszisztenst, megadhatod, hogyan viselkedjen, a rendszerprompt kitöltésével, például így: ```python call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive") ``` ## Web API-n keresztüli elérés Nagyszerű, az AI rész kész, nézzük meg, hogyan integrálhatjuk ezt egy Web API-ba. A Web API-hoz a Flask-et választjuk, de bármelyik webes keretrendszer megfelelő lehet. Nézzük meg a kódot: ### Python használata ```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) ``` Itt létrehozunk egy Flask API-t, és definiálunk egy alapértelmezett útvonalat "/" és "/chat". Az utóbbi arra szolgál, hogy a frontendünk kérdéseket küldjön a backendnek. Az *llm.py* integrálásához a következőket kell tennünk: - Importáljuk a `call_llm` függvényt: ```python from llm import call_llm from flask import Flask, request ``` - Meghívjuk a "/chat" útvonalról: ```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 }) ``` Itt feldolgozzuk a bejövő kérést, hogy kinyerjük a JSON törzsből a `message` tulajdonságot. Ezután az LLM-et így hívjuk meg: ```python response = call_llm(message, "You are a helpful assistant") # return the response as JSON return jsonify({ "response": response }) ``` Nagyszerű, most már készen vagyunk. ## Cors konfigurálása Fontos megemlíteni, hogy beállítunk valamit, amit CORS-nak, azaz cross-origin resource sharing-nek hívnak. Ez azt jelenti, hogy mivel a backendünk és a frontendünk különböző portokon fog futni, engedélyeznünk kell, hogy a frontend hívja a backendet. ### Python használata Van egy kódrészlet az *api.py*-ban, amely ezt beállítja: ```python from flask_cors import CORS app = Flask(__name__) CORS(app) # * example.com ``` Jelenleg úgy van beállítva, hogy "*" legyen, ami minden eredetet engedélyez, és ez egy kicsit nem biztonságos. Ezt korlátozni kell, amikor produkcióba kerülünk. ## Projekt futtatása A projekt futtatásához először a backendet, majd a frontendet kell elindítanod. ### Python használata Oké, tehát van *llm.py* és *api.py*, hogyan működtethetjük ezeket a backenddel? Két dolgot kell tennünk: - Függőségek telepítése: ```sh cd backend python -m venv venv source ./venv/bin/activate pip install openai flask flask-cors openai ``` - API indítása: ```sh python api.py ``` Ha Codespaces-ben dolgozol, menj az editor alsó részén található Ports részhez, kattints rá jobb gombbal, válaszd a "Port Visibility"-t, majd válaszd a "Public" opciót. ### Frontend fejlesztése Most, hogy az API működik, hozzunk létre egy frontendet ehhez. Egy minimális frontendet, amelyet lépésről lépésre fejlesztünk tovább. A *frontend* mappában hozz létre a következőket: ```text backend/ frontend/ index.html app.js styles.css ``` Kezdjük az **index.html**-lel: ```html

Send