-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathindex.html
112 lines (99 loc) · 4.13 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>D-ID Streaming POC</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;700&display=swap" rel="stylesheet" />
<!-- Link to our external CSS file -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="content">
<div id="video-wrapper">
<div class="video-container">
<video id="talk-video" autoplay></video>
</div>
</div>
<br/>
<div id="input-container" style="text-align: left;">
<textarea id="user-input-field" placeholder="My name is Alpine and I am your Highland House FAQ assistant...
How can I help you?"></textarea>
<div style="display: flex; justify-content: center;">
<input type="checkbox" id="toggleDID">
<label for="toggleDID">Send to DID</label>
</div>
</div>
<!-- OPTIONAL - SEE BELOW -->
<div>
<input type="checkbox" id="toggleReadAloud" checked>
<label for="toggleReadAloud">Read Responses Aloud ('esc' to stop)</label>
</div>
<div style="height: 1em;"></div>
</div>
<div id="buttons">
<button id="connect-button" type="button">Connect</button>
<button id="voice-typing-button" type="button">Voice Typing</button>
<button id="replay-button" type="button">Replay Audio Response</button>
<button id="talk-button" type="button">Chat</button>
</div>
<textarea id="response-container" rows="5"></textarea>
<div id="status">
ICE gathering status: <span id="ice-gathering-status-label"></span><br/>
ICE status: <span id="ice-status-label"></span><br/>
Peer connection status: <span id="peer-status-label"></span><br/>
Signaling status: <span id="signaling-status-label"></span><br/>
Streaming status: <span id="streaming-status-label"></span><br/>
</div>
<script>
document.getElementById('user-input-field').addEventListener('input', function () {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
});
// Function to clear the input field when clicked
document.getElementById('user-input-field').addEventListener('click', function () {
this.value = ''; // Clear the input field
this.style.height = 'auto'; // Reset the height
});
// Function to convert URLs in text to clickable links
function linkify(text) {
const urlRegex = /(https?:\/\/[^\s]+)/g;
return text.replace(urlRegex, function (url) {
return `<a href="${url}" target="_blank">${url}</a>`; // This opens links in a new tab
});
}
if ('webkitSpeechRecognition' in window) {
var recognition = new webkitSpeechRecognition();
recognition.continuous = false;
recognition.interimResults = true;
recognition.lang = 'en-US'; // Default language set to English
// Event listener for voice-typing button
document.getElementById('voice-typing-button').addEventListener('click', function () {
recognition.start();
// Ensure focus remains on the user-input-field textarea
document.getElementById('user-input-field').focus();
});
recognition.onresult = function (event) {
var final_transcript = '';
for (var i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
final_transcript += event.results[i][0].transcript;
}
}
document.getElementById('user-input-field').value = final_transcript; // Update user-input-field
};
} else {
alert("Web Speech API is not supported in this browser.");
}
// Event listener to cancel speech synthesis if the "Escape" key is pressed
document.addEventListener('keydown', (event) => {
if (event.key === "Escape") {
window.speechSynthesis.cancel();
console.log("Speech synthesis cancelled."); // Optional: for debugging
}
});
</script>
<script type="module" src="./streaming-client-api.js"></script>
<script type="module" src="./langindex.js"></script>
</body>
</html>