이 페이지는 Cloud Translation API를 통해 번역되었습니다.

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 서비스와 기능을 사용하며, 대부분의 시작 코드는 제공됩니다. 다음 표에는 사용할 서비스와 사용 이유가 나와 있습니다.

서비스	사용 이유
Firebase Genkit	Genkit를 사용해 Node.js / Next.js 애플리케이션에 생성형 AI를 도입하고 있습니다.
Cloud Firestore	Cloud Firestore에 데이터를 저장하면 벡터 유사성 검색에 사용됩니다.
Google Cloud의 Vertex AI	Vertex AI의 기본 모델(예: Gemini)을 사용하여 AI 기능을 지원합니다.
Firebase App Hosting	필요한 경우 새롭고 간소화된 Firebase App Hosting을 사용하여 동적 Next.js 웹 앱 (GitHub 저장소에 연결됨)을 제공할 수 있습니다.

셋째, 개발 환경 설정

Node.js 버전 확인

터미널에서 Node.js 버전 20.0.0 이상이 설치되어 있는지 확인합니다.
```
node -v
```
Node.js 버전 20.0.0 이상이 없으면 최신 LTS 버전을 다운로드하여 설치합니다.

Codelab의 소스 코드 가져오기

GitHub 계정이 있는 경우:

github.com/FirebaseExtended/codelab-ai-genkit-rag의 템플릿을 사용하여 새 저장소를 만듭니다.

방금 만든 Codelab의 GitHub 저장소의 로컬 클론을 만듭니다.

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

git이 설치되어 있지 않거나 새 저장소를 만들고 싶지 않은 경우:

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

폴더 구조 검토

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

폴더	설명
`genkit-functions`	백엔드 Genkit 코드
`load-firestore-data`	Firestore 컬렉션을 빠르게 자동 채우는 도우미 명령줄 도구
*기타	Next.js 웹 앱 코드

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

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

Firebase CLI 설치

Firebase CLI가 설치되어 있고 버전이 13.6 이상인지 확인합니다.
```
firebase --version
```
Firebase CLI가 설치되어 있지만 버전 13.6 이상이 아닌 경우 다음과 같이 업데이트합니다.
```
npm update -g firebase-tools
```
Firebase CLI가 설치되어 있지 않으면 설치합니다.
```
npm install -g firebase-tools
```

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

Firebase에 로그인

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

Google Cloud의 gcloud CLI 설치

gcloud CLI를 설치합니다.
터미널에서 Google Cloud에 로그인합니다.
```
gcloud auth login
```

4. Firebase 프로젝트 설정

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

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

Firebase 프로젝트 만들기

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

Firebase 프로젝트에 웹 앱 추가

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

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

Firebase 요금제 업그레이드

Firebase Genkit 및 Vertex AI(및 기본 클라우드 서비스)를 사용하려면 결제를 사용 설정하도록 Firebase 프로젝트를 업그레이드해야 합니다.

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

Firebase 프로젝트 내에서 Firebase 요금제로 이동합니다.
Firebase 요금제 대화상자에서 Blaze 요금제를 선택하고 구매합니다.

Cloud Firestore 사용 설정

Build > Firestore 데이터베이스를 설치합니다.
데이터베이스 만들기를 클릭합니다.
데이터베이스 ID는 (default)로 설정된 채로 둡니다.
원하는 Cloud Firestore 위치를 선택하거나 기본값으로 둡니다.
다음을 클릭합니다.
테스트 모드에서 시작을 선택합니다.
만들기를 클릭합니다.

Vertex AI 사용 설정

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

터미널에서 Google Cloud SDK의 기본 프로젝트를 설정합니다.
```
gcloud config set project YOUR_PROJECT_ID
```
'경고: 활성 프로젝트가 로컬 애플리케이션 기본 사용자 인증 정보 파일의 할당량 프로젝트와 일치하지 않습니다. 이로 인해 예기치 않은 할당량 문제가 발생할 수 있습니다.' 메시지가 표시되면 다음 명령어를 실행하여 할당량 프로젝트를 설정합니다.
```
gcloud auth application-default set-quota-project YOUR_PROJECT_ID
```
프로젝트에서 Vertex AI 서비스를 사용 설정합니다.
```
gcloud services enable aiplatform.googleapis.com
```

5. 웹 앱 설정

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

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

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

Firestore로 샘플 데이터 가져오기

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

로컬 코드베이스가 일반적으로 서비스 계정을 사용하는 코드를 실행하도록 허용하려면 터미널에서 다음 명령어를 실행합니다.
```
gcloud auth application-default login
```
드림 브라우저에 새 탭이 열립니다. 이전 단계에서 사용한 것과 동일한 Google 계정으로 로그인합니다.
샘플 Firestore 데이터를 가져오려면 다음 명령어를 실행합니다.
```
cd load-firestore-data
npm ci
node index.js YOUR_PROJECT_ID
cd ..
```
Firebase Console에서 Firebase 프로젝트의 Firestore 섹션으로 이동하여 데이터가 데이터베이스에 추가되었는지 확인합니다.가져온 데이터 스키마와 콘텐츠가 표시됩니다.

Firebase 프로젝트에 웹 앱 연결

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

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

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

