After creating a Python-based machine learning application you might want to get it running on a website.

创建基于Python的机器学习应用程序后，您可能希望使其在网站上运行。

In this article it is explained how this can be realized with the microframework Flask for an image-based recommender system.

在本文中，说明了如何使用基于图像的推荐系统的微框架Flask来实现这一点。

We implement an image gallery on a website, the images can be selected, and similar images are displayed. Such a solution could be employed for example in online shops.

我们在网站上建立了图片库，可以选择图片，并显示类似的图片。 例如，可以在在线商店中采用这种解决方案。

The similarities are obtained by comparing feature vectors derived with a pretrained Resnet18 network as explained in a previous article. The results from this work are Pandas dataframes (essentially tables) with the names of most similar images and similarity values between zero (not similar) and one (most similar) for each image. These are stored and used here.

如上一篇文章所述，通过比较使用预训练的Resnet18网络导出的特征向量来获得相似性。 这项工作的结果是熊猫数据帧(基本上是表格)，具有最相似图像的名称，并且每个图像的相似度值在零(不相似)和一个(最相似)之间。 这些在这里存储和使用。

In the next figure, in (a) the steps from the theory and implementation are sketched. This article focuses on part (b), where the dataframes have already been calculated offline to be used on a website.

在下图中，在(a)中概述了理论和实现的步骤。 本文重点介绍(b)部分，其中数据帧已离线计算以用于网站。

We will see how to

我们将看到如何

• install Flask and run the app locally on a debug server安装Flask并在调试服务器上本地运行应用程序
• define needed routes — the URLs that are used for the gallery and the recommendations定义所需的路线-用于画廊和推荐的URL
• transfer the needed information from the user input to the backend and the recommendations back to the user将所需的信息从用户输入传递到后端，并将建议返回给用户
• implement a html/JavaScript gallery that suggests similar images实现建议类似图像的html / JavaScript库

• create pickle files based on my first two articles (theory, implementation with Jupyter notebook). Use them for top-k lists that define the recommended images.

  根据我的前两篇文章( 理论 ，使用Jupyter notebook 实现 )创建pickle文件。 将它们用于定义推荐图像的前k个列表。

1.烧瓶 (1. Flask)

Flask is a very popular microframework written in Python. It is called ‘micro’ as it does not come along with a complete feature set, abstraction layers for databases, user management or similar functionality, but it is extendable with available libraries covering all the needs.

Flask是使用Python编写的非常流行的微框架。 它之所以被称为“微型”，是因为它没有完整的功能集，数据库的抽象层，用户管理或类似功能，但可以通过扩展的扩展库来满足所有需求。

This might sound like a drawback compared to feature-rich frameworks like Django, however, it also reduces complexity, leaves the users with more choices and allows to keep a better overview over the application.

与Django之类的功能丰富的框架相比，这听起来像是一个缺点，但是，它还降低了复杂性，为用户提供了更多选择，并允许您更好地了解应用程序。

What you can do with it easily: Use your python code in the backend, communicate results to the frontend that you can write with html, JavaScript and css — you can also use a frontend framework like Vue.js.

您可以轻松地执行以下操作：在后端使用python代码，将结果传递给可以使用html，JavaScript和CSS编写的前端-您还可以使用Vue.js之类的前端框架。

Flask offers the usage of templates based on the Jinja2 syntax that simplify reusability and dynamic creation of webpages.

Flask提供了基于Jinja2语法的模板的使用，这些模板简化了网页的可重用性和动态创建。

If you plan to play around with Flask for the first time, I recommend to watch a few tutorials from Corey Schafer, who created a concise Flask series that gets you started very fast.

如果您打算第一次玩Flask，我建议您看Corey Schafer的一些教程，他们创建了一个简洁的Flask系列，可以帮助您快速入门。

How to run Flask in the first step (on Windows)? After creating a suitable virtual environment, install it, e.g. with pip

第一步(在Windows上)如何运行Flask？ 创建合适的虚拟环境后，例如使用pip进行安装

pip install Flask

and import it to make all the code available to build Flask web applications

并将其导入以使所有代码可用于构建Flask Web应用程序

from flask import Flask

To run the local debug webserver, you can use a batch file containing your main Python file

要运行本地调试Web服务器，可以使用包含主Python文件的批处理文件

set FLASK_DEBUG=1set FLASK_APP=recommenderFlask.pyflask run

FLASK_APP just sets the application file. Then you access it via

