hri-unica/index.html at master · conema/hri-unica · GitHub

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
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <!--
                          _________________________________
                         /                                 \
                　　　　 |　 Hey, what are you doing here?   |
                　　　　　\_________________________________/
                　　　　　　　V
                     ,--.    ,--.
                 ((O ))--((O ))
               ,'_`--'____`--'_`.
              _:  ____________  :_
             | | ||::::::::::|| | |
             | | ||::::::::::|| | |
             | | ||::::::::::|| | |
             |_| |/__________\| |_|
               |________________|
            __..-'            `-..__
         .-| : .----------------. : |-.
       ,\ || | |\______________/| | || /.
      /`.\:| | ||  __  __  __  || | |;/,'\
     :`-._\;.| || '--''--''--' || |,:/_.-':
     |    :  | || .----------. || |  :    |
     |    |  | || '----SSt---' || |  |    |
     |    |  | ||   _   _   _  || |  |    |
     :,--.;  | ||  (_) (_) (_) || |  :,--.;
     (`-'|)  | ||______________|| |  (|`-')
      `--'   | |/______________\| |   `--'
             |____________________|
              `.________________,'
               (_______)(_______)
               (_______)(_______)
               (_______)(_______)
               (_______)(_______)
              |        ||        |
              '--------''--------'
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1.0, user-scalable=no">
    <title>HRI Lab @ UNICA</title>

    <link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="img/favicon/favicon-16x16.png">
    <link rel="manifest" href="img/favicon/site.webmanifest">
    <link rel="mask-icon" href="img/favicon/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">


    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-carousel@4.0.4/dist/css/bulma-carousel.min.css">
    <link rel="stylesheet" href="extensions/bulma-ribbon.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
    <script src="script.js"></script>
</head>

<body id="top" class="has-navbar-fixed-top">
    <noscript>
        <div class="">
            This site requires JavaScript.
        </div>
    </noscript>

    <!-- NAVBAR -->
    <nav class="navbar is-fixed-top is-white">
        <div class="container">
            <div class="navbar-brand">
                <!--<a class="navbar-item" href="http://unica.it">
                    <img src="https://raw.githubusercontent.com/conema/hri-unica/master/img/logos/unica.png"
                        alt="Logo unica">
                </a>
                <a class="navbar-item" href="https://www.unica.it/unica/it/dip_matinfo.page">
                    <img src="https://raw.githubusercontent.com/conema/hri-unica/master/img/logos/dmi.png"
                        alt="Dipartimento Matematica ed Informatica">
                </a>-->
                <a href="#" class="navbar-item">
                    <img src="https://raw.githubusercontent.com/conema/hri-unica/master/img/logos/HRILab.png" alt="HRI logo" width="100px">
                </a>
                <span class="navbar-burger burger" data-target="navbarMenuHeroA">
                    <span></span>
                    <span></span>
                    <span></span>
                </span>
            </div>
            <div id="navbarMenuHeroA" class="navbar-menu">
                <div class="navbar-end">
                    <a class="navbar-item" href="#research">
                        Research
                    </a>
                    <a class="navbar-item" href="#projects">
                        Projects
                    </a>
                    <a class="navbar-item" href="#people">
                        Team
                    </a>
                    <a class="navbar-item" href="#news">
                        News
                    </a>
                    <a class="navbar-item" href="#publications">
                        Publications
                    </a>
                    <a class="navbar-item" href="#resources">
                        Resources
                    </a>
                    <a class="navbar-item" href="#media">
                        Videos
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- HERO -->
    <section class="hero is-medium is-bold hero-zora">
        <div class="hero-background"></div>

        <div class="hero-body">
            <div class="container">
                <div class="columns is-vcentered">
                    <div class="column is-6">
                        <h1 class="title has-text-white">
                            HRI Lab @ UNICA
                        </h1>
                        <p class="subtitle has-text-grey-lighter has-text-justified">
                            HRI Lab is a laboratory of Human-Robot Interaction at the <a href="http://unica.it/" class="has-text-white-bis" target="_blank">University of Cagliari</a> and in
                            collaboration with <a href="http://www.r2msolution.com/" class="has-text-white-bis" target="_blank">R2M Solution s.r.l.</a> whose research and development activities are
                            dedicated to the understanding, designing, and evaluating of several robotic platforms which
                            employ different research technologies (e.g. Sentiment Analysis, Semantic Web, Deep
                            Learning, Big Data, Sensors, Computer Vision, Natural Language Processing) when interacting
                            with humans
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="zora-photo">
            <img src="https://raw.githubusercontent.com/conema/hri-unica/master/img/zora_body.png" alt="NAO/Zora photo"
                width="400">
        </div>
    </section>

    <!-- Research -->
    <section class="section">
        <div id="research" class="container anchor">
            <div class="section-header columns has-text-centered is-centered">
                <div class="column is-6">
                    <h2 class="title">Research</h2>
                </div>
            </div>

            <div class="content has-text-justified">
                <p>
                This laboratory works on a mixture of technologies related to the Deep Learning, Sentiment Analysis, IoT, Assistive Technologies and Semantic Web domains, that we have leveraged for Human-Robot-Interaction. Several use cases and projects have already been developed on top of NAO/Zora, a completely programmable and autonomous humanoid robot, and they aim at allowing NAO/Zora to interact with humans using natural language for different tasks. Example use cases allow the robot:
                <ol type="i">
                    <li>talking to the user and understanding his/her sentiments by using a dedicated Semantic Sentiment Analysis engine;</li>
                    <li>generating answers to open-dialog natural language utterances through a Generative Conversational Agent;</li>
                    <li>performing action commands depending on open-dialog natural language utterances and a Robot Action ontology;</li>
                    <li>identifying which objects the user is showing to the robot cameras by using convolutional neural networks trained on a huge collection of annotated objects;</li>
                    <li>integrating Google Assistant technologies within NAO/Zora to experience a much more natural interaction with the robot;</li>
                    <li>playing with NAO/Zora;</li>
                    <li>using NAO/Zora to control smart objects. The source code of each use case is publicly available in repositories and dedicated videos show how they work.</li>
                </ol>

                <b>Many more coming soon....</b>
            </p>
            </div>
        </div>
    </section>

    <!-- Projects -->
    <section class="section">
        <div id="projects" class="container anchor">
            <div class="section-header columns has-text-centered is-centered">
                <div class="column is-6">
                    <h2 class="title">Projects</h2>
                </div>
            </div>

            <div id="project-list" class="columns is-centered has-text-centered">

            </div>
        </div>
    </section>

    <!-- People -->
    <section id="people" class="section">
        <div class="container anchor">
            <div class="section-header columns has-text-centered is-centered">
                <div class="column is-6">
                    <h2 class="title has-text-white">Team</h2>
                </div>
            </div>

            <div id="people-list">
            </div>
        </div>
    </section>

    <!-- News -->
    <section id="news" class="section">
        <div class="container anchor">
            <div class="section-header columns has-text-centered is-centered">
                <div class="column is-6">
                    <h2 class="title">News</h2>
                </div>
            </div>

            <div id="news-list" class="columns has-text-centered is-centered is-multiline">

            </div>

            <nav class="pagination is-centered" role="navigation" aria-label="pagination">
                <ul id="news-pagination" class="pagination-list">
                    <li><a class="pagination-link is-current" aria-label="Goto page 1" go-to="1">1</a></li>
                </ul>
            </nav>
        </div>
    </section>

    <!-- Publications -->
    <section class="section">
        <div id="publications" class="container anchor">
            <div class="section-header columns has-text-centered is-centered">
                <div class="column is-6">
                    <h2 class="title">Publications related to HRI</h2>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="tabs is-centered">
                <ul id="publications-years">
                </ul>
            </div>


            <div id="tab-content-research" class="tab" data-content="1">

            </div>
        </div>
    </section>

    <!-- Resources -->
    <section id="resources" class="section">
        <div class="container anchor">
            <div class="section-header columns has-text-centered is-centered">
                <div class="column is-6">
                    <h2 class="title">Resources</h2>
                </div>
            </div>

            <div id="resources-list" class="columns has-text-centered is-centered is-multiline">

            </div>

            <nav class="pagination is-centered" role="navigation" aria-label="pagination">
                <ul id="resources-pagination" class="pagination-list">
                    <li><a class="pagination-link is-current" aria-label="Goto page 1" go-to="1">1</a></li>
                </ul>
            </nav>
        </div>
    </section>

    <!-- Media -->
    <section class="section">
        <div id="media" class="container anchor">
            <div class="section-header columns has-text-centered is-centered">
                <div class="column is-6">
                    <h2 class="title">Videos</h2>
                </div>
            </div>

            <div class="container">
                <div id="video-carousel" class="columns">

                </div>
            </div>
        </div>
    </section>

    <!-- In collaboration -->
    <section id="collaboration" class="section">
        <div class="container anchor">
            <div class="section-header columns has-text-centered is-centered">
                <div class="column is-6">
                    <h2 class="title">In collaboration with</h2>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="columns is-centered has-text-centered">
                <div class="column is-3 is-offset-3">
                    <div class="columns">
                        <div class="column">
                            <a href="http://unica.it" target="_blank">
                                <img src="https://raw.githubusercontent.com/conema/hri-unica/master/img/logos/unica.png"
                                    alt="logo unica">
                            </a>
                        </div>
                    </div>
                    <div class="colums">
                        <div class="column is-full is-size-5 has-text-black"><a href="http://unica.it">University Of
                                Cagliari</a></div>
                    </div>
                </div>
                <div class="column is-3">
                    <div class="columns">
                        <div class="column">
                            <a href="http://www.r2msolution.com/" target="_blank">
                                <img src="https://raw.githubusercontent.com/conema/hri-unica/master/img/logos/R2M.jpg"
                                    alt="logo r2m">
                            </a>
                        </div>
                    </div>
                    <div class="colums">
                        <div class="column is-full is-size-5 has-text-black"><a href="http://www.r2msolution.com/">R2M
                                Solution S.R.L.</a></div>
                    </div>
                </div>
                <div class="column is-3"></div>
            </div>
        </div>
    </section>

    <!-- Project modal -->
    <div id="project-modal" class="modal">
        <div class="modal-background"></div>
        <div class="modal-content">
            <div class="card">
                <div class="card-image">
                    <figure class="image">
                        <img src="" alt="Project image">
                    </figure>
                </div>
                <div class="card-content">
                    <div class="media">
                        <div class="container has-text-centered">
                            <p class="title is-4"></p>
                            <p class="subtitle">
                                <span id="ongoing" class="tag is-success is-medium">Ongoing</span>
                                <span id="ended" class="tag is-warning is-medium">Ended</span>

                                <span class="tag is-medium is-info">Budget: &nbsp;<span class="budget"></span>€</span>
                                <span class="tag is-medium is-info fromto">From &nbsp;<span class="from"></span>
                                    &nbsp;to &nbsp;<span class="to"></span> </span>
                                <a href="#" id="website" target="_blank">
                                    <span class="tag is-medium is-link">
                                        <i class="fas fa-link is-size-7"></i>
                                        &nbsp;
                                        Website
                                    </span>
                                </a>
                            </p>
                        </div>
                    </div>

                    <div class="content has-text-centered">
                    </div>
                </div>
            </div>
        </div>
        <button class="modal-close is-large" aria-label="close"></button>
    </div>

    <!-- Media modal-->
    <div id="video-modal" class="modal">
        <div class="modal-background"></div>
        <div class="modal-content">
            <p class="video-container is-16by9">
                <iframe id="src-video-modal" src="" frameborder="0"
                    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
                    style="width:500px;height:350px;"></iframe>
            </p>
        </div>
        <button class="modal-close is-large" aria-label="close"></button>
    </div>

    <!-- Return to top -->
    <a href="#top" id="return-to-top"><i class="fas fa-caret-up"></i></a>

    <script src="https://cdn.jsdelivr.net/npm/bulma-carousel@4.0.4/dist/js/bulma-carousel.min.js"></script>
</body>

</html>