Gemini Code Assist를 사용하여 AI 요약 점프 스타트 솔루션을 탐색하고 개선합니다.

1. 소개

이 Codelab에서는 Vertex AI 모델을 사용하여 Google Cloud Storage에 업로드된 PDF 문서를 요약하는 기존 점프 스타트 솔루션인 AI 요약을 살펴봅니다.

그런 다음 Gemini Code Assist를 사용하여 다음 작업을 수행합니다.

PDF 문서에서 텍스트를 추출하고, 요약하고, 결과를 BigQuery에 쓰는 작업을 실행하는 Cloud 함수의 Python 코드를 이해합니다.
이 과정에서 Gemini Code Assist의 도움을 받아 새로운 기능을 작성합니다. 웹 애플리케이션 (Python Flask 애플리케이션)을 개발하고 애플리케이션을 로컬에서 실행하여 코드를 확인합니다.
원하는 경우 이 애플리케이션을 Cloud Run에 배포하고 Material Design을 사용하여 웹 애플리케이션의 디자인 (미학)을 개선할 수도 있습니다.

실습할 내용…

AI 요약 점프 스타트 솔루션을 배포하고 프로세스 흐름을 트리거하여 작동 방식을 이해합니다.
그런 다음 Cloud Shell IDE를 사용하여 점프 스타트 솔루션의 기존 코드를 다운로드하고 Gemini Code Assist를 사용하여 코드를 이해합니다.
Gemini Code Assist Cloud Shell IDE를 사용하여 새로운 기능의 코드를 생성합니다.

학습할 내용…

AI 요약 점프 스타트 솔루션의 작동 방식
코드 생성, 코드 완성, 코드 요약과 같은 여러 개발자 작업에 Gemini Code Assist를 사용하는 방법

필요한 항목…

Chrome 웹브라우저
Gmail 계정
결제가 사용 설정된 Cloud 프로젝트
Cloud 프로젝트에 Gemini Code Assist가 사용 설정됨

이 실습은 초보자를 포함한 모든 수준의 개발자를 대상으로 합니다. 샘플 애플리케이션은 Python 언어로 작성되어 있지만 Python 프로그래밍에 익숙하지 않아도 내용을 이해할 수 있습니다. 여기서는 개발자를 위한 Gemini Code Assist의 기능을 익히는 데 중점을 둘 예정입니다.

2. 설정

이 섹션에서는 실습을 시작하는 데 필요한 모든 사항을 다룹니다.

Google Cloud 프로젝트에서 Cloud를 위한 Gemini 사용 설정

이제 Google Cloud 프로젝트에서 Gemini for Cloud를 사용 설정합니다. 아래 단계를 따르세요.

https://console.cloud.google.com에서 이 실습을 위해 사용할 Google Cloud 프로젝트를 선택했는지 확인합니다. 오른쪽 상단에 있는 Gemini 열기 아이콘을 클릭합니다.

Gemini for Cloud 채팅 창이 콘솔 오른쪽에 열립니다. 아래와 같이 사용 설정 버튼을 클릭합니다. 사용 설정 버튼이 표시되지 않고 대신 Chat 인터페이스가 표시되는 경우 이미 프로젝트에 Gemini for Cloud를 사용 설정한 것일 수 있으므로 다음 단계로 바로 이동해도 됩니다.

사용 설정되면 Gemini for Cloud에 한두 개의 쿼리를 요청하여 테스트할 수 있습니다. 몇 가지 샘플 쿼리가 표시되는데, What is Cloud Run? 등을 검색해 보세요.

Gemini for Cloud가 질문에 답합니다. 오른쪽 상단에 있는 아이콘을 클릭하면 Gemini for Cloud 채팅 창을 닫을 수 있습니다.

Cloud Shell IDE에서 Gemini Code Assist 사용 설정

Codelab의 나머지 부분에서는 완전 관리형 Code OSS 기반 개발 환경인 Cloud Shell IDE를 사용합니다. Cloud Shell IDE에서 Code Assist를 사용 설정하고 구성해야 하며 단계는 아래와 같습니다.

