作者 | Karan Bhanot
来源 | Towards Data Science
编辑 | 代码医生团队
一直想开发一个完整的机器学习应用程序，将有一个UI来输入一些输入和机器学习模型来预测这些值。上周做到了这一点。在这个过程中，在React和Flask中创建了一个易于使用的模板，任何人都可以在几分钟内修改创建自己的应用程序。
该项目的亮点：
- 前端是在React中开发的，它包含一个带有表单的单页，用于提交输入值
- 后端是在Flask中开发的，它暴露预测端点以使用训练有素的分类器进行预测，并将结果发送回前端以便于消费
GitHub回购如下：
https://github.com/kb22/ML-React-App-Template
模板
React
React是一个由Facebook创建的JavaScript库，有助于简化开发和使用用户界面。它是前端开发的领先语言之一。可以在这里阅读它。了解React的最佳资源是它的文档本身，它非常全面且易于掌握。
https://reactjs.org/
Flask和Flask-RESTPlus
Flask和Flask-RESTPlus允许在Python中定义一个服务，它将具有可以从UI调用的端点。可以从文章中了解有关开发Flask应用程序的更多信息。
https://towardsdatascience.com/working-with-apis-using-flask-flask-restplus-and-swagger-ui-7cf447deda7f
描述
曾经create-react-app创建过一个基本的React应用程序。接下来加载了bootstrap它，允许为每个屏幕大小创建响应式网站。更新了App.js文件以添加带下拉菜单Predict和ResetPrediction按钮的表单。将每个表单属性添加到状态，按下Predict按钮，将数据发送到Flask后端。还更新了App.css文件以向页面添加样式。
模板视图
Flask应用程序具有POST端点/prediction。它接受输入值作为json，将其转换为数组并返回到UI。在实际应用中，将使用相同的数据来使用存储在其中的分类器进行预测classifier.joblib并返回预测。
在UI上显示预测
Reset Prediction 将从UI中删除预测。
启动模板
将repo克隆到计算机并进入其中并在此处打开两个终端。
准备用户界面
在第一个终端中，使用进入ui文件夹cd ui。确保使用的是节点版本10.4.1。进入文件夹后，运行命令yarn install以安装所有依赖项。
要在服务器上运行UI，将使用serve。将首先安装serve全局，post，将构建应用程序，然后最终使用serve端口3000 运行UI 。
代码语言：javascript复制npm install -g serve
npm run build
serve -s build -l 3000现在可以localhost:3000查看UI已启动并正在运行。但它不会与仍然没有启动的Flask服务进行交互。
UI
准备服务
在第二个终端上，使用移动service文件夹内部cd service。首先使用virtualenv Python 3 创建虚拟环境。然后将在激活环境后使用pip安装所有必需的依赖项。最后将运行Flask应用程序。
代码语言：javascript复制virtualenv -p Python3。
source bin / activate
pip install -r requirements.txt
FLASK_APP = app.py flask run这将启动服务127.0.0.1:5000。
服务
完整的应用程序现在将正常工作。
将模板用于自己的用例
要了解将模板用于任何模型的过程，将使用iris数据集并为其创建模型。此示例也可在example项目的文件夹中使用。
创建模型
DecisionTreeClassifier在虹膜数据集上训练了一个需要4个特征 - 萼片长度，萼片宽度，花瓣长度和花瓣宽度。然后将模型保存为classifier.joblib使用joblib.dump()。现在可以使用分类器来预测新数据。
更新服务
接下来app.py在文本编辑器中打开文件（Sublime Text是一个）。取消注释该行，classifier = joblib.load(‘classifier.joblib’)以便变量classifier现在保持训练模型。
在post方法中，做了以下更新：
代码语言：javascript复制prediction = classifier.predict(np.array(data).reshape(1, -1))
types = { 0: "Iris Setosa", 1: "Iris Versicolour ", 2: "Iris Virginica"}
response = jsonify({
"statusCode": 200,
"status": "Prediction made",
"result": "The type of iris plant is: " types[prediction[0]]
})首先classifier.predict()得到预测。接下来为类创建了一个映射，其中0表示Iris Setosa，1表示Iris Versicolour和2表示Iris Virginica。终于在result密钥中返回了预测。
更新UI
表单由行内的列组成。因此由于有4个功能，在2行中添加了2列。第一行将有Sepal Length和Sepal Width的下拉列表。第二行将有花瓣长度和花瓣宽度的下拉列表。
首先为每个下拉列表创建一个选项列表。
代码语言：javascript复制var sepalLengths = []
for (var i = 4; i <= 7; i = (i 0.1).toFixed(1)) {
sepalLengths.push(<option key = {i} value = {i}>{i}</option>);
}
var sepalWidths = []
for (var i = 2; i <= 4; i = (i 0.1).toFixed(1)) {
sepalWidths.push(<option key = {i} value = {i}>{i}</option>);
}
var petalLengths = []
for (var i = 1; i <= 6; i = (i 0.1).toFixed(1)){
petalLengths.push(<option key = {i} value = {i}>{i}</option>);
}
var petalWidths = []
for (var i = 0.1; i <= 3; i = (i 0.1).toFixed(1)) {
petalWidths.push(<option key = {i} value = {i}>{i}</option>);
}接下来定义了两行，每行两列。每个下拉列表选项将如下所示：
代码语言：javascript复制<Form.Group as={Col}>
<Form.Label>Petal Length</Form.Label>
<Form.Control
as="select"
value={formData.petalLength}
name="petalLength"
onChange={this.handleChange}>
{petalLengths}
</Form.Control>
</Form.Group>对于每个下拉列表，必须更新内部文本<Form.Label></Form.Label>。也会为每个选择组命名。假设名称为petalLength，将值设置为，{formData.petalLength}并命名为“petalLength”。这些选项可以使用上面内部定义的名称加入<Form.Control></Form.Control>可以看到{petalLengths}上面。一个内部的两个这样的组<Form.Row></Form.Row>将成为UI。
还必须使用相同的名称更新状态，formData并使用默认值作为相应下拉列表的最小值。构造函数如下所示。状态已更新为具有formData新密钥。
代码语言：javascript复制constructor(props) {
super(props);
this.state = {
isLoading: false,
formData: {
sepalLength: 4,
sepalWidth: 2,
petalLength: 1,
petalWidth: 0
},
result: ""
};
}添加新的背景图像和标题
在app.css中，将背景图像的链接更改为自己的链接。添加了Unsplash中的鲜花图像。还在文件夹中的文件Iris Plant Classifier内更新了标题和页面标题。index.htmlpublic
结果
该应用程序现在可以使用该模型了。使用构建UI后重新启动两个服务npm run build。该应用程序如下所示：
主页
使用某些特征值，按下Predict按钮时，模型将其分类为Iris Setosa。
使用新的特征值，模型可以预测工厂Iris Versicolour。
结论
在本文中讨论了一个ML React App模板，它将使创建完整的ML应用程序变得简单快捷。
