Committing the integrated project structure

AttendanceApp/admin.py

+from django.contrib import admin
+
+# Register your models here.

AttendanceApp/apps.py

+from django.apps import AppConfig
+
+
+class AttendanceappConfig(AppConfig):
+    name = 'AttendanceApp'

AttendanceApp/models.py

+from django.db import models
+
+# Create your models here.

AttendanceApp/tests.py

+from django.test import TestCase
+
+# Create your tests here.

AttendanceApp/urls.py

+from django.urls import path, re_path, include
+from django.conf.urls import url
+from . import views
+
+urlpatterns = [
+    path('', views.first)
+]

AttendanceApp/views.py

+from django.shortcuts import render
+from django.http import HttpResponse
+
+
+# Create your views here.
+def first(request):
+    return HttpResponse('<h1>Hello Attendance App</h1>')

FirstApp/ImageOperations.py

+import cv2
+import os
+import re
+import base64
+import shutil
+
+
+def saveImage(response):
+
+
+    dataUrlPattern = re.compile('data:image/(png|jpeg);base64,(.*)$')
+    base_path = os.path.join(os.path.abspath(__file__))
+    root_dir = os.path.dirname(os.path.dirname(base_path))
+    new_dir_name = "static\\FirstApp\\images\\{}".format(response["imageName"])
+    new_dir = os.path.join(root_dir, new_dir_name)
+
+    if (os.path.isdir(new_dir)):
+        # delete the previous directory
+        shutil.rmtree(new_dir)
+
+    # create the new directory
+    os.mkdir(new_dir)
+
+
+    count = 0
+
+    for url in response["ImageURLS"]:
+        url = dataUrlPattern.match(url).group(2)
+        encoded = url.encode()
+        image = base64.b64decode(encoded)
+        imageName = response["imageName"] + '_img_' + format(count) + '.png'
+
+        new_file = os.path.join(new_dir, imageName)
+
+        count += 1
+
+        # saving the images (method 1)
+        with open(new_file, "wb") as f:
+            f.write(image)
+
+    # respond 'yes' to the command line prompt
+    p = os.popen('python manage.py collectstatic', "w")
+    p.write("yes")
+
+
+
+

FirstApp/MongoModels.py

+from djongo import models
+from datetime import datetime
+
+# Lecture model
+class Lecture(models.Model):
+    lecture_id = models.CharField(max_length=10)
+    date = models.DateTimeField(auto_created=True, default=None)
+
+
+
+# Faculty model
+class Faculty(models.Model):
+    faculty_id = models.CharField(max_length=10)
+    name = models.CharField(max_length=100)
+
+    def __str__(self):
+        return self.faculty_id
+
+# Subjects model
+class Subject(models.Model):
+    subject_code = models.TextField()
+    name = models.TextField()
+    year = models.IntegerField()
+    faculty = models.ForeignKey(Faculty, on_delete=models.CASCADE, default={})
+
+    def __str__(self):
+        return self.subject_code
+
+
+# Lecturer model
+class Lecturer(models.Model):
+    lecturer_id = models.CharField(max_length=7)
+    fname = models.TextField()
+    lname = models.TextField()
+    email = models.EmailField()
+    telephone = models.CharField(max_length=10)
+    faculty = models.ForeignKey(Faculty, on_delete=models.CASCADE)
+
+    def __str__(self):
+        return self.lecturer_id
+
+
+# Lecturer_subject model
+class LecturerSubject(models.Model):
+    lec_subject_id = models.CharField(max_length=10)
+    lecturer_id = models.ForeignKey(Lecturer, on_delete=models.CASCADE)
+    subjects = models.ManyToManyField(to=Subject)
+
+    def __str__(self):
+        return self.lec_subject_id
+
+
+# lecturer credential details
+class LecturerCredentials(models.Model):
+    username = models.ForeignKey(Lecturer, on_delete=models.CASCADE)
+    password = models.CharField(max_length=15)
+
+
+# timetable based on daily basis
+class DailyTimeTable(models.Model):
+    slot_id = models.AutoField(auto_created=True, primary_key=True)
+    start_time = models.TimeField()
+    end_time = models.TimeField()
+    subject = models.ForeignKey(Subject, on_delete=models.CASCADE)
+    lecturer = models.ForeignKey(Lecturer, on_delete=models.CASCADE)
+    location = models.CharField(max_length=10)
+
+    def __str__(self):
+        return self.location
+
+    class Meta:
+        abstract = True
+
+
+# Timetable based on day basis
+class DateTimeTable(models.Model):
+    date = models.DateField()
+    time_slots = models.ArrayField(
+        model_container=DailyTimeTable
+    )
+
+    def __bool__(self):
+        return True if self.date is not None else False
+
+    class Meta:
+        abstract = True
+
+
+# faculty timetable
+class FacultyTimetable(models.Model):
+    timetable_id = models.CharField(max_length=10)
+    faculty = models.ForeignKey(Faculty, on_delete=models.CASCADE)
+    timetable = models.ArrayField(DateTimeTable)
+
+    def __str__(self):
+        return self.timetable_id
+
+
+# lecture video table
+class LectureVideo(models.Model):
+    lecture_video_id = models.CharField(max_length=10)
+    date = models.DateField()
+    video_name = models.CharField(max_length=50)
+    video_length = models.DurationField()
+    lecturer = models.ForeignKey(Lecturer, on_delete=models.CASCADE, default=0)
+    subject = models.ForeignKey(Subject, on_delete=models.CASCADE, default=0)
+
+    models.UniqueConstraint(fields=[date], name='date_unique')
+
+    def __str__(self):
+        return self.lecture_video_id
+
+
+# lecture activity table
+class LectureActivity(models.Model):
+    lecture_activity_id = models.CharField(max_length=10)
+    lecture_video_id = models.ForeignKey(LectureVideo, on_delete=models.CASCADE)
+    talking_perct = models.DecimalField(default=0.0, max_digits=3, decimal_places=1)
+    listening_perct = models.DecimalField(default=0.0, max_digits=3, decimal_places=1)
+    writing_perct = models.DecimalField(default=0.0, max_digits=3, decimal_places=1)
+    phone_perct = models.DecimalField(default=0.0, max_digits=3, decimal_places=1)
+
+    def __str__(self):
+        return self.lecture_activity_id
+
+
+# EMOTIONS section
+# Lecture emotion report
+class LectureEmotionReport(models.Model):
+    lecture_emotion_id = models.CharField(max_length=10)
+    lecture_video_id = models.ForeignKey(LectureVideo, on_delete=models.CASCADE)
+    happy_perct = models.DecimalField(default=0.0, max_digits=3, decimal_places=1)
+    sad_perct = models.DecimalField(default=0.0, max_digits=3, decimal_places=1)
+    angry_perct = models.DecimalField(default=0.0, max_digits=3, decimal_places=1)
+    disgust_perct = models.DecimalField(default=0.0, max_digits=3, decimal_places=1)
+    surprise_perct = models.DecimalField(default=0.0, max_digits=3, decimal_places=1)
+    neutral_perct = models.DecimalField(default=0.0, max_digits=3, decimal_places=1)
+
+
+    def __str__(self):
+        return self.lecture_emotion_id
+
+
+# POSE section
+# lecture pose estimation
+class LecturePoseEstimation(models.Model):
+    lecture_pose_id = models.CharField(max_length=10)
+    lecture_video_id = models.ForeignKey(LectureVideo, on_delete=models.CASCADE)
\ No newline at end of file

FirstApp/admin.py

+from django.contrib import admin
+from .MongoModels import *
+from . models import Teachers, RegisterUser
+
+# registering the lecture emotions model
+admin.site.register(LectureEmotionReport)
+admin.site.register(Lecturer)
+admin.site.register(Faculty)
+admin.site.register(Subject)
+admin.site.register(LecturerSubject)
+admin.site.register(LecturerCredentials)
+admin.site.register(FacultyTimetable)
+admin.site.register(LectureVideo)
+admin.site.register(LectureActivity)
\ No newline at end of file

FirstApp/apps.py

+from django.apps import AppConfig
+
+
+class FirstappConfig(AppConfig):
+    name = 'FirstApp'

FirstApp/forms.py

