two website for tracking project: a demo system and a evaluation … · 2019. 10. 30. ·...

Two Website System for TrackingProject: a Demo system and a

Evaluation system

Tianyang Yu

A report submitted for the courseCOMP4560 Advanced Computing Project

Supervised by: Dr Liang zhengThe Australian National University

October 2019c© Tianyang Yu 2019

Except where otherwise indicated, this report is my own original work.

Tianyang Yu24 October 2019

Acknowledgments

I want to show my sincere gratitude to my supervisor and advisor Dr Liang Zheng,for his careful supervision of mine projection. I also want to express my thanks to DrYunzhong Hou, who provide a lot of evaluation and ideas with me and he also leadsme to understand tracking technology.

I want to extend my thanks to Ms Yue Su for her patiently explaining and describ-ing the details of JS code and Jquery code. I would also express out my appreciationto Mr Yuchi Liu, who introduce the Django for me and give me much advice to builda website based on Django.

iii

Abstract

For Multi-Target, Multi-Camera tracking project, the result usually is several sets oftracking data. And for majorities of people, it is hard to understand the meaning ofthese data, because people cannot directly locate the target without any reference onthe scream based on a line of data only. And it is also extremely hard for people tolocate the same target in different videos at the same time directly. Therefore, we aimto build a demo to solve these problems.

Tracking project can return the targets’ location information as a result, while itwould be hard to directly judge whether the location information point to the aimedtarget only based on a line of tracking data because people do not know the widthand height of the video. If the location information can be shown in the videos as abounding box, we can directly judge the performance of the tracking algorithm basedon whether the bounding box has included the target.

Multi-Target, Multi-Camera tracking project aims to locate several targets in sev-eral videos from multi-camera. Therefore, there may be several targets at the sametime. And it would be hard for people to check whether the algorithm can tell thesetargets only by several lines of tracking data. We can write the target id on the bond-ing boxes. Therefore, we can directly judge the performance of the algorithm basedon whether the bounding boxes’ id kept the same as before.

Multi-Camera tracking project includes several videos information. Therefore,signing the same target in different videos at the same time can help people locatethe target in different videos in a short time.

We also build an online evaluation website, which can be used to hold somecompetitions about tracking. The website allows people to submit result le to judgethe performance by the online evaluation system. People also can download the pastresult, which has submitted before. The website provides a ranking page to show theperformance of everyone’s algorithm.

v

Contents

Acknowledgments iii

Abstract v

1 Introduction 11.1 Problem Statement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11.2 Motivations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11.3 Project Scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.4 Contribution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.5 Report Outline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

2 Background and Related Work 52.1 Background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52.2 Related Work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

2.2.1 Target Object Detection . . . . . . . . . . . . . . . . . . . . . . . . 62.2.2 Multi-Target, Multi-Camera Tracking . . . . . . . . . . . . . . . . 62.2.3 Rebuild Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62.2.4 Asynchronous Network Request . . . . . . . . . . . . . . . . . . . 7

2.3 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

3 Design and Implementation 93.1 Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

3.1.1 Design for Tracking Demo . . . . . . . . . . . . . . . . . . . . . . 93.1.2 Design for Evaluation Website . . . . . . . . . . . . . . . . . . . . 12

3.2 Implementation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153.2.1 Initial Evaluation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163.2.2 Hold Competition . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

3.3 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

4 Experimental Methodology 194.1 Rebuild Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

4.1.1 ’HR’ Label in HTML . . . . . . . . . . . . . . . . . . . . . . . . . . 194.1.2 ’Canvas’ Label in HTML . . . . . . . . . . . . . . . . . . . . . . . . 19

4.2 E-mail Verification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204.2.1 Verification Information Table Structure . . . . . . . . . . . . . . . 204.2.2 Confirming the Account by Link . . . . . . . . . . . . . . . . . . . 21

4.3 Management Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

vii

viii Contents

4.3.1 Enable and Create Administrator . . . . . . . . . . . . . . . . . . 214.3.2 Introduction of Manage Model . . . . . . . . . . . . . . . . . . . . 22

4.4 Password Encryption . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

5 Results 255.1 Evaluation System . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

5.1.1 Web Page Display . . . . . . . . . . . . . . . . . . . . . . . . . . . 255.1.2 Quality of the Evaluation System . . . . . . . . . . . . . . . . . . 28

5.2 Demo System . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285.2.1 Web Page Display . . . . . . . . . . . . . . . . . . . . . . . . . . . 285.2.2 Quality of the Demo system . . . . . . . . . . . . . . . . . . . . . 29

6 Conclusion 316.1 Future Work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

Bibliography 33

Appendix 1: Project Description 35.1 Project Title . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35.2 Project Description . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35.3 Leaning Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

Appendix 2: Project Contract 37

Appendix 3: Description of software and artefacts produced 41.4 Evaluation System . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41.5 Demo System . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

Appendix 4: README 45.6 Evolution System . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45.7 Demo System . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

List of Figures

3.1 The UI design for the demo system . . . . . . . . . . . . . . . . . . . . . 123.2 The login page’s UI design . . . . . . . . . . . . . . . . . . . . . . . . . . 133.3 The index page’s UI design . . . . . . . . . . . . . . . . . . . . . . . . . . 143.4 The submission page’s UI design . . . . . . . . . . . . . . . . . . . . . . . 14

