flask渲染圖像

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

創(chuàng)建基于Python的機(jī)器學(xué)習(xí)應(yīng)用程序后，您可能希望使其在網(wǎng)站上運(yùn)行。

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

在本文中，說(shuō)明了如何使用基于圖像的推薦系統(tǒng)的微框架Flask來(lái)實(shí)現(xiàn)這一點(diǎn)。

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.

我們?cè)诰W(wǎng)站上建立了圖片庫(kù)，可以選擇圖片，并顯示類似的圖片。 例如，可以在在線商店中采用這種解決方案。

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.

如上一篇文章所述，通過(guò)比較使用預(yù)訓(xùn)練的Resnet18網(wǎng)絡(luò)導(dǎo)出的特征向量來(lái)獲得相似性。 這項(xiàng)工作的結(jié)果是熊貓數(shù)據(jù)幀(基本上是表格)，具有最相似圖像的名稱，并且每個(gè)圖像的相似度值在零(不相似)和一個(gè)(最相似)之間。 這些在這里存儲(chǔ)和使用。

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)中概述了理論和實(shí)現(xiàn)的步驟。 本文重點(diǎn)介紹(b)部分，其中數(shù)據(jù)幀已離線計(jì)算以用于網(wǎng)站。

Similarity matrix calculation (a) and sorted top-k list for recommendations (b). In this article Flask is used to use the results for a website (source: M. D. Korzec, 相似度矩陣計(jì)算(a )和推薦的排在前k位的列表(b)。 本文將Flask用于網(wǎng)站的搜索結(jié)果(來(lái)源：MD Korzec， Flask logo by Armin Ronacher, Copyrighted Armin Ronacher的Flask徽標(biāo) ，版權(quán)所有，可free use)免費(fèi)使用 )

We will see how to

我們將看到如何

• install Flask and run the app locally on a debug server
  安裝Flask并在調(diào)試服務(wù)器上本地運(yùn)行應(yīng)用程序
• 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
  實(shí)現(xiàn)建議類似圖像的html / JavaScript庫(kù)

• 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.

  根據(jù)我的前兩篇文章( 理論 ，使用Jupyter notebook 實(shí)現(xiàn) )創(chuàng)建pickle文件。 將它們用于定義推薦圖像的前k個(gè)列表。

1.燒瓶 (1. Flask)

Armin Ronacher, Copyrighted Armin Ronacher的徽標(biāo)， free use免費(fèi)使用版權(quán)

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編寫的非常流行的微框架。 它之所以被稱為“微型”，是因?yàn)樗鼪]有完整的功能集，數(shù)據(jù)庫(kù)的抽象層，用戶管理或類似功能，但可以通過(guò)擴(kuò)展的擴(kuò)展庫(kù)來(lái)滿足所有需求。

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之類的功能豐富的框架相比，這聽起來(lái)像是一個(gè)缺點(diǎn)，但是，它還降低了復(fù)雜性，為用戶提供了更多選擇，并允許您更好地了解應(yīng)用程序。

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.

您可以輕松地執(zhí)行以下操作：在后端使用python代碼，將結(jié)果傳遞給可以使用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語(yǔ)法的模板的使用，這些模板簡(jiǎn)化了網(wǎng)頁(yè)的可重用性和動(dòng)態(tài)創(chuàng)建。

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的一些教程，他們創(chuàng)建了一個(gè)簡(jiǎn)潔的Flask系列，可以幫助您快速入門。

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

第一步(在Windows上)如何運(yùn)行Flask？ 創(chuàng)建合適的虛擬環(huán)境后，例如使用pip進(jìn)行安裝

pip install Flask

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

并將其導(dǎo)入以使所有代碼可用于構(gòu)建Flask Web應(yīng)用程序

from flask import Flask

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

要運(yùn)行本地調(diào)試Web服務(wù)器，可以使用包含主Python文件的批處理文件

set FLASK_DEBUG=1
set FLASK_APP=recommenderFlask.py
flask run

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

FLASK_APP只是設(shè)置應(yīng)用程序文件。 然后您通過(guò)訪問(wèn)

http://localhost:5000/

http：//本地主機(jī)：5000 /

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

設(shè)置FLASK_DEBUG將導(dǎo)致調(diào)試信息直接在瀏覽器中顯示。

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

要打印“你好，世界！” python文件應(yīng)讀取

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.

對(duì)于本文，我使用了Flask版本1.1.1和Python版本3.5.4。

2.路線 (2. Routes)

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

