Sketchy — Sketch making Flask App — Interesting Project

  • app.py
  • home.html

Step 1 — Importing Required Libraries

import cv2
import os
from werkzeug.utils import secure_filename
from flask import Flask,request,render_template
UPLOAD_FOLDER = 'C:/Users/ashar/OneDrive/Desktop/Sketch-Flask-App/static/uploads'
ALLOWED_EXTENSIONS = set(['png', 'jpg', 'jpeg'])
  • Here We are simply importing required libraries like cv2, os, flask, and werkzeug.
  • Also, we are defining some constants like UPLOAD_FOLDER and ALLOWED_EXTENSIONS for using them further.

Step 2 — Defining our Sketch making Flask App

app = Flask(__name__)
app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
app.secret_key = "secret key"
  • Here we are defining a Flask app and we named it app.
  • Then we are adding some configurations to it like the UPLOAD_FOLDER. This means whenever we upload any file using this flask app it will automatically go into this upload folder.
  • SEND_FILE_MAX_AGE_DEFAULT says to remove that file from the cache after its use.

Step 3 — Defining the sketch function

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
  • In this step, we have defined an allowed_file function which basically checks whether the file we have uploaded is having an allowed extension or not. Remember the ALLOWED_EXTENSION set we declared in the first step.
  • Secondly, we have declared a make_sketch function which is the backbone of this app. This function simply takes an Image and returns its sketch.

Step 4 — Finally defining Flask routing functions

@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)
  • Here we have defined two routing functions.
  • The first one is the home page function.
  • Its URL will be http://127.0.0.1:5000/
  • Notice the ‘/’ in the end. This is called the route.
  • The second is the sketch-making route function which will run when we hit the Submit Button after uploading the Image.
  • Its URL will be http://127.0.0.1:5000/sketch
  • Notice the ‘/sketch’ in the end. This is called the route.
  • And finally, the last part is to run the Flask app.

Let’s see the whole code for our Sketch making Flask App…

app.py

import cv2
import os
from werkzeug.utils import secure_filename
from flask import Flask,request,render_template
UPLOAD_FOLDER = 'C:/Users/ashar/OneDrive/Desktop/Sketch-Flask-App/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>

Folders Hierarchy

  • Create a file app.py and copy-paste the code from above to that file.
  • Now create a folder called templates and create a home.html file in it and copy-paste the code from above to that file.
  • Now create a folder called static.
  • Create one more folder called uploads inside static.
  • Both static and uploads are empty folders.
  • _pycache_ is automatically created (You can ignore this).

How to run Sketchy — Sketch making Flask App

  • Open the terminal in the folder where app.py is located.
  • Now simply run the flask run command and it should successfully run on your localhost.

Snapshot of our Sketch-making Flask App

Finally, Let’s see the working of our Sketch-making Flask App…

Do let me know if there’s any query regarding Sketch making Flask App by contacting me via email or LinkedIn.

--

--

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