05 Vertex AI와 Flutter를 활용하여 생성형 AI 에이전트 빌드하기

과정 · 3시간 15분

< 1%

완료

700개 이상의 실습 및 과정 이용하기

AI 애플리케이션을 사용하여 Flutter 앱에 AI 에이전트 통합하기

실습 2시간 universal_currency_alt 크레딧 5개 show_chart 입문

info 이 실습에는 학습을 지원하는 AI 도구가 통합되어 있을 수 있습니다.

개요
목표
설정
작업 1. 검색 데이터 스토어 및 검색 앱 만들기
작업 2. 백엔드 빌드 및 배포하기
작업 3. Firebase 구성하기
작업 4. Reasoning Engine AI 에이전트 만들기
작업 5. 백엔드 앱 개선하기
작업 6. Gemini 2.0 Flash 시험 사용하기
작업 7. Flutter 프런트엔드 앱 배포하기
작업 8. Flutter 앱 테스트하기
실습 종료
수고하셨습니다

700개 이상의 실습 및 과정 이용하기

개요

이 실습에서는 AI 에이전트를 Flutter 앱에 통합합니다. Flutter는 클라이언트 앱 프레임워크로 사용되고, Vertex AI Search는 벡터 DB로 사용되며, Reasoning Engine은 Vertex AI에서 LangChain을 사용해 에이전트를 빌드하고 배포하는 데 사용됩니다. 이 에이전트는 고성능 대규모 언어 모델(LLM) 제품군인 Gemini를 사용하여 텍스트 및 이미지 프롬프트에 대한 AI 대답을 생성합니다.

실습에는 code-server를 사용하여 VSCode가 IDE로 사전 프로비저닝되어 있으며 Flutter 앱을 실행하는 데 필요한 Flutter 및 Dart 확장 프로그램이 함께 제공됩니다. 또한 실습에는 브라우저를 사용하여 액세스하는 웹 애플리케이션으로 Flutter 앱을 제공하는 데 사용하는 도구인 fwr도 포함됩니다.

이 실습은 앱 빌드에 참여한 경험은 있으나 클라우드 애플리케이션 개발이 익숙하지 않은 다양한 수준의 개발자를 대상으로 합니다. Python에 대한 경험이 있고 Flutter 프레임워크에 익숙하면 도움이 됩니다. 이 실습의 작업을 수행하기 위해 Flutter를 알아야 할 필요는 없지만, Flutter 앱 코드의 일부를 검토하고 앱의 기능을 테스트하게 됩니다.

목표

이번 실습에서는 다음 작업을 수행합니다.

Google Cloud 콘솔에서 AI 애플리케이션을 사용하여 검색 데이터 스토어 및 검색 앱 만들기
Vertex AI Workbench를 사용하여 Reasoning Engine 에이전트 배포하기
Vertex AI Search 및 Reasoning Engine 에이전트와 통합되는 Python 앱 사용하기
앱을 Cloud Run에 배포하고 Flutter 앱의 백엔드로 사용하기
Firebase 프로젝트를 설정하고 Flutter 앱에 연결하기

다음은 이 실습에서 사용되는 여러 구성요소의 개요입니다.

설정

각 실습에서는 정해진 기간 동안 새 Google Cloud 프로젝트와 리소스 집합이 무료로 제공됩니다.

시크릿 창을 사용하여 Qwiklabs에 로그인합니다.
실습 사용 가능 시간(예: 1:15:00)을 참고하여 해당 시간 내에 완료합니다.
일시중지 기능은 없습니다. 필요한 경우 다시 시작할 수 있지만 처음부터 시작해야 합니다.
준비가 되면 실습 시작을 클릭합니다.
실습 사용자 인증 정보(사용자 이름 및 비밀번호)를 기록해 두세요. Google Cloud Console에 로그인합니다.
Google Console 열기를 클릭합니다.
다른 계정 사용을 클릭한 다음, 안내 메시지에 이 실습에 대한 사용자 인증 정보를 복사하여 붙여넣습니다.
다른 사용자 인증 정보를 사용하는 경우 오류가 발생하거나 요금이 부과됩니다.
약관에 동의하고 리소스 복구 페이지를 건너뜁니다.

작업 1. 검색 데이터 스토어 및 검색 앱 만들기

이 작업에서는 Google Cloud 콘솔에서 AI 애플리케이션을 사용하여 검색 데이터 스토어와 검색 앱을 만들어 Flutter 앱의 검색 기능을 구현합니다.

검색 데이터 스토어 만들기

Cloud 콘솔에서 모든 제품 보기를 클릭합니다. 모든 제품 페이지에서 인공지능 섹션으로 스크롤한 다음 AI 애플리케이션을 클릭합니다.
계속 및 API 활성화를 클릭합니다.
왼쪽 창에서 데이터 스토어를 클릭하고 데이터 스토어 페이지에서 데이터 스토어 만들기를 클릭합니다.

이 페이지에서 검색 결과에 사용할 데이터 소스를 구성합니다. 실습에는 Google Merchandise Store의 상품 데이터가 있는 .csv 파일이 포함된 Cloud Storage 버킷이 사전 프로비저닝되어 있습니다.
데이터 소스로 Cloud Storage를 선택하기 위해 Cloud Storage에서 선택을 클릭합니다.
가져오는 데이터의 종류로 채팅 애플리케이션의 정형 FAQ 데이터(CSV)를 선택합니다.
가져올 폴더 또는 파일을 선택하기 위해 파일을 클릭합니다.
CSV 파일에 Cloud Storage URL을 제공하기 위해 탐색을 클릭합니다.
Cloud Storage 버킷()의 콘텐츠를 보기 위해 아이콘을 클릭합니다.
goog_merch.csv 파일을 선택한 다음 선택을 클릭합니다.

폴더의 gs:// URI가 채워집니다.
계속을 클릭합니다.
데이터 스토어 이름에 goog-merch-ds를 입력합니다.
만들기를 클릭합니다.

데이터 스토어가 생성되고 CSV 파일에서 데이터 수집이 시작됩니다.
데이터 스토어 페이지에서 새로 만든 데이터 스토어의 이름을 클릭합니다.
문서 탭에 가져온 문서의 목록이 표시됩니다. 문서와 연결된 데이터를 보기 위해 문서 보기를 클릭합니다.

목표를 확인하려면 내 진행 상황 확인하기를 클릭합니다. Vertex AI Search 데이터 스토어 만들기

검색 앱 만들기

검색 데이터 스토어를 사용하기 위해 Vertex AI Agent Builder에서 검색 앱에 연결합니다.

Cloud 콘솔에서 AI 애플리케이션을 클릭한 다음 앱을 클릭합니다.
앱 만들기를 클릭합니다.
앱 만들기 페이지에서 검색 및 어시스턴트 > 커스텀 검색(일반)으로 이동하여 빌드할 앱 유형에 대해 만들기를 클릭합니다.
검색 앱 구성 페이지에서 다음 설정으로 웹사이트 검색 앱을 구성하고 나머지 설정은 기본값으로 둡니다.

