Crie aplicativos da Web com tecnologia de IA com extensões do Firebase

1. Antes de começar

Neste codelab, você aprenderá a criar apps da Web com tecnologia de IA que proporcionam experiências de usuário atraentes com extensões do Firebase.

Pré-requisitos

• Conhecimento de Node.js e JavaScript

O que você aprenderá

• Como usar extensões relacionadas à IA para processar entrada de idioma e vídeo.
• Como usar o Cloud Functions for Firebase para formar um pipeline entre extensões.
• Como usar JavaScript para acessar a saída produzida por extensões.

O que você precisará

• Um navegador de sua preferência, como Google Chrome
• Um ambiente de desenvolvimento com editor de código e terminal
• Uma Conta Google para a criação e gerenciamento do seu projeto Firebase

2. Revise os aplicativos da web e seus serviços Firebase

Esta seção descreve os apps da Web que você criará neste codelab e qual Firebase usará para criá-los.

Revisar aplicativo

Uma empresa de camisetas fica sobrecarregada com longas críticas sobre uma de suas camisetas e não tem certeza de sua avaliação geral. O aplicativo da web Reviewly concluído resume cada avaliação, fornece uma classificação com estrelas para cada avaliação e usa cada avaliação para inferir uma classificação geral para o produto. Os usuários também podem expandir cada revisão resumida para ver a revisão original.

Aplicativo chatbot

O corpo docente de uma escola fica sobrecarregado com perguntas repetitivas sobre temas gerais, por isso deseja automatizar as respostas. O aplicativo Chatbot completo oferece aos alunos um chatbot de conversação baseado em um modelo de linguagem grande (LLM) e pode responder perguntas sobre tópicos gerais. O chatbot tem contexto histórico, portanto suas respostas podem levar em consideração perguntas anteriores feitas pelos alunos na mesma conversa.

Aplicativo de dica de vídeo

Um departamento governamental deseja que seus vídeos forneçam descrições de áudio para melhorar a acessibilidade, mas eles têm centenas de vídeos para anotar e precisam de uma abordagem simplificada. O aplicativo Video Hint completo é um protótipo que o departamento analisará para avaliar sua eficácia.

Estas são as extensões usadas no aplicativo Video Hint :

• Rotular vídeos com extensão Cloud Video AI – extraia rótulos de cada vídeo enviado para o armazenamento.
• Tarefas de linguagem com extensão API PaLM — resuma os rótulos em uma descrição de texto.
• Extensão Converter texto em fala — crie uma versão em áudio da descrição do vídeo.

3. Configure seu ambiente de desenvolvimento

Verifique sua versão do Node.js.

1. Em seu terminal, verifique se você possui o Node.js v20.0.0 ou superior instalado:

   node -v
   

2. Se você não tiver o Node.js v20.0.0 ou superior, baixe e instale-o .

Baixe o repositório

1. Se você tiver o git instalado, clone o repositório GitHub do codelab:

   git clone https://github.com/FirebaseExtended/ai-extensions-codelab.git
   

2. Se você não tiver o git instalado, baixe o repositório GitHub como um arquivo zip .

Revise a estrutura de pastas

Em sua máquina local, encontre o repositório clonado e revise a estrutura de pastas. A tabela a seguir contém as pastas e suas descrições:

Cada pasta inclui um arquivo readme.md que oferece um início rápido para executar o respectivo aplicativo da web, usando instruções simplificadas. No entanto, se você for um aluno iniciante, conclua este codelab porque ele contém o conjunto de instruções mais abrangente.

Se não tiver certeza se aplicou corretamente o código conforme as instruções deste codelab, você pode encontrar o código da solução para os respectivos aplicativos nas pastas reviewly-end , chatbot-end e video-hint-end .

Instale a CLI do Firebase

Execute o seguinte comando para verificar se a Firebase CLI está instalada e se ela é v12.5.4 ou superior:

firebase --version

• Se você tiver a CLI do Firebase instalada, mas ela não for a versão 12.5.4 ou superior, atualize-a:

  npm update -g firebase-tools
  

• Se você não tiver a CLI do Firebase instalada, instale-a:

  npm install -g firebase-tools
  

Se você não conseguir instalar a CLI do Firebase devido a erros de permissão, consulte a documentação do npm ou use outra opção de instalação .

Faça login no Firebase

1. No seu terminal, navegue até a pasta ai-extensions-codelab e faça login no Firebase:

   cd ai-extensions-codelab
   firebase login
   

2. Se o seu terminal informar que você já está conectado ao Firebase, vá para a seção Configurar seu projeto do Firebase deste codelab.
3. Dependendo se você deseja que o Firebase colete dados, insira Y ou N .
4. No seu navegador, selecione sua conta do Google e clique em Permitir .

4. Configure seu projeto Firebase

Nesta seção, você configurará um projeto do Firebase e associará um aplicativo da Web do Firebase a ele. Você também ativará os serviços do Firebase usados ​​pelos aplicativos da Web de exemplo.

Crie um projeto do Firebase

1. No console do Firebase , clique em Criar projeto .
2. Na caixa de texto Digite o nome do seu projeto , insira AI Extensions Codelab (ou um nome de projeto de sua preferência) e clique em Continuar .
3. Para este codelab, você não precisa do Google Analytics, então desative a opção Ativar Google Analytics para este projeto .
4. Clique em Criar projeto .
5. Aguarde o provisionamento do seu projeto e clique em Continuar .
6. No seu projeto do Firebase, vá para Configurações do projeto . Anote o ID do seu projeto porque você precisará dele mais tarde. Esse identificador exclusivo é como seu projeto é identificado (por exemplo, na Firebase CLI).

Baixe uma conta de serviço do Firebase

Alguns dos aplicativos da Web que você criará neste codelab usam renderização no servidor com Next.js .

O SDK Admin do Firebase para Node.js é usado para garantir que as regras de segurança funcionem no código do lado do servidor. Para usar APIs no Firebase Admin, você precisa fazer download de uma conta de serviço do Firebase no console do Firebase.

1. No console do Firebase, navegue até a página Contas de serviço nas configurações do projeto .
2. Clique em Gerar nova chave privada > Gerar chave .
3. Após o download do arquivo para o seu sistema de arquivos, obtenha o caminho completo para esse arquivo.
   Por exemplo, se você baixou o arquivo para a pasta Downloads , o caminho completo pode ser assim: /Users/me/Downloads/my-project-id-firebase-adminsdk-123.json
