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

Thomas Steiner

게시일: 2025년 5월 20일

사용자가 사용하는 플랫폼이나 하드웨어에 관계없이 사용자의 요구사항을 충족하기 위해 Firebase AI Logic을 사용하여 내장된 Prompt API로 대체할 수 있습니다.

하이브리드 AI 환경 빌드

기본 제공 AI에는 여러 가지 이점이 있으며, 그중 가장 주목할 만한 이점은 다음과 같습니다.

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

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

Firebase 시작하기

  1. Firebase 프로젝트를 만들고 웹 애플리케이션을 등록합니다.
  2. Firebase JavaScript SDK 문서를 읽고 웹 애플리케이션 설정을 계속합니다.

Firebase 프로젝트는 Firebase 관련 구성 및 서비스가 포함된 Google Cloud 프로젝트를 만듭니다. Google Cloud 및 Firebase에 대해 자세히 알아보세요.

SDK 설치

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

npm install firebase

설치가 완료되면 애플리케이션에서 Firebase를 초기화합니다.

Firebase AI Logic 사용

Firebase를 설치하고 초기화한 후 Gemini Developer API 또는 Vertex AI Gemini API를 선택한 다음 인스턴스를 초기화하고 만듭니다.

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

텍스트 프롬프트

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

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 Logic

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

Safari에서 실행되는 Firebase AI Logic이 Firebase 서버에 요청을 전송합니다.

참여하고 의견 공유하기

Firebase AI Logic은 웹 앱에 AI 기능을 통합하는 데 유용한 옵션입니다. 프롬프트 API를 사용할 수 없을 때 클라우드로 대체 기능을 제공함으로써 SDK는 AI 기능의 접근성과 안정성을 높입니다.

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