Comment intégrer l'IA générative dans votre application Flutter en utilisant Firebase Vertex AI

11min
Introduction
L'IA générative devient rapidement une chose normale dans les applications d'aujourd'hui ; elle permet aux développeurs de créer des expériences intelligentes et interactives. Que ce soit la génération de texte, l'analyse de contenu ou la création de médias, Firebase Vertex AI offre un ensemble d'outils assez puissants pour réaliser ces fonctionnalités dans votre application Flutter. Nous vous guiderons à travers la façon d'intégrer l'IA générative dans votre application Flutter en utilisant le package firebase_vertexai dans ce tutoriel. À la fin de ce tutoriel, au minimum, vous aurez une application fonctionnelle qui peut accéder à l'API de Gemini pour effectuer toutes sortes de tâches d'IA générative.
Prérequis
Pour compléter ce tutoriel, vous aurez besoin de :
Un compte Firebase et un projet Firebase configurés. Vous pouvez vous inscrire gratuitement sur Firebase.
Un environnement de développement Flutter configuré sur votre machine locale. Suivez le guide d'installation de Flutter si vous ne l'avez pas encore configuré.
Des connaissances de base sur Firebase et Flutter. Si vous êtes nouveau sur Firebase, consultez le guide Firebase pour Flutter.
Étape 1 – Configuration de Firebase et Vertex AI
Créer un projet Firebase: Connectez-vous à la Console Firebase, créez un nouveau projet et activez les API nécessaires pour Vertex AI.
Activer Firebase App Check: Accédez aux paramètres de votre projet dans Firebase et activez Firebase App Check pour vous assurer que tous les appels API proviennent de votre application.
Ajouter Firebase à votre application Flutter: Suivez les instructions pour connecter votre application Flutter à votre projet Firebase. Cela implique généralement de télécharger le fichier google-services.json pour Android ou GoogleService-Info.plist pour iOS et de le placer dans le bon répertoire de votre projet Flutter.
Étape 2 – Ajout des dépendances requises
Ouvrez votre pubspec.yaml fichier et ajoutez les dépendances suivantes :
YAML
dependencies:
  flutter:
    sdk: flutter
  firebase_core: latest_version
  firebase_vertexai: latest_version
dependencies:
  flutter:
    sdk: flutter
  firebase_core: latest_version
  firebase_vertexai: latest_version
﻿
    2. Exécutez flutter pub get pour installer les dépendances.
Étape 3 – Initialisation de Firebase et Vertex AI
Dans lib/main.dart, importez les packages Firebase nécessaires :
Dart
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_vertexai/firebase_vertexai.dart';
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_vertexai/firebase_vertexai.dart';
﻿
    2. Initialisez Firebase et Vertex AI dans la main fonction :
Dart
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  runApp(MyApp());
}
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  runApp(MyApp());
}
﻿
    3. Dans votre MyApp widget, créez une fonction pour initialiser le modèle génératif :