4. No seu terminal, defina a variável de ambiente GOOGLE_APPLICATION_CREDENTIALS para o caminho da sua chave privada baixada. Em um ambiente Unix, o comando pode ser assim:

   export GOOGLE_APPLICATION_CREDENTIALS="/Users/me/Downloads/my-project-id-firebase-adminsdk-123.json"
   

5. Mantenha este terminal aberto e use-o no restante deste codelab, pois sua variável de ambiente poderá ser perdida se você iniciar uma nova sessão de terminal.
   Se você abrir uma nova sessão de terminal, deverá executar novamente o comando anterior.

Atualize seu plano de preços do Firebase

Para usar o Cloud Functions e as extensões do Firebase, seu projeto do Firebase precisa estar no plano de preços Blaze , o que significa que está associado a uma conta do Cloud Billing .

• Uma conta Cloud Billing requer uma forma de pagamento, como um cartão de crédito.
• Se você é novo no Firebase e no Google Cloud, verifique se você está qualificado para um crédito de US$ 300 e uma conta de avaliação gratuita do Cloud Billing .

No entanto, observe que a conclusão deste codelab não gerará cobranças reais.

Para atualizar seu projeto para o plano Blaze, siga estas etapas:

1. No console do Firebase, selecione para atualizar seu plano .
2. Na caixa de diálogo, selecione o plano Blaze e siga as instruções na tela para associar seu projeto a uma conta do Cloud Billing.
   Se você precisasse criar uma conta do Cloud Billing, talvez fosse necessário navegar de volta ao fluxo de upgrade no Console do Firebase para concluir o upgrade.

Configure os serviços do Firebase no Firebase console

Nesta seção, você provisionará e configurará vários serviços do Firebase usados ​​pelos apps da Web neste codelab. Observe que nem todos esses serviços são usados ​​em todos os apps da Web, mas configurar todos esses serviços agora é uma conveniência para trabalhar neste codelab.

Configurar autenticação

Você usará a autenticação com o aplicativo Chatbot e o aplicativo Video Hint . Lembre-se, porém, de que se você estivesse criando um aplicativo real, cada aplicativo deveria ter seu próprio projeto Firebase .

1. No console do Firebase, navegue até Autenticação .
2. Clique em Começar .
3. Na coluna Provedores adicionais , clique em Google > Ativar .

4. Na caixa de texto Nome público para projeto , insira um nome memorável, como My AI Extensions Codelab .
5. No menu suspenso Email de suporte para projeto , selecione seu endereço de email.
6. Clique em Salvar .
   

Configurar o Cloud Firestore

Você usará o Firestore com todos os três aplicativos. Lembre-se, porém, de que se você estivesse criando um aplicativo real, cada aplicativo deveria ter seu próprio projeto Firebase .

1. No console do Firebase, navegue até Firestore .
2. Clique em Criar banco de dados > Iniciar no modo de teste > Avançar .
   Posteriormente neste codelab, você adicionará regras de segurança para proteger seus dados. Não distribua ou exponha um aplicativo publicamente sem adicionar regras de segurança ao seu banco de dados .
3. Use o local padrão ou selecione um local de sua preferência.
   Para um aplicativo real, você deseja escolher um local próximo aos seus usuários. Observe que esse local não pode ser alterado posteriormente e também será automaticamente o local do seu intervalo padrão do Cloud Storage (próxima etapa).
4. Clique em Concluído .

Configurar o Cloud Storage para Firebase

Você usará o Cloud Storage com o aplicativo Video Hint e testará a extensão Convert Text to Speech (próxima etapa do codelab).

1. No console do Firebase, navegue até Storage .
2. Clique em Começar > Iniciar em modo de teste > Próximo .
   Posteriormente neste codelab, você adicionará regras de segurança para proteger seus dados. Não distribua ou exponha um aplicativo publicamente sem adicionar regras de segurança ao seu bucket de armazenamento .
3. A localização do seu bucket já deve estar selecionada (devido à configuração do Firestore na etapa anterior).
4. Clique em Concluído .

Nas próximas seções deste codelab, você instalará extensões e modificará as bases de código de cada aplicativo de amostra deste codelab para que três aplicativos da Web diferentes funcionem.

5. Configure a extensão "Language Tasks with PaLM API" para o aplicativo Reviewly

Instale as tarefas de idioma com extensão API PaLM

1. Navegue até Tarefas de idioma com extensão API PaLM .
2. Clique em Instalar no console do Firebase .
3. Selecione seu projeto do Firebase.
4. Na seção Revisar APIs habilitadas e recursos criados , clique em Habilitar ao lado de quaisquer serviços sugeridos a você:

5. Clique em Avançar > Avançar.
6. Na caixa de texto Caminho da coleção , insira bot .
7. Na caixa de texto do prompt , insira .
8. Na caixa de texto Campos variáveis , insira input .
9. Na caixa de texto do campo Resposta , insira text .
10. Na lista suspensa de local do Cloud Functions , selecione Iowa (us-central1) ou o local que você selecionou anteriormente para Firestore e Cloud Storage.
11. Na lista suspensa Modelo de idioma , selecione text-bison-001 .
12. Deixe todos os outros valores como padrão.
13. Clique em Instalar extensão e aguarde a instalação da extensão.

Experimente a extensão Language Tasks com PaLM API

Embora o objetivo deste codelab seja interagir com a extensão Language Tasks with PaLM API por meio de um app da Web, é útil entender como a extensão funciona acionando-a usando o Firebase Console. A extensão é acionada quando um documento do Cloud Firestore é adicionado à coleção bot .

Para ver como a extensão funciona usando o console do Firebase, siga estas etapas:

1. No console do Firebase, navegue até Firestore .
2. Na coleção bot , clique em Adicionar documento .
3. Na caixa de texto ID do documento , clique em ID automática .
4. Na caixa de texto Campo , insira input .
5. Na caixa de texto Valor , insira Tell me about the moon .
6. Clique em Salvar e aguarde alguns segundos. Seu documento na coleção bot agora inclui uma resposta à sua consulta.

