20 |
21 |
22 |
23 |
24 |
I N E R T I A
25 |
I'm a Virtual Assistant how can i help you
26 |
28 |
29 |
Click here to speak
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;200;300;400;500;600;700&display=swap");
2 |
3 | * {
4 | margin: 0;
5 | padding: 0;
6 | box-sizing: border-box;
7 | font-family: "Roboto Mono", monospace;
8 | }
9 |
10 | .main {
11 | min-height: 100vh;
12 | position: relative;
13 | width: 100%;
14 | background: #000;
15 | display: flex;
16 | flex-direction: column;
17 | align-items: center;
18 | justify-content: center;
19 | }
20 |
21 | .main .image-container {
22 | padding: 10px;
23 | }
24 |
25 | .main .image-container .image {
26 | width: 100%;
27 | display: flex;
28 | align-items: center;
29 | justify-content: center;
30 | }
31 |
32 | .main .image-container .image img {
33 | width: 170px;
34 | align-items: center;
35 | }
36 |
37 | .main .image-container h1 {
38 | color: #00bcd4;
39 | text-align: center;
40 | margin-bottom: 10px;
41 | font-size: 40px;
42 | }
43 |
44 | .main .image-container p {
45 | color: #324042;
46 | text-align: center;
47 | margin-bottom: 40px;
48 | }
49 |
50 | .main .input {
51 | display: flex;
52 | justify-content: center;
53 | align-items: center;
54 | width: 40vw;
55 | height: 50px;
56 | border-radius: 20px;
57 | background: rgb(202 253 255 / 50%);
58 | }
59 |
60 | .main .input .talk {
61 | background: transparent;
62 | outline: none;
63 | border: none;
64 | width: 50px;
65 | height: 50px;
66 | display: flex;
67 | justify-content: center;
68 | align-items: center;
69 | font-size: 15px;
70 | cursor: pointer;
71 | }
72 |
73 | .main .input .talk i {
74 | font-size: 20px;
75 | color: #aed0d0;
76 | }
77 |
78 | .main .input .content {
79 | color: #aed0d0;
80 | font-size: 15px;
81 | margin-right: 20px;
82 | }
83 |
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | const btn = document.querySelector('.talk');
2 | const content = document.querySelector('.content');
3 |
4 | function speak(sentence) {
5 | const text_speak = new SpeechSynthesisUtterance(sentence);
6 |
7 | text_speak.rate = 1;
8 | text_speak.pitch = 1;
9 |
10 | window.speechSynthesis.speak(text_speak);
11 | }
12 |
13 | function wishMe() {
14 | var day = new Date();
15 | var hr = day.getHours();
16 |
17 | if(hr >= 0 && hr < 12) {
18 | speak("Good Morning Boss");
19 | }
20 |
21 | else if(hr == 12) {
22 | speak("Good noon Boss");
23 | }
24 |
25 | else if(hr > 12 && hr <= 17) {
26 | speak("Good Afternoon Boss");
27 | }
28 |
29 | else {
30 | speak("Good Evening Boss");
31 | }
32 | }
33 |
34 | window.addEventListener('load', ()=>{
35 | speak("Activating Inertia");
36 | speak("Going online");
37 | wishMe();
38 | })
39 |
40 | const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
41 | const recognition = new SpeechRecognition();
42 |
43 | recognition.onresult = (event) => {
44 | const current = event.resultIndex;
45 | const transcript = event.results[current][0].transcript;
46 | content.textContent = transcript;
47 | speakThis(transcript.toLowerCase());
48 | }
49 |
50 | btn.addEventListener('click', ()=>{
51 | recognition.start();
52 | })
53 |
54 | function speakThis(message) {
55 | const speech = new SpeechSynthesisUtterance();
56 |
57 | speech.text = "I did not understand what you said please try again";
58 |
59 | if(message.includes('hey') || message.includes('hello')) {
60 | const finalText = "Hello Boss";
61 | speech.text = finalText;
62 | }
63 |
64 | else if(message.includes('how are you')) {
65 | const finalText = "I am fine boss tell me how can i help you";
66 | speech.text = finalText;
67 | }
68 |
69 | else if(message.includes('name')) {
70 | const finalText = "My name is Inertia";
71 | speech.text = finalText;
72 | }
73 |
74 | else if(message.includes('open google')) {
75 | window.open("https://google.com", "_blank");
76 | const finalText = "Opening Google";
77 | speech.text = finalText;
78 | }
79 |
80 | else if(message.includes('open instagram')) {
81 | window.open("https://instagram.com", "_blank");
82 | const finalText = "Opening instagram";
83 | speech.text = finalText;
84 | }
85 |
86 | else if(message.includes('what is') || message.includes('who is') || message.includes('what are')) {
87 | window.open(`https://www.google.com/search?q=${message.replace(" ", "+")}`, "_blank");
88 | const finalText = "This is what i found on internet regarding " + message;
89 | speech.text = finalText;
90 | }
91 |
92 | else if(message.includes('wikipedia')) {
93 | window.open(`https://en.wikipedia.org/wiki/${message.replace("wikipedia", "")}`, "_blank");
94 | const finalText = "This is what i found on wikipedia regarding " + message;
95 | speech.text = finalText;
96 | }
97 |
98 | else if(message.includes('time')) {
99 | const time = new Date().toLocaleString(undefined, {hour: "numeric", minute: "numeric"})
100 | const finalText = time;
101 | speech.text = finalText;
102 | }
103 |
104 | else if(message.includes('date')) {
105 | const date = new Date().toLocaleString(undefined, {month: "short", day: "numeric"})
106 | const finalText = date;
107 | speech.text = finalText;
108 | }
109 |
110 | else if(message.includes('calculator')) {
111 | window.open('Calculator:///')
112 | const finalText = "Opening Calculator";
113 | speech.text = finalText;
114 | }
115 |
116 | else {
117 | window.open(`https://www.google.com/search?q=${message.replace(" ", "+")}`, "_blank");
118 | const finalText = "I found some information for " + message + " on google";
119 | speech.text = finalText;
120 | }
121 |
122 | speech.volume = 1;
123 | speech.pitch = 1;
124 | speech.rate = 1;
125 |
126 | window.speechSynthesis.speak(speech);
127 | }
--------------------------------------------------------------------------------