Firebase Genkit를 사용하여 데이터 기반 생성형 AI 기능 빌드

1. 시작하기 전에

이 Codelab에서는 Firebase Genkit를 사용해 생성형 AI를 앱에 통합하는 방법을 알아봅니다. Firebase Genkit는 프로덕션에 즉시 사용 가능한 AI 기반 앱을 빌드, 배포, 모니터링하는 데 도움이 되는 오픈소스 프레임워크입니다.

Genkit는 앱 개발자를 위해 설계되었으며, 익숙한 패턴과 패러다임을 사용하여 강력한 AI 기능을 앱에 쉽게 통합할 수 있도록 지원합니다. Firebase팀에서 전 세계 수백만 명의 개발자가 사용하는 도구를 빌드한 경험을 바탕으로 제작했습니다.

기본 요건

• Firestore, Node.js, TypeScript에 익숙함

학습할 내용

• Firestore의 고급 벡터 유사성 검색 기능으로 더 스마트한 앱을 빌드하는 방법을 알아봅니다.
• Firebase Genkit을 사용하여 앱에 생성형 AI를 실제로 구현하는 방법
• 솔루션을 배포 및 통합할 준비를 합니다.

필요한 사항

• 원하는 브라우저(예: Chrome)
• 코드 편집기와 터미널이 있는 개발 환경
• Firebase 프로젝트 생성 및 관리에 사용하는 Google 계정

2. 사용 중인 웹 앱 및 클라우드 서비스 검토

이 섹션에서는 이 Codelab으로 빌드할 웹 앱을 검토하고 사용할 클라우드 서비스에 대해 알아봅니다.

웹 앱

이 Codelab에서는 휴가 계획 앱인 Compass 앱의 코드베이스를 사용합니다. 사용자는 목적지를 선택하고, 목적지에서 할 수 있는 활동을 살펴보고, 여행 일정을 만들 수 있습니다.

이 Codelab에서는 앱 홈페이지의 사용자 참여도를 개선하기 위한 두 가지 새로운 기능을 구현합니다. 두 기능 모두 생성형 AI를 기반으로 합니다.

• 현재 앱은 정적인 대상 목록을 표시합니다. 동적으로 변경합니다.
• 재방문율을 높이기 위해 자동으로 채워진 운항 일정을 구현합니다.

사용한 서비스

이 Codelab에서는 다양한 Firebase 및 Cloud 서비스와 기능을 사용하며 대부분의 시작 코드가 제공됩니다. 다음 표에는 사용할 서비스와 사용 이유가 나와 있습니다.

셋째, 개발 환경 설정

Node.js 버전 확인

1. 터미널에서 Node.js 버전 20.0.0 이상이 설치되어 있는지 확인합니다.

   node -v
   

2. Node.js 버전 20.0.0 이상이 설치되어 있지 않으면 최신 LTS 버전을 다운로드하여 설치합니다.

Codelab의 소스 코드 가져오기

GitHub 계정이 있는 경우:

1. github.com/FirebaseExtended/codelab-ai-genkit-rag의 템플릿을 사용하여 새 저장소를 만듭니다.
2. 방금 만든 Codelab GitHub 저장소의 로컬 클론을 만듭니다.

   git clone https://github.com/<your-github-handle>/codelab-ai-genkit-rag
   

git이 설치되어 있지 않거나 새 저장소를 만들지 않으려는 경우:

GitHub 저장소를 ZIP 파일로 다운로드합니다.

폴더 구조 검토

로컬 머신에서 클론된 저장소를 찾아 폴더 구조를 검토합니다.

루트 폴더에는 간소화된 안내를 사용하여 웹 앱을 실행하는 빠른 시작을 제공하는 README.md 파일이 포함되어 있습니다. 그러나 처음 학습하는 경우 빠른 시작이 아닌 이 Codelab을 완료해야 합니다. 이 Codelab에는 가장 포괄적인 안내가 포함되어 있기 때문입니다.

이 Codelab의 안내에 따라 코드를 올바르게 적용했는지 확실하지 않다면 end git 브랜치에서 솔루션 코드를 찾을 수 있습니다.

Firebase CLI 설치

1. Firebase CLI가 설치되어 있고 버전이 13.6 이상인지 확인합니다.

   firebase --version
   

2. Firebase CLI가 설치되어 있지만 버전 13.6 이상이 아닌 경우 다음과 같이 업데이트합니다.

   npm update -g firebase-tools
   

3. Firebase CLI가 설치되어 있지 않으면 설치합니다.

   npm install -g firebase-tools
   

