{"id":61,"date":"2022-09-02T15:15:09","date_gmt":"2022-09-02T14:15:09","guid":{"rendered":"https:\/\/sonic.fabio.org.uk\/?p=61"},"modified":"2022-09-02T15:27:23","modified_gmt":"2022-09-02T14:27:23","slug":"ml-app-with-flask","status":"publish","type":"post","link":"https:\/\/sonic.fabio.org.uk\/?p=61","title":{"rendered":"ML App with Flask"},"content":{"rendered":"\n

You built an ML with TensorFlow or Sci-kit learn and now want it deployed on a website. This article is a quick guide on loading an ML model in Python and using it to make predictions on a web app with Flask. This is based on my image classifier app found on my GitHub Fabio-RibeiroB\/image_classifier_app: App to classify happy or sad images (github.com)<\/a>. In this app, the user uploads a file and presses predict. Specifically, the user uploads images for binary classification. It all depends on your model. You can change this code to upload CSV data instead, for example.<\/p>\n\n\n\n

I appreciate this article is high-level and lacking detail. It is more than an outline to make it as short-form as possible. To see more, check out my aforementioned repo on GitHub. Anyway, let’s begin.<\/p>\n\n\n\n

Save and Load<\/h2>\n\n\n\n

Let’s say you have a Sequential model that you compiled.<\/p>\n\n\n\n

model = Sequential()\n....some model\n....\nmodel.compile(....)<\/code><\/pre>\n\n\n\n
Now save the model, for example, as a .h5 file. I saved mine in a “models” folder. You can also use pickle<\/code> to dump and load models as .pkl files.<\/p>\n\n\n\n
from tensorflow.keras.models import load_model\nimport os\nmodel.save(os.path.join('models','model.h5'))<\/code><\/pre>\n\n\n\n
Now load it in your Flask app.<\/p>\n\n\n\n
from flask import Flask, render_template, request, redirect, flash, session # useful flask modules\nfrom werkzeug.utils import secure_filename # security\nimport logging\n\nlogging.basicConfig(level=logging.DEBUG)\nlogging.info('program starting')\n\nfrom tensorflow.keras.models import load_model\nmodel = load_model('models\/model.h5') # loaded model\n<\/code><\/pre>\n\n\n\n
Static Uploads Folder<\/h2>\n\n\n\n
We also need a folder where we can upload data for the model. Make a directory called static, and within that, a directory called uploads.<\/p>\n\n\n\n
UPLOAD_FOLDER = '.\/static\/uploads'\nALLOWED_EXTENSIONS = {'png', 'jgp', 'jpeg'} # change depending on model\napp = Flask(__name__)\napp.secret_key = b'somesecretkey'\napp.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER\n\ndef allowed_file(filename):\n    """\n    Check the uploaded data is correct format\n    """"\n    return '.' in filename and \\\n          filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS\n<\/code><\/pre>\n\n\n\n
Routes and Prediction<\/h2>\n\n\n\n
Now I create the necessary routes in your app that makes a prediction. We will later make a home.html will allow us to start a prediction. The predict.html page shows the results.<\/p>\n\n\n\n
@app.route('\/')\ndef home():\n    return render_template('home.html')\n\n@app.route('\/predict', methods=['POST'])\ndef predict():\n    file = request.files('file')\n    # check uploaded file is okay in upload folder\n    if file and allowed_file(file.filename):\n        filename = secure_filename(file.filename)\n        data_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)\n   \n        file. save(data_path) # save data\n        # read data in for example with pandas\n        prediction = model.predict(data) # in my example prediction is one number, a probability.\n\n        # remember to delete file after use\n\n        os.remove(data_path)\n        return render_template('predict.html', data=prediction)\n   \nif __name__ == "__main__":\n    app.run(debug=True)<\/code><\/pre>\n\n\n\n
The above code saves the valid data in the uploads folder and loads the data. For example, you could load your data into a pandas data frame. The \/predict route passes the prediction variable containing a single prediction. The prediction variable is passed to predict.html to render the result on the web page. If your model outputs a lot of predictions, like a CSV of predictions, these lines will need to be modified. You probably want the user to download the predictions as a CSV instead of displaying the results on the screen. In this case, you need a download button in your HTML. <\/p>\n\n\n\n
However, continuing my example, we have a home page called home.html with a form for the user to upload data. I simply removed the rest of my HTML tags to declutter the code snippet below. See my repo for the entire HTML file.<\/p>\n\n\n\n
In home.html<\/p>\n\n\n\n
<form method="POST" action="{{url_for('home')}}"   enctype=multipart\/form-data>\n    <input type=file name=file>\n    <input type=submit value=predict>\n<\/form><\/code><\/pre>\n\n\n\n
And now for prediction.html. This page will simply output the results with a back button.<\/p>\n\n\n\n
{{data}}\n<form>\n<input type="button" value="Try again" on    click="history.back()">\n<\/form><\/code><\/pre>\n\n\n\n
Flask run, and the app should be running in local host.<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
You built an ML with TensorFlow or Sci-kit learn and now want it deployed on a website. This article is a quick guide on loading an ML model in Python and using it to make predictions on a web app with Flask. This is based on my image classifier app found on my GitHub Fabio-RibeiroB\/image_classifier_app: […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/sonic.fabio.org.uk\/index.php?rest_route=\/wp\/v2\/posts\/61"}],"collection":[{"href":"https:\/\/sonic.fabio.org.uk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sonic.fabio.org.uk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sonic.fabio.org.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sonic.fabio.org.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=61"}],"version-history":[{"count":5,"href":"https:\/\/sonic.fabio.org.uk\/index.php?rest_route=\/wp\/v2\/posts\/61\/revisions"}],"predecessor-version":[{"id":71,"href":"https:\/\/sonic.fabio.org.uk\/index.php?rest_route=\/wp\/v2\/posts\/61\/revisions\/71"}],"wp:attachment":[{"href":"https:\/\/sonic.fabio.org.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=61"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sonic.fabio.org.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=61"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sonic.fabio.org.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=61"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}