4.1 rebuild video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204.2 verification code link . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214.3 get the verification code from the URL . . . . . . . . . . . . . . . . . . . . 214.4 enable the admin insetting . . . . . . . . . . . . . . . . . . . . . . . . . . . 224.5 create the administrator account . . . . . . . . . . . . . . . . . . . . . . . 224.6 introduction of the manage model . . . . . . . . . . . . . . . . . . . . . . 23

5.1 Home page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255.2 the navigation bar after login . . . . . . . . . . . . . . . . . . . . . . . . . 265.3 register page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265.4 confirmation email . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265.5 login page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275.6 question page and ranking board . . . . . . . . . . . . . . . . . . . . . . . 275.7 submission page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275.8 sign the target object in the view . . . . . . . . . . . . . . . . . . . . . . . 28

1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

ix

x LIST OF FIGURES

List of Tables

3.1 Tracking Result Data Structure . . . . . . . . . . . . . . . . . . . . . . . . 103.2 The Forms and List for Tracking Demo . . . . . . . . . . . . . . . . . . . 113.3 User Information Table Structure . . . . . . . . . . . . . . . . . . . . . . . 153.4 Submission Information Table Structure . . . . . . . . . . . . . . . . . . . 153.5 Ranking Table Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

4.1 Verification Information Table Structure . . . . . . . . . . . . . . . . . . . 20

xi

xii LIST OF TABLES

Chapter 1

Introduction

This chapter provides the introduction of the project. The problems of the projectare stated in section 1.1. The motivation of the project will be introduced in section1.2. Section 1.3 and section 1.4 will describe the project scope and contribution of theproject. Section 1.5 is the resulting outline.

1.1 Problem Statement

In this project, we intend to develop a visible and interactive demo system for Multi-Target, Multi-Camera tracking project to help the user further understand the per-formance of the Multi-Target, Multi-Camera tracking system. We will transfer thetracking data from the Multi-Target, Multi-Camera tracking system into boundingboxes in videos, and sign the target on the map to improve the visibility of the per-formance of the Multi-Target, Multi-Camera tracking system. People also can findtargets in different videos by clicking the target in one of the videos, so that peoplewould be easy to find the targets in different videos instead of losing target.

We also developed an evaluation website to hold a competition. In this website,the participant should register and log in to this website, and then they can submittheir output in submission pages. After submitting, the system can judge the outputautomatically and show their rank on rank board. Participants can download theirpast output on the submission page.

1.2 Motivations

We usually judge a system based on the performance of the system. While for TheMulti-Target, Multi-Camera tracking system, it usually uses faster-RCNN to selectthe potential targets in a frame, and then associate the same target in different framesbased on location information, the appearance of the target and time information ofthe frames. After these, we can get a series of tracking data, which include locationinformation, time information of frames and targets’ id. Therefore, we should judgethe system’s performance according to these output data, while for every line oftracking data, it includes too many information, it would be very hard for people toquickly and directly understand the meanings for every number. Thus we decided

1

2 Introduction

to represent the location information as the bounding boxes surrounding the targetwhen the video is playing to help people quickly and directly understand the trackingdata. As for the targets’ id information, it can be represented as the different coloursof the bonding boxes because image information and video information are easierfor people to understand than digital information. The Multi-Target, Multi-Cameratracking system usually will have more than two videos. Therefore, people needto find the same target in different videos, while people will lose the target whenfinding the target in different videos because some targets only appear in one videofor several seconds. To help people find the aim target in different videos in a shorttime, we sign the target, which people selected, in different videos at the same time.

If we hold a competition about tracking project, en evaluation website wouldbe necessary for organisers. As for the website, firstly, it should be able to allowparticipants to submit their output. Secondly, the website should be able to judgethe output based on the ground truth, which provided by competition organisers.Some times participants would want to compare their output with the past output.Therefore, the website should store the several most recent submission for participantsdownloading them.

1.3 Project Scope

In this project, website techniques are used to design a tracking demo website. Asthe output result of the Multi-Target, Multi-Camera tracking system always is a seriesof location information, time information and targets’ ID, and we should representthem in an easy to understand way. Therefore, a visible and interactive demo websiteis developed to help people to understand the result of the tracking system and judgethe performance of the tracking system.

To hold some competition about tracking project, an evaluation website, whichlike ’Kaggle’, is necessary for the competition holder. While many elements can bethe judge to evaluate the performance of the tracking project, the evaluation websiteshould consider all of these elements to produce the final rank.

1.4 Contribution

This project makes contributions in the following aspects:

(i) We developed a visible and interactive demo for the Multi-Target, Multi-Cameratracking project to show the performance of the tracking system.

(ii) We developed an evaluation website provided for holding competition abouttracking project.

§1.5 Report Outline 3

1.5 Report Outline

There are six main Chapters in this report. Chapter 1 gives a basic introduction tothese projects, which introduces the motivation of the project and the problems thatthe project focused on. Chapter 2 provides information about the background andthe related works of the problems and technology, which are included in the project.Chapter 3 illustrates the details of the design and approaches applied in the demowebsite. Chapter 4 describes the experimental methodology during the developmentof the project. Chapter 5 show the result of the project, which is the dome websiteand the evaluation website. Chapter 6 gives the future work for the project andconcludes.

4 Introduction

Chapter 2

Background and Related Work

2.1 Background