6. Configure o aplicativo Reviewly para usar o Firebase

Para executar o aplicativo Reviewly , você precisa configurar o código do seu aplicativo e a CLI do Firebase para interagir com seu projeto do Firebase.

Adicione serviços e configurações do Firebase ao código do seu aplicativo

Para usar o Firebase, a base de código do seu aplicativo precisa dos SDKs do Firebase para os serviços que você deseja usar e da configuração do Firebase que informa a esses SDKs qual projeto do Firebase usar.

O aplicativo de amostra deste codelab já inclui todos os códigos de importação e inicialização necessários para os SDKs (consulte reviewly-start/js/reviews.js ), portanto, não é necessário adicioná-los. No entanto, o aplicativo de exemplo possui apenas valores de espaço reservado para a configuração do Firebase (consulte reviewly-start/js/firebase-config.js ), portanto, você precisa registrar seu aplicativo no projeto do Firebase para obter os valores de configuração exclusivos do Firebase para seu aplicativo.

1. No console do Firebase, em seu projeto do Firebase, navegue até Visão geral do projeto e clique em Rede .
   
2. Na caixa de texto Apelido do aplicativo , insira um apelido de aplicativo memorável, como My Reviewly app .
3. Não marque a caixa de seleção Configurar também o Firebase Hosting para este aplicativo . Você seguirá essas etapas posteriormente no codelab.
4. Clique em Registrar aplicativo .
5. O console exibe um snippet de código para adicionar e inicializar o SDK do Firebase com um objeto de configuração do Firebase específico do aplicativo. Copie todas as propriedades no objeto de configuração do Firebase.
6. Em seu editor de código, abra o arquivo reviewly-start/js/firebase-config.js .
7. Substitua os valores do espaço reservado pelos valores que você acabou de copiar. Não há problema se você tiver propriedades e valores para serviços do Firebase que não usa no aplicativo Reviewly .
8. Salve o arquivo.
9. De volta ao console do Firebase, clique em Continuar para o console .

Configure seu terminal para executar comandos Firebase CLI em seu projeto Firebase

1. Em seu terminal, navegue até a pasta ai-extensions-codelab que você baixou anteriormente.
2. Navegue até a pasta do aplicativo web reviewly-start :

   cd reviewly-start
   

3. Faça com que a CLI do Firebase execute comandos em um projeto específico do Firebase:

   firebase use YOUR_PROJECT_ID
   

Execute e visualize o aplicativo da web Reviewly

Para executar e visualizar o aplicativo web, siga estas etapas:

1. No seu terminal, instale as dependências e execute o aplicativo web:

   npm install
   
   # Include the parentheses in the following command.
   (cd functions && npm install)
   
   npm run dev
   

2. No seu navegador, navegue até o URL mostrado no seu terminal. Por exemplo: http://localhost:8080 .

A página deve carregar, mas você notará que faltam vários recursos. Iremos adicioná-los nas próximas etapas deste codelab.

7. Adicione funcionalidade ao aplicativo Reviewly

Na última etapa deste codelab, você executou o aplicativo Reviewly localmente, mas ele não tinha muitas funcionalidades e ainda não usava a extensão instalada. Nesta etapa do codelab, você adicionará essa funcionalidade e usará o app da Web para acionar a extensão.

Implantar regras de segurança

O aplicativo de amostra deste codelab contém conjuntos de regras de segurança para Firestore e Cloud Storage para Firebase. Depois de implantar essas regras de segurança em seu projeto do Firebase, os dados em seu banco de dados e seu bucket estarão mais protegidos contra uso indevido.

Você pode visualizar essas regras nos arquivos firestore.rules e storage.rules .

1. Para implantar essas regras de segurança, execute este comando em seu terminal:

   firebase deploy --only firestore:rules,storage
   

2. Se lhe for perguntado: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?" , selecione Sim .

Atualize o código do aplicativo para acionar a extensão

No aplicativo Reviewly , uma nova avaliação adicionada ao Firestore aciona a extensão para resumir a avaliação.

1. Em seu editor de código, abra o arquivo functions/add-mock-reviews.js .
2. Substitua a variável reviewWithPrompt pelo código a seguir, que solicita ao modelo de linguagem uma revisão mais curta.

   const reviewWithPrompt = `Here's a user supplied review. Give me a shorter summary of the review, and a rating out of 5, and a flag which indicates if there was a product defect.
   
   Product name: "Blue t-shirt with cat picture". Review: """${review}"""
   
   Craft your response as JSON with properties has_defect, summary and rating. Don't include any extra text.`;
   

3. Após a variável reviewWithPrompt , substitua a variável reviewDocument pelo código a seguir, que cria um documento de revisão para que possa ser adicionado ao Firestore.

   const reviewDocument = {
           input: reviewWithPrompt,
           originalReview: review,
           timestamp: Timestamp.now(),
   };
   
   getFirestore().collection(DB_COLLECTION_NAME).add(reviewDocument);
   

4. Salve o arquivo.
5. No arquivo js/reviews.js , após o Insert code below, to import your Firebase Callable Cloud Function , importe sua função Firebase HTTP callable com o auxiliar httpsCallable :

   const addMockReviews = httpsCallable(functions, "addMockReviews");
   

6. Após o Insert code below, to invoke your Firebase Callable Cloud Function , invoque sua função Firebase HTTP callable:

   await addMockReviews();
   

7. Salve o arquivo.

Implante uma função para adicionar novas avaliações

O aplicativo da web Reviewly usa uma função do Cloud para adicionar os comentários. Mas atualmente, o Cloud Function não está implantado.

Para implantar sua função com a CLI do Firebase, siga estas etapas:

1. No seu terminal, ainda na pasta reviewly-start , pressione Control+C para parar o servidor.
2. Implante sua função:

   firebase deploy --only functions
   

3. Se você vir uma Permission denied while using the Eventarc Service Agent ou um erro semelhante, aguarde alguns minutos e tente novamente o comando.

Você acabou de implantar sua primeira função personalizada com o Cloud Functions. O console do Firebase oferece um painel onde você pode ver todas as funções implantadas em seu projeto do Firebase.

Execute e visualize o aplicativo da web Reviewly novamente (agora com funcionalidade)

Para executar e visualizar o aplicativo web agora funcional, siga estas etapas:

