18段代码带你玩转18个机器学习必备交互工具-CSDN博客

本文链接：https://blog.csdn.net/zw0Pi8G5C1x/article/details/93989305

本文介绍了18个用于将机器学习创意转化为Web应用程序的交互工具，包括Jupyter Notebook、Flask、HTML、CSS、Jinja2、JavaScript、jQuery、Ajax、Bootstrap等。通过实例代码，阐述了这些工具在构建和美化Web应用中的作用，帮助开发者快速上手。

摘要由CSDN通过智能技术生成

640?wx_fmt=gif

导读：本文简要介绍将机器学习创意快速、简单和漂亮地转换为Web应用程序的工具。这并不是一个完整列表，如果你想了解更多，可以尝试使用的不同技术。

作者：曼纽尔·阿米纳特吉（Manuel Amunategui）、迈赫迪·洛佩伊（Mehdi Roopaei）

如需转载请联系大数据（ID：hzdashuju）

640?wx_fmt=jpeg

01 Jupyter Notebook

Jupyter Notebook是基于Web的交互式Python解释器，非常适合构建、调整和发布任何使用Python脚本的东西。它被附加到一个功能完整的Python内核（将其设置为Python 3.x），并且可以像其他解释器一样加载和运行库及脚本。要安装Jupyter Notebook，请参考官方文档：

http://jupyter.readthedocs.io/en/latest/install.html

安装方式多种多样，包括使用“pip3”命令，如果这种方法不适合你，则请查看官方文档，了解不同的方法（代码清单1）。

sudo pip3 install jupyter

Jupyter Notebook使用起来既简单又强大。你只需将它下载到本地计算机（它是带有* .ipynb扩展名的文件），打开命令/终端Shell窗口，导航到该文件夹，然后运行“notebook”命令（代码清单2）。

jupyter notebook

此命令将打开一个网页，显示它从中启动的文件夹的内容（图3）。你可以通过单击文件列表正上方的文件夹图标向下导航文件夹结构。

640?wx_fmt=jpeg

▲图3 Jupyter Notebook登录页面

要打开Jupyter Notebook，只需单击任何带有“ * .ipynb”扩展名的文件。如果要创建全新Notebook，请单击紧接刷新按钮的仪表板右侧的“New”按钮。

【提示】有关其他信息、Jupyter Notebook问题以及附加内核的信息，请参阅：

http://jupyter-notebook-beginner-guide.readthedocs. io/en/latest/execute.html

02 Flask

Flask是一个轻量级但非常强大的服务器端Web框架。它是应用程序背后的“大脑”，也是Python数据生成函数和网页之间的黏合剂。我喜欢使用Flask的原因之一是，它允许我们在不离开Python语言的情况下将独立的Python脚本链接到服务器端Web框架，使得在对象之间传递数据更加容易！

Flask附带了发布网页的最低要求。如果你需要其他支持，例如数据库、表单控件等，则必须安装其他库，这就是它被称为轻量级微框架的原因。这也是它易于使用的原因，因为你只需学习一些技巧，其他一切都可使用熟悉的经过验证的Python库。

遗憾的是，我们只能使用Python至此，最终你需要进入前端Web脚本。但是不要有困扰—互联网上有很多很棒的例子（Stackoverflow.com、w3schools.com）和令人难以置信的GetBootstrap.com模板，可以让你尽快到达目的地。

【提示】有关Flask的更多信息，请参阅官方Flask文档。

http://flask.pocoo.org/

03 HTML

HTML（超文本标记语言）是网络技术方面最基本的东西之一。它已存在多年，用于创建几乎所有的网页和Web应用程序。

对于那些想要了解这一主题的人来说，网上的免费资料浩如烟海。要了解HTML，推荐w3schools.com网站，这个网站的学习材料组织良好、全面，而且通常是交互式的。

04 CSS

CSS（Cascading Style Sheet，层叠样式表）使大多数网站看起来很棒！我们在这里使用两种类型的CSS文件：大多数网页（最常见）的“<HEAD>”部分中加载的CSS链接和代码清单3中显示的自定义CSS。

<STYLE>.btn-circle.btn-xl {     width: 70px;     height: 70px;     padding: 10px 2px;     border-radius: 35px;     font-size: 17px;     line-height: 1.33;}</STYLE>
.btn-circle.btn-xl {
    
     width: 70px;
     height: 70px;
     padding: 10px 2px;
     border-radius: 35px;
     font-size: 17px;
     line-height: 1.33;
}
</STYLE>

托管在外部服务器上的CSS文件无法自定义，但通常是同类最佳的。有时你只需要在页面上自定义功能，即在HTML页面中直接创建本地CSS文件或样式标签，然后使用“class”参数将其应用于特定标签或区域（代码清单4）。

<button type="button" onclick="calculateBikeDemand(this)"  id="season_spring" class="btn btn-info btn-circle btn-xl"> <i class="fa fa-check">Spring</i></button>
<i class="fa fa-check">Spring</i>