속성 값(입력 또는 선택)

Enterprise 버전 기능 사용 중지

앱 이름 gms-search-app

회사 또는 조직의 외부 이름 gms-company

앱 위치 global(전역)
계속을 클릭합니다.
기존 데이터 스토어 목록이 표시됩니다. 이전 하위 작업에서 만든 goog_merch_ds 데이터 스토어를 선택합니다.
검색 앱을 만들기 위해 만들기를 클릭합니다.

검색 앱이 생성되고 데이터 스토어가 앱에 연결됩니다.
검색 앱을 테스트하기 위해 AI 애플리케이션 탐색 메뉴에서 미리보기를 클릭합니다.
검색창에 dino를 입력합니다.

데이터 스토어로 가져온 문서에서 관련 검색 결과 목록이 표시됩니다.

참고: 검색 미리보기가 아직 준비되지 않음이라는 오류가 표시되면 잠시 후에 다시 시도해 주세요. 기다리지 않고 실습의 다음 작업으로 넘어갈 수도 있습니다.

속성	값(입력 또는 선택)
Enterprise 버전 기능	사용 중지
앱 이름	gms-search-app
회사 또는 조직의 외부 이름	gms-company
앱 위치	global(전역)

목표를 확인하려면 내 진행 상황 확인하기를 클릭합니다. Vertex AI Search 앱 만들기

작업 2. 백엔드 빌드 및 배포하기

Flutter 앱의 백엔드는 Google Cloud에서 Cloud Run 서비스로 실행됩니다. 백엔드 서비스는 이전 단계에서 만든 검색 앱과 통합되어 상품 매장 데이터에서 검색 응답을 생성합니다. 또한 백엔드는 Flutter 앱의 쿼리에 응답하여 생성형 AI 콘텐츠를 제공하기 위해 Gemini에 액세스할 수 있는 Reasoning Engine 에이전트와 통합됩니다.

이 작업에서는 백엔드 Python 앱을 빌드하고 Cloud Run에 배포합니다.

백엔드 앱 구성 및 검토하기

이 실습에서는 VSCode 기반 IDE가 사전 프로비저닝되어 있습니다. IDE에 액세스하기 위해 실습의 Qwiklabs 사용자 인증 정보 패널에서 IDE 서비스 URL을 복사하여 새 시크릿 모드 브라우저 창에 붙여넣습니다.

참고: IDE 서비스 URL은 이 실습에 대해 사전 프로비저닝된 Cloud Run 서비스의 엔드포인트로, 요청을 code-server VM으로 프록시합니다. IDE는 code-server를 사용하여 빌드되었고, Flutter, Dart, Vim 확장 프로그램을 포함합니다.
IDE에서 터미널을 엽니다. IDE 탐색 메뉴()에서 터미널 > 새 터미널을 클릭합니다.
참고: IDE 터미널 창에서 아래 단계의 명령어를 실행합니다.
백엔드 앱의 초기 버전과 관련 파일은 실습을 위해 사전 프로비저닝되어 있습니다. Cloud Storage에서 백엔드 앱 폴더의 초기 버전과 해당 콘텐츠를 복사합니다.
gcloud storage cp -r gs://cloud-training/OCBL453/photo-discovery/ag-web ~ 참고: 메시지가 표시되면 허용을 클릭하여 클립보드의 텍스트와 이미지를 붙여넣고 Enter 키를 누릅니다.
IDE 터미널 창에서 다음을 실행하여 폴더의 내용을 나열합니다.
ls ~/ag-web/app
ag-web/app 폴더에는 백엔드 앱을 빌드하고 Cloud Run에 배포하는 데 필요한 애플리케이션 소스 코드와 기타 파일이 포함되어 있습니다.
앱의 PROJECT_ID, LOCATION, STAGING_BUCKET 구성을 설정합니다.
sed -i 's/GCP_PROJECT_ID/{{{project_0.project_id|set at lab start}}}/' ~/ag-web/app/app.py sed -i 's/GCP_REGION/{{{project_0.default_region|set at lab start}}}/' ~/ag-web/app/app.py sed -i 's/GCS_BUCKET/{{{project_0.startup_script.lab_bucket_name|set at lab start}}}/' ~/ag-web/app/app.py
이전에 만든 검색 데이터 스토어를 사용하도록 백엔드 앱을 구성합니다.

아래 명령어에서 {YOUR_SEARCH_DATA_STORE_ID} 문자열을 검색 데이터 스토어 ID의 값으로 바꿉니다.

sed 명령어의 중괄호를 삭제해야 합니다.
참고: 검색 데이터 스토어 ID의 값을 가져오려면 Cloud 콘솔에서 AI 애플리케이션 > 데이터 스토어로 이동한 다음, 이전에 만든 검색 데이터 스토어의 이름을 클릭합니다. 검색엔진 ID와 동일한 데이터 스토어 ID의 값을 복사합니다. sed -i 's/SEARCH_ENGINE_ID/{YOUR_SEARCH_DATA_STORE_ID}/' ~/ag-web/app/app.py
IDE에서 코드를 보기 위해 IDE 탐색 메뉴에서 아이콘을 클릭한 다음 폴더 열기를 클릭합니다.
목록에서 IDE-DEV/ag-web/ 폴더를 선택한 다음 확인을 클릭합니다.
코드 작성자를 신뢰하려면 예, 작성자를 신뢰합니다를 클릭합니다.
탐색기 창에서 app 폴더를 펼친 다음 app.py를 클릭하여 편집기에서 파일을 엽니다.

백엔드 앱 코드는 다음 작업을 실행합니다.
- 실습의 Google Cloud 프로젝트 ID, 리전, Cloud Storage 버킷을 사용하여 Vertex AI를 초기화합니다.
- search_gms() 함수는 discoveryengine.googleapis.com API 데이터 스토어 엔드포인트를 사용하여 검색 요청을 시작합니다. 앞서 만든 데이터 스토어 ID가 URL에 사용됩니다.
- 이 함수는 사용자가 제공한 검색어를 사용하여 데이터 스토어의 콘텐츠에서 검색을 실행하고 JSON 응답으로 결과 형식을 지정합니다.
- 앱은 flask를 사용하여 호출을 개별 함수로 라우팅합니다. / 엔드포인트는 앱이 성공적으로 로드되었는지 확인하는 데 사용되는 기본 페이지이며, /ask_gms 엔드포인트는 Vertex AI Search를 사용하는 search_gms() 함수를 호출합니다.

앱을 빌드하여 Cloud Run에 배포하기

배포 스크립트를 사용하여 백엔드 앱을 빌드하고 Cloud Run에 배포할 수 있습니다.