+from django import forms
+from django.contrib.auth import authenticate
+from django.contrib.auth.models import User
+from . MongoModels import *
+
+# testing the login form
+class LoginForm(forms.Form):
+    # username = forms.CharField(max_length=100)
+    email = forms.EmailField()
+    password = forms.CharField(widget=forms.PasswordInput())
+
+    def clean(self):
+        # cleaned_username = self.cleaned_data.get('username')
+        cleaned_email = self.cleaned_data.get('email')
+        cleaned_password = self.cleaned_data.get('password')
+
+        lecturer = Lecturer.objects.get(email=cleaned_email)
+
+        # if a lecturer is already in the system
+        if (lecturer):
+            # retrieve the User object
+            user = User.objects.get(email=cleaned_email)
+            is_user = user.check_password(cleaned_password)
+
+            # if the password is correct
+            if (is_user):
+                # lec_credentials = LecturerCredentials.objects.filter(username_id=lecturer.id)
+                lec_credentials = LecturerCredentials.objects.get(username_id=lecturer.id)
+
+                print('credentials: ', lec_credentials)
+
+                # if lecture credentials are already created
+                if (lec_credentials):
+                    lec_credentials.password = user.password
+                    lec_credentials.save(force_update=True)
+
+                else:
+                    LecturerCredentials(
+                        username_id=lecturer.id,
+                        password=user.password
+                    ).save()
+
+            else:
+                raise forms.ValidationError("Username or password is incorrect")
+
+        else:
+            raise forms.ValidationError("The lecturer does not exist")
+
+        return super(LoginForm, self).clean()
+
+
+# model form for Lecturer credentials
+class LecturerCredentialsForm(forms.ModelForm):
+
+    class Meta:
+        model = LecturerCredentials
+        fields = '__all__'
+        widgets = {
+            'password': forms.PasswordInput()
+        }
\ No newline at end of file

FirstApp/logic/classes/pose.py

+
+class PoseResponse:
+    # directory = ''
+    # image_name = ''
+    # label = ''
+
+    def __init__(self, directory, image_name, label):
+        self.directory = directory
+        self.image_name = image_name
+        self.labels = label
+

FirstApp/logic/custom_sorter.py

+import re
+
+def custom_sort(array):
+
+    number_arr = []
+
+    for words in array:
+        result = [int(s) for s in re.findall(r'\b\d+\b', words)]
+        new_number = result[0] if len(result) == 1 else 0
+        number_arr.append(int(new_number))
+
+    sorted_num_arr = sorted(number_arr)
+
+    set_number = set(sorted_num_arr)
+
+    list_set_number = list(set_number)
+
+    new_arr = [0 for i in range(len(list_set_number))]
+
+    for word in array:
+
+        result = [int(s) for s in re.findall(r'\b\d+\b', word)]
+        new_number = result[0] if len(result) == 1 else 0
+        number = int(new_number)
+
+        if number in list_set_number:
+            index = list_set_number.index(number)
+            new_arr[index] = word
+
+    return new_arr
+
+
+def custom_object_sorter(obj_array):
+    # this list will keep the extracted keys
+    key_arr = []
+    # this list will returned the ordered object array
+    new_obj_array = [0 for i in range(len(obj_array))]
+
+    # this loop will extract the keys and append to the defined list
+    for obj in obj_array:
+        key_list = list(obj.keys())
+        main_key = key_list[0]
+        key_arr.append(obj[main_key])
+
+    # this method will arrange the keys in the order
+    sorted_keys = custom_sort(key_arr)
+
+    # iterate through the object array once again, to arrange them in the correct order
+    for obj in obj_array:
+        key_list = list(obj.keys())
+        main_key = key_list[0]
+
+        # compare the main key element and the ordered key list
+        if obj[main_key] in sorted_keys:
+            index = sorted_keys.index(obj[main_key])
+            # assign to the new list according to the given index
+            new_obj_array[index] = obj
+
+    return new_obj_array
\ No newline at end of file

FirstApp/logic/facial_landmarks.py

+from imutils import face_utils
+import os
+import cv2
+import dlib
+import numpy as np
+import imutils
+
+
+def get2DPoints(image):
+
+    BASE_DIR = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+    CLASSIFIER_DIR = os.path.join(BASE_DIR, "FirstApp\\classifiers")
+
+    detector_path = os.path.join(CLASSIFIER_DIR, "shape_predictor_68_face_landmarks.dat")
+    detector = dlib.get_frontal_face_detector()
+    predictor = dlib.shape_predictor(detector_path)
+
+    gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
+
+    # detect faces in the grayscale image
+    rects = detector(gray, 1)
+
+    left_corner_arr = None
+    right_corner_arr = None
+    nose_tip_arr = None
+    right_mouth_arr = None
+    left_mouth_arr = None
+    chin_arr = None
+    face_center_arr = None
+    face_center_top_arr = None
+    face_center_bottom_arr = None
+    count = 0
+
+    print('no of faces: ', len(rects))
+
+    if (len(rects)):
+        left_corner_arr = np.zeros((len(rects), 2))
+        right_corner_arr = np.zeros((len(rects), 2))
+        nose_tip_arr = np.zeros((len(rects), 2))
+        right_mouth_arr = np.zeros((len(rects), 2))
+        left_mouth_arr = np.zeros((len(rects), 2))
+        chin_arr = np.zeros((len(rects), 2))
+        face_center_top_arr = np.zeros((len(rects), 2))
+        face_center_bottom_arr = np.zeros((len(rects), 2))
+
+
+        for (i, rect) in enumerate(rects):
+
+            left_corner = None
+            right_corner = None
+            nose_tip = None
+            right_mouth = None
+            left_mouth = None
+            chin = None
+
+
+            (fx, fy, fw, fh) = face_utils.rect_to_bb(rect)
+            cv2.rectangle(image, (fx, fy), (fx+fw, fy+fh), (0, 255, 0), 2)
+            face_center_top = [int(fx + fw/2), int(fy)]
+            face_center_bottom = [int(fx + fw/2), int(fy + fh)]
+            cv2.line(image, (int(fx + fw/2), int(fy)), (int(fx + fw/2), int(fy + fh)), (0, 255, 0), 2)
+
+            shape = predictor(gray, rect)
+            shape = face_utils.shape_to_np(shape)
+
+            # looping through each facial landmark category
+            for (name, (i, j)) in face_utils.FACIAL_LANDMARKS_IDXS.items():
+                # clone the original image so we can draw on it, then
+                # display the name of the face part on the image
+                clone = image
+
+                # loop over the subset of facial landmarks, drawing the
+                # specific face part
+
+                for (x, y) in shape[i:j]:
+                    if (name == 'left_eye'):
+                        # maxArr = np.amax(shape[i:j], axis=0)
+                        # minArr = np.amin(shape[i:j], axis=0)
+                        left_corner = np.amax(shape[i:j], axis=0)
+
+                    elif (name == 'right_eye'):
+                        # maxArr = np.amax(shape[i:j], axis=0)
+                        # minArr = np.amin(shape[i:j], axis=0)
+                        right_corner = np.amin(shape[i:j], axis=0)
+
+                    elif (name == 'jaw'):
+                        minArr = np.array(shape[i:j][8], dtype=int)
+                        chin = np.array(shape[i:j][8], dtype=int)
+
+                        # cv2.putText(clone, "Chin", (int(minArr[0]), int(minArr[1])), cv2.FONT_HERSHEY_SIMPLEX, 0.7, (0, 0, 255), 2)
+                        cv2.circle(image, (int(minArr[0]), int(minArr[1])), 3, (255, 0, 255), -1)
+                        # cv2.circle(clone, (int(minArr[0]), int(minArr[1])), 3, (0, 255, 255), -1)
+
+                    elif (name == 'nose'):
+                        # nose_tip = np.array(shape[i:j][3], dtype=int)
+                        nose_tip = np.array(shape[i:j][3], dtype=int)
+                        # cv2.putText(clone, "Nose tip", (int(nose_tip[0]), int(nose_tip[1])), cv2.FONT_HERSHEY_SIMPLEX, 0.7, (0, 0, 255),
+                        #             2)
+                        # cv2.circle(clone, (int(nose_tip[0]), int(nose_tip[1])), 3, (255, 0, 255), -1)
+
+                    elif (name == 'inner_mouth'):
+                        # maxArr = np.amax(shape[i:j], axis=0)
+                        # minArr = np.amin(shape[i:j], axis=0)
+                        right_mouth = np.amin(shape[i:j], axis=0)
+                        left_mouth = np.amax(shape[i:j], axis=0)
+                        # cv2.circle(clone, (maxArr[0], maxArr[1]), 3, (127, 0, 255), -1)
+                        # cv2.circle(clone, (minArr[0], minArr[1]), 3, (127, 0, 255), -1)
+
+                    # else:
+                    # cv2.circle(image, (x, y), 3, (255, 0, 255), -1)
+
+            left_corner_arr[count] = left_corner
+            right_corner_arr[count] = right_corner
+            nose_tip_arr[count] = nose_tip
+            right_mouth_arr[count] = right_mouth
+            left_mouth_arr[count] = left_mouth
+            chin_arr[count] = chin
+            face_center_top_arr[count] = face_center_top
+            face_center_bottom_arr[count] = face_center_bottom
+
+            count += 1
+
+
+
+    return left_corner_arr, right_corner_arr, nose_tip_arr, right_mouth_arr, left_mouth_arr, chin_arr, face_center_top_arr, face_center_bottom_arr, count
+
+            # extract the ROI of the face region as a separate image
+        #     (x, y, w, h) = cv2.boundingRect(np.array([shape[i:j]]))
+        #     roi = image[y:y + h, x:x + w]
+        #     roi = imutils.resize(roi, width=250, inter=cv2.INTER_CUBIC)
+        #
+        #     # show the particular face part
+        #     cv2.imshow("ROI", roi)
+        #     cv2.imshow("Image", clone)
+        #     cv2.waitKey(0)
+        #
+        #     # visualize all facial landmarks with a transparent overlay
+        # output = face_utils.visualize_facial_landmarks(image, shape)
+        # cv2.imshow("Image", output)
+        # cv2.waitKey(0)
\ No newline at end of file

