# Projeto de Chat Este projeto de chat mostra como construir um Assistente de Chat usando GitHub Models. Aqui está como o projeto finalizado se parece:  Um pouco de contexto: construir assistentes de chat usando IA generativa é uma ótima maneira de começar a aprender sobre IA. O que você aprenderá aqui é como integrar IA generativa em um aplicativo web ao longo desta lição. Vamos começar. ## Conectando-se à IA generativa Para o backend, estamos usando GitHub Models. É um ótimo serviço que permite usar IA gratuitamente. Acesse o playground e copie o código que corresponde à linguagem de backend escolhida. Aqui está como ele se parece no [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)  Como mencionado, selecione a aba "Code" e o runtime escolhido.  ### Usando Python Neste caso, selecionamos Python, o que significa que escolhemos este código: ```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) ``` Vamos limpar este código um pouco para que seja reutilizável: ```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 ``` Com esta função `call_llm`, agora podemos passar um prompt e um prompt de sistema, e a função retorna o resultado. ### Personalizar o Assistente de IA Se você quiser personalizar o assistente de IA, pode especificar como deseja que ele se comporte preenchendo o prompt de sistema assim: ```python call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive") ``` ## Exponha via uma API Web Ótimo, já concluímos a parte de IA. Agora vamos ver como podemos integrar isso em uma API Web. Para a API Web, escolhemos usar Flask, mas qualquer framework web deve funcionar. Vamos ver o código: ### Usando 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) ``` Aqui, criamos uma API Flask e definimos uma rota padrão "/" e "/chat". Esta última é destinada a ser usada pelo frontend para enviar perguntas. Para integrar o *llm.py*, aqui está o que precisamos fazer: - Importar a função `call_llm`: ```python from llm import call_llm from flask import Flask, request ``` - Chamá-la na rota "/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 }) ``` Aqui, analisamos a solicitação recebida para recuperar a propriedade `message` do corpo JSON. Em seguida, chamamos o LLM com esta chamada: ```python response = call_llm(message, "You are a helpful assistant") # return the response as JSON return jsonify({ "response": response }) ``` Ótimo, agora fizemos o que era necessário. ## Configurar Cors Devemos mencionar que configuramos algo como CORS, compartilhamento de recursos entre origens. Isso significa que, como nosso backend e frontend rodarão em portas diferentes, precisamos permitir que o frontend chame o backend. ### Usando Python Há um trecho de código em *api.py* que configura isso: ```python from flask_cors import CORS app = Flask(__name__) CORS(app) # * example.com ``` No momento, está configurado para permitir "*" (todas as origens), o que é um pouco inseguro. Devemos restringir isso quando formos para produção. ## Execute seu projeto Para executar seu projeto, você precisa iniciar primeiro o backend e depois o frontend. ### Usando Python Ok, então temos *llm.py* e *api.py*. Como podemos fazer isso funcionar com um backend? Bem, há duas coisas que precisamos fazer: - Instalar dependências: ```sh cd backend python -m venv venv source ./venv/bin/activate pip install openai flask flask-cors openai ``` - Iniciar a API: ```sh python api.py ``` Se você estiver usando Codespaces, precisa ir até Ports na parte inferior do editor, clicar com o botão direito sobre ele, selecionar "Port Visibility" e escolher "Public". ### Trabalhar no frontend Agora que temos uma API funcionando, vamos criar um frontend para isso. Um frontend mínimo que iremos melhorar gradualmente. Na pasta *frontend*, crie o seguinte: ```text backend/ frontend/ index.html app.js styles.css ``` Vamos começar com **index.html**: ```html

Send