권한 오류로 인해 Firebase CLI를 업데이트하거나 설치할 수 없는 경우 npm 문서를 참조하거나 다른 설치 옵션을 사용하세요.

Firebase에 로그인

1. 터미널에서 Firebase에 로그인합니다.

   firebase login
   

   터미널에 이미 Firebase에 로그인되어 있다고 표시되면 이 Codelab의 Firebase 프로젝트 설정 섹션으로 건너뛰어도 됩니다.
2. 터미널에서 Firebase의 데이터 수집 여부에 따라 Y 또는 N를 입력합니다. (이 Codelab에서는 두 옵션 중 어느 것이든 사용 가능)
3. 브라우저에서 Google 계정을 선택하고 허용을 클릭합니다.

Google Cloud의 gcloud CLI 설치

1. gcloud CLI를 설치합니다.
2. 터미널에서 Google Cloud에 로그인합니다.

   gcloud auth login
   

4. Firebase 프로젝트 설정

이 섹션에서는 Firebase 프로젝트를 설정하고 여기에서 Firebase 웹 앱을 등록합니다. 또한 이 Codelab의 뒷부분에서 샘플 웹 앱에서 사용하는 몇 가지 서비스도 사용 설정합니다.

이 섹션의 모든 단계는 Firebase Console에서 수행됩니다.

Firebase 프로젝트 만들기

1. 이전 단계에서 사용한 것과 동일한 Google 계정으로 Firebase Console에 로그인합니다.
2. 프로젝트 만들기를 클릭한 후 프로젝트 이름(예: Compass Codelab)을 입력합니다.
   Firebase 프로젝트에 자동으로 할당된 프로젝트 ID를 기억합니다(또는 수정 아이콘을 클릭하여 선호하는 프로젝트 ID 설정). 나중에 Firebase CLI에서 Firebase 프로젝트를 식별할 때 이 ID가 필요합니다. ID를 잊어버린 경우 나중에 언제든지 프로젝트 설정에서 확인할 수 있습니다.
3. 계속을 클릭합니다.
4. 메시지가 표시되면 Firebase 약관을 검토하고 이에 동의한 다음 계속을 클릭합니다.
5. 이 Codelab의 경우 Google 애널리틱스가 필요하지 않으므로 Google 애널리틱스 옵션을 사용 중지합니다.
6. 프로젝트 만들기를 클릭하고 프로젝트가 프로비저닝될 때까지 기다린 다음 계속을 클릭합니다.

Firebase 프로젝트에 웹 앱 추가

1. Firebase 프로젝트에서 Project Overview(프로젝트 개요) 화면으로 이동한 다음 Web(웹)을 클릭합니다.
2. 앱 닉네임 텍스트 상자에 My Compass Codelab App과 같이 기억하기 쉬운 앱 닉네임을 입력합니다. 이 Codelab의 마지막 단계에서는 호스팅 서비스를 설정하게 되므로 Firebase 호스팅 설정 체크박스를 선택하지 않은 상태로 두어도 됩니다.
   
3. 앱 등록 > 콘솔로 이동을 클릭합니다.

좋습니다. 이제 새 Firebase 프로젝트에 웹 앱을 등록했습니다.

Firebase 요금제 업그레이드

Firebase Genkit 및 Vertex AI(및 기본 클라우드 서비스)를 사용하려면 Firebase 프로젝트가 사용한 만큼만 지불(Blaze) 요금제를 사용해야 합니다. 즉, Cloud Billing 계정에 연결되어 있어야 합니다.

• Cloud Billing 계정에는 신용카드와 같은 결제 수단이 필요합니다.
• Firebase와 Google Cloud를 처음 사용하는 경우 $300 크레딧과 무료 체험판 Cloud Billing 계정을 받을 자격이 되는지 확인하세요.
• 이벤트의 일환으로 이 Codelab을 진행하는 경우 주최자에게 사용 가능한 Cloud 크레딧이 있는지 문의하세요.

Vertex AI 가격 책정 자세히 알아보기

프로젝트를 Blaze 요금제로 업그레이드하려면 다음 단계를 따르세요.

1. Firebase Console에서 요금제를 업그레이드하도록 선택합니다.
2. Blaze 요금제를 선택합니다. 화면에 표시된 안내에 따라 Cloud Billing 계정을 프로젝트에 연결합니다.
   이 업그레이드의 일환으로 Cloud Billing 계정을 만들어야 하는 경우 Firebase Console에서 업그레이드 과정으로 돌아가서 업그레이드를 완료해야 할 수도 있습니다.

