json loading directly
parent
2612aab009
commit
c0a8fe42b8
@ -0,0 +1,85 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title></title>
|
||||
<meta charset="utf-8">
|
||||
<style type="text/css">
|
||||
#wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
left: 5%; top: 5%; right: 5%; bottom: 5%;
|
||||
}
|
||||
#textinput {
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
#input {
|
||||
padding: 2%;
|
||||
flex: 0 1 auto;
|
||||
background: aqua;
|
||||
}
|
||||
#display {
|
||||
flex: 1 1 auto;
|
||||
background: pink;
|
||||
padding: 2%;
|
||||
overflow: auto;
|
||||
}
|
||||
#display div.msg {
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
#display div.human {
|
||||
color: black;
|
||||
}
|
||||
#display div.bot {
|
||||
color: black;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
#display div.debug {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="wrapper">
|
||||
<div id="display">
|
||||
</div>
|
||||
<div id="input">
|
||||
<input type="text" id="textinput" autofocus />
|
||||
</div>
|
||||
</div>
|
||||
<script src="eliza.js"></script>
|
||||
<script>
|
||||
function eliza (rules) {
|
||||
var input = document.getElementById("textinput"),
|
||||
output = document.getElementById("display"),
|
||||
bot = chatbot(rules, true);
|
||||
|
||||
function log (msg, kls) {
|
||||
var d = document.createElement("div");
|
||||
d.setAttribute("class", "msg " + kls);
|
||||
d.innerHTML = msg;
|
||||
display.appendChild(d);
|
||||
}
|
||||
|
||||
function say (msg) {
|
||||
log(msg, "bot");
|
||||
display.scrollTop = display.scrollTopMax;
|
||||
}
|
||||
|
||||
input.addEventListener("keypress", function (event) {
|
||||
if (event.keyCode == 13) {
|
||||
var text = input.value;
|
||||
log(text, "user");
|
||||
say(bot(text), "bot");
|
||||
input.value = "";
|
||||
input.focus();
|
||||
}
|
||||
});
|
||||
say(rules.initial);
|
||||
}
|
||||
</script>
|
||||
<script src="doctor.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,106 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title></title>
|
||||
<meta charset="utf-8">
|
||||
<style type="text/css">
|
||||
#wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
left: 5%; top: 5%; right: 5%; bottom: 5%;
|
||||
}
|
||||
#textinput {
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
#input {
|
||||
padding: 2%;
|
||||
flex: 0 1 auto;
|
||||
background: aqua;
|
||||
}
|
||||
#display {
|
||||
flex: 1 1 auto;
|
||||
background: pink;
|
||||
padding: 2%;
|
||||
overflow: auto;
|
||||
}
|
||||
#display div.msg {
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
#display div.human {
|
||||
color: black;
|
||||
}
|
||||
#display div.bot {
|
||||
color: black;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
#display div.debug {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="wrapper">
|
||||
<div id="display">
|
||||
</div>
|
||||
<div id="input">
|
||||
<input type="text" id="textinput" autofocus />
|
||||
</div>
|
||||
</div>
|
||||
<script src="eliza.js"></script>
|
||||
<script>
|
||||
function get_json (url, callback) {
|
||||
var request = new XMLHttpRequest();
|
||||
request.open('GET', url, true);
|
||||
request.onload = function() {
|
||||
if (request.status >= 200 && request.status < 400) {
|
||||
var data = JSON.parse(request.responseText);
|
||||
callback(data);
|
||||
} else { callback("server error"); }
|
||||
};
|
||||
request.onerror = function() { callback("connection error"); };
|
||||
request.send();
|
||||
}
|
||||
|
||||
get_json("doctor.json", function (rules) {
|
||||
var input = document.getElementById("textinput"),
|
||||
output = document.getElementById("display"),
|
||||
bot = chatbot(rules, true);
|
||||
|
||||
function log (msg, kls) {
|
||||
var d = document.createElement("div");
|
||||
d.setAttribute("class", "msg " + kls);
|
||||
d.innerHTML = msg;
|
||||
display.appendChild(d);
|
||||
}
|
||||
|
||||
function say (msg) {
|
||||
responsiveVoice.speak(msg)
|
||||
log(msg, "bot");
|
||||
// https://responsivevoice.org/api/
|
||||
display.scrollTop = display.scrollTopMax;
|
||||
// responsiveVoice.speak("hello world", "UK English Male", {onstart: StartCallback, onend: EndCallback});
|
||||
}
|
||||
|
||||
var voicelist = responsiveVoice.getVoices();
|
||||
console.log("voicelist", voicelist);
|
||||
responsiveVoice.setDefaultVoice("US English Female");
|
||||
|
||||
input.addEventListener("keypress", function (event) {
|
||||
if (event.keyCode == 13) {
|
||||
var text = input.value;
|
||||
log(text, "user");
|
||||
say(bot(text), "bot");
|
||||
input.value = "";
|
||||
input.focus();
|
||||
}
|
||||
});
|
||||
say(rules.initial);
|
||||
});
|
||||
|
||||
</script>
|
||||
<script src='https://code.responsivevoice.org/responsivevoice.js'></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<title>Speech synthesiser</title>
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Speech synthesiser</h1>
|
||||
|
||||
<p>Enter some text in the input below and press return to hear it. change voices using the dropdown menu.</p>
|
||||
|
||||
<form>
|
||||
<input type="text" class="txt">
|
||||
<div>
|
||||
<label for="rate">Rate</label><input type="range" min="0.5" max="2" value="1" step="0.1" id="rate">
|
||||
<div class="rate-value">1</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="pitch">Pitch</label><input type="range" min="0" max="2" value="1" step="0.1" id="pitch">
|
||||
<div class="pitch-value">1</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<select>
|
||||
|
||||
</select>
|
||||
</form>
|
||||
|
||||
<script src="speech.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,67 @@
|
||||
var synth = window.speechSynthesis;
|
||||
|
||||
var inputForm = document.querySelector('form');
|
||||
var inputTxt = document.querySelector('.txt');
|
||||
var voiceSelect = document.querySelector('select');
|
||||
|
||||
var pitch = document.querySelector('#pitch');
|
||||
var pitchValue = document.querySelector('.pitch-value');
|
||||
var rate = document.querySelector('#rate');
|
||||
var rateValue = document.querySelector('.rate-value');
|
||||
|
||||
var voices = [];
|
||||
|
||||
function populateVoiceList() {
|
||||
voices = synth.getVoices();
|
||||
var selectedIndex = voiceSelect.selectedIndex < 0 ? 0 : voiceSelect.selectedIndex;
|
||||
voiceSelect.innerHTML = '';
|
||||
for(i = 0; i < voices.length ; i++) {
|
||||
var option = document.createElement('option');
|
||||
option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
|
||||
|
||||
if(voices[i].default) {
|
||||
option.textContent += ' -- DEFAULT';
|
||||
}
|
||||
|
||||
option.setAttribute('data-lang', voices[i].lang);
|
||||
option.setAttribute('data-name', voices[i].name);
|
||||
voiceSelect.appendChild(option);
|
||||
}
|
||||
voiceSelect.selectedIndex = selectedIndex;
|
||||
}
|
||||
|
||||
populateVoiceList();
|
||||
if (speechSynthesis.onvoiceschanged !== undefined) {
|
||||
speechSynthesis.onvoiceschanged = populateVoiceList;
|
||||
}
|
||||
|
||||
inputForm.onsubmit = function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
|
||||
var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
|
||||
for(i = 0; i < voices.length ; i++) {
|
||||
if(voices[i].name === selectedOption) {
|
||||
utterThis.voice = voices[i];
|
||||
}
|
||||
}
|
||||
utterThis.pitch = pitch.value;
|
||||
utterThis.rate = rate.value;
|
||||
synth.speak(utterThis);
|
||||
|
||||
utterThis.onpause = function(event) {
|
||||
var char = event.utterance.text.charAt(event.charIndex);
|
||||
console.log('Speech paused at character ' + event.charIndex + ' of "' +
|
||||
event.utterance.text + '", which is "' + char + '".');
|
||||
}
|
||||
|
||||
inputTxt.blur();
|
||||
}
|
||||
|
||||
pitch.onchange = function() {
|
||||
pitchValue.textContent = pitch.value;
|
||||
}
|
||||
|
||||
rate.onchange = function() {
|
||||
rateValue.textContent = rate.value;
|
||||
}
|
||||
Loading…
Reference in New Issue