FLASK_APP只是设置应用程序文件。 然后您通过访问

http://localhost:5000/

http：//本地主机：5000 /

Setting FLASK_DEBUG causes debug information to be displayed directly in the browser.

设置FLASK_DEBUG将导致调试信息直接在浏览器中显示。

To print ‘Hello, world!” the python file should read

要打印“你好，世界！” python文件应读取

from flask import Flaskapp = Flask(__name__)@app.route(‘/’)def hello_world():  return ‘Hello, World!’

For this article I used Flask version 1.1.1 and Python version 3.5.4.

对于本文，我使用了Flask版本1.1.1和Python版本3.5.4。

2.路线 (2. Routes)

Let’s set up the main file for the application, recommendFlask.py

让我们为应用程序设置主文件，recommendedFlask.py

from flask import Flaskapp = Flask(__name__)@app.route(“/”)@app.route(“/home”)# Need to write a function that is called when opening the site@app.route(“/recommend”)# Need to write a function that is called when opening recommendationsif __name__ == ‘__main__’:  app.run(debug=True)

• We import the Flask class to be able to create the Flask web application.我们导入Flask类，以便能够创建Flask Web应用程序。

• The Flask instance app is created, and it is run in the last line if the script is called directly as then Python sets __name__ == ‘__main__’. This is not the case if recommendFlask.py was imported from another script. Setting debug to true has the benefit that you can see errors during development on the website itself.

  Flask实例应用已创建，如果直接调用脚本，则会在最后一行运行，因为Python会设置__name__ =='__main__'。 这是不是这样，如果recommendFlask.py是从其他脚本导入。 将debug设置为true的好处是，您可以在网站本身的开发过程中看到错误。

• In between there are the home and recommend routes that are not doing anything yet. They will trigger corresponding functions written and explained in the next sections. We will reach the main page that will contain an image gallery via localhost:5000/home/ or localhost:5000/, while the recommendations will be shown on localhost:5000/recommend/

  在两者之间有尚未执行的家庭路线和推荐路线。 它们将触发下一部分中编写和说明的相应功能。 我们将通过localhost：5000 / home /或localhost：5000 /进入包含图像库的主页，而建议将显示在localhost：5000 / recommend /

Let us create a gallery with images.

让我们创建一个包含图像的画廊。

3.画廊 (3. The gallery)

We will put the image names of interest that are located within a folder into a dummy array on top of the recommenderFlask.py file.

我们会将位于文件夹中的感兴趣的图像名称放到recommerderFlask.py文件顶部的虚拟数组中。

