Di più
Come integrare l'IA generativa nella tua app Flutter utilizzando Firebase Vertex AI

11min
Introduzione
L'IA generativa sta rapidamente diventando una cosa normale nelle app di oggi; consente agli sviluppatori di creare esperienze intelligenti e interattive. Che si tratti di generazione di testo, analisi dei contenuti o creazione di media, Firebase Vertex AI offre un insieme di strumenti piuttosto potente per realizzare queste funzionalità all'interno della tua app Flutter. Ti guideremo su come portare l'IA generativa nella tua app Flutter utilizzando il pacchetto firebase_vertexai in questo tutorial. Alla fine di questo tutorial, almeno avrai un'applicazione funzionante che può accedere all'API di Gemini per svolgere ogni tipo di compito di IA generativa.
Requisiti
Per completare questo tutorial, avrai bisogno di:
Un account Firebase e un progetto Firebase configurato. Puoi registrarti gratuitamente su Firebase.
Un ambiente di sviluppo Flutter configurato sul tuo computer locale. Segui la guida all'installazione di Flutter se non l'hai ancora configurato.
Conoscenze di base di Firebase e Flutter. Se sei nuovo a Firebase, dai un'occhiata alla guida a Firebase per Flutter.
Passo 1 – Configurazione di Firebase e Vertex AI
Crea un progetto Firebase: Accedi al Console Firebase, crea un nuovo progetto e abilita le API necessarie per Vertex AI.
Abilita Firebase App Check: Naviga nelle impostazioni del tuo progetto in Firebase e abilita Firebase App Check per garantire che tutte le chiamate API provengano dalla tua app.
Aggiungi Firebase alla tua app Flutter: Segui le istruzioni per collegare la tua app Flutter al tuo progetto Firebase. Questo di solito comporta il download del google-services.json file per Android o GoogleService-Info.plist per iOS e posizionarlo nella directory corretta del tuo progetto Flutter.
Passo 2 – Aggiunta delle dipendenze richieste
Apri il tuo pubspec.yaml file e aggiungi le seguenti dipendenze:
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. Esegui flutter pub get per installare le dipendenze.
Passo 3 – Inizializzazione di Firebase e Vertex AI
In lib/main.dart, importa i pacchetti Firebase necessari:
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. Inizializza Firebase e Vertex AI nella main funzione:
Dart
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

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

  runApp(MyApp());
}
﻿
    3. Nel tuo MyApp widget, crea una funzione per inizializzare il modello generativo:
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;
  }
}
﻿
Sostituisci 'YOUR_PROJECT_ID', 'YOUR_LOCATION', e 'YOUR_MODEL_NAME' con i dettagli reali del tuo progetto. La generateContent funzione costruisce un prompt, lo invia al modello Vertex AI e restituisce il contenuto generato.
Passo 4 – Costruzione dei Prompt e Gestione delle Risposte
Creazione di un Prompt Personalizzato: Puoi creare prompt più complessi combinando diversi tipi di dati (testo, immagini, audio, ecc.). Ad esempio:
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. Gestione di File di Grandi Dimensioni: Se il tuo prompt coinvolge file di grandi dimensioni, memorizza i file in Firebase Storage e includi l'URL di Cloud Storage del file nella tua richiesta.
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. Risposte in Streaming: Se vuoi trasmettere l'output dell'IA man mano che diventa disponibile, puoi utilizzare il generateContentStream metodo:
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);
}
﻿
Passo 5 – Testare e Distribuire l'App
Esegui la tua app utilizzando flutter run e testa le funzionalità di generazione dell'IA. Dovresti vedere il contenuto generato stampato nella console.
Una volta confermato che tutto funziona, puoi distribuire la tua app o continuare a migliorarla con funzionalità aggiuntive.
Conclusione
In questo tutorial, hai imparato come includere l'IA Generativa nella tua App Flutter utilizzando il Firebase Vertex AI Package. Puoi utilizzare Gemini per alimentare eccellenti capacità di Intelligenza Artificiale in un'app per la generazione di testo, analisi dei dati di contenuto e molte altre funzionalità guidate dall'IA. Grazie alla flessibilità di Firebase Vertex AI, puoi modificare a piacimento le risposte dell'IA, rendendolo perfetto per sviluppare app intelligenti e interattive.

Vedi pub.dev per Firebase Vertex AI, FlutterFire e altri pacchetti Flutter. Buon coding!
Aggiornato 23 Jan 2025
Questa pagina ti è stata di aiuto?
Come utilizzare la gestione dei dati in Flutter usando List.generate con Back4app
AVANTI IL PROSSIMO
Come utilizzare i Completers di Flutter con un backend di Back4App