Cloud Firestore 설정

1. Firebase Console의 왼쪽 패널에서 빌드를 펼친 다음 Firestore 데이터베이스를 선택합니다.
2. 데이터베이스 만들기를 클릭합니다.
3. 데이터베이스 ID는 (default)로 설정된 상태로 둡니다.
4. 데이터베이스의 위치를 선택하고 다음을 클릭합니다.
   실제 앱의 경우 사용자와 가까운 위치를 선택하려고 합니다.
5. 테스트 모드로 시작을 클릭합니다. 보안 규칙에 관한 면책 조항을 읽습니다.
   데이터베이스에 보안 규칙을 추가하지 않고 앱을 공개적으로 배포하거나 노출하지 마세요.
6. 만들기를 클릭합니다.

Vertex AI 사용 설정

gcloud CLI를 사용하여 Vertex AI를 설정합니다. 이 페이지의 모든 명령어에서 YOUR_PROJECT_ID를 Firebase 프로젝트의 ID로 바꿔야 합니다.

1. 터미널에서 Google Cloud SDK의 기본 프로젝트를 설정합니다.

   gcloud config set project YOUR_PROJECT_ID
   

2. '경고: 활성 프로젝트가 로컬 애플리케이션 기본 사용자 인증 정보 파일의 할당량 프로젝트와 일치하지 않습니다. 예상치 못한 할당량 문제가 발생할 수 있습니다.'라는 메시지가 표시되면 다음 명령어를 실행하여 할당량 프로젝트를 설정합니다.

   gcloud auth application-default set-quota-project YOUR_PROJECT_ID
   

3. 프로젝트에서 Vertex AI 서비스를 사용 설정합니다.

   gcloud services enable aiplatform.googleapis.com
   

5. 웹 앱 설정

웹 앱을 실행하려면 터미널에서 명령어를 실행하고 코드 편집기 내에 코드를 추가해야 합니다. 이 페이지의 모든 명령어에서 YOUR_PROJECT_ID를 Firebase 프로젝트의 ID로 바꾸어야 합니다.

프로젝트를 타겟팅하도록 Firebase CLI 구성

1. 터미널에서 Codelab 프로젝트의 루트 디렉터리로 이동합니다.
2. Firebase CLI가 Firebase 프로젝트에 대해 모든 명령어를 실행하도록 하려면 다음 명령어를 실행합니다.

   firebase use YOUR_PROJECT_ID
   

Firestore로 샘플 데이터 가져오기

빠르게 시작할 수 있도록 이 Codelab에서는 사전 생성된 Firestore용 샘플 데이터를 제공합니다.

1. 로컬 코드베이스가 일반적으로 서비스 계정을 사용하는 코드를 실행하도록 허용하려면 터미널에서 다음 명령어를 실행합니다.

   gcloud auth application-default login
   

   브라우저에 새 탭이 열립니다. 이전 단계에서 사용한 것과 동일한 Google 계정으로 로그인합니다.
2. 샘플 Firestore 데이터를 가져오려면 다음 명령어를 실행합니다.

   cd load-firestore-data
   npm ci
   node index.js YOUR_PROJECT_ID
   cd ..
   

3. Firebase Console에서 Firebase 프로젝트의 Firestore 섹션으로 이동하여 데이터가 데이터베이스에 추가되었는지 확인합니다. 가져온 데이터 스키마와 콘텐츠가 표시됩니다.

Firebase 프로젝트에 웹 앱 연결

데이터베이스와 같은 서비스를 활용하려면 웹 앱의 코드베이스를 올바른 Firebase 프로젝트에 연결해야 합니다. 이렇게 하려면 Firebase 구성을 앱의 코드베이스에 추가해야 합니다. 이 구성에는 프로젝트 ID, 앱의 API 키 및 앱 ID와 같은 필수 값과 앱이 Firebase와 상호작용할 수 있도록 하는 기타 값이 포함됩니다.

1. 앱의 Firebase 구성을 가져옵니다.
   1. Firebase Console에서 Firebase 프로젝트로 이동합니다.
   2. 왼쪽 패널에서 프로젝트 개요 옆에 있는 톱니바퀴 아이콘을 클릭하고 프로젝트 설정을 선택합니다.
   3. '내 앱' 카드에서 웹 앱을 선택합니다.
   4. 'SDK 설정 및 구성' 섹션에서 구성 옵션을 선택합니다.
   5. 코드 스니펫을 복사합니다. const firebaseConfig ...로 시작합니다.