FirstApp/logic/head_pose_estimation.py

+
+import os
+import cv2
+import numpy as np
+import shutil
+from .facial_landmarks import get2DPoints
+from .classes import pose
+# Read Image
+
+
+def estimatePose(request):
+
+
+    directory = request['directory']
+    images = request['images']
+
+    BASE_DIR = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+    IMAGE_DIR = os.path.join(BASE_DIR, "assets\\FirstApp\\images")
+    SPEC_DIR = os.path.join(IMAGE_DIR, "{}".format(directory))
+
+    # new directory will be created to store pose estimations
+    new_dir_name = "static\\FirstApp\\poses\\{}".format(directory)
+    new_dir = os.path.join(BASE_DIR, new_dir_name)
+    face_count_response = 0
+    pose_response_list = []
+
+    if (os.path.isdir(new_dir)):
+        # delete the previous directory
+        shutil.rmtree(new_dir)
+
+    # create the new directory
+    os.mkdir(new_dir)
+
+    for im in images:
+
+        IMAGE_PATH = os.path.join(SPEC_DIR, "{}".format(im))
+        image = cv2.imread(IMAGE_PATH)
+        size = image.shape
+
+        left_corner, right_corner, nose_tip, right_mouth, left_mouth, chin, face_center_top, face_center_bottom, face_count = get2DPoints(image)
+
+        # if faces are found
+        if left_corner is not None:
+
+
+            # 3D model points.
+            model_points = np.array([
+                (0.0, 0.0, 0.0),  # Nose tip
+                (0.0, -330.0, -65.0),  # Chin
+                (-225.0, 170.0, -135.0),  # Left eye left corner
+                (225.0, 170.0, -135.0),  # Right eye right corne
+                (-150.0, -150.0, -125.0),  # Left Mouth corner
+                (150.0, -150.0, -125.0)  # Right mouth corner
+
+            ])
+
+            # Camera internals
+
+            focal_length = size[1]
+            center = (size[1] / 2, size[0] / 2)
+            camera_matrix = np.array(
+                [[focal_length, 0, center[0]],
+                 [0, focal_length, center[1]],
+                 [0, 0, 1]], dtype="double"
+            )
+
+            # print("Camera Matrix :\n {0}".format(camera_matrix))
+
+            for i in range (face_count):
+
+                text = ''
+                # 2D image points. If you change the image, you need to change vector
+                image_points = np.array([
+                    nose_tip[i],
+                    chin[i],
+                    left_corner[i],
+                    right_corner[i],
+                    left_mouth[i],
+                    right_mouth[i]
+                ], dtype="double")
+
+
+                dist_coeffs = np.zeros((4, 1))  # Assuming no lens distortion
+                (success, rotation_vector, translation_vector) = cv2.solvePnP(model_points, image_points, camera_matrix, dist_coeffs,
+                                                                              flags=cv2.SOLVEPNP_ITERATIVE)
+
+
+                # Project a 3D point (0, 0, 1000.0) onto the image plane.
+                # We use this to draw a line sticking out of the nose
+
+
+                (nose_end_point2D, jacobian) = cv2.projectPoints(np.array([(0.0, 0.0, 1000.0)]), rotation_vector, translation_vector,
+                                                                 camera_matrix, dist_coeffs)
+
+                # for p in image_points:
+                #     cv2.circle(im, (int(p[0]), int(p[1])), 3, (0, 0, 255), -1)
+
+                p1 = (int(image_points[0][0]), int(image_points[0][1]))
+                p2 = (int(nose_end_point2D[0][0][0]), int(nose_end_point2D[0][0][1]))
+
+                if (p2[0] < face_center_top[i][0]):
+                    text = 'RIGHT'
+                else:
+                    text = 'LEFT'
+
+                cv2.putText(image, text, p2, cv2.FONT_HERSHEY_COMPLEX, 0.8, (0, 0, 255), 2)
+                cv2.line(image, p1, p2, (255, 0, 0), 2)
+
+                # saving the image
+                new_file = os.path.join(new_dir, im)
+
+                cv2.imwrite(new_file, image)
+
+                face_count_response += 1
+
+                # create a response object for the image
+                pose_response = {}
+                pose_response["directory"] = directory
+                pose_response["image"] = im
+                pose_response["label"] = text
+
+                pose_response_list.append(pose_response)
+
+
+
+
+
+        else:
+            print('No faces found')
+
+
+    # respond 'yes' to the command line prompt
+    p = os.popen('python manage.py collectstatic', "w")
+    p.write("yes")
+
+    # returning the static path
+    STATIC_POSE = os.path.join(BASE_DIR, "assets\\FirstApp\\pose")
+    STATIC_SPEC = os.path.join(STATIC_POSE, "{}".format(directory))
+
+    # if no images were created
+    if (face_count_response < 1):
+        shutil.rmtree(new_dir)
+        return "No faces were found"
+
+    return pose_response_list
\ No newline at end of file

FirstApp/logic/id_generator.py

+def generate_new_id(prev_id):
+
+    alpha = []
+    digit_index = 0
+    value_index = 0
+    zero_index = 0
+    count = 0
+    text_len = len(prev_id)
+
+    for letter in list(prev_id):
+
+        if (letter.isalpha()):
+            alpha.append(letter)
+
+        if (letter.isdigit()):
+            digit_index = count
+            break
+
+        count += 1
+
+    print('digit index: ', digit_index)
+
+    zero_index = digit_index
+
+    for i in range(digit_index, text_len):
+        if (prev_id[i] == '0'):
+            zero_index += 1
+        else:
+            value_index = i
+            break
+
+    sub_text = prev_id[value_index:text_len]
+    number = int(sub_text)
+    number += 1
+
+    number_str = str(number)
+    len_number_str = len(number_str)
+    num_of_zeros = text_len - (len_number_str + digit_index)
+    zero_text = ''
+    new_str = ''
+    returned_id = prev_id
+
+    # converting the list into a string
+    for l in alpha:
+        new_str += l
+
+    if (num_of_zeros >= 0):
+
+        for i in range(0, num_of_zeros):
+            zero_text += '0'
+
+        returned_id = new_str + zero_text + number_str
+
+    # returning the new id
+    if (returned_id == prev_id):
+        return prev_id
+
+    return returned_id
\ No newline at end of file

FirstApp/logic/posenet_calculation.py