讓我們?yōu)閼?yīng)用程序設(shè)置主文件，recommendedFlask.py

from flask import Flask
app = 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.
  我們導(dǎo)入Flask類，以便能夠創(chuàng)建Flask Web應(yīng)用程序。

• 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實(shí)例應(yīng)用已創(chuàng)建，如果直接調(diào)用腳本，則會(huì)在最后一行運(yùn)行，因?yàn)镻ython會(huì)設(shè)置__name__ =='__main__'。 這是不是這樣，如果recommendFlask.py是從其他腳本導(dǎo)入。 將debug設(shè)置為true的好處是，您可以在網(wǎng)站本身的開發(fā)過(guò)程中看到錯(cuò)誤。

• 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/

  在兩者之間有尚未執(zhí)行的家庭路線和推薦路線。 它們將觸發(fā)下一部分中編寫和說(shuō)明的相應(yīng)功能。 我們將通過(guò)localhost：5000 / home /或localhost：5000 /進(jìn)入包含圖像庫(kù)的主頁(yè)，而建議將顯示在localhost：5000 / recommend /

Let us create a gallery with images.

讓我們創(chuàng)建一個(gè)包含圖像的畫廊。

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.

我們會(huì)將位于文件夾中的感興趣的圖像名稱放到recommerderFlask.py文件頂部的虛擬數(shù)組中。

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.

我們使用此數(shù)據(jù)創(chuàng)建圖庫(kù)。 對(duì)于生產(chǎn)系統(tǒng)，這部分需要移動(dòng)到數(shù)據(jù)庫(kù)中-這將是后續(xù)文章的一部分。

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

本地路由是通過(guò)一個(gè)函數(shù)來(lái)調(diào)用的，該函數(shù)根據(jù)與圖像有關(guān)的變量?jī)?nèi)容來(lái)呈現(xiàn)html頁(yè)面。

Therefore, add the library for html rendering

因此，添加用于html渲染的庫(kù)

from flask import render_template

and call the gallery creation with the image array

并使用圖片數(shù)組調(diào)用圖庫(kù)創(chuàng)建

@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允許使用傳遞的變量，例如用于循環(huán)和大括號(hào)中的變量，如下所示

{% 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和腳本來(lái)使圖庫(kù)正常工作。 為了在畫廊中進(jìn)行分頁(yè)，我添加了一個(gè)位于靜態(tài)文件夾中的腳本(Flask將其配置為默認(rèn)腳本)。

<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.

總體而言，您可以創(chuàng)建自己喜歡的方法和樣式來(lái)顯示和迭代圖像。

Image gallery (source: M. D. Korzec)圖像庫(kù)(來(lái)源：MD Korzec)

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.

對(duì)于測(cè)試和以上網(wǎng)站，我使用GitHub存儲(chǔ)庫(kù)中提供的圖像進(jìn)行top-k列表計(jì)算 。 由于21張圖片中的類別不同，因此有助于測(cè)試所提供的建議。

When clicking on one of the images the reference

單擊其中一張圖像時(shí)，參考

<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.

推薦路線發(fā)揮作用。 我們要生成一個(gè)新的html頁(yè)面，顯示與所選內(nèi)容最相似的圖像。

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)

我們剛剛看到觸發(fā)圖像將變量selectedImage設(shè)置為images數(shù)組中圖像的名稱，并調(diào)用了推薦路線。 單擊圖像時(shí)，您可以在URL中看到它(例如，集合中的camper2.jpg)

Let’s use this variable in our application file.

讓我們?cè)趹?yīng)用程序文件中使用此變量。

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:

請(qǐng)求變量后，這里會(huì)發(fā)生什么：

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

  getImages函數(shù)將相似圖像的數(shù)組返回到輸入

• 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.

  根據(jù)輸入的模板和與輸入相關(guān)的相似圖像，從模板薦行 HTML.html中生成一個(gè)html站點(diǎn)。 自定義樣式用于html頁(yè)面。

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

在模板中，基于相應(yīng)的變量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元素就是這樣。 所做的所有其他事情都使網(wǎng)站變得美觀并且畫廊得以正常運(yùn)行。

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

最后要討論的是上面的getImages函數(shù)。

5.使用前k個(gè)列表 (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).

當(dāng)比較從卷積神經(jīng)網(wǎng)絡(luò)評(píng)估得出的不同圖像的特征向量時(shí)，將創(chuàng)建前k個(gè)列表(對(duì)于每個(gè)圖像，將記錄圖像集中k個(gè)最相似的圖像)。

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