2. Firebase 구성을 웹 앱의 코드베이스에 추가합니다.
   1. 코드 편집기에서 src/lib/genkit/genkit.config.ts 파일을 엽니다.
   2. 관련 섹션을 복사한 코드로 바꿉니다.
   3. 파일을 저장합니다.

브라우저에서 웹 앱 미리보기

1. 터미널에서 종속 항목을 설치한 후 웹 앱을 실행합니다.

   npm install
   npm run dev
   

2. 브라우저에서 로컬로 호스팅된 호스팅 URL로 이동하여 웹 앱을 확인합니다. 예를 들어 대부분의 경우 URL은 http://localhost:3000/ 또는 이와 유사합니다.

Compass는 React 서버 구성요소를 사용하는 Next.js 앱으로, 이것이 홈페이지입니다.

내 꿈의 여행 찾기를 클릭합니다. 현재 일부 고정된 대상에 대해 하드 코딩된 데이터가 표시됩니다.

언제든지 둘러보세요. 계속할 준비가 되면 오른쪽 상단의 홈 버튼을 클릭합니다.

6. Genkit으로 생성형 AI 살펴보기

이제 애플리케이션에서 생성형 AI의 강력한 기능을 활용할 준비가 되었습니다. 이 Codelab 섹션에서는 사용자가 제공한 아이디어를 기반으로 목적지를 추천하는 기능을 구현하는 방법을 안내합니다. 생성 모델의 제공업체로 Firebase Genkit 및 Google Cloud의 Vertex AI를 사용합니다 (Gemini를 사용할 예정).

Genkit는 트레이스 및 흐름 상태를 저장할 수 있으며 이를 통해 Genkit 흐름 실행 결과를 검사할 수 있습니다. 이 Codelab에서는 Firestore를 사용하여 이러한 trace를 저장합니다.

이 Codelab의 마지막 단계로 Genkit 앱을 Firebase App Hosting에 배포합니다.

Firebase 프로젝트에 Genkit 앱 연결

Genkit를 실행하려면 먼저 코드베이스를 올바른 Firebase 프로젝트에 연결해야 데이터베이스와 같은 서비스를 활용할 수 있습니다. 이를 위해서는 Genkit 앱의 코드베이스에 Firebase 구성을 추가해야 합니다. 이 구성에는 프로젝트 ID, 앱의 API 키, 앱 ID와 같은 필수 값은 물론 앱이 Firebase와 상호작용할 수 있도록 하는 기타 값이 포함됩니다.

1. 앱의 Firebase 구성을 가져옵니다.
   1. Firebase Console에서 Firebase 프로젝트로 이동합니다.
   2. 왼쪽 패널에서 Project Overview(프로젝트 개요) 옆에 있는 톱니바퀴 아이콘을 클릭하고 Project settings(프로젝트 설정)를 선택합니다.
   3. '내 앱' 카드에서 웹 앱을 선택합니다.
   4. 'SDK 설정 및 구성' 섹션에서 구성 옵션을 선택합니다.
   5. 코드 스니펫을 복사합니다. const firebaseConfig ...로 시작합니다.
2. 앱의 Firebase 구성을 Genkit 앱의 코드베이스에 추가합니다.
   1. 코드 편집기에서 genkit-functions/src/lib/genkit.config.ts 파일을 엽니다.
   2. 관련 섹션을 복사한 코드로 바꿉니다.
   3. 파일을 저장합니다.

Genkit 개발자 UI 실행

Genkit에는 LLM, Genkit 흐름, 검색기, 기타 AI 구성요소와 상호작용할 수 있는 웹 기반 UI가 함께 제공됩니다.

1. Genkit 개발자 UI를 실행합니다.
   1. 새 터미널 창을 엽니다.
   2. genkit-functions 디렉터리의 루트로 이동합니다.
   3. 다음 명령어를 실행하여 Genkit 개발자 UI를 시작합니다.

      cd genkit-functions
      npx genkit start
      

2. 브라우저에서 로컬로 호스팅된 Genkit URL로 이동합니다. 대부분의 경우 http://localhost:4000/입니다.

Gemini와 상호작용하기

이제 Genkit의 개발자 UI를 사용해 지원되는 모델 또는 기타 AI 구성요소(프롬프트, 검색기, Genkit 흐름 등)와 상호작용할 수 있습니다.

예를 들어 Gemini에게 휴일 휴가를 추천해 달라고 요청해 보세요. 시스템 안내를 사용하여 특정 니즈에 따라 모델의 동작을 조정하는 방법을 확인하세요. 이는 시스템 안내를 기본적으로 지원하지 않는 모델에도 적용됩니다.

