# Chat-Projekt Dieses Chat-Projekt zeigt, wie man einen Chat-Assistenten mit GitHub Models erstellt. So sieht das fertige Projekt aus:  Ein bisschen Kontext: Chat-Assistenten mit generativer KI zu erstellen, ist eine großartige Möglichkeit, um mit KI zu beginnen. In dieser Lektion lernst du, generative KI in eine Web-App zu integrieren. Lass uns anfangen. ## Verbindung zur generativen KI Für das Backend verwenden wir GitHub Models. Es ist ein großartiger Dienst, der es dir ermöglicht, KI kostenlos zu nutzen. Gehe zu seinem Playground und hole dir den Code, der zu deiner gewählten Backend-Sprache passt. So sieht es im [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) aus:  Wie gesagt, wähle den Tab "Code" und deine bevorzugte Laufzeitumgebung.  ### Verwendung von Python In diesem Fall wählen wir Python, was bedeutet, dass wir diesen Code verwenden: ```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) ``` Lass uns diesen Code ein wenig bereinigen, damit er wiederverwendbar ist: ```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 ``` Mit dieser Funktion `call_llm` können wir nun einen Prompt und einen System-Prompt übergeben, und die Funktion gibt das Ergebnis zurück. ### KI-Assistent anpassen Wenn du den KI-Assistenten anpassen möchtest, kannst du festlegen, wie er sich verhalten soll, indem du den System-Prompt wie folgt ausfüllst: ```python call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive") ``` ## Über eine Web-API bereitstellen Super, wir haben den KI-Teil fertiggestellt. Schauen wir uns an, wie wir das in eine Web-API integrieren können. Für die Web-API verwenden wir Flask, aber jedes Web-Framework sollte geeignet sein. Hier ist der Code dazu: ### Verwendung von 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) ``` Hier erstellen wir eine Flask-API und definieren eine Standardroute "/" und "/chat". Letztere soll von unserem Frontend verwendet werden, um Fragen an die API zu übermitteln. Um *llm.py* zu integrieren, müssen wir Folgendes tun: - Die Funktion `call_llm` importieren: ```python from llm import call_llm from flask import Flask, request ``` - Sie in der Route "/chat" aufrufen: ```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 }) ``` Hier analysieren wir die eingehende Anfrage, um die Eigenschaft `message` aus dem JSON-Body zu extrahieren. Danach rufen wir die LLM mit diesem Aufruf auf: ```python response = call_llm(message, "You are a helpful assistant") # return the response as JSON return jsonify({ "response": response }) ``` Super, jetzt haben wir alles erledigt. ## Cors konfigurieren Wir sollten erwähnen, dass wir etwas wie CORS (Cross-Origin Resource Sharing) einrichten. Das bedeutet, dass unser Backend und Frontend auf unterschiedlichen Ports laufen werden, und wir müssen dem Frontend erlauben, auf das Backend zuzugreifen. ### Verwendung von Python Es gibt ein Stück Code in *api.py*, das dies einrichtet: ```python from flask_cors import CORS app = Flask(__name__) CORS(app) # * example.com ``` Momentan ist es so konfiguriert, dass alle Ursprünge ("*") erlaubt sind, was etwas unsicher ist. Wir sollten dies einschränken, sobald wir in die Produktion gehen. ## Projekt ausführen Um dein Projekt auszuführen, musst du zuerst dein Backend und dann dein Frontend starten. ### Verwendung von Python Ok, wir haben *llm.py* und *api.py*. Wie können wir das mit einem Backend zum Laufen bringen? Es gibt zwei Dinge, die wir tun müssen: - Abhängigkeiten installieren: ```sh cd backend python -m venv venv source ./venv/bin/activate pip install openai flask flask-cors openai ``` - Die API starten: ```sh python api.py ``` Wenn du in Codespaces arbeitest, musst du im unteren Teil des Editors zu "Ports" gehen, mit der rechten Maustaste darauf klicken, "Port Visibility" auswählen und "Public" auswählen. ### Am Frontend arbeiten Jetzt, da wir eine API am Laufen haben, erstellen wir ein Frontend dafür. Ein minimales Frontend, das wir schrittweise verbessern werden. Erstelle im Ordner *frontend* Folgendes: ```text backend/ frontend/ index.html app.js styles.css ``` Beginnen wir mit **index.html**: ```html

Send