1. No seu terminal, execute o servidor novamente:

   npm run dev
   

2. No seu navegador, navegue até o URL mostrado no seu terminal. Por exemplo: http://localhost:8080 .
3. No aplicativo, clique em Adicionar algumas avaliações simuladas e aguarde alguns segundos até que algumas avaliações longas apareçam.
   Em segundo plano, a extensão Language Tasks with PaLM API reage ao novo documento que representa a nova revisão. O prompt adicionado anteriormente solicita um resumo mais curto do modelo de linguagem.
4. Para visualizar uma revisão completa e o prompt usado para a revisão, clique em uma das revisões e selecione Mostrar prompt do PaLM .

8. Configure a extensão "Chatbot com PaLM API" para o aplicativo Chatbot

Instale o Chatbot com extensão API PaLM

1. Navegue até o Chatbot com extensão API PaLM .
2. Clique em Instalar no console do Firebase .
3. Selecione seu projeto do Firebase.
4. Clique em Próximo > Próximo > Próximo até chegar à seção Configurar extensão .
5. Na caixa de texto Caminho da coleção , insira users/{uid}/discussion/{discussionId}/messages .
6. Na lista suspensa de local do Cloud Functions , selecione Iowa (us-central1) ou o local que você selecionou anteriormente para Firestore e Cloud Storage.
7. No menu suspenso Modelo de idioma , selecione chat-bison .
8. Deixe todos os outros valores como padrão.
9. Clique em Instalar extensão e aguarde a instalação da extensão.

Experimente o Chatbot com extensão API PaLM

Embora o objetivo deste codelab seja interagir com o Chatbot com a extensão da API PaLM por meio de um app da Web, é útil entender como a extensão funciona acionando-a usando o console do Firebase. A extensão é acionada quando um documento do Cloud Firestore é criado na coleção users/{uid}/discussion/{discussionId}/messages .

1. No console do Firebase, navegue até Firestore .
2. Clique Iniciar a coleta .
   1. Na caixa de texto ID da coleção , insira users e clique em Avançar .
   2. Na caixa de texto ID do documento , clique em ID automática e em Salvar .
3. Na coleção users , clique em Iniciar a coleta .
   
   1. Na caixa de texto ID da coleção , insira discussion e clique em Avançar .
   2. Na caixa de texto ID do documento , clique em ID automática e em Salvar .
4. Na coleção discussion , clique em Iniciar a coleta .
   
   1. Na caixa de texto ID da coleção , insira messages e clique em Avançar .
   2. Na caixa de texto ID do documento , clique em ID automática .
   3. Na caixa de texto Campo , insira prompt .
   4. Na caixa de texto Valor , insira Tell me 5 random fruits .
   5. Clique em Salvar e aguarde alguns segundos. A coleção de messages agora inclui um documento que contém uma resposta à sua consulta.

5. Na coleção messages , clique em Adicionar documento .
   1. Na caixa de texto ID do documento , clique em ID automática .
   2. Na caixa de texto Campo , insira prompt .
   3. Na caixa de texto Valor , insira And now, vegetables .
   4. Clique em Salvar e aguarde alguns segundos. A coleção de messages agora inclui um documento que contém uma resposta à sua consulta.

9. Configure o aplicativo Chatbot para usar o Firebase

Para executar o aplicativo Chatbot , você precisa configurar o código do seu aplicativo e a CLI do Firebase para interagir com seu projeto do Firebase.

Adicione serviços e configurações do Firebase ao código do seu aplicativo

Para usar o Firebase, a base de código do seu aplicativo precisa dos SDKs do Firebase para os serviços que você deseja usar e da configuração do Firebase que informa a esses SDKs qual projeto do Firebase usar.

O aplicativo de amostra deste codelab já inclui todos os códigos de importação e inicialização necessários para os SDKs (consulte chatbot-start/lib/firebase/firebase.js ), portanto, não é necessário adicioná-los. No entanto, o aplicativo de exemplo possui apenas valores de espaço reservado para a configuração do Firebase (consulte chatbot-start/lib/firebase/firebase-config.js ), portanto, você precisa registrar seu aplicativo no projeto do Firebase para obter os valores de configuração exclusivos do Firebase para seu aplicativo.

1. No console do Firebase, em seu projeto do Firebase, navegue até Visão geral do projeto e clique em Web (ou clique em Adicionar aplicativo se você já registrou um aplicativo no projeto).
2. Na caixa de texto Apelido do aplicativo , insira um apelido memorável para o aplicativo, como My Chatbot app .
3. Não marque a caixa de seleção Configurar também o Firebase Hosting para este aplicativo . Você seguirá essas etapas posteriormente no codelab.
4. Clique em Registrar aplicativo .
5. O console exibe um snippet de código para adicionar e inicializar o SDK do Firebase com um objeto de configuração do Firebase específico do aplicativo. Copie todas as propriedades no objeto de configuração do Firebase.
6. Em seu editor de código, abra o arquivo chatbot-start/lib/firebase/firebase-config.js .
7. Substitua os valores do espaço reservado pelos valores que você acabou de copiar. Não há problema se você tiver propriedades e valores para serviços do Firebase que não usa no aplicativo Chatbot .
8. Salve o arquivo.
9. De volta ao console do Firebase, clique em Continuar para o console .

Configure seu terminal para executar comandos Firebase CLI em seu projeto Firebase

1. Em seu terminal, pressione Control+C para impedir que o servidor execute o aplicativo web anterior.
2. No seu terminal, navegue até a pasta do aplicativo web chatbot-start :

   cd ../chatbot-start
   

3. Faça com que a CLI do Firebase execute comandos em um projeto específico do Firebase:

   firebase use YOUR_PROJECT_ID
   

Configure a base de código do seu aplicativo para usar o Firebase Hosting com reconhecimento de estrutura

Este codelab usa estruturas da Web com hospedagem (pré-visualização) com o aplicativo Web Chatbot .

1. No seu terminal, habilite frameworks web com Firebase Hosting:

   firebase experiments:enable webframeworks
   

2. Inicialize o Firebase Hosting:

   firebase init hosting
   

