-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.html
181 lines (156 loc) · 6.74 KB
/
about.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
<!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.0">
<link rel="icon" href="mockImages/tree.png">
<link type="text/css" rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@observablehq/inspector@5/dist/inspector.css">
<title>Visualize & Reinforce | About</title>
<style>
body {
background-size: cover;
}
.authors-container {
display: flex;
align-items: center;
justify-content: center;
}
.author {
text-align: center;
margin: 10px;
}
.author img {
width: 200px;
height: 200px;
border: 2px solid black;
}
.author p {
font-weight: bold;
text-align: center;
}
.paper p {
font-weight: bold;
text-align: center;
}
.paper img {
width: 134px;
height: 171px;
border: 2px solid black;
}
.poster img {
width: 212px;
height: 282px;
border: 4px solid black;
}
#video {
display: flex;
justify-content: center;
align-items: center;
}
#video video {
max-width: 100%;
max-height: 100%;
padding-top: 10px;
}
#title a {
text-decoration: none;
color: black;
}
#title a:hover{
color: rgb(18, 56, 18);
}
#title h1{
text-transform: uppercase;
font-weight: 900;
font-size: 38px;
border-bottom: 2px solid #000;
margin: 30px 100px 0 100px;
text-align: center;
}
#title h1 span:last-child{
color: #FFF;
-webkit-text-stroke: 1px #000;
}
</style>
</head>
<body>
<content>
<section id="title">
<a href="https://fgv-vis-2023.github.io/final-project-visualize-reinforce/" alt="Ir à página principal">
<h1>
<span>Visualize</span><span>Reinforce</span>
</h1>
</a>
</section>
<div id="video">
<video controls>
<source src="aboutImages/visualizeandreinforce.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<br>
<h1>Abstract</h1>
<p>Este artigo apresenta o processo de concepção de um site explicativo que utiliza técnicas de visualização para auxiliar estudantes e entusiastas na compreensão de conteúdos complexos relacionados ao reinforcement learning e métodos de machine learning. O objetivo é reduzir a lacuna entre o conhecimento teórico e prático, fornecendo uma abordagem clara e acessível. O estudo propõe o uso do algoritmo de pseudo-rotulagem em conjunto com o aprendizado por reforço para mapear as espécies de árvores em uma floresta densa. O algoritmo de pseudo-rotulagem é eficiente na classificação de conjuntos de dados com poucas anotações. O aprendizado por reforço é utilizado no processo de escolha dos dados para categorização e treinamento do modelo. O objetivo é selecionar dados representativos que melhor expliquem a distribuição de cada classe.</p>
<div class="paper">
<a href="./index.html">
<img src="aboutImages/paper.png" alt="Paper">
</a>
<p>
Artigo completo
</p>
</div>
<br>
<section id="project">
<h1>Nosso projeto</h1>
<p>
Sabemos que muitos tópicos na área de Machine Learning podem parecer desconhecidos ou até mesmo uma caixa preta para o público em geral. Dessa forma, nossa missão é apresentar de forma interativa e visualmente atraente os fundamentos por trás de duas áreas específicas: Pseudo-Labeling e Reinforcement Learning.
</p>
<p>
Desde os passos mais básicos, buscamos fornecer um ambiente de aprendizado amigável, onde você poderá explorar e experimentar com esses conceitos em primeira mão. Para tornar a experiência ainda mais envolvente, contextualizaremos esses conceitos por meio de um caso prático: a classificação de árvores com base em imagens capturadas por drones.
</p>
<p>
Atualmente, utilizamos dados simulados para gerar as árvores, o que permitirá que você se familiarize com a forma como as variáveis podem ser distribuídas. Venha conosco explorar o mundo fascinante do Machine Learning e descubra como essas poderosas técnicas podem ser aplicadas!
</p>
</section>
<br>
<section id="poster">
<h1>Poster</h1>
<p>Também fizemos um poster para fins de apresentação que resume os principais pontos e objetivos do nosso trabalho:</p>
<div class="poster">
<a href="aboutImages/poster.png">
<img src="aboutImages/poster.png" alt="Poster">
</a>
<p>
Clique na imagem para visualizar o poster em resolução máxima.
</p>
</section>
<section id="team">
<h1>Nossa equipe</h1>
<p>Estudantes da Escola de Matemática Aplicada - FGV, cursando Ciências de Dados e Inteligência Artificial. Atualmente no 5º período, decidimos criar um trabalho interdisciplinar entre Visualização de Dados e Aprendizado de Máquinas.</p>
<div id="authors-gallery" class="authors-container">
<div class="author">
<a href="https://github.com/GustavoSanches55">
<img src="aboutImages/gustavo.png" alt="Gustavo Sanches">
</a>
<p>Gustavo Sanches</p>
</div>
<div class="author">
<a href="https://github.com/RodrigoPintucci">
<img src="aboutImages/rodrigo.png" alt="Rodrigo Pintucci">
</a>
<p>Rodrigo Pintucci</p>
</div>
<div class="author">
<a href="https://github.com/LucasTreuke">
<img src="aboutImages/lucas.png" alt="Lucas Treuke">
</a>
<p>Lucas Treuke</p>
</div>
</div>
<br>
</section>
</content>
</body>
</html>