ide.cloud.google.com을 방문합니다. IDE가 표시되는 데 시간이 걸릴 수 있으니 잠시 기다려 주세요.
그림과 같이 하단 상태 표시줄에서 Cloud Code - 로그인 버튼을 클릭합니다. 안내에 따라 플러그인을 승인합니다. 상태 표시줄에 'Cloud Code - 프로젝트 없음'이 표시되면 이를 선택한 다음 작업하려는 프로젝트 목록에서 특정 Google Cloud 프로젝트를 선택합니다.

오른쪽 하단에 있는 Gemini 버튼을 클릭하고 올바른 Google Cloud 프로젝트를 다시 한번 선택합니다. Cloud AI Companion API를 사용 설정하라는 메시지가 표시되면 사용 설정하고 계속 진행합니다.
Google Cloud 프로젝트를 선택한 후 상태 표시줄의 Cloud Code 상태 메시지에서 아래 표시된 것처럼 오른쪽에 코드 어시스턴트가 사용 설정되어 있는지 확인합니다.

이제 Gemini Code Assist를 사용할 수 있습니다.

선택사항: 오른쪽 하단의 상태 표시줄에 Gemini가 표시되지 않으면 Cloud Code에서 Gemini를 사용 설정해야 합니다. 그 전에 Cloud Code 확장 프로그램 → 설정으로 이동하여 IDE에서 Gemini가 사용 설정되어 있는지 확인한 후 아래와 같이 Gemini 텍스트를 입력합니다. 체크박스가 선택되어 있는지 확인합니다. IDE를 새로고침해야 합니다.그러면 Cloud Code에서 Gemini가 사용 설정되고 상태 표시줄에 Gemini 아이콘이 표시됩니다.

3. AI 요약 점프 스타트 솔루션 배포

생성형 AI 문서 요약 솔루션으로 이동
배포를 클릭합니다.

프로젝트에 결제가 사용 설정되어 있지 않으면 결제를 사용 설정합니다.
리전으로 us-central1을 선택합니다.
배포를 클릭합니다.
최대 15분이 걸릴 수 있습니다.
변경할 필요는 없지만 솔루션 배포 세부정보 페이지에서 이 솔루션 살펴보기 버튼을 클릭하여 점프 스타트 솔루션 배포를 자유롭게 살펴볼 수 있습니다.

4. Gemini와 채팅하기

먼저 Gemini와 채팅하는 방법을 알아보겠습니다. Gemini는 VS Code에서 Cloud Code 확장 프로그램의 일부이며, Cloud Shell IDE 내에서 채팅 어시스턴트로 사용할 수 있습니다. 왼쪽 탐색 메뉴에서 Gemini 버튼을 클릭하면 불러올 수 있습니다. 왼쪽 탐색 툴바에서 Gemini 아이콘 을 찾아 클릭합니다.

그러면 Cloud Shell IDE 내에 채팅: Gemini 창이 표시되며 Gemini와의 채팅을 통해 Google Cloud 관련 도움말을 확인할 수 있습니다.

Gemini 채팅 창을 사용하여 프롬프트를 입력하고 Gemini의 대답을 확인해 보겠습니다. 다음 프롬프트를 입력합니다.

What is Cloud Run?

Gemini가 Cloud Run에 대한 세부정보로 응답해야 합니다. 프롬프트는 필요한 도움을 설명하는 질문이나 문장입니다. 프롬프트에는 Google Cloud에서 더 유용하고 완전한 대답을 제공하기 위해 분석하는 기존 코드의 컨텍스트를 포함할 수 있습니다. 적절한 대답을 생성하는 프롬프트를 작성하는 방법에 대한 자세한 내용은 Google Cloud의 Gemini에 대해 더 나은 프롬프트 작성을 참고하세요.

