더 많은
Flutter 앱에 Firebase Vertex AI를 사용하여 생성적 AI 통합하는 방법

11min
소개
생성적 AI는 오늘날의 앱에서 빠르게 일반적인 것이 되어가고 있습니다. 이는 개발자들이 스마트하고 상호작용적인 경험을 만들 수 있게 해줍니다. 텍스트 생성, 콘텐츠 분석 또는 미디어 생성이든 Firebase Vertex AI는 Flutter 앱 내에서 이러한 기능을 실현하기 위한 강력한 도구 세트를 제공합니다. 이 튜토리얼에서는 firebase_vertexai 패키지를 사용하여 Flutter 앱에 생성적 AI를 도입하는 방법을 안내합니다. 이 튜토리얼이 끝날 무렵에는 최소한 제미니의 API를 활용하여 모든 종류의 생성적 AI 작업을 수행할 수 있는 작동하는 애플리케이션을 갖게 될 것입니다.
전제 조건
이 튜토리얼을 완료하려면 다음이 필요합니다:
Firebase 계정과 Firebase 프로젝트가 설정되어 있어야 합니다. Firebase에서 무료로 가입할 수 있습니다.
로컬 머신에 Flutter 개발 환경이 설정되어 있어야 합니다. 아직 설정하지 않았다면 Flutter 설치 가이드를 따르세요.
Firebase와 Flutter에 대한 기본 지식이 필요합니다. Firebase가 처음이라면 Flutter용 Firebase 가이드를 확인하세요.
1단계 – Firebase 및 Vertex AI 설정
Firebase 프로젝트 생성하기: Firebase 콘솔, 새 프로젝트를 만들고 Vertex AI에 필요한 API를 활성화합니다.
Firebase 앱 체크 활성화하기: Firebase에서 프로젝트 설정으로 이동하여 Firebase 앱 체크를 활성화하여 모든 API 호출이 앱에서 오는지 확인합니다.
Firebase를 Flutter 앱에 추가하기: Flutter 앱을 Firebase 프로젝트에 연결하는 지침을 따릅니다. 일반적으로 Android의 경우 google-services.json 파일을 다운로드하거나 iOS의 경우 GoogleService-Info.plist 파일을 다운로드하여 Flutter 프로젝트의 올바른 디렉토리에 배치하는 작업이 포함됩니다.
2단계 – 필요한 종속성 추가
파일을 열고 pubspec.yaml 다음 종속성을 추가하세요:
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. flutter pub get를 실행하여 종속성을 설치하세요.
3단계 – Firebase 및 Vertex AI 초기화
lib/main.dart에서 필요한 Firebase 패키지를 가져옵니다:
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. main 함수에서 Firebase 및 Vertex AI를 초기화하세요:
Dart
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

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

  runApp(MyApp());
}
﻿
    3. 당신의 MyApp 위젯에서 생성 모델을 초기화하는 함수를 만드세요:
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;
  }
}
﻿
'YOUR_PROJECT_ID'를 'YOUR_PROJECT_ID', 'YOUR_LOCATION', 그리고 'YOUR_MODEL_NAME'으로 실제 프로젝트 세부정보로 교체하세요. generateContent 함수는 프롬프트를 구성하고, 이를 Vertex AI 모델에 전송하며, 생성된 콘텐츠를 반환합니다.
4단계 – 프롬프트 구성 및 응답 처리
사용자 정의 프롬프트 만들기: 다양한 유형의 데이터(텍스트, 이미지, 오디오 등)를 결합하여 더 복잡한 프롬프트를 만들 수 있습니다. 예를 들어:
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. 대용량 파일 처리: 프롬프트에 대용량 파일이 포함된 경우, 파일을 Firebase Storage에 저장하고 요청에 파일의 Cloud Storage URL을 포함하세요.
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. 스트리밍 응답: AI의 출력을 사용할 수 있을 때 스트리밍하려면 generateContentStream 메서드를 사용할 수 있습니다:
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);
}
﻿
5단계 – 앱 테스트 및 배포
 flutter run을 사용하여 앱을 실행하고 AI 생성 기능을 테스트하세요. 생성된 내용이 콘솔에 출력되는 것을 볼 수 있어야 합니다.
모든 것이 작동하는 것을 확인한 후, 앱을 배포하거나 추가 기능으로 계속 개선할 수 있습니다.
결론
이 튜토리얼에서는 Firebase Vertex AI 패키지를 사용하여 Flutter 앱에 생성 AI를 포함하는 방법을 배웠습니다. Gemini를 사용하여 텍스트 생성, 콘텐츠 데이터 분석 및 기타 많은 AI 기반 기능을 위한 훌륭한 인공지능 기능을 앱에 제공할 수 있습니다. Firebase Vertex AI의 유연성 덕분에 AI 응답을 마음대로 변경할 수 있어 지능적이고 상호작용적인 앱 개발에 적합합니다.

 pub.dev에서 Firebase Vertex AI, FlutterFire 및 기타 Flutter 패키지를 확인하세요. 즐거운 코딩 되세요!
업데이트됨 24 Jan 2025
이 페이지가 도움이 되었습니까?
Flutter에서 List.generate를 사용하여 데이터 처리하는 방법과 Back4app 활용하기
Flutter Completers를 Back4app의 백엔드와 함께 사용하는 방법