Utilizando IA para preenchimento de formulário

Veja nesse artigo como utilziar o GPT-3 para atualizar dados de um formulário

Utilizando GPT-3 para atualizar formulário

Introdução

Em um artigo anterior ( Introdução a inteligência artificial com GPT-3 ), dei uma rápida introdução ao GPT-3 utilizando exemplos práticos, utilizando playground com uma aplicação Node.js e com o Reacjs no front.

Hoje avançaremos com os testes através da API desenvolvida neste artigo, utilizando o GPT-3 para preencher os dados de um formulário.

Abra os projetos back e front desenvolvidos anteriormente e em seguida atualize os seguintes arquivos dentro deles:

No front o arquivo App.jsx

import { Header } from './components/Header'
import { useState, useEffect } from "react";

import api from "./services/api";
import './global.css'

function App() {
  const [message, setMessage] = useState('');
  const [user, setUser] = useState('');

  const handleChange = event => {
    setMessage(event.target.value);
  };

  const handleClick = event => {
    event.preventDefault();

    api
      .get(message)
      .then((response) => {
        console.log(response.data, 'HERE')
        setUser(response.data);
      })
      .catch((err) => {
        console.error("ops! ocorreu um erro" + err);
      });
  };

  return (
    <div>
      <Header />
      <br />
      <div class="container-fluid">
        <div class="row justify-content-center">

          <div class="col-12 col-md-10 col-lg-8">
            <form class="card card-sm">
              <div class="card-body row no-gutters align-items-center">
                <div class="col-auto">
                  <i class="fas fa-search h4 text-body"></i>
                </div>
                <div class="col">
                  <input
                    class="form-control form-control-lg form-control-borderless"
                    type="search"
                    id="message"
                    onChange={handleChange}
                    value={message}
                    autoComplete="off" placeholder="Fale com a IA" />
                </div>
                <div class="col-auto">
                  <a class="btn btn-lg btn-success" onClick={handleClick} type="submit">Pequisar</a>
                </div>
              </div>
            </form>
          </div>

          <div class="col-12 col-md-10 col-lg-8" >
            <label>Resultado:</label>

            <div class="form-group">
              <input disabled type="text" value={user.title} class="form-control" placeholder="Titulo" />
            </div>

            <div class="form-group">
              <input disabled type="text" value={user.description} class="form-control" placeholder="Descricao" />
            </div>

            <div class="form-group">
              <textarea disabled class="form-control" value={user.tags} placeholder="Tags" rows="3" />
            </div>

            <div class="form-group">
              <input disabled type="text" class="form-control" value={user.category} placeholder="Categoria" />
            </div>
          </div>

        </div>
      </div>
    </div>

  );
}

export default App

No arquivo App.js dentro do projeto backend, atualize o método Get que faz integração com a openai:

app.get('/:text', async (req, res) => {
    var param = req.params.text + "\n\n## Criar com base no texto as infos abaixo e retornar em formato json:\nTitulo: \nDescricao: \nTags:  10\nCategoria: \n---";

    const response = await openai.createCompletion({
        model: "text-davinci-002",
        prompt: param,
        temperature: 0.7,
        max_tokens: 256,
        top_p: 1,
        frequency_penalty: 0,
        presence_penalty: 0
    });

    res.send(response.data.choices[0].text);
})

Para verificar esta integração, eu gravei um vídeo demonstrando como atualizar alguns campos relacionados a uma notícia através de um texto. Segue seu link abaixo:

Bem legal né?

Espero que tenham gostado e até um próximo artigo pessoal ;)