3. Quando solicitado com Detected an existing base de código Next.js existente codebase in your current directory, should we use this? , pressione Y.
4. Quando solicitado In which region would you like to host server-side content, if applicable? , selecione a região padrão ou o local selecionado anteriormente para Firestore e Cloud Storage e pressione Enter (ou return no macOS).
5. Quando solicitado com Set up automatic builds and deploys with GitHub? , pressione N .

Execute e visualize o aplicativo da web Chatbot

1. No seu terminal, instale as dependências e execute o aplicativo web:

   npm install
   firebase emulators:start --only hosting
   

2. No seu navegador, navegue até o URL de hospedagem hospedado localmente. Na maioria dos casos, é http://localhost:5000/ ou algo semelhante.

A página deve carregar, mas você notará que faltam vários recursos. Iremos adicioná-los nas próximas etapas deste codelab.

Solucionar problemas de execução do aplicativo Web

Se você vir o erro na página da web que começa assim: Error: Firebase session cookie has incorrect... , você precisa excluir todos os seus cookies em seu ambiente localhost. Para fazer isso, siga as instruções em excluir cookies | Documentação do DevTools. .

10. Adicione funcionalidade ao aplicativo Chatbot

Na última etapa deste codelab, você executou o app Chatbot localmente, mas ele não tinha muitas funcionalidades e ainda não usava a extensão instalada. Nesta etapa do codelab, você adicionará essa funcionalidade e usará o app da Web para acionar a extensão.

Implantar regras de segurança

O aplicativo de amostra deste codelab contém conjuntos de regras de segurança para Firestore e Cloud Storage para Firebase. Depois de implantar essas regras de segurança em seu projeto do Firebase, os dados em seu banco de dados e seu bucket estarão mais protegidos contra uso indevido.

Você pode visualizar essas regras nos arquivos firestore.rules e storage.rules .

1. Para implantar essas regras de segurança, execute este comando em seu terminal:

   firebase deploy --only firestore:rules,storage
   

2. Se lhe for perguntado: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?" , selecione Sim .

Atualize o código para adicionar mensagens ao Cloud Firestore

No aplicativo Chatbot , uma nova mensagem de um usuário é adicionada ao Firestore e aciona a extensão para gerar uma resposta.

1. No seu editor de código, abra o arquivo lib/firebase/firestore.js .
2. Perto do final do arquivo, encontre a função addNewMessage , que trata da adição de novas mensagens.
   A função já possui as seguintes propriedades do objeto:
   

   Parâmetro	Descrição
   userId	O ID do usuário logado
   discussionId	O ID da discussão à qual a mensagem foi adicionada
   message	O conteúdo do texto da mensagem
   db	Uma instância de banco de dados Firestore

   Com essas variáveis ​​prontas, você pode adicionar um documento do Cloud Firestore para representar a nova mensagem.
3. No corpo da função addNewMessage após o comentário // Insert your code below ⬇️ , adicione o seguinte código:

   await addDoc(
           collection(
                   db,
                   "users",
                   userId,
                   "discussion",
                   discussionId,
                   "messages"
           ),
           {
                   prompt: message,
                   createTime: serverTimestamp(),
           }
   );
   
   await updateDoc(doc(db, "users", userId, "discussion", discussionId), {
           latestMessage: message,
           updatedTime: serverTimestamp(),
   });
   

Atualize o código para construir uma consulta para obter mensagens

1. Ainda no arquivo lib/firebase/firestore.js , localize a função getMessagesQuery , que precisa retornar uma consulta do Cloud Firestore que localize mensagens armazenadas no caminho de coleta users/{uid}/discussion/{discussionId}/messages .
2. Substitua toda a função getMessagesQuery pelo seguinte código:

   function getMessagesQuery(db, userId, discussionId) {
           if (!userId || !discussionId) {
                   return null;
           }
           const messagesRef = collection(
                   db,
                   "users",
                   userId,
                   "discussion",
                   discussionId,
                   "messages"
           );
           return query(messagesRef, orderBy("createTime", "asc"));
   }
   

Atualize o código para lidar com documentos de mensagens do Cloud Firestore

1. Ainda no arquivo lib/firebase/firestore.js , localize a função handleMessageDoc , que recebe um documento do Cloud Firestore que representa uma única mensagem.
   Esta função precisa formatar e estruturar os dados de uma forma que faça sentido para a UI do aplicativo Chatbot .
2. Substitua toda a função handleMessageDoc pelo seguinte código:

   function handleMessageDoc(doc) {
           const data = doc.data();
           const item = {
                   prompt: data.prompt,
                   response: data.response,
                   id: doc.id,
                   createTime: formatDate(data.createTime.toDate()),
           };
   
           if (data?.status?.completeTime) {
                   item.completeTime = formatDate(data.status.completeTime.toDate());
           }
   
           return item;
   }
   

3. Salve o arquivo.

Execute e visualize o aplicativo web Chatbot novamente (agora com funcionalidade)

Para executar e visualizar o aplicativo web agora funcional, siga estas etapas:

1. No seu navegador, retorne à guia do aplicativo web Chatbot e recarregue a página.
2. Clique em Fazer login com o Google .
3. Se necessário, selecione sua conta do Google.
4. Depois de fazer login, recarregue a página.
5. Na caixa de texto Digite sua mensagem , insira uma mensagem, como Tell me about space .
6. Clique em Enviar e aguarde alguns segundos para que o aplicativo web Chatbot responda.

Outro benefício do Chatbot com extensão API PaLM é o histórico de conversas.

Para ver um exemplo de sua capacidade de conversar com o contexto histórico, siga estas etapas:

1. Na caixa de texto Digite sua mensagem , faça uma pergunta, como What are five random fruits? .
2. Na caixa de texto Digite sua mensagem , faça uma pergunta complementar relacionada à pergunta anterior, como And what about vegetables? .

O aplicativo web Chatbot responde com conhecimento histórico. Mesmo que sua última pergunta não tenha especificado cinco vegetais aleatórios, o Chatbot com extensão API PaLM entende perguntas de acompanhamento.

11. Configure a extensão "Convert Text to Speech" para o aplicativo Video Hint

Instale o texto convertido na extensão da fala

1. Navegue até o texto convertido para a extensão da fala .
2. Clique em Instalar no console do Firebase .
3. Selecione seu projeto Firebase.
4. Clique em Avançar .
5. Nas APIs de revisão ativadas e seção de recursos criados , clique em Ativar ao lado de todos os serviços sugeridos a você:

