Crie haicais sobre os produtos do Google com a API PaLM e o Flutter.

1. Antes de começar

Uma das inovações mais interessantes em machine learning (ML) é a IA generativa, que pode produzir imagens, textos, áudios e até vídeos incríveis com base em textos simples (ou solicitações) dos usuários. Com o lançamento da API PaLM, o Google permite que os desenvolvedores criem categorias de apps com experiências agradáveis para o usuário, reimaginadas com a tecnologia PaLM.

Neste codelab, você vai criar um app que usa a API PaLM para gerar haicais com base nos nomes dos produtos do Google. Você também vai usar o Flutter para criar um app multiplataforma que mostra os haicais.

Pré-requisitos

  • Conhecimento básico de modelos de linguagem grande (LLMs), como solicitações
  • Conhecimento básico de desenvolvimento do Flutter com Dart

O que você vai aprender

  • Como usar a API PaLM do Google.
  • Como criar um app Flutter multiplataforma para mostrar os resultados.

O que é necessário

2. Começar a configuração

Fazer o download do código inicial

  1. Acesse este repositório do GitHub.
  2. Clique em Code > Download zip para fazer o download de todo o código para este codelab.
  3. Descompacte o arquivo ZIP salvo para acessar uma pasta raiz codelabs-main. Você só precisa do subdiretório haiku-generator, que contém as seguintes pastas:
  • As pastas de step0 a step4, que contêm o código inicial baseado em cada etapa deste codelab.
  • A pasta finished, que contém o código concluído do app de exemplo finalizado.

Fazer o download das dependências do projeto

  1. No VS Code, clique em File > Open folder > codelabs-main > haiku_generator > step0 > lib > main.dart.
  2. Se aparecer uma caixa de diálogo do VS Code solicitando o download dos pacotes necessários para o app inicial, clique em Get packages.

A caixa de diálogo do VS Code que pede o download dos pacotes necessários para o app inicial.

  1. Se a caixa de diálogo do VS Code não aparecer e você precisar fazer o download dos pacotes necessários para o app inicial, abra o terminal, navegue até a pasta step0 e execute o comando flutter pub get.

Executar o app inicial

  1. No VS Code, verifique se o Android Emulator ou simulador de iOS está configurado corretamente e aparece na barra de status.

Por exemplo, veja o que você verá ao usar o Pixel 5 com o Android Emulator:

A barra de status com o Pixel 5 selecionado como o dispositivo

Veja o que você verá ao usar o iPhone 13 com o iOS Simulator:

A barra de status com o iPhone 13 selecionado como o dispositivo

  1. Clique em a19a0c68bc4046e6.png Iniciar depuração. O app é iniciado no Android Emulator ou no simulador de iOS.

Testar o app inicial

O app inicial para iOS O app inicial para Android

No app inicial, observe o seguinte:

  • A IU é bem direta.
  • Há um menu suspenso para os usuários escolherem um produto específico do Google.
  • Depois que os usuários selecionam o botão Generate haiku!, o app Flutter envia a solicitação integrada para o endpoint da API PaLM, que gera haicai.
  • O app mostra os haicais gerados no widget de texto depois de receber uma resposta. No entanto, se você selecionar Generate haiku!, nada acontecerá porque o app ainda não consegue se comunicar com a API PaLM.

3. Configurar o acesso à API PaLM

Você precisa de uma chave para usar a API PaLM. No momento da publicação deste codelab, a API PaLM ainda está em visualização particular.

  • Para configurar seu acesso à API PaLM, siga a documentação que você recebeu para criar uma chave e anote-a para uso posterior neste codelab.

4. Adicionar um menu de produtos do Google

Sua meta é gerar haicais para os produtos do Google. No tempo de execução, o usuário do app pode escolher dinamicamente um produto de uma lista preenchida automaticamente com nomes de produtos.

Para adicionar uma lista de produtos do Google ao app, siga estas etapas:

  1. No VS Code, navegue até o arquivo step1/lib/data/repositories/product_repository_impl.dart.
  2. No corpo da função getAllProducts(), adicione a seguinte variável que armazena uma matriz de nomes de produtos do Google:

product_repository_impl .dart

var productData = [
  {'productName': 'Google Search'},
  {'productName': 'YouTube'},
  {'productName': 'Android'},
  {'productName': 'Google Maps'},
  {'productName': 'Gmail'}
];

5. Enviar a solicitação para a API PaLM e decodificar a resposta

O nome do produto escolhido pelo usuário é combinado com o seguinte modelo de comando:

Context: You are an awesome haiku writer.
Message content: Write a cool haiku about {product name}.