다음 샘플 프롬프트 또는 직접 만든 프롬프트를 사용하여 Google Cloud에 관해 질문해 보세요.

What is the difference between Cloud Run and Cloud Functions?
What services are available on Google Cloud to run containerized workloads?
What are the best practices to optimize costs while working with Google Cloud Storage?

상단의 휴지통 아이콘을 확인하세요. Code Assist 채팅 기록의 컨텍스트를 재설정하는 방법입니다. 또한 이 채팅 상호작용은 IDE에서 작업 중인 파일과 관련이 있습니다.

5. Cloud Code에서 점프 스타트 솔루션 Cloud 함수 다운로드

Cloud Shell 편집기를 사용 중이라고 가정하고 다음 단계를 따르세요.

Cloud Code 를 클릭합니다.
참고: 화면 크기에 따라 한 단계 또는 두 단계를 거쳐야 할 수 있습니다.

또는

Cloud Functions를 클릭합니다.
메시지가 나타나면 로그인하거나 계정을 승인합니다.
웹훅 함수를 클릭합니다.
새 작업공간에 다운로드 아이콘 을 클릭합니다.
작업공간 이름으로 webhook-1 (기본값) 또는 다른 이름을 사용하고 확인을 클릭합니다.
그러면 Cloud Shell IDE에서 코드가 열립니다.

6. 기존 프로젝트 검토

이 점프 스타트 솔루션은 아래와 같습니다.

PDF 업로드 기능에서 Cloud Storage로의 흐름을 검토합니다. PDF 파일이 업로드될 경우 호출되는 Cloud 함수는 main.py 파일에 제공됩니다.

해당 파일을 클릭합니다. 클라우드 함수의 진입점은 entrypoint 함수이며, 이 함수는 결국 PDF에서 텍스트를 추출하는 cloud_event_entrypoint 함수를 호출한 다음 Vertex AI 모델을 사용하여 결과를 각각 GCS와 BigQuery에 요약하고 쓰는 summarization_entrypoint를 호출합니다.

main.py 파일의 모든 코드 또는 특정 코드 스니펫을 강조 표시합니다. Gemini 채팅을 클릭하고 Explain this 프롬프트를 입력합니다.

이렇게 하면 코드에 대한 설명이 제공됩니다.

7. 샘플 실행

아키텍처 다이어그램에 따라 Cloud 함수가 호출되도록 <PROJECT_ID>_uploads 버킷에 파일을 업로드합니다.

업로드할 수 있고 요약을 원하는 샘플 PDF가 준비되어 있는지 확인합니다.

Cloud 콘솔에서 Google Cloud Storage로 이동합니다.
<PROJECT_ID>_uploads 버킷으로 이동합니다. 파일 업로드 링크를 클릭하고 샘플 PDF를 업로드합니다.

샘플 PDF 파일이 없는 경우 Google에서 만든 샘플 중 하나를 사용할 수 있습니다. Cloud Shell에서 다음 명령어를 실행합니다.

gsutil cp \
    gs://arxiv-dataset/arxiv/cmp-lg/pdf/9410/9410009v1.pdf \
    gs://<PROJECT_ID>_uploads/

파일이 성공적으로 업로드되면 webhook 클라우드 함수가 호출되어 문서에 있는 텍스트를 요약합니다. 출력은 summary_dataset이라는 BigQuery 데이터 세트와 summary_table 테이블에 기록됩니다.

테이블을 쿼리하여 요약 결과를 확인합니다.

8. 애플리케이션용 웹 애플리케이션 클라이언트 만들기

위 프로세스는 요약하려는 PDF를 업로드하는 단계별 수동 프로세스입니다. 애플리케이션의 웹 프런트엔드를 빌드해 볼까요?

웹 프런트엔드의 요구사항은 간단합니다.

요약해야 하는 파일을 선택하고 업로드할 수 있는 기본 HTML 양식
업로드에 성공한 파일은 나머지 기능이 그대로 작동하도록 <PROJECT_ID>_uploads 버킷에 작성되어야 합니다.

