Hugging Face's logo

Spaces:
wookimchye
/
ITI109-English-Speech-Chatbot
Sleeping

App Files Community
wookimchye commited on
Commit
caf8c11
·
verified ·
1 Parent(s): bad139d

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +152 -152
templates/index.html CHANGED
@@ -1,152 +1,152 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Asian Food Chatbot</title>
7
- <style>
8
- body {
9
- font-family: Arial, sans-serif;
10
- background-color: #f4f4f9;
11
- margin: 0;
12
- padding: 0;
13
- display: flex;
14
- justify-content: center;
15
- align-items: center;
16
- height: 100vh;
17
- }
18
- .chat-container {
19
- width: 500px;
20
- background-color: #fff;
21
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
22
- border-radius: 8px;
23
- overflow: hidden;
24
- display: flex;
25
- flex-direction: column;
26
- }
27
- .chat-header {
28
- background-color: #007bff;
29
- color: #fff;
30
- padding: 10px;
31
- text-align: center;
32
- font-size: 1.2em;
33
- }
34
- .chat-messages {
35
- flex: 1;
36
- padding: 10px;
37
- overflow-y: auto;
38
- }
39
- .chat-input {
40
- display: flex;
41
- border-top: 1px solid #ddd;
42
- }
43
- .chat-input input {
44
- flex: 1;
45
- padding: 10px;
46
- border: none;
47
- border-radius: 0;
48
- outline: none;
49
- }
50
- .chat-input button {
51
- padding: 10px;
52
- background-color: #007bff;
53
- color: #fff;
54
- border: none;
55
- cursor: pointer;
56
- }
57
- .chat-input button:hover {
58
- background-color: #0056b3;
59
- }
60
- .message {
61
- margin-bottom: 10px;
62
- }
63
- .message.user {
64
- text-align: right;
65
- }
66
- .message.bot {
67
- text-align: left;
68
- }
69
- .message .text {
70
- display: inline-block;
71
- padding: 10px;
72
- border-radius: 8px;
73
- max-width: 70%;
74
- }
75
- .message.user .text {
76
- background-color: #007bff;
77
- color: #fff;
78
- }
79
- .message.bot .text {
80
- background-color: #f1f1f1;
81
- color: #333;
82
- }
83
- </style>
84
- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
85
- <script src="https://aka.ms/csspeech/jsbrowserpackageraw"></script>
86
- </head>
87
- <body>
88
- <div class="chat-container">
89
- <div class="chat-header">Asian Food Chatbot - English only</div>
90
- <div class="chat-messages" id="chat-messages"></div>
91
- <div class="chat-input">
92
- <input type="text" id="question" placeholder="Type a message...">
93
- <button onclick="askQuestion()">Ask</button>
94
- <button onclick="startListening()" style="background-color:green">🎤 Speak</button>
95
- </div>
96
- </div>
97
-
98
- <audio id="audio" controls style="display:none;"></audio>
99
-
100
- <script>
101
- const speechKey = 'BHMIZNZ8xH7JQHXaGAoaOlwdx3bjxvhyuLxpHumSiRPXxpo1Rpb5JQQJ99BAACqBBLyXJ3w3AAAYACOGvOBV';
102
- const speechRegion = 'southeastasia';
103
-
104
- function askQuestion() {
105
- const question = document.getElementById('question').value;
106
- if (!question) return;
107
-
108
- axios.post('/ask', { question }).then(response => {
109
- console.log("Response:", response.data); // Debugging log
110
-
111
- const chatMessages = document.getElementById('chat-messages');
112
- const userMessage = document.createElement('div');
113
- userMessage.textContent = `You: ${question}`;
114
- chatMessages.appendChild(userMessage);
115
-
116
- const botMessage = document.createElement('div');
117
- botMessage.textContent = `Bot: ${response.data.answer}`;
118
- botMessage.style.marginBottom = "10px"; // Add margin-bottom for spacing
119
- chatMessages.appendChild(botMessage);
120
-
121
- //const audioElement = document.getElementById('audio');
122
- //audioElement.src = response.data.audio + '?t=' + new Date().getTime();
123
- //audioElement.style.display = 'block';
124
- //audioElement.play();
125
-
126
- document.getElementById('question').value = '';
127
- }).catch(error => {
128
- console.error("Error:", error); // Debugging log
129
- });
130
- }
131
-
132
- function startListening() {
133
- const speechConfig = SpeechSDK.SpeechConfig.fromSubscription(speechKey, speechRegion);
134
- const audioConfig = SpeechSDK.AudioConfig.fromDefaultMicrophoneInput();
135
- const recognizer = new SpeechSDK.SpeechRecognizer(speechConfig, audioConfig);
136
-
137
- recognizer.recognizeOnceAsync(result => {
138
- if (result.reason === SpeechSDK.ResultReason.RecognizedSpeech) {
139
- console.log("Recognized Text:", result.text); // Debugging log
140
- document.getElementById('question').value = result.text;
141
- askQuestion();
142
- } else {
143
- console.error("Speech Recognition Error:", result.errorDetails); // Debugging log
144
- }
145
- }, err => {
146
- console.error("Error recognizing speech:", err); // Debugging log
147
- });
148
- }
149
- </script>
150
-
151
- </body>
152
- </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Asian Food Chatbot</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ background-color: #f4f4f9;
11
+ margin: 0;
12
+ padding: 0;
13
+ display: flex;
14
+ justify-content: center;
15
+ align-items: center;
16
+ height: 100vh;
17
+ }
18
+ .chat-container {
19
+ width: 500px;
20
+ background-color: #fff;
21
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
22
+ border-radius: 8px;
23
+ overflow: hidden;
24
+ display: flex;
25
+ flex-direction: column;
26
+ }
27
+ .chat-header {
28
+ background-color: #007bff;
29
+ color: #fff;
30
+ padding: 10px;
31
+ text-align: center;
32
+ font-size: 1.2em;
33
+ }
34
+ .chat-messages {
35
+ flex: 1;
36
+ padding: 10px;
37
+ overflow-y: auto;
38
+ }
39
+ .chat-input {
40
+ display: flex;
41
+ border-top: 1px solid #ddd;
42
+ }
43
+ .chat-input input {
44
+ flex: 1;
45
+ padding: 10px;
46
+ border: none;
47
+ border-radius: 0;
48
+ outline: none;
49
+ }
50
+ .chat-input button {
51
+ padding: 10px;
52
+ background-color: #007bff;
53
+ color: #fff;
54
+ border: none;
55
+ cursor: pointer;
56
+ }
57
+ .chat-input button:hover {
58
+ background-color: #0056b3;
59
+ }
60
+ .message {
61
+ margin-bottom: 10px;
62
+ }
63
+ .message.user {
64
+ text-align: right;
65
+ }
66
+ .message.bot {
67
+ text-align: left;
68
+ }
69
+ .message .text {
70
+ display: inline-block;
71
+ padding: 10px;
72
+ border-radius: 8px;
73
+ max-width: 70%;
74
+ }
75
+ .message.user .text {
76
+ background-color: #007bff;
77
+ color: #fff;
78
+ }
79
+ .message.bot .text {
80
+ background-color: #f1f1f1;
81
+ color: #333;
82
+ }
83
+ </style>
84
+ <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
85
+ <script src="https://aka.ms/csspeech/jsbrowserpackageraw"></script>
86
+ </head>
87
+ <body>
88
+ <div class="chat-container">
89
+ <div class="chat-header">Asian Food Chatbot - English only</div>
90
+ <div class="chat-messages" id="chat-messages"></div>
91
+ <div class="chat-input">
92
+ <input type="text" id="question" placeholder="Type a message...">
93
+ <button onclick="askQuestion()">Ask</button>
94
+ <button onclick="startListening()" style="background-color:green">🎤 Speak</button>
95
+ </div>
96
+ </div>
97
+
98
+ <audio id="audio" controls style="display:none;"></audio>
99
+
100
+ <script>
101
+ const speechKey = 'BHMIZNZ8xH7JQHXaGAoaOlwdx3bjxvhyuLxpHumSiRPXxpo1Rpb5JQQJ99BAACqBBLyXJ3w3AAAYACOGvOBV';
102
+ const speechRegion = 'southeastasia';
103
+
104
+ function askQuestion() {
105
+ const question = document.getElementById('question').value;
106
+ if (!question) return;
107
+
108
+ axios.post('/ask', { question }).then(response => {
109
+ console.log("Response:", response.data); // Debugging log
110
+
111
+ const chatMessages = document.getElementById('chat-messages');
112
+ const userMessage = document.createElement('div');
113
+ userMessage.textContent = `You: ${question}`;
114
+ chatMessages.appendChild(userMessage);
115
+
116
+ const botMessage = document.createElement('div');
117
+ botMessage.textContent = `Bot: ${response.data.answer}`;
118
+ botMessage.style.marginBottom = "10px"; // Add margin-bottom for spacing
119
+ chatMessages.appendChild(botMessage);
120
+
121
+ const audioElement = document.getElementById('audio');
122
+ audioElement.src = response.data.audio + '?t=' + new Date().getTime();
123
+ audioElement.style.display = 'block';
124
+ audioElement.play();
125
+
126
+ document.getElementById('question').value = '';
127
+ }).catch(error => {
128
+ console.error("Error:", error); // Debugging log
129
+ });
130
+ }
131
+
132
+ function startListening() {
133
+ const speechConfig = SpeechSDK.SpeechConfig.fromSubscription(speechKey, speechRegion);
134
+ const audioConfig = SpeechSDK.AudioConfig.fromDefaultMicrophoneInput();
135
+ const recognizer = new SpeechSDK.SpeechRecognizer(speechConfig, audioConfig);
136
+
137
+ recognizer.recognizeOnceAsync(result => {
138
+ if (result.reason === SpeechSDK.ResultReason.RecognizedSpeech) {
139
+ console.log("Recognized Text:", result.text); // Debugging log
140
+ document.getElementById('question').value = result.text;
141
+ askQuestion();
142
+ } else {
143
+ console.error("Speech Recognition Error:", result.errorDetails); // Debugging log
144
+ }
145
+ }, err => {
146
+ console.error("Error recognizing speech:", err); // Debugging log
147
+ });
148
+ }
149
+ </script>
150
+
151
+ </body>
152
+ </html>