Para enviar essa solicitação ao endpoint da API PaLM e gerar um haicai, siga estas etapas:

  1. No VS Code, navegue até o arquivo step2/lib/data/repositories/poem_repository_impl.dart.
  2. No corpo da função getPoems(), adicione o seguinte código:

poem_repository_impl.dart

const haikuCount = 5;
// Replace the YOUR_API_KEY environment variable placeholder with your API key.
final apiKey = dotenv.env['YOUR_API_KEY']!;
final url = Uri.parse(      'https://generativelanguage.googleapis.com/v1beta1/models/chat-bison-001:generateMessage?key=$apiKey');
final headers = {'Content-Type': 'application/json'};
final body = jsonEncode({
 "prompt": {
   "context": "You are an awesome haiku writer.",
   "examples": [
     {
       "input": {"content": "Write a haiku about Google Photos."},
       "output": {
         "content":
             "Google Photos, my friend\nA journey of a lifetime\nCaptured in pixels"
       }
     }
   ],
   "messages": [
     {"content": "Write a cool haiku of about $productName"}
   ]
 },
 "candidate_count": haikuCount,
 "temperature": 1,
});

try {
 final response = await http.post(url, headers: headers, body: body);
 if (response.statusCode == 200) {
   final decodedResponse = json.decode(response.body);
   String haikus = 'Here are $haikuCount haikus about $productName:\n\n';
   for (var i = 0; i < haikuCount; i++) {
     haikus += '${i + 1}.\n';
     haikus += decodedResponse['candidates'][i]['content'] + '\n\n';
   }
   return haikus;
 } else {
   return 'Request failed with status: ${response.statusCode}.\n\n${response.body}';
 }
} catch (error) {
 throw Exception('Error sending POST request: $error');
}

Substitua a variável de ambiente YOUR_API_KEY pela chave de API anterior.

Depois que a resposta é recebida e decodificada, o widget de texto na interface do usuário renderiza os haicais gerados.

6. Executar o app em plataformas móveis

  1. No VS Code, defina o dispositivo de destino como Android ou iOS.
  2. Clique em a19a0c68bc4046e6.png Start debugging e aguarde o app carregar.
  3. Selecione um produto no menu suspenso e Generate haiku!. O app mostra um haicai sobre o produto selecionado.

O app final no iOS O app final no Android

7. Executar o app em plataformas para computador

Além do Android e iOS, o Flutter também oferece suporte a plataformas de computador, incluindo Linux, macOS e Windows.

Executar o app no Linux

  1. No VS Code, defina o dispositivo de destino como Linux (linux-x64).
  2. Clique em a19a0c68bc4046e6.png Start debugging e aguarde o app carregar.
  3. Escolha um produto no menu suspenso e Generate haiku!.

O app final no Linux

Executar o app no macOS

Para macOS, você precisa configurar os direitos apropriados porque o app envia solicitações HTTP para o back-end. Para mais informações, consulte Direitos e aplicativos sandbox.

Para executar o app no macOS, siga estas etapas:

  1. Nos arquivos step3/macOS/Runner/DebugProfile.entitlements e step3/macOS/Runner/Release.entitlements, adicione o seguinte código:

DebugProfile.entitlements | Release.entitlements

<key>com.apple.security.network.client</key>
<true/>
  1. No VS Code, defina o dispositivo de destino como macOS (darwin).
  2. Clique em a19a0c68bc4046e6.png Start debugging e aguarde o app carregar.
  3. Escolha um produto no menu suspenso e Generate haiku!.

O app final no macOS

Executar o app no Windows

  1. No VS Code, defina o dispositivo de destino como Windows (windows-x64).
  2. Clique em a19a0c68bc4046e6.png Start debugging e aguarde o app carregar.
  3. Escolha um produto no menu suspenso e Generate haiku!.

O app final no Windows

8. Executar o app na plataforma da Web

Você também pode adicionar suporte da Web ao app Flutter. Por padrão, a plataforma da Web é ativada automaticamente para apps do Flutter. Portanto, tudo o que você precisa fazer é iniciá-la.

Para executar o app na plataforma da Web, siga estas etapas:

  1. No VS Code, defina o dispositivo de destino como Chrome (web-javascript).
  2. Clique em a19a0c68bc4046e6.png Start debugging e aguarde o app carregar no Google Chrome.
  3. Escolha um produto no menu suspenso e Generate haiku!.

O app final na Web

9. Parabéns

Você criou um app de pilha completa que gera haicais sobre os produtos do Google. Embora o ele gere apenas haicais relacionados a produtos selecionados do Google, é possível mudar facilmente a solicitação e gerar o texto que você quiser. Agora que você sabe como usar a API PaLM, pode desenvolver apps incríveis com o poder dos LLMs.

Saiba mais