Aprenda a criar um mini projeto com a API da OpenAI - HTML, CSS e JAVASCRIPT · futurosenior

Para iniciar a execução do projeto para seu portfólio usando inteligência artificial precisamos primeiramente criar uma pasta para adicionar os arquivos de HTML, CSS e JAVASCRIPT.

No seu terminal:

mkdir chat-gpt

Dentro desta pasta você vai adicionar os seguintes arquivos:

index.html
styles.css
script.js

O objetivo é praticar as APIs oferecidas pela OpenAI de maneira simples e eficaz, além de enriquecer seu currículo com projetos que utilizam inteligência artificial.

No arquivo HTML, adicione uma div que contém duas tags simples, textarea e um button, que serão usados para enviar perguntas à API.

O primeiro textarea será usado para exibir as respostas retornadas pela IA.
O segundo será onde o usuário adicionará a pergunta.
O button enviará a função para o método POST da API.

Arquivo HTML - index.html

Qualquer dúvida sobre qualquer tag ou lógica so mencionar no comentário.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chat GPT</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="content">
    <textarea id="resultadoIA" rows="10" disabled placeholder="Resposta da I.A" style="height: 70%;"></textarea>

    <textarea id="inputPergunta" placeholder="Pergunte algo" style="height: 20%;"></textarea>

    <button id="EnviarPergunta">
      Enviar mensagem
    </button>
  </div>
  <script src="script.js"></script>
</body>

</html>

No arquivo CSS, adicione a estilização simples e objetiva que você desejar.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #171923;
    display: flex;
    justify-content: center;
    width: 100vw;
    height: 100vh;
}

.content {
    display: flex;
    width: 90%;
    flex-direction: column;
    justify-content: space-around;
}

textarea {
    resize: none;
    border: none;
    padding: 8px;
    background-color: #1A202C;
    color: #F7FAFC;
    outline: none;
    font-size: 24px;
    text-align: justify;
    border-radius: 16px;
}

textarea:focus {
    border: 2px solid #4299E1;
}

button {
    background-color: #4299E1;
    color: #EBF8FF;
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    animation: fadeIn 2s;
    font-size: 24px;
}

@keyframes fadeIn {
    0% {
    opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

No arquivo JavaScript, referencie dois elementos HTML usando seus respectivos ID em variáveis diferentes.

A variável "inputPergunta" representa um elemento com id "inputPergunta" e será usada para ler o valor do input fornecido pelo usuário.
A variável "resultadoIA" representa um elemento com id "resultadoIA" e será usada para exibir o resultado da pergunta para o usuário.

const inputPergunta = document.getElementById("inputPergunta");
const resultadoIA = document.getElementById("resultadoIA");

Após essas duas variaveis precisamos criar a constante que vai obter a chave da API que você precisa retirar na documentação OPENAI, o link direto para a criação é:

https://platform.openai.com/account/api-keys

const OPENAI_API_KEY = "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"

Essa chave está desativada

Agora chegamos em um momento importante do código!!!

Precisamos criar uma função que vai ser necessário:

Armazenar o valor da pergunta em uma variável
Fazer o fetch com a API da documentação OPENAI
- Utilizei o formato completions para saber mais: https://platform.openai.com/docs/api-reference/completions/create
Posteriamos utilizamos o then para transformar a resposta em um JSON
Depois vamos pegar o json no proximo then e fazer algumas validações
- Primeiro vamos validar se o resultadoIA possui algum valor, se pussir ele vai quebrar uma linha
- Também precisamos verificar se ocorre algum erro com o JSON, assim imprimindo em tela
- Se não possuir o erro vamos exibir a resposta enviada pela api que vem em um array, se ele estiver vazio vai aparecer “Sem resposta”
- Sempre que eu enviar uma questão eu vou pegar o scroll da resposta e enviar la para baixo
- Essa condição der algum erro vamos chamar no catch imprimindo o erro no console
- E no finally
  - Vamos zerar a string de Carregando do inputPergunta
  - Vamos habilitar o inputPergunta
  - E dar focus nele

O trecho de código a seguir adiciona um novo texto ao conteúdo de um elemento HTML com o ID "resultadoIA". Ele começa verificando se o elemento já possui algum valor e, em caso afirmativo, adiciona três linhas em branco. Em seguida, adiciona uma nova linha de texto que começa com "Eu:" seguido pelo conteúdo da variável "valorPergunta". Depois, o valor do elemento HTML com o ID "inputPergunta" é alterado para "Carregando..." e ele é desabilitado. Por fim, a rolagem do elemento "resultadoIA" é movida para o final da página.

if (result.value) result.value += “\n\n\n”

result.value += `Eu ${sQuestion}`
inputQuestion.value = "Carregando..."
inputQuestion.disabled = true

result.scrollTop = result.scrollHeight

E pra finalizar vamos adicionar a lógica de chamar a função do Botão de Enviar Mensagem!

document.getElementById("EnviarPergunta").addEventListener("click", EnviarPergunta)

E por fim o código final do script.js

const inputPergunta = document.getElementById("inputPergunta");
const resultadoIA = document.getElementById("resultadoIA");

const OPENAI_API_KEY = "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";

function EnviarPergunta() {
	var valorPergunta = inputPergunta.value;

  fetch("https://api.openai.com/v1/completions", {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json", 
      Authorization: "Bearer " + OPENAI_API_KEY,
    },
    body: JSON.stringify({
      model: "text-davinci-003",
      prompt: valorPergunta,
      max_tokens: 2048, // tamanho da resposta
      temperature: 0.7, // criatividade na resposta
    }),
  })
    .then((response) => response.json())
    .then((json) => {
      if (resultadoIA.value) resultadoIA.value += "\n";

      if(json.error?.message){
        resultadoIA.value += `Error: ${json.error.message}`;
      } else if (json.choices?.[0].text) {
        var text = json.choices[0].text || "Sem resposta";

        resultadoIA.value += "Chat GPT: " + text;
      }

      resultadoIA.scrollTop = resultadoIA.scrollHeight;
    })
    .catch((error) => console.error("Error:", error))
    .finally(() => {
      inputPergunta.value = "";
      inputPergunta.disabled = false;
      inputPergunta.focus();
    });

	if (resultadoIA.value) resultadoIA.value += "\n\n\n";

	resultadoIA.value += `Eu: ${valorPergunta}`;
	inputPergunta.value = "Carregando...";
	inputPergunta.disabled = true;

  resultadoIA.scrollTop = resultadoIA.scrollHeight;
}

document.getElementById("EnviarPergunta").addEventListener("click", EnviarPergunta)

Qualquer dúvida sobre o conteúdo pode entrar em contato, e se quiser dar uma moralzinho no linkedin:

- Linkedin
- Github

Aprenda a criar um mini projeto com a API da OpenAI - HTML, CSS e JAVASCRIPT

Parabéns, Incrível!