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

# 使用 Flask 和 視覺化 AI/ML 模型結果 AWS Elastic Beanstalk
<a name="visualize-ai-ml-model-results-using-flask-and-aws-elastic-beanstalk"></a>

*Chris Caudill 和 Durga Sury，Amazon Web Services*

## 摘要
<a name="visualize-ai-ml-model-results-using-flask-and-aws-elastic-beanstalk-summary"></a>

視覺化人工智慧和機器學習 (AI/ML) 服務的輸出通常需要複雜的 API 呼叫，必須由您的開發人員和工程師自訂。如果您的分析師想要快速探索新的資料集，這可能是個缺點。

您可以使用 Web 型使用者介面 (UI)，讓使用者能夠上傳自己的資料，並在儀表板中視覺化模型結果，藉此增強服務的可存取性，並提供更互動式的資料分析形式。

此模式使用 [Flask](https://flask.palletsprojects.com/en/stable/) 和 [Plotly](https://plotly.com/) 將 Amazon Comprehend 與自訂 Web 應用程式整合，並從使用者提供的資料視覺化情緒和實體。模式也提供使用 部署應用程式的步驟 AWS Elastic Beanstalk。您可以使用 [AWS AI 服務或](https://aws.amazon.com/machine-learning/ai-services/)託管在端點 （例如 [Amazon SageMaker 端點） ](https://docs.aws.amazon.com/sagemaker/latest/dg/deploy-model.html)上的自訂訓練模型來調整應用程式。

## 先決條件和限制
<a name="visualize-ai-ml-model-results-using-flask-and-aws-elastic-beanstalk-prereqs"></a>

**先決條件**
+ 作用中 AWS 帳戶。 
+ AWS Command Line Interface (AWS CLI)，安裝在本機電腦上並進行設定。如需詳細資訊，請參閱 AWS CLI 文件中的[組態基本概念](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-quickstart.html)。您也可以使用 AWS Cloud9 整合式開發環境 (IDE)；如需詳細資訊，請參閱 AWS Cloud9 文件中的 IDE 中的 [Python 教學 AWS Cloud9](https://docs.aws.amazon.com/cloud9/latest/user-guide/sample-python.html)課程和預覽執行中的應用程式。 [AWS Cloud9](https://docs.aws.amazon.com/cloud9/latest/user-guide/app-preview.html)

  **注意**： AWS Cloud9 不再提供給新客戶。的現有客戶 AWS Cloud9 可以繼續正常使用服務。[進一步了解](https://aws.amazon.com/blogs/devops/how-to-migrate-from-aws-cloud9-to-aws-ide-toolkits-or-aws-cloudshell/)
+ 了解 Flask 的 Web 應用程式架構。如需 Flask 的詳細資訊，請參閱 Flask 文件中的 [Quickstart](https://flask.palletsprojects.com/en/stable/quickstart/)。
+ Python 3.6 版或更新版本，已安裝並設定。您可以依照 AWS Elastic Beanstalk 文件中[設定 Python 開發環境的指示來安裝 Python](https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/python-development-environment.html)。
+ Elastic Beanstalk 命令列界面 (EB CLI)，已安裝並設定。如需詳細資訊，請參閱 Elastic Beanstalk 文件中的[安裝 EB CLI](https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/eb-cli3-install.html) 和[設定 EB CLI](https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/eb-cli3-configuration.html)。

**限制**
+ 此模式的 Flask 應用程式旨在使用使用單一文字資料欄且限制為 200 列的 .csv 檔案。應用程式程式碼可以調整為處理其他檔案類型和資料磁碟區。
+ 應用程式不會考慮資料保留，並繼續彙總上傳的使用者檔案，直到手動刪除為止。您可以將應用程式與用於持久性物件儲存的 Amazon Simple Storage Service (Amazon S3) 整合，或使用 Amazon DynamoDB 等資料庫進行無伺服器金鑰值儲存。
+ 應用程式只會考慮英文的文件。不過，您可以使用 Amazon Comprehend 來偵測文件的主要語言。如需每個動作支援語言的詳細資訊，請參閱 Amazon Comprehend 文件中的 [API 參考](https://docs.aws.amazon.com/comprehend/latest/dg/API_Reference.html)。

## Architecture
<a name="visualize-ai-ml-model-results-using-flask-and-aws-elastic-beanstalk-architecture"></a>

**Flask 應用程式架構**

Flask 是一種輕量型架構，可用於在 Python 中開發 Web 應用程式。它旨在結合 Python 的強大資料處理與豐富的 Web 使用者介面。模式的 Flask 應用程式說明如何建置 Web 應用程式，讓使用者上傳資料、將資料傳送至 Amazon Comprehend 進行推論，然後視覺化結果。  應用程式具有下列結構：
+ `static` – 包含支援 Web UI 的所有靜態檔案 （例如 JavaScript、CSS 和映像）
+ `templates` – 包含應用程式的所有 HTML 頁面
+ `userData` – 存放上傳的使用者資料
+ `application.py` – Flask 應用程式檔案
+ `comprehend_helper.py` – 對 Amazon Comprehend 進行 API 呼叫的函數
+ `config.py` – 應用程式組態檔案
+ `requirements.txt` – 應用程式所需的 Python 相依性

`application.py` 指令碼包含 Web 應用程式的核心功能，其中包含四個 Flask 路由。下圖顯示這些 Flask 路由。

![構成 Web 應用程式核心功能的四個 Flask 路由。](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/images/pattern-img/03d80cf1-ec97-43f7-adb5-2746a9ec70e6/images/9ca6bad1-26e2-4262-98d0-d54c172336bf.png)


 
+ `/` 是應用程式的根目錄，將使用者導向 `upload.html`頁面 （存放在 `templates`目錄中）。
+ `/saveFile` 是在使用者上傳檔案後呼叫的路由。此路由會透過 HTML 表單接收`POST`請求，其中包含使用者上傳的檔案。檔案會儲存在 `userData`目錄中，而路由會將使用者重新導向至`/dashboard`路由。
+ `/dashboard` 會將使用者傳送至 `dashboard.html`頁面。在此頁面的 HTML 中，它會在 中執行 JavaScript 程式碼`static/js/core.js`，從`/data`路由讀取資料，然後建置頁面的視覺化效果。
+ `/data` 是一種 JSON API，提供要在儀表板中視覺化的資料。此路由會讀取使用者提供的資料，並使用 中的 函數將使用者資料`comprehend_helper.py`傳送至 Amazon Comprehend，以進行情緒分析和具名實體辨識 (NER)。Amazon Comprehend 回應已格式化並傳回為 JSON 物件。

**部署架構**

![使用 Flask 和 Elastic Beanstalk 視覺化 AI/ML 模型結果的架構圖。](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/images/pattern-img/03d80cf1-ec97-43f7-adb5-2746a9ec70e6/images/d691bfd2-e2ec-4830-8bff-ffa1e3a95c4a.png)


[設計考量事項](https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/concepts.concepts.design.html)

 如需在 上使用 Elastic Beanstalk 部署之應用程式的設計考量詳細資訊 AWS 雲端，請參閱 AWS Elastic Beanstalk 文件中的 。

**技術堆疊**
+ Amazon Comprehend
+ Elastic Beanstalk
+ Flask 

**自動化和擴展**

Elastic Beanstalk 部署會自動設定負載平衡器和自動擴展群組。如需更多組態選項，請參閱 [Elastic Beanstalk 文件中的設定 Elastic Beanstalk 環境](https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/customize-containers.html)。

## 工具
<a name="visualize-ai-ml-model-results-using-flask-and-aws-elastic-beanstalk-tools"></a>
+ [AWS Command Line Interface (AWS CLI)](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-welcome.html) 是一種統一的工具，提供與 AWS 所有部分互動的一致界面。
+ [Amazon Comprehend](https://docs.aws.amazon.com/comprehend/latest/dg/comprehend-general.html) 使用自然語言處理 (NLP) 擷取文件內容的洞見，而不需要特殊的預先處理。
+ [AWS Elastic Beanstalk](https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/Welcome.html) 可協助您在 中快速部署和管理應用程式， AWS 雲端 而無需了解執行這些應用程式的基礎設施。
+ [Elastic Beanstalk CLI (EB CLI)](https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/eb-cli3.html) 是 的命令列界面 AWS Elastic Beanstalk ，可提供互動式命令，以簡化從本機儲存庫建立、更新和監控環境。
+ [Flask](https://flask.palletsprojects.com/en/stable/) 框架使用 Python 執行資料處理和 API 呼叫，並透過 Plotly 提供互動式 Web 視覺化。

**程式碼 儲存庫**

此模式的程式碼可在使用 Flask 和儲存庫的 GitHub 視覺化 AI/ML 模型結果中取得。 [AWS Elastic Beanstalk](https://github.com/aws-samples/aws-comprehend-elasticbeanstalk-for-flask)

## 史詩
<a name="visualize-ai-ml-model-results-using-flask-and-aws-elastic-beanstalk-epics"></a>

### 設定 Flask 應用程式
<a name="set-up-the-flask-application"></a>


| 任務 | Description | 所需的技能 | 
| --- | --- | --- | 
| 複製 GitHub 儲存庫。 | 執行下列命令，使用 Flask 和儲存庫從 GitHub 視覺化 AI/ML 模型結果提取應用程式程式碼： [AWS Elastic Beanstalk](https://github.com/aws-samples/aws-comprehend-elasticbeanstalk-for-flask)<br />`git clone git@github.com:aws-samples/aws-comprehend-elasticbeanstalk-for-flask.git`請務必使用 GitHub 設定 SSH 金鑰。 | 開發人員 | 
| 安裝 Python 模組。 | 複製儲存庫之後，會建立新的本機`aws-comprehend-elasticbeanstalk-for-flask`目錄。在該目錄中， `requirements.txt` 檔案包含執行應用程式的 Python 模組和版本。使用下列命令來安裝模組：<br />`cd aws-comprehend-elasticbeanstalk-for-flask`<br />`pip install -r requirements.txt` | Python 開發人員 | 
| 在本機測試應用程式。 | 執行下列命令來啟動 Flask 伺服器：<br />`python application.py`<br />這會傳回執行中伺服器的相關資訊。您應該可以透過開啟瀏覽器並造訪 http：//localhost：5000 來存取應用程式如果您在 IDE AWS Cloud9 中執行應用程式，則需要將 `application.py` 檔案中的 `application.run()`命令取代為下列行：<br />`application.run(host=os.getenv('IP', '0.0.0.0'),port=int(os.getenv('PORT', 8080)))`<br />您必須在部署之前還原此變更。 | Python 開發人員 | 

### 將應用程式部署至 Elastic Beanstalk
<a name="deploy-the-application-to-aeb"></a>


| 任務 | Description | 所需的技能 | 
| --- | --- | --- | 
| 啟動 Elastic Beanstalk 應用程式。 | 若要以 Elastic Beanstalk 應用程式的形式啟動專案，請從應用程式的根目錄執行下列命令：<br />`eb init -p python-3.6 comprehend_flask --region us-east-1` [See the AWS documentation website for more details](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/visualize-ai-ml-model-results-using-flask-and-aws-elastic-beanstalk.html)<br />執行 `eb init -i`命令以取得更多部署組態選項。 | 架構師、開發人員 | 
| 部署 Elastic Beanstalk 環境。 | 從應用程式的根目錄執行下列命令：<br />`eb create comprehend-flask-env``comprehend-flask-env` 是 Elastic Beanstalk 環境的名稱，可根據您的需求進行變更。名稱只能包含字母、數字和破折號。 | 架構師、開發人員 | 
| 授權您的部署以使用 Amazon Comprehend。 | 雖然您的應用程式可能已成功部署，但您也應該為您的部署提供 Amazon Comprehend 的存取權。 `ComprehendFullAccess` 是一種 AWS 受管政策，可提供已部署應用程式對 Amazon Comprehend 進行 API 呼叫的許可。<br />執行下列命令，將`ComprehendFullAccess`政策連接至 `aws-elasticbeanstalk-ec2-role`（此角色會自動為您部署的 Amazon Elastic Compute Cloud (Amazon EC2) 執行個體建立）：<br />`aws iam attach-role-policy --policy-arn arn:aws:iam::aws:policy/ComprehendFullAccess --role-name aws-elasticbeanstalk-ec2-role``aws-elasticbeanstalk-ec2-role` 會在您的應用程式部署時建立。您必須先完成部署程序，才能連接 AWS Identity and Access Management (IAM) 政策。 | 開發人員、安全架構師 | 
| 造訪您部署的應用程式。 | 在應用程式成功部署後，您可以執行 `eb open`命令來造訪它。<br />您也可以執行 `eb status`命令來接收部署的詳細資訊。部署 URL 列在 下`CNAME`。 | 架構師、開發人員 | 

### （選用） 根據您的 ML 模型自訂應用程式
<a name="optional-customize-the-application-to-your-ml-model"></a>


| 任務 | Description | 所需的技能 | 
| --- | --- | --- | 
| 授權 Elastic Beanstalk 存取新模型。 | 確定 Elastic Beanstalk 具有新模型端點所需的存取許可。例如，如果您使用 Amazon SageMaker AI 端點，您的部署需要具有叫用端點的許可。 <br />如需詳細資訊，請參閱 Amazon SageMaker AI 文件中的 [InvokeEndpoint](https://docs.aws.amazon.com/sagemaker/latest/APIReference/API_runtime_InvokeEndpoint.html)。 | 開發人員、安全架構師 | 
| 將使用者資料傳送至新模型。 | 若要變更此應用程式中的基礎 ML 模型，您必須變更下列檔案：[See the AWS documentation website for more details](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/visualize-ai-ml-model-results-using-flask-and-aws-elastic-beanstalk.html) | 資料科學家 | 
| 更新儀表板視覺效果。 | 一般而言，整合新的 ML 模型表示必須更新視覺化以反映新的結果。這些變更會在下列檔案中進行：[See the AWS documentation website for more details](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/visualize-ai-ml-model-results-using-flask-and-aws-elastic-beanstalk.html) | Web 開發人員 | 

### （選用） 部署更新的應用程式
<a name="optional-deploy-the-updated-application"></a>


| 任務 | Description | 所需的技能 | 
| --- | --- | --- | 
| 更新應用程式的需求檔案。 | 將變更傳送至 Elastic Beanstalk 之前，請在應用程式的根目錄中執行下列命令，來更新 `requirements.txt` 檔案以反映任何新的 Python 模組：<br />`pip freeze > requirements.txt` | Python 開發人員 | 
| 重新部署 Elastic Beanstalk 環境。 | 若要確保您的應用程式變更反映在您的 Elastic Beanstalk 部署中，請導覽至應用程式的根目錄並執行下列命令：<br />`eb deploy`<br />這會將最新版的應用程式程式碼傳送至您現有的 Elastic Beanstalk 部署。 | 系統管理員、架構師 | 

## 疑難排解
<a name="visualize-ai-ml-model-results-using-flask-and-aws-elastic-beanstalk-troubleshooting"></a>


| 問題 | 解決方案 | 
| --- | --- | 
| `Unable to assume role "arn:aws:iam::xxxxxxxxxx:role/aws-elasticbeanstalk-ec2-role". Verify that the role exists and is configured correctly.` | 如果在執行 時發生此錯誤`eb create`，請在 Elastic Beanstalk 主控台上建立範例應用程式，以建立預設執行個體描述檔。如需詳細資訊，請參閱 AWS Elastic Beanstalk 文件中的[建立 Elastic Beanstalk 環境](https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/using-features.environments.html)。 | 
| `Your WSGIPath refers to a file that does not exist.` | 部署日誌中發生此錯誤，因為 Elastic Beanstalk 預期 Flask 程式碼會命名為 `application.py`。如果您選擇不同的名稱，請執行`eb config`並編輯 WSGIPath，如下列程式碼範例所示：<pre>aws:elasticbeanstalk:container:python:<br />     NumProcesses: '1'<br />     NumThreads: '15'<br />     StaticFiles: /static/=static/<br />     WSGIPath: application.py</pre><br />請確定您使用檔案名稱`application.py`取代 。<br />您也可以利用 Gunicorn 和 Procfile。如需此方法的詳細資訊，請參閱 AWS Elastic Beanstalk 文件中的[使用 Procfile 設定 WSGI 伺服器](https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/python-configuration-procfile.html)。 | 
| `Target WSGI script '/opt/python/current/app/application.py' does not contain WSGI application 'application'.` | Elastic Beanstalk 預期代表 Flask 應用程式的變數會命名為 `application`。請確定`application.py`檔案使用 `application`做為變數名稱：<pre>application = Flask(__name__)</pre> | 
| `The EB CLI cannot find your SSH key file for keyname` | 使用 EB CLI 指定要使用的金鑰對，或為部署的 Amazon EC2 執行個體建立金鑰對。若要解決錯誤，請執行 `eb init -i`，其中一個選項會詢問：<pre>Do you want to set up SSH for your instances?</pre><br />回應 `Y` 以建立金鑰對或指定現有的金鑰對。 | 
| 我已更新程式碼並重新部署，但我的部署並未反映我的變更。 | 如果您使用 Git 儲存庫進行部署，請務必在重新部署之前新增並遞交變更。 | 
| 您正在從 IDE AWS Cloud9 預覽 Flask 應用程式並發生錯誤。 | 如需詳細資訊，請參閱 AWS Cloud9 文件[中的在 IDE AWS Cloud9 中預覽執行中的應用程式](https://docs.aws.amazon.com/cloud9/latest/user-guide/app-preview.html)。 | 

## 相關資源
<a name="visualize-ai-ml-model-results-using-flask-and-aws-elastic-beanstalk-resources"></a>
+ [使用 Amazon API Gateway 和 呼叫 Amazon SageMaker AI 模型端點 Amazon API Gateway AWS Lambda](https://aws.amazon.com/blogs/machine-learning/call-an-amazon-sagemaker-model-endpoint-using-amazon-api-gateway-and-aws-lambda/)
+ [將 Flask 應用程式部署至 Elastic Beanstalk](https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/create-deploy-python-flask.html)
+ [EB CLI 命令參考](https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/eb3-cmd-commands.html)
+ [設定您的 Python 開發環境](https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/python-development-environment.html)

## 其他資訊
<a name="visualize-ai-ml-model-results-using-flask-and-aws-elastic-beanstalk-additional"></a>

*使用 Amazon Comprehend 的自然語言處理*

透過選擇使用 Amazon Comprehend，您可以透過執行即時分析或非同步批次任務來偵測個別文字文件中的自訂實體。Amazon Comprehend 也可讓您透過建立端點，即時訓練自訂實體辨識和文字分類模型。

此模式使用非同步批次任務，從包含多個文件的輸入檔案中偵測情緒和實體。此模式提供的範例應用程式旨在讓使用者上傳包含單一資料欄的 .csv 檔案，每列包含一個文字文件。GitHub 中的 `comprehend_helper.py` 檔案[使用 Flask 視覺化 AI/ML 模型結果，儲存 AWS Elastic Beanstalk](https://github.com/aws-samples/aws-comprehend-elasticbeanstalk-for-flask)庫會讀取輸入檔案，並將輸入傳送至 Amazon Comprehend 進行處理。

*BatchDetectEntities*

Amazon Comprehend 會檢查一批具名實體文件的文字，並傳回偵測到的實體、位置、[實體類型](https://docs.aws.amazon.com/comprehend/latest/dg/how-entities.html)，以及指出 Amazon Comprehend 可信度等級的分數。一次 API 呼叫最多可傳送 25 個文件，每個文件的大小小於 5，000 個位元組。您可以篩選結果，根據使用案例僅顯示特定實體。例如，您可以略過`‘quantity’`實體類型，並為偵測到的實體設定閾值分數 （例如 0.75)。建議您先探索特定使用案例的結果，再選擇閾值。如需詳細資訊，請參閱 Amazon Comprehend 文件中的 [BatchDetectEntities](https://docs.aws.amazon.com/comprehend/latest/dg/API_BatchDetectEntities.html)。

*BatchDetectSentiment*

Amazon Comprehend 會檢查一批傳入文件，並傳回每個文件 (`POSITIVE`、`MIXED`、 `NEUTRAL`或 ) 的現行情緒`NEGATIVE`。一次 API 呼叫最多可傳送 25 個文件，每個文件的大小小於 5，000 個位元組。分析情緒非常簡單，您可以選擇要在最終結果中顯示最高分數的情緒。如需詳細資訊，請參閱 Amazon Comprehend 文件中的 [BatchDetectSentiment](https://docs.aws.amazon.com/comprehend/latest/dg/API_BatchDetectSentiment.html)。

*Flask 組態處理*

Flask 伺服器使用一系列[組態變數](https://flask.palletsprojects.com/en/stable/config/)來控制伺服器執行的方式。這些變數可包含偵錯輸出、工作階段字符或其他應用程式設定。您也可以定義可在應用程式執行時存取的自訂變數。設定組態變數的方法有多種。

在此模式中，組態是在 中定義`config.py`，並在 中繼承`application.py`。
+ `config.py` 包含在應用程式啟動時設定的組態變數。在此應用程式中，會定義`DEBUG`變數，指示應用程式以[偵錯模式](https://flask.palletsprojects.com/en/stable/config/#DEBUG)執行伺服器。
**注意**  
在生產環境中執行應用程式時，不應使用偵錯模式。 `UPLOAD_FOLDER` 是自訂變數，定義為稍後在應用程式中參考，並通知應存放上傳使用者資料的位置。
+ `application.py` 會啟動 Flask 應用程式，並繼承 中定義的組態設定`config.py`。這由下列程式碼執行：

```
application = Flask(__name__)
application.config.from_pyfile('config.py')
```