乐趣区

关于人工智能:使用机器学习数据集构建销售预测Web应用程序

jiezi

作者 |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 files
uploaded = 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                 0
CONSOLE            0
YEAR               0
CATEGORY           0
PUBLISHER          0
RATING             0
CRITICS_POINTS     0
USER_POINTS        0
SalesInMillions    0
dtype: 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              17
YEAR                 23
CATEGORY             12
PUBLISHER           184
RATING                6
CRITICS_POINTS     1499
USER_POINTS        1877
SalesInMillions    2804

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

从 EDA 取得的一些见解是：

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

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

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

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

步骤 4 ：建设模型

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

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

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

import catboost as cat
cat_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_error
from math import sqrt

rmse = 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 pickle
filename = '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, abort
app = 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, abort
import pandas as pd
import catboost
import pickle
from flask_cors import CORS,cross_origin
model = 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]}), 201

if __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-app
cd sales-prediction-app
npm 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/

退出移动版