+import tensorflow as tf
+import tensorflow.keras
+from PIL import Image, ImageOps
+import numpy as np
+import cv2
+import os
+import math
+import shutil
+from . import custom_sorter as cs
+
+
+def get_pose_estimations(video_name):
+    BASE_DIR = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+    # face_classifier = cv2.CascadeClassifier(
+    #     os.path.join(BASE_DIR, 'FirstApp\classifiers\haarcascade_frontalface_default.xml'))
+    # classifier_path = os.path.join(BASE_DIR, 'FirstApp\classifiers\Emotion_little_vgg.h5')
+    # classifier = load_model(classifier_path)
+    EXTRACTED_DIR = os.path.join(BASE_DIR, "assets\\FirstApp\\activity\\{}".format(video_name))
+
+    class_labels = ['Angry', 'Happy', 'Neutral', 'Sad', 'Surprise']
+
+    detections = []
+    frames = []
+
+    for frame_folder in os.listdir(EXTRACTED_DIR):
+
+        FRAME_DIR = os.path.join(EXTRACTED_DIR, frame_folder)
+        frame_details = {}
+        frame_details['frame'] = frame_folder
+
+        # for each detection in the frame directory
+        detected_images = []
+        for detection in os.listdir(FRAME_DIR):
+
+            if "frame" not in detection:
+                DETECTION_PATH = os.path.join(FRAME_DIR, detection)
+
+                image = cv2.imread(DETECTION_PATH)
+
+                # label = emotion_recognition(classifier, face_classifier, image)
+
+                detected_images.append(detection)
+                detections.append(detection)
+
+        frame_details['detections'] = detected_images
+        frames.append(frame_details)
+
+    sorted_frames = cs.custom_object_sorter(frames)
+    set_detections = set(detections)
+    list_set_detections = list(set_detections)
+
+    sorted_list_set_detections = cs.custom_sort(list_set_detections)
+
+    return sorted_frames, sorted_list_set_detections
+
+
+# calculate pose estimations for a student
+def calculate_pose_estimation_for_student(video_name, student, poses):
+
+    BASE_DIR = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+    VIDEO_DIR = os.path.join(BASE_DIR, "assets\\FirstApp\\activity\\{}".format(video_name))
+    POSE_DIR = os.path.join(BASE_DIR, "assets\\FirstApp\\poses")
+    POSE_VIDEO_DIR = os.path.join(POSE_DIR, video_name)
+    pose_count = 0
+
+    # checking whether the pose directory
+    if os.path.isdir(POSE_VIDEO_DIR) == False:
+        # create the pose directory
+        os.mkdir(POSE_VIDEO_DIR)
+
+
+    # loop through each frame of the directory
+    for frame in os.listdir(VIDEO_DIR):
+
+        FRAME_FOLDER = os.path.join(VIDEO_DIR, frame)
+
+        for detection in os.listdir(FRAME_FOLDER):
+
+            DETECTION_PATH = os.path.join(FRAME_FOLDER, detection)
+            # detection image
+            detection_img = cv2.imread(DETECTION_PATH)
+
+            # checking for the given student
+            if detection == student:
+
+                # select the correct pose detection
+                pose = poses[pose_count]
+
+                # extract the coordinates
+                x1 = int(pose['keypoints'][5]['position']['x'])
+                y1 = int(pose['keypoints'][5]['position']['y'])
+                x2 = int(pose['keypoints'][6]['position']['x'])
+                y2 = int(pose['keypoints'][6]['position']['y'])
+
+                # extract the head positions
+                x_diff = x1 - x2
+                y_diff = y1 - y2
+                x_pow = math.pow(x_diff, 2)
+                y_pow = math.pow(y_diff, 2)
+                summation = x_pow + y_pow
+
+                distance = int(math.sqrt(summation))
+
+                # defining the hyperparameter
+                param = 0.6
+
+                fraction = int(math.floor(distance * param)) if int(math.floor(distance * param)) > 0 else 1
+
+                middle_x = x2 + fraction
+
+                # middle_y = y2 - 20
+                middle_y = y2
+
+                head_x = middle_x
+
+                head_y = 0 if (middle_y - fraction) < 0 else (middle_y - fraction)
+
+                left_upper_x = 0 if (middle_x - fraction) < 0 else (middle_x - fraction)
+
+                print('head_y: ', head_y)
+                print('fraction: ', fraction)
+                print('distance: ', distance)
+                print('left_upper_x: ', left_upper_x)
+
+                # extract the new image
+                new_img = detection_img[head_y:head_y+fraction, left_upper_x:left_upper_x+distance]
+
+                # new directory name
+                # new_img_dir = os.path.join(POSE_VIDEO_DIR, frame)
+                new_img_dir = os.path.join(POSE_VIDEO_DIR, detection)
+
+                # check if the directory exists
+                if os.path.isdir(new_img_dir) == False:
+                    # create the new directory
+                    os.mkdir(new_img_dir)
+
+                # create new image name
+                frame_name = frame + ".png"
+
+                new_img_path = os.path.join(new_img_dir, frame_name)
+
+                # saving the new image
+                cv2.imwrite(new_img_path, new_img)
+
+                # increment the count
+                pose_count += 1
+
+                print('saving the image')
+
+

FirstApp/logic/video_extraction.py

+import os
+import cv2
+import shutil
+
+def VideoExtractor(request):
+
+    BASE_DIR = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+    video_name = request["video_name"]
+
+    VIDEO_DIR = os.path.join(BASE_DIR, "assets\\FirstApp\\videos")
+    VIDEO_PATH = os.path.join(VIDEO_DIR, video_name)
+
+    # creating the new path to store extracted frames
+    NEW_DIR = os.path.join(BASE_DIR, "static\\FirstApp\\extracted\\{}".format(video_name))
+
+    # check whether a specific directory exists
+    if (os.path.isdir(NEW_DIR)):
+        shutil.rmtree(NEW_DIR)
+
+    # create the new directory
+    os.mkdir(NEW_DIR)
+
+    video = cv2.VideoCapture(VIDEO_PATH)
+
+    no_of_frames = int(video.get(cv2.CAP_PROP_FRAME_COUNT))
+    frame_count = 0
+
+
+    while (frame_count < no_of_frames):
+
+        ret, frame = video.read()
+        gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
+
+        new_file_name = "{}_frame_{}.png".format(video_name, frame_count)
+        new_file_path = os.path.join(NEW_DIR, new_file_name)
+
+        # save the extracted frames
+        cv2.imwrite(new_file_path, gray)
+
+        frame_count += 1
+
+
+    # after extracting the frames, save the changes to static content
+    p = os.popen("python manage.py collectstatic", "w")
+    p.write("yes")
+
+# retrieving the extracted frames for a given video
+def getExtractedFrames(request):
+
+    folder_name = request.get("folder_name")
+    image_list = []
+
+    print('folder name: ', folder_name)
+
+    BASE_DIR = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+    EXTRACTED_DIR = os.path.join(BASE_DIR, "assets\\FirstApp\\extracted\\{}".format(folder_name))
+
+    # listing all the images in the directory
+    for image in os.listdir(EXTRACTED_DIR):
+        image_details = {"image": image}
+        image_list.append(image_details)
+
+
+
+    # checking for the number of frames
+    if (len(image_list) > 0):
+        return image_list
+
+    else:
+        return "No extracted frames were found"

FirstApp/migrations/0001_initial.py

+# Generated by Django 3.0.3 on 2020-03-04 11:15
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Teachers',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('firstName', models.CharField(max_length=10)),
+                ('lastName', models.CharField(max_length=15)),
+                ('age', models.IntegerField()),
+            ],
+        ),
+    ]

FirstApp/migrations/0002_registeruser_video_videometa.py

+# Generated by Django 2.2.11 on 2020-03-16 12:47
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('FirstApp', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='RegisterUser',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('firstName', models.CharField(max_length=20)),
+                ('lastName', models.CharField(max_length=30)),
+                ('email', models.CharField(max_length=30)),
+                ('password', models.CharField(max_length=50)),
+            ],
+        ),
+        migrations.CreateModel(
+            name='Video',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=100)),
+                ('path', models.CharField(max_length=100)),
+                ('duration', models.CharField(max_length=100)),
+                ('hours', models.IntegerField()),
+                ('minutes', models.IntegerField()),
+                ('seconds', models.IntegerField()),
+            ],
+        ),
+        migrations.CreateModel(
+            name='VideoMeta',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('fps', models.IntegerField()),
+                ('frame_count', models.IntegerField()),
+                ('happy_count', models.IntegerField()),
+                ('sad_count', models.IntegerField()),
+                ('angry_count', models.IntegerField()),
+                ('neutral_count', models.IntegerField()),
+                ('surprise_count', models.IntegerField()),
+                ('happy_perct', models.IntegerField()),
+                ('sad_perct', models.IntegerField()),
+                ('angry_perct', models.IntegerField()),
+                ('neutral_perct', models.IntegerField()),
+                ('surprise_perct', models.IntegerField()),
+            ],
+        ),
+    ]

FirstApp/migrations/0003_lectureemotionreport.py

+# Generated by Django 2.2.11 on 2020-05-10 15:32
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('FirstApp', '0002_registeruser_video_videometa'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='LectureEmotionReport',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('lecture_id', models.CharField(max_length=10)),
+                ('happy_perct', models.FloatField()),
+                ('sad_perct', models.FloatField()),
+                ('angry_perct', models.FloatField()),
+                ('surprise_perct', models.FloatField()),
+                ('disgust_perct', models.FloatField()),
+                ('neutral_perct', models.FloatField()),
+            ],
+        ),
+    ]

FirstApp/migrations/0004_lecture.py

+# Generated by Django 2.2.11 on 2020-05-11 16:58
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('FirstApp', '0003_lectureemotionreport'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Lecture',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('date', models.DateTimeField(auto_created=True)),
+                ('lecture_id', models.CharField(max_length=10)),
+            ],
+        ),
+    ]

FirstApp/migrations/0005_auto_20200513_1551.py

