-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathdesign-brief.html
789 lines (643 loc) · 48.2 KB
/
design-brief.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
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
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WWP HSN TSA</title>
<link rel="stylesheet" href="css/example.css">
<link rel="stylesheet" href="css/carousel.css">
<link rel="stylesheet" href="css/competitions2.css">
<link rel="stylesheet" href="css/animsition.min.css">
<link rel="stylesheet" href="css/slider.css">
<link rel="icon" href="img/icon.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
html, body {
background: linear-gradient(to right, #1e3c72 , #2a5298);
}
</style>
<script>
</script>
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat');
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<link rel='stylesheet prefetch' href='css/botui.min.css'>
<link rel='stylesheet prefetch' href='https://unpkg.com/botui/build/botui-theme-default.css'>
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css?family=Rubik:300,400,500" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/ -icons.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link href="css/style.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<link rel='stylesheet prefetch' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/104946/animate.min.css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link href='https://fonts.googleapis.com/css?family=Droid+Serif|Open+Sans:400,700' rel='stylesheet' type='text/css'>
</head>
<div id="ani" class="animsition">
<body data-spy="scroll" data-target="#navbar" data-offset="30">
<script>
window.onload = function() {
document.getElementById("firstCard").focus();
};
</script>
<div class="nav-menu fixed-top">
<div class="container">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-dark navbar-expand-lg">
<a class="navbar-brand" href="index.html#home"><img style="margin-bottom:10px;margin-right:15px" src="./img/aida-logo.png" class="img-fluid" height="30" width="30"alt=""><b>A.I.D.A</b></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item"> <a class="nav-link active" href="#home">HOME <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#general">GENERAL</a> </li>
<li class="nav-item"> <a class="nav-link" href="#demo">DEMO</a> </li>
<li class="nav-item"> <a class="nav-link" href="#uses">USES</a> </li>
<li class="nav-item"> <a class="nav-link" href="#costs">COSTS</a> </li>
<li class="nav-item"> <a class="nav-link" href="#technologies">TECHNOLOGIES</a> </li>
<li class="nav-item"> <a class="nav-link" href="#safety">SAFETY</a> </li>
<li class="nav-item"><a id="cte" href="./cte.html#home" class="animsition-link btn btn-outline-light my-3 my-sm-0 ml-lg-3">CTE</a></li>
<li class="nav-item"><a id="chapter" href="./index.html" class="animsition-link btn btn-outline-light my-3 my-sm-0 ml-lg-3">Chapter</a></li>
<li class="nav-item"><a id="about" href="./about.html" class="animsition-link btn btn-outline-light my-3 my-sm-0 ml-lg-3">About</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
<header class="bg-gradient2"id="home">
<div class = "backgrounddiv3">
<div id="container">
<header class="info infoheightchange">
<img src="./img/aida-logo.png" alt="Smiley face" height="200" width="200" class = "logopadding">
<hgroup class="about">
<div class="typewriter">
<h1>Meet your virtual tutor</h1>
</div>
</hgroup>
</header>
</div>
</div>
</header>
<script src="./js/sketch.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="./js/timeline.js"></script>
<script src="./js/jquery-3.2.1.min.js"></script>
<script src="./js/bootstrap.bundle.min.js"></script>
<script src="./js/owl.carousel.min.js"></script>
<script src="./js/script.js"></script>
<script src="./js/cards.js"></script>
<script>
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {
} else {
function Particle( x, y, radius ) {
this.init( x, y, radius );
}
Particle.prototype = {
init: function( x, y, radius ) {
this.alive = true;
this.radius = radius || 10;
this.wander = 0.15;
this.theta = random( TWO_PI );
this.drag = 0.92;
this.color = '#fff';
this.x = x || 0.0;
this.y = y || 0.0;
this.vx = 0.0;
this.vy = 0.0;
},
move: function() {
this.x += this.vx;
this.y += this.vy;
this.vx *= this.drag;
this.vy *= this.drag;
this.theta += random( -0.5, 0.5 ) * this.wander;
this.vx += sin( this.theta ) * 0.1;
this.vy += cos( this.theta ) * 0.1;
this.radius *= 0.96;
this.alive = this.radius > 0.5;
},
draw: function( ctx ) {
ctx.beginPath();
ctx.arc( this.x, this.y, this.radius, 0, TWO_PI );
ctx.fillStyle = this.color;
ctx.fill();
}
};
var MAX_PARTICLES = 280;
var COLOURS = [ '#ecf0f1', '#2980b9', '#273c75', ];
var particles = [];
var pool = [];
var demo = Sketch.create({
container: document.getElementById( 'container' ),
retina: 'auto'
});
demo.setup = function() {
// Set off some initial particles.
var i, x, y;
for ( i = 0; i < 50; i++ ) {
x = ( demo.width * 0.5 ) + random( -100, 100 );
y = ( demo.height * 0.5 ) + random( -100, 100 );
demo.spawn( x, y);
}
};
demo.spawn = function( x, y ) {
var particle, theta, force;
if ( particles.length >= MAX_PARTICLES )
pool.push( particles.shift() );
particle = pool.length ? pool.pop() : new Particle();
particle.init( x, y, random( 5, 40 ) );
particle.wander = random( 0.5, 2.0 );
particle.color = random( COLOURS );
particle.drag = random( 0.9, 0.99 );
theta = random( TWO_PI );
force = random( 2, 8 );
particle.vx = sin( theta ) * force;
particle.vy = cos( theta ) * force;
particles.push( particle );
};
demo.update = function() {
var i, particle;
for ( i = particles.length - 1; i >= 0; i-- ) {
particle = particles[i];
if ( particle.alive ) particle.move();
else pool.push( particles.splice( i, 1 )[0] );
}
};
demo.draw = function() {
demo.globalCompositeOperation = 'lighter';
for ( var i = particles.length - 1; i >= 0; i-- ) {
particles[i].draw( demo );
}
};
demo.mousemove = function() {
var particle, theta, force, touch, max, i, j, n;
for ( i = 0, n = demo.touches.length; i < n; i++ ) {
touch = demo.touches[i], max = random( 1, 4 );
for ( j = 0; j < max; j++ ) {
demo.spawn( touch.x, touch.y );
}
}
};
}
</script>
<div class="section bg-white" id="general">
<div class="container">
<div class="row">
<div class="col-xl-12 col-lg-12 mx-auto">
<h3 class="section-heading mb-4">
What is A.I.D.A?
</h3>
<p>A.I.D.A stands for Artificially Intelligent Digital Assistant. In essence, it is a virtual tutor that can understand requests made by a student, process the user’s intent, and respond in a conversational manner. A.I.D.A can provide students with unique feedback for their work by analyzing a student’s strategy to a given problem and providing students with real time updates on their progress. </p>
<p>The primary function of A.I.D.A is to give middle school, high school, and college students a cheaper alternative to test preparation programs or tutors through an AI bot that mimics a human teacher. Users can send pictures of pages from their textbook or enter a desired subject, and A.I.D.A will generate practice questions on the imputed content through natural language processing and analyzing the semantics of the documents. Based on the students’ performance on these generated questions, A.I.D.A will created a personalized plan for every student while addressing issues and questions the student has throughout the process.</p>
<a href="#demo" class="btn btn-primary">Try the Demo</a></div>
</div>
</div>
</div>
<!-- // end .section -->
<div class="section light-bg">
<div class="container">
<h3 class="section-heading">
How it Works.
</h3>
<div class="row">
<div class="col-md-8 d-flex align-items-center">
<ul class="list-unstyled ui-steps">
<br>
<li class="media">
<div class="circle-icon mr-4">1</div>
<div class="media-body">
<h5>Provide Materials.</h5>
<p>Send A.I.D.A pictures of your notes, textbook chapter, or worksheets for a unit your are studying in class. </p>
</div>
</li>
<li class="media my-4">
<div class="circle-icon mr-4">2</div>
<div class="media-body">
<h5>Generate Practice Exercises & Quizzes.</h5>
<p>A.I.D.A will analyze the content of the given documents and will create multiple choice, fill in the blank, and matching questions in the form of practice problems or complete practice tests.</p>
</div>
</li>
<li class="media">
<div class="circle-icon mr-4">3</div>
<div class="media-body">
<h5>Create a Personalized Plan.</h5>
<p>Upon completion of the generated practice, A.I.D.A will determine strength and weakness areas and create a unique study plan. The study plan will consist of subjects to review, resources for learning confusing topics, and additional practice questions.</p>
</div>
</li>
<li class="media">
<div class="circle-icon mr-4">4</div>
<div class="media-body">
<h5>Ask Questions.</h5>
<p>If you have any questions along the way or are confused by parts of a topic of study, ask A.I.D.A just as you would ask a teacher. Just like other virtual assistants such as Siri, Google Assistant, and Cortana, A.I.D.A can recognize and respond to user requests.</p>
</div>
</li>
</ul>
</div>
<div class="col-md-4">
<img src="./img/aiga-logo-full.png" style="margin-bottom:40px;margin-left:15px" alt="iphone" class="img-fluid">
</div>
</div>
</div>
</div>
<header id="demo">
<h1>Demo the chat.</h1>
</header>
<main class="bot-wrapper centered">
<div id="bot">
<bot-ui></bot-ui>
</div>
</main>
<br>
<br>
<header id="demo2">
<h1>Demo the app.</h1>
</header>
<div class="section" id="gallery">
<div class="container">
<iframe src="https://marvelapp.com/4a3haid?emb=1&iosapp=false&frameless=false" width="390" height="755" style="display:block; margin:auto;"allowTransparency="true" frameborder="0"></iframe>
</div>
</div>
<!-- competitions open -->
<div class = "section2 light-bg">
<div class="section-title" id = "uses">
<h3 >General Uses of AI</h3>
</div>
<div class="app" id="app">
<div class="accordions">
<section class="accordions__accordion">
<div class="accordions__header">
<div class="accordions__container container">
<h3 class="accordions__title">Personal</h3>
<button class="accordions__button" v-on:click="toggleAccordion('Experience')" v-bind:class="{ 'accordions__button--active': isOpen('Experience') }">
<div class="accordions__icon">+</div>
</button>
</div>
</div>
<div class="container .nobg">
<div class="accordions__content rich-text" v-bind:class="{ 'accordions__content--expanded': isOpen('Experience') }"><p class = "text" >AI can be used to make your life easier. Every day technologies like smart home systems and personal assistants are examples of artificial intelligence. <b>However, AI’s personal uses go beyond the scope of convenience. </b>AI can be used for personalized learning; it can learn from your mistakes and craft a curriculum based on your learning style. It can be used for personal finance; for example, an app called Digit analyzes user habits to optimize spending and saving. AI can also be used to manage your portfolio, providing financial advice with minimal human intervention. Another up and coming use of AI is in self driving cars. These cars not only save time but also significantly reduce the chances of accidents. Self driving cars have an accident rate lower than the national average by 25% and tend to have less severe accidents in general. They also follow the best driving practices that the average human driver does not and communicate with other cars to craft the most efficient routes to your destination.
</p></div>
</div>
</section>
<section class="accordions__accordion">
<div class="accordions__header">
<div class="accordions__container container">
<h3 class="accordions__title">Commercial</h3>
<button class="accordions__button" v-on:click="toggleAccordion('Insights')" v-bind:class="{ 'accordions__button--active': isOpen('Insights') }">
<div class="accordions__icon">+</div>
</button>
</div>
</div>
<div class="container">
<div class="accordions__content rich-text" v-bind:class="{ 'accordions__content--expanded': isOpen('Insights') }"><p class = "text" >AI can be used by businesses to analyze their sales and predict which items will sell best. Nowadays, most tech companies thrive not because of the massive amounts of data they collect but because of how they analyze it. Companies such as Google use this data to suggest the best advertisements to their customers; they drive their profits, and customers are shown the product that most suits them. One example of this is with YouTube. Google’s recommendation algorithm for YouTube videos analyzes the videos that people watch and uses this data to improve its own suggestions on which videos the user would be most likely to click on. In turn, YouTube increases the time a user spends on the site, the number of advertisements they click on, and consequently their profits.
</p></div>
</div>
</section>
<section class="accordions__accordion">
<div class="accordions__header">
<div class="accordions__container container">
<h3 class="accordions__title">Educational</h3>
<button class="accordions__button" v-on:click="toggleAccordion('Credentials')" v-bind:class="{ 'accordions__button--active': isOpen('Credentials') }">
<div class="accordions__icon">+</div>
</button>
</div>
</div>
<div class="container">
<div class="accordions__content rich-text" v-bind:class="{ 'accordions__content--expanded': isOpen('Credentials') }"><p class = "text" >AI technologies have been created to teach students about subjects in school, real life applications, and practically any other topic. These technologies are not prevalent yet, but as they are optimized through collection of more data and improvement of algorithms, they will gain traction and may even replace the traditional education system altogether. One example of AI based teaching programs is Massive Open Online Courses, or MOOC’s. Through MOOC’s, students anywhere can take online courses created by world renowned professors for free. They eliminate the need for a teacher through automatic grading systems and bots that answer most of the students’ questions. Such courses minimize the cost for education, increase accessibility and convenience, and create a personalized learning experience for the student. Already, MOOC’s have collected large amounts of data to analyze how students learn. These learning analytics are being used to improve educational courses on a large scale.
</p></div>
</div>
</section>
<section class="accordions__accordion">
<div class="accordions__header">
<div class="accordions__container container">
<h3 class="accordions__title">Recreational</h3>
<button class="accordions__button" v-on:click="toggleAccordion('Recreational')" v-bind:class="{ 'accordions__button--active': isOpen('Recreational') }">
<div class="accordions__icon">+</div>
</button>
</div>
</div>
<div class="container">
<div class="accordions__content rich-text" v-bind:class="{ 'accordions__content--expanded': isOpen('Recreational') }"><p class = "text" >AI has applications that can save lives, increase business revenue, and completely transform our education system. However, it also has many uses that make life more enjoyable and convenient. One AI service created by Salesforce summarizes long articles for people to read. People no longer need to sift through large amounts of information to learn the part that they need. This service brings information to people who don’t necessarily have the time to go through lengthy articles. AI can also be used in games. 18 years ago, IBM’s Deep Blue beat world champion Garry Kasparov at chess. Now, AI technologies such as Google’s AlphaZero can master any games that humans would take months to excel at in just a few hours. The applications of learning these games include providing challenging opponents to human players and to provide tips to humans on their gameplay. Even chess grandmasters such as Magnus Carlsen can improve their gameplay through AI.
</p></div>
</div>
</section>
</div>
</div>
</div>
<!-- competitions close -->
<div class="section white-bg">
<div class="container">
<div class="section-title">
<small>Specific to A.I.D.A</small>
<h3>Uses of A.I.D.A</h3>
</div>
<div class="row pt-4">
<div class="col-md-6">
<div>
<p style="float: left;"><img src="https://image.freepik.com/free-icon/nut-icon_318-84971.jpg" height="20px" width="20px" border="1px"></p>
<h4 class="mb-3">   Teacher</h4>
</div>
<p class="light-font mb-5">Want to learn a new topic? By collecting data from documents that users scan, A.I.D.A has developed a knowledge base of any topics pertaining to school as well as many life skills. A.I.D.A knows and will adapt to your learning style. </p>
<div>
<p style="float: left;"><img src="https://image.freepik.com/free-icon/nut-icon_318-84971.jpg" height="20px" width="20px" border="1px"></p>
<h4 class="mb-3">   Tutor</h4>
</div>
<p class="light-font mb-5">AIDA can create personalized study curriculums just for YOU. Have an upcoming test? A.I.D.A will prepare the perfect study guide for you and ask you questions about areas that you generally struggle with.
</p>
</div>
<div class="col-md-6">
<div>
<p style="float: left;"><img src="https://image.freepik.com/free-icon/nut-icon_318-84971.jpg" height="20px" width="20px" border="1px"></p>
<h4 class="mb-3">   Motivator</h4>
</div>
<p class="light-font mb-5">A.I.D.A uses Watson API when conversing with users to closely monitor emotions. It can detect when a user is stressed for a test, or having personal struggles and has learned to offer advice to users to reduce their emotional stress.</p>
<div>
<p style="float: left;"><img src="https://image.freepik.com/free-icon/nut-icon_318-84971.jpg" height="20px" width="20px" border="1px"></p>
<h4 class="mb-3">   Personal Assistant</h4>
</div>
<p class="light-font mb-5">Have a question? Ask A.I.D.A. Need to set reminders for upcoming tests? Ask A.I.D.A. Want to have a conversation about a topic that interests you? Ask A.I.D.A.
</p>
</div>
</div>
</div>
</div>
<div class="section" id="costs">
<div class="section-title">
<h3 class = "text-white">Our Pricing</h3>
</div>
<div class="container white-bg costscontainer">
<output for="range" class="output"></output>
<br>
<br>
<br>
<label for="range">
<input type="range" name="range" id="range" min="0" max="300" step="5" value="175"/>
</label>
<br>
<br>
<div class="row">
<div class="container">
<div class="col-xl-10 col-lg-12 mx-auto">
<p class = "text-center">A.I.D.A will be available through a subscription service. If you are simply looking to give the software a try, the affordable one month acesss option is the best for you. If you decide to continue using the application, the long term subscriptions will save you money. All subscription options will give you access to all of AIDA's features and benefits! </p>
</div>
</div>
</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/slider.js"></script>
<div class="main-wrapper" id="technologies">
<!-- Start Feature Area -->
<section class="featured-area">
<div class="container">
<div class="section-title">
<small>TECHNOLOGIES</small>
<h3>Current Technology vs. A.I.D.A </h3>
</div>
<div class="row">
<div class="col-md-4">
<div class="single-feature text-center">
<span class="lnr lnr-screen"></span>
<h3>IBM Watson</h3>
<p style="text-align:center">IBM’s Watson technology uses natural language processing and deep learning, both of which are branches of machine learning, to extract metadata and sentiment from text.</p>
<!-- Begin Modal -->
<script>
$('#watsonmodal').on('shown.bs.modal', function () {
$('#watsonbutton').trigger('focus')
})
</script>
<!-- Button trigger modal -->
<button type="button" id = "watsonbutton" class="btn btn-primary" data-toggle="modal" data-target="#watsonmodal">
More Details
</button>
<!-- Modal -->
<div class="modal fade" id="watsonmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"> <b>IBM Watson</b></h5>
<button type="button" class="btn btn-secondary" data-dismiss="modal">
X
</button>
</div>
<div class="modal-body">
<h5>Creation</h5>
<p style="text-align:justify">The development of Watson began in 2004 when IBM Research manager Charles Lickel challenged the company to create a system capable of playing Jeopardy. Over the next two years, Watson was trained with 500 clues from past runs of the TV shows. However, when initial tests ran in 2006, Watson responded correctly only 15% of the time. At this point, the team delegated more staff to solving these problems, and in 2011, Watson made its appearance on Jeopardy, beating champions Brad Rutter and Ken Jennings and winning the $1 million prize.</p>
<hr>
<h5>Purpose</h5>
<p style="text-align:justify"> Although Watson was initially developed for Jeopardy!, the tool has expanded to a variety of different purposes. It is currently used in healthcare to help physicians in hospitals treat their patients by creating treatment recommendation through the analysis of stored patient medical data.
Watson has also partnered with Pearson Education to create electronic storybooks that can tutor children in reading material. The technology is now even capable of weather forecasting using data from 200,000 weather stations.
</p>
<hr>
<h5>Limitations</h5>
<p style="text-align:justify">Although Watson can understand human language to a great degree, it cannot understand sarcasm and intended dialect. Humans can create and understand new slang terms that have never been heard before, but computers cannot do this. Computers like Watson are very literal and rational machines unlike humans. In the medical field, doctors use different shorthands for the same phrase (“essential hypertension” could be written as “e.hypertension” or “e.HTN” or “ess.HTN”). Humans can recognize that all of these phrases mean the same thing, but computers cannot unless trained with every single possibility or pattern.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
</div>
<!-- End Modal -->
</div>
</div>
<div class="col-md-4">
<div class="single-feature text-center">
<span class="lnr lnr-code"></span>
<h3>Mobile A.I.</h3>
<p style="text-align:center">Personal assistants such as Siri, Cortana, and Google Assistant are accessible at our fingertips. They can set reminders, make calls, and answer questions to make every day life easier.</p>
<!-- Begin Modal -->
<script>
$('#sirimodal').on('shown.bs.modal', function () {
$('#siributton').trigger('focus')
})
</script>
<!-- Button trigger modal -->
<button type="button" id = "siributton" class="btn btn-primary" data-toggle="modal" data-target="#sirimodal">
More Details
</button>
<!-- Modal -->
<div class="modal fade" id="sirimodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"><b>Siri/Google Assistant/Cortana</b></h5>
<button type="button" class="btn btn-secondary" data-dismiss="modal">
X
</button>
</div>
<div class="modal-body">
<h5>Creation</h5>
<p style="text-align:justify"><b>Apple’s Siri</b> was originally developed by the SRI International Artificial Intelligence center. In 2010, the intelligent voice assistant was released as an app on the iOS app store. Upon its success, Apple acquired the software, improved its speech recognition engine by working with Nuance Communications, and released it on the iPhone 4s in 2011.
<br>
<b>Microsoft’s Cortana</b> was initially prototyped in 2009 under the Microsoft Speech products team. To make the A.I. assistant as human-like as possible, they interviewed real human personal assistants, and these interviews led to the development of Cortana’s “notebook” feature. In 2015, Cortana was introduced to the public with the new Windows 10 devices.
<br>
<b>The Google Assistant</b> was the latest digital assistant to make its debut. It was introduced on mobile and smart home devices in May 2016. In 2017, it was introduced as a stand-alone mobile app for both Android and iOS devices.</p>
<hr>
<h5>Purpose</h5>
<p style="text-align:justify">
These mobile digital assistants allow users to control their device using natural voice commands. Users can send messages, make calls, set reminders, perform calculations, and search the internet. Siri, Cortana, and Google’s Assistant make everyday tasks hands-free, quicker, and more efficient.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
</div>
<!-- End Modal -->
</div>
</div>
<div class="col-md-4">
<div class="single-feature text-center">
<span class="lnr lnr-clock"></span>
<h3>A.I.D.A</h3>
<p style="text-align:center">AIDA uses OCR technology to convert inputted documents into text and performs latent semantic analysis to understand the user's intent and generate questions accordingly.</p>
<!-- Begin Modal -->
<script>
$('#aidamodal').on('shown.bs.modal', function () {
$('#aidabutton').trigger('focus')
})
</script>
<!-- Button trigger modal -->
<button type="button" id = "aidabutton" class="btn btn-primary" data-toggle="modal" data-target="#aidamodal">
More Details
</button>
<!-- Modal -->
<div class="modal fade" id="aidamodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">A.I.D.A</h5>
<button type="button" class="btn btn-secondary" data-dismiss="modal">
X
</button>
</div>
<div class="modal-body">
<h5>Deep Learning</h5>
<p style="text-align:justify">Deep learning is a branch of the broader machine learning category. While machine learning ecompasses algorithms that are task specific and based on data representations, deep learning focuses only on data representations. Deep learning models created artificial neural networks, simulating an actual human’s wiring, to link information and the relations between pieces of data. These neural network have been used to create language models that A.I systems can interpret.
</p>
<hr>
<h5>Natural Language Processing
</h5>
<p style="text-align:justify">Natural language processing is a field of deep learning that uses neural networks to process human language. The process by which a computer translates human speech is called latent semantic analysis (LSA). This is the process of creating relations between terms in a document and formulating major concepts based on these terms. The distributional hypothesis is an important assumption made by LSA because it states that synonyms words will occur in chunks in close proximity to each other. The major concepts determined from the text correspond directly with the user’s intent and their desired actions. This natural language process is what allows computers to converse like humans.</p>
<hr>
<h5>Optical Character Recognition
</h5>
<p style="text-align:justify">OCR is the translation of text images, handwritten documents, and computer passages into computer text. OCR is a common technology used in everyday life for digitising bank statements, receipts, passport documents, and mail. It is also essential to A.I.D.A because when a students sends pictures of his or her textbook passages, worksheets, or notes, it needs to be converted into computer text for A.I.D.A to interpret.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
</div>
</div>
</div>
</div>
</section>
</div>
<div class="section" id="safety">
<div class="container">
<div class="section3-title">
<h3>Safety & Liabilities</h3>
</div>
<p class = "text-center text-white">
A science fiction writer, Isaac Asimov, created three laws of robotics that must be followed to create harmless AI technologies. A.I.D.A was carefully designed to follow all three of these laws because here at A.I.D.A. Technologies, safety is our utmost priority.
</p>
<br>
<p class = "text-white" style = "text-align : justify;">✔ A robot may not injure a human being or, through inaction, allow a human being to come to harm.</p>
<p class = "text-justify text-white">✔ A robot must obey orders given it by human beings except where such orders would conflict with the First Law.</p>
<p class = "text-justify text-white">✔ A robot must protect its own existence as long as such protection does not conflict with the First or Second Law.</p>
<div class="row pt-4">
<div class="col-md-6">
<div class="section4-title" >
<h4 class="mb-3">First Law</h4>
<p class="light-font mb-5">A.I.D.A. was not designed with an intention to harm, and our self-learning algorithms strictly pertain to educating students (creating test questions, evaluating learning styles, etc.).
</p>
<h4 class="mb-3">Second Law</h4>
<p class="light-font mb-5">A.I.D.A creates curriculums and questions based on <b>what the user wants</b> and his/her learning style, so our users have maximum control over the software.</p>
</div>
</div>
<div class="col-md-6">
<div class="section4-title" >
<h4 class="mb-3">Third Law</h4>
<p class="light-font mb-5">A.I.D.A. does not have any self-destructive capabilities and simply serves as an interactive learning module.
</p>
<h4 class="mb-3">Potential Liabilities</h4>
<p class="light-font mb-5">A.I.D.A. collects large amounts of data from the documents that users scan and how they react to certain learning methods. This may raise privacy concerns, so the data collected by A.I.D.A is tracked anonymously i.e. without a name associated with it.</p>
</div>
</div>
</div>
</div>
</div>
<footer class="my-5 text-center">
<small>
<a href="" style="text-decoration:none" class="m-2">Webmaster Team T5248 </a>
<br>
<a href="" style="text-decoration:none" class="m-2">COPYRIGHT © 2018. West Windsor Plainsboro High School North TSA</a>
</small>
</footer>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js'></script>
<script type ="text/javascript" src="js/competitions.js"> </script>
<script src='https://cdn.jsdelivr.net/vue/latest/vue.min.js'></script>
<script src='js/botui.min.js'></script>
<script src="js/bot.js"></script>
<script src="js/animsition.min.js"></script>
<script>
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
if(isChrome)
{
$(document).ready(function() {
$(".animsition").animsition({
inClass: 'zoom-in',
outClass: 'zoom-out',
inDuration: 2500,
outDuration: 1000,
linkElement: '.animsition-link',
loading: true,
loadingParentElement: 'body',
loadingClass: 'animsition-loading',
loadingInner: '',
timeout: false,
timeoutCountdown: 5000,
onLoadEvent: true,
browser: [ 'animation-duration', '-webkit-animation-duration'],
overlay : false,
overlayClass : 'animsition-overlay-slide',
overlayParentElement : 'body',
transition: function(url){ window.location.href = url; }
});
});
}
else
{
var NAME = document.getElementById("ani");
var currentClass = NAME.className;
NAME.className = "";
var NAME = document.getElementById("cte");
var currentClass = NAME.className;
NAME.className = "btn btn-outline-light my-3 my-sm-0 ml-lg-3";
var NAME = document.getElementById("chapter");
var currentClass = NAME.className;
NAME.className = "btn btn-outline-light my-3 my-sm-0 ml-lg-3";
var NAME = document.getElementById("about");
var currentClass = NAME.className;
NAME.className = "btn btn-outline-light my-3 my-sm-0 ml-lg-3";
}
</script>
</body>
</div>
</html>