Fala Devs, blz?
No dia 14/02/2024 a Google anunciou oficialmente o Gemini(https://gemini.google.com/) e no dia 15/02/2024 a Google nos surpreendeu com o lançamento do Flutter 3.19.0 e com ele o Dart 3.3 essa versão veio com muitas novidades (https://medium.com/flutter/whats-new-in-flutter-3-19-58b1aae242d2) que iremos comentar em breve. Contudo, algo que nos fez brilhar os olhos foi o anúncio do Gemini google AI Dart SDK, ou seja, um SDK do Gemini nativamente para o Flutter/Dart, isso ressalta a importância que o Flutter está tendo para a Google, pois o Flutter/DART é a primeira ferramenta com um SDK Nativo.
E eu vendo isso já fui testar e trazer as novidade para vocês, pois com um package desenvolvido pela Google faz perder todo o sentido de usar um pacote terceiro para podermos integrar com o Gemini(https://pub.dev/packages/google_generative_ai).
Para começar ainda necessitaremos gerar nossa API Key em https://ai.google.dev/ como expliquei em detalhes no artigo anterior.
Agora em nosso projeto flutter necessitaremos adicionar o pacote no pubspec
flutter pub add google_generative_ai
Iremos abordar os dois modos disponíveis: somente texto e chat com contexto. Para configurar o Gemini precisamos instanciar o objeto GenerativeModel() passando a ApiKey (que estamos passando via dart-define-from-file) e o modelo de IA, iremos utilizar o gemini-pro.
late final GenerativeModel gemini; | |
@override | |
void initState() { | |
super.initState(); | |
gemini = GenerativeModel( | |
model: 'gemini-pro', | |
apiKey: const String.fromEnvironment('API_KEY'), | |
); | |
} |
Para gerarmos um diálogo com o Gemini precisamos gerar um Content.text(String) passando nossa pergunta e utilizando o método generateContent() do GeminiModel() iremos obter a resposta dada pela IA.
TextBox( | |
controller: txtController, | |
onSubmitted: (text) async { | |
setState(() { | |
question = text; | |
isLoading = true; | |
}); | |
final content = [Content.text(question)]; | |
final response = await gemini.generateContent(content); | |
setState(() { | |
answer = response.text ?? ''; | |
}); | |
}, | |
) | |
E a partir daí é só mostrar na tela a resposta gerada pelo Gemini, caso deseja fazer a animação de digitação igual ao artigo anterior podemos utilizar o AnimatedTextKit(https://pub.dev/packages/animated_text_kit) para isso.
Visibility( | |
visible: !isLoading, | |
child: Align( | |
alignment: Alignment.topLeft, | |
child: AnimatedTextKit( | |
key: ValueKey(answer), | |
displayFullTextOnTap: true, | |
isRepeatingAnimation: false, | |
animatedTexts: [ | |
TyperAnimatedText( | |
answer | |
), | |
], | |
), | |
), | |
) |
Também é possível criar um diálogo com contexto para a conversa, podendo pré-definir algum prompt, para isso precisamos além de configurar o GeminiModel() também necessitamos iniciar um chat com o método startChat()
late final GenerativeModel gemini; | |
late final ChatSession _chat; | |
@override | |
void initState() { | |
super.initState(); | |
gemini = GenerativeModel( | |
model: 'gemini-pro', | |
apiKey: const String.fromEnvironment('API_KEY'), | |
); | |
_chat = gemini.startChat(); | |
} |
Agora para enviar mensagens para o Gemini basta executarmos o método sendMessage() passando a mensagem.
var response = await _chat.sendMessage( | |
Content.text(message), | |
); | |
var text = response.text; | |
print(text); |
Agora para mostrarmos a conversa a tela podemos pegar o histórico do chat
ListView.builder( | |
itemCount: _chat.history.length, | |
controller: _controller, | |
itemBuilder: (_, index) { | |
final content = _chat.history.toList()[index]; | |
final isUser = content.role == 'user'; | |
var text = content.parts | |
.whereType<TextPart>() | |
.map<String>((e) => e.text) | |
.join(''); | |
return Container( | |
color: isUser ? Colors.green : Colors.blue, | |
child: ListTile( | |
leading: isUser ? null : const Icon(FluentIcons.robot), | |
trailing: | |
!isUser ? null : const Icon(FluentIcons.user_clapper), | |
title: SingleChildScrollView( | |
child: MarkdownBody( | |
data: text, | |
), | |
), | |
), | |
); | |
}, | |
) |
O history nos traz algumas informações importante com o remetente da mensagem no atributo role que será “user” caso tenha sido o usuário que enviou a mensagem ou “model” caso seja a IA que tenha enviado a mensagem.
Outro ponto importante é juntar todas as partes da resposta enviada pelo Gemini
E por fim podemos exibir a mensagem na tela do nosso aplicativo
E o resultado será esse
Infelizmente o modelo de análise de imagens ainda não esta disponivel.
Mas creio que em um futuro proxímo poderemos fazer algo do tipo
if (file != null) { | |
final imageBytes = await file!.readAsBytes(); | |
final content = Content.multi([ | |
TextPart(message), | |
DataPart('image/${file!.path.split('.').last}', | |
imageBytes), | |
]); | |
final response = await _chat.sendMessage(content); | |
print(response); | |
} |
Vale ressaltar que alguns recursos não estão disponíveis na versão gratuita e é possível consultar os planos em https://ai.google.dev/pricing?hl=pt-br.
Muito bacana essa novidade né? Todos sabemos que o Gemini é a grande novidade da Google e que eles vão investir e evoluir muito nele e que em menos de uma semana já desenvolveram um SDK para o Flutter só nos mostra a importância desta ferramenta que amamos para a Google e que ainda tem muitos anos de vida.
Podem conferir o exemplo que usei neste artigo em
https://github.com/toshiossada/gemini_flutter_example
Entre em nosso discord para interagir com a comunidade: flutterbrasil.com.br
Top comments (0)