+# Generated by Django 2.2.11 on 2020-05-13 10:21
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('FirstApp', '0004_lecture'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Faculty',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('faculty_id', models.CharField(max_length=10)),
+                ('name', models.CharField(max_length=100)),
+            ],
+        ),
+        migrations.CreateModel(
+            name='Lecturer',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('lecturer_id', models.CharField(max_length=7)),
+                ('fname', models.TextField()),
+                ('lname', models.TextField()),
+                ('email', models.EmailField(max_length=254)),
+                ('telephone', models.CharField(max_length=10)),
+                ('faculty', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='FirstApp.Faculty')),
+            ],
+        ),
+        migrations.AlterField(
+            model_name='lecture',
+            name='date',
+            field=models.DateTimeField(auto_created=True, default=None),
+        ),
+        migrations.CreateModel(
+            name='Subject',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('subject_code', models.TextField()),
+                ('name', models.TextField()),
+                ('year', models.IntegerField()),
+                ('faculty', models.ForeignKey(default={}, on_delete=django.db.models.deletion.CASCADE, to='FirstApp.Faculty')),
+            ],
+        ),
+        migrations.CreateModel(
+            name='LecturerSubject',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('lec_subject_id', models.CharField(max_length=10)),
+                ('lecturer_id', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='FirstApp.Lecturer')),
+                ('subjects', models.ManyToManyField(to='FirstApp.Subject')),
+            ],
+        ),
+    ]

FirstApp/migrations/0006_lecturercredentials.py

+# Generated by Django 2.2.11 on 2020-05-13 15:46
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('FirstApp', '0005_auto_20200513_1551'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='LecturerCredentials',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('password', models.CharField(max_length=15)),
+                ('username', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='FirstApp.Lecturer')),
+            ],
+        ),
+    ]

FirstApp/models.py

+from django.db import models
+
+class Teachers(models.Model):
+    firstName = models.CharField(max_length=10)
+    lastName = models.CharField(max_length=15)
+    age = models.IntegerField()
+
+    def __str__(self):
+        return self.firstName
+
+
+class Video(models.Model):
+    name = models.CharField(max_length=100)
+    path = models.CharField(max_length=100)
+    duration = models.CharField(max_length=100)
+    hours = models.IntegerField()
+    minutes = models.IntegerField()
+    seconds = models.IntegerField()
+
+    def __str__(self):
+        return self.name
+
+
+class VideoMeta(models.Model):
+    fps = models.IntegerField()
+    frame_count = models.IntegerField()
+    happy_count = models.IntegerField()
+    sad_count = models.IntegerField()
+    angry_count = models.IntegerField()
+    neutral_count = models.IntegerField()
+    surprise_count = models.IntegerField()
+    happy_perct = models.IntegerField()
+    sad_perct = models.IntegerField()
+    angry_perct = models.IntegerField()
+    neutral_perct = models.IntegerField()
+    surprise_perct = models.IntegerField()
+
+    def __int__(self):
+        return self.frame_count
+
+    def calcHappyPerct(self):
+        self.happy_perct = int((self.happy_count / self.frame_count) * 100)
+
+    def calcSadPerct(self):
+        self.sad_perct = int((self.sad_count / self.frame_count) * 100)
+
+    def calcAngryPerct(self):
+        self.angry_perct = int((self.angry_count / self.frame_count) * 100)
+
+    def calcNeutralPerct(self):
+        self.neutral_perct = int((self.neutral_count / self.frame_count) * 100)
+
+    def calcSurprisePerct(self):
+        self.surprise_perct = int((self.surprise_count / self.frame_count) * 100)
+
+    def calcPercentages(self):
+        self.calcHappyPerct()
+        self.calcAngryPerct()
+        self.calcSadPerct()
+        self.calcNeutralPerct()
+        self.calcSurprisePerct()
+
+
+class RegisterUser(models.Model):
+    firstName = models.CharField(max_length=20)
+    lastName = models.CharField(max_length=30)
+    email = models.CharField(max_length=30)
+    password = models.CharField(max_length=50)
+
+    def __str__(self):
+        return self.firstName
+
+

FirstApp/serializers.py

+from rest_framework import serializers
+from .models import Teachers, RegisterUser
+from .MongoModels import *
+from .logic import classes
+from . models import VideoMeta
+
+class TeachersSerializer(serializers.ModelSerializer):
+
+    class Meta:
+        model = Teachers
+        fields = ('firstName', 'lastName')
+# fields = __all__
+
+class RegisterUserSerializer(serializers.ModelSerializer):
+
+    class Meta:
+        model = RegisterUser
+        fields = ('firstName', 'lastName', 'email', 'password')
+
+
+# image serializer
+class ImageSerializer(serializers.Serializer):
+
+    metaData = serializers.CharField()
+
+
+# image serializer
+class PoseSerializer(serializers.Serializer):
+
+    directory = serializers.CharField()
+    image_name = serializers.CharField()
+    text = serializers.CharField()
+
+
+# lecture serializer
+class LectureSerializer(serializers.ModelSerializer):
+
+    class Meta:
+        model = Lecture
+        fields = '__all__'
+
+
+# faculty serializer
+class FacultySerializer(serializers.ModelSerializer):
+
+    class Meta:
+        model = Faculty
+        fields = '__all__'
+
+
+# subject serializer
+class SubjectSerializer(serializers.ModelSerializer):
+
+    faculty = FacultySerializer()
+
+    class Meta:
+        model = Subject
+        fields = '__all__'
+
+
+    # overriding the create method
+    def create(self, validated_data):
+
+        faculty = None
+
+        faculty_data = validated_data.pop('faculty')
+        serialized_faculty = FacultySerializer(data=faculty_data)
+
+
+        if (serialized_faculty.is_valid()):
+            # faculty, faculty_created = Faculty.objects.get_or_create(defaults={}, faculty_id=serialized_faculty.data['faculty_id'])
+            faculty = Faculty.objects.filter(faculty_id=serialized_faculty.data['faculty_id'])
+
+            if (len(faculty) == 1):
+
+                subject, created = Subject.objects.update_or_create(
+                    faculty=faculty[0],
+                    subject_code=validated_data.pop('subject_code'),
+                    name=validated_data.pop('name'),
+                    year=validated_data.pop('year')
+                )
+
+                print(type(subject.year))
+                return subject
+
+            return None
+
+        return None
+
+
+
+    def get_embedded_field(self, obj):
+        return_data = None
+        if type(obj.embedded_field) == list:
+            embedded_list = []
+            for item in obj.embedded_field:
+                embedded_dict = item.__dict__
+                for key in list(embedded_dict.keys()):
+                    if key.startswith('_'):
+                        embedded_dict.pop(key)
+                embedded_list.append(embedded_dict)
+            return_data = embedded_list
+        else:
+            embedded_dict = obj.embedded_field.__dict__
+            for key in list(embedded_dict.keys()):
+                if key.startswith('_'):
+                    embedded_dict.pop(key)
+            return_data = embedded_dict
+        return return_data
+
+
+# serializer for lecturer
+class LecturerSerializer(serializers.ModelSerializer):
+
+    faculty = FacultySerializer(required=True)
+
+    class Meta:
+        model = Lecturer
+        fields = '__all__'
+
+    # overriding the create method
+    def create(self, validated_data):
+
+        faculty = None
+
+        faculty_data = validated_data.pop('faculty')
+        serialized_faculty = FacultySerializer(data=faculty_data)
+
+        if (serialized_faculty.is_valid()):
+            # faculty, faculty_created = Faculty.objects.get_or_create(defaults={}, faculty_id=serialized_faculty.data['faculty_id'])
+            faculty = Faculty.objects.filter(faculty_id=serialized_faculty.data['faculty_id'])
+
+            if (len(faculty) == 1):
+                lecturer, created = Lecturer.objects.update_or_create(
+                    faculty=faculty[0],
+                    lecturer_id=validated_data.pop('lecturer_id'),
+                    fname=validated_data.pop('fname'),
+                    lname=validated_data.pop('lname'),
+                    email=validated_data.pop('email'),
+                    telephone=validated_data('telephone')
+                )
+
+                return lecturer
+
+            return None
+
+        return None
+
+
+# serializer for Lecturer_Subject
+class LecturerSubjectSerializer(serializers.ModelSerializer):
+
+    lecturer_id = LecturerSerializer()
+
+    class Meta:
+        model = LecturerSubject
+        fields = '__all__'
+
+
+# serializer for timetables
+class FacultyTimetableSerializer(serializers.ModelSerializer):
+
+    faculty = FacultySerializer(required=True)
+    timetable = serializers.SerializerMethodField()
+
+    def get_timetable(self, obj):
+        return_data = []
+
+        for table in obj.timetable:
+            time_table = {}
+            time_slots = []
+            time_table["date"] = table.date
+
+            for slot in table.time_slots:
+                slot_data = {"start_time": slot.start_time, "end_time": slot.end_time,
+                             "subject": SubjectSerializer(slot.subject).data,
+                             "lecturer": LecturerSerializer(slot.lecturer).data, "location": slot.location}
+
+                time_slots.append(slot_data)
+
+            time_table["time_slots"] = time_slots
+
+            return_data.append(time_table)
+
+        return return_data
+
+
+    class Meta:
+        model = FacultyTimetable
+        fields = ('timetable_id', 'faculty', 'timetable')
+
+
+# lecture video serializer
+class LectureVideoSerializer(serializers.ModelSerializer):
+
+    lecturer = LecturerSerializer()
+    subject = SubjectSerializer()
+
+    class Meta:
+        model = LectureVideo
+        fields = '__all__'
+
+
+class LectureActivitySerializer(serializers.ModelSerializer):
+
+    lecture_video_id = LectureVideoSerializer()
+
+    class Meta:
+        model = LectureActivity
+        fields = '__all__'
+
+
+# EMOTIONS section
+# lecture emotions serailzier
+class LectureEmotionSerializer(serializers.ModelSerializer):
+    lecture_video_id = LectureVideoSerializer()
+
+    class Meta:
+        model = LectureEmotionReport
+        fields = '__all__'
+
+
+# lecture video meta serializer
+class VideoMetaSerializer(serializers.ModelSerializer):
+
+    class Meta:
+        model = VideoMeta
+        fields = '__all__'

