作者|Saurabh Mhatre
编译|Flin
起源|analyticsvidhya

介绍

互联网上有很多资源能够找到对于机器学习数据集的见解和训练模型，然而对于如何应用这些模型构建理论应用程序的文章很少。

因而，明天咱们将通过首先应用hackathon中的数据集来训练视频游戏销售预测模型，而后应用经过训练的模型来创立一个根本应用程序，依据用户输出为咱们提供销售预测来学习此过程。

本文分为多个局部，你能够一个接一个地学习，而不用一口气实现它。从我第一次抉择数据集以来，我花了整整一周的工夫来实现应用程序。因而，请花工夫专一于学习构建应用程序的各个方面，而不是只留神最终产品。

第1局部：生成模型

咱们将应用在Machine Hack网站上运行的视频游戏销售预测hackathon中的数据集。首先，在MachineHack上创立一个帐户，而后在此链接上注册hackathon。

  • https://www.machinehack.com/h...

注册后，转到数据标签并下载zip文件，该文件将蕴含三个文件，即训练，测试和样品提交。

下一步将在Google Colab Notebook中介绍，你能够从以下链接关上和克隆该Notebook：

  • https://colab.research.google...

或者如果你想在本地或其余平台上下载并运行该Notebook，请从以下GitHub链接下载该Notebook：Jupyter Notebook链接

  • https://github.com/codeclassi...

Notebook电脑的第一局部简要介绍了问题陈说。通过运行上面显示的下一个代码单元，上传咱们收到的文件

from google.colab import filesuploaded = files.upload()for fn in uploaded.keys():  print('User uploaded file "{name}" with length {length} bytes'.format(      name=fn, length=len(uploaded[fn])))

在下一个代码单元中，咱们导入所需的python包。它们中的大多数已事后装置在Google Colab中，因而无需装置它们中的任何一个。

因为咱们无奈在hackathon完结后提交测试数据进行评估，因而本文其余部分仅将数据用于Train.csv。请记住，Train.csv的行数少于通常用于正确训练模型的行数。然而，出于学习目标，咱们能够应用行数较少的数据集。

当初让咱们深入研究解决此机器学习问题…

步骤1：辨认指标和独立特色

首先，让咱们将Train.csv导入pandas数据框中，而后运行df.head()以查看数据集中的列。

从数据框中，咱们能够看到指标列是SalesInMillions，其余列是独立特色

步骤2：清理资料集

首先，咱们通过运行input.isnull().sum()命令查看null值。

input.isnull().sum()#Output:ID                 0CONSOLE            0YEAR               0CATEGORY           0PUBLISHER          0RATING             0CRITICS_POINTS     0USER_POINTS        0SalesInMillions    0dtype: int64

咱们能够看到数据集中没有空值。接下来，咱们能够通过运行以下命令删除不必要的列ID，因为它在指标销售中不起作用：input = input.drop(columns=['ID'])

接下来，咱们能够应用train_test_split命令将数据框分为训练和测试数据集：

train, test = train_test_split(input, test_size=0.2, random_state=42, shuffle=True)

步骤3：探索性数据分析

描述性统计信息

应用df.shape命令咱们能够找到数据集中的总行数，并且能够应用命令df.nunique()在每个列中查找惟一值。

CONSOLE              17YEAR                 23CATEGORY             12PUBLISHER           184RATING                6CRITICS_POINTS     1499USER_POINTS        1877SalesInMillions    2804

在EDA局部中，咱们应用pandas profiling和matplotlib包生成各种列的图形，并察看它们与指标列的关系。

从EDA取得的一些见解是：

PS3平台的销售额最高。之后是Xbox360：

动作类别的销售额最高，难题类别的销售额最低

2007年到2011年的销售额最高：

通常，咱们在EDA之后进行特色工程或特征选择步骤。然而，咱们的性能较少，着重于理论应用模型。因而，咱们正在朝着下一步迈进。然而，请记住，USER_POINTS和CRITICS_POINTS列可用于派生其余性能。

步骤4：建设模型

因为咱们具备许多分类性能，因而咱们将对数据集应用catboost回归模型。因为catboost能够间接作用于分类特色，因而跳过了对分类特色进行标签编码的步骤。

