zoombot/index.html at master · mcreed/zoombot · 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
	<head>
		<meta charset="utf-8">
		<title>Zoombot</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<style media="screen">

			html, body{
				background: #fff;
				padding: 0; margin: 0;
				height: 100%;
			}

			#pics{
				position: absolute;
				top: 0; left: 0; right: 0; bottom: 0;
				width: 100%; height: 100%;
				background-repeat: no-repeat;
			    background-size: cover;
				background-image: url(img/zoombot-smile.jpg);
				z-index: 1;
			}

			#btnOnOff{
				position: absolute;
				top: 0; left: 0;
				z-index: 2;
			}

		</style>
	</head>
	<body>
		<div id="pics"></div>
		<button id="btnOnOff">TURN ON ZOOMBOT</button>

		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/artyom.min.js"></script>
		<script type="text/javascript">

			$(function() {

					// Yay Artyom!!
					const zoombot = new Artyom();

					// If you prefer a female voice uncomment the next line of things
					// zoombot.ArtyomVoicesIdentifiers["en-GB"] = ["Google UK English Female", "Google UK English Male", "en-GB", "en_GB"];

					// initialize in off state
					var audioOn = false;

					// Add controls for on/off
					$('#btnOnOff').click(function(){
						if(audioOn){
							$(this).text('TURN ON ZOOMBOT');
							audioOn = false;
						} else {
							$(this).text('TURN OFF ZOOMBOT');
							audioOn = true;
							zoombot.say("hi guys. matt here. my video is a little choppy sorry. how is everyone today?");
							$('#pics').css('background-image', 'url(img/zoombot-open1.jpg)');
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-smile.jpg)');}, 1000);
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-open1.jpg)');}, 1400);
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-open3.jpg)');}, 2000);
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-smile.jpg)');}, 3000);
						}
					});

					// Hello
					zoombot.on(['hello', 'good morning']).then((i) => {
						if(audioOn){
							zoombot.say("hi guys. matt here. my video is a little choppy sorry. how is everyone today?");
							$('#pics').css('background-image', 'url(img/zoombot-open1.jpg)');
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-smile.jpg)');}, 1000);
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-open1.jpg)');}, 1400);
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-open3.jpg)');}, 2000);
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-smile.jpg)');}, 3000);
						}
					});

					// How are you?
					zoombot.on(['how are you', 'how is everybody', 'how is everyone']).then((i) => {
						if(audioOn){
							zoombot.say("I am doing great thank you for asking");
							$('#pics').css('background-image', 'url(img/zoombot-open1.jpg)');
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-smile.jpg)');}, 1000);
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-open1.jpg)');}, 1400);
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-smile.jpg)');}, 2000);
						}
					});

					// Can you take care of this
					zoombot.on(['can you take care of this']).then((i) => {
						if(audioOn){
							zoombot.say("i don't have the bandwith");
							$('#pics').css('background-image', 'url(img/zoombot-open1.jpg)');
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-smile.jpg)');}, 1000);
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-open1.jpg)');}, 1400);
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-smile.jpg)');}, 2000);
						}
					});

					// What do you think?
					zoombot.on(['what do you think', 'any ideas']).then((i) => {
						if(audioOn){
							zoombot.say("hmmmmmmmmmm, I'm thinking");
							$('#pics').css('background-image', 'url(img/zoombot-thinking.jpg)');
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-smile.jpg)');}, 1000);
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-thinking.jpg)');}, 1400);
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-smile.jpg)');}, 5000);
							setTimeout(function(){zoombot.say("let's circle back on this");}, 5000);
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-open1.jpg)');}, 5000);
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-open2.jpg)');}, 5700);
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-smile.jpg)');}, 6000);
						}
					});

					// Did you get that, can you hear me?
					zoombot.on(['did you get that', 'can you hear me']).then((i) => {
						if(audioOn){
							zoombot.say("I'm having trouble hearing you");
							$('#pics').css('background-image', 'url(img/zoombot-thinking.jpg)');
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-smile.jpg)');}, 1000);
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-thinking.jpg)');}, 1400);
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-smile.jpg)');}, 5000);
						}
					});

					// Can you take care of this?
					zoombot.on(['are you ok']).then((i) => {
						if(audioOn){
							zoombot.say("I think it is just my internet connection. sorry.");
							$('#pics').css('background-image', 'url(img/zoombot-open1.jpg)');
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-smile.jpg)');}, 1000);
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-open1.jpg)');}, 1400);
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-smile.jpg)');}, 2000);
						}
					});

					// Give a summary
					zoombot.on(['give us a summary']).then((i) => {
						if(audioOn){
							zoombot.say("Could you repeat that please");
							$('#pics').css('background-image', 'url(img/zoombot-thinking.jpg)');
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-smile.jpg)');}, 1000);
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-open3.jpg)');}, 1400);
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-smile.jpg)');}, 2200);
						}
					});

					// Can you send
					zoombot.on(['can you send']).then((i) => {
						if(audioOn){
							zoombot.say("i'll slack. it to you after this call");
							$('#pics').css('background-image', 'url(img/zoombot-open1.jpg)');
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-smile.jpg)');}, 1000);
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-open2.jpg)');}, 1400);
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-smile.jpg)');}, 2000);
						}
					});

					// Day drinking
					zoombot.on(['drinking']).then((i) => {
						if(audioOn){
							zoombot.say("is it too. early for red wine? ha ha ha ha ha ha ha ha ha.");
							$('#pics').css('background-image', 'url(img/zoombot-open1.jpg)');
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-smile.jpg)');}, 1000);
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-open1.jpg)');}, 1400);
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-smile.jpg)');}, 2000);
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-open1.jpg)');}, 2200);
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-open2.jpg)');}, 3200);
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-smile.jpg)');}, 4000);
						}
					});

					// Bye
					zoombot.on(['bye', 'goodbye']).then((i) => {
						if(audioOn){
							zoombot.say("talk to everybody later. be safe");
							$('#pics').css('background-image', 'url(img/zoombot-open1.jpg)');
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-smile.jpg)');}, 1000);
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-open1.jpg)');}, 1400);
							setTimeout(function(){$('#pics').css('background-image', 'url(img/zoombot-smile.jpg)');}, 2000);
						}
					});


					// Kickstart my heart
					zoombot.initialize({
					    lang: "en-GB", // GreatBritain english
					    continuous: true, // Listen forever
					    soundex: true,// Use the soundex algorithm to increase accuracy
					    debug: true, // Show messages in the console
					    listen: true, // Start to listen commands !
					    // If provided, you can only trigger a command if you say its name
					    // e.g to trigger "Hello", you need to say "Zoombot Hello"
					    //name: "zoombot"
					}).then(() => {
					    console.log("Artyom has been succesfully initialized");
					}).catch((err) => {
					    console.error("Artyom couldn't be initialized: ", err);
					});

			});
		</script>
	</body>
</html>