本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# 使用 Amazon Bedrock 建置 AI 文字摘要器應用程式
<a name="tutorial-conversational-bedrock"></a>

在本教學課程中，您將在 App Studio 中建置應用程式，該應用程式使用 Amazon Bedrock 提供最終使用者輸入文字的簡潔摘要。應用程式包含一個簡單的使用者介面，使用者可以輸入他們想要摘要的任何文字。這可能是會議備註、文章內容、調查結果或任何其他文字資訊。使用者輸入文字後，可以按下按鈕將文字傳送至 Amazon Bedrock，這會使用 Claude 3 Sonnet 模型處理文字並傳回摘要版本。

**Contents**
+ [先決條件](#tutorial-conversational-bedrock-prerequisites)
+ [步驟 1：建立和設定 IAM 角色和 App Studio 連接器](#tutorial-conversational-bedrock-steps-create-role-connector)
+ [步驟 2：建立應用程式](#tutorial-conversational-bedrock-steps-create-application)
+ [步驟 3：建立和設定自動化](#tutorial-conversational-bedrock-steps-create-automation)
+ [步驟 4：建立頁面和元件](#tutorial-conversational-bedrock-steps-user-interface)
  + [重新命名預設頁面](#tutorial-conversational-bedrock-steps-user-interface-create-page)
  + [將元件新增至頁面](#tutorial-conversational-bedrock-steps-user-interface-add-components)
  + [設定頁面元件](#tutorial-conversational-bedrock-steps-user-interface-configure-components)
+ [步驟 5：將應用程式發佈至**測試**環境](#tutorial-conversational-bedrock-steps-publish)
+ [(選用) 清除](#tutorial-conversational-bedrock-steps-cleanup)

## 先決條件
<a name="tutorial-conversational-bedrock-prerequisites"></a>

開始之前，請先檢閱並完成下列先決條件：
+ 存取 AWS App Studio。請注意，您必須擁有管理員角色，才能在本教學課程中建立連接器。
+ 選用：檢閱 [AWS App Studio 概念](concepts.md)和 [教學課程：從空白應用程式開始建置](getting-started-tutorial-empty.md)以熟悉重要的 App Studio 概念。

## 步驟 1：建立和設定 IAM 角色和 App Studio 連接器
<a name="tutorial-conversational-bedrock-steps-create-role-connector"></a>

若要提供 App Studio 對 Amazon Bedrock 模型的存取權，您必須：

1. 啟用您要在應用程式中使用的 Amazon Bedrock 模型。在本教學課程中，您將使用 **Claude 3 Sonnet**，因此請務必啟用該模型。

1. 建立具有 Amazon Bedrock 適當許可的 IAM 角色。

1. 使用將在應用程式中使用的 IAM 角色建立 App Studio 連接器。

前往 [連線至 Amazon Bedrock](connectors-bedrock.md) 以取得詳細說明，並在遵循步驟並建立連接器後返回本教學課程。

## 步驟 2：建立應用程式
<a name="tutorial-conversational-bedrock-steps-create-application"></a>

使用下列程序在 App Studio 中建立空應用程式，您將建置到文字摘要器應用程式中。

1. 登入 App Studio。

1. 導覽至建置器中樞，然後選擇 **\$1 建立應用程式**。

1. 選擇**從頭開始**。

1. 在**應用程式名稱**欄位中，提供應用程式的名稱，例如 **Text Summarizer**。

1. 如果您被要求選取資料來源或連接器，請選擇**略過**以進行本教學課程。

1. 選擇**下一步**繼續進行。

1. （選用）：觀看影片教學課程，以取得在 App Studio 中建置應用程式的快速概觀。

1. 選擇**編輯應用程式**，這將帶您進入應用程式工作室。

## 步驟 3：建立和設定自動化
<a name="tutorial-conversational-bedrock-steps-create-automation"></a>

您可以在*自動化*中定義 App Studio 應用程式的邏輯和行為。自動化包含稱為*動作*的個別步驟、用於將資料從其他資源傳遞至動作的*參數*，以及可供其他自動化或元件使用的*輸出*。在此步驟中，您將建立自動化，以使用下列項目處理與 Amazon Bedrock 的互動：
+ 輸入：將文字輸入從使用者傳遞至自動化的參數。
+ 動作：一個將文字輸入傳送至 Amazon Bedrock 並傳回輸出文字摘要的 **GenAI 提示**動作。
+ 輸出：自動化輸出，其中包含來自 Amazon Bedrock 的已處理摘要，可用於您的應用程式。

**建立和設定自動化，將提示傳送至 Amazon Bedrock 並處理和傳回摘要**

1. 選擇畫布頂端的**自動化**索引標籤。

1. 選擇 **\$1 新增自動化**。

1. 在右側面板中，選擇**屬性**。

1. 選擇鉛筆圖示來更新自動化名稱。輸入 **InvokeBedrock**，然後按 **Enter**。

1. 將參數新增至自動化，以透過執行下列步驟，將文字提示輸入從使用者傳遞至要在請求中用於 Amazon Bedrock 的自動化：

   1. 在畫布的參數方塊中，選擇 **\$1 新增**。

   1. 在**名稱**中，輸入 **input**。

   1. 在**描述**中，輸入任何描述，例如 **Text to be sent to Amazon Bedrock**。

   1. 在**類型**中，選取**字串**。

   1. 選擇**新增**以建立 參數。

1. 執行下列步驟來新增 **GenAI 提示**動作：

   1. 在右側面板中，選擇**動作**。

   1. 選擇 **GenAI 提示**以新增動作。

1. 透過執行下列步驟來設定動作：

   1. 從畫布中選擇動作以開啟右側**屬性**功能表。

   1. 選擇鉛筆圖示、輸入名稱，然後按下 Enter 鍵，將動作重新命名**PromptBedrock**為 。

   1. 在**連接器**中，選取在 中建立的連接器[步驟 1：建立和設定 IAM 角色和 App Studio 連接器](#tutorial-conversational-bedrock-steps-create-role-connector)。

   1. 在**模型**中，選擇您要用來處理提示的 Amazon Bedrock 模型。在本教學課程中，您將選擇 **Claude 3.5 Sonnet。**

   1. 在**使用者提示**中，輸入 `{{params.input}}`。這代表您先前建立的`input`參數，並將包含應用程式使用者輸入的文字。

   1. 在**系統提示**中，輸入您要傳送至 Amazon Bedrock 的系統提示指示。在本教學課程中，請輸入下列項目：

      ```
      You are a highly efficient text summarizer. Provide a concise summary of the prompted text, capturing the key points and main ideas.
      ```

   1. 選擇**請求設定**以展開，並更新下列欄位：
      + 在**溫度**中，輸入 `0`。範本會在 0 到 10 的範圍內決定輸出的隨機性或創造性。數字越高，回應的創造性就越高。
      + 在權**杖上限**中，輸入 `4096`以限制回應的長度。

1. 此自動化的輸出將是摘要文字，但預設自動化不會建立輸出。執行下列步驟，設定自動化以建立自動化輸出：

   1. 在左側導覽中，選擇 **InvokeBedrock** 自動化。

   1. 在右側**屬性**選單的**輸出**中，選擇 **\$1 新增**。

   1. 在**輸出**中，輸入 **\$1\$1results.PromptBedrock.text\$1\$1**。此表達式會傳回 `processResults`動作的內容。

## 步驟 4：建立頁面和元件
<a name="tutorial-conversational-bedrock-steps-user-interface"></a>

在 App Studio 中，每個頁面代表使用者將互動的應用程式使用者介面 (UI) 畫面。在這些頁面中，您可以新增各種元件，例如資料表、表單、按鈕等，以建立所需的配置和功能。

### 重新命名預設頁面
<a name="tutorial-conversational-bedrock-steps-user-interface-create-page"></a>

本教學課程中的文字摘要程式應用程式只會包含一個頁面。新建立的應用程式隨附預設頁面，因此您將重新命名該應用程式，而不是新增應用程式。

**重新命名預設頁面**

1. 在頂端列導覽選單中，選擇**頁面**。

1. 在左側面板中，選擇**Page1**，然後選擇右側面板中的**屬性**面板。

1. 選擇鉛筆圖示，輸入 **TextSummarizationTool**，然後按 **Enter**。

1. 在**導覽標籤**中，輸入 **TextSummarizationTool**。

### 將元件新增至頁面
<a name="tutorial-conversational-bedrock-steps-user-interface-add-components"></a>

在本教學課程中，文字摘要器應用程式有一個頁面，其中包含下列元件：
+ 最終使用者用來輸入要摘要提示**的文字輸入**元件。
+ 用來將提示傳送至 Amazon Bedrock 的**按鈕**元件。
+ **文字區域**元件，顯示來自 Amazon Bedrock 的摘要。

將**文字輸入**元件新增至使用者用來輸入要摘要之文字提示的頁面。

**新增文字輸入元件**

1. 在右側**元件**面板中，找到**文字輸入**元件並將其拖曳到畫布上。

1. 選擇畫布中的文字輸入以進行選取。

1. 在右側**屬性**面板中，更新下列設定：

   1. 選擇鉛筆圖示，將文字輸入重新命名為 **inputPrompt**。

   1. 在**標籤**中，輸入 **Prompt**。

   1. 在**預留位置**中，輸入 **Enter text to be summarized**。

現在，新增使用者將選擇將提示傳送至 Amazon Bedrock 的 **Button** 元件。

**新增按鈕元件**

1. 在右側**元件**面板中，找到**按鈕**元件並將其拖曳到畫布上。

1. 選擇畫布中的按鈕來選取它。

1. 在右側**屬性**面板中，更新下列設定：

   1. 選擇鉛筆圖示，將按鈕重新命名為 **sendButton**。

   1. 在**按鈕標籤**中，輸入 **Send**。

現在，新增**文字區域**元件，以顯示 Amazon Bedrock 傳回的摘要。

**新增文字區域元件**

1. 在右側**元件**面板中，找到**文字區域**元件並將其拖曳到畫布上。

1. 選擇畫布中的文字區域以進行選取。

1. 在右側**屬性**面板中，更新下列設定：

   1. 選擇鉛筆圖示，將按鈕重新命名為 **textSummary**。

   1. 在**標籤**中，輸入 **Summary**。

### 設定頁面元件
<a name="tutorial-conversational-bedrock-steps-user-interface-configure-components"></a>

現在應用程式包含含有元件的頁面，下一步是設定元件以執行適當的行為。若要設定元件，例如按鈕，以在與元件互動時採取動作，您必須新增*觸發*條件。對於本教學課程中的應用程式，您會在 `sendButton` 按鈕中新增兩個觸發條件，以執行下列動作：
+ 第一個觸發會將`textPrompt`元件中的文字傳送至要分析的 Amazon Bedrock。
+ 第二個觸發會在`textSummary`元件中顯示從 Amazon Bedrock 傳回的摘要。

**新增將提示傳送至 Amazon Bedrock 的觸發條件**

1. 選擇畫布中的按鈕來選取它。

1. 在右側**屬性**面板的**觸發**區段中，選擇 **\$1 新增**。

1. 選擇**叫用自動化**。

1. 選擇建立來設定它的 **InvokeAutomation1** 觸發條件。

1. 在**動作名稱**中，輸入 **invokeBedrockAutomation**。

1. 在**調用自動化**中，選取先前建立的 **InvokeBedrock** 自動化。

1. 在參數方塊中，在先前建立的**輸入**參數中，輸入 **\$1\$1ui.inputPrompt.value\$1\$1**，傳遞`inputPrompt`文字輸入元件中的內容。

1. 選擇面板頂端的向左箭頭，以返回元件屬性選單。

現在，您已設定觸發條件，以叫用自動化，在按下按鈕時將請求傳送至 Amazon Bedrock，下一個步驟是設定第二個觸發條件，在`textSummary`元件中顯示結果。

**新增在文字區域元件中顯示 Amazon Bedrock 結果的觸發條件**

1. 在按鈕的右側**屬性**面板的**觸發**區段中，選擇 **\$1 新增**。

1. 選擇**執行元件動作**。

1. 選擇建立來設定它的 **Runcomponentaction1** 觸發條件。

1. 在**動作名稱**中，輸入 **setTextSummary**。

1. 在**元件**中，選取 **textSummary** 元件。

1. 在**動作**中，選取**設定值**。

1. 在**將值設為** 中，輸入 **\$1\$1results.invokeBedrockAutomation\$1\$1**。

## 步驟 5：將應用程式發佈至**測試**環境
<a name="tutorial-conversational-bedrock-steps-publish"></a>

一般而言，當您建置應用程式時，建議您預覽應用程式，以查看其外觀並對其功能進行初始測試。不過，由於應用程式不會與預覽環境中的外部服務互動，因此您將改為將應用程式發佈至測試環境，以測試傳送請求並從 Amazon Bedrock 接收回應。

**將您的應用程式發佈至測試環境**

1. 在應用程式建置器的右上角，選擇**發佈**。

1. 新增測試環境的版本描述。

1. 檢閱並選取有關 SLA 的核取方塊。

1. 選擇 **開始使用**。發佈最多可能需要 15 分鐘。

1. （選用） 當您準備好時，您可以選擇**共用**並依照提示給予其他人存取權。如需共用 App Studio 應用程式的詳細資訊，請參閱 [共用已發佈的應用程式](application-share.md)。

測試應用程式後，再次選擇**發佈**，將應用程式提升為生產環境。請注意，在共用最終使用者之前，生產環境中的應用程式無法使用。如需不同應用程式環境的詳細資訊，請參閱 [應用程式環境](applications-publish.md#application-environments)。

## (選用) 清除
<a name="tutorial-conversational-bedrock-steps-cleanup"></a>

您現在已成功完成教學課程，並使用 Amazon Bedrock 在 App Studio 中建置文字摘要應用程式。您可以繼續使用您的應用程式，也可以清除在本教學課程中建立的資源。下列清單包含要清除的資源清單：
+ 在 App Studio 中建立的 Amazon Bedrock 連接器。如需詳細資訊，請參閱[檢視、編輯和刪除連接器](viewing-deleting-connectors.md)。
+ App Studio 中的文字摘要程式應用程式。如需詳細資訊，請參閱[刪除應用程式](applications-delete.md)。
+ 在 IAM 主控台中建立的 IAM 角色。如需詳細資訊，請參閱*AWS Identity and Access Management 《 使用者指南*》中的[刪除角色或執行個體描述](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_manage_delete.html)檔。
+ 如果您請求模型存取以使用 Claude 3 Sonnet，並想要還原存取，請參閱《[Amazon Bedrock 使用者指南》中的管理對 Amazon Bedrock 基礎模型的存取](https://docs.aws.amazon.com/bedrock/latest/userguide/model-access.html)。 **