首先，咱们应用pip install命令装置catboost软件包。

而后，咱们创立一个分类特色列表，将其传递给模型，而后将模型拟合到训练数据集上：

import catboost as catcat_feat = ['CONSOLE','CATEGORY', 'PUBLISHER', 'RATING']features = list(set(train.columns)-set(['SalesInMillions']))target = 'SalesInMillions'model = cat.CatBoostRegressor(random_state=100,cat_features=cat_feat,verbose=0)model.fit(train[features],train[target])

步骤5：查看模型的准确性

首先，咱们依据测试数据集创立实在的预测：

y_true= pd.DataFrame(data=test[target], columns=['SalesInMillions'])test_temp = test.drop(columns=[target])

接下来，咱们在测试数据集上运行训练良好的模型以获取模型预测并查看模型准确性

y_pred = model.predict(test_temp[features])from sklearn.metrics import mean_squared_errorfrom math import sqrtrmse = sqrt(mean_squared_error(y_true, y_pred))print(rmse)#Output: 1.5555409360901584

咱们的RMSE值为1.5，这相当不错。无关在呈现回归问题时准确性指标的更多信息，能够参考本文。

  • https://medium.com/analytics-...

如果你想进一步改善模型或尝试组合各种模型，能够在本文中参考本次hackathon获胜者的办法：

  • https://analyticsindiamag.com...

步骤6：将模型保留到pickle文件中

当初，咱们能够将模型保留到pickle文件中，而后将其保留在本地：

import picklefilename = 'finalized_model.sav'pickle.dump(model, open(filename, 'wb'))

保留pickle文件后，你能够从Google Colab Notebook文件局部的左侧边栏中下载并保留在本地

额定提醒

  • 增加更多数据

咱们能够通过向模型增加更多数据来改善模型预测。咱们能够应用一些在Kaggle上的相干的数据集。Kaggle：https://www.kaggle.com/gregor...

  • 进步模型效率

咱们能够应用组合模型的堆栈来进一步提高模型效率。

如果你已实现此步骤，请轻拍一下本人的背，因为咱们刚刚实现了我的项目的第一个次要局部。劳动一会儿，拉伸一下，而后开始本文的下一部分。

第2局部：依据模型创立后端API

咱们将应用Python Flask创立后端API。

因而，首先在本地创立一个名为server的文件夹。另外，如果还没有，请在你的计算机上安装Python和pip软件包管理器。

接下来，咱们须要在文件夹中创立一个虚拟环境。我在Linux上应用python3，因而我创立虚拟环境的命令为：python3 -m venv server。

你能够在本文中查看实用于你的OS和Python版本的命令：Python venv：https://packaging.python.org/...

接下来，咱们将通过运行以下命令激活虚拟环境： source server/bin/activate

实现后，咱们须要装置Flask pip软件包： pip install -U Flask

接下来，应用你喜爱的文本编辑器在服务器文件夹中创立一个名为“app.py”的文件，并增加以下代码以创立根本的API：

from flask import Flask, jsonify, make_response, request, abortapp = Flask(__name__)@app.route("/")def hello():  return "Hello World!"if __name__ == "__main__":  app.run()

当初关上终端并运行python3 app.py以启动服务器。这将次要在5000端口上启动服务器。为了测试API，请在浏览器中关上此链接：http://localhost:5000/

你应该在浏览器中打印出Hello World。如果不是，则在启动API时查看API是否在其余端口上运行或在终端上打印谬误。

咱们将调用POST API，因而最好在持续进行之前装置Postman工具。应用此工具将向服务器发送POST申请。

接下来，咱们须要应用以下命令装置catboost，pandas和Flask-Cors pip软件包：

pip install catboost pandas Flask-Cors

接下来，将咱们在第1局部开端下载的经过训练的模型的pickle文件（finalized_model.sav）复制到服务器文件夹中。

当初，应用以下代码更新 app.py：