Duet AI의 지원을 받아 Python과 웹 애플리케이션용 Flask 프레임워크를 사용하여 이를 빌드합니다.

이제 시작해 볼까요? Cloud Shell IDE에서 동일한 작업공간이 열려 있다고 가정합니다.

모든 파일을 닫고 Gemini 채팅 창에 다음 프롬프트를 입력합니다.

Write a Python Flask application that has a couple of routes:
The root route / should serve the index.html page using the render_template framework. The /upload route should accept a file being uploaded and write that file to a Cloud Storage bucket.

이상적으로는 다음과 같은 코드가 생성되어야 합니다.

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    file = request.files['file']
    filename = file.filename
    bucket = storage.Client().bucket('your-bucket-name')
    blob = bucket.blob(filename)
    blob.upload_from_string(
        file.read(),
        content_type=file.content_type
    )
    return redirect(url_for('index'))

if __name__ == '__main__':
    app.run(debug=True)

위 코드를 IDE 작업공간의 루트에 app.py로 저장합니다.

애플리케이션이 포트 8080에서 실행되고 호스트 주소 0.0.0.0을 사용하도록 하려면 Gemini에 app.run 문을 수정하라고 프롬프트합니다.

다음 프롬프트를 입력합니다.

Modify the app.py to run on port 8080 and host address 0.0.0.0

이제 코드가 다음과 같이 표시됩니다.

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    file = request.files['file']
    filename = file.filename
    bucket = storage.Client().bucket('your-bucket-name')
    blob = bucket.blob(filename)
    blob.upload_from_string(
        file.read(),
        content_type=file.content_type
    )
    return redirect(url_for('index'))

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=8080)

다음으로 index.html도 생성되도록 하겠습니다. Gemini 채팅 창에 다음 프롬프트를 입력합니다.

Provide the index.html file

index.html에 대해 아래와 같은 코드를 제공해야 합니다.

<!DOCTYPE html>
<html>
<head>
  <title>File Upload</title>
</head>
<body>
  <h1>File Upload</h1>
  <form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="Upload">
  </form>
</body>
</html>

Gemini에게 index.html 파일을 저장할 위치를 알려 달라고 요청할 수 있습니다. 다음 프롬프트를 입력합니다.

Since this is using the render_template framework, where should this file be saved?

다음과 비슷한 답변이 표시됩니다.

루트 폴더에 templates라는 폴더를 만들고 그 안에 index.html 파일을 저장합니다.

파일이 Google Cloud Storage 버킷에 저장되지 않는 경우를 대비하여 app.py 파일에 예외 처리를 추가하고 싶습니다. app.py 파일을 열어 두고 Gemini 채팅 창에 다음 프롬프트를 입력합니다.

modify the app.py to have exception handling in the upload() function. The success or failure should be returned to the index page.

이제 아래와 같이 예외 처리가 추가됩니다.

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    try:
        file = request.files['file']
        filename = file.filename
        bucket = storage.Client().bucket('your-bucket-name')
        blob = bucket.blob(filename)
        blob.upload_from_string(
            file.read(),
            content_type=file.content_type
        )
        return redirect(url_for('index'))
    except Exception as e:
        return render_template('index.html', error=str(e))

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=8080)

index.html에 오류 메시지를 표시해야 하므로 이 파일도 수정해야 합니다. 아래 프롬프트를 통해 Gemini에게 요청해 보겠습니다.

update the index.html to display the error message

그러면 아래와 같이 업데이트된 index.html이 표시됩니다.

<!DOCTYPE html>
<html>
<head>
  <title>File Upload</title>
</head>
<body>
  <h1>File Upload</h1>
  {% if error %}
    <p style="color: red;">{{ error }}</p>
  {% endif %}
  <form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="Upload">
  </form>
</body>
</html>

위의 각 단계에서 app.py 및 index.html 파일에 변경사항을 저장해야 합니다.

