# Чет пројекат Овај чет пројекат показује како направити Чет Асистента користећи GitHub Моделе. Ево како изгледа завршени пројекат:  Мало контекста, прављење чет асистената уз помоћ генеративне вештачке интелигенције је одличан начин да почнете са учењем о вештачкој интелигенцији. Оно што ћете научити је како интегрисати генеративну вештачку интелигенцију у веб апликацију током ове лекције, хајде да почнемо. ## Повезивање са генеративном вештачком интелигенцијом За позадину користимо GitHub Моделе. То је одлична услуга која вам омогућава да користите вештачку интелигенцију бесплатно. Идите на њихов 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) ``` Овде креирамо Flask API и дефинишемо подразумевану руту "/" и "/chat". Ова друга је намењена да је користи наш frontend за слање питања. Да бисмо интегрисали *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