{"id":2834,"date":"2021-11-22T18:35:15","date_gmt":"2021-11-22T17:35:15","guid":{"rendered":"https:\/\/dev.littlebigcode.fr\/how-to-deploy-your-api-templates-with-flask-web-service\/"},"modified":"2021-11-22T18:39:15","modified_gmt":"2021-11-22T17:39:15","slug":"how-to-deploy-your-api-templates-with-flask-web-service","status":"publish","type":"post","link":"https:\/\/dev.littlebigcode.fr\/en\/how-to-deploy-your-api-templates-with-flask-web-service\/","title":{"rendered":"How to deploy your API templates with Flask Web Service"},"content":{"rendered":"
[et_pb_section fb_built=”1″ admin_label=”section” _builder_version=”3.22″ da_disable_devices=”off|off|off” global_colors_info=”{}” da_is_popup=”off” da_exit_intent=”off” da_has_close=”on” da_alt_close=”off” da_dark_close=”off” da_not_modal=”on” da_is_singular=”off” da_with_loader=”off” da_has_shadow=”on”][et_pb_row admin_label=”row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” custom_padding=”3px||3px||true|false” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_text admin_label=”Text” _builder_version=”4.11.3″ text_font=”Average Sans||||||||” text_text_color=”#242B57″ link_font=”Average Sans||||||||” link_text_color=”#1CACE4″ ul_font=”Average Sans||||||||” ul_text_color=”#242B57″ ol_text_color=”#242B57″ quote_font=”Average Sans||||||||” quote_text_color=”#242B57″ header_text_color=”#1CACE4″ header_2_text_color=”#1CACE4″ header_3_text_color=”#1CACE4″ header_4_font=”Average Sans||||||||” header_4_text_color=”#1CACE4″ header_5_font=”Century Gothic Bold||||||||” header_5_text_color=”#1CACE4″ header_6_font=”Century Gothic Bold||||||||” header_6_text_color=”#1CACE4″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” custom_padding=”8px|||||” inline_fonts=”Century Gothic Bold,Century Gothic,Average Sans” global_colors_info=”{}”]<\/p>\n
Do you want to create a Deep Learning API and integrate it into your website? Follow the step-by-step process to create, deploy and host your API templates with Flask!<\/span><\/strong><\/span><\/strong><\/span><\/p>\n By Axel SALA-MARTIN<\/a>, Data Scientist at LittleBigCode<\/em><\/strong><\/p>\n When working on a Machine Learning (ML) project, it’s important to proceed in stages. First, the data is explored and then the appropriate model and pre-processing is chosen. Then you train and test until you reach the desired performance. And finally, the model is deployed for use on a website or application.<\/p>\n However, you can’t use a laptop and unless the web application is based on Django, it’s unlikely to be written in Python. So how do you deploy this model as an API and then call it from an application?<\/p>\n One option is to move the model to a web service. In this way, the web application written in HTML and JavaScript will be able to access the model via an HTTP request communicating with the Flask Web Service Python.<\/p>\n <\/p>\n In this article we will simply take a pre-trained model of Keras so that we can concentrate on the following sections. We will use the famous Resnet50 trained on ImageNet<\/a> data and which integrates no less than a thousand classes.<\/p>\n <\/p>\n First of all, here are 2 ways to install Flask in a Python environment:<\/span><\/p>\n pip install flask# option 2 : conda<\/p>\n conda install -c anaconda flask<\/div><\/div>\n Next, you need to create a basic application that would display a text like “First application in Flask” at the URL path: “\/ test”. The idea is simply to see if the installation is working properly. Here the structure of the project :<\/span><\/p>\n app.py<\/div><\/div>\n And here is the resulting app.py :<\/span><\/p>\n Then open your terminal and go to the “flask_applications \/” folder to execute this command (Windows equivalent):<\/span><\/p>\n export FLASK_APP=app.py# then launch it<\/p>\n flask run –host=0.0.0.0<\/div><\/div>\n Choose your preferred browser and access the address displayed on your terminal: <\/span><\/p>\n http:\/\/127.0.0.1:5000. Now go to the URL enabling the “test” function and add the extension ” < \/ text > “<\/span><\/p>\n Now you have created your first app! A good thing done but still rather useless for the moment…<\/span><\/p>\n <\/p>\n The objective here is to create a Flask application that will behave like the back-end of your web application. The Flask application must therefore be able to receive an image from an HTTP publishing request. It must also return the results in Json format. For this purpose, we will use two additional libraries : <\/span><\/p>\n Here is the updated app.py:<\/span><\/p>\n The purpose of the application is to take images as input and transmit them through the model. So you have to change the app.py again \ud83d\ude09 <\/strong><\/span><\/p>\n The data obtained from the publication request is represented as an image. Now, in order to define the image prediction, we need to feed this image to the ResNet50.<\/span><\/p>\n Once this is done, Flask stores the results as a dictionary converted to Json format before sending them back. This is what you get with this new app.py version:<\/span><\/p>\n <\/p>\n <\/p>\n Your back-end is finished! Next step: create a front-end web application to communicate with the Flask application.<\/span><\/p>\n First, you need to add an additional file to the :<\/strong><\/span><\/p>\n app.py<\/p>\n static\/<\/p>\n app.html<\/div><\/div>\n The app.html should simply consist of :<\/strong><\/span><\/p>\n As a result, you can now launch the application as described above and access http:\/\/0.0.0.0:5000\/static\/app.html . As a result, you should get a web page similar to this one :<\/strong><\/span><\/p>\n Upload an image file in “.png” and click on “predict”.<\/span><\/p>\n And that’s it ! Sure, the layout isn’t the most aesthetically pleasing, but you’ve just used your model via the web and by calling your Flask application. In short, you have created your first deep learning API. Congratulations to those who have made it this far !<\/span><\/p>\n In summary, we have downloaded an image and sent it via an HTTP Post request to the Flask application. After processing it, we returned the results as a Json to the front end. The web page was then able to display the answer.<\/span><\/p>\n It should be noted, however, that in this example only an image containing no important information was sent. But what would happen if private data, for example from an ID card or driving licence, were sent? No one would want to take any risks ! So what if, instead of sending the data over the network, it was held locally and only the model was sent to run in this front-end application ? This way, everything would work directly in the browser. In this way, the information could be transmitted to the model directly in the browser and would not have to pass through the network.<\/span><\/p>\n How can this be achieved? Using the TensorFlow.js library and running the model in JavaScript. To be discussed in a future article !<\/p>\n \n<\/div>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":" It’s important to proceed in stages. First, the data are explored and then the appropriate model and pre-processing are chosen. Then you train and test until you reach the desired performance. And finally, we deploy the model in order to use it from a website or an application…<\/p>\n","protected":false},"author":7,"featured_media":2842,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":""},"categories":[38,27],"tags":[],"acf":[],"yoast_head":"\n
<\/p>\nHere are the steps we will follow to create a Deep Learning API :<\/span><\/h2>\n
\n
\n
1. Create your model<\/span><\/h2>\n
<\/p>\n2. Install and launch Flask<\/span><\/h2>\n
<\/span><\/p>\n
<\/span><\/p>\n3. Exchange data and host your model with Flask<\/span><\/h2>\n
3.1 How to share data with Flask<\/span><\/h2>\n<\/div>\n
\n
<\/p>\n3.2 Hosting your API model with Flask<\/span><\/h2>\n
<\/h3>\n4. Create a front-end web application to communicate with the API<\/span><\/h2>\n
\n
<\/p>\n
<\/p>\n5. Strengthen data security and confidentiality<\/span><\/h2>\n