Tracking technology is widely used in tracing target objects from videos. Extractingthe objects from the picture and selecting the target object from these objects is thefirst challenge for tracking technology. Video can be regarded as a series of pictures,which are ordered by a certain order. The second step for tracking technology isassociated with the same target object from the different pictures, which are thedifferent frames of the video, based on the appearance of the target object. Afterthat, the target object can be tracked in one video. In this project, the Multi-Cameratracking system will use several cameras to take videos for the same location, whichcan be a campus, a crossroad and so on. The directions of cameras may be the same ordifferent. Therefore, we should associate the target objects in different videos basedon the apparent similarity of the target object, time information and the locationinformation. As for the output of the system, it usually is a series of lines of data.Understanding the meaning of the lines of data is a common challenge for judgingthe performance of the tracking system, especially to those who do not know the dataset ones.

Although, there are ’readme’ file for the data set to help people understand thedata set, and there is accuracy, mean average precision (mAP) for the tracking systemto help people judge the system, people still cannot directly see how the trackingsystem work and what is the tracking system’s performance. Therefore, the trackingsystem needs a visible and interactive demo system to transfer these data to thebounding boxes with a different colour on the video.

Because of the development of the tracking technology, and evaluation websiteis needed for holding competitions for tracking technology. Although there aremany evaluation websites, while we still should design the special rank board for theevaluation result

2.2 Related Work

In this section, we will introduce some background knowledge relate to this project.

5

6 Background and Related Work

2.2.1 Target Object Detection

Techniques [Viola et al., 2001; Dalal and Triggs, 2005; Girshick et al., 2012, 2014; Renet al., 2015] for detecting the target objects from pictures have been developed theseyears. From the cascading classifier framework [Viola et al., 2001] to faster RCNN [Renet al., 2015], we apply the neural networks into objects detection fields, comparingwith the traditional objects detection method, object detection method based on theneural network can provide results with better precision and recall, although it willspend more time on calculating the results.

In this project, the tracking system mainly using the faster RCNN to detect theobject. As for faster RCNN, firstly, it applies the RPN (Region Proposal Network) [Renet al., 2015; Li et al., 2018] to select several region proposals, then we classify regionproposals. This method has two steps, and it also can be regarded as a ’two-stage’method of object detection. Selecting region proposal can reduce the number ofregions, which need to be classified so that it improved the speed of the faster RCNNand the result kept a high precision and recall.

2.2.2 Multi-Target, Multi-Camera Tracking

In our project, the tracking method [Ristani et al., 2016; Zhang et al., 2017b] usingseveral cameras to track multi targets. Comparing with the single-camera trackingtechnology, multi-cameras can provide more information because we can see objectsfrom different directions and extract the objects’ location information from othercameras when the objects are hidden. Therefore, according to these views from adifferent direction, the tracking system will not easily lose the target object when thetarget hidden by other things.

As for the Multi-Target, Multi-camera tracking system, it mainly process thefollowing steps,

(i) Detection

(ii) Feature Extraction

(iii) Single camera tracking

(iv) Multi-camera tracking

Firstly, it will apply the detection method to extract the target objects to form thevideos. Then the re-identification model [Zheng et al., 2015; Zhang et al., 2017b,a] willbe used to extract target objects’ feature. Thirdly, we should associate the neighbourbounding boxes and then create trajectories based on these associated bonding boxes.At last, these trajectories will be combined based on a hierarchical clustering withoutdistance matrix updating.

2.2.3 Rebuild Video

In our project, we want to build a demo system, which users can interact with.Therefore, the demo system’s videos cannot just only play the mp3 files. The video

§2.3 Summary 7

should be able to reply to the users’ operation. Thus we should rebuild the videos.The Technique [Mowery and Shacham, 2012] of running WebGL based on HTML5can achieve draw pictures on the web quickly. Therefore, we apply this technique torebuild the demo videos to reply to the users’ operation.

2.2.4 Asynchronous Network Request

For dealing with a request on the website, the process of the website will stop untilthe request has been solved. Because of the website stop, we usually will see that thewebsite will be refreshed. Thus the user experience will be greatly reduced. Whilethe Asynchronous network request [Jin, 2007] can solve this question. Asynchronousrequest can be dealing with when the server runs the website process, that means thewebsites do not need a refresh after submitting requests.

2.3 Summary

The background of our project and some techniques, which are used in our project, areintroduced in this chapter. Detection techniques, tracking method, videos approachand asynchronous network request all described in this chapter. In the next chapter,we will introduce the design and structure for these two websites.

8 Background and Related Work

Chapter 3

Design and Implementation

In section 3.1, the rationale of the concept design for this project is introduced. Thesubsection 3.1.1 describe all design for the demo system, and the subsection 3.1.2introduce the design for the evaluation website. The implementation method isintroduced in section 3.2. Subsection 3.2.1 describes the method applied in the demosystem, and the implementation method for evaluation website is introduced insubsection 3.2.2.

3.1 Design

3.1.1 Design for Tracking Demo

The design for the tracking demo system can be divided into three parts, which areUI design, data structure design and request method design. Before introducingthe design for the tracking demo system, the data set, which used in the demo, isdescribed firstly.

Data Structure Design

For the demo system, it will use the result data of the tracking system. As forthis project, we use the result tracking data for ’S01’ of ’AICityChallenge’ dataset [Naphade et al., 2017]. For this data set, it has five cameras, which means we willhave five videos and five groups of tracking information for each video. And for theresult tracking data, the structure is shown in table 3.1.

