flask渲染圖像

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)部分，其中數據幀已離線計算以用于網站。

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, 相似度矩陣計算(a )和推薦的排在前k位的列表(b)。 本文將Flask用于網站的搜索結果(來源：MD Korzec， Flask logo by Armin Ronacher, Copyrighted Armin Ronacher的Flask徽標 ，版權所有，可free use)免費使用 )

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)

Armin Ronacher, Copyrighted Armin Ronacher的徽標， free use免費使用版權

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=1
set FLASK_APP=recommenderFlask.py
flask 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 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.
  我們導入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.

總體而言，您可以創建自己喜歡的方法和樣式來顯示和迭代圖像。

Image gallery (source: M. D. Korzec)圖像庫(來源：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.

對于測試和以上網站，我使用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 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.

在網站上，這些內容可以看作是靜態內容，可以被加載并用于提供最相似的圖像，但是對于圖庫來說，數據庫應在生產中發揮作用。

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

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

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從中創建簡單列表，并從這些列表中刪除相同的圖像。 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:

如果您發現閱讀內容很有趣，那么您可能想了解我之前關于該主題的兩篇文章：

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

flask渲染圖像

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。