12 KiB

Raw Permalink Blame History

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

Como mencionado, selecione a aba "Code" e o runtime escolhido.

Usando Python

Neste caso, selecionamos Python, o que significa que escolhemos este código:

"""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:

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:

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

# 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:

from llm import call_llm
from flask import Flask, request

Chamá-la na rota "/chat":

@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:

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:

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:

cd backend
python -m venv venv
source ./venv/bin/activate

pip install openai flask flask-cors openai

Iniciar a API:
```
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:

backend/
frontend/
index.html
app.js
styles.css

Vamos começar com index.html:

<html>
    <head>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
      <form>
        <textarea id="messages"></textarea>
        <input id="input" type="text" />
        <button type="submit" id="sendBtn">Send</button>  
      </form>  
      <script src="app.js" />
    </body>
</html>

O código acima é o mínimo necessário para suportar uma janela de chat, consistindo em uma área de texto onde as mensagens serão exibidas, um campo de entrada para digitar a mensagem e um botão para enviar sua mensagem ao backend. Vamos olhar o JavaScript em seguida, no arquivo app.js.

app.js

// app.js

(function(){
  // 1. set up elements  
  const messages = document.getElementById("messages");
  const form = document.getElementById("form");
  const input = document.getElementById("input");

  const BASE_URL = "change this";
  const API_ENDPOINT = `${BASE_URL}/hello`;

  // 2. create a function that talks to our backend
  async function callApi(text) {
    const response = await fetch(API_ENDPOINT, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ message: text })
    });
    let json = await response.json();
    return json.response;
  }

  // 3. add response to our textarea
  function appendMessage(text, role) {
    const el = document.createElement("div");
    el.className = `message ${role}`;
    el.innerHTML = text;
    messages.appendChild(el);
  }

  // 4. listen to submit events
  form.addEventListener("submit", async(e) => {
    e.preventDefault();
   // someone clicked the button in the form
   
   // get input
   const text = input.value.trim();

   appendMessage(text, "user")

   // reset it
   input.value = '';

   const reply = await callApi(text);

   // add to messages
   appendMessage(reply, "assistant");

  })
})();

Vamos analisar o código por seção:

1. Aqui obtemos uma referência a todos os elementos que usaremos no código.
1. Nesta seção, criamos uma função que usa o método embutido fetch para chamar nosso backend.
1. appendMessage ajuda a adicionar respostas, bem como o que você, como usuário, digita.
1. Aqui ouvimos o evento de envio, lemos o campo de entrada, colocamos a mensagem do usuário na área de texto, chamamos a API e renderizamos a resposta na área de texto.

Agora vamos olhar o estilo. Aqui você pode ser criativo e fazer com que pareça como quiser, mas aqui estão algumas sugestões:

styles.css

.message {
    background: #222;
    box-shadow: 0 0 0 10px orange;
    padding: 10px:
    margin: 5px;
}

.message.user {
    background: blue;
}

.message.assistant {
    background: grey;
}

Com essas três classes, você estilizará as mensagens de forma diferente dependendo de onde elas vêm: do assistente ou de você como usuário. Se quiser se inspirar, confira a pasta solution/frontend/styles.css.

Alterar Base Url

Há uma coisa que não configuramos aqui: BASE_URL. Isso não é conhecido até que seu backend seja iniciado. Para configurá-lo:

Se você executar a API localmente, deve configurá-lo como algo como http://localhost:5000.
Se estiver usando Codespaces, deve ser algo como "[nome]app.github.dev".

Tarefa

Crie sua própria pasta project com o conteúdo como descrito:

project/
  frontend/
    index.html
    app.js
    styles.css
  backend/
    ...

Copie o conteúdo do que foi instruído acima, mas sinta-se à vontade para personalizar como preferir.

Solução

Bônus

Tente alterar a personalidade do assistente de IA.

Para Python

Ao chamar call_llm em api.py, você pode alterar o segundo argumento para o que quiser, por exemplo:

call_llm(message, "You are Captain Picard")

Frontend

Altere também o CSS e o texto como preferir, fazendo mudanças em index.html e styles.css.

Resumo

Ótimo, você aprendeu do zero como criar um assistente pessoal usando IA. Fizemos isso usando GitHub Models, um backend em Python e um frontend em HTML, CSS e JavaScript.

Configuração com Codespaces

Navegue até: Repositório Web Dev For Beginners
Crie a partir de um template (certifique-se de estar logado no GitHub) no canto superior direito:
Uma vez no seu repositório, crie um Codespace:

Isso deve iniciar um ambiente no qual você pode trabalhar agora.

Aviso Legal:
Este documento foi traduzido utilizando o serviço de tradução por IA Co-op Translator. Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automatizadas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autoritativa. Para informações críticas, recomenda-se a tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações equivocadas decorrentes do uso desta tradução.

12 KiB Raw Permalink Blame History

Projeto de Chat

Conectando-se à IA generativa

Usando Python

Personalizar o Assistente de IA

Exponha via uma API Web

Usando Python

Configurar Cors

Usando Python

Execute seu projeto

Usando Python

Trabalhar no frontend

Alterar Base Url

Tarefa

Solução

Bônus

Para Python

Frontend

Resumo

Configuração com Codespaces

12 KiB

Raw Permalink Blame History