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

1. 總覽

本程式碼研究室將說明如何使用 Gemini，在現有的 API 後端為基礎建構用戶端應用程式。

學習目標

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

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

設定 - 建立新專案

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

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

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

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

2. 部署可迅速啟用的解決方案

快速部署解決方案是 Google Cloud 預先建構的解決方案範本。本研究室使用快速開始解決方案，說明 Gemini 如何強化現有應用程式。

1. 前往「AI/ML 圖片處理快速啟動解決方案」詳細資料頁面
   • 按一下漢堡選單
   • 在「產品與解決方案」子選單中，按一下「快速部署解決方案」
   • 按一下「AI/ML Image Processing on Cloud Functions」
2. 按一下「部署」
   • 如果專案未啟用計費功能，請啟用計費功能。
   • 確認專案名稱，然後按一下「繼續」
   • 選取 us-central1 (Iowa) 做為地區。
   • 如果出現輸入其他輸入提示的提示，請接受預設值。
   • 按一下「部署」。
   • 這項作業最多可能需要 15 分鐘才能完成。
   • 您不需要進行任何變更，但歡迎探索快速部署解決方案的部署方式。

疑難排解

1. 問題：您是否有看到顯示 Partial deployment. 的錯誤訊息？
   • 解決方案：遺憾的是，您應該刪除部署作業並重新開始。您應該會看到一個按鈕，顯示「DELETE DEPLOYMENT」。按一下該按鈕，然後重新部署可迅速啟用的解決方案。

3. 啟用 Gemini

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

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

4. 下載 Cloud 函式程式碼

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

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

重設 Gemini Chat

提示會影響日後的提示。舉例來說，如果您在專案 ID 或區域中打錯字，日後的提示和回覆就會轉變成錯字，而這可能會對使用體驗造成負面影響。如果輸入錯誤，或因任何其他原因想清除記錄，可使用垃圾桶圖示重設即時通訊。

5. 呼叫現有的 Cloud 函式端點

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

1. 輸入提示：
   • 重要事項：請將後續提示中的 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 指令，可在下一個步驟中使用
