Now we shall create the
app.py file, where we define all the routes and functions to perform for each action. This file is the root of our Flask application which we will run in the command line prompt.
flask is an instance of the flask framework for web app development. So we need to initialize a flask app by using
Flask(__name__). By writing
app = Flask(__name__), we name the flask instance as
@app.route is a python decorator that specifies to the application which function should be executed based on the URL. For example, here in our web app, the default URL route
/ calls(invokes) the function
index. Also, as soon as the user submits the input image file, the
/uploader route will be activated(this is defined in the
index.html file, you could have a look at it). This URL route calls(invokes) the function
upload_file, since we have written
@app.route('/uploader', methods = ['POST']) before defining the
request method is used to deal with the requests made by the client through the web app. The
request method from the
flask app is a global request variable, which has the request data like the data entered/submitted in the form, the current request type(like GET, POST, etc), and others.
In our web app, we use
request to get the image file submitted by the user. We access that file using
request.files['file']. This request is of method
To render a template from the function in
app.py, we can use the
render_template() method of
flask. We just need to provide the name of the template and the variables we want to pass to the template as keyword arguments.
render_template("upload.html", predictions=preds, display_image=f.filename)
Here, we are rendering the
upload.html file, and passing the variable
upload.htmlfile to display the image file with filename
predsis passed as
f.filenameis passed as
display_imageso as to make the job easier for the front-end developer(in the real-time software development scenario), who generally doesn't need to know the coding knowledge and Python technicalities.
secure_filename method from
flask is used to secure a filename before storing it directly on the filesystem. We need to do this because we can't always trust the user input and we should be secure about the files we are receiving from the user. More about this is here.
os.path.dirname(__file__) is the file path of
os.path.join(basepath, 'static','uploads', secure_filename(f.filename)) joins the paths of files/directories which are passed arguments to the function
os.path.join. Here, we are saving the file uploaded by the user into the
static/uploads directory which we have created earlier.
app.run(host="0.0.0.0",debug=True,port="4100") method is used to run the flask app as soon as the file is executed, based on the URL given in the browser. The app runs on the given
host at the given
port number, with
debug mode, meaning any errors/warnings/messages will be shown on the command prompt.
app.py should be created inside the
Image-Classification-App directory. So make sure you are in the directory
Image-Classification-App. You could check your present working directory using the command:
This command should output the path:
If the path displayed is not the same as the above, switch to the
cd ~ cd Image-Classification-App
Image-Classification-App, create the file named
Then, do as directed below:
Flask, request, render_template from
from flask import << your code comes here >>
from werkzeug.utils import << your code comes here >>
import << your code comes here >>
Import all functions from the
app_helper file we created previously. We do this using the following:
from app_helper import *
Flask app as follows:
app = Flask(__name__)
Define the function
index to perform, upon reaching to the default link
/. Remember we have already created the HTML file for the home page for our app? It is the
This page will be opened as the default page, by writing as follows:
@app.route("/") def index(): return render_template("index.html")
upload_file function which will be performed after the user submits the input image file.
@app.route('/uploader', methods = ['POST']) def upload_file(): predictions="" if request.method == 'POST': f = request.files['file'] # Save the file to ./uploads basepath = os.path.dirname(__file__) file_path = os.path.join(basepath, 'static','uploads', secure_filename(f.filename)) f.save(file_path) predictions = get_classes(file_path) pred_strings =  for _,pred_class,pred_prob in predictions: pred_strings.append(str(pred_class).strip()+" : "+str(round(pred_prob,5)).strip()) preds = ", ".join(pred_strings) print("preds:::",preds) return render_template("upload.html", predictions=preds, display_image=f.filename)
We are saving the user-uploaded file using
We call the
get_classes function defined in the file
app_helper.py(which we have created earlier and imported above), and pass the input image file given by the user through the web interface.
We will be returned the predictions
predictions are outputted by the model defined in the
predictions is a tuple containing the predicted classes and the probabilities in the decreasing order.
preds, and pass this variable as
upload.htmlfile while rendering that template.
Write the following code to initiate the app running when the file is executed.
if __name__ == "__main__": app.run(host="0.0.0.0",debug=True,port="4100")
CloudxLab has ports open from
4140. So could change the port number in case of any issues while executing the app.
Note - Having trouble with the assessment engine? Follow the steps listed here