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