메시지 관리

Firebase Genkit에는 생성형 AI 프롬프트의 생성 및 관리를 간소화하도록 설계된 플러그인 및 텍스트 형식인 Dotprompt가 도입되었습니다. Dotprompt의 핵심 아이디어는 프롬프트를 코드로 취급하여 애플리케이션 코드와 함께 작성, 유지 관리, 버전 제어할 수 있도록 하는 것입니다.

Dotprompt를 사용하려면 hello-world로 시작합니다.

1. 코드 편집기에서 genkit-functions/prompts/1-hello-world.prompt 파일을 엽니다.
2. Genkit 개발자 UI에서 dotprompt/1-hello-world을 엽니다.
3. 익숙한 언어 이름 또는 코드를 사용하거나 빈 문자열로 둡니다.
4. 실행을 클릭합니다.
5. 몇 가지 값을 시도해 보세요. 대규모 언어 모델은 이와 같은 간단한 검색어에서 약어, 맞춤법 오류, 불완전한 프롬프트를 잘 이해합니다.

구조화된 데이터로 출력 보강

Genkit를 사용하면 일반 텍스트를 생성하는 것 외에도 앱 UI 내에서 표현과 통합을 위해 출력을 구조화할 수 있습니다. 스키마를 정의하여 원하는 형식에 맞는 구조화된 데이터를 생성하도록 LLM에 지시할 수 있습니다.

출력 스키마 살펴보기

LLM 호출의 출력 스키마를 지정할 수도 있습니다.

1. 코드 편집기에서 프롬프트 파일을 살펴봅니다.
   1. dotprompt/2-simple-itinerary 파일을 엽니다.
   2. 정의된 입력 및 출력 스키마를 검사합니다.
2. UI와 상호작용:
   1. Genkit 개발자 UI에서 dotprompt/2-simple-itinerary 섹션으로 이동합니다.
   2. place 및 interests 필드를 샘플 데이터로 채워 입력합니다.

      {
          "interests": [
              "Museums"
          ],
          "place": "Paris"
      }
      

   3. 실행을 클릭합니다.

스키마 기반 출력 이해

생성된 출력이 정의된 스키마를 준수하는 방식을 확인합니다. 원하는 구조를 지정하여 LLM이 쉽게 파싱하여 애플리케이션에 통합되는 데이터를 생성하도록 했습니다. Genkit은 스키마를 기준으로 출력을 자동으로 검사하여 데이터 무결성을 보장합니다.

또한 출력이 스키마와 일치하지 않는 경우 다시 시도하거나 수리하도록 Genkit을 구성할 수 있습니다.

출력 스키마의 주요 이점

• 간소화된 통합: 구조화된 데이터를 앱의 UI 요소에 쉽게 통합할 수 있습니다.
• 데이터 검증: 생성된 출력의 정확성과 일관성을 보장합니다.
• 오류 처리: 스키마 불일치를 해결하는 메커니즘을 구현합니다.

출력 스키마를 활용하면 Genkit 환경이 개선되어 더욱 풍부하고 역동적인 사용자 환경을 위해 맞춤설정된 구조화된 데이터를 만들 수 있습니다.

멀티모달 입력 활용

사용자가 영감을 주는 이미지를 기반으로 앱에서 맞춤설정된 휴가지를 추천한다고 상상해 보세요. Genkit와 멀티모달 생성 모델을 결합하면 이러한 비전을 실현할 수 있습니다.

1. 코드 편집기에서 프롬프트 파일을 검토합니다.
   1. genkit-functions/prompts/imgDescription.prompt 파일을 엽니다.
   2. 이미지를 프롬프트에 쉽게 통합할 수 있는 Handlebars 문법 요소인 {{media url=this}}가 포함되어 있습니다.
2. UI와 상호작용:
   1. Genkit 개발자 UI에서 dotprompt/imgDescription 프롬프트를 엽니다.
   2. 이미지의 URL을 붙여넣어 imageUrls 필드에 이미지 URL을 입력합니다. 예를 들어 에펠탑이 나오는 위키백과의 썸네일 이미지를 사용할 수 있습니다.

      {
          "imageUrls": [
              "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg/556px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg"
          ]
      }
      

   3. 실행을 클릭합니다.

7. 벡터 유사성 검색으로 검색 구현

AI 모델로 창의적인 콘텐츠를 생성하는 것은 매우 효과적이지만, 실제로 적용하기 위해서는 특정 맥락에서 출력의 근거를 마련해야 하는 경우가 많습니다.

