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

#gemini #llm #ia #flutter

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 ?? '';
	});
	},
	)

view raw gemini-generate-content.dart hosted with ❤ by GitHub

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
	),
	],
	),
	),
	)

view raw animated-text.dart hosted with ❤ by GitHub

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();
	}

view raw gemini-chat.dart hosted with ❤ by GitHub

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);

view raw send-message.dart hosted with ❤ by GitHub

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,
	),
	),
	),
	);
	},
	)

view raw gemini-history.dart hosted with ❤ by GitHub

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