Dart
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Generative AI with Firebase')),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              final result = await generateContent();
              print(result);
            },
            child: Text('Generate Content'),
          ),
        ),
      ),
    );
  }

  Future<String> generateContent() async {
    // Initialize the generative model
    final vertexAI = FirebaseVertexAI.instance;
    final generativeModel = vertexAI.getGenerativeModel(
      modelName: 'projects/YOUR_PROJECT_ID/locations/YOUR_LOCATION/models/YOUR_MODEL_NAME',
    );

    // Construct your prompt
    final prompt = VertexAITextPrompt(text: 'Write a story about a magic backpack');

    // Optionally, you can set generation configurations
    final generationConfig = VertexAIGenerationConfig(
      temperature: 0.7,
      responseMimeType: 'application/json',
    );

    // Generate content
    final response = await generativeModel.generateContent(
      prompt: prompt,
      generationConfig: generationConfig,
    );

    return response.generatedText;
  }
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Generative AI with Firebase')),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              final result = await generateContent();
              print(result);
            },
            child: Text('Generate Content'),
          ),
        ),
      ),
    );
  }

  Future<String> generateContent() async {
    // Initialize the generative model
    final vertexAI = FirebaseVertexAI.instance;
    final generativeModel = vertexAI.getGenerativeModel(
      modelName: 'projects/YOUR_PROJECT_ID/locations/YOUR_LOCATION/models/YOUR_MODEL_NAME',
    );

    // Construct your prompt
    final prompt = VertexAITextPrompt(text: 'Write a story about a magic backpack');

    // Optionally, you can set generation configurations
    final generationConfig = VertexAIGenerationConfig(
      temperature: 0.7,
      responseMimeType: 'application/json',
    );

    // Generate content
    final response = await generativeModel.generateContent(
      prompt: prompt,
      generationConfig: generationConfig,
    );

    return response.generatedText;
  }
}
﻿
Remplacez 'YOUR_PROJECT_ID', 'YOUR_LOCATION', et 'YOUR_MODEL_NAME' par les détails réels de votre projet. La generateContent fonction construit un prompt, l'envoie au modèle Vertex AI, et retourne le contenu généré.
Étape 4 – Construction de prompts et gestion des réponses
Création d'un prompt personnalisé: Vous pouvez créer des prompts plus complexes en combinant différents types de données (texte, images, audio, etc.). Par exemple :
Dart
final prompt = VertexAITextPrompt(
  text: 'Summarize the following text: "The history of AI is fascinating..."',
);
final prompt = VertexAITextPrompt(
  text: 'Summarize the following text: "The history of AI is fascinating..."',
);
﻿
    2. Gestion des fichiers volumineux: Si votre prompt implique des fichiers volumineux, stockez les fichiers dans Firebase Storage et incluez l'URL de Cloud Storage du fichier dans votre demande.
Dart
final prompt = VertexAITextPrompt(
  text: 'Analyze the content of this document',
  fileUrl: 'gs://your-bucket-name/your-file.pdf',
);
final prompt = VertexAITextPrompt(
  text: 'Analyze the content of this document',
  fileUrl: 'gs://your-bucket-name/your-file.pdf',
);
﻿
    3. Réponses en streaming: Si vous souhaitez diffuser la sortie de l'IA au fur et à mesure qu'elle devient disponible, vous pouvez utiliser le generateContentStream méthode:
Dart
await for (final partialResponse in generativeModel.generateContentStream(prompt: prompt)) {
  print(partialResponse.generatedText);
}
await for (final partialResponse in generativeModel.generateContentStream(prompt: prompt)) {
  print(partialResponse.generatedText);
}
﻿
Étape 5 – Tester et déployer l'application
Exécutez votre application en utilisant flutter run et testez les fonctionnalités de génération d'IA. Vous devriez voir le contenu généré imprimé dans la console.
Une fois que vous avez confirmé que tout fonctionne, vous pouvez déployer votre application ou continuer à l'améliorer avec des fonctionnalités supplémentaires.
Conclusion
Dans ce tutoriel, vous avez appris comment inclure l'IA générative dans votre application Flutter en utilisant le Firebase Vertex AI Package. Vous pouvez utiliser Gemini pour alimenter d'excellentes capacités d'intelligence artificielle dans une application pour la génération de texte, l'analyse des données de contenu, et de nombreuses autres fonctionnalités basées sur l'IA. En raison de la flexibilité de Firebase Vertex AI, vous pouvez modifier à volonté les réponses de l'IA, ce qui le rend parfait pour développer des applications intelligentes et interactives.

Voir pub.dev pour Firebase Vertex AI, FlutterFire, et d'autres packages Flutter. Bon codage !
Mis à jour 23 Jan 2025
Cette page vous a-t-elle aidée?
Comment utiliser la gestion des données dans Flutter en utilisant List.generate avec Back4app
Comment utiliser les Completers Flutter avec un backend sur Back4app