Skip to content

Integrating Google Gemini AI with Flutter: google_gemini.dart

  • by

Integrating Google Gemini AI with Flutter

Google Gemini is a set of cutting-edge large language models (LLMs) designed to be the driving force behind Google’s future AI initiatives. The google_gemini package provides a powerful bridge between your Flutter application and Google’s revolutionary Gemini AI. It empowers you to seamlessly integrate Gemini’s capabilities into your app, unlocking a world of possibilities for building innovative, intelligent, and engaging experiences that redefine user interaction.

Features

  • Get Started
  • Create Gemini Instance
  • Generate content
    • Generate text from text-only input
    • Generate text from text-and-image input
  • Build multi-turn conversations (chat)
  • Use streaming for faster interactions
  • Configure Gemini Responses
  • Utilize various Gemini Methods

Getting Started

To begin using the Google Gemini API, you need to create a Gemini account on ai.google.dev and obtain your API key. Once you have your Gemini API key, you can start building your Flutter application.

Create Gemini Instance

To create an instance of the Google Gemini model, use the following code:

final gemini = GoogleGemini(
  apiKey: "--- Your Gemini Api Key ---",
);

Generate Content

Gemini allows you to use both text and image data for prompting, depending on the model variation you use.

Text Only Input

This feature lets you perform natural language processing (NLP) tasks such as text completion and summarization.

gemini.generateFromText("Tell me a story")
.then((value) => print(value.text))
.catchError((e) => print(e));

Text and Image Input

You can send a text prompt with an image to the gemini-pro-vision model to perform a vision-related task. For example, captioning an image or identifying what’s in an image.

File image = File("assets/images.png");

gemini.generateFromTextAndImages(
  query: "What is this picture?",
  image: image,
)
.then((value) => print(value.text))
.catchError((e) => print(e));

Configuration

Every prompt you send to the model includes parameter values that control how the model generates a response. The model can generate different results for different parameter values.

Model Parameters

The most common model parameters are:

  • Max output tokens: Specifies the maximum number of tokens that can be generated in the response. A token is approximately four characters. 100 tokens correspond to roughly 60-80 words.
  • Temperature: Controls the degree of randomness in token selection. Lower temperatures are good for prompts that require a more deterministic response, while higher temperatures can lead to more diverse results.
  • topK: Changes how the model selects tokens for output.
  • topP: Changes how the model selects tokens for output.
  • stop_sequences: Sets a stop sequence to tell the model to stop generating content. Avoid using sequences that may appear in the generated content.
// Generation Configuration
final config = GenerationConfig(
  temperature: 0.5,
  maxOutputTokens: 100,
  topP: 1.0,
  topK: 40,
  stopSequences: [],
);

// Gemini Instance
final gemini = GoogleGemini(
  apiKey: "--- Your Gemini Api Key ---",
  config: config, // pass the config here
);

Safety Settings

Safety settings are part of the request you send to the text service. They can be adjusted for each request you make to the API.

Categories

These categories cover various kinds of harms that developers may wish to adjust.

  • HARM_CATEGORY_UNSPECIFIED
  • HARM_CATEGORY_DEROGATORY
  • HARM_CATEGORY_TOXICITY
  • HARM_CATEGORY_VIOLENCE
  • HARM_CATEGORY_SEXUAL
  • HARM_CATEGORY_MEDICAL
  • HARM_CATEGORY_DANGEROUS
  • HARM_CATEGORY_HARASSMENT
  • HARM_CATEGORY_HATE_SPEECH
  • HARM_CATEGORY_SEXUALLY_EXPLICIT
  • HARM_CATEGORY_DANGEROUS_CONTENT

Threshold

Block at and beyond a specified harm probability.

  • HARM_BLOCK_THRESHOLD_UNSPECIFIED
  • BLOCK_LOW_AND_ABOVE
  • BLOCK_MEDIUM_AND_ABOVE
  • BLOCK_ONLY_HIGH
  • BLOCK_NONE
