-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
66 lines (56 loc) · 2.39 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
<!DOCTYPE html>
<html>
<head>
<title>Dumbbot</title>
<link rel="stylesheet" href="/public/site.css">
<script src="/socket.io/socket.io.js"></script>
<script src='https://code.responsivevoice.org/responsivevoice.js'></script>
<script>
var socket = io.connect('http://localhost:8080');
function appendChat(type, text) {
// Generate the node
let elem = document.createElement("p");
elem.className = type;
elem.appendChild(document.createTextNode(text));
// Add to the document
document.getElementById("chatbox").appendChild(elem);
}
socket.on('output', function (data) {
appendChat("output-text", data.output);
if (tts) {
responsiveVoice.speak(data.output);
}
});
var tts = false;
function toggleTTS() {
tts = !tts;
document.getElementsByClassName("button-tts")[0].value = tts ? "Disable TTS" : "Enable TTS";
}
function submitForm() {
const x = document.getElementById('input').value;
appendChat("input-text", x);
// Send the message
socket.emit('input', {input: x});
document.getElementsByName("chat")[0].reset();
}
</script>
</head>
<body>
<h1>Dumbbot</h1>
<main>
<div id="chatbox">
</div>
<form name="chat" onsubmit="submitForm(); return false;" autocomplete="off">
<input type="text" id="input" name="mssg">
<br /><br />
<input type="submit" class="button" />
<input type="button" class="button button-tts" value="Enable TTS" onclick="toggleTTS();"/>
</form>
</main>
<footer>
<p style="color: red">BEWARE - Dumbbot is very dumb, and could say equally dumb things. Use with caution.</p>
<p style="color: green">NOTE - No robots were harmed in the creation of this application.</p>
<p>Created by Christopher Hittner. Powered by Socket IO and Tensorflow. Inspired by <a href="cleverbot.com">Cleverbot</a>.</p>
</footer>
</body>
</html>