-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·218 lines (203 loc) · 11.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<!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">
<meta name="description" content="Vision and Imaging science research">
<meta name="author" content="Team-23">
<title>Vision and Imaging Science</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- Custom CSS -->
<link href="css/stylish-portfolio.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target="#nav-scroll" >
<!-- Navigation -->
<nav class="navbar fixed-top navbar-expand-md navbar-dark bg-dark" id="nav-scroll">
<a class="navbar-brand js-scroll-trigger" href="#top">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Areas
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item js-scroll-trigger" href="#overview">Overview</a>
<a class="dropdown-item js-scroll-trigger" href="#face">Facial Recognition</a>
<a class="dropdown-item js-scroll-trigger" href="#3d">3D object Recognition</a>
<a class="dropdown-item js-scroll-trigger" href="#malaria">Malarial parasite</a>
<a class="dropdown-item js-scroll-trigger" href="#disease">Disease Progression Modelling</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">About Us</a>
</li>
</ul>
</div>
</nav>
<!-- Header -->
<header class="header" id="top">
<div class="text-vertical-center">
<h1>Vision and Imaging science</h1>
<h3>Allowing computers to "see"</h3>
<br>
<a href="#overview" class="btn btn-dark btn-lg js-scroll-trigger " style="-webkit-text-stroke: 0px #000;">Find Out More</a>
</div>
</header>
<!-- Services -->
<section id="overview" class="services bg-primary text-white">
<div class="container">
<div class="row">
<div class="col-lg-10 mx-auto">
<h1>What is Vision and Imaging Science?</h1>
<hr>
<p class="text-white">Vision and Imaging Science is the process of extracting useful information from images and videos. This has many applications in modern day life and is the basis behind things such as self driving cars, facial recognition and medical scans. <br>
The ultimate goal of this field is to allow computer systems to see and understand the world around them. This would greatly help other fields such as robotics and medicine.</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/YUaEPV7Qz1c?rel=0"></iframe>
</div>
<hr class="small">
<!-- /.row (nested) -->
</div>
<!-- /.col-lg-10 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<section id="face" class="services bg-white text-primary">
<div class="container">
<div class="row text-center">
<div class="col-lg-10 mx-auto">
<a href="/face.html"><h1 class="text-primary">Facial Recognition</h1></a>
<small class="text-muted text-center">Click on the title to find out more!</small>
<hr>
<p class="text-black">Facial recognition is a method of identifying an individual by comparing digital image data with the stored record for that person. This is one of the <a href ="https://en.wikipedia.org/wiki/Biometrics">biometric</a> identification systems. Other known forms of this type of work include fingerprint matching and voice recognition.
Facial recognition systems are commonly used for security purposes but are increasingly being used in a variety of other applications.
</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/wve5JWX7yoc?rel=0"></iframe>
</div>
<hr class="small">
<!-- /.row (nested) -->
</div>
<!-- /.col-lg-10 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- Services -->
<section id="3d" class="services bg-primary text-white">
<div class="container">
<div class="row text-center">
<div class="col-lg-10 mx-auto">
<a href="/3d.html"><h1 class="text-white">3D Object Recognition</h1></a>
<small class="text-white text-center">Click on the title to find out more!</small>
<hr>
<p class="text-white">For humans, it’s very easy to recognise objects even from varying perspectives but for computers, this is very difficult. One of computer vision’s main goals is to recognise 3D real-world objects and is a subset of AI.
This requires a full 3D model of the object and dedicated hardware which is expensive. Hence, UCL is researching techniques in which a 3D model can be produced by taking many 2D images to generate novel views of the 3d object without the need for a full model. </p>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/BigrGEvFTJs"></iframe>
</div>
<hr class="small">
<!-- /.row (nested) -->
</div>
<!-- /.col-lg-10 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- Services -->
<section id="malaria" class="services bg-white text-primary">
<div class="container">
<div class="row text-center">
<div class="col-lg-10 mx-auto">
<a href="/malaria.html"><h1>Detection of Malarial Parasites</h1></a>
<small class="text-muted text-center">Click on the title to find out more!</small>
<hr>
<p class="text-black">Malaria is a life-threatening tropical disease usually spread by mosquitoes, which needs to be diagnosed on time to prevent further infections. The conventional method of detecting malarial parasites, microscopy, is time consuming and inefficient especially when tons of samples need to be analysed. The application of image processing on the detection of malarial parasites greatly improves its efficiency by digitalising images. The following video shows malaria diagnosis with computer vision, developed by the AI-DEV group, Makerere University, Uganda.</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/Os29Gc1lXGM?rel=0"></iframe>
</div>
<hr class="small">
<!-- /.row (nested) -->
</div>
<!-- /.col-lg-10 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- Services -->
<section id="disease" class="services bg-primary text-white">
<div class="container">
<div class="row text-center">
<div class="col-lg-10 mx-auto">
<a href="/disease.html"><h1 class="text-white">Disease Progression Modelling</h1></a>
<small class="text-white text-center">Click on the title to find out more!</small>
<hr>
<p class="text-white">This field is all about looking at patient symptoms and being able to work out how far along the disease they have is and what it is. This is a hard task as the symptoms for one disease are usually not unique to it, and so the only way to know what disease they have is the order of appeareance and severity of the symptoms. This requires observation of the patients deteriating state which delays treatment. Vision and imaging science helps by looking at things like brainscans with machine learning to identify the stage of disease and learn the characteristic progression pattern.</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/gYnSTFxzzTI?rel=0"></iframe>
</div>
<hr class="small">
<!-- /.row (nested) -->
</div>
<!-- /.col-lg-10 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- Footer -->
<!-- About -->
<section id="about" class="about">
<div class="container text-center">
<h1>Who are we?</h1>
<hr class="small">
<h4>We are a team of 5 UCL students who were tasked to create a website for this research area.</h4>
<br>
<h2>Who did what?</h2>
<hr class="small">
<h4><b>Zak Morgan:</b> Web design and overview of the field<br><br>
<b>Helen Zhang:</b> 3D Object Recognition<br><br>
<b>Yuting "Jassmin" Deng:</b> Detection of Malarial Parasites<br><br>
<b>Minjae Kang:</b> Face Recognition<br><br>
<b>Noor Soni:</b> Disease Progression Modelling</h4>
<br>
<h2>Where can you find the UCL Vision and Imaging science department?</h2>
<hr class="small">
</div>
<!-- /.container -->
</section>
<!-- Map -->
<section id="contact" class="map">
<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d620.6142750634717!2d-0.1323508544620483!3d51.52317544009123!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48761b2f06b9fa47%3A0x88fa875309285a86!2sMalet+Place+Engineering+Building!5e0!3m2!1sen!2suk!4v1508503336150"></iframe>
<br/>
<small>
<a href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d620.6142750634717!2d-0.1323508544620483!3d51.52317544009123!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48761b2f06b9fa47%3A0x88fa875309285a86!2sMalet+Place+Engineering+Building!5e0!3m2!1sen!2suk!4v1508503336150"></a>
</small>
</section>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/stylish-portfolio.js"></script>
</body>
</html>