-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathREADME_tmp.html
More file actions
1397 lines (1331 loc) · 61.6 KB
/
README_tmp.html
File metadata and controls
1397 lines (1331 loc) · 61.6 KB
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
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html>
<head>
<title>README.md</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<style>
/* https://github.com/microsoft/vscode/blob/master/extensions/markdown-language-features/media/markdown.css */
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
body {
font-family: var(--vscode-markdown-font-family, -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif);
font-size: var(--vscode-markdown-font-size, 14px);
padding: 0 26px;
line-height: var(--vscode-markdown-line-height, 22px);
word-wrap: break-word;
}
#code-csp-warning {
position: fixed;
top: 0;
right: 0;
color: white;
margin: 16px;
text-align: center;
font-size: 12px;
font-family: sans-serif;
background-color:#444444;
cursor: pointer;
padding: 6px;
box-shadow: 1px 1px 1px rgba(0,0,0,.25);
}
#code-csp-warning:hover {
text-decoration: none;
background-color:#007acc;
box-shadow: 2px 2px 2px rgba(0,0,0,.25);
}
body.scrollBeyondLastLine {
margin-bottom: calc(100vh - 22px);
}
body.showEditorSelection .code-line {
position: relative;
}
body.showEditorSelection .code-active-line:before,
body.showEditorSelection .code-line:hover:before {
content: "";
display: block;
position: absolute;
top: 0;
left: -12px;
height: 100%;
}
body.showEditorSelection li.code-active-line:before,
body.showEditorSelection li.code-line:hover:before {
left: -30px;
}
.vscode-light.showEditorSelection .code-active-line:before {
border-left: 3px solid rgba(0, 0, 0, 0.15);
}
.vscode-light.showEditorSelection .code-line:hover:before {
border-left: 3px solid rgba(0, 0, 0, 0.40);
}
.vscode-light.showEditorSelection .code-line .code-line:hover:before {
border-left: none;
}
.vscode-dark.showEditorSelection .code-active-line:before {
border-left: 3px solid rgba(255, 255, 255, 0.4);
}
.vscode-dark.showEditorSelection .code-line:hover:before {
border-left: 3px solid rgba(255, 255, 255, 0.60);
}
.vscode-dark.showEditorSelection .code-line .code-line:hover:before {
border-left: none;
}
.vscode-high-contrast.showEditorSelection .code-active-line:before {
border-left: 3px solid rgba(255, 160, 0, 0.7);
}
.vscode-high-contrast.showEditorSelection .code-line:hover:before {
border-left: 3px solid rgba(255, 160, 0, 1);
}
.vscode-high-contrast.showEditorSelection .code-line .code-line:hover:before {
border-left: none;
}
img {
max-width: 100%;
max-height: 100%;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:focus,
input:focus,
select:focus,
textarea:focus {
outline: 1px solid -webkit-focus-ring-color;
outline-offset: -1px;
}
hr {
border: 0;
height: 2px;
border-bottom: 2px solid;
}
h1 {
padding-bottom: 0.3em;
line-height: 1.2;
border-bottom-width: 1px;
border-bottom-style: solid;
}
h1, h2, h3 {
font-weight: normal;
}
table {
border-collapse: collapse;
}
table > thead > tr > th {
text-align: left;
border-bottom: 1px solid;
}
table > thead > tr > th,
table > thead > tr > td,
table > tbody > tr > th,
table > tbody > tr > td {
padding: 5px 10px;
}
table > tbody > tr + tr > td {
border-top: 1px solid;
}
blockquote {
margin: 0 7px 0 5px;
padding: 0 16px 0 10px;
border-left-width: 5px;
border-left-style: solid;
}
code {
font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
font-size: 1em;
line-height: 1.357em;
}
body.wordWrap pre {
white-space: pre-wrap;
}
pre:not(.hljs),
pre.hljs code > div {
padding: 16px;
border-radius: 3px;
overflow: auto;
}
pre code {
color: var(--vscode-editor-foreground);
tab-size: 4;
}
/** Theming */
.vscode-light pre {
background-color: rgba(220, 220, 220, 0.4);
}
.vscode-dark pre {
background-color: rgba(10, 10, 10, 0.4);
}
.vscode-high-contrast pre {
background-color: rgb(0, 0, 0);
}
.vscode-high-contrast h1 {
border-color: rgb(0, 0, 0);
}
.vscode-light table > thead > tr > th {
border-color: rgba(0, 0, 0, 0.69);
}
.vscode-dark table > thead > tr > th {
border-color: rgba(255, 255, 255, 0.69);
}
.vscode-light h1,
.vscode-light hr,
.vscode-light table > tbody > tr + tr > td {
border-color: rgba(0, 0, 0, 0.18);
}
.vscode-dark h1,
.vscode-dark hr,
.vscode-dark table > tbody > tr + tr > td {
border-color: rgba(255, 255, 255, 0.18);
}
</style>
<style>
/* Tomorrow Theme */
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
/* Tomorrow Comment */
.hljs-comment,
.hljs-quote {
color: #8e908c;
}
/* Tomorrow Red */
.hljs-variable,
.hljs-template-variable,
.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-deletion {
color: #c82829;
}
/* Tomorrow Orange */
.hljs-number,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-meta,
.hljs-link {
color: #f5871f;
}
/* Tomorrow Yellow */
.hljs-attribute {
color: #eab700;
}
/* Tomorrow Green */
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition {
color: #718c00;
}
/* Tomorrow Blue */
.hljs-title,
.hljs-section {
color: #4271ae;
}
/* Tomorrow Purple */
.hljs-keyword,
.hljs-selector-tag {
color: #8959a8;
}
.hljs {
display: block;
overflow-x: auto;
color: #4d4d4c;
padding: 0.5em;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
</style>
<style>
/*
* Markdown PDF CSS
*/
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "Meiryo";
padding: 0 12px;
}
pre {
background-color: #f8f8f8;
border: 1px solid #cccccc;
border-radius: 3px;
overflow-x: auto;
white-space: pre-wrap;
overflow-wrap: break-word;
}
pre:not(.hljs) {
padding: 23px;
line-height: 19px;
}
blockquote {
background: rgba(127, 127, 127, 0.1);
border-color: rgba(0, 122, 204, 0.5);
}
.emoji {
height: 1.4em;
}
code {
font-size: 14px;
line-height: 19px;
}
/* for inline code */
:not(pre):not(.hljs) > code {
color: #C9AE75; /* Change the old color so it seems less like an error */
font-size: inherit;
}
/* Page Break : use <div class="page"/> to insert page break
-------------------------------------------------------- */
.page {
page-break-after: always;
}
</style>
<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
</head>
<body>
<script>
mermaid.initialize({
startOnLoad: true,
theme: document.body.classList.contains('vscode-dark') || document.body.classList.contains('vscode-high-contrast')
? 'dark'
: 'default'
});
</script>
<h2 id="nus-orbital---milestone-3-submission">NUS Orbital - Milestone 3 Submission</h2>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/client/src/AppImages/Mei Chibi Icons/Mei_Chibi_Icon.png" alt="Mei Chibi Icon"></p>
<h3 id="team-name">Team Name :</h3>
<p>Assistant AI 助手 AI</p>
<h3 id="proposed-level-of-achievement">Proposed Level of Achievement :</h3>
<p>Apollo 11</p>
<h3 id="index">Index</h3>
<ul>
<li>Note: Feel Free to Use Find Command for Quick Searching of the Following Keywords.</li>
</ul>
<ol>
<li>Motivation</li>
<li>Aim</li>
<li>User Stories</li>
<li>Tech Stack</li>
<li>Try It Yourself!</li>
<li>Project Scope</li>
<li>Features Summary</li>
<li>Core Features Details</li>
<li>Extension Features Details</li>
<li>Milestone Timeline</li>
<li>Diagrams</li>
<li>Software Engineering Principles</li>
<li>Technical Proof of Concept</li>
<li>Project Log</li>
<li>Mei's Behavior Index</li>
<li>Artist</li>
<li>Art Gallery</li>
</ol>
<h3 id="motivation">Motivation</h3>
<p>Welcome to our web application, 助手 AI , which stands for Assistant AI in Japanese! Our application will be a task management web application that allows users to track and organise their due tasks for better productivity and boosts user engagement via implementing a virtual assistant character.</p>
<p>With our Web Application, we aim to add utility and functionality with personalization. We understand that people have personal, work and familial responsibilities, which are all bound to have tasks to be completed. 助手 AI aims to help users organise tasks, record ongoing progress and provide analytics on their current productivity with a personal Assistant AI to serve reminders and engage users as their own personal characters.</p>
<h3 id="aim">Aim</h3>
<p>Our goal is to develop a task management application that helps users to organize their tasks efficiently and encourage commitment to task fulfillment through a personal rewards system.</p>
<h3 id="user-stories">User Stories</h3>
<ol>
<li>As a University student who has a lot of tasks at hand, I sometimes don't feel the motivation to complete my tasks.</li>
<li>As a student who always create and organize my tasks on my smartphone, I wish that someone would help me automate that process through voice commands.</li>
<li>As a Computer Science student who spends most of my time in front of a screen, sometimes I get too carried away and notifications of my tasks would go unnoticed and I would miss a deadline, I wish there was an assistant who would verbally remind me of those tasks.</li>
<li>As a University student who has to juggle between multiple tasks of different levels of priorities, I wished there was AI who could help me with that and give reminders based on deadline priority.</li>
</ol>
<h3 id="tech-stack">Tech Stack</h3>
<ol>
<li>Frontend - React, HTML, CSS</li>
<li>Backend</li>
<li>Chatbot - Python, Flask</li>
<li>Tasks - Node.js, Express.js</li>
<li>Database - PostgreSQL</li>
<li>Unit Testing - Jest, Vitest & React Testing Library</li>
</ol>
<h3 id="try-it-yourself">Try It Yourself!</h3>
<p><strong>We have prepared two ways for users to test out our web application.</strong></p>
<ul>
<li>
<p><strong>Testing Online</strong></p>
<ul>
<li>We have deployed the application in the following manner: The Front-end on Netlify, the Back-end, Database, and Chat Bot on Render.</li>
<li>Please use this link to test our web application: <a href="https://assistantmei.netlify.app">https://assistantmei.netlify.app</a></li>
</ul>
</li>
<li>
<p><strong>Testing on Local Machine (testInstallation branch)</strong></p>
<ol>
<li>Users are required to have the following installed: Node.js, Express.js, XAMPP, and PostgreSQL.</li>
<li>After cloning, users need to setup a PostgreSQL database and configure it to the config folder by matching the name and password.</li>
<li>Run the XAMPP control panel and click on the "start" button for both Apache and PostgreSQL.</li>
<li>If you wish to test out getting weather information from the AI Assistant, you will have to obtain an API key from OpenWeatherMap.org.</li>
<li>Create a .env file in the client directory, and add</li>
</ol>
<ul>
<li>VITE_EXPRESS_API_URL</li>
<li>VITE_CHATBOT_FLASK_API_URL</li>
<li>VITE_WEATHER_API_Key</li>
</ul>
<ol start="6">
<li>Create a .env file in the server directory, and add</li>
</ol>
<ul>
<li>NODEMAILER_EMAIL (Personal / Dummy email to send email)</li>
<li>NODEMAILER_PW (App Password, 2FA required) Setup guide: https://nodemailer.com/usage/using-gmail/</li>
<li>PORT</li>
<li>Secret_Key</li>
<li>DATABASE (Database name, to be created in PostGreSQL first)</li>
<li>DB_USER (PSQL)</li>
<li>PASSWORD (PSQL)</li>
</ul>
<ol start="7">
<li>In the /server directory, open server.js and insert the following code.</li>
<li>Run "pip3 install -r requirements.txt" in the terminal of the ChatBot directory to install all python dependencies.</li>
<li>For running the frontend, users may change directory to /client, run "npm install" in the terminal to install all dependencies, and run "npm run dev".</li>
<li>For running the backend, users may change directory to /server, run "npm install" in the terminal to install all dependencies, and run "npm run dev".</li>
<li>For running the chatbot, users may change directory to /ChatBot, and run "python main.py".</li>
</ol>
</li>
</ul>
<h3 id="project-scope">Project Scope</h3>
<p>Assistant AI is essentially a task management system with the help of a Virtual Assistant to automate simple tasks for a more interactive user experience.</p>
<h3 id="features-summary">Features Summary</h3>
<h4 id="core">Core</h4>
<ol>
<li><strong>The Assistant AI.</strong></li>
<li>Users to be able to <strong>sign up</strong> for account.</li>
<li>Users to be able to <strong>log in / log out</strong> of account.</li>
<li>Users to be able to <strong>add tasks.</strong></li>
<li>Users to be able to <strong>edit tasks.</strong></li>
<li>Users to be able to <strong>delete tasks.</strong></li>
<li>Users to be able to <strong>complete tasks.</strong></li>
<li>Users to be able to <strong>uncomplete tasks.</strong></li>
<li>Users to <strong>receive reminders</strong> on time.</li>
<li>Users to be able to <strong>view tasks by categorisation.</strong></li>
<li>User <strong>productivity report analysis (based on task completion).</strong></li>
<li><strong>Chat with Mei!</strong></li>
<li><strong>Quitting an Operation/ Going back a Step</strong></li>
<li>User input to Mei in chatroom to <strong>automate each task.</strong></li>
<li><strong>Interactive messages</strong> <strong>(Birthday wishes, greetings, daily life conversations).</strong></li>
</ol>
<p><strong>Extensions</strong></p>
<ol>
<li>User Onboarding.</li>
<li>Tasks Prioritisation Suggestion by AI.</li>
<li>Recurring Task (Periodically Recurring Tasks).</li>
<li>Exchange of Points for Decorative Items and Accessories for the User and Virtual Assistant.</li>
<li>User Profile, Friend Request and Equipment System.</li>
</ol>
<h3 id="core-features-details">Core Features Details</h3>
<ul>
<li>
<p><strong>Assistant AI</strong></p>
<ul>
<li>
<p>Why call our web application Assistant AI when we don't even have one present, right?</p>
</li>
<li>
<p>Meet our user's personal Virtual Assistant AI, Mei!</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/MeetOurAI.png" alt="Meet Our AI"></p>
</li>
<li>
<p>All character sprites are provided by an artist friend of Jun Xi, Rena (@__rrena on Twitter/ X)! More details of her can be found at the end of this README, including the full set of character sprites that she has provided us for this project.</p>
</li>
<li>
<p>Mei (めい) is a Japanese high schooler who lives in a virtual school within our web application and she loves to chat and assist anyone who comes to visit her!</p>
</li>
<li>
<p>Mei acts as our mascot and will be the one users see and interact with the most throughout their experience on our application!</p>
</li>
</ul>
</li>
<li>
<p><strong>Sign Up</strong></p>
<ul>
<li>
<p>User to be able to sign up for new account using a <strong>unique</strong> username and password.</p>
</li>
<li>
<p>Username to be unique, user to face error if signing up for new account using existing username</p>
</li>
<li>
<p>Users to start off with 0 points</p>
<p><strong>Instructions/ Details</strong></p>
<ul>
<li>
<p>The screen below is what every new user would see when they click on the Sign Up button.</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/SignUpPage.png" alt="Sign Up Page"></p>
</li>
<li>
<p>By entering a unique username, birthdate, and valid password, the new user can press Sign Up at the bottom of the form to submit and create a new account.</p>
</li>
<li>
<p>A password is valid if and only if it satisfies the following criteria:</p>
</li>
<li>
<p>At least an uppercase and lowercase alphabet.</p>
</li>
<li>
<p>At least a number.</p>
</li>
<li>
<p>At least 8 characters.</p>
</li>
<li>
<p>Upon Successful sign up, the user will be brought to our home page.</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/HomePage.png" alt="Home Page"></p>
</li>
</ul>
</li>
</ul>
</li>
<li>
<p><strong>Login / Logout</strong></p>
<ul>
<li>
<p>On Login, users should be redirected to the home page as shown above where there is a dashboard that displays the following:</p>
</li>
<li>
<p>Tasks by deadline and priority</p>
</li>
<li>
<p>Reminders of Tasks</p>
</li>
<li>
<p>User Productivity Rate</p>
</li>
<li>
<p>On Logout, users should be redirected to the login page</p>
<p><strong>Instructions/ Details</strong></p>
<ul>
<li>
<p>The screen below is what every new user would see when they click on the Login button.</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/LoginPage.png" alt="Login Page"></p>
</li>
<li>
<p>Existing users can enter their username and password, then press on the Login button at the bottom of the form to login.</p>
</li>
</ul>
</li>
</ul>
</li>
<li>
<p><strong>Add Tasks</strong></p>
<ul>
<li>
<p>Users to be able to add tasks with the following fields:</p>
</li>
<li>
<p>Title</p>
</li>
<li>
<p>Description</p>
</li>
<li>
<p>Category</p>
</li>
<li>
<p>Recurring mode</p>
</li>
<li>
<p>Priority</p>
</li>
<li>
<p>Reminder (DateTime)</p>
</li>
<li>
<p>Deadline (DateTime)</p>
<p><strong>Instructions/ Details</strong></p>
<ul>
<li>
<p>There are 2 ways for users to add a new task, for this part we will be discussing the first way.</p>
</li>
<li>
<p>Users can look out for the Add Task button (which should be quite obvious to spot).</p>
</li>
<li>
<p>The button should look something like this.</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/HomePageAddTaskButton.png" alt="Home Page Add Task Button"></p>
</li>
<li>
<p>When the button is pressed, a form pops up for the user to fill up.</p>
</li>
<li>
<p>The user will need to enter all the fields as required, then click on the confirmation button to submit.</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/AddTaskModalEmpty.png" alt="Add Task Modal Empty"></p>
</li>
<li>
<p>In the form, users can enable recurring mode to get reminders for the task in set intervals.</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/AddTaskRecurringMode.png" alt="Add Task Recurring Mode"></p>
</li>
<li>
<p>A priority level must also be chosen (i.e. Low, Medium, or High)</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/AddTaskPriority.png" alt="Add Task Priority"></p>
</li>
<li>
<p>A deadline in which when passed will result in the task being overdue, and a reminder date when users will receive a reminder for that task can be set under a few conditions.</p>
</li>
<li>
<p>The deadline and reminder date must not come before the date the task is added.</p>
</li>
<li>
<p>The reminder date must come before the deadline (It kinda makes sense right?)</p>
</li>
<li>
<p>Failure to comply to the above conditions will result in an error message.</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/AddTaskDeadline&Reminder.png" alt="Add Task Deadline & Reminder"></p>
</li>
<li>
<p>Once the details are filled up and ready, just click on the ADD button to add the new task!</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/AddTaskConfirmation.png" alt="Add Task Confirmation"></p>
</li>
<li>
<p>Afterwards, the newly added task can be found in both the Upcoming and Priority section of the task containers.</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/Upcoming&PriorityTasksContainer.png" alt="Priority Tasks Container"></p>
</li>
</ul>
</li>
</ul>
</li>
<li>
<p><strong>Edit Tasks</strong></p>
<ul>
<li>
<p>Users to be able to edit the following fields for a task:</p>
</li>
<li>
<p>Title</p>
</li>
<li>
<p>Description</p>
</li>
<li>
<p>Category</p>
</li>
<li>
<p>Recurring mode</p>
</li>
<li>
<p>Priority</p>
</li>
<li>
<p>Reminder (DateTime)</p>
</li>
<li>
<p>Deadline (DateTime)</p>
<p><strong>Instructions/ Details</strong></p>
<ul>
<li>
<p>To promote a flexible task managing experience, we (just like any other task management applications) allow our users to edit their existing tasks in the case where they change their minds.</p>
</li>
<li>
<p>So how can users do it? It's simple! Users may notice 3 buttons next to each of their tasks.</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/ShowTaskButtons.png" alt="Show Task Buttons"></p>
</li>
<li>
<p>And there's the Edit button! Similar, users may click on it to start editing their tasks.</p>
</li>
<li>
<p>The exact same pop up screen for adding tasks would appear, however this time with the fields filled out according to the task's current data.</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/EditTaskModalBeforeChange.png" alt="Edit Task Modal Before Change"></p>
</li>
<li>
<p>And it's also the exact same procedure as Add Task! Just change whichever fields you like, then click on the UPDATE button to edit that task!</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/EditTaskModalAfterChange.png" alt="Edit Task Modal After Change"></p>
</li>
<li>
<p>The edited task can be found at the usual place.</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/UpcomingTasksContainer.png" alt="Upcoming Tasks Container"></p>
</li>
</ul>
</li>
</ul>
</li>
<li>
<p><strong>Delete Tasks</strong></p>
<ul>
<li>
<p>Users to be able to delete tasks from the dashboard / edit task section</p>
<p><strong>Instructions/ Details</strong></p>
<ul>
<li>
<p>Take a look at the task containers, other than the Edit button, there are 2 more buttons.</p>
</li>
<li>
<p>The x button is what users should click to delete unwanted tasks!</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/UpcomingTasksContainer.png" alt="Upcoming Tasks Container"></p>
</li>
<li>
<p>Once clicked, a confirmation pop up window will appear, just click DELETE to confirm delete!</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/DeleteConfirmation.png" alt="Delete Confirmation"></p>
</li>
</ul>
</li>
</ul>
</li>
<li>
<p><strong>Complete Tasks</strong></p>
<ul>
<li>
<p>Users to be able to press complete task, in which task completion will reward users with XP points. Late completion of tasks will reward with 1 points.</p>
<p><strong>Instruction</strong></p>
<ul>
<li>
<p>What about the final button? Well, it is a tick, which is to complete a task!</p>
</li>
<li>
<p>Similarly, there will be a confirmation pop up window, just click on COMPLETE to complete the task!</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/CompleteConfirmation.png" alt="Complete Confirmation"></p>
</li>
<li>
<p>Points based on how early the user has completed the task and the priority level of the task will be calculated and deposited into the user's account.</p>
</li>
<li>
<p>The points can be found on the left-hand side of the home page, or at the top right corner where the user's information can be found next to the Log Out button.</p>
</li>
<li>
<p>Hooray! The user has completed their task and earned 17 points!</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/ShowUserPoints1.png" alt="Show User Points 1"></p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/ShowUserPoints2.png" alt="Show User Points 2"></p>
</li>
</ul>
</li>
</ul>
</li>
<li>
<p><strong>Navigation Bar</strong></p>
<ul>
<li>
<p>Users to be able to navigate through the application using a navigation bar.</p>
<p><strong>Instructions/ Details</strong></p>
<ul>
<li>
<p>The navigation bar can be found at the top of every page throughout the application.</p>
</li>
<li>
<p>Users can click on any of them to navigate to the page they desire.</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/NavBar.png" alt="Navigation Bar"></p>
</li>
</ul>
</li>
</ul>
</li>
<li>
<p><strong>Receive Reminders</strong></p>
<ul>
<li>
<p>Users to receive reminders from the AI Assistant when the task has reached the reminder date.</p>
<p><strong>Instructions/ Details</strong></p>
<ul>
<li>As shown in the images above, users are required to enter a reminder date for each task in order for Mei to remind them on time.</li>
<li>Users will be receiving reminders in two different ways.</li>
</ul>
<ol>
<li>Email</li>
</ol>
<ul>
<li>An email will be sent out to the user's email address, this is what the email address field at the sign up page is for!</li>
</ul>
<ol>
<li>Reminder Bell</li>
</ol>
<ul>
<li>
<p>Users may have noticed a bell positioned next to their user profile information in the top right corner.</p>
</li>
<li>
<p>This reminder bell is shown ringing with a red notification mark to indicate there is a reminder to be read.</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/RingingReminderBell.png" alt="Ringing Reminder Bell"></p>
</li>
<li>
<p>When the user clicks on the ringing bell, a reminder window in the form of a chat room pops up, which will then simulate Mei sending the user messages to remind them of their upcoming, overdue, reminder, and most prioritised tasks.</p>
</li>
<li>
<p>The following image is a sample of a few messages in the reminder window.</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/ReminderRoom.png" alt="Reminder Room"></p>
</li>
<li>
<p>Once the reminder has been completed, and the user decides to close the window, the reminder bell will stop ringing and has a green tick next to it.</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/CheckedReminderBell.png" alt="Checked Reminder Bell"></p>
</li>
</ul>
</li>
</ul>
</li>
<li>
<p><strong>View Tasks - Categorisation</strong></p>
<ul>
<li>
<p>Users to be able to sort their task list using a sidebar that shows the filters available.</p>
<p><strong>Instructions/ Details</strong></p>
<ul>
<li>
<p>To view all of the user's tasks, the user can navigate to My Tasks from the navigation bar. (See above)</p>
</li>
<li>
<p>The user will be able to see the My Tasks page as follows.</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/MyTasksPage.png" alt="My Tasks Page"></p>
</li>
<li>
<p>All the tasks have been nicely categorised by Mei into their own categories, as well as by their priority levels.</p>
</li>
<li>
<p>There's even another Add Task button!</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/MyTasksSideBar.png" alt="My Tasks Side Bar"></p>
</li>
<li>
<p>Once the user has added a task, they should be able to view their tasks in detail as shown below.</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/AllTasksSection.png" alt="All Tasks Section"></p>
</li>
<li>
<p>There are also the same 3 buttons for each tasks to Edit, Complete, or Delete!</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/IncompleteTaskDetails.png" alt="Incomplete Task Details"></p>
</li>
</ul>
</li>
</ul>
</li>
<li>
<p><strong>Uncomplete Tasks</strong></p>
<ul>
<li>
<p>Users to be able to press uncomplete task, in which points earned will be deducted.</p>
<p><strong>Instructions/ Details</strong></p>
<ul>
<li>
<p>Do you remember the task that we have completed previously? Mei doesn't just remove it completely like how she deletes your tasks! Instead, completed tasks are stored in the Completed section of the user's My Tasks page.</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/CompletedTaskSection.png" alt="Completed Task Section"></p>
</li>
<li>
<p>Let's zoom in a little, we can observe that instead of the Complete button, there is now an Uncomplete button!</p>
</li>
<li>
<p>Users can click on it to bring their tasks back to the “Incomplete” status and the points will also be taken out!</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/CompletedTaskDetails.png" alt="Completed Task Details"></p>
</li>
<li>
<p>As usual, a confirmation pop up window will appear in case of accidents!</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/UncompleteConfirmation.png" alt="Uncomplete Confirmation"></p>
</li>
</ul>
</li>
</ul>
</li>
<li>
<p><strong>Productivity Report</strong></p>
<ul>
<li>
<p>Generate a productivity report showing productivity rate based on number of tasks completed, date of task completion relative to deadline, and priority of tasks completed.</p>
</li>
<li>
<p>Tasks completed before the deadline will result in higher productivity.</p>
</li>
<li>
<p>Tasks completed after the deadline will result in lower productivity.</p>
</li>
<li>
<p>Tasks yet to be completed after the deadline will also result int lower productivity.</p>
</li>
<li>
<p>The priority of tasks will affect the weightage and its increase on decrease in productivity rate.</p>
<p><strong>Instructions/ Details</strong></p>
<ul>
<li>
<p>Other than points, there is one more thing that users can view from the left-hand side in the home page, which is the productivity report!</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/HomePageLeftSideBar.png" alt="Home Page Left Side Bar"></p>
</li>
<li>
<p>As mentioned above, only tasks completed on time would result in a higher productivity, so be sure to do them!</p>
</li>
</ul>
</li>
</ul>
</li>
<li>
<p><strong>Chat with Mei!</strong></p>
<ul>
<li>
<p>A chatroom that allows users to chat with the AI Assistant, Mei.</p>
<p><strong>Instructions/ Details</strong></p>
<ul>
<li>
<p>Mei's AI model is built in Python using machine learning libraries such as tflearn and tensorflow, as well as the NumPy library to deal with the linear algebra.</p>
</li>
<li>
<p>Mei has a pre-defined behavior that is stored as a JavaScript object, which contains the response type, user input pattern, and the possible response that Mei can give. These are all stored using arrays. (A full set of possible inputs will be appended at the end)</p>
</li>
<li>
<p>The training data is prepared using this behavior object and is used to train the model's deep neural network.</p>
</li>
<li>
<p>Users can navigate to the chat room by first finding Mei, who will be standing by the classroom door.</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/NavigateToChatPage1.png" alt="Navigate To Chat Page 1"></p>
</li>
<li>
<p>By hovering over Mei, users can observe an expression change.</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/NavigateToChatPage2.png" alt="Navigate To Chat Page 2"></p>
</li>
<li>
<p>Users will then be navigated to the chat room by simply clicking on her!</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/ChatPage.png" alt="Chat Page"></p>
</li>
<li>
<p>This is the area where users interacts with Mei by text.</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/ChatRoomContainer.png" alt="Chat Room Container"></p>
</li>
<li>
<p>To write a message, simply click on the input area and start typing!</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/InputArea.png" alt="Input Area"></p>
</li>
<li>
<p>To send the message, users can just press Enter on their keyboards, or click on the send icon on the right-hand side.</p>
</li>
<li>
<p>When a message is sent, notice an expression change from Mei as she's typing a reply!</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/ChatPageTexting.png" alt="Chat Page Texting"></p>
</li>
<li>
<p>Mei will then return to her usual expression with a new response from her appearing in the chat room!</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/ChatPageStaring.png" alt="Chat Page Staring"></p>
</li>
<li>
<p>When the AI model receives an input, its neural network will breakdown the sentence string and try to predict its response type.</p>
</li>
<li>
<p>Once a response type is predicted, a random response will be selected using the random Python library and sent back to the front-end which shows on the user's screen.</p>
</li>
<li>
<p>Of course, when Mei receives an input which she doesn't understand, the response type would simply be “Unsure” and one random response from the specified array will be returned.</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/UnsureResponse.png" alt="Unsure Response"></p>
</li>
<li>
<p>Just like in the home page, a chat bubble is placed above Mei to hint the user in the type of inputs she can take in which changes at random intervals!</p>
</li>
<li>
<p>We have added a <strong>“Behavior Index”</strong> button at the side so that users can take a look at the behavior index in the application itself by clicking on it.</p>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/BehaviorIndex.png" alt="Behavior Index"></p>
</li>
<li>
<p>Users may input similar texts to (hopefully) obtain the desired response!</p>
</li>
</ul>
</li>
</ul>
</li>
<li>
<p><strong>Automation Task</strong></p>
<ul>
<li>
<p>Website to allow interaction with Mei to add, edit, and delete tasks.</p>
<p><strong>Instructions/ Details</strong></p>
<ul>
<li>In the chat room, users can give commands like add task, edit task, and delete task to initiate the respective task operations.</li>
<li>For <strong>adding a new task</strong>, a form like the one below will be brought up where users can enter the details before confirming.</li>
</ul>
<p><img src="file:///c:/Users/ernes/OneDrive/Documents/Godot Game Projects/temp/Assistant-AI/images/CoreFeaturesInstructionImg/AutomationAddTaskForm.png" alt="Automation Add Task Form"></p>
<ul>
<li>For <strong>editing an existing task</strong>, Mei will first ask the user which task they would like to edit (by index), then a similar form but with the fields filled out will appear instead.</li>