이 Codelab의 경우 사용자가 도착지(장소 및 활동) 데이터베이스를 보유하고 있으며 Gemini 모델에서 생성된 추천이 이 데이터베이스 내 항목만 참조하도록 하는 것이 목표입니다.

구조화되지 않은 쿼리와 관련 콘텐츠 간의 격차를 메우기 위해 생성된 임베딩에 대한 벡터 유사성 검색을 활용할 수 있습니다.

임베딩 및 벡터 유사성 이해하기

• 벡터: 벡터는 데이터 포인트를 수치화된 표현으로, 텍스트나 이미지와 같은 복잡한 정보를 모델링하는 데 자주 사용됩니다. 벡터의 각 차원은 데이터의 특정 특성에 해당합니다.
• 임베딩 모델: 이러한 특수 AI 모델은 텍스트와 같은 입력 데이터를 고차원 벡터로 변환합니다. 흥미로운 점은 유사한 입력이 이 고차원 공간에서 서로 가까운 벡터에 매핑된다는 것입니다.
• 벡터 유사성 검색: 이 기법은 임베딩 벡터의 근접성을 활용하여 관련 데이터 포인트를 식별합니다. 입력 쿼리를 기반으로 데이터베이스에서 의미론적 관련성을 나타내는 유사한 임베딩 벡터가 있는 항목을 찾습니다.

검색 프로세스 작동 방식 이해

1. 쿼리 임베딩: 사용자의 입력(예: '파리에서 로맨틱한 저녁 식사')이 임베딩 모델을 통해 전달되어 쿼리 벡터가 생성됩니다.
2. 데이터베이스 임베딩: 이상적으로는 대상 데이터베이스를 사전 처리하여 각 항목의 임베딩 벡터를 만드는 것이 좋습니다.
3. 유사성 계산: 쿼리 벡터는 유사성 측정항목 (예: 코사인 유사성)을 사용하여 데이터베이스의 각 임베딩 벡터와 비교됩니다.
4. 검색: 쿼리 벡터와의 근접성을 기반으로 데이터베이스에서 가장 유사한 항목이 관련 추천으로 검색됩니다.

이 검색 메커니즘을 애플리케이션에 통합하면 Gemini 모델을 활용하여 창의적일 뿐만 아니라 특정 데이터 세트에 확고하게 기반을 둔 추천을 생성할 수 있습니다. 이렇게 하면 생성된 출력이 데이터베이스에서 사용 가능한 정보와 일치하는 맥락적 관련성을 유지할 수 있습니다.

Firestore에서 벡터 유사성 검색 사용 설정

이 Codelab의 이전 단계에서는 샘플 장소와 활동으로 Firestore 데이터베이스를 채웠습니다. 각 장소 항목에는 주요 속성을 설명하는 knownFor 텍스트 필드와 이 설명의 벡터 표현을 포함하는 상응하는 embedding 필드가 포함됩니다.

이러한 임베딩에서 벡터 유사성 검색의 강력한 기능을 활용하려면 Firestore 색인을 만들어야 합니다. 이 색인을 사용하면 특정 쿼리에 대한 임베딩 벡터의 유사성을 기반으로 장소를 효율적으로 검색할 수 있습니다.

1. 터미널에서 다음 명령어를 실행하여 최신 알파 구성요소를 설치합니다. 버전 2024.05.03 이상이 필요합니다.

   gcloud components install alpha
   

2. 색인을 만들고 YOUR_PROJECT_ID를 프로젝트의 ID로 바꿔야 합니다.

   gcloud alpha firestore indexes composite create --project=YOUR_PROJECT_ID --collection-group=places --query-scope=COLLECTION --field-config=vector-config='{"dimension":"768","flat": "{}"}',field-path=embedding
   

3. Genkit 개발자 UI에서 placesRetriever를 엽니다.
4. 실행을 클릭합니다. 검색기 로직을 구현할 위치를 나타내는 자리표시자 텍스트가 있는 스캐폴드된 객체를 관찰합니다.
5. 코드 편집기에서 genkit-functions/src/lib/placesRetriever.ts 파일을 엽니다.
6. 맨 아래로 스크롤하여 자리표시자 placesRetriever를 다음으로 바꿉니다.

   export const placesRetriever = defineFirestoreRetriever({
     name: 'placesRetriever',
     firestore,
     collection: 'places',
     contentField: 'knownFor',
     vectorField: 'embedding',
     embedder: textEmbeddingGecko,
     distanceMeasure: 'COSINE',
   });
   