app.py에 올바른 버킷 이름이 없으므로 Gemini에 해당 정보를 제공하고 변경을 요청할 수 있습니다. 또한 storage.Client() 인스턴스의 프로젝트 ID를 제공해야 합니다. 따라서 Gemini Chat 창에 다음 프롬프트를 입력하고 (<PROJECT_ID>를 Google Cloud 프로젝트 ID로 바꿈) 변경사항을 적용합니다.

프롬프트 1

My bucket name is gemini-for-devs-demo_uploads, please change the code to use that.

프롬프트 2

My project id is gemini-for-devs-demo, please change the storage.Client() to use that.

최종 app.py 파일은 다음과 같습니다 (아래에 내 프로젝트 ID가 표시되어 있지만 이상적으로는 작업 중인 ID이자 위의 프롬프트에 제공한 ID여야 함).

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    try:
        file = request.files['file']
        filename = file.filename
        bucket = storage.Client(project='gcp-experiments-349209').bucket('gcp-experiments-349209_uploads')
        blob = bucket.blob(filename)
        blob.upload_from_string(
            file.read(),
            content_type=file.content_type
        )
        return redirect(url_for('index'))
    except Exception as e:
        return render_template('index.html', error=str(e))

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=8080)

9. 웹 애플리케이션을 로컬로 실행

requirements.txt 파일에 정의된 종속 항목으로 Python 환경을 만듭니다. 아래와 같이 Cloud Shell IDE의 명령 팔레트로 이동합니다.

Python: Create Environment를 입력한 다음 단계를 따라 (venv), Python 3.x 인터프리터, requirements.txt 파일을 사용하여 가상 환경을 만듭니다. 이렇게 하면 필요한 환경이 생성됩니다.

아래와 같이 터미널을 실행합니다.

터미널에서 다음 명령어를 입력합니다.

python app.py

Flask 앱이 실행되고 다음과 같이 표시됩니다.

(.venv) romin@cloudshell:~/webhook-2 (gcp-experiments-349209)$ python app.py 
 * Serving Flask app 'app'
 * Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on all addresses (0.0.0.0)
 * Running on http://127.0.0.1:8080
 * Running on http://10.88.0.3:8080
Press CTRL+C to quit
 * Restarting with watchdog (inotify)
 * Debugger is active!
 * Debugger PIN: 989-296-833

http://127.0.0.1:8080 URL을 방문하면 index.html 페이지가 표시됩니다.

로컬 머신에서 파일을 업로드하면 파일이 성공적으로 처리됩니다.

실습에서 이전에 살펴본 BigQuery 데이터 세트와 테이블로 이동하여 요약 내용을 확인할 수 있습니다. 또는 Cloud Storage 버킷 (<PROJECT_ID>_output)을 확인할 수 있습니다.

10. (선택사항) 탐색 분석 열기 - Cloud Run에 배포

Cloud Run에 애플리케이션을 배포할 수 있습니다.
다음 프롬프트를 사용하여 Gemini Code Assist에 질문합니다 (위 프롬프트의 여러 변형을 시도해야 할 수 있음).

I don't want to build a container image but deploy directly from source. What is the gcloud command for that?

11. (선택사항) 탐색 분석 열기 - CSS 스타일 추가

Gemini Code Assist와 편집기 내 어시스턴트를 사용하여 애플리케이션에 CSS 스타일을 추가하고 완료되면 애플리케이션을 다시 배포하세요.
index.html 파일을 열고 Gemini Chat에 다음 프롬프트를 입력합니다. Can you apply material design styles to this index.html?
코드를 확인하고 작동하는지 확인합니다.

12. 축하합니다.

수고하셨습니다. 샘플 프로젝트에서 Gemini Code Assist를 성공적으로 사용하여 이것이 코드 생성, 코드 완성, 코드 요약에 어떻게 도움이 되는지 파악하고 Google Cloud 관련 질문에 대한 답변을 얻으셨습니다.