Because when people select an object, the demo system should find this object inall videos; therefore, we also should design two forms to transfer information betweenthe front end and the back end. As for the first form, which transfers the informationfrom the front end to back end, in this part, the demo system will detect the objectand find the object’s ID based on the location information in video, therefore, the firstform should include the object’s location information and time information, which isframe value, and the form shown in table 3.2(a). As for the second form, it is usedto transfer a list of location information for each video. Therefore, the form shouldinclude a list, which should include a group of location information and a frame

9

10 Design and Implementation

Data Name Data Type Explanation

frame int It records the time information, showing the following lo-cation information belonging to which frame in the video.

ID int It is the target’s ID.

Left Pixel It shows the distance between the left side of the bondingbox and the left side of the video frame.

Top Pixel It shows the distance between the up side of the bondingbox and the top of the video frame.

Width Pixel It shows the width of the bonding box.

Height Pixel It shows the height of the bonding box.

X meter It shows the horizontal coordinate in map of the targetobject.

Y meter It shows the vertical coordinates in map of the target ob-ject.

Table 3.1: Tracking Result Data Structure

value. The form is shown in table 3.2(b), and the list structure is shown in table3.2(c).

UI Design

Because this project is aimed to build an interactive and visible demo system, There-fore, the UI design becomes very important for the whole project. For this project, thedemo system includes several videos and these videos should be controlled together,which means these videos will play together and stop together. Therefore, we shoulddivide the video player into two parts, video area and control area. One group ofcontrol components, which is in the control area, can control the playback, pause andstop of several videos in the video area. For every video in the video area, mouseclick operation is available to select objects in each video. After selecting the targetobject, the demo system will compute the location information to find the object inother video and sign the object’s location on the map. Therefore, we also need a maparea to show the object’s location information. After the above consideration aboutthe demo features, we conclude that the demo system needs three areas, video areas,control area and map areas. And the main operations are in the videos area, andpeople should find the objects in videos. Therefore, the video area should be locatedin the centre of the website. The conceptual UI design figure for the demo system isshown in Figure 3.1.

§3.1 Design 11


frame int It records the time information, showing the follow-ing location information belonging to which framein the video.

Left Pixel It shows the distance between the left side of thebonding box and the left side of the video frame.

Top Pixel It shows the distance between the up side of thebonding box and the top of the video frame.



(a) The First Form Structure


BondboxList list It stores the target object’s location data in the restof the video.

(b) The Second Form Structure


frame int It records the time information, showing the follow-ing location information belonging to which framein the video.

Left Pixel It shows the distance between the left side of thebonding box and the left side of the video frame.

Top Pixel It shows the distance between the up side of thebonding box and the top of the video frame.



(c) The List Structure

Table 3.2: The Forms and List for Tracking Demo


Figure 3.1: The UI design for the demo system

Request Method Design

Considering the processing of the demo system, after people clicking the objects,the system will transfer the location information from the front end to back end.Therefore, the front end should send request, which includes the location information,to the back end. While if we use the normal request to send information, the mainprocess will stop until the back end replied to the request. Thus the videos on thewebsite will stop working, and it will seriously influence the people’s user experience.The asynchronous network request provides the best approach to solve this problem.Asynchronous network request can divide the process into two parts, and provide apart of the process with sending a request. Thus the website will not stop working.

3.1.2 Design for Evaluation Website

The design for the evaluation website also can be divided into three parts, which is UIand website design, database design and request form structure design. The UI andwebsite design are mainly introducing the interaction and components layout for theevaluation website. The database design is mainly describing the database structure,which will be used to store data on the website. As for the request form structuredesign, it introduces the data structure, which used to transfer data between differentfeature.

§3.1 Design 13

Figure 3.2: The login page’s UI design

UI and Website Design

Before designing the UI, the use case and interaction should be fully analysed, sothat the layout of each page for the websites can be decided and then we can startdesigning the UI.

As for this evaluation website, it may be used to hold some competitions abouttracking project. Therefore, this website should have a login page, submission pages,question pages and an index page. For the login page, it should require the logincomponent and register component. After people log in the website, the page willturn to the index page. In the index page, it has many links, which connect withquestion pages. While in each question page, it has a link, which connects withthe submission page, and in the question page, it has a rank board showing theentrant’s ranking for the question. As for the submission page, it needs a submissioncomponent and an evaluation component.

The figure 3.2 shows the conceptual design for the login page. According to thefigure, there is two buttons on this page. If the people have created an account, afterfilling the username and password, they can directly log into the website. Otherwise,they should click the Register button to create an account and then log into thewebsite.

The figure 3.3 is the conceptual UI design for the index page. Because the indexpage usually is the home page for a website and users can easily go to other pagesbased on links in the index page. Therefore, a navigation bar is raised to solve thisproblem. The ’index page’ button can link to the index page. And the ’question page’is a drop-down menu, users can find question menu in it. The orange area in figure3.3 is a content area, which can show some introduction information and news about


Figure 3.3: The index page’s UI design

Figure 3.4: The submission page’s UI design

this website.

The question page is added a ranking board and a submission button based onthe index page. The question can be shown in the orange area in the conceptualdesign in figure 3.3.

The figure 3.4 shows the basic design for the submission page. It can be dividedinto three parts, navigation bar, download part and submit part. The navigation baris the same as that in the index page. The download part provides users with thefile download link for the last five submissions. As for the submission part, userscan click the ’select file’ button to choose the target file and click the ’submit’ buttonto finish the submission task. After submitting, the website will turn to the rankingboard in question page and show the grade for this submission.

