如何使用 Gemini 探索及強化現有應用程式

1. 總覽

本程式碼研究室將示範如何使用 Gemini，在現有 API 後端上建構用戶端應用程式。

學習目標

本實驗室旨在說明如何搭配現有應用程式使用 Gemini。在本實驗室中，您將瞭解如何執行下列操作：

部署 AI/機器學習圖片處理快速部署解決方案
使用 Gemini 探索 API 應用程式
使用 Gemini 為 API 應用程式建立用戶端

設定 - 建立新專案

視貴機構政策而定，您可能無法正確部署這項解決方案。

建議：使用具有完整權限的帳戶 (例如個人帳戶)，而非公司或學校帳戶

注意：如果您最近建立的專案具備完整權限，且已啟用 Gemini API，則可繼續使用該專案並略過這個步驟。舉例來說，如果您最近完成了其他 Gemini 程式碼研究室，可以略過這個步驟。

前往 Google Cloud 控制台
按一下目前的專案下拉式選單。
按一下「New Project」
新增專案名稱，然後按一下「建立」
- 建議：使用不重複的專案名稱，讓 Project name 和 Project ID 相同

2. 部署快速部署解決方案

快速部署解決方案是 Google Cloud 預先建立的解決方案範本。本實驗室會使用快速部署解決方案，示範如何運用 Gemini 強化現有應用程式。

前往「AI/機器學習圖片處理」快速部署解決方案詳細資料頁面
- 按一下漢堡選單
- 在「Products & solutions」(產品和解決方案) 子選單中，按一下「Jump Start Solutions」(快速部署解決方案)
- 按一下「使用 Cloud Functions 的 AI/機器學習圖片處理流程」
按一下「DEPLOY」(部署)
- 如果專案未啟用計費功能，請啟用計費功能。
- 確認專案名稱，然後按一下「繼續」
- 選取 us-central1 (Iowa) 做為區域。
- 如果系統提示輸入其他內容，請接受預設值。
- 按一下「部署」。
- 這項作業最多可能需要 15 分鐘。
- 您不需要進行任何變更，但歡迎探索快速部署解決方案的部署作業。

疑難排解

問題：是否看到「Partial deployment.」錯誤訊息？
- 解決方法：很遺憾，這表示您可能需要刪除部署作業並重新開始。應該會有「DELETE DEPLOYMENT」(刪除部署作業) 按鈕。按一下該按鈕，然後重新部署快速入門解決方案。

3. 啟用 Gemini

設定程式碼編輯環境並啟用 Gemini

前往 Cloud Shell 編輯器
- 返回 Google Cloud 控制台
- 在搜尋列中輸入 Cloud Shell Editor，然後從下拉式選單中點選「Cloud Shell 編輯器」。
- 如果使用舊版編輯器，請按一下「試用新版編輯器」。
  - 注意：如果沒有看到「試用新版編輯器」按鈕，表示你可能已在使用新版編輯器。舊版編輯器仍可使用，但檢視畫面會稍有不同。
- 按一下「在新視窗中開啟」圖示
如果出現提示，請登入或授權帳戶。
- 視設定而定，系統可能會在本實驗室中多次提示您授權帳戶，請每次都選取授權。
點選底部狀態列中的「Cloud Code - Sign in」按鈕，如下圖所示。依指示授權外掛程式。
如果系統顯示提示，請點按「選取 Google Cloud 專案」，然後選取您使用的專案
啟用 Gemini
- 按一下 Cloud Code
  - 注意：視螢幕大小而定，可能需要一個或兩個步驟。
- 按一下「說明與意見回饋」部分中的「變更設定」
- 類型 Gemini: Enable
- 選取核取方塊 (如果尚未選取)
- 重新載入 IDE。
- 這會啟用 Gemini in Cloud Code，IDE 中也會顯示 Gemini 狀態列。
如圖所示，按一下右下角的「Gemini」Gemini按鈕，然後選取正確的 Google Cloud 專案。
- 如果看到 Gemini has not been enabled for your selected project 錯誤，按一下「啟用 Gemini API」
確認左側顯示正確的 Google Cloud 專案 (您會看到專案名稱)，且右側狀態列中已啟用 Gemini，如下所示：

4. 下載 Cloud Functions 程式碼

下載程式碼，並使用 Gemini 進一步瞭解快速部署解決方案和您部署的程式碼。