from flask import Flask, jsonify, make_response, request, abortimport pandas as pdimport catboostimport picklefrom flask_cors import CORS,cross_originmodel = pickle.load(open( "finalized_model.sav", "rb"))app = Flask(__name__)app.config['CORS_HEADERS'] = 'Content-Type'cors = CORS(app)@app.errorhandler(404)def not_found(error):    return make_response(jsonify({'error': 'Not found'}), 404)@app.route("/")def hello():  return "Hello World!"@app.route("/get_prediction", methods=['POST','OPTIONS'])@cross_origin()def get_prediction():    if not request.json:        abort(400)    df = pd.DataFrame(request.json, index=[0])    cols=["CONSOLE","RATING","CRITICS_POINTS","CATEGORY","YEAR","PUBLISHER","USER_POINTS"]    df = df[cols]    return jsonify({'result': model.predict(df)[0]}), 201if __name__ == "__main__":  app.run()

在第6行中，咱们将训练后的模型导入到咱们的python文件中。

在第10行，咱们初始化CORS模块以容许来自客户端API调用的申请。

在第11行，咱们定义了一个谬误处理程序，如果从服务器拜访了任何未解决的异样或未定义的门路，它将发送谬误响应。

对咱们来说，次要的趣味点是从第19行定义的get_prediction POST API。get_prediction办法是咱们从客户端获取数据并提供响应的销售预测。

在第24行，咱们将来自API申请的数据转换为pandas数据框。当初，咱们的模型冀望列以特定程序提供正确的响应。因而，在第25行中，咱们指定列程序。在接下来的步骤中，以所需程序重新排列列。

在第27行，model.predict用于从模型中获取预测，并将其作为响应传递给客户端。在这一步，咱们筹备好在本地应用该API。咱们能够通过发送POST-API调用来测试Postman客户端中的API，如截图所示：

你能够在上述申请的注释局部中增加一个JSON示例，能够在代码Github-gist中找到。

  • https://gist.github.com/codec...

确保在主体和主体类型中抉择raw和JSON选项（如屏幕截图所示），并在申请类型中抉择POST。

如果在此步骤之前一切正常，那么祝贺你，你当初有了一个后端API，该API可依据输出参数依据经过训练的模型进行预测。

额定提醒

  • 模块化代码

在后端设计中不倡议在单个文件中编写API，咱们能够将门路和模型导入分隔到不同的文件夹中，以使代码更具模块化。如果未来引入其余API，这也将使咱们可能以可治理的形式扩大代码。

在这一点上，咱们能够再次劳动一下，确保珍藏了本文，以便轻松地从新开始本我的项目的下一部分。

第3局部：将后端API部署到Heroku

到目前为止，咱们的API在本地工作，但咱们须要将其部署在近程服务器上，以供其余中央应用。为此，咱们将应用Heroku作为咱们的API托管平台。

我次要参考了来自stackabuse 的文章，将其部署到Heroku。咱们将简要介绍这些步骤，然而如果你卡在了其中某个步骤，请在此处参阅原始文章：

  • Stackabuse文章：https://stackabuse.com/deploy...

首先，咱们应用terminal命令装置gunicorn：

pip install gunicorn

接下来，运行上面的命令将所有已装置的pip包，存储到require.txt文件：

pip freeze > requirements.txt

你能够参考此处上传的requirements.txt文件以供参考：

  • Github链接：https://github.com/codeclassi...

接下来，Procfile应用以下代码在服务器文件夹中创立一个名称为Procfile的文件：

web: gunicorn app:app

当初，在Heroku网站上注册，在该网站上创立一个利用，而后依照原始文章中的阐明装置Heroku CLI 。

接下来，通过运行以下命令从本地终端登录Heroku： heroku login -i

应用以下命令增加你的Heroku利用git参考：

heroku git:remote -a {your-project-name}

当初，应用以下命令将代码推送到Heroku：

git push heroku master

在运行上述命令的最初，你将在终端输入中取得API URL，当初咱们能够应用该URL从客户端进行调用。此时，咱们还能够从PostMan应用程序发送API申请，以查看咱们是否正确收到了与步骤2开端所述相似的响应。

到目前为止的代码库能够在以下Github存储库中找到

  • Videogame Sales Backend:https://github.com/codeclassi...