6. Clique em Avançar e selecione Grant ao lado de quaisquer permissões que sejam sugeridas a você.

7. Clique em Avançar .
8. Na caixa de texto do caminho da coleção , digite bot .
9. Na caixa de texto do caminho de armazenamento , digite tts .
10. Deixe todos os outros valores como suas opções padrão.
11. Clique em Instalar a extensão e aguarde a extensão para instalar.

Experimente o texto convertido para a extensão da fala

Embora o objetivo desse código seja interagir com o texto convertido na extensão da fala através de um aplicativo da Web, é útil entender como a extensão funciona acionando a extensão usando o console do Firebase. A extensão desencadeia quando um documento de Firestore em nuvem é criado na coleção bot .

Para ver como a extensão funciona usando o console do Firebase, siga estas etapas:

1. No console do Firebase, navegue para Firestore
2. Clique Start Collection .
3. Na caixa de texto ID da coleção , digite bot .
4. Clique em Avançar .

5. Na caixa de texto ID do documento , clique em ID automático .
6. Na caixa de texto de campo , digite text .
7. Na caixa de texto do valor , entre The quick brown fox jumps over the lazy dog .
8. Clique em Salvar .

Para ver e ouvir o arquivo MP3 que você criou, siga estas etapas:

1. No console do Firebase, navegue até o armazenamento .
2. No painel em que você pode fazer upload de arquivos, observe o nome do seu balde após o valor gs:// . Este é o nome do seu balde padrão para este projeto. Você precisa disso em várias tarefas ao longo deste código.

3. No console do Google Cloud, navegue para armazenamento em nuvem .
4. Selecione seu projeto.
   Se você não vir seu projeto na lista recente de projetos, clique em Selecionar Projeto para localizar seu projeto no seletor do projeto.

5. Selecione seu balde de armazenamento padrão.
6. Navegue até a pasta tts/ .
7. Clique no arquivo MP3.
8. No final do arquivo mp3, clique e observe que seu texto é convertido para a fala.

12. Configure a extensão "Label Videos with Cloud Video AI" para o aplicativo de dica de vídeo

Instale os vídeos da gravadora com extensão de vídeo em nuvem AI

1. Navegue até os vídeos da etiqueta com a extensão da nuvem AI .
2. Clique em Instalar no Console do Firebase .
3. Selecione seu projeto Firebase.
4. Clique em Avançar> Avançar> Avançar, até chegar à seção de extensão de configuração .
5. A partir das funções da nuvem, o suspensão do local , selecione um local suportado (o local que você selecionou anteriormente para o Firestore e o armazenamento em nuvem ou o mais próximo dele). Para locais suportados, consulte a seção location_id no AnnotateVideoRequest .
6. No suspensão do modelo , selecione mais recente .
7. A partir do menu suspenso da câmera estacionária , selecione não .
8. Deixe todos os outros valores como padrão.
9. Clique em Instalar a extensão e aguarde a extensão para instalar.

Experimente os vídeos da gravadora com Extensão de Vídeo em Cloud AI

Embora o objetivo desse código seja interagir com os vídeos da etiqueta com a extensão da Cloud Video AI através de um aplicativo da Web, é útil entender como a extensão funciona acionando a extensão usando o console do Firebase. A extensão aciona quando um arquivo de vídeo é carregado no seu balde de armazenamento.

Para ver como a extensão funciona usando o console do Firebase, siga estas etapas:

1. Navegue até o armazenamento dentro do seu projeto Firebase > Criar pasta .
2. Na caixa de texto Nome da pasta , digite video_annotation_input .

3. Clique em Adicionar pasta .
4. Na pasta video_annotation_input , clique no arquivo de upload .
5. Na pasta ai-extensions-codelab/video-hint-start/public/videos que você clonou ou baixou anteriormente, selecione o primeiro arquivo de vídeo.
6. De volta ao seu navegador, no console do Google Cloud, navegue para armazenamento em nuvem .
7. Selecione seu balde de armazenamento padrão, que você observou anteriormente.
8. Clique na pasta video_annotation_output .
   Se você não vir a pasta video_annotation_output , aguarde alguns segundos e atualize a página porque a API de inteligência de vídeo ainda pode estar processando o vídeo.

9. Observe que existe um arquivo JSON que segue um nome semelhante ao arquivo que você carregou anteriormente.
10. Clique Baixe o nome do arquivo .
11. Abra o arquivo JSON baixado no seu editor de código. Ele contém a saída bruta da API de inteligência de vídeo, que inclui rótulos detectados do vídeo que você carregou.

13. Configure o aplicativo de dica de vídeo para usar o FireBase

Para executar o aplicativo de dica de vídeo , você precisa configurar o código do seu aplicativo e a CLI do Firebase para interagir com o seu projeto Firebase.

Adicione os serviços e a configuração do Firebase ao código do seu aplicativo

Para usar o Firebase, a base de código do seu aplicativo precisa do FireBase SDKs para os serviços que você deseja usar e a configuração do Firebase que informa aos SDKs que o projeto do Firebase use.

O aplicativo de amostra deste código já inclui todo o código de importação e inicialização necessário para os SDKs (consulte video-hint-start/lib/firebase/firebase.js ), para que você não precise adicioná-los. No entanto, o aplicativo de amostra possui apenas valores de espaço reservado para a configuração do Firebase (consulte video-hint-start/lib/firebase/firebase-config.js ), portanto, você precisa registrar seu aplicativo no seu projeto Firebase para obter os valores de configuração de Firebase exclusivos para o seu aplicativo.

1. No console do Firebase, no seu projeto Firebase, navegue para a visão geral do projeto e clique em Web (ou clique em Adicionar aplicativo se você já registrou um aplicativo no projeto).
2. Na caixa de texto do apelido do aplicativo , insira um apelido memorável de aplicativo, como My Video Hint app .
3. Não selecione a hospedagem de Firebase de Firebase também para esta caixa de seleção de aplicativo . Você fará essas etapas posteriormente no Codelab.
4. Clique em Registrar aplicativo .
5. O console exibe um snippet de código para adicionar e inicializar o SDK do Firebase com um objeto de configuração do Firebase específico do aplicativo. Copie todas as propriedades no objeto de configuração do Firebase.
6. No seu editor de código, abra o arquivo video-hint-start/lib/firebase/firebase-config.js .
7. Substitua os valores de espaço reservado pelos valores que você acabou de copiar. Tudo bem se você tiver propriedades e valores para serviços de Firebase que você não usa no aplicativo de dica de vídeo .
8. Salve o arquivo.
9. De volta ao console do Firebase, clique em continuar console .