FirstApp/templates/FirstApp/404.html

+{% extends 'FirstApp/template.html' %}
+<!DOCTYPE html>
+<html lang="en">
+
+
+<body id="page-top">
+
+
+  <!-- Page Wrapper -->
+  <div id="wrapper">
+
+
+
+    <!-- Content Wrapper -->
+    <div id="content-wrapper" class="d-flex flex-column">
+
+      <!-- Main Content -->
+      <div id="content">
+
+
+
+        <!-- Begin Page Content -->
+          {% block 'container-fluid' %}
+        <div class="container-fluid">
+            {% load static %}
+
+          <!-- 404 Error Text -->
+          <div class="text-center">
+            <div class="error mx-auto" data-text="404">404</div>
+            <p class="lead text-gray-800 mb-5">Page Not Found</p>
+            <p class="text-gray-500 mb-0">It looks like you found a glitch in the matrix...</p>
+            <a href="/">&larr; Back to Dashboard</a>
+          </div>
+
+        </div>
+          {% endblock %}
+        <!--end of container-fluid -->
+
+      </div>
+      <!-- End of Main Content -->
+
+      <!-- Footer -->
+      <footer class="sticky-footer bg-white">
+        <div class="container my-auto">
+          <div class="copyright text-center my-auto">
+            <span>Copyright &copy; Your Website 2019</span>
+          </div>
+        </div>
+      </footer>
+      <!-- End of Footer -->
+
+    </div>
+    <!-- End of Content Wrapper -->
+
+  </div>
+  <!-- End of Page Wrapper -->
+
+  <!-- Scroll to Top Button-->
+  <a class="scroll-to-top rounded" href="#page-top">
+    <i class="fas fa-angle-up"></i>
+  </a>
+
+  <!-- Logout Modal-->
+  <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
+          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">×</span>
+          </button>
+        </div>
+        <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
+          <a class="btn btn-primary" href="login.html">Logout</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Bootstrap core JavaScript-->
+  <script src="vendor/jquery/jquery.min.js"></script>
+  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+
+  <!-- Core plugin JavaScript-->
+  <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
+
+  <!-- Custom scripts for all pages-->
+  <script src="js/sb-admin-2.min.js"></script>
+
+</body>
+
+</html>

FirstApp/templates/FirstApp/500.html

+{% extends 'FirstApp/template.html' %}
+<!DOCTYPE html>
+<html lang="en">
+
+
+<body id="page-top">
+
+
+  <!-- Page Wrapper -->
+  <div id="wrapper">
+
+
+
+    <!-- Content Wrapper -->
+    <div id="content-wrapper" class="d-flex flex-column">
+
+      <!-- Main Content -->
+      <div id="content">
+
+
+
+        <!-- Begin Page Content -->
+          {% block 'container-fluid' %}
+        <div class="container-fluid">
+            {% load static %}
+
+          <!-- 404 Error Text -->
+          <div class="text-center">
+            <div class="error mx-auto" data-text="404">500</div>
+            <p class="lead text-gray-800 mb-5">Something went wrong</p>
+            <p class="text-gray-500 mb-0">This will be fixed soon...</p>
+            <a href="/">&larr; Back to Dashboard</a>
+          </div>
+
+        </div>
+          {% endblock %}
+        <!--end of container-fluid -->
+
+      </div>
+      <!-- End of Main Content -->
+
+      <!-- Footer -->
+      <footer class="sticky-footer bg-white">
+        <div class="container my-auto">
+          <div class="copyright text-center my-auto">
+            <span>Copyright &copy; Your Website 2019</span>
+          </div>
+        </div>
+      </footer>
+      <!-- End of Footer -->
+
+    </div>
+    <!-- End of Content Wrapper -->
+
+  </div>
+  <!-- End of Page Wrapper -->
+
+  <!-- Scroll to Top Button-->
+  <a class="scroll-to-top rounded" href="#page-top">
+    <i class="fas fa-angle-up"></i>
+  </a>
+
+  <!-- Logout Modal-->
+  <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
+          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">×</span>
+          </button>
+        </div>
+        <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
+          <a class="btn btn-primary" href="login.html">Logout</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Bootstrap core JavaScript-->
+  <script src="vendor/jquery/jquery.min.js"></script>
+  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+
+  <!-- Core plugin JavaScript-->
+  <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
+
+  <!-- Custom scripts for all pages-->
+  <script src="js/sb-admin-2.min.js"></script>
+
+</body>
+
+</html>

FirstApp/templates/FirstApp/base.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link rel="stylesheet" href="style.css">
+    <title>{% block title %}My amazing site{% endblock %}</title>
+</head>
+
+<body>
+    <div id="sidebar">
+        {% block sidebar %}
+        <ul>
+            <li><a href="/">Home</a></li>
+            <li><a href="/blog/">Blog</a></li>
+        </ul>
+        {% endblock %}
+    </div>
+
+    <div id="content">
+        {% block content %}{% endblock %}
+    </div>
+</body>
+</html>
\ No newline at end of file

FirstApp/templates/FirstApp/child.html

+{% extends "FirstApp/base.html" %}
+
+{% block title %}My amazing blog{% endblock %}
+
+{% block content %}
+{% for entry in blog_entries %}
+    <h2>{{ entry.title }}</h2>
+    <p>{{ entry.body }}</p>
+{% endfor %}
+{% endblock %}
\ No newline at end of file

FirstApp/templates/FirstApp/extractor.html