当初，咱们在服务器上托管了一个失常工作的API。如果一切正常，那么咱们能够持续开发客户端应用程序。如果遇到任何问题，请在评论局部中提及你的问题。

第4局部：应用react和bootstrap创立客户端应用程序

咱们将须要在咱们的计算机上正确装置和设置Node.js。因而，请先下载并装置实用于你相干操作系统和零碎的Node.js，而后再持续进行操作。另外，倡议装置yarn管理器：yarn 装置

当初，在上一步中创立frontend的服务器文件夹内部创立一个新文件夹，并从终端进入该frontend文件夹外部。

接下来，咱们将创立一个新的react应用程序，并通过在终端中运行以下命令来启动它：

npx create-react-app sales-prediction-appcd sales-prediction-appnpm start

你应该在浏览器中看到默认关上的浏览器选项卡，以及react.js默认模板应用程序。当初咱们须要在咱们最喜爱的编辑器中关上该我的项目（我正在应用VSCode），并开始进行更改以构建前端应用程序。

首先，咱们须要在应用程序公共文件夹中的index.html文件中导入相干的疏导程序文件。

咱们须要依照bootstrap文档提供的阐明在index.html文件中增加文件，如下所示：

  • bootstrap文档：https://getbootstrap.com/docs...
<head>...<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">...</head><body>...<div id="root"></div>...<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>...</body>

咱们的最终用户界面是汇合下拉菜单项，其中单个项如下所示：

咱们将在src文件夹中创立一个名称为optionsSources.json的JSON文件。JSON文件中的每个条目都蕴含以下对象：

{    "CONSOLE": {        "options": [            "ps2","x360","ps3","pc"        ],        "icon": "????️",        "dropDownPlaceholder": "Select Console"    }}

下拉菜单中显示的选项位于options数组中，下拉菜单选项左侧显示的图标和标签位于icon和dropDownPlaceholder项。咱们须要创立多个这样的下拉列表，因而要增加的残缺JSON文件如以下文件所示：

  • https://github.com/codeclassi...

接下来，咱们须要在咱们的应用程序中实现下拉组件。在src文件夹中创立一个名为components的文件夹，并在components文件夹中创立一个名为OptionSelection.js的文件

咱们将编写一个性能组件，该组件返回一个下拉项，如下所示：

