使用 Gemini Code Assist 探索及強化 AI 摘要快速部署解決方案

1. 簡介

在這個程式碼研究室中，我們會說明現有的快速部署解決方案「AI 摘要」，這個解決方案使用 Vertex AI 模型為已上傳至 Google Cloud Storage 的 PDF 文件產生摘要。

接著，Gemini Code Assist 的用途如下：

• 瞭解支援 Cloud 函式的 Python 程式碼，也就是從 PDF 文件擷取文字、總結文字並將結果寫入 BigQuery 的作業。
• 我們會全程善用 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 專案中啟用 Gemini 版 Cloud

我們現在會在 Google Cloud 專案中啟用 Gemini 版 Cloud。步驟如下：

1. 請前往 https://console.cloud.google.com，確認已選取這個研究室要執行的 Google Cloud 專案。按一下畫面右上方的「開啟 Gemini」圖示。

2. Cloud Chat 專用 Gemini 視窗隨即會在控制台右側開啟。按一下「啟用」按鈕，如下所示。如果系統未顯示「啟用」按鈕，而是看到 Chat 介面，可能是因為專案已啟用 Gemini 版 Cloud，您可以直接進行下一個步驟。

3. 啟用之後，只要查詢一、兩個查詢，就能測試 Cloud 專用 Gemini。目前顯示了幾項查詢範例，但你可以試試 What is Cloud Run?

Cloud 專用 Gemini 會回覆您的問題。您可以點選右上角的 圖示，關閉 Gemini 版 Cloud Chat 視窗。

在 Cloud Shell IDE 中啟用 Gemini Code Assist

我們將在程式碼研究室的其餘部分，使用 Cloud Shell IDE (全代管的程式碼 OSS 開發環境)。您必須在 Cloud Shell IDE 中啟用及設定 Code Assist，步驟如下：

1. 前往 ide.cloud.google.com。IDE 可能需要一段時間才會顯示，請耐心等候。
2. 按一下底部狀態列中的「Cloud Code - 登入」按鈕 (如圖所示)。按照指示授權外掛程式。如果您在狀態列中看到「Cloud Code - no project」，請選取該專案，然後從您打算使用的專案清單中選取特定的 Google Cloud 專案。

3. 點選畫面右下角的「Gemini」Gemini按鈕，然後選取最後一次正確的 Google Cloud 專案。如果系統要求您啟用 Cloud AI Companion API，請啟用該 API 並繼續操作。
4. 選取 Google Cloud 專案後，請確認狀態列的 Cloud Code 狀態訊息中會顯示，且右側狀態列中顯示 Code Assist 已啟用，如下所示：

Gemini Code Assist 已可使用！

Gemini Code Assist 也適用於本機 IDE，例如 Visual Studio Code 或 JetBrains IntelliJ。您也可以在 Google Cloud Workstations 中找到該程式庫。本程式碼研究室著重於 Cloud Shell IDE，也就是讓所有人都能使用相同的環境，不過您也可以試試慣用的設定，並透過這個連結瞭解詳情。

選用：如果在右下方的狀態列中沒有看到 Gemini，則必須啟用 Gemini 版 Cloud Code。請先前往「Cloud Code Extension」→「Settings」，然後輸入「Gemini」文字，確認已在 IDE 中啟用 Gemini，如下所示。確認已勾選該核取方塊。請重新載入 IDE。這麼做會啟用 Gemini 版 Cloud Code，IDE 狀態列中會顯示 Gemini 圖示。

3. 部署 AI 摘要快速啟動解決方案

1. 前往生成式 AI 文件摘要解決方案
2. 按一下「部署」

• 如果專案沒有啟用計費功能，請啟用計費功能。
• 選取 us-central1 做為地區。
• 按一下「部署」。
• 這項作業最多可能需要 15 分鐘才能完成。
• 您無須進行任何變更，但隨時可以點選解決方案部署作業詳細資料頁面中的「探索這個解決方案」按鈕，探索快速部署解決方案的部署作業。

