Mehr
Wie man generative KI in Ihre Flutter-App mit Firebase Vertex AI integriert

11min
Einführung
Generative KI wird schnell zu einer normalen Sache in den heutigen Apps; sie ermöglicht Entwicklern, intelligente und interaktive Erlebnisse zu schaffen. Sei es Textgenerierung, Inhaltsanalyse oder Medienerstellung, Firebase Vertex AI bietet ein ziemlich leistungsstarkes Set von Werkzeugen, um diese Funktionen in Ihrer Flutter-App zu realisieren. In diesem Tutorial zeigen wir Ihnen, wie Sie generative KI in Ihre Flutter-App integrieren, indem Sie das firebase_vertexai-Paket verwenden. Am Ende dieses Tutorials werden Sie mindestens eine funktionierende Anwendung haben, die auf die API von Gemini zugreifen kann, um alle Arten von generativen KI-Aufgaben durchzuführen.
Voraussetzungen
Um dieses Tutorial abzuschließen, benötigen Sie:
Ein Firebase-Konto und ein Firebase-Projekt eingerichtet. Sie können sich kostenlos anmelden unter Firebase.
Eine Flutter-Entwicklungsumgebung ist auf Ihrem lokalen Rechner eingerichtet. Folgen Sie der Flutter-Installationsanleitung , wenn Sie dies noch nicht eingerichtet haben.
Grundkenntnisse in Firebase und Flutter. Wenn Sie neu bei Firebase sind, schauen Sie sich die Firebase für Flutter-Anleitung an.
Schritt 1 – Firebase und Vertex AI einrichten
Ein Firebase-Projekt erstellen: Melden Sie sich bei der Firebase-Konsole, erstellen Sie ein neues Projekt und aktivieren Sie die erforderlichen APIs für Vertex AI.
Firebase App Check aktivieren: Navigieren Sie zu den Projekteinstellungen in Firebase und aktivieren Sie Firebase App Check, um sicherzustellen, dass alle API-Aufrufe von Ihrer App stammen.
Firebase zu Ihrer Flutter-App hinzufügen: Befolgen Sie die Anweisungen, um Ihre Flutter-App mit Ihrem Firebase-Projekt zu verbinden. Dies umfasst typischerweise das Herunterladen der google-services.json-Datei für Android oder GoogleService-Info.plist für iOS und das Platzieren in das richtige Verzeichnis Ihres Flutter-Projekts.
Schritt 2 – Erforderliche Abhängigkeiten hinzufügen
Öffnen Sie Ihre pubspec.yaml-Datei und fügen Sie die folgenden Abhängigkeiten hinzu:
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. Führen Sie flutter pub get aus, um die Abhängigkeiten zu installieren.
Schritt 3 – Firebase und Vertex AI initialisieren
In lib/main.dart, importieren Sie die erforderlichen Firebase-Pakete:
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. Initialisieren Sie Firebase und Vertex AI in der main-Funktion:
Dart
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

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

  runApp(MyApp());
}
﻿
    3. In deinem MyApp Widget, erstelle eine Funktion zur Initialisierung des generativen Modells:
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;
  }
}
﻿
Ersetze 'YOUR_PROJECT_ID', 'YOUR_LOCATION', und 'YOUR_MODEL_NAME' mit deinen tatsächlichen Projektdetails. Die generateContent Funktion konstruiert einen Prompt, sendet ihn an das Vertex AI-Modell und gibt den generierten Inhalt zurück.
Schritt 4 – Konstruktion von Prompts und Verarbeitung von Antworten
Erstellen eines benutzerdefinierten Prompts: Du kannst komplexere Prompts erstellen, indem du verschiedene Datentypen (Text, Bilder, Audio usw.) kombinierst. Zum Beispiel:
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. Verarbeitung großer Dateien: Wenn dein Prompt große Dateien umfasst, speichere die Dateien in Firebase Storage und füge die Cloud Storage-URL der Datei in deine Anfrage ein.
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. Streaming-Antworten: Wenn Sie die Ausgabe der KI streamen möchten, während sie verfügbar wird, können Sie die generateContentStream-Methode verwenden:
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);
}
﻿
Schritt 5 – Testen und Bereitstellen der App
Führen Sie Ihre App mit flutter run aus und testen Sie die KI-Generierungsfunktionen. Sie sollten den generierten Inhalt in der Konsole angezeigt bekommen.
Sobald Sie bestätigt haben, dass alles funktioniert, können Sie Ihre App bereitstellen oder sie mit zusätzlichen Funktionen weiter verbessern.
Fazit
In diesem Tutorial haben Sie gelernt, wie Sie Generative AI in Ihre Flutter-App integrieren können, indem Sie das Firebase Vertex AI-Paket. Sie können Gemini nutzen, um hervorragende KI-Funktionen in einer App für Textgenerierung, Analyse von Inhaltsdaten und viele weitere KI-gesteuerte Funktionen bereitzustellen. Aufgrund der Flexibilität von Firebase Vertex AI können Sie die KI-Antworten nach Belieben ändern, was es perfekt macht, um intelligente und interaktive Apps zu entwickeln.

Siehe pub.dev für Firebase Vertex AI, FlutterFire und andere Flutter-Pakete. Viel Spaß beim Programmieren!
Aktualisiert 23 Jan 2025
Hat Ihnen diese Seite geholfen?
Wie man Datenverarbeitung in Flutter mit List.generate und Back4app verwendet
ALS NÄCHSTES
Wie man Flutter Completers mit einem Backend auf Back4app verwendet