import React,{ useState } from 'react';import optionSources from  '../optionsSources.json';function OptionSelection({itemKey, setOptionInObject}) {    const title = optionSources[itemKey].dropDownPlaceholder;    const icon = optionSources[itemKey].icon;    return(        <div className="d-flex justify-content-start align-items-center mt-2 selection-item">            <div className="option-label">            <b><span role="img" aria-label="label-icon">{icon}</span>{` ${title}`}</b>            </div>            <div className="dropdown ml-4">            <button className="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">                {title}            </button>            <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">                {renderOptionsDropdown()}            </div>            </div>        </div>    )}export default OptionSelection;

在下面的组件中，咱们itemKey从第3行的父组件中取得prop（param）值。咱们假如itemKey从父组件接管的是CONSOLE。在第4行和第5行，咱们首先提取显示在下拉菜单左侧的题目和图标。而后，依据Boostrap文档在创立下拉列表时，在第6行的返回函数中应用HTML标签。

接下来，咱们须要实现renderOptionsDrop在返回函数中定义的函数，如下所示：

import optionSources from  '../optionsSources.json';function OptionSelection({itemKey, setOptionInObject}) {...const renderOptionsDropdown = () => {        const selectionOptions = optionSources[itemKey].options;        return selectionOptions.map((selectionOption, index)=>{            return (                <div className="dropdown-item pointer"                      key={`${index}${selectionOption}`}                      onClick={() => handleDropDownSelection(selectionOption)}                >                    {selectionOption}                </div>            );        })}...}

在第5行，咱们从optionSources JSON对象获取特定项的options数组，并将其存储在selectionOptions变量中。

而后在第6行，咱们应用map函数迭代数组并显示下拉选择项。咱们必须在第10行应用onClick函数更新下拉项的选定值。

而后实现onClick处理程序中的函数handleDropDownSelection，如下所示：

import React,{ useState } from 'react';...function OptionSelection({itemKey, setOptionInObject}) {    const [currentSelectedOption, setSelectedOption] = useState(null);    const handleDropDownSelection = (consoleOption) => {        setSelectedOption(consoleOption)        setOptionInObject(itemKey, consoleOption)    }    ...}

咱们在第1行输出了useState hook。它是一个外部函数，容许咱们应用状态变量的概念动静更新值。对于这个函数的更多信息能够在这里找到：

  • React useState docs:https://reactjs.org/docs/hook...

在第7行，咱们更新下拉列表的选定选项。在第8行中，咱们将抉择的值传递回父函数以进行进一步解决。

这个组件的残缺代码能够在这里找到：https://github.com/codeclassi...

而后咱们在src文件夹中导入此选项并对服务器进行API调用。残缺的代码能够在这里找到：

  • https://github.com/codeclassi...

而后在handleInputSubmission函数中对后端进行API调用，如下所示：

import React, {useState} from 'react';import axios from 'axios';function App() {  ...  const handleInputSubmission = () => {    if(selectedObject && Object.keys(selectedObject).length === 7) {      ...      axios.post(process.env.REACT_APP_HEROKU_SERVER_URL, selectedObject)      .then(function (response) {        setPredictionLoading(false)        setModelPrediction(response.data.result)      })      .catch(function (error) {        setPredictionLoading(false)        setRequestFailed("Some error ocurred while fetching prediction")      });    } else {      setRequestFailed("Please select all fields before submitting request")    }  }}

咱们正在应用Axios npm模块对后端Heroku服务器进行POST API调用。确保在process.env.REACT_APP_HEROKU_SERVER_URL占位符的第8行上增加本人的Heroku服务器URL，以接管来自服务器API的响应。

最好将API URL变量保留在.env文件中，而后在部署环境中进行设置。能够在这里找到更多详细信息：

  • Env变量: https://create-react-app.dev/...

在此处找到Github上的前端应用程序的残缺资源：

  • 视频游戏销售预测前端:https://github.com/codeclassi...

这使咱们有了在线部署Web应用程序的最初一步。因而，请急躁一些，让咱们开始我的项目的最初一步。

第5局部：将客户端应用程序部署到Netlify

Netlify是一个能够轻松在线部署动态网站的平台。在部署应用createreact app模块生成的应用程序时，它有一个非常简单的过程。咱们将利用此服务在线托管咱们的web应用程序。

首先，咱们须要在Github上创立一个帐户。

而后，咱们须要将前端文件夹上传到Github存储库。咱们能够依照官网文档中显示的步骤将我的项目部署到Github：官网文档(https://docs.github.com/en/gi...

一旦该我的项目在GitHub上进行部署，通过遵循以下官网文档即可简略，间接地实现netlify的过程：Netlify Deploy(https://www.netlify.com/blog/...

如果你已在上一步中将环境变量用于服务器URL，请确保如本文档所示将其增加到netlify dashboard中。

最初，咱们将提供一个如下所示的网络应用程序：

额定提醒

  • 改良UI和配色计划

诚实说，下面的UI非常简单。它没有很好的配色计划（次要是因为像我这样的开发人员不是优良的设计师）。你能够改善设计并调整CSS，以更好地查看网页。

尾注

这样就实现了从机器学习hackathon数据集创立销售预测Web应用程序的过程。

如果你在实现我的项目的过程中没有遇到任何麻烦，那么你的剖析和编码技能将受到赞美。然而，如果你的确遇到了艰难，那么，像平常一样，能够寻求Google和StackOverflow的帮忙。如果你依然无奈找到解决问题的办法，请随时在评论中提及它们或在LinkedIn或Twitter上与我分割。

  • 我的Twitter：https://twitter.com/saurabhna...
  • 我的LinkedIn：https://www.linkedin.com/in/s...

原文链接：https://www.analyticsvidhya.c...

欢送关注磐创AI博客站：
http://panchuang.net/

sklearn机器学习中文官网文档：
http://sklearn123.com/

欢送关注磐创博客资源汇总站：
http://docs.panchuang.net/