如果已離開，請按一下「Cloud Code」
按一下「Cloud Functions」
- 如果看到「選取專案」按鈕，請按一下該按鈕，然後選取您要使用的專案。
- 按一下「annotate-http」函式
- 點選「下載至新工作區」圖示
使用 annotate-http-1 做為工作區名稱 (應為預設名稱)，然後按一下「OK」
開啟 main.py 檔案
- 按一下「檔案總管」圖示
- 點開 main.py 檔案
按一下 Gemini Chat 圖示
- 注意：視螢幕大小而定，可能需要一個或兩個步驟。
試著向 Gemini 提問。輸入提示詞，例如：
- What is a Jump Start Solution in Google Cloud?
- Explain this code.

重設 Gemini Chat

提示會影響後續提示。舉例來說，如果您在專案 ID 或區域中輸入錯字，這些錯字會沿用至日後的提示和回覆，進而對您的體驗造成負面影響。如果輸入錯誤，或基於其他原因想清除記錄，可以使用垃圾桶圖示重設對話。

重設 Duet 對話垃圾桶醒目顯示

5. 呼叫現有的 Cloud Functions 端點

探索程式碼，並呼叫您在可迅速啟用的解決方案中部署的端點。

輸入提示：
- 重要事項：請將下列提示中的 my-project-with-duet 替換為專案 ID。
- The region is us-central1 and the project id is my-project-with-duet. Write a curl post for the /annotate-http/annotate Cloud Function endpoint that performs label detection on the default eiffel tower image.
- 您應該會收到類似下方的 curl 指令：
```
curl -X POST \
    -H "Authorization: Bearer $(gcloud auth print-access-token)" \
...
```
- 複製這個 curl 指令，以便在下一個步驟中使用
在新終端機中測試指令
- 按一下漢堡選單
- 按一下「終端機」。
- 按一下「New Terminal」(新增終端機)
- 將上一個步驟中的 curl 指令貼到終端機，然後按 Enter 執行指令
- 您應該會收到類似以下的回覆：
```
{
    "labelAnnotations": [
    {
    "mid": "/m/0csby",
    "description": "Cloud",
    "score": 0.97885925,
    "topicality": 0.97885925,
...
```
(選用) 如要使用公開網路上其他圖片執行這項操作，請提示 Duet 執行類似下列的操作：
- Do the same thing with the image https://storage.googleapis.com/cloud-samples-data/vision/eiffel_tower.jpg

疑難排解

不具確定性：Gemini 和其他採用大型語言模型 (LLM) 的產品不具確定性，也就是說，即使輸入內容相同，輸出結果也可能不同。即使完美按照步驟操作，也可能無法順利使用指令。這些疑難排解步驟應有助於解決問題。

產生的 curl 指令應如下所示：

curl -X POST \
    -H "Authorization: Bearer $(gcloud auth print-access-token)" \
    -H "Content-Type: application/json" \
    -d '{
  "image_uri": "gs://cloud-samples-data/vision/eiffel_tower.jpg",
  "features": "LABEL_DETECTION"
}' \
    "https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate"

Gemini 使用 main.py 檔案中的 TEST_IMAGE，這是艾菲爾鐵塔的圖片。

如果 curl 指令無法運作，請檢查下列事項：

問題：網址端點是否包含 .a.run.app？
- 解決方法：Duet 可能會認為您要部署至 Cloud Run。將 https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate 中的 my-project-with-duet 替換為專案 ID，即可取得正確的 Cloud Functions 端點，並用於 curl 指令。
問題：網址端點是否包含 my-project-with-duet？
- 解決方法：將 my-project-with-duet 替換為專案 ID。
問題：網址端點是否缺少 us-central1？
- 解決方法：請確認網址開頭為 us-central1，例如：https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate，並使用您的專案 ID。
問題：視使用的提示而定，有時產生的端點會類似 cloudfunctions.net/annotate-http 或 cloudfunctions.net/annotate。網址端點結尾是否缺少 /annotate-http/annotate？
- 解決方法：請確認網址端點結尾為完整的 API 應用程式路徑 cloudfunctions.net/annotate-http/annotate
問題：cURL 要求可正常運作，但傳回的資訊不多。要求是否包含功能？
- 解決方法：這並不是大問題。如果繼續操作而不變更任何內容，實驗室的其餘部分仍可運作。如要取得更多資訊，可以要求 Duet 在 cURL 要求中新增功能。
問題：答案似乎不正確，或缺乏程式碼專屬的脈絡。你是否在 Cloud Shell 編輯器中使用 Gemini Chat？
- 解決方法：在 Cloud Shell 編輯器中使用 Gemini Chat 時，請嘗試開啟 main.py 檔案，並醒目顯示與提示相關的程式碼。Google Cloud 各處的 Gemini 助理會根據不同情境提供不同答案。