§3.2 Implementation 15


username charfield It is the primary key in this table, the user-name is unique for every user.

name charfield It is the name of the user in real world. Itis possible that there are two users have thesame the name.

password charfield It is the password used to login the website.

email charfield The email will be used to confirm the account.

c-time datatimefield It is automatically recorded by the website,and it will be used to mange accounts.

has-confirmed booleanfield It is record whether the account has con-firmed.

Table 3.3: User Information Table Structure


docfile filefield After user submitting the file, the databasewill only store the file path, and the websitefind the file depend on the file path.

c-time datatimefield It is the file upload time, an it will be recordautomatically by website.

user foreignkey It is the foreign key, which is used to connectwith user table.

Table 3.4: Submission Information Table Structure

Database Design

This project has only one database, which includes mainly three tables, to satisfy theuse cases, which analysed before. According to the functions for the different pages,the tables can be designed as user table, submission table and ranking table.

As for the user table, after users register on the website, the evaluation websiteshould store the basic user information. Therefore, the first table should store thebasic user information, and the detail is introduced in the table 3.3.

For every submission, the website needs a table to record this submission infor-mation. The detail for the submission table is shown in table 3.4.

The table 3.5 shows the detail about the ranking table. After the user submittingfiles, the website will record the result of the evaluation into the ranking table.

3.2 Implementation

For this project, the tracking demo system is aimed to transfer hundreds of linesof digital data into a visible and interactive video demo system, and the evaluation




at1 boolean It describes whether the first result matchedwith the ground truth.

at5 boolean It describes whether the first five resultsmatched with the ground truth.

at10 boolean It describes whether the first ten resultsmatched with the ground truth.

mAP floatfiled It is the mean average precision of the result.

rank integerfiled It is the rank of the user in the the whole com-petitors.

Table 3.5: Ranking Table Structure

website can provide a competition website and evaluation system for competitionorganisers.

3.2.1 Initial Evaluation

Tracking technology is applied to find the target object and follow its route in thevideo. Therefore, we can directly initial evaluate the performance of a tracking systemby our eyes. While the output of the tracking system is a series of numbers, therefore,people can rely on the tracking demo system to transfer the number into a bondingbox in the videos. Then people can judge the performance of the tracking systemby whether the bounding box can follow the target object and whether the id of thetarget object changed. If the bounding box cannot follow the target object, it meansthe system will miss the target object. If the colour of the bonding box changed, itmeans the system regarded the target object as the other object. Although it is animprecise way of judging, while it can judge the performance of the tracking systemwithout any other ground truth, therefore, it also can be used to judge and check theground truth.

3.2.2 Hold Competition

Because the evaluation website has a register function and login function, this websitecan be used to hold a competition. The competition organisers could fill the competi-tion introduction into the content area in the index page, which is the orange area infigure 3.3. The problem description can be filled into the content area in a questionpage, and the ranking board can show the competition ranking. After competitorssubmitted their result, the page will turn to the question page, and they can see theirranking immediately.

§3.3 Summary 17

3.3 Summary

In this chapter, we introduce the UI design and database structure design for thetracking demo system and evaluation website and their implementations. As for thedesign for tracking demo system and evaluation website, we analyse the use case fortracking demo system and evaluation website. Then we describe the layout of theweb pages and the explain reason we design them in this way. In chapter 3.2, weintroduce the implementation for these two systems.

Chapter 4

Experimental Methodology

4.1 Rebuild Video

For the tracking demo system, the most difficult part is rebuilt these videos. Accord-ing to the tracking data, the rebuilt videos should be added bounding boxes basedon the initial videos.

4.1.1 ’HR’ Label in HTML

Because the bounding boxes can be regarded as four lines, therefore, we can use the’HR’ label in HTML, and the ’HR’ label can use the location data of the boundingboxes, which are transferred from the back end. Changing the colour attribute ofthe ’HR’ label can easily change the colour of the bounding boxes. After drawingbounding boxes, we should move the bounding box to keep following the target object.Therefore, we will use the ’animation’ attribute of the ’HR’ label to create an animationto move the bounding box. The ’animation’ attribute can automatically create thetransition animation between two frames. After finished the moving bonding boxes,we should add the initial video, in HTML, we can use the ’video’ label to play theinitial videos.

While trying combining the bonding boxes and initial videos, we find the ’HR’label can cover on the ’video’ label, which means the these two parts can be combined.Therefore, the ’HR’ label cannot be used to rebuild videos.

4.1.2 ’Canvas’ Label in HTML

The ’Canvas’ label can create a canvas on a certain area on the scream and then wecan draw anything on it. If we refresh the canvas in a very short time, the static imagewill become an animation.

The figure 4.1 shows the code of drawing the initial video. To rebuild the videos,we use the ’setInterval’ to refresh the canvas for a certain time to create an animation.In the figure 4.1, we set the second attribute, which is refresh rate, like 1, whichmeans the canvas will refresh for every frame. And the content, what we need todraw, should be set in the first attribute of the ’setInterval’. Before drawing video oncanvas, we should play the video, and then we can extract the image form the video

19

20 Experimental Methodology

1 video.play();2 timer = setInterval(function(){3 ctx.drawImage(video, 0, 0, canvas.width, canvas.height);//draw the

video4 },1);

Figure 4.1: rebuild video



code charfiled It is an uniue code for every user.

