Como aplicar a IA do Google em projetos Full Stack
Aprenda como usar a IA do Google em projetos Full Stack! Use as APIs disponíveis no navegador direto em seus projetos!
O que você vai aprender?
Introdução – Como usar a IA do Google em projetos Full Stack
Fala, Impressionadores!
O Google disponibiliza uma série de APIs que permitem integrar funcionalidades de IA em projetos web de forma simples e direta. Você pode consultar a lista de APIs na documentação do Google e entre elas temos:
- Writer: gera textos;
- Rewriter: reescreve textos;
- Translator: traduz textos e palavras;
- Language Detector: detecta o idioma;
- Summarizer: resume um texto;
- Prompt: cria um chat de perguntas e respostas.
Neste artigo, você vai aprender a configurar um exemplo prático de resumo de texto usando uma dessas APIs, a API Summarizer e descobrir outras formas de aplicar inteligência artificial nos seus projetos web.
Para fazer o download do(s) arquivo(s) utilizados na aula, preencha com o seu e-mail:
Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.
Preparando o ambiente
Antes de começar a utilizar a IA para resumir textos, precisamos garantir que o navegador suporta a API que vamos usar. Por isso, vamos abrir o console do navegador com o atalho "F12".
Você pode testar a compatibilidade da API Summarizer com um código simples no Console (F12) do seu navegador e digitar o comando:
if('Summarizer' in self){
console.log("Suportado")
}Se aparecer a mensagem de que é suportada, podemos continuar!
Após realizar o teste, precisamos de um layout simples com HTML e CSS para implementar a ferramenta.
Você pode baixar os arquivos iniciais para não precisar escrever o código do zero. Contudo, vale uma passada rápida para explorar a estrutura da aplicação:
Temos o link para a documentação da API do Summarize:
<p>
Documentação:
<a href="https://developer.chrome.com/docs/ai/summarizer-api?hl=pt-br">
https://developer.chrome.com/docs/ai/summarizer-api?hl=pt-br
</a>
</p>Logo abaixo, seguimos com um campo de texto onde vamos inserir o texto que será resumido:
<textarea id="input-summarize" placeholder="Cole um texto longo aqui..."></textarea>Um botão para realizar a ação de resumir:
<button id="summarize">Resumir</button>Por fim, o parágrafo onde será inserido o resumo:
<p class="result" id="output-summarize">...</p>
Full Stack ImpressionadorEssa é uma trilha de especialização que vai te tornar um verdadeiro Desenvolvedor Web Full Stack, dominando todas as principais tecnologias usadas tanto para o Front End quanto para o Backend e ainda para Mobile, construindo projetos práticos e exercícios aplicados à realidade das empresas. Tudo o que você precisa para se tornar um Desenvolvedor Full Stack em um único lugar.
Começar agora
Implementando a API
Para inserir a API na aplicação vamos utilizar a linguagem JavaScript, que vai ajudar a interagir com a página estática criada com HTML e CSS e dar à ela comportamento.
Primeiro, vamos capturar o botão "Resumir" com o uso do querySelector:
const btnSummarize = document.querySelector("#summarize");Em seguida, adicionamos um event listener ao botão btnSummarize para que quando o botão for clicado, a função seja acionada.
btnSummarize.addEventListener("click", async () => {
//Ações dentro da função
});É importante destacar que a função é assíncrona, pois ela depende de uma resposta da API Summarize.
A partir de agora, implementaremos as ações que devem acontecer ao clicarmos no botão.
Inicialmente, precisamos capturar no DOM, o local onde o resultado da ação será exibido, neste caso é a tag <p> com id output-summarize.
const output = document.getElementById("output-summarize");Depois, seguimos com a verificação de suporte à API. Com isso, checamos se a API Summarizer existe no contexto global. Caso não exista, no output deve ser exibido um texto com a mensagem "Não tem a API Summarizer".
if (!"Summarizer" in self) {
output.textContent = "Não tem a API Summarizer";
return;
}Caso a API exista, no output deve ser exibida a mensagem "Resumindo!", para sinalizar que o resumo começou a ser feito.
output.textContent = "Resumindo!";Agora, vamos configurar as opções de como o resumo deve ser entregue.
const options = {
sharedContext: "This has no specific theme.",
type: "tldr",
format: "markdown",
length: "medium",
monitor(m) {
m.addEventListener("downloadprogress", (e) => {
console.log(`Downloaded ${e.loaded * 100}%`);
});
},
};As opções do código acima, significam:
- sharedContext: informa o contexto geral do conteúdo que será resumido. Neste cenário não definimos um contexto, mas é interessante que se os textos que você for resumir tenham um mesmo contexto, você defina isso neste campo para conseguir um resultado mais preciso;
- type: significa o estilo de resumo desejado. Neste caso usamos a opção "tldr" responsável por produzir um resumo curto e direto;
- format: define o formato do texto de saída que o modelo de resumo deve gerar. No caso, "markdown" indica que o resultado virá formatado em Markdown;
- length: define o comprimento do resumo. Neste cenário usamos o tamanho "medium";
- monitor: é um função que baixa a API do Summarizer e mostra a porcentagem no console do navegador.
Na sequência, utilizaremos um código para verificar se a API está disponível. Para isso, criaremos uma constante availability que aguarda uma resposta sobre a disponibilidade da API.
Caso a condição availability === "unavailable" seja verdadeira,o output exibe a mensagem "A API Summarizer não pode ser usada". Por outro lado, se a condição for falsa, o retorno da API será a criação de um resumo considerando as opções configuradas anteriormente.
const availability = await Summarizer.availability();
if (availability === "unavailable") {
output.textContent = "A API Summarizer não pode ser usada";
return;
}
const summarizer = await Summarizer.create(options);O último passo é capturar o texto que deve ser resumido com o getElementById e usar um try/catch para usar o texto base para criar e exibir o resumo, ou capturar e tratar erros.
const input = document.getElementById("input-summarize").value;
try {
const summary = await summarizer.summarize(input);
output.textContent = summary;
} catch (e) {
output.textContent = "Erro ao resumir: " + e.message;
}Conclusão
A Inteligência Artificial não está mais restrita a grandes servidores ou ferramentas complexas.
Com as APIs de IA integradas ao navegador, você pode criar aplicações poderosas e leves, diretamente no front-end, usando apenas HTML, CSS e JavaScript.
Se você gostou deste conteúdo e quer dar o próximo passo na sua carreira, recomendo que você acesse o curso completo de Full Stack e o minicurso básico de HTML e CSS.
Além disso, caso prefira esse conteúdo no formato de vídeo-aula, pode acessar o vídeo no nosso canal do Youtube.
FAQ — Como usar a IA do Google em projetos Full Stack
1. Como saber se meu navegador suporta a API Summarizer do Google?
Abra o console com F12 e digite:
if('Summarizer' in self){ console.log("Suportado") }
Se aparecer “Suportado”, você pode usar a API. Caso contrário, o navegador ainda não oferece suporte a esse recurso de IA.
2. O que é necessário para criar um resumo de texto com a IA do Google?
Você precisa capturar o texto do usuário, verificar a disponibilidade da API, configurar opções como formato e tamanho do resumo e chamar o método summarize(). A resposta retorna o texto resumido automaticamente, pronto para exibir no seu front-end.
3. Preciso de backend para usar a IA do Google em projetos Full Stack?
Não. As APIs de IA do Google podem rodar diretamente no navegador, permitindo criar aplicações completas no front-end com HTML, CSS e JavaScript. O backend só é necessário se você quiser armazenar dados ou criar fluxos mais avançados.
4. Quais funcionalidades de IA do Google posso usar além de resumo de texto?
Além do Summarizer, você pode usar APIs para gerar textos, reescrever conteúdo, traduzir, detectar idioma e criar chats interativos. Essas ferramentas permitem implementar recursos avançados de IA sem dependência de servidores ou bibliotecas externas.
Hashtag Treinamentos
Para acessar publicações de Full Stack, clique aqui!
Posts mais recentes de Full Stack
- LESS CSS: Guia Completo do Pré-processador (2026)
LESS CSS é um pré-processador que adiciona variáveis, mixins, nesting e operações matemáticas ao CSS. Aprenda a configurar e usar com projeto prático. - Variáveis no CSS (CSS Variables): Como Usar de Forma Profissional
Você sabe o que são Variáveis no CSS (CSS Variables)? Aprenda como usar técnicas que vão transformar a forma como você escreve variáveis CSS. - Try Catch no JavaScript: Programação Defensiva na Prática
Aprenda a usar try catch no JavaScript e melhore a sua programação defensiva!
Posts mais recentes da Hashtag Treinamentos
- Planilha de Controle de Notas Fiscais no Excel [Grátis]
Baixe a planilha de controle de notas fiscais no Excel grátis: calcule ISS e retenções, veja o que está em aberto e gere a cobrança de cada nota de serviço. - Qual IA usar na empresa: ChatGPT, Claude ou Perplexity?
Qual IA usar na empresa: veja as diferenças entre ChatGPT, Claude e Perplexity e quando cada um rende mais em cada área da sua equipe. - Apostilas Gratuitas em PDF: Excel, Power BI, Python e IA
Baixe apostilas gratuitas em PDF de Excel, Power BI, Python, Claude e agentes de IA, com exercícios e gabarito. Escolha a sua e comece hoje.