+{% extends 'FirstApp/template.html' %}
+<!DOCTYPE html>
+<html lang="en">
+<body id="page-top">
+<!-- Page Wrapper -->
+
+{% block javascript %}
+        {% load static %}
+
+        <!-- Bootstrap core JavaScript-->
+      <script src="{% static 'FirstApp/vendor/jquery/jquery.min.js' %}"></script>
+      <script src="{% static 'FirstApp/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
+
+      <!-- Core plugin JavaScript-->
+      <script src="{% static 'FirstApp/vendor/jquery-easing/jquery.easing.min.js' %}"></script>
+
+
+    <script type="text/javascript">
+        const cur_date = new Date().toDateString();
+        let video_name = '';
+        $(document).ready(function () {
+            $('.video_row').click(function () {
+                video_name = $(this).attr('id');
+                let video_duration = $(this).attr('data-duration');
+                let src = "{% static '' %}FirstApp/videos/" + video_name;
+
+                //assigning the src
+                $("video").attr('src', src);
+
+                //setting the video details
+                $('#video_name').text(video_name);
+                $('#video_duration').text(video_duration);
+                $('#video_date').text(cur_date);
+
+            });
+
+            //to handle video extraction button
+
+            $('#extractBtn').click(function () {
+                //run the api
+                fetch('http://127.0.0.1:8000/videoExtract', {
+                   method: 'POST',
+                   headers: {
+                       "Content-type": "application/json"
+                   },
+                   body: JSON.stringify({
+                       "video_name": video_name
+                   })
+                })
+                .then((res) => res.json())
+                .then((out) => alert(out.response))
+                .catch((error) => alert('this is an error'));
+            });
+        });
+    </script>
+
+
+{% endblock %}
+
+<div id="wrapper">
+    <!-- Sidebar -->
+
+    <!-- Content Wrapper -->
+    <div id="content-wrapper" class="d-flex flex-column">
+
+        <!-- Main Content -->
+        <div id="content">
+
+            <!-- Begin Page Content -->
+            {% block 'container-fluid' %}
+                <div class="container-fluid">
+                    {% load static %}
+
+                    <!-- Page Heading -->
+                    <div class="d-sm-flex align-items-center justify-content-between mb-4">
+                        <h1 class="h3 mb-0 text-gray-800">Video Extractor</h1>
+                    </div>
+
+                    <!--1st row -->
+                    <div class="row p-2">
+
+                        <!--first column -->
+                        <div class="col-lg-6">
+
+                            <!-- Main Video Context -->
+                            <div class="card shadow mb-4">
+                                <div class="card-header py-3">
+                                    <h6 class="m-0 font-weight-bold text-primary">Main Video</h6>
+                                </div>
+                                <div class="card-body">
+                                    <video width="500" height="300" id="first_video" controls>
+                                        <source src="{% static '' %}FirstApp/videos/{{ firstVideo.name }}"
+                                                type="video/mp4">
+                                        Your browser does not support the video tag.
+                                    </video>
+
+                                    <table class="table table-borderless table-striped m-1">
+                                        <tbody>
+                                            <tr>
+                                                <td class="font-weight-bold">Name</td>
+                                                <td id="video_name">{{ firstVideo.name }}</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="font-weight-bold">Duration</td>
+                                                <td id="video_duration">{{ firstVideo.duration }}</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="font-weight-bold">Date</td>
+                                                <td id="video_date"></td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+
+                                    <div class="col-lg-3 p-3">
+                                        <button type="button" class="btn btn-outline-primary" id="extractBtn">Extract</button>
+                                    </div>
+
+                                </div>
+                            </div>
+                        </div>
+
+
+                        <!--second column -->
+                        <div class="col-lg-6">
+
+                            <!-- Main Video Context -->
+                            <div class="card shadow mb-4">
+                                <div class="card-header py-3">
+                                    <h6 class="m-0 font-weight-bold text-primary">List of Lectures</h6>
+                                </div>
+                                <div class="card-body">
+                                    <table class="table table-bordered">
+                                        <thead>
+                                        <tr>
+                                            <th>Video Name</th>
+                                            <th>Length</th>
+                                        </tr>
+                                        </thead>
+                                        <tbody>
+                                        {% for video in Videos %}
+                                            <tr class="video_row" id="{{ video.name }}" data-duration="{{ video.duration }}">
+                                                <td>
+                                                    {{ video.name }}
+                                                </td>
+                                                <td>{{ video.duration }}</td>
+                                            </tr>
+                                        {% endfor %}
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+
+
+
+                </div>
+            {% endblock %}
+            <!-- End of container-fluid -->
+
+        </div>
+        <!-- End of Main Content -->
+
+    </div>
+    <!-- End of Content Wrapper -->
+
+</div>
+
+{% block 'modal' %}
+    <div class="modal fade" id="gif-body" role="dialog" aria-labelledby="gif-body">
+        <div class="modal-dialog modal-lg" style="max-width: 1600px; max-height: 800px">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h2 class="modal-title">Processing....</h2>
+                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">×</span>
+                    </button>
+                </div>
+
+                <div class="modal-body text-center">
+                    <img src="{% static 'FirstApp/images/ajax-loader.gif' %}" width="200" height="500"
+                         alt="This is a GIF">
+                    <h5>This might take few seconds...</h5>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}
+
+</body>
+</html>
\ No newline at end of file

FirstApp/templates/FirstApp/forgot-password.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="">
+  <meta name="author" content="">
+
+  <title>SB Admin 2 - Forgot Password</title>
+
+  <!-- Custom fonts for this template-->
+  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
+  <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
+
+  <!-- Custom styles for this template-->
+  <link href="css/sb-admin-2.min.css" rel="stylesheet">
+
+</head>
+
+<body class="bg-gradient-primary">
+
+  <div class="container">
+
+    <!-- Outer Row -->
+    <div class="row justify-content-center">
+
+      <div class="col-xl-10 col-lg-12 col-md-9">
+
+        <div class="card o-hidden border-0 shadow-lg my-5">
+          <div class="card-body p-0">
+            <!-- Nested Row within Card Body -->
+            <div class="row">
+              <div class="col-lg-6 d-none d-lg-block bg-password-image"></div>
+              <div class="col-lg-6">
+                <div class="p-5">
+                  <div class="text-center">
+                    <h1 class="h4 text-gray-900 mb-2">Forgot Your Password?</h1>
+                    <p class="mb-4">We get it, stuff happens. Just enter your email address below and we'll send you a link to reset your password!</p>
+                  </div>
+                  <form class="user">
+                    <div class="form-group">
+                      <input type="email" class="form-control form-control-user" id="exampleInputEmail" aria-describedby="emailHelp" placeholder="Enter Email Address...">
+                    </div>
+                    <a href="login.html" class="btn btn-primary btn-user btn-block">
+                      Reset Password
+                    </a>
+                  </form>
+                  <hr>
+                  <div class="text-center">
+                    <a class="small" href="register.html">Create an Account!</a>
+                  </div>
+                  <div class="text-center">
+                    <a class="small" href="login.html">Already have an account? Login!</a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+
+  </div>
+
+  <!-- Bootstrap core JavaScript-->
+  <script src="vendor/jquery/jquery.min.js"></script>
+  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+
+  <!-- Core plugin JavaScript-->
+  <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
+
+  <!-- Custom scripts for all pages-->
+  <script src="js/sb-admin-2.min.js"></script>
+
+</body>
+
+</html>

FirstApp/templates/FirstApp/loggedIn.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+    <p>This is my username{{ username }}</p>
+</body>
+</html>
\ No newline at end of file

FirstApp/templates/FirstApp/login.html