問題：提示回覆仍不盡理想。

解決方法：請嘗試使用其他提示詞，進一步指示 Gemini 生成所需內容。請務必將 my-project-with-duet 替換成專案 ID。範例如下：

Give me the curl command for:

1- Cloud Function running in us-central1 and project my-project-with-duet
2- HTTP POST to the following endpoint: /annotate-http/annotate endpoint
3- JSON in the body: { "image_uri": "gs://cloud-samples-data/vision/eiffel_tower.jpg", "features": "LABEL_DETECTION" }

問題：完成上述所有疑難排解步驟後，聲控器仍無法運作。
- 解決方法：由於 LLM 具有非決定性特質，Duet 可能會生成無法使用的回覆。如果發生這種情況，請複製上方的 cURL 指令範例，然後嘗試在終端機中執行。請務必將 my-project-with-duet 替換成專案 ID。

6. 為 API 建立網頁應用程式用戶端

使用 Gemini 生成 index.html 檔案，呼叫 Jump Start Solution Cloud Function 端點。接著將 index.html 檔案部署至 Firebase 託管，即可查看實際運作的程式碼。

產生用戶端程式碼
- 返回 Gemini 對話方塊，輸入提示：
  - Write an index.html file that takes two inputs: a text input for the image_uri and a dropdown for the features. It should make a post request and display the raw json result to the DOM. The fetch call should use the full url beginning with https. The default image_uri should be gs://cloud-samples-data/vision/eiffel_tower.jpg.
- 複製回應中產生的 index.html 檔案。
  - 注意：後續步驟會用到這個驗證碼，因此請務必妥善保管。
- 關閉 main.py。
建立新的 frontend 目錄
- 你可以要求 Gemini 執行下列操作：
  - What are the console commands to create and navigate to a new frontend directory?
- 您應該會看到類似 mkdir frontend 和 cd frontend 的結果。
- 使用 Cloud Shell 終端機確認您仍在 annotate-http-1 目錄中，然後執行這些指令：
  - cd ~/annotate-http-1
  - mkdir frontend
  - cd frontend
確認您已在 Cloud Shell 終端機中登入正確的專案
- 你可以要求 Gemini 執行下列操作：
  - What is the gcloud command to set my project?
- 您應該會看到類似 gcloud config set project my-project-with-duet
  - 確認專案 ID 正確無誤，然後在 Cloud Shell 終端機中執行指令。
啟用 Firebase
- 在新分頁中 (請讓目前的 Cloud Shell 編輯器保持開啟)，前往 https://console.firebase.google.com/
- 按一下「新增專案」。
- 輸入專案 ID，等待下拉式選單顯示該 ID
- 按一下專案 ID
- 按一下 [Continue] (繼續)。
- 按一下「確認方案」
- 按一下 [Continue] (繼續)。
- 取消選取「啟用這項專案的 Google Analytics 功能」
  - Firebase 建議使用 Google Analytics，但這個應用程式不會使用。
- 按一下 [Continue] (繼續)。
- 關閉這個分頁，然後返回 Cloud Shell 編輯器
- 注意：如果使用者先前未曾使用 Firebase，才需要執行這些步驟，但所有使用者都可以按照相同路徑操作。日後再次執行這項操作時，可以略過這個步驟。
在 Cloud Shell 中登入 Firebase
- 在 Cloud Shell 編輯器終端機中，執行 firebase login --no-localhost 指令
- 前往提供的網址
  - 按一下「Yes, I just ran this command」
  - 按一下「Yes, this is my session ID」
  - 按一下「複製」。
- 返回 Cloud Shell 編輯器終端機
- 將複製的值貼到終端機中顯示「Enter authorization code:」的位置。
- 按下 Enter 鍵
將新網站部署至 Firebase 託管
- 啟動新的 Firebase 專案
  - 你可以要求 Gemini 執行下列操作：
    - What are the commands to initialize and deploy a new firebase application?
  - 您應該會看到類似 firebase init 和 firebase deploy 的結果，並附上操作說明。
  - 由於 Gemini 可能會根據您的偏好設定，建議多種做法，因此我們提供以下具體建議：
    - firebase init
      - 向下鍵至「Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys」
        
        按下 Space 鍵
        
        按下 Enter 鍵
      - 向下鍵至「Use an existing project」
        
        按下 Enter 鍵
      - 如果看到專案清單，請向下箭頭鍵，找到目前使用的專案
        
        按下 Enter 鍵
      - 如果系統要求您Please input the ID of the Google Cloud Project you would like to add Firebase:
        
        輸入專案的專案 ID。
        
        按下 Enter 鍵
      - 針對其餘所有提示，按下 Enter
    - firebase deploy