c-time datetimefield It is automatically recorded by the website.

Table 4.1: Verification Information Table Structure

in every frame. After obtaining the image in the video, we can rebuild the imagein canvas in the corresponding frame. After that, we successfully move the video tothe canvas. As for the bonding box part, we should add the drawing bonding boxcode bellow the drawing video image code. Because the order in which the code isadded is related to the order of the layers. Because we draw the bounding box afterthe video, therefore, the bounding boxes are shown on the videos layer.

Because the canvas does not have ’mouse-click’ function, therefore, we need toadd a mouse event listener to get the location information and time information,where the mouse click.

4.2 E-mail Verification

For the evaluation website, we should add an account verification to ensure that allusers are not robots and users can receive the email in this mailbox.

4.2.1 Verification Information Table Structure

To verify the e-mail, we should send an email with a unique code to every user’smailbox. And if the user can reply the code, we can sure that the mailbox is available.Therefore, we should build a new table like table 4.1 to store the verification key.If the key returned from the user is the same as the verification key in the verifica-tion information table, we can ensure that the account can be confirmed. After theaccount confirmed, we will delete the account’s information in verification informa-tion table, because the verification information will only be used to confirmed theaccount. Therefore, deleting the users’ verification information, whose account hasbeen confirmed, can simplify the database and reduce the useless data.

§4.3 Management Model 21

1 ’’’<p><a␣href="http://{}/confirm/?code={}"␣target=blank>www.trackingevaluation.com</a></p>

2 ␣␣␣␣␣␣␣␣’’’.format(’127.0.0.1:8000’, code)

Figure 4.2: verification code link

1 code = request.GET.get(’code’, None)

Figure 4.3: get the verification code from the URL

4.2.2 Confirming the Account by Link

The other problem of account verification is the method that users return the verifi-cation key. If the users inputted their verification key by themselves, it would be toocomplex for users. Therefore, we think we can send a link in the email, and userscan only click the link to send the verification key to the website and complete theaccount verification.

The first step for sending an email with a link is to prepare a link. As for thelink, it should include the URL of the website and the information, which can makethe website recognise the user’s verification code. In the figure 4.2, this code showsthe detail of the structure of the link. First, we use an ’a’ label to edit an URL,which means put an URL into a sentence. Thus user also cannot see the complexverification code. In the figure 4.2 we put an URL into ’www.trackingevaluation.com’,and the real URL is ’http:///confirm/?code=’. In the first bracket, it includes themain URL of the website, because the link is tested in the local. Therefore, the URL is’127.0.0.1:8000’. The second bracket includes the verification code. Thus, after usersclick the link, the website can automatically get the URL with a verification code.After that, we can use the code in figure 4.3 to extract the verification code from theURL. And then after check the verification code, the confirming account has finished.

4.3 Management Model

4.3.1 Enable and Create Administrator

For any website, the administrator is given a super right to manage the website, andthey can repair the data, which is not logical and, or delete some useless data, whichno one can delete. Therefore, an administrator is necessary for a website to keep thedata safe. For the evaluation website, we build it in Django environment, which is astructure developed in python. It has an administrator interface, which can help usto build the administrator easily.

Firstly, we should enable the admin part in setting.py, which will automaticallybe created by Django. Adding ’django.contrib.admin’ and ’django.contrib.sessions’These two sentence into the ’INSTALLED APPS’, which is an attribute of the website.After enabling the admin, the website will automatically create the admin page based


1 INSTALLED_APPS = [2 ’django.contrib.admin’,3 ’django.contrib.auth’,4 ’django.contrib.contenttypes’,5 ’django.contrib.sessions’,6 ’django.contrib.messages’,7 ’django.contrib.staticfiles’,8 ’login’,9 ]

Figure 4.4: enable the admin insetting

1 python manage.py createsuperuser

Figure 4.5: create the administrator account

on the database, which we have created.After enabled the admin page, we should create the administrator account. After

inputting the code in figure 4.5 in the terminal and filling a series of questions in theterminal, we can get an administrator account.

4.3.2 Introduction of Manage Model

When we log into the administrator account, we can see a list of tables, which like thelist in figure 4.6(a). These tables correspond to the tables in our database. After weclick into one of the tables, we can find another list of objects, which are the elementsin this table. The detail of the object can be shown after clicking into the object in theadministrator page. After that, we can see a page like figure 4.6(b). Every attributeof the object is shown as a suitable format based on the type of the attribute. As anadministrator, we can change any value of the attributes to keep the website avoidingbugs.

4.4 Password Encryption

If we directly save the users’ password into the database, it would be quite unsafe.Therefore, we should encrypt the password before we store the password.

In this project, we use the hash map function as the Password encryption method.Therefore, we can see a group of mass words in the database, instead of the realpassword.

§4.4 Password Encryption 23

(a) The first page of the manage model

(b) The second page of the manage model

Figure 4.6: introduction of the manage model

Chapter 5

Results

The evaluation system has been public tested for one month, and we change andimprove the website a lot based on the suggestion which users raised during testing.And the demo system is not tested yet, during development for the demo system, wefind there are many parts that need to be improved.

5.1 Evaluation System

5.1.1 Web Page Display

The figure 5.1 show the home page of the evaluation system. There is a navigationbar on the top of the web page. There is a button on the most left of the navigationbar, and this button is a link returning to the home page. There is five buttons inthe middle of the navigation bar, and it can link to the corresponding page. The’challenge’ button is a drop-down menu, which can include many ’track’ pages. Themost right of the navigation bar is the ’login’ button and ’register’ button.

