-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
132 lines (114 loc) · 7.2 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ICan.js</title>
<link rel="icon" type="image/png" sizes="32x32" href="static/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="static/img/favicon-16x16.png">
<link rel="stylesheet" href="static/css/normalize.css">
<link rel="stylesheet" href="static/css/wing.min.css">
<link rel="stylesheet" href="static/css/general.css">
<link rel="stylesheet" href="static/css/texts.css">
<link rel="stylesheet" href="static/css/atom-one-light.css">
</head>
<body>
<header class="center">
<div class="nav horizontal-align">
<div class="nav-item"><a href="#projeto">O projeto</a></div>
<div class="nav-item"><a href="#utilizacao">Utilização</a></div>
<div class="nav-item"><a href="#exemplos">Exemplos</a></div>
<div class="nav-item"><a href="#ecossistema">Ecossistema</a></div>
<div class="nav-item"><a href="#docs">Documentação</a></div>
<div class="nav-item"><a href="#pubs">Publicações</a></div>
<div class="nav-item"><a href="https://gitlab.com/ican.js/ican.js" target="_blank">Repositório</a></div>
</div>
</header>
<section class="conteudo-inicial container center text-center">
<div>
<img class="img-logo" src="static/img/new_logo.png" alt="Logo" height="200">
<!-- <h3>ICan.js</h3> -->
<h5>Biblioteca de acessibilidade com JavaScript</h5>
</div>
</section>
<section id="projeto" class="container center">
<div>
<h3 class="titulo">O projeto</h3>
<p class="par">
ICan.js é uma biblioteca que utiliza técnicas de Aprendizado Profundo para realizar a criação de recursos assistivos para a <i>web</i>. Sua criação foi realizada pelo aluno Felipe Menino Carlos, sob a orientação do Professor Me. Giuliano Araujo Bertoti, durante o desenvolvimento do Trabalho de Graduação.
</p>
<p class="par">
A implementação da biblioteca foi feita utilizando o conceito de camadas de funcionalidades. Desta forma forma desenvolvidas duas camadas a <b>Core</b> e a <b>Common</b>, estas que por sua vez trabalham sob as funcionalidades disponibilizadas pelas bibliotecas <b>TensorFlow.js</b> e <b>P5.js</b>
</p>
<p class="par">
A organização destas camadas é apresentada na Figura abaixo
</p>
<div class="parentincenter">
<img class="imgincenter" src="static/img/arquitetura_camadas_icanjs_v2.png" alt="arquitetura" height="250">
</div>
<p class="par">
Na camada <b>Core</b> estão os recursos indispensáveis para o funcionamento da biblioteca, como os modelos de rede neural, regressões e manipulação dos dispositivos <i>webcam</i> do usuário. Já na camada <b>Common</b> existem os recursos assistivos criados utilizandos as funcionalidades criadas na camada <b>Core</b> junto a biblioteca <a href="https://p5js.org/" target="_blank" class="especial">P5.js</a>. O ICan.js possui as seguintes funcionalidades disponíveis para uso:
</p>
<div class="row">
<div class="col">
<h5 class="text-center">Controle de <i>cursor</i> do <i>mouse</i> com gestos da cabeça</h5>
<p class="content">Funcionalidade para permitir o controle dos movimentos em um <i>website</i> através de gestos da cabeça</p>
</div>
<div class="col">
<h5 class="text-center">Escrita de textos utilizando gestos de Libras</h5>
<p class="content">Funcionalidade para a escrita de textos em campos de páginas web com gestos de Libras</p>
</div>
</div>
</div>
</div>
</section>
<section id="utilizacao" class="container center">
<div>
<h3 class="titulo">Utilização</h3>
<p class="par">Para utilizar o ICan.js será necessário apenas baixar o arquivo da biblioteca <a href="res/icjs.js" class="especial" target="_blank">aqui</a> e importar em seu HTML, como demonstrado abaixo: </p>
<pre><code class="html">
<e><script src="icjs.js"></script></e>
</code></pre>
</div>
</section>
<section id="exemplos" class="container center">
<div>
<h3 class="titulo">Exemplos</h3>
<p class="par">Para demonstração do funcionamento da biblioteca há alguns exemplos criados, sendo eles: </p>
<ul>
<li><a class="especial" href="https://icanjs-examples.netlify.com/controle-de-mouse/" target="_blank">Controle de mouse com a cabeça</a></li>
<li><a class="especial" href="https://icanjs-examples.netlify.com/escrita-de-texto/" target="_blank">Escrita de texto utilizando gestos de Libras</a></li>
</ul>
</div>
</section>
<section id="ecossistema" class="container center">
<div>
<h3 class="titulo">Ecossistema</h3>
<p class="par">O ICan.js é um projeto que possui um pequeno ecossistema que acabou sendo desenvolvido durante a implementação da biblioteca. Através do diagrama abaixo é possível visualizar este ecossistema. </p>
<img class="imagem-central" src="static/img/arquitetura_geral_icanjs.png" height="350"></img>
<p class="par">A biblioteca ICan.js consome a <a class="especial" href="https://ican-api.herokuapp.com/" target="_blank">API de modelos</a>, que realiza a distribuição dos modelos treinados para o reconhecimento de gestos, modelos estes que, para serem treinados utilizaram um banco de imagens adquiridas com o <a class="especial" href="https://gitlab.com/ican.js/data-acquisition" target="_blank">sistema de aquisição de imagens</a></p>
</div>
</section>
<section id="docs" class="container center">
<div>
<h3 class="titulo">Documentação</h3>
<p class="par">Para acessar a documentação clique <a class="especial" href="docs/index.html" target="_blank">aqui</a>. Caso queira colaborar com a documentação será bem legal, para isto abra uma issue no <a class="especial" href="https://gitlab.com/ican.js/ican.js" target="_blank">repositório</a> do projeto</p>
</div>
</section>
<section id="pubs" class="container center">
<div>
<h3 class="titulo">Publicações</h3>
<p>
MENINO, Felipe Carlos; BERTOTI, Giuliano A. Deep learning aplicado na conversão de libras em texto. Boletim Técnico FATEC, v. 46, p. 120, 2018.
</p>
<p>
MENINO, Felipe Carlos; BERTOTI, Giuliano A. Uso de deep learning para desenvolver tecnologias assistivas de baixo custo. Boletim Técnico. FATEC, v. 46, p. 144, 2018
</p>
</div>
</section>
<footer></footer>
<script src="static/js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>