In today’s blog, we are going to Deploy a Flask app online using Pythonanywhere. The app we are going to deploy will be a sketch-making Flask app that we created in the previous blog.
This is going to be a very interesting project because learning how to deploy an app online is a very important skill nowadays. So without any further due, let’s do it…
Check the video tutorial here – https://youtu.be/eBd3uRQPLnw
Snapshot of our Final app…
Step 1 – Create an account on Pythonanywhere.
- When you create an account on Pythonanywhere and log in for the first time, your screen will look like this.
- Notice no apps under Web apps.
Step 2 – Create a Web App
- Click on the Web in the Header Menu.
- Click on Add a new web app.
- Click on Next.
- Select Flask on the Next Screen.
- Then Select the Python version you want to work in. I selected Python 3.9 & Flask 2.0.0.
- Here change flask_app.py to app.py (I will be uploading my Flask file with the name app.py, you can change it according to your file name) and click on Next.
Step 3 – Upload the required files.
- Now click on the Files section in Header Menu.
- You will see a mysite folder there.
- This is the folder in which we need to place all our files.
- Upload the app.py file in mysite folder.
- Create an empty folder static. Now create one more empty folder called uploads in the static folder.
- Create empty folder templates.
- Upload home.html in the templates folder.
- Download home.html and app.py.
Step 4 – Let’s run the app
- Now again go on the Web and hit the green Reload button.
- And now your website should be good to run online.
Step 5 – Let’s check our App online
- We can see that our website is running smoothly online.
- See the URL, it’s sharmaji270.pythonanywhere.com.
Final Sketch Results…
Source codes for your reference…
app.py
import cv2
import os
from werkzeug.utils import secure_filename
from flask import Flask,request,render_template
UPLOAD_FOLDER = 'mysite/static/uploads'
ALLOWED_EXTENSIONS = set(['png', 'jpg', 'jpeg'])
app = Flask(__name__)
app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
app.secret_key = "secret key"
def allowed_file(filename):
return '.' in filename and filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS
def make_sketch(img):
grayed = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
inverted = cv2.bitwise_not(grayed)
blurred = cv2.GaussianBlur(inverted, (19, 19), sigmaX=0, sigmaY=0)
final_result = cv2.divide(grayed, 255 - blurred, scale=256)
return final_result
@app.route('/')
def home():
return render_template('home.html')
@app.route('/sketch',methods=['POST'])
def sketch():
file = request.files['file']
if file and allowed_file(file.filename):
filename = secure_filename(file.filename)
file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
img = cv2.imread(UPLOAD_FOLDER+'/'+filename)
sketch_img = make_sketch(img)
sketch_img_name = filename.split('.')[0]+"_sketch.jpg"
_ = cv2.imwrite(UPLOAD_FOLDER+'/'+sketch_img_name, sketch_img)
return render_template('home.html',org_img_name=filename,sketch_img_name=sketch_img_name)
if __name__ == '__main__':
app.run(debug=True)home.html
<!doctype html>
<html lang="en">
<style type='text/css'>
body {
font-family: sans-serif;
margin-top: 40px;
}
.regform {
width: 800px;
background-color: rgb(0, 0, 0, 0.8);
margin: auto;
color: #FFFFFF;
padding: 10px 0px 10px 0px;
text-align: center;
border-radius: 15px 15px 0px 0px;
}
.main-form {
width: 800px;
margin: auto;
background-color: rgb(0, 0, 0, 0.7);
padding-left: 50px;
padding-right: 50px;
padding-bottom: 20px;
color: #FFFFFF;
}
img {
max-height: 400px;
max-width: 500px;
height: auto;
width: auto;
}
</style>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<title>Sketchy</title>
</head>
<body>
<div class='regform mt-3'>
<h1>Sketchy</h1>
</div>
<form action='/sketch' class='main-form' method="POST" enctype="multipart/form-data">
<div class='text-center'>
<input type="file" id="file" name='file' style="margin-top:10px;margin-bottom:10px;">
<button type='submit' class='btn btn-outline-success'> Make Sketch
</button>
</div>
</form>
{% if sketch_img_name %}
<div class="row" style="margin-top:10px;margin-bottom:10px;">
<div class="col text-center">
<h2>Original Image</h2><img src='../static/uploads/{{ org_img_name }}'
style="display: block;margin-left: auto;margin-right: auto;">
</div>
<div class="col text-center">
<h2>Sketch Image</h2><img src='../static/uploads/{{ sketch_img_name }}'
style="display: block;margin-left: auto;margin-right: auto;">
</div>
</div>
{% endif %}
</body>
</html>And this is how you Deploy a Flask app online…
So this is all for this blog folks. Thanks for reading it and I hope you are taking something with you after reading this and till the next time …
Read my previous post: Best way to Explore Data using Interactive EDA Reports in Python
Check out my other machine learning projects, deep learning projects, computer vision projects, NLP projects, and Flask projects at machinelearningprojects.net.