The introduction and description of the website can be filled in the content area,which is under the navigation bar.

After we log in to the website, the navigation bar would change a little, which isshown in figure 5.2. The most right of the navigation bar would become a state area,it shows the account that the user is currently logged in to. The ’logout’ is near thestate button.

The figure 5.3 shows the register page. After user register in our website, thee-mail, which they use to register, will receive a confirmation email, which is shown

Figure 5.1: Home page

25

26 Results

Figure 5.2: the navigation bar after login

Figure 5.3: register page

Figure 5.4: confirmation email

§5.1 Evaluation System 27

Figure 5.5: login page

Figure 5.6: question page and ranking board

in figure 5.4. After users click the confirmation link, the website will automaticallyreturn to the home page, and the navigation bar will show that the user has a login.

The figure 5.5 shows the login page. There is a ’forgot password’ button, which isprovided with user forgot their password. After the user clicks the ’forgot password’button, the website will request users’ email, and then the email will receive a confir-mation email. Users can click the link in the email to re-register a new account anddelete the account before.

The figure 5.6 show the question page and the ranking board, the ’submit’ buttonabove the ranking board can link to the submission page, which is shown in figure5.7. Because the system of the computer, which we use to test, is the Chinese system,therefore, the word of the select file is shown as Chinese.

Figure 5.7: submission page

28 Results

Figure 5.8: sign the target object in the view

5.1.2 Quality of the Evaluation System

Although there is still some design can be improved, this evaluation system cansatisfy all requests of a competition about tracking project. We test this website inserver for a month; the website nearly kept working for a month and did not appearany bug during the test.

5.2 Demo System

5.2.1 Web Page Display

The web page of the demo could be divided into three-part, control component area,video area and map area. After the user clicking an object, which they choose in thevideo, there will be a red bonding box appeared surrounded the target object to markit. The performance is shown in the figure 5.8.

If the project has more than one video, all of the video will be displayed in thevideo area, and after user clicking an object in any one of these videos, there will beseveral red bonding boxes appeared to surround this target object in each video.

§5.2 Demo System 29

5.2.2 Quality of the Demo system

Up to the deadline for this project, the demo system has not tested online yet. Andthe function of locating the target object still has some bugs, so that the demo systemnot perfectly satisfy the requests. However, it achieved transfer the data to a visibleand interactive demo system. Therefore, we can improve the demo system in thefuture work to provide demo system, which has perfect user experience, with users.

30 Results

Chapter 6

Conclusion

This report aimed to introduce and describe these two websites, the evaluation systemfor tracking projects and the demo system.

To transfer the tracking data into a visible and interactive form, we decide to builda demo system based on interactive video technique. At the final, after user clickingthe target object in a video, our demo system can sign the object by bounding boxesin all videos, which has this object, to help users understand the performance of thetracking project.

The evaluation website includes submission, login, register and ranking board,which can support to hold any kinds of competition about tracking project. Afteronline testing for a month, we can sure it is nearly can be directly used to holdcompetition or as an evaluation website.

6.1 Future Work

As for the demo system, because of the low completion of the demo system, thus, inthe future, we should achieve the map function, and then we can add some functioninto the control component in the control area, for example dragging the videoprogress bar would improve the user experience.

As for the evaluation system, we can add a function about dynamically addingwebsite pages to help competition holders randomly decide the number of the com-petition question.

31

32 Conclusion

Bibliography

Dalal, N. and Triggs, B., 2005. Histograms of oriented gradients for human detec-tion. (cited on page 6)

Girshick, R.; Donahue, J.; Darrell, T.; and Malik, J., 2014. Rich feature hierarchiesfor accurate object detection and semantic segmentation. In Proceedings of the IEEEconference on computer vision and pattern recognition, 580–587. (cited on page 6)

Girshick, R. B.; Felzenszwalb, P. F.; and McAllester, D., 2012. Discriminativelytrained deformable part models, release 5. (2012). (cited on page 6)

Jin, L., 2007. System and method for asynchronous request response. US Patent App.11/330,309. (cited on page 7)

Li, B.; Yan, J.; Wu, W.; Zhu, Z.; and Hu, X., 2018. High performance visual trackingwith siamese region proposal network. In Proceedings of the IEEE Conference onComputer Vision and Pattern Recognition, 8971–8980. (cited on page 6)

Mowery, K. and Shacham, H., 2012. Pixel perfect: Fingerprinting canvas in html5.Proceedings of W2SP, (2012), 1–12. (cited on page 7)

Naphade, M.; Anastasiu, D. C.; Sharma, A.; Jagrlamudi, V.; Jeon, H.; Liu, K.;Chang, M.-C.; Lyu, S.; and Gao, Z., 2017. The nvidia ai city challenge. In 2017IEEE SmartWorld, Ubiquitous Intelligence & Computing, Advanced & Trusted Computed,Scalable Computing & Communications, Cloud & Big Data Computing, Internet of Peopleand Smart City Innovation (SmartWorld/SCALCOM/UIC/ATC/CBDCom/IOP/SCI), 1–6.IEEE. (cited on page 9)

Ren, S.; He, K.; Girshick, R.; and Sun, J., 2015. Faster r-cnn: Towards real-timeobject detection with region proposal networks. In Advances in neural informationprocessing systems, 91–99. (cited on page 6)