參照所呈現(xiàn)的實(shí)施上一篇文章 (Jupyter筆記本可以上找到的GitHub包括例如圖像)，我們從該筆記本similarNames和similarValues存儲(chǔ)已經(jīng)衍生熊貓dataframes，含有該類似的名稱和相應(yīng)的相似性值，如味酸文件

import pickle
similarNames.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.

在網(wǎng)站上，這些內(nèi)容可以看作是靜態(tài)內(nèi)容，可以被加載并用于提供最相似的圖像，但是對(duì)于圖庫(kù)來(lái)說(shuō)，數(shù)據(jù)庫(kù)應(yīng)在生產(chǎn)中發(fā)揮作用。

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

以下代碼段用于返回規(guī)定數(shù)量( recLength )的大多數(shù)相似圖像和相似度值。

import pickle
import os
import sys
from numpy.testing import assert_almost_equalglobal recLength
recLength = 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從中創(chuàng)建簡(jiǎn)單列表，并從這些列表中刪除相同的圖像。 recLength是您要使用的相似圖像的數(shù)量，應(yīng)將其移動(dòng)到配置文件中。

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.

因此，現(xiàn)在我們已經(jīng)向該P(yáng)ython函數(shù)提供了用戶輸入，該函數(shù)會(huì)返回選定的和相似的圖像。 然后將它們用于html渲染，如前所述。

展望：生產(chǎn)前景 (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 實(shí)施推薦系統(tǒng) 。 本文描述了如何在基于Flask的網(wǎng)站上本地使用結(jié)果。 如果您想使用原型，那就太好了。 它也適用于擴(kuò)展很少的小型項(xiàng)目。

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:

為了生產(chǎn)具有某些可伸縮性要求的不斷發(fā)展的應(yīng)用程序，您可以使用Flask，但是您可能需要照顧更多的主題，這些主題的優(yōu)先級(jí)可能會(huì)因范圍而異：

• Project structure
  項(xiàng)目結(jié)構(gòu)
• Using a database
  使用數(shù)據(jù)庫(kù)
• Deployment to a production system / a cloud environment → overall a reliable continuous integration chain covering a suitable test strategy
  部署到生產(chǎn)系統(tǒng)/云環(huán)境→總體而言，可靠的持續(xù)集成鏈涵蓋了適當(dāng)?shù)臏y(cè)試策略
• Configuration handling
  配置處理
• Upload of new data (new images) with automated update of top-k lists
  通過(guò)自動(dòng)更新前k個(gè)列表來(lái)上傳新數(shù)據(jù)(新圖像)
• Error handling, logging, and monitoring
  錯(cuò)誤處理，日志記錄和監(jiān)視
• Dependent on your project size these may become the largest topics: Scalability, reliability, and maintainability [1]
  根據(jù)您的項(xiàng)目規(guī)模，這些可能成為最大的主題：可伸縮性，可靠性和可維護(hù)性[1]
• Generating more diversity in the recommendations and general tuning dependent on the particular use-case
  在建議中產(chǎn)生更多多樣性，并根據(jù)特定用例進(jìn)行一般調(diào)整
• Security, load balancing, …
  安全性，負(fù)載平衡...

There is some work left for your productive application!

您的生產(chǎn)應(yīng)用程序還有一些工作要做！

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.

在下一篇文章中，我將說(shuō)明如何針對(duì)此用例使用SQL數(shù)據(jù)庫(kù)，如何構(gòu)建項(xiàng)目以及如何將其部署到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!

盡管如此，通過(guò)所介紹的步驟，您將掌握一切，開始在瀏覽器之前將Python代碼與用戶連接的過(guò)程！

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

[1] Martin Kleppmann ， 數(shù)據(jù)密集型應(yīng)用程序：可靠，可擴(kuò)展和可維護(hù)系統(tǒng)背后的重大構(gòu)想 ，O'Reilly UK Ltd.，2017年

謝謝閱讀！ 喜歡這個(gè)話題嗎？ (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:

如果您發(fā)現(xiàn)閱讀內(nèi)容很有趣，那么您可能想了解我之前關(guān)于該主題的兩篇文章：

翻譯自: https://towardsdatascience.com/a-flask-app-for-image-recommendations-a865e1496a0d

flask渲染圖像

總結(jié)

以上是生活随笔為你收集整理的flask渲染图像_用于图像推荐的Flask应用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。