+{% load static %}
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <title>SLPES</title>
+
+    <!-- Custom fonts for this template-->
+    <link href="{% static 'FirstApp/vendor/fontawesome-free/css/all.min.css' %}" rel="stylesheet" type="text/css">
+    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
+          rel="stylesheet">
+
+    <!-- Custom styles for this template-->
+    <link href="{% static 'FirstApp/css/sb-admin-2.min.css' %}" rel="stylesheet">
+
+</head>
+
+<body class="bg-gradient-primary">
+
+<div class="container">
+
+    <!-- Outer Row -->
+    <div class="row justify-content-center">
+
+        <div class="col-xl-10 col-lg-12 col-md-9">
+
+            <div class="card o-hidden border-0 shadow-lg my-5">
+                <div class="card-body p-0">
+                    <!-- Nested Row within Card Body -->
+                    <div class="row">
+                        <div class="col-lg-6 d-none d-lg-block">
+                            <img src="{% static 'FirstApp/images/login_image.jpg' %}" width="400" height="600"
+                                 alt="No image">
+                        </div>
+                        <div class="col-lg-6">
+                            <div class="p-5">
+                                <div class="text-center">
+                                    <h1 class="h4 text-gray-900 mb-4">Welcome Back!</h1>
+                                </div>
+
+                                <!--form -->
+                                <form action="/process-login" method="POST" name="loginForm" class="user">
+                                    {% csrf_token %}
+{#                                    <div class="form-group">#}
+{#                                        <input type="text" name="username" class="form-control form-control-user"#}
+{#                                               id="exampleInputEmail" aria-describedby="emailHelp"#}
+{#                                               placeholder="Enter Email Address...">#}
+{#                                    </div>#}
+                                    <div class="form-group">
+                                        <input type="email" name="email" class="form-control form-control-user"
+                                               id="exampleInputEmail" aria-describedby="emailHelp"
+                                               placeholder="Enter Email Address...">
+                                    </div>
+                                    <div class="form-group">
+                                        <input type="password" name="password" class="form-control form-control-user"
+                                               id="exampleInputPassword" placeholder="Password">
+                                        <div class="alert alert-danger m-4">{{ message }}</div>
+                                    </div>
+                                    <div class="form-group">
+                                        <div class="custom-control custom-checkbox small">
+                                            <input type="checkbox" class="custom-control-input" id="customCheck">
+                                            <label class="custom-control-label" for="customCheck">Remember Me</label>
+                                        </div>
+                                    </div>
+
+                                    <button type="submit" class="btn btn-primary btn-user btn-block">Login</button>
+
+{#                                    <a href="index.html" class="btn btn-primary btn-user btn-block">#}
+{#                                        Login#}
+{#                                    </a>#}
+                                    <hr>
+                                    {#                    <a href="index.html" class="btn btn-google btn-user btn-block">#}
+                                    {#                      <i class="fab fa-google fa-fw"></i> Login with Google#}
+                                    {#                    </a>#}
+                                    {#                    <a href="index.html" class="btn btn-facebook btn-user btn-block">#}
+                                    {#                      <i class="fab fa-facebook-f fa-fw"></i> Login with Facebook#}
+                                    {#                    </a>#}
+                                </form>
+                                <hr>
+                                <div class="text-center">
+                                    <a class="text-md-left" href="forgot-password.html">Forgot Password?</a>
+                                </div>
+                                {#                  <div class="text-center">#}
+                                {#                    <a class="small" href="register.html">Create an Account!</a>#}
+                                {#                  </div>#}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+
+    </div>
+
+</div>
+
+<!-- Bootstrap core JavaScript-->
+<script src="{% static 'FirstApp/vendor/jquery/jquery.min.js' %}"></script>
+<script src="{% static 'FirstApp/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
+
+<!-- Core plugin JavaScript-->
+<script src="{% static 'FirstApp/vendor/jquery-easing/jquery.easing.min.js' %}"></script>
+
+<!-- Custom scripts for all pages-->
+<script src="{% static 'FirstApp/js/sb-admin-2.min.js' %}"></script>
+
+</body>
+
+</html>

FirstApp/templates/FirstApp/register.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="">
+  <meta name="author" content="">
+
+  <title>SB Admin 2 - Register</title>
+  {% load static %}
+  <link href="{% static 'FirstApp/vendor/fontawesome-free/css/all.min.css' %}" rel="stylesheet" type="text/css">
+  <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
+  <link href="{% static 'FirstApp/css/sb-admin-2.min.css' %}" rel="stylesheet">
+
+</head>
+
+<body class="bg-gradient-primary">
+
+  <script type="text/javascript">
+    function insert() {
+      fetch('http://127.0.0.1:8000/register/', {
+        method: 'POST',
+        headers: {
+          "Content-type": "application/json"
+        },
+        body: JSON.stringify({
+          "firstName": document.getElementById('exampleFirstName').value,
+          "lastName": document.getElementById('exampleLastName').value,
+          "email": document.getElementById('exampleInputEmail').value,
+          "password": document.getElementById('exampleInputPassword').value
+        })
+      })
+      .then(resposne => resposne.json())
+      .then(json => {
+          if (json) {
+            alert('successfully inserted');
+          }
+        }
+      )
+    }
+  </script>
+
+  <div class="container">
+
+    <div class="card o-hidden border-0 shadow-lg my-5">
+      <div class="card-body p-0">
+        <!-- Nested Row within Card Body -->
+        <div class="row">
+          <div class="col-lg-5 d-none d-lg-block bg-register-image"></div>
+          <div class="col-lg-7">
+            <div class="p-5">
+              <div class="text-center">
+                <h1 class="h4 text-gray-900 mb-4">Create an Account!</h1>
+              </div>
+              <form action="#" class="user">
+                <div class="form-group row">
+                  <div class="col-sm-6 mb-3 mb-sm-0">
+                    <input type="text" class="form-control form-control-user" id="exampleFirstName" placeholder="First Name">
+                  </div>
+                  <div class="col-sm-6">
+                    <input type="text" class="form-control form-control-user" id="exampleLastName" placeholder="Last Name">
+                  </div>
+                </div>
+                <div class="form-group">
+                  <input type="email" class="form-control form-control-user" id="exampleInputEmail" placeholder="Email Address">
+                </div>
+                <div class="form-group row">
+                  <div class="col-sm-6 mb-3 mb-sm-0">
+                    <input type="password" class="form-control form-control-user" id="exampleInputPassword" placeholder="Password">
+                  </div>
+                  <div class="col-sm-6">
+                    <input type="password" class="form-control form-control-user" id="exampleRepeatPassword" placeholder="Repeat Password">
+                  </div>
+                </div>
+                <button type="submit" class="btn btn-primary btn-user btn-block" onclick="insert()">
+                  Register Account
+                </button>
+                <hr>
+                <a href="index.html" class="btn btn-google btn-user btn-block">
+                  <i class="fab fa-google fa-fw"></i> Register with Google
+                </a>
+                <a href="index.html" class="btn btn-facebook btn-user btn-block">
+                  <i class="fab fa-facebook-f fa-fw"></i> Register with Facebook
+                </a>
+              </form>
+              <hr>
+              <div class="text-center">
+                <a class="small" href="forgot-password.html">Forgot Password?</a>
+              </div>
+              <div class="text-center">
+                <a class="small" href="login.html">Already have an account? Login!</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+  <!-- Bootstrap core JavaScript-->
+  <script src="{% static 'FirstApp/vendor/jquery/jquery.js' %}"></script>
+  <script src="{% static 'FirstApp/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
+
+  <!-- Core plugin JavaScript-->
+  <script src="{% static 'FirstApp/vendor/jquery-easing/jquery.easing.min.js' %}"></script>
+
+  <!-- Custom scripts for all pages-->
+  <script src="{% static 'FirstApp/js/sb-admin-2.min.js' %}"></script>
+
+</body>
+
+</html>

FirstApp/templates/FirstApp/video.html

+{% extends 'FirstApp/template.html' %}
+<!DOCTYPE html>
+<html lang="en">
+<body id="page-top">
+    <!-- Page Wrapper -->
+
+  <div id="wrapper">
+    <!-- Sidebar -->
+
+    <!-- Content Wrapper -->
+    <div id="content-wrapper" class="d-flex flex-column">
+
+      <!-- Main Content -->
+      <div id="content">
+
+        <!-- Begin Page Content -->
+        {% block 'container-fluid' %}
+        <div class="container-fluid">
+          {% load static %}
+          <!-- Page Heading -->
+
+          <div class="d-sm-flex align-items-center justify-content-between mb-4">
+            <h1 class="h3 mb-0 text-gray-800">{{video_name}}</h1>
+            <a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="fas fa-download fa-sm text-white-50"></i> Generate Report</a>
+          </div>
+
+<!--          &lt;!&ndash; Content Row &ndash;&gt;-->
+          <div class="row">
+
+            <!-- Earnings (Monthly) Card Example -->
+            <div class="col-xl-12 col-md-6 mb-4">
+              <div class="card border-left-primary shadow h-100 py-2">
+                <div class="card-body">
+                  <div class="row">
+                    <div class="col-3">
+                      <video width="500" height="300" controls>
+                        <source src="{% static '' %}FirstApp/videos/{{video_name}}" type="video/mp4">
+                        Your browser does not support the video tag.
+                      </video>
+                    </div>
+
+                    <div class="col-3"></div>
+                    <!--progress bars-->
+<!--                    showing the percentage for each emotion-->
+                    <div class="col-6">
+                      <h2 class="big font-weight-bold">Emotion Detection</h2>
+                      <h4 class="small font-weight-bold">Anger
+                        <span class="float-right">{{meta.angry_perct}}%</span></h4>
+                      <div class="progress mb-4">
+                        <div class="progress-bar bg-danger" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
+                      </div>
+                      <h4 class="small font-weight-bold">Happy
+                        <span class="float-right">{{meta.happy_perct}}%</span></h4>
+                      <div class="progress mb-4">
+                        <div class="progress-bar bg-warning" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
+                      </div>
+                      <h4 class="small font-weight-bold">Sadness
+                        <span class="float-right">{{meta.sad_perct}}%</span></h4>
+                      <div class="progress mb-4">
+                        <div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
+                      </div>
+                      <h4 class="small font-weight-bold">Surprise
+                        <span class="float-right">{{meta.surprise_perct}}%</span></h4>
+                      <div class="progress mb-4">
+                        <div class="progress-bar bg-info" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
+                      </div>
+                      <h4 class="small font-weight-bold">Neutral
+                        <span class="float-right">{{meta.neutral_perct}}%</span></h4>
+                      <div class="progress">
+                        <div class="progress-bar bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+                      </div>
+
+                      <div class="form-control">
+                        <button type="button" id="test" data-target="#gif-body" data-toggle="modal">Test</button>
+                      </div>
+
+                    </div>
+
+                  </div>
+
+                  <div class="row">
+                    <h2 class="big font-weight-bold">Eye Gaze Estimation</h2>
+                  </div>
+
+                  <div class="row">
+                    <div class="col-6">
+                      <div class="progress">
+                        <div class="progress-bar bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+                      </div>
+                    </div>
+                  </div>
+
+                </div>
+              </div>
+            </div>
+
+          </div>
+
+        </div>
+        {% endblock %}
+        <!-- End of container-fluid -->
+
+      </div>
+      <!-- End of Main Content -->
+
+    </div>
+    <!-- End of Content Wrapper -->
+
+  </div>
+
+  {% block 'modal' %}
+    <div class="modal fade" id="gif-body" role="dialog" aria-labelledby="gif-body">
+      <div class="modal-dialog modal-lg" style="max-width: 1600px; max-height: 800px">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h2 class="modal-title">Processing....</h2>
+            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">×</span>
+            </button>
+          </div>
+
+          <div class="modal-body text-center">
+            <img src="{% static 'FirstApp/images/ajax-loader.gif' %}" width="200" height="500" alt="This is a GIF">
+            <h5>This might take few seconds...</h5>
+          </div>
+        </div>
+      </div>
+   </div>
+  {% endblock %}
+
+</body>
+</html>
\ No newline at end of file

FirstApp/tests.py

+from django.test import TestCase
+
+# Create your tests here.

LectureSummarizingApp/admin.py

+from django.contrib import admin
+
+# Register your models here.

LectureSummarizingApp/apps.py

+from django.apps import AppConfig
+
+
+class LecturesummarizingappConfig(AppConfig):
+    name = 'LectureSummarizingApp'

LectureSummarizingApp/models.py

+from django.db import models
+
+# Create your models here.