Configure seu terminal para executar os comandos da CLI do Firebase no seu projeto Firebase

1. No seu terminal, pressione Control+C para impedir que o servidor execute o aplicativo da web anterior.
2. No seu terminal, navegue até a pasta de aplicativos da web- video-hint-start

   cd ../video-hint-start
   

   :
3. Faça os comandos da Firebase CLI Run contra um projeto específico do Firebase:

   firebase use YOUR_PROJECT_ID
   

Configure a base de código do seu aplicativo para usar a hospedagem de Base Firebase com consciência-estrutura

Este código de codelab usa estruturas da web com hospedagem (visualização) com o aplicativo da dica de vídeo .

1. No seu terminal, ative estruturas da web com o Firebase Hosting:

   firebase experiments:enable webframeworks
   

2. Inicialize Firebase Hosting:

   firebase init hosting
   

3. Quando solicitado com a detecção de uma base de código Next.js Detected an existing codebase in your current directory, should we use this? , pressione Y.
4. Quando solicitado In which region would you like to host server-side content, if applicable? , selecione a região padrão ou o local selecionado anteriormente para o Firestore e o armazenamento em nuvem e pressione Enter (ou return no macOS).
5. Quando solicitado com Set up automatic builds and deploys with GitHub? , pressione N .

Execute e visualize o aplicativo da web dica de vídeo

1. No seu terminal, instale as dependências nas pastas video-hint-start e functions e depois execute o aplicativo:

   npm install
   
   # Include the parentheses in the following command.
   (cd functions && npm install)
   
   firebase emulators:start --only hosting
   

2. No seu navegador, navegue para o URL hospedado localmente hospedado. Na maioria dos casos, é http: // localhost: 5000/ ou algo semelhante.

A página deve carregar, mas você notará que vários recursos estão ausentes. Vamos adicioná -los nas próximas etapas deste código.

Solucionar problemas para executar o aplicativo da web

Se você vir uma mensagem de erro como Error: The query requires an index. You can create it here: https://console.firebase.google.com No painel de console de Devtools, siga estas etapas:

1. Navegue até o URL fornecido.

2. Clique em Salvar e aguarde a mudança do status da construção para ativado .

14. Adicione a funcionalidade ao aplicativo de dica de vídeo

Na última etapa deste código, você executou o aplicativo de dica de vídeo localmente, mas não tinha muita funcionalidade e ainda não usou a extensão instalada. Nesta etapa do Codelab, você adicionará essa funcionalidade e usará o aplicativo da Web para acionar a extensão.

Implantar regras de segurança

O aplicativo de amostra deste código contém conjuntos de regras de segurança para o Firestore e para armazenamento em nuvem para Firebase. Depois de implantar essas regras de segurança para o seu projeto Firebase, os dados no seu banco de dados e seu balde estão melhor protegidos contra o uso indevido.

Você pode visualizar essas regras nos arquivos firestore.rules and storage.rules .

1. Para implantar essas regras de segurança, execute este comando em seu terminal:

   firebase deploy --only firestore:rules,storage
   

2. Se você é perguntado: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?" , selecione Sim .

Atualize o código para combinar as funções

1. No seu editor de código, expanda a pasta functions .
   Esta pasta contém várias funções, que se combinam para formar um pipeline de extensão. A tabela a seguir lista e descreve cada função:

   Função	Descrição
   functions/01-handle-video-upload.js	A primeira etapa no pipeline de extensão. Ele processa o arquivo de vídeo carregado do usuário.
   functions/02-handle-video-labels.js	A segunda etapa no pipeline de extensão. Ele processa o arquivo de etiquetas de vídeo, que foi gerado pela extensão storage-label-videos .
   functions/03-handle-audio-file.js	O terceiro passo no pipeline de extensão. Ele lida com o arquivo de áudio transcrito.

   No entanto, você ainda precisa adicionar um arquivo que agrupa essas funções.
2. No arquivo functions/index.js , adicione o seguinte código:

   import { initializeApp } from "firebase-admin/app";
   
   export * from "./01-handle-video-upload.js";
   export * from "./02-handle-video-labels.js";
   export * from "./03-handle-audio-file.js";
   
   initializeApp();
   

Este código usa módulos JavaScript para importar e exportar as funções do arquivo index.js , para que haja um local centralizado para todas as funções.

Atualize o código para lidar com o upload de vídeo

1. No seu editor de código, abra o arquivo lib/firebase/storage.js .
2. Localize a função uploadVideo .
   Esta função recebe parâmetros userId , filePath e file . Esses dados são suficientes para fazer upload de um arquivo para armazenamento em nuvem.
3. No corpo da função do uploadVideo , adicione o seguinte código:

   const storageRef = ref(storage, `video_annotation_input/${filePath}`);
   
   const uploadTask = uploadBytesResumable(storageRef, file, {
           customMetadata: {
                   uid: userId,
           },
   });
   
   return uploadTask;
   

Implante suas funções

Para implantar suas funções com a Firebase CLI, siga estas etapas:

1. No seu terminal enquanto ainda estiver na pasta video-hint-start , pressione Control+C para interromper o processo atual.
2. Implante suas funções:

   firebase deploy --only functions
   

   Se você for perguntado sobre a exclusão de quaisquer funções de nuvem anteriores, selecione No .
3. Se você vir uma mensagem semelhante à Permission denied while using the Eventarc Service Agent , aguarde alguns minutos e depois novamente novamente.
4. Após o término do comando, execute o aplicativo localmente novamente:

   firebase emulators:start --only hosting
   

Execute e visualize o aplicativo de dica de vídeo novamente (agora com funcionalidade)

Para executar e visualizar o aplicativo da web agora funcional, siga estas etapas:

1. No seu navegador, encontre a guia onde você navegou para http: // localhost: 5000.
2. Se necessário, clique em entrar no Google e selecione sua conta do Google.
3. Clique em Upload Exemplo de vídeo nº 1 e aguarde alguns minutos para ver os resultados do resumo do vídeo.
4. Se você não vir nenhum resultado após o upload do vídeo, consulte Erros de solução de problemas com as funções da nuvem no apêndice deste codelab.

15. Conclusão

Parabéns! Você alcançou muito neste codelab!

Extensões de Firebase instaladas e configuradas

Você usou o console do Firebase para configurar e instalar várias extensões de IA . O uso de extensões é conveniente porque você não precisa escrever muito código de caldeira que lida com a autenticação do Google Cloud Services, lendo e escrevendo da Firestore e interagem com os serviços do Google Cloud - e as várias nuances envolvidas com essas tarefas.

Trabalhou com extensões usando o console do Firebase

Em vez de pular direto para o código, você levou um tempo para entender como as extensões de IA funcionam, com base em uma entrada que você forneceu através do console para o Firestore ou o armazenamento em nuvem. Esse tipo de interação pode ser especialmente útil se você precisar depurar a saída de extensão.

Construiu três aplicativos da Web movidos a IA que usam extensões de Firebase

Revisão

No aplicativo de revisão da Web, você usou as tarefas de idioma com a extensão da API PALM para resumir longas críticas que os usuários deixaram para um produto de camiseta. Você também solicitou que o modelo de idioma fornecesse uma resposta JSON à sua consulta, onde o JSON forneceu uma classificação de estrelas e uma revisão resumida da revisão de formato longo original.

Exercício opcional : A empresa de camisetas está satisfeita com as críticas resumidas, mas pediram um resumo adicional da natureza do defeito. Você pode ajustar o prompt para retornar um resumo do defeito e, em seguida, incluir esse resumo na interface do usuário do aplicativo da web?

Bot de bate-papo

No aplicativo da Web Chatbot , você usou o chatbot com a extensão da API PALM para fornecer ao usuário uma interface de bate -papo interativa, que inclui contexto histórico em conversas - onde cada mensagem é armazenada em um documento do Firestore que é escopo para um usuário específico.

Exercício opcional : os alunos ficaram satisfeitos com o chatbot, mas a equipe gostaria de alguns aprimoramentos. Os alunos devem receber perguntas instigantes após o fornecimento de sua resposta. Por exemplo:

Student asks: What is the ozone?
Response: The ozone is a molecule composed of...How do you think human activities can impact the ozone layer?

Dica: você pode usar uma opção de contexto configurável para conseguir isso.

Dica de vídeo

No aplicativo de vídeo dica de vídeo , você usou o texto convertido em fala , as tarefas de idioma com a API da PALM e os vídeos da etiqueta com extensões de vídeo em nuvem para formar um pipeline de extensão que resulta em uma descrição de texto e áudio de um vídeo.

Exercício opcional : o departamento do governo achou o protótipo interessante e agora também gostaria que um usuário pudesse clicar em um rótulo baseado em texto para pular para o ponto no vídeo em que a etiqueta é detectada.

16. Apêndice: Solucionar erros com funções em nuvem

Se o seu aplicativo da Web não estiver funcionando como esperado e você acha que pode ser devido a funções, siga as etapas nesta página de solução de problemas.

Permitir acesso público não autenticado

Se você receber algum erro relacionado à permissão no painel de console do Chrome Devtools, siga estas etapas:

1. Leia a visão geral da autenticação | Página de corrida em nuvem
2. Clique no link para visualizar e preencha as tarefas necessárias para permitir acesso público não autenticado à função.

3. Navegue de volta para o aplicativo revisado . Por exemplo: http: // localhost: 8080.
4. Clique em Adicionar algumas críticas simuladas e aguarde alguns segundos.
   • Se aparecerem críticas: você não precisa continuar com essas etapas de solução de problemas e pode pular direto para configurar a seção de aplicativos da web chatbot neste codelab.
   • Se as revisões não aparecerem: continue com esta seção de solução de problemas.

Lidar com erros de permissão insuficientes

1. No console do Firebase, navegue até funções .
2. Passe o mouse sobre a função addMockReviews e depois clique > Visualizar logs .

3. Percorra os logs até encontrar um erro

   Exception from a finished function: Error: 7 PERMISSION_DENIED: Missing or insufficient permissions.
   

   a um dos

   0001-compute@developer.gserviceaccount.com does not have storage.objects.get access to the Google Cloud Storage object. Permission 'storage.objects.get' denied on resource (or it may not exist).
   

   :
4. No Google Cloud Console, navegue até a página de permissões do IAM e selecione seu projeto.
5. Na tabela, encontre a coluna Nome .
   Na página IAM & Admin , há uma tabela de usuários e funções. A coluna de nome na tabela descreve para que serve o usuário ou diretor. Você pode ter um diretor com o nome da conta de serviço de computação padrão .

Se você vir a conta de serviço de computação padrão , siga estas etapas:

1. Clique Editar diretor .

2. Continue com as funções Adicionar na seção de conta de serviço de computação padrão neste código.

Se você não vir a conta de serviço de computação padrão , siga estas etapas:

1. Clique em Acesso à concessão .
2. Na nova caixa de texto dos novos diretores , digite compute .
3. No menu de auto -sugestões que aparecem, selecione a conta de serviço de computação padrão .

Adicionar funções à conta de serviço de computação padrão

Na seção Atribuir funções da conta de serviço de computação padrão :

1. Expanda o menu Selecionar uma função .
2. Na caixa de texto do filtro , insira Cloud Datastore User .
3. No menu de automóveis de automóveis que aparecem, selecione o usuário do Cloud DataStore .
4. Clique Adicione outro papel .
   1. Expanda o menu Selecionar uma função .
   2. Na caixa de texto do filtro , insira Cloud Storage for Firebase Admin .
   3. No menu de auto -sugestões que aparecem, selecione armazenamento em nuvem para administrador de Firebase .
5. Clique Adicione outro papel .
   1. Expanda o menu Selecionar uma função .
   2. Na caixa de texto do filtro , digite Cloud Storage for Firebase Service Agent .
   3. No menu de auto -sugestões que aparecem, selecione Armazenamento em nuvem para agente de serviço do Firebase .
6. Clique em Salvar .