터미널에서 종속 항목을 설치한 후 웹 앱을 실행합니다.
```
npm install
npm run dev
```
브라우저에서 로컬로 호스팅된 호스팅 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에 배포합니다.

Genkit 앱을 Firebase 프로젝트에 연결

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

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

Genkit 개발자 UI 실행

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

Genkit 개발자 UI를 실행합니다.
1. 새 터미널 창을 엽니다.
2. genkit-functions 디렉터리의 루트로 이동합니다.
3. 다음 명령어를 실행하여 Genkit 개발자 UI를 시작합니다.
```
cd genkit-functions
npx genkit start
```
브라우저에서 로컬로 호스팅된 Genkit URL로 이동합니다. 대부분의 경우 http://localhost:4000/입니다.

Gemini와 상호작용하기

이제 Genkit의 개발자 UI를 사용하여 지원되는 모델 또는 프롬프트, 검색기, Genkit 흐름과 같은 다른 AI 구성요소와 상호작용할 수 있습니다.

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

Genkit 개발자 UI에서 Gemini 모델과 상호작용

메시지 관리

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

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

코드 편집기에서 genkit-functions/prompts/1-hello-world.prompt 파일을 엽니다.
Genkit 개발자 UI에서 dotprompt/1-hello-world를 엽니다.
익숙한 언어 이름 또는 코드를 사용하거나 빈 문자열로 둡니다.
실행을 클릭합니다.
몇 가지 값을 시도해 보세요. 대규모 언어 모델은 이와 같은 간단한 쿼리에서 축약되었거나 철자가 틀렸거나 불완전한 프롬프트를 이해하는 데 효과적입니다.

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

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

출력 스키마 살펴보기

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

코드 편집기에서 프롬프트 파일을 살펴봅니다.
1. dotprompt/2-simple-itinerary 파일을 엽니다.
2. 정의된 입력 및 출력 스키마를 살펴봅니다.
UI와 상호작용:
1. Genkit 개발자 UI에서 dotprompt/2-simple-itinerary 섹션으로 이동합니다.
2. place 및 interests 필드에 샘플 데이터를 입력하여 입력을 제공합니다.
```
{
    "interests": [
        "Museums"
    ],
    "place": "Paris"
}
```
3. 실행을 클릭합니다.

Dotprompt를 사용하여 출력 스키마 지정

스키마 기반 출력 이해

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

또한 스키마와 일치하지 않으면 출력 복구를 다시 시도하거나 시도하도록 Genkit를 구성할 수 있습니다.

출력 스키마의 주요 이점

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

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

멀티모달 입력 활용

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

코드 편집기에서 프롬프트 파일을 검토합니다.
1. genkit-functions/prompts/imgDescription.prompt 파일을 엽니다.
2. 프롬프트에 이미지를 통합하는 데 도움이 되는 Handlebars 구문 요소인 {{media url=this}}가 포함되어 있습니다.
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 모델은 텍스트와 같은 입력 데이터를 고차원 벡터로 변환합니다. 흥미로운 점은 유사한 입력이 이 고차원 공간에서 서로 가까운 벡터에 매핑된다는 것입니다.
벡터 유사성 검색: 이 기법은 임베딩 벡터의 근접성을 활용하여 관련 데이터 포인트를 식별합니다. 입력 쿼리를 기반으로 데이터베이스에서 의미론적 관련성을 나타내는 유사한 임베딩 벡터가 있는 항목을 찾습니다.

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

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

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

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

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

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

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

색인을 만들고 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

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

맨 아래로 스크롤하여 자리표시자 placesRetriever를 다음으로 바꿉니다.

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

검색 도구 테스트

Genkit 개발자 UI에서 placesRetriever 검색 도구를 엽니다.

다음 검색어를 입력합니다.

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

옵션을 제공할 수도 있습니다. 예를 들어 검색기가 반환해야 하는 문서 수를 지정하는 방법은 다음과 같습니다.
```
{
    "limit": 4
}
```
실행을 클릭합니다.

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

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

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

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

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

흐름을 테스트합니다.

itineraryFlow으로 이동합니다.

다음 입력을 사용하여 새로 추가된 단계로 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"
    ]
}

실행을 클릭합니다.
생성된 출력 결과를 확인합니다. 이미지 설명이 숙박 시설 추천에 포함되어야 합니다.

오류나 예기치 않은 동작이 발생하면 검사 탭에서 세부정보를 확인하세요. 이 탭에서 Trace Store의 실행 기록을 검토할 수도 있습니다.

웹 애플리케이션을 위한 RAG

브라우저에서 http://localhost:3000/을 방문하여 웹 앱이 여전히 실행 중인지 확인합니다.
웹 앱이 더 이상 실행되지 않으면 터미널에서 다음 명령어를 실행합니다.
```
npm install
npm run dev
```
Dream Your Vacation 웹 앱 페이지 (http://localhost:3000/gemini)를 확인합니다.
Next.js 통합 예시는 소스 코드 (src/app/gemini/page.tsx)를 확인하세요.

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

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

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

배포 상태 모니터링

배포 프로세스는 몇 분 정도 걸립니다. 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 흐름을 더 자세히 알아보세요.