4. 與 Gemini 對話

我們先學習如何與 Gemini 對話。Gemini 可做為 Cloud Shell IDE 中的對話助理，做為 VS Code 的 Cloud Code 擴充功能的一部分。按一下左側導覽列中的「Gemini」按鈕即可前往。請在左側導覽面板中找出 Gemini 圖示 ，按一下該圖示。

Cloud Shell IDE 中會開啟「Chat：GeminiI」窗格，您也可以與 Gemini 對話，在 Google Cloud 中取得協助。

讓我們使用 Gemini 對話窗格輸入提示，並查看 Gemini 的回覆。輸入下列提示：

What is Cloud Run? 

Gemini 應在回覆時提供 Cloud Run 的詳細資料。提示是指透過問題或陳述來說明所需協助。在提示中加入 Google Cloud 分析的現有程式碼背景資訊，可得到更實用或完整的回覆。如要進一步瞭解如何撰寫提示來生成優質回覆，請參閱「為 Gemini 版 Google Cloud 撰寫更優質的提示」。

您可以試用下列提示範例，或嘗試自行提出有關 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 函式。
• 按一下「下載至新的工作區」圖示
• 
• 請使用 Webhook-1 做為工作區名稱 (應為預設名稱) 或任何其他名稱，然後按一下「確定」。
• 即可在 Cloud Shell IDE 中開啟程式碼。

6. 檢查現有專案

這個 Jump Start 解決方案如下：

查看從「上傳 PDF」功能到 Cloud Storage 的流程。透過 main.py 檔案上傳 PDF 檔案後，系統會叫用這個 Cloud 函式。

按一下該檔案。Cloud 函式的進入點是 entrypoint 函式，最終會叫用 cloud_event_entrypoint 函式來擷取 PDF 中的文字，然後叫用使用 Vertex AI 模型的 summarization_entrypoint，分別概述結果並將結果寫入 GCS 和 BigQuery。

醒目顯示 main.py 檔案中的所有程式碼，或任何特定程式碼片段。點選 Gemini Chat 並提供下列提示：Explain this。

您應該可以看見此程式碼的說明。

7. 執行範例執行作業

根據架構圖，我們會將檔案上傳到 <PROJECT_ID>_uploads 值區，讓 Cloud 函式叫用。

確認手邊有 PDF 範例可供您上傳，且想要製作摘要。

• 前往 Cloud 控制台的「Google Cloud Storage」。
• 前往 <PROJECT_ID>_uploads 值區。按一下「上傳檔案」連結，然後上傳 PDF 範例檔案。

如果您沒有 PDF 範例檔案，可以使用我們建立的其中一個範例。在 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 檔案，如何為應用程式建立網路前端？

網路前端的需求很簡單：

1. 基本的 HTML 表單，能讓我們選取和上傳需要摘要的檔案。
2. 如果檔案上傳成功，應寫入 <PROJECT_ID>_uploads 值區，讓其他功能正常運作。

我們將使用 Python 和 Flask 架構建構網頁應用程式，開發 Duet AI 技術。

我們開始吧！我們會假設 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?

它應提供類似以下的答案：

繼續在根資料夾中建立一個名稱為 templates 的資料夾，然後將 index.html 檔案儲存在該資料夾中。

我們希望在 app.py 檔案內進行一些例外狀況處理，以防檔案無法儲存至 Google Cloud Storage 值區。請將 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 中的「Command Palette」(指令面板)，如下所示：

輸入 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 網址，這個網址應該會顯示 index.html 網頁

從本機電腦上傳檔案，系統應會成功處理檔案。

如要查看摘要，請前往我們在研究室先前看到的 BigQuery 資料集和資料表。您也可以查看 Cloud Storage 值區 (&lt;PROJECT_ID&gt;_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 相關問題。

13. 參考說明文件

• Gemini Code Asssit 首頁
• 使用 Gemini 輔助及開發 AI - 說明文件
• Gemini 應用實例