Ristani, E.; Solera, F.; Zou, R.; Cucchiara, R.; and Tomasi, C., 2016. Perfor-mance measures and a data set for multi-target, multi-camera tracking. In EuropeanConference on Computer Vision, 17–35. Springer. (cited on page 6)

Viola, P.; Jones, M.; et al., 2001. Robust real-time object detection. Internationaljournal of computer vision, 4, 34-47 (2001), 4. (cited on page 6)

Zhang, X.; Luo, H.; Fan, X.; Xiang, W.; Sun, Y.; Xiao, Q.; Jiang, W.; Zhang, C.;and Sun, J., 2017a. Alignedreid: Surpassing human-level performance in personre-identification. arXiv preprint arXiv:1711.08184, (2017). (cited on page 6)

33

34 Bibliography

Zhang, Z.; Wu, J.; Zhang, X.; and Zhang, C., 2017b. Multi-target, multi-cameratracking by hierarchical clustering: Recent progress on dukemtmc project. arXivpreprint arXiv:1712.09531, (2017). (cited on page 6)

Zheng, L.; Shen, L.; Tian, L.; Wang, S.; Wang, J.; and Tian, Q., 2015. Scalable personre-identification: A benchmark. In Proceedings of the IEEE international conference oncomputer vision, 1116–1124. (cited on page 6)

Appendix

Appendix 1: Project Description

.1 Project Title

Two Website System for Tracking Project: a Demo system and a Evaluation system

.2 Project Description

This project includes two parts, demo system and evaluation system.As for the demo system, we want to overcome the problem that people cannot di-

rectly understand the meaning of the result of the tracking project, because the resultalways is thousands of lines of data. People are better at understanding graphicalinformation than digital information. Therefore, the demo system has been designedas a visible and interactive demo system based on the video technique.

For the evaluation system, because it should be able to hold a competition, there-fore, this website should include login component, register component, evaluationcomponent and submission component.

.3 Leaning Objects

(i) Understand the basic principles of tracking technology.

(ii) Familiar with java, jquery based website construction.

(iii) Familiar with the principle of request sending and the sending method ofasynchronous request.

(iv) Familiar with web development based on python, django framework.

35

36 Appendix 1: Project Description

Appendix

Appendix 2: Project Contract

37

38 Appendix 2: Project Contract

Research School of Computer Science Form updated Jun 2018

INDEPENDENT STUDY CONTRACT

PROJECTS Note: Enrolment is subject to approval by the course convenor

SECTION A (Students and Supervisors)

UniID: ______u6342594____

SURNAME: ______Yu__________ FIRST NAMES: ___________Tianyang___________

PROJECT SUPERVISOR (may be external): __________________Dr Zheng Liang_________________

FORMAL SUPERVISOR (if different, must be an RSSCS academic): __________ Dr Zheng Liang ___________

COURSE CODE, TITLE AND UNITS: _COMP4560, Advanced Computing Project, 12 units________

COMMENCING SEMESTER S1 S2 YEAR: _2019 Two-semester project (12u courses only):

PROJECT TITLE:

-demo for expression recognition using computer vision

LEARNING OBJECTIVES:

- Apply knowledge and implementation computer science skills to develop a demo for expression

recognition using computer vision

- Deepen knowledge of advanced computing principles by examining, designing, and test expression recognition

- Learn relevant project-related skills, including project management and oral and written communication,

and apply these to project work.

PROJECT DESCRIPTION:

This project will involve researching, designing and implementing computer science skills to develop a

demo for expression recognition using computer vision. The student will research the technology of

computer vision and Neural Networks in human face expression recognition. We will make a website which

can recognize the user’s face expression. This demo can only recognize some obvious expressions like crying,

laughing, smiling, etc., but not including some subtle expressions. During the design process of the website,

the student should consider about the users’ environment and improve the application of expression recognition

in website. During the project, we should achieve a human face expression recognition and make a

website. The final goal is to achieve human face expression recognition online.

40 Appendix 2: Project Contract

Appendix

Appendix 3: Description ofsoftware and artefacts produced

.4 Evaluation System

According to the figure 1, all ’html’ files about the web page layout are stored inthe ’templates’ package. All files about back end operation are stored in the ’login’package. The setting files are stored in the ’mct-rid-site’ package. The ’media’ packagestore the files, which users submitted. The ’static’ package includes all static materialabout the website.

Description of these files

(i) ’admin.py’ is the file about administrator window.

(ii) ’form.py’ sets the request form.

(iii) ’models.py’ stores the design of the database.

(iv) ’views.py’ stores all operation function.

(v) ’urls.py’ stores all urls link.

.5 Demo System

The demo system is built in java environment. According to the figure 2 and thefigure 3, the web page files are stored in ’templates’ package. The controller functionsand files are stored in ’controller’ package. All entity files are stored in ’entity’package.

41

42 Appendix 3: Description of software and artefacts produced

Figure 1

§.5 Demo System 43

Figure 2

Figure 3

44 Appendix 3: Description of software and artefacts produced

Appendix

Appendix 4: README

.6 Evolution System

This website should be run on Windows 10 using django package, validators packageand captcha package.

The evaluation website can be run using ‘mct_rid_site/manage.py runserver 8000’.

.7 Demo System

This website should be run in intellij, because we set a maven environment based onthe intellij.

45

two website for tracking project: a demo system and a evaluation … · 2019. 10. 30. ·...

Documents