검색기 테스트

1. Genkit 개발자 UI에서 placesRetriever 검색 도구를 엽니다.
2. 다음 쿼리를 제공합니다.

   {
       "content": [
           {
               "text": "UNESCO"
           }
       ]
   }
   

3. 옵션을 제공할 수도 있습니다. 예를 들어 검색 도구가 반환해야 하는 문서 수를 지정하는 방법은 다음과 같습니다.

   {
       "limit": 4
   }
   

4. 실행을 클릭합니다.

옵션에 where 절을 추가하여 유사성 외에도 데이터를 추가로 필터링할 수 있습니다.

8. Genkit을 사용한 검색 증강 생성(RAG)

이전 섹션에서는 텍스트, JSON, 이미지를 처리하고 휴가지 및 사용자를 위한 기타 흥미로운 콘텐츠를 생성할 수 있는 개별 프롬프트를 빌드했습니다. Firestore 데이터베이스에서 관련 대상을 가져오는 메시지도 구현했습니다. 이제 이러한 구성요소를 응집력 있는 검색 증강 생성 (RAG) 흐름으로 조정할 차례입니다.

이 섹션에서는 흐름이라는 중요한 Genkit 개념을 소개합니다. 흐름은 강력하게 유형이 지정된 스트리밍 가능한 함수로, 완전한 관측 가능성을 갖고 로컬과 원격에서 모두 호출할 수 있습니다. Genkit의 CLI와 Genkit 개발자 UI 모두에서 흐름을 관리하고 호출할 수 있습니다.

1. 코드 편집기에서 여행 일정 프롬프트를 검토합니다.
   1. genkit-functions/prompts/itineraryGen.prompt 파일을 엽니다.
   2. 추가 입력, 특히 검색기에서 가져온 활동 데이터를 허용하도록 프롬프트가 확장된 방식을 확인하세요.
2. Genkit 개발자 UI에서 genkit-functions/src/lib/itineraryFlow.ts 파일의 Genkit 흐름을 확인합니다.
   도움말: 디버깅을 간소화하려면 긴 흐름을 더 작고 관리하기 쉬운 단계로 나누는 것이 좋습니다.
3. '이미지 설명' 단계를 통합하여 흐름을 개선합니다.
   1. TODO: 2 주석(70번 행 주변)을 찾습니다. 이 부분에서 흐름을 개선합니다.
   2. 빈 imgDescription 자리표시자를 imgDescription 프롬프트 호출로 생성된 출력으로 바꿉니다.
4. 흐름을 테스트합니다.
   1. itineraryFlow로 이동합니다.
   2. 다음 입력을 사용하여 새로 추가된 단계로 itineraryFlow의 성공적인 실행을 테스트합니다.

      {
          "request": "Sightseeing in Paris",
          "imageUrls": [
              "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg/556px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg"
          ]
      }
      

   3. 실행을 클릭합니다.
   4. 생성된 출력을 확인합니다. 이미지 설명이 여행 일정 추천에 통합되어야 합니다.
5. 오류나 예기치 않은 동작이 발생하면 검사 탭에서 세부정보를 확인하세요. 이 탭에서 Trace Store의 실행 기록을 검토할 수도 있습니다.

웹 애플리케이션용 RAG

1. 브라우저에서 http://localhost:3000/을 방문하여 웹 앱이 여전히 실행 중인지 확인합니다.
2. 웹 앱이 더 이상 실행되지 않는 경우 터미널에서 다음 명령어를 실행합니다.

   npm install
   npm run dev
   

