This repository has been archived by the owner on Mar 31, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (125 loc) · 7.08 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Gabriel Mangiurea">
<meta name="description" content="Gabriel Mangiurea - Web Developer - Bucharest, Romania">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!-- Open Graph -->
<meta property="og:title" content="Lab: Chatbot - Aida">
<meta property="og:description" content="Conversational bot written in JavaScript programming language.">
<meta property="og:type" content="website">
<meta property="og:image" content="https://gabrielmangiurea.github.io/og-tc.png">
<meta property="og:image:url" content="https://gabrielmangiurea.github.io/og-tc.png">
<meta property="og:image:secure_url" content="https://gabrielmangiurea.github.io/og-tc.png">
<meta property="og:url" content="https://gabrielmangiurea.github.io/lab/chatbot/">
<meta property="fb:app_id" content="1779484198984012">
<!-- Twitter Cards -->
<!--<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="" />
<meta name="twitter:title" content="Lab: Chatbot - Aida" />
<meta name="twitter:description" content="Conversational bot written in JavaScript programming language." />
<meta name="twitter:image" content="https://gabrielmangiurea.github.io/og-tc.png" />-->
<link rel="icon" type="image/png" sizes="192x192" href="../../favicon.png">
<link rel="apple-touch-icon" sizes="192x192" href="../../favicon.png">
<link rel="shortcut icon" href="../../favicon.png">
<link rel="stylesheet" href="../../ven/css/bootstrap.min.css">
<link rel="stylesheet" href="../../ven/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<base target="_blank">
<title>gabrielmangiurea.github.io - Lab - Chatbot</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<a href="https://gabrielmangiurea.github.io" target="_self">« Back to gabrielmangiurea.github.io</a>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<h1>Aida - Chatbot</h1>
<p>This is a conversational bot written in JavaScript programming language.<br>The application does not require any kind of server as it is working on the client side (front-end).</p>
<p><span title="Aida">She</span> currently responds to the following expressions <em>(both written and <span style="font-weight: bold; cursor: help" title="Available in Google Chrome v54+.
It requires permission to access your microphone.
Permissions can be revoked at any time through browser settings.">spoken</span><sup style="font-size: xx-small; color: red">new</sup>)</em>:
<ul>
<li><code>Hello / Hi</code></li>
<li><code>Who/What are you?</code></li>
<li><code>How are you? / What are you doing?</code></li>
<li><code>My name is <i>[your name here]</i></code></li>
<li><code>I want you to remember this for me: / Remember this: <i>[sentence here]</i></code></li>
<li><code>Where am I?</code></li>
<li><code>Search <i>(on Google)</i> for <i>[search term(s) here]</i></code></li>
<li><code>I want to <i>(listen to/watch)</i> <i>[search term(s) here]</i></code></li>
<li><code>Tell me something about [term here]</i></code></li>
<li><code>Start/stop listening/talking</i></code></li>
<div class="hidden-commands">
<li><code>I am <i>[your name here]</i></code></li>
<li><code><i>(You can)</i> call me <i>[your name here]</i></code></li>
<li><code>What do you remember?</code></li>
<li><code>I want you to forget everything</i></code></li>
<li><code>What day is [<i>today</i>/<i>this day</i>/<i>it</i>]?</code></li>
<li><code>What day [<i>was/will be</i>] on [<i>month day year</i>]?</code></li>
<li><code>What day [<i>was/will be in</i>] [<i><number> days/weeks/months/years</i>] (ago)?<br>(tip: you can combine dates; i.e. 10 days and 7 weeks)</code></li>
<li><code>You are <i>(adverb)</i> <i>[nice/sweet/beautiful/awesome/great/super/epic]</i></code></li>
</div>
</ul>
<a href="javascript:void(0)" class="more" target="_self" style="font-size: small"></a>
</p>
</div>
</div>
<div class="row" style="margin-top: 20px">
<div class="col-sm-8 col-sm-offset-2">
<div class="bot-container">
<div class="view clearfix"></div>
<form class="form-horizontal">
<div class="col-sm-10">
<input class="form-control" type="text" autofocus />
</div>
<div class="col-sm-2">
<input class="btn btn-default btn-block" type="submit" value="Send" />
</div>
</form>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2 text-center footer">
<p>
Made with <span style="color: red">♥</span> by Gabriel Mangiurea.<br style="line-height: 1.5em">
Libraries used:<br><a href="https://www.talater.com/annyang" title="annyang">annyang</a> <a href="https://www.responsivevoice.org" title="ResponsiveVoice">ResponsiveVoice</a><br><a href="https://www.jquery.com" title="jQuery">jQuery</a> <a href="https://www.momentjs.com" title="moment.js">moment.js</a>
</p>
<p><span class="fa fa-bug"></span> Found a bug?<br>Please <a href="mailto:[email protected]?subject=Aida%20(Chatbot)%20Bug%20Report" target="_self">contact me</a>.</p>
</div>
</div>
</div>
<script src="../../ven/js/jquery.min.js"></script>
<script src="js/responsivevoice.min.js"></script>
<script src="js/annyang.min.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/bot.js"></script>
<script>
$(function () {
$('.more').html('<span class="glyphicon glyphicon-chevron-down" style="font-size: x-small"></span> Show more');
$('.more').on('click', function () {
$('.hidden-commands').slideToggle(400, function () {
$('.more').html(
($(this).css('display') == 'none')
? '<span class="glyphicon glyphicon-chevron-down" style="font-size: x-small"></span> Show more'
: '<span class="glyphicon glyphicon-chevron-up" style="font-size: x-small"></span> Show less'
);
});
});
});
</script>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-85093851-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>