How to Deploy a Flask app online using Pythonanywhere – 2024

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

Snapshot of our Final app…

Deploy a Flask app online

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.
Deploy a Flask app online

Step 2 – Create a Web App

  • Click on the Web in the Header Menu.
Deploy a Flask app online
  • Click on Add a new web app.
Deploy a Flask app online
  • 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.
Deploy a Flask app online
  • 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.
Deploy a Flask app online
  • 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.
Deploy a Flask app online

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.
Deploy a Flask app online

Step 5 – Let’s check our App online

Deploy a Flask app online

Final Sketch Results…

Deploy a Flask app online

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/[email protected]/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 projectsdeep learning projectscomputer vision projectsNLP projects, and Flask projects at machinelearningprojects.net.

Abhishek Sharma
Abhishek Sharma

Started my Data Science journey in my 2nd year of college and since then continuously into it because of the magical powers of ML and continuously doing projects in almost every domain of AI like ML, DL, CV, NLP.

Articles: 517

Leave a Reply

Your email address will not be published. Required fields are marked *