muito bem pessoal então vamos fazer a nossa integração com chat GPT usando aquela Nossa assistente que a gente fez aqui no canal na playlist vai ser muito legal fazer isso tudo passo a passo junto com você para que tudo isso funciona vai ser essencial você ter assistido a Playlist onde a gente criou essa Assistente porque você vai ficar com contexto você vai entender o que que a gente usou de tecnologia como funcionam as coisas e principalmente para que você tenha instalado no seu computador os requisitos para o aplicativo rodar na sua máquina tem que ter
um note instalado corda o Android SDK uma série de coisas que eu ensinei principalmente na primeira aula lá da playlist de instalação das Ferramentas então para funcionar você precisa já ter tudo isso na sua máquina e ter o projeto final que tá disponível na aula de número 5 na última aula daquela playlist na descrição do vídeo para baixar para facilitar também estou na descrição desse vídeo o projeto finalizado antes da gente colocar a chat GPT a gente vai fazer isso nessa aula então você pode baixar também aí e fazer junto comigo a partir desse projetinho
que está aí na descrição Beleza então tendo dito isso vamos começar na prática a fazer o nosso projeto para não distrair muito vocês prestar mais atenção no código é ser redondinha o meu rosto aqui eu vou fazer ele desaparecer vai ficar só meu mouse eu vou ô meu Deus rolo a língua vai ficar só o meu mouse e aí a gente vai conversando e fazendo as coisas aqui juntos Beleza então vamos lá por a mão na massa muito bem pessoal então já estou com o projeto devidamente colocado aqui no meu vs code você fez o
download aqui arrasta para dentro do vscode que não tem erro né Depois de fazer isso você vai abrir aqui a ww que é onde ficam aqui os arquivos principais do nosso projeto e aqui dentro da pasta JavaScript Nossa pasta JS nós vamos criar aqui um novo arquivo que a gente vai chamar de chat gpt.js vai ser aqui onde a gente vai estar fazendo os nossos códigos JavaScript beleza aqui no nosso holter.js a gente está usando o Framework Seven para fazer o roteamento das Telas né a gente vai referenciar na index que a página inicial do
nosso projeto esse nosso arquivo chat gpt.js para que quando a gente inicializa ali a nossa assistente ela já puxe as informações aqui do chat GPT então a gente tá tirando a integração que a gente tinha aqui na index.js com aquele sistema de banco local aquelas coisas que a gente fez lá na playlist tá então para essa aula a gente vai desativar isso aqui nós vamos deixar o arquivo aqui se você precisar você pode usar mas aí a gente vai fazer ela ficar 100% integrada apenas com chat GPT depois que você quiser implementar o chat GPT
naquela Nossa lógica que a gente fez durante a nossa playlist você também pode fazer isso até para se desafiar e fazer uma coisa diferente Ok então já estamos chamando aqui o chat gpt.js e aqui vamos começar os nossos trabalhos a nossa codificação aqui então a primeira coisa que eu vou fazer é criar uma variável que eu vou chamar de recognition que é de reconhecimento né E essa variável ela vai receber aqui o meu Plugin do speech vai ser assim um tempo limite de silêncio milissegundos quando ficou dois segundos em silêncio é para ele entender que
é parou de falar então a gente vai usar esse aqui como um parâmetro tá então vou colocar na variável aqui que ele vai ter esses 2.000 a gente coloca porque sempre é em milissegundos tá pessoal então 2.000 assim equivale a dois segundos a gente sempre Coloca na programação em milissegundos agora a gente vai fazer aqui uma variável só para declarar ela que a gente vai chamar de silence timer que vai ser um contador que a gente vai estar usando daqui a pouco vai ser ali um 7 time out que a gente vai usar né e
a gente também vai criar aqui uma variável chamada user Voice que é a voz do usuário e se os The Voice e a gente vai usar para armazenar a fala da pessoa que ela falar a gente vai guardar nessa variável e ela vai começar vazia certo então duas aspas simples aqui para inicializar vazio Por incrível que pareça pessoal essa integração que a gente vai estar fazendo hoje ela não é muito complicada você vai ver que ela é relativamente simples de se fazer né então aqui antes a gente começar aqui as funções que a gente vai
estar utilizando vão criar mais uma variável aqui que é a variável options que na verdade é as opções do Plugin do speech control c vamos lá no chat GPT e aqui colocar essas opções eu vou deixar como vá para ficar mais fácil da gente poder usar isso tudo no nosso escopo aqui da página não vou usar o LED tá poderia usar Mas não tem problema vou usar o vár normalmente agora a gente vai fazer então aqui a funções que vão fazer o controle dos disparos aqui do nosso speech eu vou criar uma variável chamada start
listening que é começar a ouvir que vai fazer o quê basicamente escutar quando começou a falar certo então a gente vai aqui inicializar aquele nosso recognition que é para escutar o que a gente tá falando então a gente vai usar aqui a nossa variável recognition que tem ali o nosso plugin da do speech a gente vai pegar aqui os dados que ele vai estar identificando e aí a gente pode dar aqui um console ponto log só para a gente ver o que que tá vindo nesses dados aí para a gente dar uma olhadinha no que
que ele vai estar escutando certo aí aqui depois disso a gente vai ter mais uma vírgula e aqui uma função de callback de erro né então se der erro que ele vai retornar um erro para nós e aqui a gente pode colocar qualquer coisa que a gente queira por exemplo app.day alugue ponto alerta para dar um alerta na tela dizendo Ouve um erro dois pontos aqui a gente pode pedir para ele mostrar qual que é o erro para nós certo E aí depois ainda dessa função de callback do erro a gente ainda pode pedir para
ele colocar essas options que a gente colocou aqui que é esse objeto com várias opções que a língua em português e tal que é importante para funcionar certinho plugin speech [Música] que é para parar de falar para quando ele a gente quiser que pare o reconhecimento de fala então a gente vai usar aqui o recognition ponto a gente vai usar o método Stop listening que é um método para ele parar de ouvir né então ele interrompe ali o que que ele tá ouvindo aqui a gente depois vai estar colocando também um timer limpando o timer
e acionando um evento de que a fala Acabou a gente até pode criar esse aqui né a gente pode até ir comentando aqui ó vamos fazer assim o seguinte legal a gente deixar bem documentado até para vocês entenderem variáveis de controle aqui a gente pode colocar opções do Plugin de speech para começar a escutar aqui Pessoal talvez você que é iniciante no JavaScript talvez nunca viu a sintaxe fazendo dessa forma aqui né geralmente Você já faz a função direto quando você cria uma variável e faz que essa variável vai ser igual essa função Toda vez
que você chamar essa variável ele vai acionar a função tá entendendo então se você não tá acostumado com esse tipo de sintaxe também é uma outra forma da gente fazer como que nomear uma função entendeu a gente poderia colocar um nome para função aqui ou a gente colocou uma variável aqui antes para fazer isso é basicamente a mesma coisa aqui embaixo no nosso Stop né comentário parar parar de ouvir então aqui no nosso Stop a gente vai fazer aqui o uso de um método né Poderia fazer do jeito mais simples mudar mas eu vou aproveitar
esse aqui para mostrar como emitir um evento de fim de fala personalizado a gente vai criar um evento personalizado que vai ser detectado pelo nosso sistema quando terminar então a gente pode criar aqui uma variável chamada que é de evento né E a gente vai usar aqui um New no estância mil event como se a gente tivesse criando um evento personalizado aqui no nosso sistema e eu posso chamar ele de speech então a gente tá emitindo o evento quando chegou aqui no stop a gente pediu para ele acionar o evento E aí olha que legal
a gente pode usar aquela função listener que a gente tem no java script ou event listener que escuta né fica prestando atenção quando o evento é disparado então a gente pode fazer agora aqui ó documento ponto add event listener para ele ouvir um evento Então quando for disparado o nosso speech [Música] a gente vai fazer aqui a chamada para nossa api do chat GPT Ok beleza vamos ver por enquanto se isso aqui tá rodando se tá funcionando isso aqui que a gente já fez né então eu vou dar um Ctrl aspas simples aqui no meu
terminal vai abrir aqui ou você vai aqui envio terminal estou com meu celular conectado no cabo USB aqui no meu computador né E aí a gente vai dar aqui o comando adb devices tudo minúsculo adb devices para ver se ele tá conectado aqui tá aparecendo essa hashi que no seu vai aparecer aqui um número diferente é dizer que o meu dispositivo está conectado isso aqui também a gente aprendeu lá na playlist como que a gente faz para o nosso celular conectar aqui com o computador para a gente poder divulgar o nosso aplicativo e agora a
gente vai dar aqui o comando cordova Android que ele vai fazer a compilação para rodar o aplicativo e já instalar ele lá no nosso celular beleza ele foi instalado aqui e agora antes da gente começar a fazer já me lembrei que eu esqueci alguma coisa a gente não fez em nenhum momento a chamada desse start listening aqui ó que é a chamada dele começar a escutar o que a gente está falando né pessoal a gente tem então deixa eu abrir aqui ó vou abrir o Ed aqui você pode digitar assim ó Edge dois pontos//inspect eu
ensinei isso aqui no Chrome para vocês na playlist Mas vocês podem fazer a mesma coisa com o EDGE tá não precisa ser necessariamente com Chrome a o EDGE o Chrome eles são baseados no Chrome Então eles têm esse recurso de inspecionar Então você faz Edge dois pontos Barrabás vai aparecer aqui o teu celular se ele estiver ali marcado para divulgar conforme a gente aprendeu lá na playlist do assistente E aí a gente pode vir aqui dar um espectro para inspecionar e ver por dentro né o nosso aplicativo rodando no celular a gente tem como ver
aqui eventos e tudo mais só que então aqui de falar e a gente não disparou nenhuma vez o evento para ele começar a escutar né então a gente pode procurar onde é que ele tá é aqui na nossa index a gente vai ter aqui ó o botão falaram tá aqui nesse nosso Fabi bootton que é esse botão flutuante aqui né esse botão aqui embaixo então a gente pode pegar aqui o ID dele ó btn falar e vamos lá na nossa página do chat de PT que deixa eu colocar também que isso aqui é o evento
personalizado determinou de falar e aqui logo abaixo a gente vai fazer a chamada de evento de clique né Vamos passar pelo id o btn falar ponto clique e que acontece né então posso fazer assim ou um clique Vamos fazer um clique aqui pessoal tá mais acostumado né function que é para acontecer então quando clicou aqui no nosso botão btn falar a gente vai acionar acionar a função para começar a ouvir Então nesse momento a gente vai pegar aqui o nosso start listening né que a nossa funçãozinha dele começar a ouvir a gente vai fazer dessa
forma aqui e aí ele já vai acionar a nossa função de começar a falar beleza então feito isso deixa eu colocar aqui o comentário clicou no botão para falar vamos rodar aqui a nossa aplicação corda do valor Android beleza ele já montou a aplicação a gente vai ter que Fechar essa janela que a gente já tinha aberto vamos ter que abrir ela novamente a gente vem aqui no espectro ele vai recarregar isso daqui tá pessoal Às vezes você clica aqui ó ele tá assim vazio você tem que esperar e clicar de novo para que daí
ele abra com ele certinho beleza agora vamos ver se ele tá funcionando ela escutar o que a gente tá falando né então vamos fazer um teste aqui teste para ver se tá escutando o que eu estou falando então ó a gente viu aqui ó no console o que que ela tá entendendo esse retorno pode reparar que na linha 18 é isso daqui ó a gente vai aqui na nossa linha 18 temos aqui a linha 18 console log com os dados do que que ela tá escutando certo então só para vocês verem aqui ó o funcionamento
do speech repara aqui pessoal que Ele montou aqui ó uma ray com cinco opções porque eu falei aqui algumas palavras e aí ele vê como se fosse várias possibilidades do que eu falei porque talvez não foi muito claro a forma como eu me expressei então a posição zero é o que é java script a segunda é o que é java script com espaço depois o que é JavaScript O que é Java escrito com espaço e no fim O que é javascrite ele escreveu aqui né então geralmente 99% das vezes a posição zero aqui do que
ela tá ouvindo do que ela tá entendendo é o que a gente realmente falou tá o zero geralmente é o mais correto as outras já são variações que tendem a ser um pouco incorretas então a gente sempre vai ter que pegar a variação zero independente do que que ela entender aqui a gente tem que pegar essa variação então o que que a gente vai fazer aqui no nosso código aqui a gente já viu o que que é o retorno né dos dados que ela que é Retorno dos dados o que ela tá entendendo aqui embaixo
a gente vai fazer o seguinte a gente vai criar uma variável chamada na verdade a gente já criou lá em cima né a gente inicializou aqui user Voice vazia A gente vai fazer essa variável e user Voice Agora ela receber os nossos dados que é o que ele entendeu no Harley aqui ó esse areia aqui na posição zero então a gente sempre vai querer o que tiver dentro do nosso alway do que ela Escutou Na Posição Zero Certo Esse vai ser o item necessário para a gente sempre ter vamos dizer a fala mais precisa possível
a gente até pode ver o que que ela entendeu fazendo aqui embaixo assim ó console ponto log e a gente pode fazer assim e user Voice dois pontos e aqui a gente pode pedir para mostrar dados na posição zero tá esse aqui é o que ela vai estar entendendo então a gente colocou aqui colocar na variável dizer voz a frase mais correta agora pessoal O que que a gente vai ter que fazer a gente vai ter que fazer com que tenha ali um timer para que ele possa ir vendo o que a gente está falando
e conforme ele vendo o que a gente está falando ó acrescentar palavras esse timer ele reiniciar até que Termine o que a gente falou e o timer funciona então o que que a gente pode fazer a gente vai fazer aqui uma variável chamado silence timer que é variável que a gente criou lá em cima não é o time out é o time essa variável timer a gente vai fazer ela receber aqui um evento de sete time out que é aquele evento do que que acontece quando tem um período de tempo né dá até houvesse code
tem aqui o set time out já montadinho acho que esse de baixo ele já monta para nós o 7 time out corretinho então aqui dentro o que que a gente vai querer aqui a gente passa o que a gente quer que aconteça E aqui onde está escrito time out a gente vai colocar a quantidade de tempo que a gente quer que isso aconteça a gente vai usar que esse parâmetro que a gente criou aqui em cima que é o silence time out que já tem 2 milissegundos ou seja dois segundos ele vai verificar isso Em
2 segundos e aqui a gente vai pedir para ele acionar o nosso Stop listening que é a nossa função especial para ele parar de ouvir que tá aqui embaixo certo o que que acontece quando a gente começa a falar vocês vão reparar aqui que ele começa conforme o que a gente vai falando essa função aqui de dados aqui do start Listen do recov nicho ele é como se fosse um loop então conforme a gente vai colocando mais palavras ele volta a fazer esse loop a gente fala mais uma palavra ele volta a fazer esse loop
e isso é um problema porque se a gente acionar o nosso timer aqui é já direto em dois segundos ele vai parar de ouvir o que a gente tá falando ele vai cortar o que a gente tá falando certo então o que que a gente precisa fazer a cada loop que ele dá aqui no nosso start ali a gente precisa usar que um evento chamado Clear time out que é para a gente zerar esse nosso cronômetro Então a gente vai zerar o nosso Silent timer que é essa variável aqui que é o do nosso cronômetro
a gente vai zerar ela por quê ó repara comigo o que vai acontecer a gente começa a falar então ele vai zerar o timer começar a contar o timer a gente fala outra palavra ele 0 timer começa a contar o timer a gente fala outra palavra ele zera o timer começa a contar o timer outra palavra ele zero timer começa a contar o timer parando de falar aí o timer vai Acionar e vai parar tá entendendo então cada vez que a gente coloca uma palavra mais ele limpa e começa de novo limpa e começa de
novo Até que em algum momento a gente vai parar de falar e aí esse timer vai ser finalmente o timer que vai ser acionado para parar a nossa fala sacou a lógica aqui de como que a gente tá fazendo aqui esse sistema para a gente reconhecer quando ele para de falar legal né pessoal bem interessante só para a gente garantir que isso realmente vai acontecer aqui no nosso start listening que tá chamando o nosso start Listen do rekognition onde fecha o nosso reek aqui embaixo a gente também vai fazer o uso desse Timer para a
gente garantir que se falha aqui ele vai funcionar o nosso timer que tá aqui embaixo então a gente pode pegar aqui o Silent timer copiar aqui e colocar aqui embaixo da mesma forma não vai ter nenhum problema certo dessa forma que vai funcionar igual então se não rodar por aqui roda por aqui por baixo então de qualquer forma a gente vai estar parando o nosso timer Show Beleza Lá no nosso Stop listening que é onde Para de escutar a gente tá parando aqui o nosso recognition e para garantir que a gente vai parar esse nosso
time out a gente vai também dar aqui um Clear então eu posso copiar aqui em cima o clima Clear time Out para também limpar ele aqui quando a gente dá o parar né ele já vai parar aqui e também limpar o nosso cronômetro para a gente garantir que não vai ficar nada rodando aí ele vai parar completamente certo beleza então aqui a gente até pode colocar assim ó console ponto love só para simular que a gente tem que chamar a api chamar a api agora vamos ver se isso aqui tá funcionando vamos rodar Vamos dar
um corda Run Android Vamos fazer um teste Beleza já instalou eu vou fechar aqui essa janela que a gente tinha anterior Vamos abrir o nosso inspect agora Fechou e agora vamos fazer um teste aqui vou gravar um áudio aqui o que é JavaScript ó show de bola pessoal então ele pegou aqui o que é java script que é o nosso rei zero tá vendo Então aqui o user Voice é o que ele tá realmente entendendo os consoles que a gente colocou vai sempre pegar o primeiro que no geral é o mais completinho aí ele viu
que o usuário terminou de falar ele calcula mais ou menos uns dois segundos depois que a gente para de falar ele para então é bem tranquilo para o usuário não é um delay tão grande talvez a gente podia pensar assim né podia diminuir esse delay para um segundo para não demorar tanto porque aquele leva dois segundos para ver que o usuário terminou de falar só que quando você faz isso de diminuir aqui para um segundo por exemplo sai desse time out que atrás ele acaba que ele não pega as palavras conforme a gente vai vai
falando ele já corta o que a gente tá falando porque às vezes leva mais de um segundo entre uma palavra e outra que a pessoa tá falando e aí ele já para né o nosso speech com dois segundos é o que ficou o ideal aqui para a gente não ter nenhum problema mas beleza então pessoal tá funcionando aqui a nossa lógica agora o que a gente precisa fazer é dar uma melhorada na parte estética aqui né Porque conforme a gente fala não acontece nada aqui a gente vai querer que apareça aqui um microfoninho né com
aquele efeito de áudio falando e também a gente vai querer que quando termina de falar ele deu algum retorno para nós que tá pensando e fazer a nossa chamada a IP Então nós vamos fazer o seguinte a gente vai entrar lá no site do loot files então tô entrando no site do loot files Eu já falei para vocês desse site aqui Alguns alguns vídeos aqui do canal o loot files ele é um sistema onde você tem imagens que você pode usar no formato svg animadas Então você tem aqui um banco de imagens muito legal muito
levinho completo certo não é que nem um GIF que é uma imagem pesada ele usa Jason e Animação usando JavaScript para animais imagens é muito legal sensacional a gente pode buscar aqui na busca as animações E aí eu recomendo que você esteja logado aí com uma conta né logo com o Google para ficar mais fácil de você poder usar os recursos aqui tudo gratuito tá aí a gente vai digitar aqui microfone quando você começa a digitar Acho que ele já vai sugerir aqui aí vamos escolher aqui a opção microfone que ele já aparece para nós
e aqui já vai ter algumas opções bem legais ó pessoal bem bonitinhas mesmo tá vendo ó opções bem joias você pode escolher aqui o price como free grátis né E aí você pode pegar qualquer uma dessas aqui que você acha interessante no que eu usei no meu projeto que eu mostrei para vocês no vídeo anterior eu usei esse de baixo aqui né mas você pode usar esse aqui também fica bem legal esse outro aqui ó fica bem show também tanto faz né eu vou pegar esse aqui de baixo então e aí você clica em cima
dele você vai aqui escolher a opção HTML que na opção onde você quer usar ele vai abrir essa página para você aqui ó com o código para você tá utilizando o que eu sempre desmarca que a opção controls porque você tirando o controls ele vai aparecer só uma imagem ele não vai aparecer esse controle aqui embaixo certo e a gente também vai ter que copiar esse código aqui para colocar lá no nosso projeto repare que no código você tem um script que é o player que ele leu o Jason para poder fazer a animação Então
esse primeiro código aqui ó você pode copiar ele e ir lá na sua index.html que a nossa página inicial do projeto e pode referenciar ele aqui embaixo onde a gente tem as referências das nossas libs aqui né então eu posso colocar logo abaixo aqui do Framework Seven eu vou colocar assim lute files e aqui eu posso colocar essa referência do player do Lucky files certo aqui a referência da CDN mesmo sem problema tá online se você quiser você pode baixar também é só copiar esse link que tem aqui ó control c pode abrir aqui uma
nova aba do navegador control V ele vai aparecer aqui o código você dá control S aí você vai achar onde é que tá a pasta aí do teu projeto né pode entrar por exemplo na www.js eu posso colocar aqui dentro de Lib que as bibliotecas e aqui eu posso deixar só assim ó lute Player ponto JS o nome do arquivo certo e aí eu posso estar salvando aqui dessa forma eu salvei esse arquivo localmente para eu não precisar é buscar isso na CDN certo aí eu posso vir aqui referenciar agora localmente aqui esse meu arquivo
né posso fazer da seguinte forma a gente chama que a nossa pasta JS dentro da pasta JS Libe e dentro de Lib a gente vai pegar o lute Player que é o nosso playerzinho do look Fire beleza e aí agora feito isso a gente vai pegar aqui a parte do da imagem assim ó que é esse lute Player que tem aqui embaixo tá vendo essa parte dessa desse componente chamado lute Player você dá um control você copia vem aqui no teu projeto lá onde a gente tem a nossa index a gente vai ter que colocar
essa imagemzinha para aparecer aqui ó quando a gente clicar no botão falar né então ela vai ter que aparecer aqui no nosso Fabi botão aqui embaixo Então dentro do nosso Fabi Button aqui a gente tem aqui o nosso botão falar e eu vou fazer o seguinte eu vou criar aqui dentro uma div que eu vou chamar aqui com o ID de microfone e dentro dessa Diva chamada microfone eu vou colocar aquele nosso multiplayer ali que a imagemzinha certo aqui a gente pode até diminuir o tamanho dele para não ficar tão grande é o Elite de
100 pixels por 100 pixels aqui tem um Style incorporado ela tem um HTML aqui direto né então vou colocar aqui 100 pixels por 100 pixels para não ficar tão grande assim beleza e aí a gente já vai ter o nosso microfone colocado ali vamos dar uma olhadinha como é que ficou Vamos só rodar essa aplicação aqui ele vai estar visível depois a gente vai deixar ele invisível Então vamos dar um corva Android Beleza já rodou vamos rodar aqui lá no nosso inspect E tá lá como é que ele vai ficar fica bem bonitinho esse nosso
íconezinho aqui né Fica bem legal ele vai então a ficar no lugar aqui desse botão de falar a gente só deixou ele aqui em cima só para a gente ver como é que fica esteticamente ele né Fica bem legal mesmo fica bem bonito ok pessoal então a gente vai fazer ele desaparecer da seguinte forma aqui onde a gente tem a nossa dívida com a classe com ai de microfone a gente vai passar a classe aqui ó display nome que é uma classe do Framework Seven para deixar uma coisa oculta então o nosso microfone ele está
oculto nesse exato momento beleza ele começa inicializado oculto Nós também vamos fazer aqui um control c e um control V para fazer aqui ela pensando Então vamos fazer aqui pensando e a gente vai usar também uma outra imagem do loot fire dela pensando então a gente pode colocar assim ó Dotz que é pontinhos né dotz que é pontos azuis certo e aqui já vai ter várias opções aqui que a gente pode estar utilizando legal bem interessante dos pontinhos que a gente pode estar pegando aqui eu vou pegar esse daqui ó desses pontinhos você pode escolher
qualquer um eu vou clicar aqui nesse Primeiro vamos aqui onde a gente tem HTML Para incorporar e logo aqui embaixo a gente vai pegar desativar o controls primeiro né E a gente vai pegar só a parte do multiplayer a gente não precisa pegar o script porque a gente já é referenciou lá no nosso projeto né vou copiar esse aqui e vou trocar aqui onde eu tenho esse que era do microfone deleto e vou colocar esse outro que é o dos pontinhos certo então só para a gente ver como é que vai ficando eu vou tirar
aqui esse display nome desse daqui só para a gente ver como é que fica os pontinhos aqui a gente pode deixar sem pixels por 100 pixels vamos deixar 150 por 150 vamos ver como é que vai ficar 150 por 150 vamos rodar Nossa aplicação e vamos ver como é que tá ficando beleza vamos fechar aqui o nosso espectro antigo Vamos abrir ele novamente e olha lá como é que vai ficar vai ficar dessa forma ali os pontinhos né Daria até para deixar um pouco maior né pessoal deixa eu ver aqui como é que vai ficar
uns 300 por 300 mesmo né que era o quanto tava antes vamos ver se vai ficar legal 300 por 300 vamos rodar de novo ó vai ficar assim ó fica bem legal né com os pontinhos assim dessa forma Ok Fechou então então a gente vai agora deixar esse aqui também oculto Então vamos colocar a classe display None para ele não começar mostrando essa nossa imagem só vai ser nos momentos certos que a gente vai manipular essas imagens então voltando lá no nosso código JavaScript agora que a gente tem um microfone pensando Então a gente vai
fazer o seguinte quando começa a falar aqui ó começa a escutar o que a gente tá falando ou seja a gente clicou no botão para falar a gente vai fazer desaparecer o botão falar e vamos ter que fazer aparecer o microfone e falando Então a gente vai fazer isso da seguinte forma a gente vai pegar o nosso componente ali que é o btn falar e vai adicionar aqui nele a classe A DD Class display nós vamos adicionar a classe para ele ficar oculto e no nosso microfone vai ser aqui o nosso ID aqui microfone que
tá com display None inicial a gente vai remover a gente vai fazer o contrário remove Class display None então a gente fez desaparecer o botão falar e aparecer o microfone certo falando agora quando ele para de falar a gente vai ter que fazer o processo contrário Então vamos fazer o contrário aqui ó na verdade vai ter que desaparecer deixa eu copiar esse aqui ó quando ele terminou então de parou de ouvir a gente pode até colocar aqui embaixo no evento aqui ó usuário terminou de falar né desaparecer ou o microfone de ouvindo aqui ele vai
ter que desaparecer Então a gente vai adicionar a classe aqui display None para ele ficar oculto certo para o nosso microfone parar de funcionar e aí a gente vai ter que fazer a chamada da pi daí quando for fazer a chamada da pi a gente vai ter que logicamente mostrar ela pensando certo ok vamos fazer então a chamada da api agora daí a gente depois testa tudo isso funcionando então a gente pode criar aqui ó uma função function que a gente vai chamar de chamar e pi que é chamar api e aqui a gente vai
pegar a pergunta ou a informação que o usuário vai passar certo para a gente criar pessoal uma conta então lá na Open o penerai Né que é o site do da chat GPT você vai acessar assim o pennay.com né você pode digitar no Google assim Open aí né ou Meu inglês não é lá tão bom né mas Vocês entenderam você vai entrar no site aí você vai precisar caso você não tenha criar uma conta tá então você vai quem sai em up E cria tua conta Tu clica aqui em sign up vai fazer a tua
conta aqui criar conta com Google com Microsoft com endereço de e-mail que você quiser criar a sua conta certo eu já tenho minha conta criada Então vou entrar com a minha conta eu vou vir aqui em login uma vez você com a conta criada ele vai perguntar aqui que você quer você quer interagir com chat GPT ou dali que é Darwin né que é de criação de imagens aí com inteligência artificial ou usar a api No meu caso eu vou querer usar a api aí piá então vou clicar aqui certo uma vez entrado nesse painelzinho
você pode clicar aqui no seu nome aqui no cantinho né com a sua conta e você pode vir aqui em viu api Kiss as chaves de api Então você vai clicar aqui e aqui você vai ter como gerar as suas chaves de api tá pessoal é onde você vai criar aqui a conexão uma chave que vai conectar aqui com eles é importante destacar para vocês que aqui em Ratel limits você tem aqui limitações de quanto você pode estar gastando né requisições quanto você pode fazer por minuto e tal e aqui em usei o uso você
vai ter aqui uma demonstração de quanto você tá usando para vocês terem uma noção eu coloquei ó cinco dólares aqui porque já tinha acabado aquele meu período de demonstração vocês vão ter um período de demonstração de 30 dias mas no meu caso já tinha acabado esse período de demonstração eu usei para caramba aqui a minha assistente para fazer teste usei muito mesmo e tudo isso me custou 001 um centavo de dólar então você pode fazer muita coisa com pouco dinheiro tá então se depois que acabar o teu período aí de testes né você quiser aí
contratar você coloca o seu cartão de crédito ali né Você pode até especificar quanto de crédito você quer colocar aqui na pi por mês e tudo mais então é bem tranquilinho de você tá usando aqui o sisteminha deles certo ok então agora o que que a gente vai fazer a gente vai ter que vir aqui em Apk e aqui na api quis a gente vai ter que criar uma chave secreta para nossa pi Então você vai vir aqui em Create New Secret E aí você pode dar um nome para essa chave que você vai criar
eu vou colocar assim ó Beta aula Vou colocar aqui né para criar uma chave essa chave que eu vou criar aqui nesse vídeo obviamente eu vou depois revogar vou deletar ela então não adianta você querer copiar ela para usar no seu porque não vai funcionar então vou clicar aqui em Create Secret aqui ele vai gerar uma chave para você aqui assim que gerar essa chave copia ela vem aqui em copiar tá abre aí um bloquinho de notas e já cola aqui dentro para você ficar com ela guardada aqui dentro certo Você vai precisar dessa chavinha
porque depois que você der um dono aqui você não consegue pegar ela mais então você clica aqui e pega ela certinho beleza então já pegamos a nossa chave de integração agora que que a gente vai fazer aqui dentro da nossa função de chamar api a gente vai fazer a conexão com a nossa api usando uma requisição Ajax Então a gente vai criar aqui uma variável chamada vai que que é a nossa chave e a gente vai colocar aqui a chave que a gente acabou de gerar só lembrando que essa chave que eu tô usando aqui
depois eu vou deletar não adianta tentar usar ela copiar se só vai perder teu tempo tá mas é você vai ter que pegar e a sua aí vamos fazer agora uma outra variável que se chama epi url que é para qual caminho Qual é o endpoint né que a gente vai querer tá acionando lá da chat GPT para você saber se vende points essas coisas aqui da documentação você pode vir aqui em documentation estudar as referências da pi o Epa e referência aí aqui ele vai explicar para você e tal aqui mostra quais que são
os modelos que ele tem quais são aqui as url que você pode chamar certo a que a gente vai chamar vai ser exatamente essa daqui ó quando diz aqui making quests onde tem IP I reference né referência da ypi a gente vai usar esse aqui ó S E piá e o peninai.com v1 chat completations que é o que a gente vai estar usando Então vai ser esse caminho que a gente vai estar fazendo a nossa requisição então eu posso colocar que é o caminho vai ser para essa url que eu vou estar solicitando aqui a
api certo e agora aqui embaixo a gente vai fazer a nossa requisição Ajax então a requisição Ajax a gente faz Com cifrão ponto Ajax isso aqui é um uso que a gente tem doj care que tá colocado nesse projeto a gente usou essa biblioteca do jacare né aqui a gente vai abrir o método Ajax e aqui dentro do método Ajax a gente vai passar um objeto com várias informações que a gente quer então a gente abre as chaves para passar Então e o URL qual é o lugar para onde a gente quer enviar Nossa solicitação
a gente vai apontar essa variável que a gente criou que é a nossa Happy URL aqui em cima o Type o tipo da solicitação vai ser do tipo post a gente vai estar enviando alguma coisa E aí a gente vai passar aqui no readers ou seja nos cabeçalhos algumas informações Então a gente vai passar isso aqui também como objeto a gente abre Chaves também vamos passar aqui primeiro que o contente type aqui dois pontos e isso aqui é importante que você seja maiúsculo e o t também seja maiúsculo tá pessoal content Type dessa forma aqui
vai ser do tipo application application Jason a gente vai enviar um Jason lá para nossa ipai e aqui a nossa autorization autoisation a gente vai ter que passar agora o nosso token aqui a nossa chave a nossa ipai aqui então a gente vai passar aqui o Beer espaço e aqui a gente vai colocar mais a nossa equipe que a nossa chave que a gente tem lá em cima certo então a gente tá mandando na no cabeçalho da nossa requisição que é o tipo de som e que autorização é dessa chave que a gente tá mandando
aqui certo agora a gente vai colocar uma vírgula e vai enviar para eles lá Quais que são os dados que a gente quer enviar para o chat GPT Então a gente vai fazer aqui data data o tipo de dados que a gente tá enviando né E a gente vai passar aqui um Jason springfy porque a gente vai mandar isso como Jason então aqui dentro do Jason string a gente vai abrir aqui um objeto com as informações que a gente vai estar passando então Primeiro vai ser Model que é qual é o modelo entre aspas duplas
a gente coloca aqui então a nossa moda o que a gente vai colocar vai ser a GPT traço 3.5 traço Turbo Então esse é o modelo que a gente vai estar usando da chat GPT a GPT 3.5 turbo tá até porque ela é uma opção mais baratinha tá pessoal Se vocês forem lá na documentação aqui ó nos modelos vocês vão ver que tem vários modelos disponíveis inclusive se a gente vem aqui aonde a gente tem a nossa conta a gente pode vir aqui onde tem aqui o rate limites e aquele mostra vários modelos ó de
chat a gente tem essas opções aqui ó de modelos certo então tem umas que custam menos e umas que custam mais certo então eu recomendo usar 3.5 turbo E aí vamos continuar aqui a gente então passou qualquer modelo e aqui a gente vai passar Qual que é a mensagem que a gente vai estar enviando então a gente passa Messenger e aqui a gente vai criar uma Ray dentro desse Array a gente vai por um objeto e vai passar aqui o role role quer dizer quem que tá mandando Então a gente vai dizer que é o
usuário porque em Messenger Zap e ela trabalha com user e o trabalho com assistente também então é para saber que a mensagem foi uma mensagem enviada pelo usuário ou uma mensagem enviada pela Assistente isso porque a gente pode usar o parâmetro assistente para dar contexto de conversas que a gente já teve por exemplo você falou alguma coisa anteriormente você pode mandar junto com uma mensagem de usuário O que é chat GPT falou já para você antes para ela saber o que ela já falou para ela poder interagir de acordo com que você já conversou com
ela entendeu mas enfim Então você vai passar aqui user depois vai passar aqui o conteúdo então contente aqui ó Qual que é o conteúdo o que que vai ser vai ser a pergunta que a gente vai receber aqui nessa função que a gente ainda vai passar aqui em cima que a gente vai estar recebendo aqui ó do nosso start listening do nosso recognition aqui certo mas a gente já vai chegar lá então a gente vai passar aqui qual que é a pergunta que a gente vai estar enviando que é o que a gente o que
a nossa assistente ouviu e aqui também um outro parâmetro que eu vou mandar é o temperatura temperatura que é esse temperatura aqui pessoal é tipo quão ela vai ficar assim inteligente entre aspas para dar uma resposta por exemplo quanto maior você colocar esse aqui mais ela vai ser ousada mas ela vai fazer uma resposta criativa mas ela vai tentar usar os recursos dela para interagir com você então eu recomendo colocar uma temperatura mais baixa para você gastar menos dos seus tokens aí menos da sua do seu entre aspas dinheirinho aí Daí piá que são números
de requisições que você pode estar fazendo com ela tá beleza então a gente tá enviando Aqui as nossas informações Vamos colocar aqui uma vírgula e aqui a gente vai fazer o que que acontece der sucesso então Sucesso o que que vai acontecer Vamos fazer uma Funchal nessa funcho a gente vai ter a resposta a gente chama geralmente de responsa e aqui a gente pode ver qual que é essa resposta então a gente pode dar um conselho ponto log e aqui a gente pode colocar responsa para gente ver o que que veio do chat de PT
por completo e aí a gente vai fazer o uso aqui daquela nossa função que a gente criou lá deixa eu ver aqui onde a gente fez ó lá na nossa index.js lá embaixo lá nas aulas da nossa playlist a gente criou aqui uma função ó pessoal que se chamava falar Lembra essa função falar a gente passava qualquer a resposta escrita a resposta falada e Qual rota e dessa forma ele já acionava o TTS speak para assistente falar também já escrevia na tela então o que que a gente pode fazer a gente vai copiar essa função
de falar que a gente já tinha lá na nossa index.js aqui do projeto mesmo né que a gente fez lá na nossa playlist e vamos colocar aqui na chat gpt.js lá embaixo de tudo aqui certo e aí que que a gente vai fazer na a gente vai colocar aqui então para ele pegar qualquer a resposta escrita a gente pode pegar que o item que vai vir do retorno da nossa chat GPT na verdade a gente não sabe ainda qual que é o retorno que ela tá dando para nós então a gente daqui a pouco faz
isso né Vamos colocar aqui então qual que é o erro erro function o que que acontece se der um erro então aqui a gente pode passar x HR aqui o text status são três parâmetros que a gente pode passar aqui no retorno de erro né e o error true e aqui a gente simplesmente se der um erro a gente pode dizer né que teve um problema que a gente pode colocar um console ponto log dizendo erro na chamada beleza E aí a gente pode fazer o seguinte aqui então onde a gente tem a chamada do
chat GPT aqui até escrevi chat gtp né já atingi PT então agora a gente vai passar aqui qual que é o a pergunta né que a que foi ouvido a pergunta que foi ouvida pessoal ela ficou armazenada aqui nessa variável e user Voice lembra que a gente deixou a pergunta nessa variável e ela tá no escopo global então a gente pode fazer o seguinte aqui ó onde era para chamar a pi ó a gente pode colocar aqui ó tirar esse console log chamar E piá e vamos passar aqui o nosso user Voice que é o
que é a nossa assistente Entendeu Beleza Vamos ver se esse aqui tá funcionando a gente vê qual que é a resposta que chat GPT dá para nós né Ah e outra coisa né quando a gente começa que a solicitação a nossa equipe a gente tem que fazer ela como que pensando né então a gente pode fazer da seguinte forma a gente pode fazer aqui o nosso pensando que a gente fez aqui que é o nosso os três pontinhos ó a gente fez lá na nossa index.l então a gente pode fazer aqui pensando ponto remover Class
display não né a gente vai fazer sair fora aqui o aparecer para nós os três pontinhos de pensão aparecer os três pontinhos de pensando E aí quando a gente tiver um retorno seja ele um retorno de sucesso seja ele um retorno de erro a gente vai precisar fazer com que volte o botão original né que é o botão de falar então a gente pode fazer aqui no sucesso que o nosso pensar pensando né pensando a gente vai fazer ele sumir novamente display None já parou de pensar Então tem que sumir e o nosso btn falar
tem que aparecer novamente Então a gente vai ter que fazer btn falar ponto remove classe tirar ali o display None que tá ocultando ele beleza e também vamos fazer isso aqui no erro então mostrar botão de falar e tirar o pensando vamos rever a nossa lógica aqui rapidinho pessoal só para a gente acompanhar o que tá acontecendo Cliquei no botão falar ele vai acionar o start listening acionou start listening ele vai fazer desaparecer o botão de falar e vai aparecer a animação do nosso microfone falando aí ele vai acionar o nosso plugin de repugnição né
para ele escutar o que a gente tá falando ele vai escutar ouvir as palavras é que a gente usou um sistema aqui usando um timer para que a gente possa verificar quando ele vai parar de falar né que fica no loop aqui é quando ele para de falar ele é acionado aí ele vai chamar o stop listening o stop listening aqui ele vai parar o que ele tá ouvindo vai limpar o cronômetro que a gente tinha lá e acionou o evento que a gente fez um evento aqui de fim de fala personalizado que é acionado
que se chama expediente quando deu Speed o usuário terminou de falar o microfone vai sumir a animaçãozinha dele e vamos chamar a api passando qual que foi lá o que a nossa assistente entendeu que ficou armazenado nesse user voz aí ele vai fazer lá a chamada para nossa api do chat GPT da opennai né a gente passou aqui a solicitação usando uma requisição Ajax passando aqui qual que é a pergunta né que foi feita que foi enviada E aí ele vai ter um sucesso que vai dar a resposta lá do chat GPT quando der um
sucesso vai tirar o pensando e vai voltar o botão do falar e aqui a gente tem aqui um erro também vai fazer a mesma coisa só para a gente ver o que que acontece E aí depois a gente vai ter que fazer ele falar né mas primeiro vamos ver o retorno aqui ó que api do chat GPT vai dar para nós então vamos rodar isso daqui corda valor Android Vamos fechar um espectro que a gente tinha antes abrir ele novamente aqui ainda não carregou tá lá então vamos fazer agora uma pergunta diferente vamos ver o
que que acontece vamos ver também repara que a animação se vai funcionar né E também aqui os retornos O que é HTML ó então funcionou ali as nossas animações ele foi usuário terminou de falar ele tá fazendo a requisição aqui aí veio o Retorno lá do chat GPT para nós aí já voltou aqui a o botão do falar novamente Então você viu que as nossas animações funcionário direito aqui vamos ver qual que é o retorno então no chat GT então a gente pode abrir aqui o retorno dentro do retorno a gente vai ter aqui Um
item chamado choices que é escolhas dentro de choices a gente vai ter que na posição zero Um item chamado message e dentro de message a gente vai ter contente que é o conteúdo que a resposta que ela me trouxe ó e a gente também tem aqui o role que é dizendo que essa resposta é da assistente certo então repare a gente tem a resposta dentro da resposta a gente vai ter que pegar o chamado joyces na posição zero pegar o item Messenger E aí o contente dentro de Messenger então a gente pode fazer o seguinte
a gente pode fazer aqui ó no retorno de sucesso que agora a gente já viu qual que é a resposta aqui a gente até pode ver a resposta no console né então a gente vai criar aqui uma variável que a gente pode chamar de resp escrita que é o que ela vai estar escrevendo assistente e resp falada que é o que ela vai estar falando as duas vai ser o mesmo conteúdo retornado pelo chat GPT porque nesse caso não tem como a gente fazer uma filtragem melhor da fala lembra que lá na playlist a gente
às vezes alterava uma palavra outra para fala ficar um pouco mais natural aqui não a gente não vai conseguir fazer isso mas não tem problema a gente vai pegar então responde que a resposta da nossa equipe no campo ali choices né então ó repara aqui ó a gente tem a resposta daí a gente tem o arroy chamado choices vai pegar a posição zero item Messenger contente então a gente tá pegando a resposta choices na posição zero a gente coloca aqui a posição aí vamos pegar o item Messenger E aí contente que é o conteúdo certo
então agora a gente pegou a resposta que tá vindo da ipai nós vamos pegar aqui atribuir essas duas variáveis aqui resto escrita e resp falada e agora a gente vai fazer a gente vai acionar Nossa função para assistente falar que foi aquela disfunção que a gente colocou lá embaixo essa função falar aqui que recebe os parâmetros da resposta escrita a resposta falada e rota Então a gente vai fazer o seguinte aqui a gente vai chamar falar que a nossa função vamos passar o primeiro parâmetro como a resp escrita o segundo parâmetro o nosso resp falada
e o último parâmetro que seria para ir para uma rota específica lembra que a gente fez para ela poder mandar para uma rota dependendo do que a gente fala a gente vai passar como falso passam falso aqui que não vai ter nenhum tipo de problema e com isso a gente finalizou basicamente aqui a interação vamos ver se funcionou vamos dar um cordova Android ver se deu tudo certo Beleza já rodou Nossa aplicação Vamos abrir de novo aqui um espectro e vamos lá ver se funciona né Vamos de clássico vamos ver assim conte uma piada sobre
a Alexa tá pensando vamos ver se vai funcionar piadas mas posso ajudá-lo a encontrar algumas na internet posso ajudá-lo em algo mais Então pessoal a gente viu que a fala dela ficou bem lerda né E também a gente viu aqui que além da fala dela ficar lerda ela também escreveu meio de vagarote aqui não sei como é esquisito né pessoal então a gente pode fazer a seguinte aqui no rate a gente pode aumentar um pouco a velocidade eu vou colocar 1.5 para ela falar um pouco mais rápido né E aqui embaixo na parte escrita eu
vou fazer com que ela demora um pouquinho mais para parar o texto para limpar ele vou deixar aqui em 3 segundos a gente coloca 3.000 e na escrita a gente coloca 30 aqui para ela escrever num ritmo um pouquinho melhor um pouco mais rápido aqui para a gente ver como é que vai ficar o resultado final para nós então vamos fazer um teste de novo Vamos dar um corte Android Vamos ver se esse ajuste fino fica legal beleza Já construiu aqui vamos abrir novamente aqui no espectro ainda não carregou aqui vamos fazer de novo aqui
em Pet aí Abriu vamos fazer o teste agora para ver se vai funcionar né Explique o que é CSS bem rapidamente aí ó Show de bola aí ela fica um pouquinho mais de tempo e fechou e é isso aí pessoal então tá feito aí a nossa assistente integrada com chat GPT né ficou bem show de bola bem legal mesmo eu acho que vale aí o seu joinha né Deixa eu fazer mais uma pergunta para ela assim ó Você conhece o canal no YouTube programação web eu não tenho a capacidade de conhecer canais no YouTube mas
posso pesquisar por eles Existem muitos canais no YouTube que ensinam programação web alguns dos mais populares incluem para ver se mídia fico dekamp entre outros esses canais oferecem tutoriais e cursos gratuitos para iniciantes e programadores experientes aí ó fazendo propaganda até para os concorrentes aí né mas show de bola né pessoal ficou bem legal a nossa assistente tenho certeza que foi muito interessante para vocês aí deixa eu aparecer aqui de novo por a minha cara aqui de novo aí aparecer aqui de novo então se você gostou desse vídeo Não esquece de dar aquele seu like
eu vou deixar aqui na descrição do vídeo também o projeto a opção já integrado do chat GPT para você baixar só vai ter que trocar lá a chave de api da Open PT para sua e vai vir zerada E aí é só ser feliz você vai ver aí o funcionamento da sua assistente bem legal Espero que tenha gostado desse conteúdo um forte abraço e até a próxima valeu [Música]
