# Проект чата Этот проект демонстрирует, как создать чат-ассистента с использованием GitHub Models. Вот как выглядит готовый проект:  Немного контекста: создание чат-ассистентов с использованием генеративного ИИ — отличный способ начать изучение ИИ. В этом уроке вы научитесь интегрировать генеративный ИИ в веб-приложение. Давайте начнем. ## Подключение к генеративному ИИ Для бэкенда мы используем GitHub Models. Это отличный сервис, который позволяет использовать ИИ бесплатно. Перейдите в его playground и возьмите код, соответствующий выбранному вами языку бэкенда. Вот как это выглядит: [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)  Как мы уже сказали, выберите вкладку "Code" и ваш предпочитаемый runtime.  ### Использование 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") ``` ## Экспонирование через Web API Отлично, мы завершили часть с ИИ, теперь посмотрим, как интегрировать это в Web API. Для Web 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) ``` Здесь мы создаем API на 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 (разделение ресурсов между источниками). Это необходимо, так как наш бэкенд и фронтенд будут работать на разных портах, и нужно разрешить фронтенду обращаться к бэкенду. ### Использование 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