重新部署應用程式，並呼叫 Cloud Functions API 端點
- 先前的指令應會建立 public 目錄，並在您先前建立的 frontend 目錄中加入 index.html 檔案。您應在 ~/annotate-http-1/frontend/public/index.html 檔案中進行接下來的幾項變更。
- 開啟 index.html 檔案，
  - 按一下「檔案總管」圖示
  - 按一下「frontend」資料夾
  - 按一下「public」資料夾
  - 按一下 index.html 檔案
- 清空現有的 index.html 檔案。
- 將先前複製的程式碼貼到 index.html 檔案中
- 執行 firebase deploy 來部署新應用程式
- 前往 Firebase 託管網址，確認是否正常運作！
  - 注意：你可能需要強制重新整理網站，才能看到更新內容。

疑難排解

index.html 檔案應如下所示：

<!DOCTYPE html>
<html>
<head>
<title>Vision API Annotate Image</title>
</head>
<body>
<h1>Vision API Annotate Image</h1>
<form id="annotate-form" action="https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate" method="POST">
    <label for="image-uri">Image URI:</label>
    <input type="text" id="image-uri" name="image_uri" value="gs://cloud-samples-data/vision/eiffel_tower.jpg">
    <br>
    <label for="features">Features:</label>
    <select id="features" name="features">
    <option value="LABEL_DETECTION">LABEL_DETECTION</option>
    <option value="TEXT_DETECTION">TEXT_DETECTION</option>
    <option value="IMAGE_PROPERTIES">IMAGE_PROPERTIES</option>
    </select>
    <br>
    <input type="submit" value="Annotate">
</form>

<div id="result"></div>

<script>
    const form = document.getElementById('annotate-form');

    form.addEventListener('submit', (event) => {
    event.preventDefault();

    const imageUri = document.getElementById('image-uri').value;
    const features = document.getElementById('features').value;

    const data = {
        image_uri: imageUri,
        features: features,
    };

    fetch('https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate', {
        method: 'POST',
        headers: {
        'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
    })
        .then((response) => response.json())
        .then((result) => {
        const resultElement = document.getElementById('result');
        resultElement.innerHTML = JSON.stringify(result, null, 2);
        });
    });
</script>
</body>
</html>

如果網站無法正常運作，請檢查下列事項：

問題：404 (找不到)。fetch 方法中使用的網址是否包含 my-project-with-duet？
- 解決方法：將 my-project-with-duet 替換為專案 ID。
問題：404 (找不到)。fetch 方法中使用的網址是否缺少完整網址？
- 解決方法：請務必在 fetch 方法中加入完整網址。它看起來應該像 https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate
問題：提示回覆仍不盡理想。
- 解決方法：請嘗試使用其他提示詞，進一步指示 Gemini 生成所需內容。請務必將 my-project-with-duet 替換成專案 ID。範例如下：
  - Write an index.html file that takes two inputs: a text input for the image_uri and a dropdown for the features. It should make a post request and display the raw json result to the DOM. The fetch call should use https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate. The default image_uri should be gs://cloud-samples-data/vision/eiffel_tower.jpg.
問題：網站已部署，但無法正常運作嗎？
- 解決方法：由於 LLM 具有非決定性特質，Duet 可能會生成無法使用的回覆。如果發生這種情況，請複製上方的 index.html 範例，然後嘗試使用 firebase deploy 重新部署。請務必將 my-project-with-duet 替換成專案 ID。

7. (選填) 開放式探索

使用 Gemini 和編輯器內建的助理，為應用程式新增 CSS 樣式，完成後再次部署應用程式！如需靈感，可以試試以下提示範例：
- Make this index.html file use material design.
其他建議：
- 產生的網站應可搭配任何公開http圖片。使用 Duet 在頁面上顯示圖片。

8. (選用) 刪除專案

如要避免系統針對今天建立的資源收費，可以詢問 Duet 該怎麼做。

輸入提示：
- How can I delete my project?
- 您應該會看到類似 gcloud projects delete my-project-with-duet 的結果。
- 重要事項：請將上一個指令中的 my-project-with-duet 替換為您的專案 ID。
執行 gcloud projects delete 指令，移除今天建立的所有資源。