1 of 43

Integrando IA e Reconhecimento de Fala em uma Aplicação Web

上

原

上

原

2 of 43

Staff Frontend Engineer no

  • Microsoft MVP - Most Valuable Professional

​

  • Palestrante, Criador de Conteúdo no Youtube

​

  • Organizador do Frontin Campinas

​

  • Colaborador da NodeBR e GDG Campinas

​

​

​

​

Kevin Uehara

3 of 43

Staff Frontend Engineer no

  • Sou de Campinas/SP

​

  • Joguei CS2 e não soube lidar (triste)

​

  • Dev há uns 9 anos e com foco em front há uns 5 anos

​

  • Sommelier de um bom typescript

Kevin Uehara

4 of 43

上

原

Kevin Uehara

Staff Frontend Engineer no

  • Atuo na tribo de Logística do IFood

​

  • Atuo de forma cross em dois times: Location e Delivery Core (além de outros projetos internos)

​

  • Geoprocessamento, geolocalização, áreas de entrega de parceiros, rotas de entrega, portal do parceiro e backoffice e muito mais…

5 of 43

上

原

O que vou falar?

  • LLM's?
  • Overview da Aplicação
  • Tecnologias
  • Componentes
  • Show me the code
  • Q&A

6 of 43

上

原

LLM's?

7 of 43

上

原

LLM's?

8 of 43

上

原

LLM's?

  • LLM significa Large Language Model

​

  • LLM são criados Deep Learning usando Architecture Transformer

​

  • De qualquer forma, os LLMs já existem há algum tempo e ganharam a atenção do público por meio do ChatGPT, a interface de bate-papo para os modelos LLM GPT-3 e GPT-4.

9 of 43

上

原

Overview da Aplicação

10 of 43

上

原

Overview da Aplicação

  • Vamos criar uma aplicação utilizando reconhecimento de fala nativo do Browser integrado ao OpenAI

​

  • Dado o que o usuário falar, vamos integrar ao OpenAI e apresentar o resultado na tela

​

IA

11 of 43

上

原

Overview da Aplicação

12 of 43

上

原

Tecnologias

13 of 43

上

原

Tecnologias

  • Vite - Frontend Tooling

​

  • React + Typescript - Lib Frontend

​

  • Tailwind - Framework CSS

​

  • OpenAI - Ferramenta de IA utilizada para integrar à aplicação

​

​

14 of 43

上

原

Tecnologias

  • Vite - Frontend Tooling

​

  • React + Typescript - Lib Frontend

​

  • Tailwind - Framework CSS

​

  • OpenAI - Ferramenta de IA utilizada para integrar à aplicação

​

​

15 of 43

上

原

  • OpenAI é um laboratório de pesquisas relacionadas à inteligência artificial no EUA

​

  • Possui uma série de produtos e API's, o mais conhecido foi o ChatGPT, DALL-E

​

  • Iremos utilizar uma de suas API's através de um modelo de IA (LLM)

​

  • Possui uma cota gratuita de 5 doletas, porém nessa demo precisei utilizar mais

​

  • ​

Tecnologias - OpenAI

16 of 43

上

原

Tecnologias - OpenAI

17 of 43

上

原

Docs: https://platform.openai.com/docs/api-reference

​

Tecnologias - OpenAI

18 of 43

上

原

Docs: https://platform.openai.com/docs/api-reference

​

Tecnologias - OpenAI

19 of 43

上

原

Tecnologias - Web Speech API

  • Irei utilizar uma biblioteca que se baseia na API nativa do browser Web Speech API para facilitar a integração

​

  • A API Web Speech permite incorporar dados de voz em aplicativos web. A API Web Speech tem duas partes: SpeechSynthesis (Text-to-Speech) e SpeechRecognition (Reconhecimento de fala assíncrona).

20 of 43

上

原

Tecnologias - Web Speech API

Docs: https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API

​

21 of 43

上

原

Tecnologias - Web Speech API

Docs: https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API

​

22 of 43

上

原

Show me the code

23 of 43

上

原

Show me the code

  • Criando o projeto em Vite utilizando o React + Typescript

yarn create vite ai-generator --template react-ts

  • Instalando as dependências

yarn

  • Rodando a aplicação

yarn dev

24 of 43

上

原

Tela Inicial

25 of 43

上

原

Estrutura Inicial

26 of 43

上

原

Configurando o Tailwind

27 of 43

上

原

Configurando a API Key e Dependências

  • Adicionando as dependências que iremos utilizar:

yarn add react-speech-recognition openai

  • Adicionando as dependências de desenvolvimento:

yarn add -D @types/react-speech-recognition

28 of 43

Criando Componentes - Microphone

Componente responsável por representar um microfone, iniciar e parar o reconhecimento de fala

29 of 43

Comandos Padrões

Comandos padrões que utilizo na aplicação, que variam dependendo da linguagem

30 of 43

Criando Componentes - Select

Componente customizável por selecionar a língua que será utilizada (inglês ou português)

31 of 43

Criando o Service OpenAI

32 of 43

Utilizando Todos os Componentes no App.tsx

33 of 43

Resultado

34 of 43

Resultado

35 of 43

Resultado

36 of 43

Resultado

37 of 43

Resultado

38 of 43

Resumidamente é isso

39 of 43

PROPAGANDAAAAAA!

5 segundos >> skip

40 of 43

PROPAGANDAAAAAA!

5 segundos >> skip

41 of 43

上

原

Muito Obrigado!

e fiquem bem, sempre

42 of 43

Contatos

Linkedin:

https://www.linkedin.com/in/kevin-uehara

​

Instagram:

https://www.instagram.com/uehara_kevin

​

Twitter:

https://twitter.com/ueharaDev

​

Github:

https://github.com/kevinuehara

​

dev.to:

https://dev.to/kevin-uehara

​

Youtube:

https://www.youtube.com/@ueharakevin/

​

43 of 43

上

原

Dúvidas?