// Safety Settings
final safety1 = SafetySettings(
  category: SafetyCategory.HARM_CATEGORY_DANGEROUS_CONTENT,
  threshold: SafetyThreshold.BLOCK_ONLY_HIGH,
);

// Gemini Instance
final gemini = GoogleGemini(
  apiKey:"--- Your Gemini Api Key ---",
  safetySettings: [
    safety1,
    // safety2
  ],
);

Build Multi-Turn Conversations

Multi-turn conversations allow for more interactive and engaging user interactions. This feature is currently in progress.

Use Streaming for Faster Interactions

Streaming can be used for faster interactions with the model. This feature is also currently in progress.

Gemini Response

The structure and handling of responses from the Gemini model are still in progress.

Gemini Methods

Additional methods for interacting with the Gemini model are also in progress.

Mini Project: Building a Chatbot with Google Gemini

Project Overview

In this mini-project, we’ll create a simple chatbot using the Google Gemini API. The chatbot will handle both text-only and text-and-image prompts.

Prerequisites

  1. A Flutter development environment set up on your machine.
  2. A Gemini API key from ai.google.dev.
  3. Basic knowledge of Dart and Flutter.

Step 1: Set Up Your Flutter Project

Create a new Flutter project and add the necessary dependencies in your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  google_gemini: ^1.0.0
  image_picker: ^0.8.4+2

Step 2: Create the Gemini Instance

In your main Dart file, create an instance of the Gemini model using your API key:

import 'package:flutter/material.dart';
import 'package:google_gemini/google_gemini.dart';
import 'dart:io';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ChatScreen(),
    );
  }
}

class ChatScreen extends StatefulWidget {
  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  final TextEditingController _controller = TextEditingController();
  final GoogleGemini gemini = GoogleGemini(apiKey: "--- Your Gemini Api Key ---");

  void _sendMessage(String message) async {
    try {
      final response = await gemini.generateFromText(message);
      print(response.text);
    } catch (e) {
      print(e);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Gemini Chatbot"),
      ),
      body: Column(
        children: [
          Expanded(
            child: Container(),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: InputDecoration(
                      hintText: "Enter your message",
                    ),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.send),
                  onPressed: () {
                    _sendMessage(_controller.text);
                    _controller.clear();
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Step 3: Add Image Handling

Add functionality to handle image inputs using the image_picker package:

import 'package:image_picker/image_picker.dart';

class _ChatScreenState extends State<ChatScreen> {
  final ImagePicker _picker = ImagePicker();

  void _sendImageMessage() async {
    final XFile? image = await _picker.pickImage(source: ImageSource.gallery);
    if (image != null) {
      File imageFile = File(image.path);
      try {
        final response = await gemini.generateFromTextAndImages(
          query: "What is this picture?",
          image: imageFile,
        );
        print(response.text);
      } catch (e) {
        print(e);
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Gemini Chatbot"),
      ),
      body: Column(
        children: [
          Expanded(
            child: Container(),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                IconButton(
                  icon: Icon(Icons.image),
                  onPressed: _sendImageMessage,
                ),
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: InputDecoration(
                      hintText: "Enter your message",
                    ),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.send),
                  onPressed: () {
                    _sendMessage(_controller.text);
                    _controller.clear();
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Conclusion

In this post, we’ve explored how to integrate the Google Gemini API into a Flutter application. We’ve seen how to create a Gemini instance, generate content from text and images, and configure safety settings. Additionally, we’ve built a mini-project, a simple chatbot, to demonstrate the practical application of the Google Gemini API.

For more information on using the Google Gemini API, visit the

pub.dev package page and the official documentation.

For more detailed guides on Flutter libraries, check out our other posts:

Stay tuned for more tutorials and projects to help you master Flutter development!

Leave a Reply

Your email address will not be published. Required fields are marked *