85 lines
3.3 KiB
HTML
85 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
|
|
<script>
|
|
window.addEventListener("load", function(evt) {
|
|
var output = document.getElementById("output");
|
|
var input = document.getElementById("input");
|
|
var ws;
|
|
|
|
var print = function(message) {
|
|
var before = output.innerHTML.split("<br>");
|
|
before.unshift(`${new Date().toLocaleTimeString()} | ${message}`);
|
|
if (before.length > 20) {
|
|
before = before.slice(0, 20);
|
|
}
|
|
var after = before.join("<br>");
|
|
output.innerHTML = after;
|
|
output.scroll(0, 0);
|
|
};
|
|
|
|
ws = new WebSocket("ws://"+window.location.host+"/ws");
|
|
ws.onopen = function(evt) {
|
|
print("READY");
|
|
}
|
|
ws.onclose = function(evt) {
|
|
print("CLOSE");
|
|
ws = null;
|
|
}
|
|
ws.onmessage = function(evt) {
|
|
const synth = window.speechSynthesis;
|
|
const voices = synth.getVoices().sort(function (a, b) {
|
|
const aname = a.name.toUpperCase();
|
|
const bname = b.name.toUpperCase();
|
|
|
|
if (aname < bname) {
|
|
return -1;
|
|
} else if (aname == bname) {
|
|
return 0;
|
|
} else {
|
|
return +1;
|
|
}
|
|
});
|
|
const idx = false ? 0 : voices.length-1;
|
|
|
|
const utterThis = new SpeechSynthesisUtterance(evt.data);
|
|
utterThis.voice = voices[idx];
|
|
//utterThis.pitch = 10;
|
|
//utterThis.rate = 10;
|
|
window.speechSynthesis.speak(utterThis);
|
|
print("RESPONSE: " + evt.data);
|
|
}
|
|
ws.onerror = function(evt) {
|
|
print("ERROR: " + evt.data);
|
|
}
|
|
|
|
document.getElementById("send").onclick = function(evt) {
|
|
if (!ws || !input.value) {
|
|
return false;
|
|
}
|
|
ws.send(JSON.stringify({
|
|
"text": input.value
|
|
}));
|
|
print("SENT: " + input.value);
|
|
input.value = "";
|
|
return false;
|
|
};
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div style="width: 80%; height: 80%; margin: auto; display: flex; flex-direction: row;">
|
|
<form style="flex-grow: 1;">
|
|
<p><input id="input" type="textarea" value="" autofocus style="width: 80%">
|
|
<p>
|
|
<button id="send">Send</button>
|
|
</form>
|
|
<div id="output" style="flex-grow: 1; overflow-y: scroll;"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|