DEV Community

Toshi Ossada for flutterbrasil

Posted on

1

Oficial! Gemini Google AI Dart/Flutter SDK— Integrando Flutter com o GEMINI

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'),
);
}
view raw gemini_init hosted with ❤ by GitHub

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);
}
view raw iamge.dart hosted with ❤ by GitHub

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

Image description

Entre em nosso discord para interagir com a comunidade: flutterbrasil.com.br

Sentry mobile image

Is your mobile app slow? Improve performance with these key strategies.

Improve performance with key strategies like TTID/TTFD & app start analysis.

Read the blog post

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay