Cara Mengintegrasikan AI Generatif di Aplikasi Flutter Anda Menggunakan Firebase Vertex AI

11min
Pendahuluan
AI generatif dengan cepat menjadi hal yang biasa dalam aplikasi saat ini; ini memungkinkan pengembang untuk menciptakan pengalaman yang cerdas dan interaktif. Baik itu generasi teks, analisis konten, atau pembuatan media, Firebase Vertex AI menawarkan seperangkat alat yang cukup kuat untuk mewujudkan fungsionalitas ini dalam aplikasi Flutter Anda. Kami akan memandu Anda tentang cara membawa AI generatif ke dalam aplikasi Flutter Anda menggunakan paket firebase_vertexai dalam tutorial ini. Pada akhir tutorial ini, setidaknya, Anda akan memiliki aplikasi yang berfungsi yang dapat memanfaatkan API Gemini untuk melakukan berbagai tugas AI generatif.
Prasyarat
Untuk menyelesaikan tutorial ini, Anda akan membutuhkan:
Akun Firebase dan proyek Firebase yang sudah disiapkan. Anda dapat mendaftar secara gratis di Firebase.
Lingkungan pengembangan Flutter yang sudah disiapkan di mesin lokal Anda. Ikuti panduan instalasi Flutter jika Anda belum menyiapkannya.
Pengetahuan dasar tentang Firebase dan Flutter. Jika Anda baru mengenal Firebase, lihat panduan Firebase untuk Flutter.
Langkah 1 – Menyiapkan Firebase dan Vertex AI
Buat Proyek Firebase: Masuk ke Firebase Console, buat proyek baru, dan aktifkan API yang diperlukan untuk Vertex AI.
Aktifkan Firebase App Check: Arahkan ke pengaturan proyek Anda di Firebase, dan aktifkan Firebase App Check untuk memastikan bahwa semua panggilan API berasal dari aplikasi Anda.
Tambahkan Firebase ke Aplikasi Flutter Anda: Ikuti instruksi untuk menghubungkan aplikasi Flutter Anda ke proyek Firebase Anda. Ini biasanya melibatkan mengunduh file google-services.json untuk Android atau GoogleService-Info.plist untuk iOS dan menempatkannya di direktori yang benar dari proyek Flutter Anda.
Langkah 2 – Menambahkan Ketergantungan yang Diperlukan
Buka pubspec.yaml file Anda dan tambahkan dependensi berikut:
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. Jalankan flutter pub get untuk menginstal dependensi.
Langkah 3 – Menginisialisasi Firebase dan Vertex AI
Di lib/main.dart, impor paket Firebase yang diperlukan:
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. Inisialisasi Firebase dan Vertex AI di main fungsi:
Dart
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

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

  runApp(MyApp());
}
﻿
    3. Di dalam MyApp widget Anda, buat fungsi untuk menginisialisasi model generatif:
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;
  }
}
﻿
Ganti 'YOUR_PROJECT_ID', 'YOUR_LOCATION', dan 'YOUR_MODEL_NAME' dengan detail proyek Anda yang sebenarnya. Fungsi generateContent membangun prompt, mengirimkannya ke model Vertex AI, dan mengembalikan konten yang dihasilkan.
Langkah 4 – Membangun Prompt dan Menangani Respons
Membuat Prompt Kustom: Anda dapat membuat prompt yang lebih kompleks dengan menggabungkan berbagai jenis data (teks, gambar, audio, dll.). Misalnya:
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. Menangani File Besar: Jika prompt Anda melibatkan file besar, simpan file tersebut di Firebase Storage dan sertakan URL Cloud Storage file dalam permintaan Anda.
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 Responses: Jika Anda ingin mengalirkan keluaran AI saat tersedia, Anda dapat menggunakan generateContentStream metode:
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);
}
﻿
Langkah 5 – Menguji dan Menerapkan Aplikasi
Jalankan aplikasi Anda menggunakan flutter run dan uji fitur generasi AI. Anda seharusnya melihat konten yang dihasilkan dicetak di konsol.
Setelah Anda mengonfirmasi bahwa semuanya berfungsi, Anda dapat menerapkan aplikasi Anda atau melanjutkan untuk meningkatkan dengan fitur tambahan.
Kesimpulan
Dalam tutorial ini, Anda belajar bagaimana cara menyertakan AI Generatif dalam Aplikasi Flutter Anda menggunakan Firebase Vertex AI Package. Anda dapat menggunakan Gemini untuk memberikan kemampuan Kecerdasan Buatan yang luar biasa dalam aplikasi untuk generasi teks, analisis data konten, dan banyak fitur berbasis AI lainnya. Karena fleksibilitas Firebase Vertex AI, Anda dapat mengubah respons AI sesuai keinginan, menjadikannya sempurna untuk mengembangkan aplikasi yang cerdas dan interaktif.

Lihat pub.dev untuk Firebase Vertex AI, FlutterFire, dan paket Flutter lainnya. Selamat coding!
Diperbarui 24 Jan 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Cara menggunakan Pengolahan Data di Flutter Menggunakan List.generate dengan Back4app
BERIKUTNYA
Cara Menggunakan Completers Flutter dengan Backend di Back4app