2. 在新的終端機中測試指令
   • 按一下漢堡選單
   • 按一下「終端機」。
   • 按一下「New Terminal」(新增終端機)
   • 將上一步的 curl 指令貼到終端機，按下 Enter 以執行指令
   • 您應該會收到類似下方的回應：

     {
         "labelAnnotations": [
         {
         "mid": "/m/0csby",
         "description": "Cloud",
         "score": 0.97885925,
         "topicality": 0.97885925,
     ...
     

3. (選用) 輸入類似以下內容的提示，使用公開網際網路上的其他圖片來進行這項作業：
   • 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 指令無法使用，請檢查下列事項：

1. 問題：網址端點是否包含 .a.run.app？
   • 解決方案：Duet 可能認為您正部署至 Cloud Run。將 my-project-with-duet 替換為 https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate 中的專案 ID，取得正確的 Cloud Functions 端點，並用於 curl 指令。
2. 問題：網址端點是否包含 my-project-with-duet？
   • 解決方案：將 my-project-with-duet 替換為您的專案 ID。
3. 問題：網址端點是否缺少「us-central1」？
   • 解決方法：請確認網址開頭是 us-central1，例如：https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate 為您的專案 ID。
4. 問題：視您使用的提示而定，有時產生的端點看起來會像這樣 (cloudfunctions.net/annotate-http 或 cloudfunctions.net/annotate)。網址端點結尾是否缺少「/annotate-http/annotate」？
   • 解決方法：確保網址端點的結尾是完整的 API 應用程式路徑 cloudfunctions.net/annotate-http/annotate
5. 問題：cURL 要求可正常運作，但無法取得過多資訊。這項要求是否包含功能？
   • 解決方法：這並不是重大的問題。如果繼續操作，但不進行任何變更，本研究室的其餘部分仍可正常運作。如想取得更多資訊，可以要求 Duet 在 cURL 要求中新增功能。
6. 問題：答案似乎不正確，或是缺少程式碼專屬的背景資訊。您正在 Cloud Shell 編輯器中使用 Gemini Chat 嗎？
   • 解決方案：在 Cloud Shell 編輯器中使用 Gemini Chat 時，請嘗試開啟 main.py 檔案，並醒目顯示與提示相關的程式碼。Google Cloud 中的 Gemini 助理會因不同情境而異，因此可能會提供不同答案。
7. 問題：提示回應仍不完全正確。
   • 解決方案：使用不同提示，提供更多指引，讓 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" }
     

8. 問題：完成所有疑難排解步驟後，問題仍未解決。
   • 解決方案：LLM 具有非確定性的性質，因此 Gemini 可能會生成沒有效果的回覆。如果發生這種情況，請複製上方的範例 curl 指令，然後嘗試在終端機中執行。請務必將 my-project-with-duet 換成您的專案 ID。

6. 製作這個 API 的網頁應用程式用戶端

使用 Gemini 產生 index.html 檔案，以便呼叫快速啟動解決方案 Cloud 函式端點。接著，將 index.html 檔案部署至 Firebase 代管，就能查看程式碼的實際運作情形。

1. 產生用戶端程式碼
   • 返回 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。
2. 建立新的 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
3. 確認您已在 Cloud Shell 終端機中登入正確的專案
   • 您可以向 Gemini 提問，例如：
     • What is the gcloud command to set my project?
   • 您應該會看到類似 gcloud config set project my-project-with-duet 的結果
     • 確認專案 ID 正確無誤，然後在 Cloud Shell 終端機中執行指令。
4. 啟用 Firebase
   • 在新分頁中開啟 (讓目前的 Cloud Shell 編輯器保持開啟)，然後前往 https://console.firebase.google.com/
   • 按一下「新增專案」。
   • 輸入專案 ID，然後等待該 ID 出現在下拉式選單中
   • 按一下專案 ID
   • 按一下 [繼續]。
   • 按一下「確認企劃書」。
   • 按一下 [繼續]。
   • 取消選取「為這項專案啟用 Google Analytics (分析)」
     • Firebase 建議使用 Google Analytics (分析)，但是不會用於這個應用程式。
   • 按一下 [繼續]。
   • 關閉這個分頁並返回 Cloud Shell 編輯器
   • 注意：這些步驟僅適用於先前未曾使用 Firebase 的使用者，但如此一來，每個人都能遵循相同的路徑。如果日後再次執行這項操作，您可以略過這個步驟。
5. 在 Cloud Shell 中登入 Firebase
   • 在 Cloud Shell 編輯器終端機中，執行 firebase login --no-localhost 指令。
   • 前往這裡提供的網址
     • 按一下「是，我剛剛執行了這個指令」。
     • 按一下「是，這是我的工作階段 ID」。
     • 按一下「Copy」
   • 返回 Cloud Shell 編輯器終端機
   • 將複製的值貼到終端機的顯示位置：Enter authorization code:
   • 按下 Enter 鍵
6. 將新網站部署至 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
7. 透過呼叫 Cloud Functions API 端點來重新部署應用程式
   • 上述指令應在先前建立的 frontend 目錄中，建立含有 index.html 檔案的 public 目錄。~/annotate-http-1/frontend/public/index.html 檔案是您應該進行後續幾項變更的地方。
   • 開啟 index.html 檔案。
     • 按一下「Explorer」圖示
     • 按一下 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>

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

1. 問題：404 (找不到) 用於 fetch 方法的網址是否包含 my-project-with-duet？
   • 解決方案：將 my-project-with-duet 替換為您的專案 ID。
2. 問題：404 (找不到) fetch 方法中使用的網址缺少完整網址嗎？
   • 解決方法：務必在 fetch 方法中加入完整網址。如下所示：https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate
3. 問題：提示回應仍不完全正確。
   • 解決方案：使用不同提示，提供更多指引，讓 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.
4. 問題：網站是否已部署完成，卻無法正常運作？
   • 解決方案：LLM 具有非確定性的性質，因此 Gemini 可能會生成沒有效果的回覆。如果發生這種情況，請複製上方的範例 index.html，然後嘗試使用 firebase deploy 重新部署該範例。請務必將 my-project-with-duet 換成您的專案 ID。

7. (選用) 開啟探索

1. 使用 Gemini 和編輯器助理，將 CSS 樣式加到應用程式，完成後再次部署應用程式！如果您想尋找靈感，可以參考以下幾種提示範例：
   • Make this index.html file use material design.
2. 試試其他功能：
   • 產生的網站應可使用任何公開的 http 圖片。與 Duet 合作，將圖片顯示在頁面上。

8. (選用) 刪除專案

如要避免系統對今天建立的資源收費，可以詢問 Duet 操作方式。

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