369 lines
11 KiB
HTML
369 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta content="initial-scale=1, minimum-scale=1, width=device-width" name="viewport">
|
||
<title>
|
||
J.A.R.V.I.S.
|
||
</title>
|
||
<link href="//www.google.com/images/icons/product/chrome-32.png" rel="icon" type="image/ico">
|
||
</script>
|
||
<style>
|
||
body {
|
||
background-color: #000;
|
||
color: #fff;
|
||
font: 1em "Open Sans", Helvetica, Arial, sans-serif;
|
||
}
|
||
#jarvis-logo {
|
||
display: block;
|
||
width: 280px;
|
||
margin: 0 auto;
|
||
}
|
||
a {
|
||
color: #09e;
|
||
text-decoration: none;
|
||
}
|
||
#info {
|
||
font-size: 20px;
|
||
}
|
||
#div_start {
|
||
float: right;
|
||
}
|
||
#headline {
|
||
text-decoration: none
|
||
}
|
||
#results {
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
border: 1px solid #ddd;
|
||
padding: 15px;
|
||
text-align: left;
|
||
min-height: 150px;
|
||
}
|
||
#start_button {
|
||
border: 0;
|
||
background-color:transparent;
|
||
padding: 0;
|
||
}
|
||
.interim {
|
||
color: #fff;
|
||
}
|
||
.final {
|
||
color: #fff;
|
||
padding-right: 3px;
|
||
}
|
||
.button {
|
||
display: none;
|
||
}
|
||
.marquee {
|
||
margin: 20px auto;
|
||
}
|
||
|
||
#buttons {
|
||
margin: 10px 0;
|
||
position: relative;
|
||
top: -50px;
|
||
}
|
||
|
||
#copy {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
#copy > div {
|
||
display: none;
|
||
margin: 0 70px;
|
||
}
|
||
</style>
|
||
<style>
|
||
a.c1 {font-weight: normal;}
|
||
</style>
|
||
</head>
|
||
<body id="grid">
|
||
<div class="browser-landing" id="main">
|
||
|
||
<div class="compact marquee-stacked" id="marquee">
|
||
<div class="marquee-copy">
|
||
<!--<h1>
|
||
J.A.R.V.I.S.
|
||
</h1>-->
|
||
<img id="jarvis-logo" src="http://images3.wikia.nocookie.net/__cb20130421191810/marvelmovies/images/thumb/0/06/J.A.R.V.I.S..jpg/280px-J.A.R.V.I.S..jpg" />
|
||
</div>
|
||
</div>
|
||
<div class="compact marquee">
|
||
<div id="info">
|
||
<p id="info_start">
|
||
Hello, I am J.A.R.V.I.S. I am here to assist you.
|
||
</p>
|
||
<p id="info_speak_now" style="display:none">
|
||
Speak now.
|
||
</p>
|
||
<p id="info_no_speech" style="display:none">
|
||
No speech was detected. You may need to adjust your <a href=
|
||
"//support.google.com/chrome/bin/answer.py?hl=en&answer=1407892">microphone
|
||
settings</a>.
|
||
</p>
|
||
<p id="info_no_microphone" style="display:none">
|
||
No microphone was found. Ensure that a microphone is installed and that
|
||
<a href="//support.google.com/chrome/bin/answer.py?hl=en&answer=1407892">
|
||
microphone settings</a> are configured correctly.
|
||
</p>
|
||
<p id="info_allow" style="display:none">
|
||
Click the "Allow" button above to enable your microphone.
|
||
</p>
|
||
<p id="info_denied" style="display:none">
|
||
Permission to use microphone was denied.
|
||
</p>
|
||
<p id="info_blocked" style="display:none">
|
||
Permission to use microphone is blocked. To change, go to
|
||
chrome://settings/contentExceptions#media-stream
|
||
</p>
|
||
<p id="info_upgrade" style="display:none">
|
||
Web Speech API is not supported by this browser. Upgrade to <a href=
|
||
"//www.google.com/chrome">Chrome</a> version 25 or later.
|
||
</p>
|
||
</div>
|
||
<div id="div_start">
|
||
<button id="start_button" onclick="startButton(event)"><img alt="Start" id="start_img"
|
||
src="{{ url_for("static", filename="mic.gif") }}"></button>
|
||
</div>
|
||
<div id="results">
|
||
<span class="final" id="final_span"></span> <span class="interim" id=
|
||
"interim_span"></span>
|
||
</div>
|
||
|
||
<div class="compact marquee" id="div_language">
|
||
<select id="select_language" onchange="updateCountry()">
|
||
</select> <select id="select_dialect">
|
||
</select>
|
||
</div>
|
||
<div class="compact marquee">
|
||
Powered by Google's <a class="c1" href="http://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html">Web
|
||
Speech API</a>.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</script>
|
||
|
||
<script>
|
||
var langs =
|
||
[['Afrikaans', ['af-ZA']],
|
||
['Bahasa Indonesia',['id-ID']],
|
||
['Bahasa Melayu', ['ms-MY']],
|
||
['Català', ['ca-ES']],
|
||
['Čeština', ['cs-CZ']],
|
||
['Deutsch', ['de-DE']],
|
||
['English', ['en-AU', 'Australia'],
|
||
['en-CA', 'Canada'],
|
||
['en-IN', 'India'],
|
||
['en-NZ', 'New Zealand'],
|
||
['en-ZA', 'South Africa'],
|
||
['en-GB', 'United Kingdom'],
|
||
['en-US', 'United States']],
|
||
['Español', ['es-AR', 'Argentina'],
|
||
['es-BO', 'Bolivia'],
|
||
['es-CL', 'Chile'],
|
||
['es-CO', 'Colombia'],
|
||
['es-CR', 'Costa Rica'],
|
||
['es-EC', 'Ecuador'],
|
||
['es-SV', 'El Salvador'],
|
||
['es-ES', 'España'],
|
||
['es-US', 'Estados Unidos'],
|
||
['es-GT', 'Guatemala'],
|
||
['es-HN', 'Honduras'],
|
||
['es-MX', 'México'],
|
||
['es-NI', 'Nicaragua'],
|
||
['es-PA', 'Panamá'],
|
||
['es-PY', 'Paraguay'],
|
||
['es-PE', 'Perú'],
|
||
['es-PR', 'Puerto Rico'],
|
||
['es-DO', 'República Dominicana'],
|
||
['es-UY', 'Uruguay'],
|
||
['es-VE', 'Venezuela']],
|
||
['Euskara', ['eu-ES']],
|
||
['Français', ['fr-FR']],
|
||
['Galego', ['gl-ES']],
|
||
['Hrvatski', ['hr_HR']],
|
||
['IsiZulu', ['zu-ZA']],
|
||
['Íslenska', ['is-IS']],
|
||
['Italiano', ['it-IT', 'Italia'],
|
||
['it-CH', 'Svizzera']],
|
||
['Magyar', ['hu-HU']],
|
||
['Nederlands', ['nl-NL']],
|
||
['Norsk bokmål', ['nb-NO']],
|
||
['Polski', ['pl-PL']],
|
||
['Português', ['pt-BR', 'Brasil'],
|
||
['pt-PT', 'Portugal']],
|
||
['Română', ['ro-RO']],
|
||
['Slovenčina', ['sk-SK']],
|
||
['Suomi', ['fi-FI']],
|
||
['Svenska', ['sv-SE']],
|
||
['Türkçe', ['tr-TR']],
|
||
['български', ['bg-BG']],
|
||
['Pусский', ['ru-RU']],
|
||
['Српски', ['sr-RS']],
|
||
['한국어', ['ko-KR']],
|
||
['中文', ['cmn-Hans-CN', '普通话 (中国大陆)'],
|
||
['cmn-Hans-HK', '普通话 (香港)'],
|
||
['cmn-Hant-TW', '中文 (台灣)'],
|
||
['yue-Hant-HK', '粵語 (香港)']],
|
||
['日本語', ['ja-JP']],
|
||
['Lingua latīna', ['la']]];
|
||
|
||
for (var i = 0; i < langs.length; i++) {
|
||
select_language.options[i] = new Option(langs[i][0], i);
|
||
}
|
||
select_language.selectedIndex = 6;
|
||
updateCountry();
|
||
select_dialect.selectedIndex = 6;
|
||
showInfo('info_start');
|
||
|
||
function updateCountry() {
|
||
for (var i = select_dialect.options.length - 1; i >= 0; i--) {
|
||
select_dialect.remove(i);
|
||
}
|
||
var list = langs[select_language.selectedIndex];
|
||
for (var i = 1; i < list.length; i++) {
|
||
select_dialect.options.add(new Option(list[i][1], list[i][0]));
|
||
}
|
||
select_dialect.style.visibility = list[1].length == 1 ? 'hidden' : 'visible';
|
||
}
|
||
|
||
var final_transcript = '';
|
||
var recognizing = false;
|
||
var ignore_onend;
|
||
var start_timestamp;
|
||
if (!('webkitSpeechRecognition' in window)) {
|
||
upgrade();
|
||
} else {
|
||
start_button.style.display = 'inline-block';
|
||
var recognition = new webkitSpeechRecognition();
|
||
recognition.continuous = true;
|
||
recognition.interimResults = true;
|
||
|
||
var xmlhttp = new XMLHttpRequest();
|
||
|
||
recognition.onstart = function() {
|
||
recognizing = true;
|
||
showInfo('info_speak_now');
|
||
start_img.src = '{{ url_for("static", filename="mic-animate.gif") }}';
|
||
};
|
||
|
||
recognition.onerror = function(event) {
|
||
console.log("Error: " + event.error)
|
||
if (event.error == 'no-speech') {
|
||
start_img.src = '{{ url_for("static", filename="mic.gif") }}';
|
||
showInfo('info_no_speech');
|
||
ignore_onend = true;
|
||
}
|
||
if (event.error == 'audio-capture') {
|
||
start_img.src = '{{ url_for("static", filename="mic.gif") }}';
|
||
showInfo('info_no_microphone');
|
||
ignore_onend = true;
|
||
}
|
||
if (event.error == 'not-allowed') {
|
||
if (event.timeStamp - start_timestamp < 100) {
|
||
showInfo('info_blocked');
|
||
} else {
|
||
showInfo('info_denied');
|
||
}
|
||
ignore_onend = true;
|
||
}
|
||
};
|
||
|
||
recognition.onend = function() {
|
||
//recognizing = false;
|
||
console.log("stopped");
|
||
recognition.start();
|
||
return;
|
||
if (ignore_onend) {
|
||
return;
|
||
}
|
||
start_img.src = '{{ url_for("static", filename="mic.gif") }}';
|
||
if (!final_transcript) {
|
||
showInfo('info_start');
|
||
return;
|
||
}
|
||
showInfo('');
|
||
if (window.getSelection) {
|
||
window.getSelection().removeAllRanges();
|
||
var range = document.createRange();
|
||
range.selectNode(document.getElementById('final_span'));
|
||
window.getSelection().addRange(range);
|
||
}
|
||
};
|
||
|
||
recognition.onresult = function(event) {
|
||
var interim_transcript = '';
|
||
if (typeof(event.results) == 'undefined') {
|
||
recognition.onend = null;
|
||
recognition.stop();
|
||
upgrade();
|
||
return;
|
||
}
|
||
for (var i = event.resultIndex; i < event.results.length; ++i) {
|
||
if (event.results[i].isFinal) {
|
||
final_transcript += event.results[i][0].transcript;
|
||
var params = "words=" + final_transcript;
|
||
xmlhttp.open("POST", "{{ url_for('command') }}",true);
|
||
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
||
//xmlhttp.setRequestHeader("Content-length", params.length);
|
||
//xmlhttp.setRequestHeader("Connection", "close");
|
||
xmlhttp.send(params);
|
||
final_transcript = "";
|
||
} else {
|
||
interim_transcript += event.results[i][0].transcript;
|
||
}
|
||
}
|
||
final_transcript = capitalize(final_transcript);
|
||
final_span.innerHTML = linebreak(final_transcript);
|
||
interim_span.innerHTML = linebreak(interim_transcript);
|
||
};
|
||
}
|
||
|
||
function upgrade() {
|
||
start_button.style.visibility = 'hidden';
|
||
showInfo('info_upgrade');
|
||
}
|
||
|
||
var two_line = /\n\n/g;
|
||
var one_line = /\n/g;
|
||
function linebreak(s) {
|
||
return s.replace(two_line, '<p></p>').replace(one_line, '<br>');
|
||
}
|
||
|
||
var first_char = /\S/;
|
||
function capitalize(s) {
|
||
return s.replace(first_char, function(m) { return m.toUpperCase(); });
|
||
}
|
||
|
||
function startButton(event) {
|
||
if (recognizing) {
|
||
recognition.stop();
|
||
return;
|
||
}
|
||
final_transcript = '';
|
||
recognition.lang = select_dialect.value;
|
||
recognition.start();
|
||
ignore_onend = false;
|
||
final_span.innerHTML = '';
|
||
interim_span.innerHTML = '';
|
||
start_img.src = '{{ url_for("static", filename="mic-slash.gif") }}';
|
||
showInfo('info_allow');
|
||
start_timestamp = event.timeStamp;
|
||
}
|
||
|
||
function showInfo(s) {
|
||
if (s) {
|
||
for (var child = info.firstChild; child; child = child.nextSibling) {
|
||
if (child.style) {
|
||
child.style.display = child.id == s ? 'inline' : 'none';
|
||
}
|
||
}
|
||
info.style.visibility = 'visible';
|
||
} else {
|
||
info.style.visibility = 'hidden';
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |