In this final lab, you will develop a web application integrated with Embeddable Watson AI libraries. You will then submit the relevant screenshots for peer-graded review.
在这个最终实验中，您将开发一个集成嵌入式 Watson AI 库的 Web 应用程序。然后，您将提交相关的屏幕截图进行同行评审。

Final Project: AI-Based Web Application Development and Deployment 最终项目：基于人工智能的网页应用开发与部署

Estimated Time: 1 hour 45 minutes
预计时间：1 小时 45 分钟

Scenario 场景

You have been hired as a software engineer by an e-commerce company to create an AI-based web app that performs analytics on customer feedback for their signature products. To accomplish this requirement, you will create an Emotion Detection system that processes feedback provided by the customer in text format and deciphers the associated emotion expressed.
您被一家电子商务公司聘为软件工程师，需要创建一个基于人工智能的网页应用程序，用于分析其特色产品的客户反馈。为了完成这一要求，您将创建一个情绪检测系统，该系统处理客户以文本格式提供的反馈，并解读其中表达的相关情绪。

Introduction 引言

In this final project, you will be assessed on the knowledge gained on all aspects of app creation and its web deployment throughout this course. You will be required to save screenshots of your results from time to time, with specific nomenclature. These screenshots will have to be uploaded in the peer graded assignment that follows.
在这个最终项目中，您将根据本课程所学关于应用程序创建及其网页部署的所有方面的知识进行评估。您需要不时保存带有特定命名规则的截图，这些截图必须在后续的同行评审作业中上传。

In this project, we use the embeddable Watson AI libraries to create an emotion detection application.
在这个项目中，我们使用可嵌入的 Watson AI 库来创建一个情绪检测应用程序。

Emotion detection extends the concept of sentiment analysis by extracting the finer emotions, like joy, sadness, anger, and so on, from statements rather than the simple polarity that sentiment analysis provides. This makes emotion detection a very important branch of study and businesses use such systems widely for their AI based recommendation systems, automated chat bots, and so on.
情绪检测通过从陈述中提取更细微的情绪（如喜悦、悲伤、愤怒等），而不仅仅是情感分析提供的简单极性，从而扩展了情感分析的概念。这使得情绪检测成为一个非常重要的研究领域，企业广泛使用此类系统为其基于人工智能的推荐系统、自动聊天机器人等提供支持。

Project guidelines 项目指南

For the completion of this project, you'll have to complete the following 8 tasks, based on the knowledge you have gained through the course.
为完成此项目，您需要根据课程所学知识完成以下 8 项任务。

Note: This platform is not persistent. It is recommended that you keep a copy of your code on your local machines and save changes from time to time. In case you revisit the lab, you will need to recreate the files in this lab environment, using the saved copies from your machines.
注意：此平台并非持久性存储。建议您将代码保存在本地机器上，并定期保存更改。如果您再次访问该实验室，您需要使用从您的机器保存的副本，在此实验室环境中重新创建文件。

Tasks and objectives: 任务与目标

• Task 1: Fork and Clone the project repository
  任务 1：分支并克隆项目仓库
• Task 2: Create an emotion detection application using Watson NLP library
  任务 2：使用Watson NLP 库创建情绪检测应用程序
• Task 3: Format the output of the application
  任务 3：格式化应用程序的输出
• Task 4: Package the application
  任务 4：打包应用程序
• Task 5: Run Unit tests on your application
  任务 5：在您的应用程序上运行单元测试
• Task 6: Deploy as web application using Flask
  任务 6：作为 Web 应用程序进行部署使用Flask
• Task 7: Incorporate Error handling
  任务 7：加入错误处理
• Task 8: Run static code analysis
  任务 8：运行静态代码分析

Let's get started!  让我们开始吧！

Task 1: Fork and Clone the project repository 任务 1：分支并克隆项目仓库

Note:* Please run this lab in the Skills Network Theia Lab environment itself, not in your local IDE (like VS Code). The API used here is hosted on the Skills Network platform and is only accessible within the Theia Lab.*
注意：请直接在 Skills Network Theia Lab 环境中运行此实验，而不是在本地 IDE（如 VS Code）中运行。这里使用的 API 由 Skills Network 平台托管，仅在 Theia Lab 环境中可访问。

The GitHub repository of the project is available on the URL mentioned below.
项目的 GitHub 仓库位于下文提到的 URL。
As a first step you need to Fork this repository, click the Fork button at the top-right corner of the repository page.
第一步，您需要 Fork 此仓库，点击仓库页面右上角的 Fork 按钮。

1. https://github.com/ibm-developer-skills-network/oaqjp-final-project-emb-ai.git

You can find instructions on how to fork the repository by visiting exercise 2 at the following link.
您可以通过访问以下链接中的练习 2 来查找如何 Fork 仓库的说明。

Note:Ensure your forked repository is Public.This action will create a copy of the forked repository within your GitHub account.
Note: 确保您的分支存储库是公开的。此操作将在您的 GitHub 账户中创建一个分支存储库的副本。

1. Open a new Terminal and make the directory final_project using mkdir command.
   打开一个新的终端，使用 mkdir 命令创建 final_project 目录。
2. Clone this forked GitHub repository using the Cloud IDE terminal to your project to a folder named final_project.
   使用 Cloud IDE 终端将此分支的 GitHub 存储库克隆到您的项目中的名为 final_project 的文件夹。
   You can find instructions on how to get the clone URL of the repository by visiting exercise 3 at the following link.
   您可以通过访问以下链接中的练习 3 来找到获取存储库克隆 URL 的说明。
3. After the cloning is complete, use the terminal to change the current directory final_project.
   克隆完成后，使用终端将当前目录更改为 final_project 。
4. Take the screenshot of your folder structure. Save this image as 1_folder_structure.png.
   对你的文件夹结构进行截图。将此图像保存为 1_folder_structure.png 。

Task 2: Create an emotion detection application using the Watson NLP library 任务 2：使用Watson NLP库创建一个情绪检测应用程序

The Watson NLP libraries are embedded. Therefore, there is no need of importing them to your code. You only need to send a post request to the correct function in the library and receive the output.
Watson NLP 库已被嵌入。因此，无需将它们导入您的代码中。您只需向库中正确的函数发送一个 POST 请求，并接收输出结果。

1. For this project, you'll use the Emotion Predict function of the Watson NLP Library. For accessing this function, the URL, the headers, and the input json format is as follows.
   在此项目中，您将使用Watson NLP Library的情绪预测功能。要访问此功能，URL、请求头和输入json的格式如下。

1. URL: 'https://sn-watson-emotion.labs.skills.network/v1/watson.runtime.nlp.v1/NlpService/EmotionPredict'
2. Headers: {"grpc-metadata-mm-model-id": "emotion_aggregated-workflow_lang_en_stock"}
3. Input json: { "raw_document": { "text": text_to_analyse } }
   Note that the text_to_analyze is being used as a variable that holds the actual written text that needs to be analyzed.
   请注意， text_to_analyze 被用作一个变量，用于存储需要分析的文本内容。
4. Create a file named emotion_detection.py in final_project folder.
   在 final_project 文件夹中创建一个名为 emotion_detection.py 的文件。
5. In the emotion_detection.py file, write the function to run emotion detection using the appropriate Emotion Detection function. Name this function emotion_detector.
   在 emotion_detection.py 文件中，编写一个使用适当的情感检测函数进行情感检测的函数。将此函数命名为 emotion_detector 。
   Note: Assume that that text to be analyzed is passed to the function as an argument and is stored in the variable text_to_analyze. The value being returned must be the text attribute of the response object as received from the Emotion Detection function.
   注意：假设要分析的文本作为参数传递给该函数，并存储在变量 text_to_analyze 中。返回的值必须是情感检测函数返回的响应对象的 text 属性。
6. Take a screenshot of the code you write and save it as 2a_emotion_detection.png.
   对您编写的代码进行截图并保存为 2a_emotion_detection.png 。
7. The application should now be importable using Python shell. Open a python3 shell.
   现在应用程序应该可以使用 Python shell 导入。打开 python3 shell。
8. Import the application.   导入应用程序。
9. After you successfully import the application, test your application with the text: “I love this new technology.”
   成功导入应用程序后，使用文本“我喜欢这项新技术”测试您的应用程序。
10. Take a screenshot of the terminal with all three steps included in it along with the final output. Name this file 2b_application_creation.png.
    将包含所有三个步骤的终端屏幕截图以及最终输出一起保存。将此文件命名为 2b_application_creation.png 。

Note: In case the python shell shows an error ModuleNotFoundError: No module named 'requests', you may install the requests library to your IDE using the following command on the terminal.
注意：如果 Python Shell 显示错误 ModuleNotFoundError: No module named 'requests' ，您可以使用以下终端命令将 requests 库安装到您的 IDE 中。

1. python3 -m pip install requests

Optional:  可选：

At any point of time if you want to push your code to your forked GitHub repository, you can do so by following the instructions provided in this link.
在任何时候，如果您想将代码推送到您的分支 GitHub 仓库，您可以通过遵循此链接中提供的说明来完成。

Task 3: Format the output of the application 任务 3：格式化应用程序的输出

1. Convert the response text into a dictionary using the json library functions.
   使用 json 库函数将响应文本转换为字典。
   Note the content formatting in this dictionary.
   注意此字典中的内容格式。
2. Extract the required set of emotions, including anger, disgust, fear, joy and sadness, along with their scores.
   提取所需情绪集，包括愤怒、厌恶、恐惧、喜悦和悲伤，以及它们的分数。
3. Write the code logic to find the dominant emotion, which is the emotion with the highest score.
   编写代码逻辑以找到主导情绪，即分数最高的情绪。
4. Then, modify the emotion_detector function to return the following output format.
   然后，修改 emotion_detector 函数以返回以下输出格式。

{
    'anger': anger_score,
    'disgust': disgust_score,
    'fear': fear_score,
    'joy': joy_score,
    'sadness': sadness_score,
    'dominant_emotion': '<name of the dominant emotion>'
}

5. Take a screenshot of the modified function code and save it as 3a_output_formatting.png.
   对修改后的函数代码进行截图并保存为 3a_output_formatting.png 。
6. Test the application in the python3 shell again, with the statement I am so happy I am doing this.
   再次在 python3 shell 中测试应用程序，并附上“我真是太高兴我在做这个”的陈述。
7. Verify that the response received has the dominant emotion is joy.
   验证收到的响应是否具有主导情绪为喜悦。
8. Take a screenshot of the output from the terminal shell and save it as 3b_formatted_output_test.png.
   对终端 shell 的输出进行截图并保存为 3b_formatted_output_test.png 。

Optional  可选

At any point of time if you want to push your code to your forked GitHub repository, you can do so by following the instructions provided in this link.
在任何时候，如果您想将代码推送到您的分支 GitHub 仓库，您可以通过遵循此链接中提供的说明来完成。

Task 4: Package the application 任务 4：打包应用程序

In this task, you will package the application created in the previous steps.
在此任务中，您需要打包在先前步骤中创建的应用程序。

1. Perform the relevant steps in creation of the package. Set the name of the package to EmotionDetection.
   执行创建包的相关步骤。将包的名称设置为 EmotionDetection 。
2. Once completed, take a screenshot of the contents of the init file along with the final folder structure of the final_project directory.
   完成后，对 init 文件的内容以及 final_project 目录的最终文件夹结构进行截图。
   Make sure to fit both of the images into a single screenshot and name it 4a_packaging.png.
   确保将两张图片合并到一张截图中，并将其命名为 4a_packaging.png 。
3. To make sure that the EmotionDetection is a valid package, you need to test the package. To do this:
   确保 EmotionDetection 是一个有效的包，你需要测试这个包。要这样做：
   1. Run a python shell in the terminal.
      在终端中运行一个 Python Shell。
   2. Import the emotion_detector function from the package.
      从包中导入 emotion_detector 函数。
   3. If the package is created accurately, you will not receive any error messages.
      如果包创建准确无误，你将不会收到任何错误消息。
   4. Test run the function again with the statement I hate working long hours.
      再次使用语句“我讨厌长时间工作”测试该功能。
   5. Verify that the output displays the dominant emotion as anger.
      验证输出是否显示主要情绪为愤怒。
4. Take a screenshot of this terminal output and save it as 4b_packaging_test.png.
   对该终端输出进行截图并保存为 4b_packaging_test.png 。

Optional:  可选：

At any point of time if you want to push your code to your forked GitHub repository, you can do so by following the instructions provided in this link.
在任何时候，如果您想将代码推送到您的分支 GitHub 仓库，您可以通过遵循此链接中提供的说明来完成。

Task 5: Run unit tests on your application 任务 5：对你的应用程序运行单元测试

With a functional application being available, you now need to run unit tests to validate the application output.
有了功能应用程序，现在您需要运行单元测试来验证应用程序的输出。

1. To run unit tests, create a new file, test_emotion_detection.py that calls the required application function from the package and tests it for the following statements and dominant emotions.
   要运行单元测试，请创建一个新文件 test_emotion_detection.py ，从包中调用所需的应用程序函数，并针对以下陈述和主要情绪进行测试。
   | Statement  陈述 | Dominant Emotion  主要情绪 |
   | --- | --- |
   | I am glad this happened
   我很高兴这件事发生了 | joy  喜悦 |
   | I am really mad about this
   我对此非常生气 | anger  愤怒 |
   | I feel disgusted just hearing about this
   我听到这个就感到恶心 | disgust  恶心 |
   | I am so sad about this
   我对这个感到非常悲伤 | sadness  悲伤 |
   | I am really afraid that this will happen
   我真的很害怕这会发生 | fear  恐惧 |
2. Once complete, take a screenshot of the code and save it as 5a_unit_testing.png.
   完成后，对代码进行截图并保存为 5a_unit_testing.png 。
3. Execute the test_emotion_detection.py file on terminal.
   在终端上执行 test_emotion_detection.py 文件。
4. Check the unit test output to verify that the unit tests have passed.
   检查单元测试输出以验证单元测试是否通过。
5. Take a screenshot of the terminal output of this execution and save it as 5b_unit_testing_result.png.
   对该执行过程的终端输出进行截图并保存为 5b_unit_testing_result.png 。

Optional:  可选：

At any point of time if you want to push your code to your forked GitHub repository, you can do so by following the instructions provided in this link.
在任何时候，如果您想将代码推送到您的分支 GitHub 仓库，您可以通过遵循此链接中提供的说明来完成。

Task 6: Web deployment of the application using Flask 任务 6：使用Flask 进行应用程序的 Web 部署

After all the tests are successfully completed, you need to deploy the application on the web. This will enable the customer to access and use the application.
所有测试均成功完成后，您需要在网页上部署应用程序。这将使客户能够访问和使用该应用程序。

Note: The index.html file in the templates folder and mywebscript.js file in the static folder have been provided as a part of the repo. These files do not need to be updated in this project.
注意： index.html 文件位于 templates 文件夹中， mywebscript.js 文件位于 static 文件夹中，这些文件是repo 的一部分。在当前项目中，这些文件无需更新。

1. You have to create the server.py file from scratch. Note the following requirements of this task.
   您需要从头开始创建 server.py 文件。请注意此任务的要求。
   Note: server.py is a part of final_project folder.
   注意： server.py 是 final_project 文件夹的一部分。
2. Make sure that the Flask decorator for the application calling function is \emotionDetector.
   确保调用函数的应用的 Flask decorator 为 \emotionDetector 。
3. The customer has requested the output to be displayed in the format as displayed in the example below.
   客户要求输出格式与下方示例所示格式一致。
   Example Output  示例输出
   Let's say that you want to evaluate the statement I love my life. The statement is processed as follows:
   假设您想要评估语句 I love my life 。该语句的处理方式如下：

1. {
2. "anger": 0.006274985,
3. "disgust": 0.0025598293,
4. "fear": 0.009251528,
5. "joy": 0.9680386,
6. "sadness": 0.049744144,
7. "dominant_emotion":"joy"
8. }
   The response is displayed as:
   响应以如下方式显示：
   For the given statement, the system response is 'anger': 0.006274985, 'disgust': 0.0025598293, 'fear': 0.009251528, 'joy': 0.9680386 and 'sadness': 0.049744144. The dominant emotion is joy.
   对于给定的陈述，系统响应为'愤怒': 0.006274985，'厌恶': 0.0025598293，'fear': 0.009251528，'喜悦': 0.9680386和'悲伤': 0.049744144。主导情绪为喜悦。
9. Application needs to be deployed on localhost:5000
   应用程序需要部署在 localhost:5000 上

For completing this task of the project, you have to first take a snapshot of the final contents of server.py and name it 6a_server.png. Secondly, you have to take a snapshot of the final deployed application, testing it for the statement “I think I am having fun”. Name this image as 6b_deployment_test.png.
为完成此项目任务，您必须首先对 server.py 的最终内容进行快照，并将其命名为 6a_server.png 。其次，您必须对最终部署的应用程序进行快照，测试其是否包含声明“我认为我在享受乐趣”，并将此图像命名为 6b_deployment_test.png 。

Optional:  可选：

At any point of time if you want to push your code to your forked GitHub repository, you can do so by following the instructions provided in this link.
在任何时候，如果您想将代码推送到您的分支 GitHub 仓库，您可以通过遵循此链接中提供的说明来完成。

Task 7: Incorporate Error handling 任务 7：加入错误处理

Incorporate the error handling capability in your function emotion_detector to manage blank entries from users, i.e. running the application without any input.
在您的函数 emotion_detector 中集成错误处理功能，以管理用户输入的空白条目，即在没有输入的情况下运行应用程序。

1. Access the status_code attribute of the server response to correctly display the system response for blank entries.
   访问服务器响应的 status_code 属性，以正确显示空白条目的系统响应。
   For status_code = 400, make the function return the same dictionary, but with values for all keys being None.
   对于 status_code = 400 ，使函数返回相同的字典，但所有键的值都为 None 。
2. Take a screenshot of the modified function and name it 7a_error_handling_function.png.
   对修改后的函数进行截图，并将其命名为 7a_error_handling_function.png 。
3. Modify server.py to incorporate error handling when the dominant_emotion is None. In this scenario, the response should display a message Invalid text! Please try again!.
   修改 server.py 以在 dominant_emotion 为 None 时加入错误处理。在这种情况下，响应应显示消息"无效文本！请重试！"。
4. Take a screenshot of this edited file and save it as 7b_error_handling_server.png.
   对编辑后的文件进行截图并保存为 7b_error_handling_server.png 。
5. Deploy the application and test it for blank entries.
   部署应用程序并测试空条目。
6. The output should display the error message, Invalid text! Please try again!.
   输出应显示错误消息"无效文本！请重试！"。
7. Take a screenshot of the output displaying the error message and name it 7c_error_handling_interface.png
   截屏显示错误信息，并将其命名为 7c_error_handling_interface.png

Optional:  可选：

At any point of time if you want to push your code to your forked GitHub repository, you can do so by following the instructions provided in this link.
在任何时候，如果您想将代码推送到您的分支 GitHub 仓库，您可以通过遵循此链接中提供的说明来完成。

Task 8: Run static code analysis 任务 8：运行静态代码分析

Finally, its time to check code compliance.
最后，是时候检查代码合规性了。

1. Run static code analysis on the code you created. Use PyLint library on server.py file and try to generate a 10/10 score. You will have to modify the server.py file to get this score. Take a snapshot of the modified file and name it as 8a_server_modified.png.
   对您创建的代码运行静态代码分析。在 server.py 文件上使用 PyLint 库，并尝试获得 10/10 的分数。您将不得不修改 server.py 文件才能获得这个分数。对修改后的文件进行快照，并将其命名为 8a_server_modified.png 。
   Note: The difference between a 9/10 score and a 10/10 score may be use of Docstrings. Include Docstrings in all functions of your codes.
   注意：9/10 分数和 10/10 分数之间的区别可能在于 Docstrings 的使用。在您代码的所有函数中包含 Docstrings。
2. Take a screenshot of a 10/10 output on the terminal after running static code analysis. Name the screenshot as 8b_static_code_analysis.png.
   对静态代码分析后在终端上获得的 10/10 输出进行截图。将截图命名为 8b_static_code_analysis.png 。

Checklist for the images 图像清单

Before you submit the project for evaluation, make sure to verify that you have captured all the images as instructed during the course of the project. Here is a quick summary of the required.
在提交项目进行评估之前，请确保按照项目过程中的指示捕获了所有图像。以下是所需内容的简要总结。

Task 1: Clone the project repository
任务 1：克隆项目仓库

1_folder_structure.png

Task 2: Create an emotion detection application using Watson NLP library
任务 2：使用Watson NLP 库创建情绪检测应用程序

2a_emotion_detection.png
2b_application_creation.png

Task 3: Format the output of the application
任务 3：格式化应用程序的输出

3a_output_formatting.png
3b_formatted_output_test.png

Task 4: Package the application
任务 4：打包应用程序

4a_packaging.png
4b_packaging_test.png

Task 5: Run Unit tests on your application
任务 5：在您的应用程序上运行单元测试

5a_unit_testing.png
5b_unit_testing_result.png

Task 6: Deploy as web application using Flask
任务 6：使用Flask 部署为 Web 应用程序

6a_server.png
6b_deployment_test.png

Task 7: Incorporate Error handling
任务 7：实现错误处理

7a_error_handling_function.png
7b_error_handling_server.png
7c_error_handling_interface.png

Task 8: Run static code analysis
任务 8：运行静态代码分析

8a_server_modified.png
8b_static_code_analysis.png

Optional:  可选：

If you want to push your code to your forked GitHub repository, you can do so by following the instructions provided in this link. This ensures you can easily review your work whenever needed.
如果您想将代码推送到您的 GitHub 分支仓库，可以按照此链接提供的说明进行操作。这确保您可以根据需要轻松查看您的工作。

Conclusion

Congratulations on completing the project.

By completing this project, you have:

1. Created an Emotion Detection application using the functions from embeddable AI libraries
2. Extracted relevant information from the output received from the function
3. Tested and packaged the application created using the Emotion Detection function
4. Completed web deployment of your application using Flask
5. Incorporated error handling in your application to account for invalid input to your application
6. Written codes that are in perfect compliance with PEP8 guidelines, getting 10/10 score in static code analysis

Next Steps

Now that you have completed the project, please submit the project for peer review.
Upload all the images, which you captured when building the project, as instructed in the Peer Graded Review Submission.

Author(s)

Abhishek Gagneja

© IBM Corporation 2023. All rights reserved.