images = [  {    ‘name’:’buildings0.jpg’,    ‘caption’: ‘Lisboa’  },  {    ‘name’: ‘buildings1.png’,     …

We use this data to create the gallery. For a production system this part needs to be moved to a database — this will be part of a follow-up article.

我们使用此数据创建图库。 对于生产系统，这部分需要移动到数据库中-这将是后续文章的一部分。

The home route is called with a function that renders the html pages based on the variable content concerning the images.

本地路由是通过一个函数来调用的，该函数根据与图像有关的变量内容来呈现html页面。

Therefore, add the library for html rendering

因此，添加用于html渲染的库

from flask import render_template

and call the gallery creation with the image array

并使用图片数组调用图库创建

@app.route(“/home”)def home():  return render_template(‘home.html’, images = images)

home.html is a template to be put into the Flask template folder that allows to iterate e.g. in a div block through the images.

home.htm l是要放入Flask模板文件夹中的模板，该模板允许例如在div块中迭代图像。

Flask enables the usage of passed variables and for example to use for loops and variables in curly brackets as the following one

Flask允许使用传递的变量，例如用于循环和大括号中的变量，如下所示

{% for image in images %}  <div class=”item”>    <a href=”{{ url_for(‘recommend’, selectedImage=’’) }}{{image.name }}”>    <img src=”{{ url_for(‘static’, filename=’site_imgs/images/’) }}{{image.name}}” alt=”{{image.name}}” id=”showSimilarInPopup”>    <div class=”caption”>      {{image.caption}}    </div>    </a>  </div>{% endfor %}

In the templates you can add css and scripts to make the gallery work. For pagination in the gallery I added one script that is located in the static folder (that is configured as default by Flask).

在模板中，您可以添加CSS和脚本来使图库正常工作。 为了在画廊中进行分页，我添加了一个位于静态文件夹中的脚本(Flask将其配置为默认脚本)。

<script src=”{{ url_for(‘static’, filename=’js/pagination.js’) }}”></script>

Overall, you can create your favorite approach and style to show and iterate the images.

总体而言，您可以创建自己喜欢的方法和样式来显示和迭代图像。

For the tests and above website I used the images provided in the GitHub repository for the top-k list calculation. Due to the few different classes within the 21 images it helps testing the provided recommendations.

对于测试和以上网站，我使用GitHub存储库中提供的图像进行top-k列表计算 。 由于21张图片中的类别不同，因此有助于测试所提供的建议。

When clicking on one of the images the reference

单击其中一张图像时，参考

<a href=”{{ url_for(‘recommend’, selectedImage=’’) }}{{image.name }}”>

to the recommendation route comes into play. We want to generate a new html page showing the most similar images to the selection.

推荐路线发挥作用。 我们要生成一个新的html页面，显示与所选内容最相似的图像。

4.推荐人 (4. The Recommender)

We just saw that triggering an image sets the variable selectedImage to the name of the image from the images array and the recommend route is called. You can see it in the URL when clicking on an image (e.g. on camper2.jpg from the set)

我们刚刚看到触发图像将变量selectedImage设置为images数组中图像的名称，并调用了推荐路线。 单击图像时，您可以在URL中看到它(例如，集合中的camper2.jpg)

Let’s use this variable in our application file.

让我们在应用程序文件中使用此变量。

from flask import request@app.route(“/recommend”)def recommend():  selectedImage = request.args.get(‘selectedImage’)  inputImage, images, values = getImages(selectedImage)  return render_template(‘recommend.html’, title=’Recommendations’, customstyle=’recommend.css’, inputImage=inputImage, similarImages=images, similarityValues = values)

What happens here after the variable is requested:

请求变量后，这里会发生什么：

• The getImages function returns arrays of similar images to the input

  getImages函数将相似图像的数组返回到输入

• From the template recommend.html, based on the input and similar images related to the input, an html site is generated. A custom style is used for the html page.

  根据输入的模板和与输入相关的相似图像，从模板荐行 HTML.html中生成一个html站点。 自定义样式用于html页面。

In the template the original image is shown based on the corresponding variable inputImage

在模板中，基于相应的变量inputImage显示原始图像

<div class=”originalImage”>  <h3> Input image</h3>  <img src=”{{ url_for(‘static’, filename=’site_imgs/images/’) }}{{inputImage}}” alt=”{{inputImage}}” id=”showSimilarInPopup”></div>

and the similar images are listed based on the similarImages array

和相似的图像中列出基于similarImages阵列上

<div class=”galleryContent”>  <h3> Similar images</h3>  {% for image in similarImages %}    <div class=”item”>      <img id=”popupImage{{loop.index}}” onclick=”imageClicked(this.id)” src=”{{ url_for(‘static’, filename=’site_imgs/images/’) }}{{image}}” alt=”{{image}}” id=”showSimilarInPopup”>    </div>  {% endfor %}</div>

That’s it for the core Flask elements. Everything else that was done is making the website nice and the gallery functional.

核心Flask元素就是这样。 所做的所有其他事情都使网站变得美观并且画廊得以正常运行。

The last point to discuss is the getImages function from above.

最后要讨论的是上面的getImages函数。

5.使用前k个列表 (5. Using the top-k lists)

When comparing the feature vectors derived from the evaluation of the convolutional neural network for different images, top-k lists are created (for each image the k most similar images from your image set are noted).

当比较从卷积神经网络评估得出的不同图像的特征向量时，将创建前k个列表(对于每个图像，将记录图像集中k个最相似的图像)。

Referring to the implementation presented in the last article (Jupyter Notebook can be found on GitHub including example images), we store the already derived Pandas dataframes from this notebook similarNames and similarValues, containing the similar names and the corresponding similarity values, as Pickle files

参照所呈现的实施上一篇文章 (Jupyter笔记本可以上找到的GitHub包括例如图像)，我们从该笔记本similarNames和similarValues存储已经衍生熊猫dataframes，含有该类似的名称和相应的相似性值，如味酸文件

import picklesimilarNames.to_pickle("similarNames.pkl")similarValues.to_pickle("similarValues.pkl")

On the website these can be just treated as static content that is loaded and used to provide most similar images, but as for the gallery a database should do the job in production.

在网站上，这些内容可以看作是静态内容，可以被加载并用于提供最相似的图像，但是对于图库来说，数据库应在生产中发挥作用。

The following snippet is used to return the prescribed number (recLength) of most similar images and similarity values.

以下代码段用于返回规定数量( recLength )的大多数相似图像和相似度值。

import pickleimport osimport sysfrom numpy.testing import assert_almost_equalglobal recLengthrecLength = 3def getNames(inputName, similarNames, similarValues):  images = list(similarNames.loc[inputName, :])  values = list(similarValues.loc[inputName, :])  if inputName in images:    assert_almost_equal(max(values), 1, decimal = 5)    images.remove(inputName)    values.remove(max(values))    return inputName, images[0:recLength], values[0:recLength]def getImages(inputImage):  similarNames = pickle.load(open(os.path.join(“static/pickles/similarNames.pkl”), ‘rb’))  similarValues = pickle.load(open(os.path.join(“static/pickles/similarValues.pkl”), ‘rb’))  if inputImage in set(similarNames.index):    return getNames(inputImage, similarNames, similarValues)  else:    print(“‘{}’ was not found.”.format(inputImage))    sys.exit(2)

getImages loads the pickle files. getNames creates simple lists out of them and removes the same images from these lists. recLength is the number of similar images you want to work with and should be moved to a configuration file.

getImages加载pickle文件。 getNames从中创建简单列表，并从这些列表中删除相同的图像。 recLength是您要使用的相似图像的数量，应将其移动到配置文件中。

So now we have provided the user input to this Python function that gives back the selected and similar images. These are then used as described before for the html rendering.

因此，现在我们已经向该Python函数提供了用户输入，该函数会返回选定的和相似的图像。 然后将它们用于html渲染，如前所述。

展望：生产前景 (Outlook: Production perspectives)

It was shown in a previous article how to implement a recommender system with PyTorch. In this article it was described how to use the results on a Flask-based website locally. This is great if you want to work with prototypes. It will also work for smaller projects with few extensions.

在上一篇文章中已显示了如何使用PyTorch 实施推荐系统 。 本文描述了如何在基于Flask的网站上本地使用结果。 如果您想使用原型，那就太好了。 它也适用于扩展很少的小型项目。

For production of an evolving application with some scalability requirements you may work with Flask, but you may need to take care of many more topics that may vary in priority dependent on the scope:

为了生产具有某些可伸缩性要求的不断发展的应用程序，您可以使用Flask，但是您可能需要照顾更多的主题，这些主题的优先级可能会因范围而异：

• Project structure项目结构
• Using a database使用数据库
• Deployment to a production system / a cloud environment → overall a reliable continuous integration chain covering a suitable test strategy部署到生产系统/云环境→总体而言，可靠的持续集成链涵盖了适当的测试策略
• Configuration handling配置处理
• Upload of new data (new images) with automated update of top-k lists通过自动更新前k个列表来上传新数据(新图像)
• Error handling, logging, and monitoring错误处理，日志记录和监视
• Dependent on your project size these may become the largest topics: Scalability, reliability, and maintainability [1]根据您的项目规模，这些可能成为最大的主题：可伸缩性，可靠性和可维护性[1]
• Generating more diversity in the recommendations and general tuning dependent on the particular use-case在建议中产生更多多样性，并根据特定用例进行一般调整
• Security, load balancing, …安全性，负载平衡...

There is some work left for your productive application!

您的生产应用程序还有一些工作要做！

In the next article I will explain how to use an SQL database for this use case, how to structure the project and how to deploy it to Heroku.

在下一篇文章中，我将说明如何针对此用例使用SQL数据库，如何构建项目以及如何将其部署到Heroku。

With the presented steps you nevertheless have everything at hand to start the journey connecting your Python code with the user in front of a browser!

尽管如此，通过所介绍的步骤，您将掌握一切，开始在浏览器之前将Python代码与用户连接的过程！

[1] Martin Kleppmann, Data-Intensive Applications: The Big Ideas Behind Reliable, Scalable, and Maintainable Systems, O’Reilly UK Ltd. 2017

[1] Martin Kleppmann ， 数据密集型应用程序：可靠，可扩展和可维护系统背后的重大构想 ，O'Reilly UK Ltd.，2017年

谢谢阅读！ 喜欢这个话题吗？ (Thanks for reading! Liked the topic?)

If you found the read interesting, you might want to catch up on my two previous articles on the topic:

如果您发现阅读内容很有趣，那么您可能想了解我之前关于该主题的两篇文章：