3. Dream Your Vacation 웹 앱 페이지 (http://localhost:3000/gemini)를 확인합니다.
4. Next.js 통합 예시는 소스 코드 (src/app/gemini/page.tsx)를 확인하세요.

9. Firebase App Hosting으로 애플리케이션 배포

이 여정의 마지막 단계는 웹 앱을 배포하는 것입니다. 서버리스 백엔드에 Next.js 및 Angular 앱을 간단하게 배포할 수 있도록 설계된 프레임워크 인식 호스팅 솔루션인 Firebase App Hosting을 활용합니다.

1. 변경사항을 로컬 Git 저장소에 커밋한 다음 GitHub에 푸시합니다.
2. Firebase Console에서 Firebase 프로젝트 내의 앱 호스팅으로 이동합니다.
3. 시작하기 > GitHub에 연결을 클릭합니다.
4. GitHub 계정과 저장소를 선택합니다. 다음을 클릭합니다.
5. 배포 설정 > 루트 디렉터리에서 기본값을 유지합니다.
6. 라이브 브랜치의 경우 GitHub 저장소의 main 브랜치를 선택합니다. 다음을 클릭합니다.
7. 백엔드의 ID를 입력합니다 (예: compass).
8. Firebase 웹 앱을 만들거나 연결할지 묻는 메시지가 표시되면 기존 Firebase 웹 앱 선택을 선택하고 이 Codelab의 이전 단계에서 만든 앱을 선택합니다.
9. Finish and Deploy(완료 및 배포)를 클릭합니다.

배포 상태 모니터링

배포 프로세스는 몇 분 정도 걸립니다. Firebase Console의 앱 호스팅 섹션에서 진행 상황을 추적할 수 있습니다.

서비스 계정에 권한 부여

Node.js 백엔드에서 Vertex AI 리소스에 액세스하려면 앱의 서비스 계정에 aiplatform.user 역할을 할당해야 합니다.

gcloud projects add-iam-policy-binding YOUR_PROJECT_ID \
--member "serviceAccount:firebase-app-hosting-compute@YOUR_PROJECT_ID.iam.gserviceaccount.com" \
--role "roles/aiplatform.user"

완료되면 사용자가 웹 앱에 액세스할 수 있습니다.

자동 재배포

Firebase App Hosting을 사용하면 향후 업데이트를 간소화할 수 있습니다. GitHub 저장소의 기본 브랜치에 변경사항을 푸시할 때마다 Firebase App Hosting에서 앱을 자동으로 다시 빌드하고 재배포하므로 사용자가 항상 최신 버전을 사용할 수 있습니다.

10. 결론

축하합니다. 이 포괄적인 Codelab을 완료했습니다.

지금까지 Firebase Genkit, Firestore, Vertex AI의 강력한 기능을 활용하여 애플리케이션 데이터의 추천을 기반으로 사용자 선호도와 아이디어를 바탕으로 맞춤 휴가 추천을 생성하는 정교한 '흐름'을 만들었습니다.

이 과정에서 강력한 생성형 AI 애플리케이션을 빌드하는 데 중요한 필수 소프트웨어 엔지니어링 패턴을 직접 경험해 보았습니다. 이러한 패턴은 다음과 같습니다.

• 프롬프트 관리: 더 나은 공동작업 및 버전 제어를 위해 프롬프트를 코드로 구성하고 유지합니다.
• 멀티모달 콘텐츠: 이미지, 텍스트와 같은 다양한 데이터 유형을 통합하여 AI 상호작용을 개선합니다.
• 입력/출력 스키마: 애플리케이션에서 원활한 통합과 검증을 위해 데이터를 구조화합니다.
• 벡터 저장소: 효율적인 유사성 검색 및 관련 정보 검색을 위해 벡터 임베딩을 활용합니다.
• 데이터 검색: 데이터베이스에서 데이터를 가져와 AI 생성 콘텐츠에 통합하는 메커니즘을 구현합니다.
• 검색 증강 생성 (RAG): 검색 기법을 생성형 AI와 결합하여 문맥상 관련성이 높고 정확한 출력을 제공합니다.
• 흐름 계측: 원활하고 관찰 가능한 실행을 위해 복잡한 AI 워크플로를 빌드하고 조정합니다.

이러한 개념을 습득하고 Firebase 생태계에 적용한다면 나만의 생성형 AI 모험을 시작할 수 있는 충분한 능력을 갖출 수 있습니다. 무한한 가능성을 탐색하고 혁신적인 애플리케이션을 만들며 생성형 AI로 가능한 한계를 계속 넓혀 보세요.

대체 배포 옵션 살펴보기

Genkit은 다음과 같이 특정 요구사항에 맞는 다양한 배포 옵션을 제공합니다.

• Firebase용 Cloud Functions
• Cloud Run
• Next.js
• 모든 Node.js 환경
• Genkit은 Go도 지원합니다.

(package.json) 노드 폴더에서 다음 명령어를 실행하여 가장 적합한 것을 선택하면 됩니다.

npx genkit init

다음 단계

• Google AI Studio 또는 Vertex AI Studio에서 프롬프트를 실험하고 대형 컨텍스트 윈도우를 활용하세요.
• AI 검색 증강 생성(RAG) 검색에 대해 자세히 알아보세요.
• Firebase Genkit의 공식 문서를 확인하세요.
• Firestore의 유사 검색 기능 및 PostgreSQL용 Cloud SQL에 대해 자세히 알아보세요.
• 함수 호출을 통해 생성형 AI 흐름을 더 자세히 알아보세요.