IDE에서 터미널 창을 열고 백엔드 앱 폴더로 변경합니다.
cd ~/ag-web/app
gcloud CLI에서 Google Cloud에 인증합니다.
gcloud auth login
계속하려면 Y를 입력합니다.
로그인 과정을 시작하기 위해 Control(Windows 및 Linux의 경우) 또는 Command(macOS의 경우) 키를 누르고 터미널의 링크를 클릭합니다.
외부 웹사이트를 열지 확인하라는 메시지가 표시되면 열기를 클릭합니다.
실습 학습자 이메일 주소를 클릭합니다.
계속 진행할지 묻는 메시지가 표시되면 계속을 클릭합니다.
Google Cloud SDK에서 Google 계정에 액세스하고 약관에 동의하도록 허용하려면 허용을 클릭합니다.

인증 코드가 브라우저 탭에 표시됩니다.
복사를 클릭합니다.
IDE 터미널 창으로 돌아와서 승인 코드 입력이라고 표시된 곳에 코드를 붙여넣고 Enter를 입력합니다.

그러면 Google Cloud에 로그인됩니다.
deploy.sh 스크립트를 실행 파일로 만든 다음 스크립트를 실행하여 지정된 Cloud Run 리전에 앱을 배포합니다.
chmod a+x deploy.sh; ./deploy.sh {{{project_0.project_id|set at lab start}}} {{{project_0.default_region|set at lab start}}}
앱을 빌드하고 Cloud Run에 배포하면 스크립트 출력 끝부분에 앱의 엔드포인트 URL이 표시됩니다. 이 URL은 스크립트에서 gcloud run deploy 명령어를 실행하여 생성되었습니다.
참고: 이 명령어는 실행하는 데 시간이 걸리므로 완료될 때까지 기다렸다가 다음 작업을 진행하세요.

백엔드 앱 테스트하기

앱의 Cloud Run 엔드포인트에 액세스하여 앱 기능을 테스트합니다.

이전 단계에서 생성된 앱의 엔드포인트 URL을 복사하고 새 브라우저 탭에서 해당 URL로 이동합니다.
앱이 로드되면 홈페이지에 Welcome to the ag-web backend app(ag-web 백엔드 앱에 오신 것을 환영합니다)이라는 메시지가 표시됩니다.
브라우저 URL 표시줄에서 아래 경로를 URL 끝에 추가합니다.
/ask_gms?query=dino
앱이 이전에 만든 검색 데이터 스토어의 결과로 응답하는지 확인합니다.

목표를 확인하려면 내 진행 상황 확인하기를 클릭합니다. 백엔드 앱 만들기

작업 3. Firebase 구성하기

프런트엔드 Flutter 앱은 Gemini API를 호출하기 위해 Firebase용 Vertex AI Dart SDK를 사용합니다. 이 SDK는 Dart 및 Flutter 앱의 공식 패키지 저장소인 pub.dev에서 firebase_vertexai 패키지로 제공됩니다.

Firebase는 Google의 백엔드 앱 개발 플랫폼으로, Android, iOS 등 다양한 플랫폼을 위한 서비스를 제공합니다.

이 작업에서는 Firebase를 설정하고 Firebase CLI에 로그인합니다. 실습의 뒷부분에서 Flutter 앱을 Firebase에 연결해 보겠습니다.

Firebase 설정하기

SDK를 사용하려면 먼저 Firebase 프로젝트를 설정해야 합니다.

