🏃🏻 5. OpenCV + Webapp
Contents
Ch5 Face Detection WebApp
Video Content
5-1: Local DB setting
Ch5 OpenCV+Webapp (1/4) - setting DB
5-2: Face detection
Ch5 OpenCV+Webapp (2/4) - face detection
5-3: Server DB setting
Ch5 OpenCV+Webapp (3/4) - server DB setting
5-4: Face detection webapp complete
Ch5 OpenCV+Webapp (4/4) - face detection server side complete
1. Local computer
Settings
Go to cvlecture_site/settings.py
MEDIA_ROOT_URL = '.'
URLs
Go to "cvlecture_site/urls.py"
urlpatterns = [
...
url(r'^dface/$', views.dface, name='dface'), # add
...
]
Models
Create new file on "opencv_webapp/models.py"
class ImageUploadModel(models.Model):
description = models.CharField(max_length=255, blank=True)
document = models.ImageField(upload_to='images/%Y/%m/%d')
uploaded_at = models.DateTimeField(auto_now_add=True)
Forms
Go to "opencv_webapp/forms.py"
from .models import ImageUploadModel
class ImageUploadForm(forms.ModelForm):
class Meta:
model = ImageUploadModel
fields = ('description', 'document')
Views
Go to "opencv_webapp/views.py"
from .forms import ImageUploadForm
from django.conf import settings
def dface(request):
if request.method == 'POST':
form = ImageUploadForm(request.POST, request.FILES)
if form.is_valid():
post = form.save(commit=False)
post.save()
imageURL = settings.MEDIA_URL + form.instance.document.name
#opencv_dface(settings.MEDIA_ROOT_URL + imageURL)
return render(request, 'opencv_webapp/dface.html', {'form':form, 'post':post})
else:
form = ImageUploadForm()
return render(request, 'opencv_webapp/dface.html',{'form':form})
Template
Create new file on "opencv_webapp/templates/opencv_webapp/dface.html"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- image upload start-->
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Upload</button>
</form>
{% if post %}
<img src="{{ post.document.url }}">
<p>File uploaded at: <a href="{{ post.document.url }}">{{ post.document }}</a></p>
{% endif %}
<p><a href="{% url 'dface' %}">Return to home</a></p>
<!-- image upload end -->
</body>
</html>
DB migrate
python manage.py makemigrations
python manage.py migrate
Add face detection code
Go to "opencv_webapp/views.py"
from .opencv_dface import opencv_dface
def dface(request):
...
opencv_dface(settings.MEDIA_ROOT_URL + imageURL)
...
Create "opencv_webapp/opencv_dface.py"
from django.conf import settings
import numpy as np
import cv2
def opencv_dface(path):
img = cv2.imread(path, 1)
if (type(img) is np.ndarray):
print(img.shape)
baseUrl = settings.MEDIA_ROOT_URL + settings.MEDIA_URL
face_cascade = cv2.CascadeClassifier(baseUrl+'haarcascade_frontalface_default.xml')
eye_cascade = cv2.CascadeClassifier(baseUrl+'haarcascade_eye.xml')
gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
faces = face_cascade.detectMultiScale(gray, 1.3, 5)
for (x, y, w, h) in faces:
cv2.rectangle(img, (x, y), (x+w, y+h), (255, 0, 0), 2)
roi_gray = gray[y:y+h, x:x+w]
roi_color = img[y:y+h, x:x+w]
eyes = eye_cascade.detectMultiScale(roi_gray)
for (ex, ey, ew, eh) in eyes:
cv2.rectangle(roi_color, (ex, ey), (ex+ew, ey+eh), (0, 255, 0), 2)
cv2.imwrite(path, img)
else:
print('something error')
print(path)
Copy "haarcascade_frontalface_default.xml", "haarcascade_eye.xml" into "media/"
Local result
2. Server computer (pythonanywhere)
Local computer
$ git add .
$ git commit -m 'detection face'
$ git push
Server (pythonanywhere)
$ git pull
$ nano .gitignore
settings.py # add
/media/images
# control + o : write, control +x :exit
# if .gitignore not working
$ git rm -r --cached .
$ git add .
$ git commit -m "fixed untracked files"
Go to cvlecture_site/settings.py
import pymysql
pymysql.install_as_MySQLdb()
...
MEDIA_ROOT_URL = '/home/cvlecture/cvlecture_opencv_webapp'
...
DB setting
Go to databases page & set password
Add databases
Go to cvlecture_site/settings.py
import pymysql
pymysql.install_as_MySQLdb()
...
DATABASES = {
# 'default': {
# 'ENGINE': 'django.db.backends.sqlite3',
# 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
# }
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'cvlecture$cvlecture',
'USER': 'cvlecture',
'PASSWORD': 'mysql1234',
'HOST': 'cvlecture.mysql.pythonanywhere-services.com',
'PORT': ''
}
}
...
Install pymysql
(envpy3)$ pip install pymysql
DB migration
$ python manage.py migrate
Go to cvlecture_site/settings.py
DEBUG = False #True
Go to web page on pythonanywhere and add below setting
3. Result
Reload site & check
🙇🏻 Thank you!
🎁 Source code, Material(pdf) and example images 👇
https://www.marearts.com/products/opencv-django-webapp-lecture-materials