How to Deploy a Flask app online using Pythonanywhere

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 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

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>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store