시크릿 창 탭에서 Firebase Console(https://console.firebase.google.com)에 액세스합니다.
Firebase 프로젝트 만들기를 클릭합니다.
실습의 기존 Google Cloud 프로젝트에 Firebase를 추가하기 위해 페이지 하단에서 Google Cloud 프로젝트에 Firebase 추가를 클릭합니다.
Google Cloud 프로젝트 선택을 클릭한 다음 목록에서 실습 프로젝트를 선택합니다.
Firebase 약관에 동의한 다음 계속을 클릭합니다.
계속을 다시 클릭합니다.
기본 요금제를 사용하려면 확인하고 계속을 클릭합니다.
이 프로젝트에 대해 Google 애널리틱스를 사용 중지한 다음 Firebase 추가를 클릭합니다.
Firebase 프로젝트가 준비될 때까지 기다린 다음 계속을 클릭합니다.

이제 실습 Google Cloud 프로젝트에서 Firebase를 사용할 수 있습니다.

Firebase에 로그인하기

IDE 터미널 창에서 Firebase CLI에 로그인합니다.
firebase login --no-localhost
Firebase에서 CLI 및 에뮬레이터 보고 정보를 수집하도록 허용하려면 Y를 입력하고 Enter 키를 누릅니다.
세션 ID를 기록한 다음 단계에 따라 로그인 과정을 시작합니다. Control(Windows 및 Linux의 경우) 또는 Command(macOS의 경우) 키를 누르고 터미널의 URL을 클릭합니다.
외부 웹사이트를 열라는 메시지가 표시되면 열기를 클릭합니다.
실습 학습자 이메일 ID를 클릭합니다.
계속을 클릭합니다.
Firebase CLI에 관련 권한을 부여하기 위해 허용을 클릭합니다.
예, 방금 이 명령어를 실행했습니다를 클릭합니다.
세션 ID를 확인한 다음 예, 세션 ID입니다를 클릭합니다.
승인 코드를 복사하기 위해 복사를 클릭합니다.
IDE 터미널 창에서 요청된 위치에 승인 코드를 붙여넣고 Enter 키를 누릅니다.

이제 Firebase CLI에 로그인했습니다.

작업 4. Reasoning Engine AI 에이전트 만들기

AI 에이전트는 추론 및 조정에 대규모 언어 모델(LLM)의 기능을 활용하는 애플리케이션이며, 목표를 달성하기 위해 외부 도구와 함께 사용됩니다. Vertex AI Agent Builder는 신뢰할 수 있는 데이터 소스에 연결하여 AI 에이전트를 빌드하는 데 도움이 되는 Google의 제품 및 도구 모음입니다.

Vertex AI Reasoning Engine(Vertex AI 기반 LangChain)은 Vertex AI Agent Builder를 사용하여 추론 에이전트를 빌드하고 배포하는 데 도움이 됩니다. LangChain은 챗봇 및 RAG 시스템을 빌드하는 데 자주 사용되는 OSS 도구입니다.

Reasoning Engine을 사용하면 개발자가 함수 호출을 통해 LLM(Gemini)의 출력을 Python 함수로 매핑할 수 있습니다. Reasoning Engine은 Vertex AI의 Gemini 모델용 Python SDK와 긴밀하게 통합되며 LangChain 및 기타 Python 프레임워크와 호환됩니다.

이 작업에서는 Jupyter 노트북과 함께 Vertex AI Workbench를 사용하여 Python 함수로 Reasoning Engine 에이전트를 배포합니다. 이 에이전트는 이 실습의 다음 작업에서 생성형 AI 백엔드 애플리케이션에 사용됩니다.

Vertex AI Workbench 인스턴스 만들기

Vertex AI Workbench는 전체 데이터 과학 및 머신러닝 워크플로에 사용되는 Jupyter 노트북 기반 개발 환경입니다. Vertex AI Workbench 인스턴스의 Jupyter 노트북 내에서 Vertex AI 및 기타 Google Cloud 서비스와 상호작용할 수 있습니다. 예를 들어 Vertex AI Workbench를 사용하면 BigQuery 및 Cloud Storage 통합을 통해 Jupyter 노트북 내에서 데이터에 액세스하고 탐색할 수 있습니다.

Vertex AI Workbench 인스턴스에는 TensorFlow 및 PyTorch 프레임워크 지원을 포함하여 딥 러닝 패키지 모음이 사전 설치되어 있습니다.

Vertex AI Workbench 노트북은 Google Cloud에서 ML 모델을 개발하고 배포하기 위한 유연하고 확장 가능한 솔루션을 제공합니다.

Workbench 인스턴스를 만들기 위해 Cloud 콘솔에서 탐색 메뉴()를 클릭한 다음 Vertex AI > Workbench를 선택합니다.
Cloud 콘솔에서 메시지가 표시되면 Notebooks API를 클릭하여 사용 설정합니다.
인스턴스 탭에서 인스턴스가 선택되어 있는지 확인한 다음 새로 만들기를 클릭합니다.
새 인스턴스 페이지의 이름에 my-instance를 입력합니다.
나머지 설정은 기본값으로 두고 만들기를 클릭합니다.

새 인스턴스가 인스턴스 섹션에서 가동됩니다. 인스턴스가 생성될 때까지 기다렸다가 다음 단계로 진행합니다.
참고: 사용할 준비가 되면 인스턴스 옆에 녹색 체크표시가 나타납니다.
인스턴스가 준비되면 JupyterLab 열기를 클릭합니다.
Python 3 Jupyter 노트북을 실행하기 위해 Python 3 노트북을 클릭합니다.

노트북 파일 복사하기

이 실습에는 Reasoning Engine 에이전트를 빌드하고 배포하는 노트북이 사전 프로비저닝되어 있습니다.

노트북을 JupyterLab 인스턴스에 복사하기 위해 이 코드를 새 노트북의 첫 번째 셀에 복사합니다.
!gcloud storage cp gs://cloud-training/OCBL453/photo-discovery/ag-web/ag_setup_re.ipynb .
셀을 선택하고 셀 메뉴에서 실행을 클릭하여 실행합니다.

이 명령어는 Cloud Storage에서 JupyterLab 인스턴스로 노트북을 복사합니다. 명령어가 완료되면 노트북 파일이 최상위 루트 폴더에 나열됩니다.
노트북을 열기 위해 폴더 목록에서 노트북 파일을 더블클릭합니다. 노트북의 콘텐츠로 별도의 탭이 생성됩니다.

Reasoning Engine 에이전트 빌드 및 배포하기

노트북에 있는 모든 코드 셀을 처음부터 순서대로 실행합니다. 셀을 실행하기 위해 셀의 아무 곳이나 클릭하여 선택한 다음, 셀 메뉴 또는 노트북 상단 메뉴에서 실행을 클릭합니다.
참고: 셀에서 명령어를 실행할 때는 명령어가 완료될 때까지 기다렸다가 다음 셀로 이동합니다. 명령어 실행이 완료되면 셀 번호 입력란의 별표(*)가 셀 번호로 바뀝니다. 참고: 셀을 실행하기 전에 아래의 메모에서 셀별 안내 또는 수행할 단계를 확인하세요. 이러한 안내는 CELL INSTR 프리픽스로 표시됩니다.
a. [CELL INSTR] 현재 런타임 다시 시작

메시지가 표시되면 커널 다시 시작 대화상자에서 확인을 클릭합니다.

b. [CELL INSTR] Google Cloud 프로젝트 정보를 설정하고 Vertex AI SDK를 초기화

이 셀을 실행하여 Vertex AI SDK를 초기화하기 전에 실습 PROJECT_ID, LOCATION, STAGING_BUCKET의 구성 값을 업데이트합니다.
PROJECT_ID = "{{{project_0.project_id|set at lab start}}}" LOCATION = "{{{project_0.default_region|set at lab start}}}" STAGING_BUCKET = "gs://{{{project_0.startup_script.lab_bucket_name}}}"
샘플 구성 설정으로 업데이트된 셀은 다음과 같습니다.

c. [CELL INSTR] Vertex AI Search의 도구 함수 정의

이 셀을 실행하기 전에 GOOGLE_SHOP_VERTEXAI_SEARCH_URL의 값을 백엔드 앱의 Cloud Run 엔드포인트 URL로 바꿉니다.

엔드포인트 URL을 가져오기 위해 Cloud 콘솔에서 Cloud Run으로 이동하여 백엔드 앱 이름인 ag-web을 클릭합니다. 엔드포인트 URL의 값을 복사하여 셀에서 바꿉니다.

백엔드 앱의 샘플 Cloud Run 엔드포인트 URL로 업데이트된 셀은 다음과 같습니다.

참고: 노트북 메뉴바에서 실행을 클릭하여 셀을 실행할 수도 있습니다.
Deploy the Agent to the Reasoning Engine runtime 셀을 실행한 후 명령어가 완료될 때까지 기다렸다가 Reasoning Engine 에이전트를 만듭니다. 그런 다음 Reasoning Engine ID를 복사합니다.

다음 작업에서 이 ID를 사용하여 백엔드 앱을 구성하고 다시 배포합니다.
참고: 이 셀이 완료되는 데 최대 10분이 걸릴 수 있습니다. Reasoning Engine이 생성되었음을 나타내는 최종 출력이 표시될 때까지 기다렸다가 다음 단계로 진행합니다.
다음 두 개의 셀을 실행하고 출력을 관찰하여 Reasoning Engine 에이전트가 성공적으로 작동하는지 테스트합니다.

Reasoning Engine 에이전트가 Gemini 모델의 쿼리 입력 및 출력을 기반으로 Wikipedia 또는 Vertex AI Search 데이터 스토어를 호출했습니다.

목표를 확인하려면 내 진행 상황 확인하기를 클릭합니다. Reasoning Engine 에이전트 배포하기

작업 5. 백엔드 앱 개선하기

이제 이전 작업에서 배포한 Reasoning Engine 에이전트를 호출하도록 백엔드 앱을 개선해 보겠습니다.

백업 앱의 초기 버전은 Vertex AI Search에서 직접 결과를 가져오기만 했습니다. 새 버전에서는 앱이 Gemini의 출력과 에이전트의 도구를 사용하여 입력 프롬프트에 따라 Vertex AI Search 또는 Wikipedia에서 대답을 생성하는 Reasoning Engine 에이전트를 호출합니다.

이 작업에서는 백엔드 앱 코드를 업데이트하여 요청 쿼리로 Reasoning Engine 에이전트를 호출하고 에이전트의 대답을 반환하는 추가 진입점을 추가합니다.

백엔드 앱 업데이트하기

IDE 터미널 창에서 다음 명령어를 실행하여 새 진입점 코드로 app.py 파일을 추가합니다.
cat << EOF >> ~/ag-web/app/app.py # # Reasoning Engine # NB_R_ENGINE_ID = "REASONING_ENGINE_ID" from vertexai.preview import reasoning_engines remote_agent = reasoning_engines.ReasoningEngine( f"projects/{PROJECT_ID}/locations/{LOCATION}/reasoningEngines/{NB_R_ENGINE_ID}" ) # Endpoint for the Flask app to call the Agent @app.route("/ask_gemini", methods=["GET"]) def ask_gemini(): query = request.args.get("query") log.info("[ask_gemini] query: " + query) retries = 0 resp = None while retries < MAX_RETRIES: try: retries += 1 resp = remote_agent.query(input=query) if (resp == None) or (len(resp["output"].strip()) == 0): raise ValueError("Empty response.") break except Exception as e: log.error("[ask_gemini] error: " + str(e)) if (resp == None) or (len(resp["output"].strip()) == 0): raise ValueError("Too many retries.") return "No response received from Reasoning Engine." else: return resp["output"] EOF
이전에 만든 Reasoning Engine 에이전트를 사용하도록 백엔드 앱을 구성합니다.

아래 명령어에서 {YOUR_REASONING_ENGINE_ID} 문자열을 이전 작업의 노트북 셀에서 복사한 Reasoning Engine ID 값으로 바꾸고 IDE 터미널 창에서 아래 명령어를 실행합니다.

sed 명령어의 중괄호를 삭제해야 합니다.
sed -i 's/REASONING_ENGINE_ID/{YOUR_REASONING_ENGINE_ID}/' ~/ag-web/app/app.py
IDE에서 코드를 보기 위해 IDE 탐색 메뉴에서 아이콘을 클릭하고 IDE-DEV/ag-web/app/app.py 파일을 선택합니다.

개선 버전의 백엔드 앱에서는 다음과 같은 기능이 제공됩니다.
- 이전 작업에서 만든 에이전트의 REASONING_ENGINE_ID를 사용하여 Reasoning Engine 런타임에서 remote_agent의 핸들을 검색합니다.
- ask_gemini() 함수를 정의하는 새 /ask_gemini 엔드포인트가 정의됩니다.
- 이 함수는 요청에서 사용자 제공 query 파라미터를 Reasoning Engine(remote_agent)에 전달하고 에이전트의 대답을 반환합니다.

백엔드 앱을 빌드하고 Cloud Run에 다시 배포하기

백엔드 앱 폴더로 변경합니다.
cd ~/ag-web/app
스크립트를 실행하여 지정된 Cloud Run 리전에 앱을 다시 배포합니다.
./deploy.sh {{{project_0.project_id|set at lab start}}} {{{project_0.default_region|set at lab start}}}

백엔드 앱 테스트하기

앱의 Cloud Run 엔드포인트에 액세스하여 앱 기능을 테스트합니다.

이전 단계에서 생성된 앱의 엔드포인트 URL을 복사하고 새 브라우저 탭에서 해당 URL로 이동합니다.
앱이 로드되면 홈페이지에 Welcome to the ag-web backend app(ag-web 백엔드 앱에 오신 것을 환영합니다)이라는 메시지가 표시됩니다.
브라우저 URL 표시줄에서 아래 경로를 URL 끝에 추가합니다.
/ask_gemini?query=where can I buy the chrome dino pin
앱은 앞서 만든 Vertex AI Search 데이터 스토어에서 결과를 가져온 에이전트의 결과로 대답합니다.
Chrome Dino Enamel Pin is a product sold at Google Merch Shop. The price is 7.00 USD. You can buy the product at their web site: https://shop.merch.google/product/chrome-dino-enamel-pin-ggoegcbb203299/.
브라우저 URL 표시줄에서 경로를 다음과 같이 바꿉니다.
/ask_gemini?query=what is fallingwater
앱은 노트북에서 구성한 Wikipedia API에서 응답을 가져온 에이전트의 결과로 응답합니다.
Fallingwater was designed by architect Frank Lloyd Wright in 1935. It is located in southwest Pennsylvania, about 70 miles southeast of Pittsburgh. The house is famous because it was built partly over a waterfall. 참고: 실제 대답은 위에 표시된 대답과 다를 수 있습니다.

작업 6. Gemini 2.0 Flash 시험 사용하기

백엔드 앱, Vertex AI Search 구성요소, Reasoning Engine 에이전트를 개발하고 배포했습니다. 이제 Flutter 프런트엔드를 설계하고 빌드할 수 있습니다.

Flutter 앱에서 사용자가 앱에 업로드한 사진에 대한 자세한 정보를 탐색할 수 있습니다. 이 앱은 Gemini와 통합되어 사진에 대한 대답을 생성하고, AI 에이전트를 사용하여 채팅 인터페이스를 통해 대답을 제공합니다.

프런트엔드 앱을 개발하기 전에 Gemini 2.0 Flash 모델에서 반환되는 대답의 구조를 정의해야 합니다. 이 모델은 실습에서 앞서 배포한 AI 에이전트에서 사용됩니다.

이 작업에서는 Gemini 2.0 Flash 모델에 프롬프트를 작성하고 모델 대답을 JSON 형식으로 확인합니다.

Gemini 2.0 Flash는 Cloud 콘솔의 Vertex AI Studio에서 사용할 수 있습니다. Vertex AI Studio에 액세스하기 위해 탐색 메뉴()를 클릭한 다음 Vertex AI > Vertex AI Studio > 프롬프트 만들기를 선택합니다.
Vertex AI Studio를 사용하기 위해 필요한 API를 사용 설정하라는 메시지가 표시되면 동의 및 계속을 클릭합니다.
참고: Google Cloud 콘솔의 도구인 Vertex AI Studio를 사용하면 생성형 AI 모델을 빠르게 테스트하고 프로토타입으로 제작하여 애플리케이션에서 해당 기능을 활용할 수 있습니다.
프롬프트에서 미디어 삽입을 클릭한 다음 Cloud Storage에서 가져오기를 선택합니다.
실습 버킷 이름() 옆에 있는 >를 클릭합니다.
이미지 파일 fallingwater.jpg를 선택한 다음 선택을 클릭합니다.

이미지가 프롬프트 상자에 업로드됩니다.
모델에 프롬프트를 작성하기 위해 이미지 아래의 프롬프트 상자에 What is this?를 입력한 다음 보내기()를 클릭합니다.

모델은 이미지의 객체를 정확하게 설명하는 간단한 대답을 제공합니다.
모델에서 JSON 형식으로 더 많은 정보를 가져오기 위해 텍스트 프롬프트를 수정합니다. 프롬프트를 수정하려면 프롬프트 창 상단으로 스크롤하여 수정을 클릭합니다. 프롬프트 텍스트를 다음과 같이 업데이트합니다.
What is this? Provide the name and description of the object, and be as specific as possible. Also include a list of 3 follow-up questions that I can ask for more information about this object. Generate the response in JSON format with the keys "name", "description", and "suggestedQuestions".
보내기()를 클릭합니다.
모델에서 생성된 JSON 대답을 확인합니다.
{ "name": "Fallingwater", "description": "This is Fallingwater, a house designed by renowned architect Frank Lloyd Wright. It's built over a waterfall on Bear Run in rural southwestern Pennsylvania, and is considered a masterpiece of organic architecture, seamlessly blending with its natural surroundings.", "suggestedQuestions": [ "Who commissioned Frank Lloyd Wright to design Fallingwater?", "What are some of the key architectural features of Fallingwater?", "Is Fallingwater open to the public, and if so, how can I visit?" ] }
이제 프롬프트와 JSON 형식의 모델 대답이 준비되었으며, 이를 사용하여 Flutter 앱을 빌드할 수 있습니다.
참고: 실제 모델 대답은 위에 표시된 대답과 다를 수 있습니다.

작업 7. Flutter 프런트엔드 앱 배포하기

모델에서 반환되는 데이터의 구조를 정의했으니 이제 프런트엔드 앱을 빌드할 수 있습니다.

Flutter는 오픈소스 멀티 플랫폼 앱 개발 프레임워크입니다. 이를 사용하면 Android, iOS, 웹, macOS, Windows, Linux에서 실행되는 하나의 코드베이스를 작성할 수 있습니다. Flutter 앱은 Dart 프로그래밍 언어로 개발됩니다.

이 실습에서는 Flutter 앱을 웹 애플리케이션으로 배포하고 브라우저를 사용하여 액세스할 수 있도록 웹을 대상 플랫폼으로 사용합니다.

이 작업에서는 Flutter 앱 코드를 검토하고 앱을 웹 애플리케이션으로 빌드 및 실행합니다.

Flutter 앱 코드베이스 검토하기

앱 기능 중 하나는 사용자가 관광 명소의 사진을 업로드한 다음 Gemini에 쿼리하여 사진에 대한 정보를 가져오는 것입니다. 이 실습의 목적에 맞게 Flutter 앱은 이미 개발되어 Cloud Storage에서 제공됩니다.

IDE 터미널에서 Flutter 앱 코드를 다운로드합니다.
gcloud storage cp -r gs://cloud-training/OCBL453/photo-discovery/app ~
IDE 터미널 창에서 다음을 실행하여 앱 프로젝트 종속 항목을 가져옵니다.
cd ~/app; flutter pub get
IDE에서 코드를 보기 위해 탐색 메뉴()에서 파일을 클릭한 다음 폴더 열기를 선택합니다.
목록에서 /home/ide-dev/app/를 선택한 다음 확인을 클릭합니다.

폴더의 파일 작성자를 신뢰하려면 예, 작성자를 신뢰합니다를 클릭합니다.

app 폴더의 내용을 간략하게 살펴보겠습니다.

폴더/파일	설명
app	Flutter 앱을 구성하는 하위 폴더와 파일이 포함된 프로젝트 루트 폴더입니다.
android/ios/linux/macos/web/windows	지원되는 각 플랫폼에서 Flutter 앱을 실행하는 데 필요한 플랫폼별 파일이 포함되어 있습니다.
lib	기능, 라우팅, 데이터 모델, 사용자 인터페이스를 포함하는 핵심 애플리케이션 Dart 파일이 포함되어 있습니다.
test	앱의 위젯을 테스트하는 데 사용되는 Dart 테스트가 포함되어 있습니다.
pubspec.yaml	앱 종속 항목, Flutter 버전, 기타 구성 설정이 포함되어 있습니다.
analysis_options.yaml	앱의 정적 분석을 위한 구성 설정이 포함되어 있습니다.

이제 이러한 폴더에 있는 파일 일부를 살펴보겠습니다.

탐색기 메뉴에서 /app/lib/models 폴더를 클릭한 다음 metadata.dart 파일을 클릭하여 엽니다.

metadata.dart 파일에는 Flutter 앱에서 사용되는 데이터 모델이 포함되어 있습니다.
class Metadata { String name = ''; String description = ''; List suggestedQuestions = []; // more code follows ... }
메타데이터 객체 속성은 Gemini API의 대답으로 반환되는 JSON 속성에 매핑됩니다. fromJson 메서드는 호출될 때 객체 속성을 초기화합니다.
탐색기 메뉴에서 /app/lib/main.dart 파일을 클릭하여 엽니다.

Flutter 앱의 애플리케이션 진입점입니다. 초기화 작업을 수행한 후, 이 파일의 코드는 Material 구성요소를 사용하여 앱의 UI를 빌드하고 앱의 제목, 테마, 라우팅 구성을 설정합니다.
참고: Material 앱은 MaterialApp 위젯으로 시작합니다. 이 위젯은 앱의 다양한 화면으로의 라우팅을 관리하는 Navigator를 비롯한 여러 유용한 위젯을 앱의 루트에 빌드합니다.
앱의 라우팅 구성을 보기 위해 탐색기 메뉴에서 /app/lib/functionality/routing.dart 파일을 클릭하여 엽니다.

이 파일의 코드는 앱의 /, /chat, /settings 경로를 정의합니다.

Flutter는 앱을 빌드하는 데 사용되는 선언적 클래스인 위젯의 개념을 사용합니다. Flutter에서는 위젯을 구성하여 더 복잡한 위젯을 빌드하고, 이를 통해 위젯 트리를 형성하여 레이아웃을 만듭니다. Flutter에서 UI를 빌드하는 방법을 자세히 알아보려면 문서를 확인하세요.
앱의 UI 화면과 기능 중 일부를 담당하는 코드를 살펴보겠습니다. 탐색기 메뉴에서 /app/lib/ui/screens/quick_id.dart 파일을 클릭하여 엽니다.

이 파일에는 앱의 위젯을 빌드하는 클래스가 포함되어 있습니다. 여기에는 앱의 기본 페이지를 빌드하고 routing.dart 파일에 정의된 / 경로에서 호출되는 GenerateMetadataScreen 클래스가 포함되어 있습니다. 이 UI를 통해 사용자는 컴퓨터나 휴대기기에서 이미지를 업로드하거나 기기 카메라로 사진을 촬영할 수 있습니다.

앱에서 사용되는 다른 UI 화면은 설정 및 채팅 페이지로, app/lib/ui/screens/ 폴더의 settings.dart 및 chat.dart 파일에서 구현됩니다.

앱을 초기화하는 동안 Firebase용 Vertex AI Dart SDK가 앱에서 사용할 Gemini 생성형 AI 모델의 인스턴스를 가져옵니다. 이는 _GenerateMetadataScreenState 클래스에서 구현됩니다.
void initState() { super.initState(); model = FirebaseVertexAI.instance.generativeModel( model: geminiModel, generationConfig: GenerationConfig( temperature: 0, responseMimeType: 'application/json', ), ); }
사용자가 이미지를 선택하면 앱은 이미지와 텍스트 프롬프트로 Vertex AI Gemini API를 호출합니다. 사용된 텍스트 프롬프트는 이전 작업에서 Gemini 2.0 Flash 모델 시험 사용 때 사용한 것과 동일합니다.

_sendVertexMessage() 메서드에는 프롬프트를 전송하는 코드가 포함되어 있습니다. 다음은 이 메서드의 코드 일부입니다.
Future _sendVertexMessage() async { ... final messageContents = Content.multi( [ TextPart( 'What is the subject in this photo? Provide the name of the photo subject, and description as specific as possible, and 3 suggested questions that I can ask for more information about this object. Answer in JSON format with the keys "name", "description" and "suggestedQuestions".'), DataPart('image/jpeg', _image!), ], ); var response = await model.generateContent([messageContents]); var text = response.text; if (text == null) { _showError('No response from API.'); return; } else { var jsonMap = json.decode(text); if (mounted) { context.read().updateMetadata(Metadata.fromJson(jsonMap)); } } ... }
그런 다음 모델의 JSON 대답은 디코딩되어 name, description, suggestedQuestions를 추출하고, 이는 로컬에 저장된 후 앱 UI에 표시됩니다.

Firebase에 Flutter 앱 연결하기

IDE 터미널 창에서 app 루트 프로젝트 폴더로 변경하고 flutterfire_cli 패키지를 활성화합니다.
cd ~/app dart pub global activate flutterfire_cli
다음을 실행하여 Flutter 앱을 Firebase에 등록합니다.
flutterfire configure --project={{{project_0.project_id|set at lab start}}}
명령어를 실행하면 firebase_options.dart 구성 파일이 Flutter 프로젝트의 lib 폴더에 추가됩니다.
앱에 지원되는 플랫폼을 구성하기 위해 스페이스바를 눌러 웹을 제외한 모든 플랫폼의 선택을 해제합니다. 화살표 키를 사용하여 플랫폼을 스크롤합니다. 그런 다음 Enter 키를 누릅니다.

이제 Flutter 웹 앱이 Firebase에서 사용할 수 있도록 등록되었습니다.

Flutter 앱 채팅 기능 구성하기

Flutter 앱에는 사용자가 앱에 업로드한 이미지에 대한 자세한 정보를 찾거나 더 최신 정보가 있을 수 있는 다른 외부 데이터 소스로부터 정보를 요청할 수 있는 채팅 기능이 있습니다. 이를 위해서는 Gemini 모델을 이러한 데이터 소스에 연결하거나 ground하는 방법이 필요합니다.

이 기능을 구현하기 위해 Flutter 앱은 이 실습에서 앞서 배포한 Reasoning Engine 에이전트와 통합됩니다. 통합은 Cloud Run에 빌드하고 배포한 백엔드 앱의 엔드포인트에 Flutter 앱을 연결하여 이루어집니다.

먼저 백엔드 앱의 Cloud Run 엔드포인트 호스트 이름을 가져와 값을 환경 변수에 저장합니다. IDE 터미널 창에서 다음을 실행합니다.
BACKEND_APP_HOST=$(gcloud run services describe ag-web --region {{{project_0.default_region|set at lab start}}} --format 'value(status.url)' | cut -d'/' -f3); echo $BACKEND_APP_HOST
Flutter 앱의 경우 백엔드 앱 엔드포인트가 ~/app/lib/config.dart 파일에 구성되어 있습니다. 파일의 구성 항목을 업데이트합니다.
sed -i "s/cloudRunHost = .*/cloudRunHost = '$BACKEND_APP_HOST';/" ~/app/lib/config.dart
변경사항을 확인하기 위해 IDE 탐색기 메뉴에서 IDE-DEV/app/lib/config.dart 파일을 클릭하여 엽니다. cloudRunHost 구성 항목 값이 아래 샘플에 따라 업데이트되었는지 확인합니다.

참고: 이 값은 이전 단계에서 설정한 'BACKEND_APP_HOST' 환경 변수의 값과 일치해야 합니다.

채팅 기능 코드 검토하기

채팅 기능을 구현하는 Flutter 앱의 코드를 살펴보겠습니다.

IDE 탐색기 메뉴에서 /app/lib/ui/screens/chat.dart 파일을 클릭하여 엽니다.

ChatPage 클래스는 UI의 채팅 페이지용 Flutter 위젯을 빌드합니다. 이 페이지는 자세히 알아보기 버튼을 누르면 UI에 표시됩니다.

앱은 채팅 UI를 빌드하기 위해 flutter_chat_ui_package를 사용합니다. 이 패키지는 맞춤설정할 수 있는 대부분의 채팅 상용구 코드를 구현합니다. build() 메서드는 Chat 클래스를 사용하여 위젯을 구성합니다.
Widget build(BuildContext context) { ... Chat( typingIndicatorOptions: TypingIndicatorOptions( typingUsers: typingUsers, ), listBottomWidget: suggestionsWidget, messages: _messages, onSendPressed: _handleSendPressed, showUserAvatars: true, showUserNames: true, user: _user, theme: DefaultChatTheme( receivedMessageBodyTextStyle: TextStyle( color: Theme.of(context).colorScheme.onSurface, ), sentMessageBodyTextStyle: TextStyle( color: Theme.of(context).colorScheme.onSecondary, ), userAvatarNameColors: [ Theme.of(context).colorScheme.primary, ], backgroundColor: Theme.of(context).colorScheme.surfaceContainerHigh, primaryColor: Theme.of(context).colorScheme.primary, secondaryColor: Theme.of(context).colorScheme.surface, ), ), ... }
listBottomWidget은 이전 Gemini 호출의 대답으로 반환된 추천 질문 목록을 표시하는 데 사용되며, 이를 통해 사용자가 질문을 채팅 메시지로 선택할 수 있습니다.

사용자가 채팅 창에서 Send를 클릭하면 _handleSendPressed() 콜백 메서드가 호출됩니다. 이 메서드는 새 메시지를 구성하고 메시지 목록에 추가한 후 askAgent() 메서드를 사용하여 메시지를 백엔드로 보냅니다.
코드를 스크롤하여 askAgent() 메서드를 찾습니다.

Reasoning Engine 에이전트를 사용하여 Gemini를 호출하기 위해 askAgent() 메서드는 백엔드 앱의 Cloud Run 엔드포인트에 있는 /ask_gemini URL에 요청을 전송합니다. 요청 쿼리 파라미터에는 이전 Gemini 호출에서 반환된 이미지 name 및 description과 사용자의 메시지가 포함됩니다.
Future askAgent( String name, String description, String question) async { var query = 'The photo is $name. $description. $question.'; var endpoint = Uri.https(cloudRunHost, '/ask_gemini', {'query': query}); var response = await http.get(endpoint); if (response.statusCode == 200) { var responseText = convert.utf8.decode(response.bodyBytes); return responseText.replaceAll(RegExp(r'\*'), ''); } return 'Sorry I can\'t answer that.'; }
그런 다음 백엔드의 대답이 _sendMessageToAgent() 호출 함수를 통해 채팅 창의 메시지 목록에 추가됩니다.

Flutter 앱 배포하기

Flutter 앱 구성이 완료되었으므로 이제 앱을 빌드하고 배포할 수 있습니다. 이 실습에서는 앱을 웹 애플리케이션으로 실행하기 위해 Flutter 웹용 개발 서버인 fwr를 사용합니다.

현재 위치가 Flutter 앱 폴더인지 확인합니다. IDE 터미널 창에서 다음을 실행합니다.
cd ~/app
다음을 실행하여 앱 프로젝트 종속 항목을 가져옵니다.
flutter pub get
다음을 실행하여 프로젝트를 빌드하고 웹 서버를 시작합니다.
fwr
서버가 시작되어 Flutter 앱을 제공할 때까지 기다립니다. 시작되면 다음과 비슷한 명령어의 출력이 표시됩니다.

목표를 확인하려면 내 진행 상황 확인하기를 클릭합니다. Firebase 프로젝트 및 Flutter 앱 구성하기

작업 8. Flutter 앱 테스트하기

Flutter 앱의 기능을 테스트해 보겠습니다.

테스트 이미지 다운로드하기

앱을 테스트하기 위해 먼저 이미지를 다운로드하여 컴퓨터에 저장합니다. URL을 복사하여 별도의 브라우저 탭에서 이미지를 봅니다.

Fallingwater 이미지
이미지를 마우스 오른쪽 버튼으로 클릭하고 컴퓨터에 저장합니다.
아래 URL에서 Google Chrome 공룡 게임 핀 이미지를 다운로드하기 위해 다음 단계를 반복합니다.

Chrome 공룡 게임 핀 이미지

앱 테스트하기

Flutter 앱에 액세스하기 위해 Qwiklabs 사용자 인증 정보 패널에서 라이브 서버 URL을 복사하여 시크릿 모드 브라우저 창의 새 탭에서 엽니다.
앱이 로드될 때까지 몇 초간 기다립니다. 그런 다음 Fallingwater 이미지를 업로드하기 위해 라이브러리에서 선택을 클릭합니다.

이미지를 업로드하면 앱이 Vertex AI Gemini API를 호출하여 앱 UI에 표시되는 이미지의 이름과 설명을 포함하는 대답을 생성합니다.

앱 UI의 이름 및 설명 입력란에 Gemini 모델 대답이 채워지기까지 몇 초 정도 걸릴 수 있습니다.
참고: 권한 거부 오류가 표시되면 무시하고 확인 버튼을 클릭하여 진행합니다. 이미지 삭제를 클릭한 후 이미지를 다시 업로드합니다.
자세히 알아보기를 클릭합니다.

채팅 페이지가 로드되고 이전 Gemini API 호출의 대답으로 반환된 추천 질문이 표시됩니다.

참고: 추천 질문이 표시되지 않으면 페이지를 새로고침한 다음, 이전 두 단계를 반복하여 이미지를 업로드합니다.

상품 데이터로 앱 테스트하기

채팅 UI에서 이미지 삭제를 클릭합니다.
Google Chrome 공룡 게임 핀 이미지를 업로드하려면 라이브러리에서 선택을 클릭하고 앞서 저장한 이미지를 업로드합니다.

이미지를 업로드하면 앱이 Vertex AI Gemini API를 호출하여 앱 UI에 표시되는 이미지의 이름과 설명을 포함하는 대답을 생성합니다.
자세히 알아보기를 클릭합니다.
채팅 메시지 상자에 다음을 입력합니다.
Where can I buy this pin?
에이전트는 백엔드 앱의 Cloud Run 엔드포인트에 HTTPS 호출을 한 다음, Gemini를 사용하여 Vertex AI Search 데이터 스토어의 응답을 반환하는 Reasoning Engine 에이전트를 호출합니다.
(선택사항) Flutter 앱이 모바일 레이아웃에 맞춰지는지 확인하려면 브라우저 창의 크기를 휴대기기의 크기에 맞게 조정하세요.

이는 Flutter 앱이 화면 또는 창 크기에 따라 변경사항에 맞게 반응한다는 것을 의미합니다. Flutter에는 앱이 기기 구성에 따라 변경사항에 반응하고 적응하도록 도와주는 위젯과 패키지가 있습니다.

실습 종료

실습을 완료하면 실습 종료를 클릭합니다. Qwiklabs에서 사용된 리소스를 자동으로 삭제하고 계정을 지웁니다.

실습 경험을 평가할 수 있습니다. 해당하는 별표 수를 선택하고 의견을 입력한 후 제출을 클릭합니다.

별점의 의미는 다음과 같습니다.

별표 1개 = 매우 불만족
별표 2개 = 불만족
별표 3개 = 중간
별표 4개 = 만족
별표 5개 = 매우 만족

의견을 제공하고 싶지 않다면 대화상자를 닫으면 됩니다.

의견이나 제안 또는 수정할 사항이 있다면 지원 탭을 사용하세요.

수고하셨습니다

이 실습에서 학습한 내용은 다음과 같습니다.

Google Cloud 콘솔에서 Vertex AI Agent Builder를 사용하여 검색 데이터 스토어 및 검색 앱 만들기
Vertex AI Workbench를 사용하여 Reasoning Engine 에이전트를 배포하기
Vertex AI Search 및 Reasoning Engine 에이전트와 통합되는 Python 앱 빌드하기
앱을 Cloud Run에 배포하고 Flutter 앱의 백엔드로 사용하기
Firebase 프로젝트를 설정하고 Flutter 앱에 연결하기
Flutter 앱 코드를 확인하여 기능 이해하기
Flutter 앱을 실행하고 테스트하기

05

Vertex AI와 Flutter를 활용하여 생성형 AI 에이전트 빌드하기

체크포인트

AI 애플리케이션을 사용하여 Flutter 앱에 AI 에이전트 통합하기

개요

목표

설정