Firebase AI 로직을 사용한 하이브리드 AI 프롬프트

Thomas Steiner

게시일: 2025년 5월 20일

내장 Prompt API는 Chrome 138 안정화 버전부터 Windows, macOS, Linux의 Chrome 확장 프로그램에서 사용할 수 있습니다. 이 API는 곧 Chrome의 오리진 트라이얼에서 사용할 수 있습니다.

이 API는 다른 브라우저, ChromeOS 또는 모바일 운영체제(예: Android 또는 iOS)에서 지원되지 않습니다. 브라우저에서 이 API를 지원하더라도 충족되지 않은 하드웨어 요구사항으로 인해 실행할 수 없을 수 있습니다.

Firebase AI Logic을 사용하여 클라우드로 대체하는 기능을 설정하면 사용자가 사용하는 플랫폼이나 하드웨어와 관계없이 사용자의 요구사항을 충족할 수 있습니다.

하이브리드 AI 환경 빌드

기본 제공되는 AI에는 다음과 같은 다양한 이점이 있습니다.

  • 민감한 정보의 로컬 처리: 민감한 정보를 다루는 경우 엔드 투 엔드 암호화를 통해 사용자에게 AI 기능을 제공할 수 있습니다.
  • 오프라인 AI 사용: 사용자가 오프라인 상태이거나 연결이 끊긴 경우에도 AI 기능에 액세스할 수 있습니다.

이러한 이점은 클라우드 애플리케이션에는 적용되지 않지만, 내장 AI에 액세스할 수 없는 사용자에게 원활한 환경을 제공할 수 있습니다.

Firebase 시작하기

먼저 Firebase 프로젝트를 만들고 웹 앱을 등록합니다. Firebase 문서를 사용하여 Firebase JavaScript SDK 설정을 계속합니다.

SDK 설치

이 워크플로에서는 npm을 사용하고 모듈 번들러 또는 JavaScript 프레임워크 도구가 필요합니다. Firebase AI Logic은 사용하지 않는 코드 (트리 쉐이킹)를 제거하고 SDK 크기를 줄이기 위해 모듈 번들러와 연동되도록 최적화되었습니다.

npm install --save-exact firebase@eap-ai-hybridinference

하이브리드 기능은 다른 npm 태그로 출시되므로 설치 명령어에 포함해야 합니다.

태그는 패치 버전으로 구현되므로 --save-exact 플래그는 관련이 없을 수 있는 새 버전이 제공될 때 npm에 자동으로 업그레이드하지 말라고 지시합니다.

Firebase AI Logic 사용

Firebase가 설치되면 SDK를 초기화하여 Firebase 서비스를 시작합니다.

Firebase 앱 구성 및 초기화

Firebase 프로젝트에는 여러 Firebase 앱을 포함할 수 있습니다. Firebase 앱은 일반적인 구성을 저장하고 Firebase 서비스 간에 인증을 공유하는 컨테이너와 유사한 객체입니다.

Firebase 앱은 하이브리드 AI 기능의 클라우드 부분 역할을 합니다.

import { initializeApp } from 'firebase/app';
import { getAI, getGenerativeModel } from 'firebase/vertexai';

// TODO: Replace the following with your app's Firebase project configuration.
const firebaseConfig = {
  apiKey: '',
  authDomain: '',
  projectId: '',
  storageBucket: '',
  messagingSenderId: '',
  appId: '',
};

// Initialize `FirebaseApp`.
const firebaseApp = initializeApp(firebaseConfig);

모델 프롬프트

초기화되면 텍스트 또는 멀티모달 입력으로 모델에 프롬프트를 제공할 수 있습니다.

텍스트 프롬프트

모델에 대한 안내에는 일반 텍스트를 사용할 수 있습니다. 예를 들어 모델에게 농담을 들려 달라고 요청할 수 있습니다.

getGenerativeModel 함수에서 사용 가능한 경우 기본 제공 AI가 사용되도록 하려면 mode를 prefer_on_device로 설정합니다.

// Initialize the Google AI service.
const googleAI = getAI(firebaseApp);

// Create a `GenerativeModel` instance with a model that supports your use case.
const model = getGenerativeModel(googleAI, { mode: 'prefer_on_device' });

const prompt = 'Tell me a joke';

const result = await model.generateContentStream(prompt);

for await (const chunk of result.stream) {
  const chunkText = chunk.text();
  console.log(chunkText);
}
console.log('Complete response', await result.response);

멀티모달 프롬프트

텍스트 외에도 이미지나 오디오를 프롬프트로 사용할 수도 있습니다. 모델에 이미지의 콘텐츠를 설명하거나 오디오 파일의 스크립트를 작성하도록 지시할 수 있습니다.

이미지는 Firebase FileDataPart 객체로 base64 인코딩된 문자열로 전달되어야 하며, 이는 도우미 함수 fileToGenerativePart()를 사용하여 수행할 수 있습니다.

// Converts a File object to a `FileDataPart` object.
// https://firebase.google.com/docs/reference/js/vertexai.filedatapart
async function fileToGenerativePart(file) {
    const base64EncodedDataPromise = new Promise((resolve) => {
      const reader = new FileReader();
      reader.onload = () => resolve(reader.result.split(',')[1]);
      reader.readAsDataURL(file);
    });

    return {
      inlineData: { data: await base64EncodedDataPromise, mimeType: file.type },
    };
  }

  const fileInputEl = document.querySelector('input[type=file]');

  fileInputEl.addEventListener('change', async () => {
    const prompt = 'Describe the contents of this image.';

    const imagePart = await fileToGenerativePart(fileInputEl.files[0]);

    // To generate text output, call generateContent with the text and image
    const result = await model.generateContentStream([prompt, imagePart]);

    for await (const chunk of result.stream) {
      const chunkText = chunk.text();
      console.log(chunkText);
    }
    console.log(Complete response: ', await result.response);
  });

데모

다양한 기기와 브라우저에서 Firebase AI Logic 데모를 방문하세요. 내장된 AI 모델 또는 클라우드에서 모델 응답이 어떻게 오는지 확인할 수 있습니다.

Chrome에서 지원되는 하드웨어를 사용하는 경우 데모는 Prompt API와 Gemini Nano를 사용합니다. 기본 문서, JavaScript 파일, CSS 파일에 대한 요청은 3개뿐입니다.

내장된 AI API를 사용하여 Chrome에서 실행되는 Firebase AI 로직

AI 지원이 내장되지 않은 다른 브라우저나 운영체제에서는 Firebase 엔드포인트 https://firebasevertexai.googleapis.com에 대한 추가 요청이 발생합니다.

Firebase 서버에 요청을 보내는 Firebase AI 로직이 Safari에서 실행 중입니다.

참여 및 의견 공유

Firebase AI Logic은 AI 기능을 웹 앱에 통합하는 데 적합한 옵션입니다. Prompt API를 사용할 수 없는 경우 클라우드로 대체 경로를 제공함으로써 SDK는 AI 기능의 접근성과 안정성을 더욱 넓힙니다.

클라우드 애플리케이션은 개인 정보 보호 및 기능에 대한 새로운 기대감을 조성하므로 사용자에게 데이터가 처리되는 위치를 알리는 것이 중요합니다.