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

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

1. 소개

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

그런 다음 Google에서는 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 프로젝트에서 Cloud를 위한 Gemini를 사용 설정합니다. 아래 단계를 따르세요.

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

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

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

Cloud를 위한 Gemini가 질문에 대한 답변을 제공합니다. 오른쪽 상단에 있는 아이콘을 클릭하면 Cloud Chat을 위한 Gemini 창을 닫을 수 있습니다.

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 상태 메시지에서 아래와 같이 오른쪽의 상태 표시줄에서 Code Assist도 사용 설정되어 있는지 확인합니다.

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

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

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

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

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

4. Gemini와 채팅하기

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

그러면 Cloud Shell IDE 내에 Chat: GeminiI 창이 표시되며 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를 클릭합니다.
메시지가 나타나면 로그인하거나 계정을 승인합니다.
웹훅 함수를 클릭합니다.
새 작업공간에 다운로드 아이콘 을 클릭합니다.
웹훅-1을 작업공간 이름 (기본값이어야 함) 또는 다른 이름으로 사용하고 확인을 클릭합니다.
그러면 Cloud Shell IDE에서 코드가 열립니다.

6. 기존 프로젝트 검토

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

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

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

main.py 파일의 모든 코드 또는 특정 코드 스니펫을 강조 표시합니다. Gemini Chat을 클릭하고 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 Cloud 함수가 호출되고 문서에서 찾은 텍스트가 요약됩니다. 출력은 summary_dataset라는 이름의 BigQuery 데이터 세트와 summary_table 테이블에 작성됩니다.

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

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

위 절차는 요약하려는 PDF를 업로드하기 위한 수동적인 단계별 절차입니다. 애플리케이션의 웹 프런트엔드를 빌드해 보면 어떨까요?

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

파일을 선택하고 업로드할 수 있는 기본 HTML 양식으로, 요약해야 합니다.
업로드가 완료되면 나머지 기능이 정상적으로 작동하도록 <PROJECT_ID>_uploads 버킷에 파일을 작성해야 합니다.

Duet AI를 지원하기 위해 Python과 웹 애플리케이션용 Flask 프레임워크를 사용하여 빌드하겠습니다.

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

모든 파일을 닫고 Gemini Chat 창에 다음과 같은 프롬프트를 입력합니다.

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 Chat 창에 다음과 같은 프롬프트를 입력합니다.

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?

그러면 다음과 비슷한 대답이 표시됩니다.

루트 폴더에 template이라는 폴더를 만들고 index.html 파일을 여기에 저장합니다.

Google Cloud Storage 버킷에 파일을 저장할 수 없는 경우 app.py 파일에서 예외를 처리하려고 합니다. app.py 파일을 열어 두고 Gemini Chat 창에 다음 프롬프트를 입력합니다.

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로 위 프롬프트에서 제공한 파일이어야 함).

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를 사용하여 성공적으로 작업하여 Gemini Code Assist가 코드 생성, 코드 완성, 코드 요약에 어떻게 도움이 되는지 파악하고 Google Cloud 관련 질문에 대한 답변을 얻으셨습니다.