
시작하기 전에
- 실습에서는 정해진 기간 동안 Google Cloud 프로젝트와 리소스를 만듭니다.
- 실습에는 시간 제한이 있으며 일시중지 기능이 없습니다. 실습을 종료하면 처음부터 다시 시작해야 합니다.
- 화면 왼쪽 상단에서 실습 시작을 클릭하여 시작합니다.
Enable the Vertex AI API
/ 10
Create a Vertex AI Search app
/ 30
Build and deploy your app on Cloud Run
/ 25
Make changes to the website's content
/ 35
생성형 AI는 텍스트, 동영상, 이미지, 코드와 같은 콘텐츠를 만드는 데 사용할 수 있는 기술입니다. Google Cloud는 Gemini, Vertex AI 등 생성형 AI를 시작하는 데 도움이 되는 다양한 대규모 언어 모델(LLM)과 도구를 제공합니다. LLM 기반 도구를 사용하여 웹사이트 콘텐츠를 만들고 개선하고, 대화형 검색 환경을 추가할 수 있습니다. 또한 웹페이지 검색을 촉진하고 웹사이트 탐색을 개선할 수 있습니다.
이 실습에서는 다음을 위한 웹사이트 현대화 솔루션을 구현합니다.
각 실습에서는 정해진 기간 동안 새 Google Cloud 프로젝트와 리소스 집합이 무료로 제공됩니다.
시크릿 창을 사용하여 Qwiklabs에 로그인합니다.
실습 사용 가능 시간(예: 1:15:00
)을 참고하여 해당 시간 내에 완료합니다.
일시중지 기능은 없습니다. 필요한 경우 다시 시작할 수 있지만 처음부터 시작해야 합니다.
준비가 되면 실습 시작을 클릭합니다.
실습 사용자 인증 정보(사용자 이름 및 비밀번호)를 기록해 두세요. Google Cloud Console에 로그인합니다.
Google Console 열기를 클릭합니다.
다른 계정 사용을 클릭한 다음, 안내 메시지에 이 실습에 대한 사용자 인증 정보를 복사하여 붙여넣습니다.
다른 사용자 인증 정보를 사용하는 경우 오류가 발생하거나 요금이 부과됩니다.
약관에 동의하고 리소스 복구 페이지를 건너뜁니다.
Cloud Shell은 여러 개발 도구가 포함된 가상 머신입니다. 5GB의 영구적인 홈 디렉터리를 제공하며 Google Cloud에서 실행됩니다. Cloud Shell을 사용하면 명령줄을 통해 Google Cloud 리소스에 액세스할 수 있습니다. gcloud
는 Google Cloud의 명령줄 도구입니다. Cloud Shell에 사전 설치되어 있으며 탭 자동 완성을 지원합니다.
Google Cloud Console의 탐색창에서 Cloud Shell 활성화()를 클릭합니다.
계속을 클릭합니다.
환경을 프로비저닝하고 연결하는 데는 몇 분 정도 소요됩니다. 연결되면 사용자 인증도 처리되어 프로젝트가 PROJECT_ID로 설정됩니다. 예를 들면 다음과 같습니다.
활성 계정 이름을 나열합니다.
(출력)
(출력 예시)
프로젝트 ID를 나열합니다.
(출력)
(출력 예시)
Vertex AI를 사용하려면 먼저 Vertex AI API를 사용 설정해야 합니다.
Cloud Shell에서 다음 명령어를 실행하여 API를 사용 설정합니다.
메시지가 표시되면 승인을 클릭합니다.
목표를 확인하려면 내 진행 상황 확인하기를 클릭합니다.
이 실습에서는 FastAPI를 사용하여 빌드한 백엔드 API와 html, css, JavaScript를 사용하여 빌드한 프런트엔드로 구성된 사전 빌드된 웹사이트 앱을 사용합니다. 이 작업에서는 웹사이트 코드를 다운로드하고 코드와 파일 구조를 검토합니다.
Cloud Shell에서 Cloud Storage의 웹사이트 코드 아카이브를 다운로드합니다.
아카이브의 콘텐츠를 추출합니다.
웹사이트 코드와 파일 구조를 보려면 Cloud Shell 메뉴 바에서 편집기 열기를 클릭합니다.
Cloud Shell 편집기의 탐색 메뉴에서 genai-website-mod-app
폴더를 펼칩니다.
이 폴더에는 웹사이트 앱을 빌드하고 배포하는 데 필요한 모든 파일이 들어 있습니다. 파일과 그 용도를 간략히 살펴보겠습니다.
파일/폴더 | 설명 |
---|---|
Dockerfile | Cloud Run을 사용하여 웹사이트 애플리케이션 컨테이너를 빌드하기 위한 Dockerfile |
config.toml | 변수를 사용하여 애플리케이션 구성 |
main.py | 웹사이트 애플리케이션의 기본 FastAPI 진입점 |
models/ | 웹사이트 애플리케이션에서 사용되는 데이터 모델이 포함된 폴더 |
routers/ | 다양한 애플리케이션 기능을 위한 FastAPI API 라우터 |
static/ | CSS, 이미지, JS 파일 등의 정적 웹사이트 애셋 포함 |
templates/ | 웹사이트 애플리케이션 페이지용 Jinja 템플릿 |
utils/ | 웹사이트 애플리케이션의 유틸리티 모듈 |
views/ | 웹사이트 애플리케이션 구현 보기 |
이 작업에서는 블로그 게시물과 같은 비정형 데이터를 검색할 수 있도록 Vertex AI에서 검색 애플리케이션을 만들어 웹사이트의 검색 기능을 구현합니다.
Google Cloud 콘솔에서 탐색 메뉴()를 클릭한 다음 Agent Builder를 선택합니다.
계속 및 API 활성화를 클릭합니다.
앱 만들기 페이지로 자동 리디렉션되면 다음 단계로 이동합니다. 그러지 않으면 새 앱을 클릭합니다.
앱 만들기 페이지의 웹사이트 검색에서 만들기를 클릭합니다.
구성 페이지에서 다음 설정에 따라 일반 검색 앱을 구성하고 나머지 설정은 기본값으로 둡니다.
속성 | 값(입력 또는 선택) |
---|---|
앱 이름 | my-search-app |
회사 또는 조직의 외부 이름 | my-company |
앱 위치 | global(전역) |
계속을 클릭합니다.
데이터 스토어 페이지에서 데이터 스토어 만들기를 클릭합니다.
이 페이지에서는 웹사이트 검색 결과에 사용할 자체 데이터 소스로 검색 앱을 구성합니다.
Cloud Storage를 선택합니다.
기본값으로 폴더를 선택한 상태에서 찾아보기를 클릭합니다.
Cloud Storage 버킷(
blog_posts
폴더를 선택한 다음 선택을 클릭합니다.
폴더의 gs:// URI가 채워집니다.
가져올 데이터의 종류에서 기본값인 비정형 문서 옵션을 선택한 상태로 두고 계속을 클릭합니다.
데이터 스토어 이름에 my-data-store를 입력합니다.
만들기를 클릭합니다.
데이터 스토어 페이지에서 새로 만든 데이터 스토어를 선택합니다. 그런 다음 만들기를 클릭하여 검색 앱을 만듭니다.
이제 Agent Builder가 검색 앱의 Cloud Storage 버킷에서 블로그 게시물 HTML 데이터를 수집하기 시작합니다.
데이터 수집 상태를 보려면 my-data-store
데이터 페이지에서 활동 탭을 클릭합니다.
상태 열에는 현재 상태가 표시됩니다. 가져오기 프로세스가 완료되면 열에 Import completed
가 표시됩니다.
문서를 성공적으로 가져왔는지 확인하려면 문서 탭을 클릭합니다.
Agent Builder에서 검색 앱의 기능을 테스트하여 미리 볼 수 있습니다.
Agent Builder 탐색 메뉴에서 미리보기를 클릭합니다.
검색창에 What is dollar cost averaging and how can it help me?를 입력하고 Enter 키를 누릅니다.
앱이 dollar cost averaging
을 설명하는 응답을 생성하고 Cloud Storage에서 가져온 관련 파일의 발췌문과 링크를 제공합니다.
목표를 확인하려면 내 진행 상황 확인하기를 클릭합니다.
검색 앱을 만들었으므로 이제 앱을 웹사이트나 애플리케이션과 통합할 수 있습니다. 이 실습에서는 검색 API를 사용하여 호출을 수행하고 사이트에 표시되는 응답을 수신합니다. 검색창과 확장 가능한 검색 인터페이스를 자동으로 제공하는 검색 위젯을 웹사이트에 삽입할 수도 있습니다. 이 옵션에 대해 자세히 알아보려면 실습 마지막에 있는 링크를 따라가서 문서를 보세요.
이 작업에서는 이전 작업에서 만든 검색 앱과 통합할 웹사이트 코드를 구성합니다. 그런 다음 테스트를 위해 웹사이트 애플리케이션을 Cloud Run에 배포합니다.
웹사이트 애플리케이션은 Python으로 API를 빌드하기 위한 웹 프레임워크인 FastAPI를 사용하여 빌드됩니다. genai-website-mod-app/routers
폴더에는 search
와 같은 다양한 웹사이트 기능의 라우터 API 구현이 포함되어 있습니다.
Cloud Shell 편집기에서 genai-website-mod-app/routers
폴더로 이동하고 vertex_search.py
파일을 엽니다.
이 파일에는 Python용 클라우드 클라이언트 SDK의 discoveryengine
모듈을 사용하여 검색 API 호출을 구현하는 코드가 포함되어 있습니다. 또한 이 코드는 구성 파일을 파싱하는 Python 모듈인 tomllib
를 사용합니다.
trigger_first_search()
함수의 코드를 봅니다.
이 함수는 경로 파라미터가 포함된 경로 projects/{project_id}/locations/{datastore_location}/collections/default_collection/dataStores/{datastore_id}
를 사용하여 검색 엔진 API 호출을 설정합니다.
경로 파라미터 값을 제공하려면 genai-website-mod-app
폴더에서 config.toml
파일을 수정합니다.
[global]
섹션에서 다음과 같이 구성 속성 값을 바꿉니다.
섹션 | 속성 | 값 |
---|---|---|
global | project_id | |
global | location | |
global | datastore_id | 다음 단계 참조 |
datastore_id
구성 속성 값을 검색 앱의 데이터 스토어 ID 값으로 바꿉니다.
a. datastore_id
값을 가져오려면 Google Cloud 콘솔에서 Agent Builder로 이동하고 데이터를 선택합니다.
b. my-data-store
의 데이터 스토어 ID 값을 복사하여 config.toml
파일에 붙여넣습니다.
다음과 같이 관련 구성 섹션에서 추가 구성 속성을 바꿉니다.
섹션 | 속성 | 값 |
---|---|---|
imagen | bucket_name | |
blog | image_bucket | |
blog | blog_bucket |
파일의 변경사항을 저장합니다.
Cloud Run은 Google의 확장 가능한 인프라에서 애플리케이션 컨테이너를 실행할 수 있는 관리형 컴퓨팅 플랫폼입니다.
이 작업에서는 웹사이트 애플리케이션을 빌드하고 Cloud Run에 배포합니다. 웹사이트에 통합한 검색 기능도 테스트합니다.
현재 위치가 website application
디렉터리인지 확인합니다.
프로젝트 ID, 리전, 웹사이트 애플리케이션 서비스의 환경 변수를 설정합니다.
다음 명령어를 실행하여 Cloud Run에 앱을 빌드하고 배포합니다.
Artifact Registry Docker 저장소를 만들려면 Y를 입력합니다.
서비스가 배포되면 명령어 출력에 서비스에 대한 URL이 생성됩니다.
Cloud Run에서 앱을 테스트하려면 별도의 브라우저 탭 또는 창에서 웹사이트 애플리케이션의 Cloud Run 서비스 URL로 이동합니다.
검색창에 What is dollar cost averaging and how can it help me?를 입력하고 Enter 키를 누릅니다.
검색 결과가 반환되어 웹사이트에 표시되는지 확인합니다.
검색창에 Can you use dollar cost averaging with ETFs?를 입력하고 Enter 키를 눌러 후속 질문을 합니다.
검색 결과에 후속 질문에 대한 답변과 함께 관련 블로그 게시물 링크가 포함되어 있는지 확인합니다.
목표를 확인하려면 내 진행 상황 확인하기를 클릭합니다.
Google의 생성형 AI 도구를 사용하여 웹사이트 문구나 콘텐츠를 만들고 수정할 수 있습니다. 이 작업에서는 웹사이트 콘텐츠 편집자로서 이러한 도구를 사용하여 이 실습에 사용되는 웹사이트의 텍스트와 이미지 콘텐츠를 업데이트합니다.
웹사이트 애플리케이션이 Vertex AI의 Imagen API를 사용하여 이미지를 생성하고 업데이트합니다.
Cloud Shell 편집기에서 config.toml
구성 파일을 엽니다.
[imagen]
섹션의 구성 속성을 검토합니다. 이 섹션에서는 이미지 생성과 캡셔닝에 사용할 모델의 속성과 몇 가지 추가 속성을 정의합니다.
Cloud Shell 편집기에서 routers/vertex_imagen.py
파일을 엽니다.
이 파일에는 다양한 이미지 캡셔닝 및 수정 함수와 해당 API 경로가 정의되어 있습니다.
함수는 utils/imagen.py
파일에 구현되어 있습니다. Cloud Shell 편집기에서 이 파일을 엽니다.
generate_image()
함수를 봅니다.
이 함수는 Python SDK의 vertexai 패키지에 있는 vertexai.preview.vision_models.ImageGenerationModel 클래스를 사용합니다.
이 함수는 먼저 이미지 생성 모델을 로드하고 텍스트 프롬프트와 기타 파라미터를 전달해서 모델에서 generate_images()
함수를 호출하여 이미지를 생성합니다.
웹사이트의 블로그 게시물 중 하나의 이미지를 업데이트해 보겠습니다.
Cymbal Investments 웹사이트의 오른쪽 상단에서 All Blogs(모든 블로그)를 클릭합니다.
웹사이트에 6개의 블로그 게시물이 있는 페이지가 표시됩니다.
링크를 클릭하여 첫 번째 블로그 게시물인 Unleashing the Techie Within: A Journey to FIRE를 봅니다.
블로그 게시물 페이지에는 헤더, 이미지, 텍스트 단락이 포함되어 있습니다.
페이지 콘텐츠를 수정하려면 오른쪽 하단에서 Edit(수정)()을 클릭합니다.
이미지로 마우스를 가져갑니다. 그런 다음 이미지 왼쪽에서 Click to tune(클릭하여 조정)()을 클릭합니다.
Click to tune(클릭하여 조정) 메뉴에서 Generate(생성)를 선택합니다.
이미지 캡션 아래의 프롬프트에 An image of a retired man and woman sitting on a beach enjoying the sunset을 입력합니다. Generate(생성)를 클릭합니다.
페이지 상단으로 스크롤하여 이미지가 생성될 때까지 기다립니다.
새 이미지가 생성된 후 Cloud Storage 이미지 버킷에 업로드됩니다. 블로그 게시물 페이지가 이 새 이미지로 업데이트됩니다.
텍스트 생성 모델을 사용하면 전체 웹 페이지나 일부 인라인 텍스트만 번역할 수 있습니다. 이 하위 작업에서는 웹사이트 블로그 페이지의 인라인 텍스트를 번역합니다.
Cloud Shell 편집기에서 routers/vertex_llm.py
파일을 엽니다.
이 파일에는 다양한 웹페이지 편집 및 번역 함수와 해당 API 경로가 정의되어 있습니다.
소스 파일의 하단으로 스크롤하여 ai_translate_inline()
함수의 코드를 봅니다.
이 함수는 ai_translate_inline_prompt
구성 속성, 사용자가 선택한 텍스트, 사용자가 지정한 도착어를 사용하여 프롬프트를 빌드합니다. 그런 다음 llm_generate_gemini()
함수를 호출하여 모델에서 응답을 생성합니다.
다음은 config.toml
파일의 ai_translate_inline_prompt
구성 속성 값입니다.
llm_generate_gemini()
함수를 보려면 utils/vertex_llm_utils.py
파일을 엽니다.
이 함수는 Python SDK의 vertexai 패키지에 있는 vertexai.generative_models.GenerativeModel 클래스를 사용합니다.
이 함수는 먼저 gemini-1.5-pro
모델을 로드하고, 텍스트 프롬프트와 기타 파라미터를 전달하여 모델에서 generate_content()
함수를 호출하여 응답을 생성합니다.
웹사이트 블로그 페이지의 수정 모드에 있는지 확인합니다. 그렇지 않으면 오른쪽 하단에서 Edit(수정)()을 클릭합니다.
텍스트 단락을 선택하고 Translate tool(번역 도구)을 클릭합니다.
언어 프롬프트 필드에 French를 입력하고 Send(보내기)를 클릭합니다.
몇 초 후 단락 텍스트가 지정한 언어로 번역되어 페이지에서 인라인으로 바뀝니다.
생성 모델을 사용하여 웹사이트 텍스트 콘텐츠를 다듬을 수도 있습니다.
routers/vertex_llm.py
파일에서 ai_refine_text()
함수를 봅니다.
이 함수는 ai_refine_prompt
구성 속성, 웹사이트 콘텐츠에서 사용자가 선택한 텍스트, 사용자 입력 안내를 사용하여 프롬프트를 작성합니다.
다음은 config.toml
파일의 ai_refine_prompt
구성 속성 값입니다.
웹사이트 블로그 페이지의 수정 모드에 있는지 확인합니다. 그렇지 않으면 오른쪽 하단에서 Edit(수정)()을 클릭합니다.
텍스트 단락을 선택하고 Refine TextTool(텍스트 다듬기 도구)을 클릭합니다.
선택한 텍스트의 어조를 보다 격식 있고 영향력 있게 변경하려면 스타일 상자에 formal impactful을 입력합니다. 이 값은 모델을 호출하기 전에 REFINE_PROMPT 문자열로 프롬프트에 추가됩니다.
Send(보내기)를 클릭합니다.
몇 초 후 모델에서 응답이 생성되어 페이지의 원본 텍스트 아래 상자에 표시됩니다.
업데이트된 단락 텍스트를 보고 Replace(바꾸기)를 클릭합니다.
블로그 페이지의 변경사항을 저장하려면 페이지 상단에서 Save(저장)를 클릭합니다.
프롬프트의 최종 값을 보려면 Google Cloud 콘솔 탐색 메뉴()에서 Logging > 로그 탐색기를 선택합니다.
관련 로그 항목을 강조 표시하려면 결과 메뉴바에서 작업 > 결과에서 강조 표시를 클릭합니다.
결과에서 강조 표시에 REFINE_PROMPT를 입력합니다.
목표를 확인하려면 내 진행 상황 확인하기를 클릭합니다.
실습을 완료하면 실습 종료를 클릭합니다. Qwiklabs에서 사용된 리소스를 자동으로 삭제하고 계정을 지웁니다.
실습 경험을 평가할 수 있습니다. 해당하는 별표 수를 선택하고 의견을 입력한 후 제출을 클릭합니다.
별점의 의미는 다음과 같습니다.
의견을 제공하고 싶지 않다면 대화상자를 닫으면 됩니다.
의견이나 제안 또는 수정할 사항이 있다면 지원 탭을 사용하세요.
이 실습에서는 다음 작업을 수행했습니다.
이러한 기능을 사용하면 웹사이트 콘텐츠를 업데이트하는 프로세스를 빌드하고 검토와 게시를 위해 Cloud Storage와 같은 외부 저장소에 변경사항을 저장할 수 있습니다.
Copyright 2024 Google LLC All rights reserved. Google 및 Google 로고는 Google LLC의 상표입니다. 기타 모든 회사명 및 제품명은 해당 업체의 상표일 수 있습니다.
현재 이 콘텐츠를 이용할 수 없습니다
이용할 수 있게 되면 이메일로 알려드리겠습니다.
감사합니다
이용할 수 있게 되면 이메일로 알려드리겠습니다.
한 번에 실습 1개만 가능
모든 기존 실습을 종료하고 이 실습을 시작할지 확인하세요.