iobroker.sonus
Version:
With this adapter you can control ioBroker with voice in many different languages
490 lines (429 loc) • 22.6 kB
HTML
<html>
<head>
<!-- Load ioBroker scripts and styles-->
<link rel="stylesheet" type="text/css" href="../../css/adapter.css"/>
<link rel="stylesheet" type="text/css" href="../../lib/css/materialize.css">
<script type="text/javascript" src="../../lib/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../../socket.io/socket.io.js"></script>
<script type="text/javascript" src="../../js/translate.js"></script>
<script type="text/javascript" src="../../lib/js/materialize.js"></script>
<script type="text/javascript" src="../../js/adapter-settings.js"></script>
<!-- Load our own files -->
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="words.js"></script>
<style>
#drop_zone {
border: 2px dashed #bbb;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 25px;
text-align: center;
font-size: 20pt;
font-weight: bold;
font-family: 'Arial';
color: #bbb;
width: 90%;
height: 60px;
}
.error {
border: 2px solid red;
}
.m .row {
margin-bottom: 0;
}
</style>
<script type="text/javascript">
var secret;
/*
//webkitURL is deprecated but nevertheless
var URL = window.URL || window.webkitURL;
var gumStream; //stream from getUserMedia()
var rec; //Recorder.js object
var input; //MediaStreamAudioSourceNode we'll be recording
// shim for AudioContext when it's not avb.
var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioContext; //audio context to help us record
var $recordButton;
var recording = false;
var samples = [];
function showAudio(blob, i) {
var url = URL.createObjectURL(blob);
var au = document.createElement('audio');
var li = document.createElement('li');
var link = document.createElement('a');
var del = document.createElement('button');
del.innerHTML = _('Delete');
del.className = 'button-delete';
//add controls to the <audio> element
au.controls = true;
au.src = url;
//save to disk link
link.href = url;
link.download = i + '.wav'; // download forces the browser to download the file using the filename
link.innerHTML = 'Save to disk';
// add the new audio element to li
li.appendChild(au);
// add the filename to the li
li.appendChild(document.createTextNode(i + '.wav '));
// add the save to disk link to li
li.appendChild(link);
// add delete button
li.appendChild(del);
// add the li element to the ol
return li;
}
function addToList(blob) {
samples.push(blob);
var $list = $('#audio_list').html('');
for (var i = 0; i < samples.length; i++) {
$list.append(showAudio(samples[i]));
}
}
function startRecording() {
var constraints = {audio: true, video: false};
recording = true;
$recordButton.find('.translate').text(_('Stop'));
// We're using the standard promise based getUserMedia()
// https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
navigator.mediaDevices.getUserMedia(constraints)
.then(function (stream) {
console.log('getUserMedia() success, stream created, initializing Recorder.js ...');
// create an audio context after getUserMedia is called
// sampleRate might change after getUserMedia is called, like it does on macOS when recording through AirPods
// the sampleRate defaults to the one set in your OS for your playback device
audioContext = new AudioContext();
// update the format
document.getElementById('formats').innerHTML = 'Format: 1 channel pcm @ ' + audioContext.sampleRate/1000 + 'kHz';
// assign to gumStream for later use
gumStream = stream;
// use the stream
input = audioContext.createMediaStreamSource(stream);
// Create the Recorder object and configure to record mono sound (1 channel)
// Recording 2 channels will double the file size
rec = new Recorder(input, {numChannels: 1});
// start the recording process
rec.record();
console.log('Recording started');
}).catch(function (err) {
recording = false;
$recordButton.find('.translate').text(_('Record'));
});
}
function stopRecording() {
recording = false;
$recordButton.find('.translate').text(_('Rec'));
rec.stop();
//stop microphone access
gumStream.getAudioTracks()[0].stop();
//create the wav blob and pass it on to createDownloadLink
rec.exportWAV(addToList);
}
function initRecord() {
$recordButton = $('#recordButton');
$recordButton.on('click', function () {
recording ? stopRecording() : startRecording();
});
}*/
function fillInstances(current) {
getAdapterInstances('text2command', function (instances) {
var $select = $('#text2command');
for (var i = 0; i < instances.length; i++) {
var n = instances[i]._id.replace('system.adapter.', '');
$select.append('<option value="' + n + '">' + n + '</option>');
}
$select.val(current);
$select.select();
});
}
function uploadFile(file, callback) {
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = function(e) {
socket.emit('writeFile', 'sonus.' + instance, '/model.mdl', e.target.result, function () {
if (callback) callback(file.name);
});
};
// Read in the image file as a data URL.
reader.readAsArrayBuffer(file);
}
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
$('#drop_indcator').hide();
// files is a FileList of File objects. List some properties.
var f = files[0];
if (f.size > 1024 * 1024) {
showMessage(_('File %s is too big. Maximum 5MB', escape(f.name)));
$('#files').val('');
return;
}
uploadFile(f, function (name) {
$('#files').val('');
});
}
function handleFileSelectDrop(evt) {
$('#drop_indcator').hide();
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files; // FileList object.
// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
if (f.size > 1024 * 1024) {
showMessage(_('File %s is too big. Maximum 1MB', escape(f.name)));
return;
}
console.log(escape(f.name));
}
}
function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
$('#drop_indcator').show();
}
function load(settings, onChange) {
if (!settings) return;
socket.emit('getObject', 'system.config', function (err, obj) {
secret = (obj.native ? obj.native.secret : '') || 'Zgfr56gFe87jJOM';
settings.googleJson = decrypt(secret, settings.googleJson);
$('.value').each(function () {
var $key = $(this);
var id = $key.attr('id');
if ($key.attr('type') === 'checkbox') {
// do not call onChange direct, because onChange could expect some arguments
$key.prop('checked', settings[id])
.on('change', () => onChange())
;
} else {
// do not call onChange direct, because onChange could expect some arguments
$key.val(settings[id])
.on('change', () => onChange())
.on('keyup', () => onChange())
;
}
});
fillInstances(settings.text2command || '');
//initRecord();
document.getElementById('files').addEventListener('change', handleFileSelect, false);
var dropZone = document.getElementById('drop_zone');
if (dropZone) {
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
/*dropZone.addEventListener('dragend', function () {
$(this).css({background: 'white'});
console.log('dragend');
return false;
}, false);
dropZone.addEventListener('dragstart', function () {
console.log('dragstart');
}, false);
dropZone.addEventListener('dragleave', function () {
$(this).css({background: 'white'});
}, false);
dropZone.addEventListener('dragenter', function () {
$(this).css({background: 'gray'});
}, false);*/
}
onChange(false);
// reinitialize all the Materialize labels on the page if you are dynamically adding inputs:
typeof M !== 'undefined' && M.updateTextFields();
typeof M !== 'undefined' && $('#language').select();
});
}
// This will be called by the admin adapter when the user presses the save button
function save(callback) {
var obj = {};
$('.value').each(function () {
var $this = $(this);
if ($this.attr('type') === 'checkbox') {
obj[$this.attr('id')] = $this.prop('checked');
} else {
obj[$this.attr('id')] = $this.val();
}
});
obj.googleJson = encrypt(secret, obj.googleJson);
callback(obj);
}
</script>
</head>
<body>
<div class="m adapter-container">
<div class="row">
<div class="col s12 m4 l2">
<img src="sonus.png" class="logo">
</div>
</div>
<div class="row">
<div class="col s6 input-field">
<select class="value" id="language">
<option value="de-DE">Deutsch (Deutschland)</option>
<option value="en-US">English (United States)</option>
<option value="ru-RU">Русский (Россия)</option>
<option value="af-ZA">Afrikaans (Suid-Afrika)</option>
<option value="am-ET">አማርኛ (ኢትዮጵያ)</option>
<option value="hy-AM">Հայ (Հայաստան)</option>
<option value="az-AZ">Azərbaycan (Azərbaycan)</option>
<option value="id-ID">Bahasa Indonesia (Indonesia)</option>
<option value="ms-MY">Bahasa Melayu (Malaysia)</option>
<option value="bn-BD">বাংলা (বাংলাদেশ)</option>
<option value="bn-IN">বাংলা (ভারত)</option>
<option value="ca-ES">Català (Espanya)</option>
<option value="cs-CZ">Čeština (Česká republika)</option>
<option value="da-DK">Dansk (Danmark)</option>
<option value="en-AU">English (Australia)</option>
<option value="en-CA">English (Canada)</option>
<option value="en-GH">English (Ghana)</option>
<option value="en-GB">English (Great Britain)</option>
<option value="en-IN">English (India)</option>
<option value="en-IE">English (Ireland)</option>
<option value="en-KE">English (Kenya)</option>
<option value="en-NZ">English (New Zealand)</option>
<option value="en-NG">English (Nigeria)</option>
<option value="en-PH">English (Philippines)</option>
<option value="en-SG">English (Singapore)</option>
<option value="en-ZA">English (South Africa)</option>
<option value="en-TZ">English (Tanzania)</option>
<option value="es-AR">Español (Argentina)</option>
<option value="es-BO">Español (Bolivia)</option>
<option value="es-CL">Español (Chile)</option>
<option value="es-CO">Español (Colombia)</option>
<option value="es-CR">Español (Costa Rica)</option>
<option value="es-EG">Español (Ecuador)</option>
<option value="es-SV">Español (El Salvador)</option>
<option value="es-ES">Español (España)</option>
<option value="es-US">Español (Estados Unidos)</option>
<option value="es-GT">Español (Guatemala)</option>
<option value="es-HN">Español (Honduras)</option>
<option value="es-MX">Español (México)</option>
<option value="es-NI">Español (Nicaragua)</option>
<option value="es-PA">Español (Panama)</option>
<option value="es-PY">Español (Paraguay)</option>
<option value="es-PE">Español (Perú)</option>
<option value="es-PR">Español (Puerto Rico)</option>
<option value="es-DO">Español (República Dominicana)</option>
<option value="es-UY">Español (Uruguay)</option>
<option value="es-VE">Español (Venezuela)</option>
<option value="eu-ES">Euskara (Espainia)</option>
<option value="fil-PH">Filipino (Pilipinas)</option>
<option value="fr-CA">Français (Canada)</option>
<option value="fr-FR">Français (France)</option>
<option value="gl-ES">Galego (España)</option>
<option value="ka-GE">ქართული (საქართველო)</option>
<option value="gu-IN">ગુજરાતી (ભારત)</option>
<option value="hr-HR">Hrvatski (Hrvatska)</option>
<option value="zu-ZA">IsiZulu (Ningizimu Afrika)</option>
<option value="is-IS">Íslenska (Ísland)</option>
<option value="it-IT">Italiano (Italia)</option>
<option value="jv-ID">Jawa (Indonesia)</option>
<option value="kn-IN">ಕನ್ನಡ (ಭಾರತ)</option>
<option value="km-KH">ភាសាខ្មែរ (កម្ពុជា)</option>
<option value="lo-LA">ລາວ (ລາວ)</option>
<option value="lv-LV">Latviešu (latviešu)</option>
<option value="lt-LT">Lietuvių (Lietuva)</option>
<option value="hu-HU">Magyar (Magyarország)</option>
<option value="ml-IN">മലയാളം (ഇന്ത്യ)</option>
<option value="mr-IN">मराठी (भारत)</option>
<option value="nl-NL">Nederlands (Nederland)</option>
<option value="ne-NP">नेपाली (नेपाल)</option>
<option value="nb-NO">Norsk bokmål (Norge)</option>
<option value="pl-PL">Polski (Polska)</option>
<option value="pt-BR">Português (Brasil)</option>
<option value="pt-PT">Português (Portugal)</option>
<option value="ro-RO">Română (România)</option>
<option value="si-LK">සිංහල (ශ්රී ලංකාව)</option>
<option value="sk-SK">Slovenčina (Slovensko)</option>
<option value="sl-SI">Slovenščina (Slovenija)</option>
<option value="su-ID">Urang (Indonesia)</option>
<option value="sw-TZ">Swahili (Tanzania)</option>
<option value="sw-KE">Swahili (Kenya)</option>
<option value="fi-FI">Suomi (Suomi)</option>
<option value="sv-SE">Svenska (Sverige)</option>
<option value="ta-IN">தமிழ் (இந்தியா)</option>
<option value="ta-SG">தமிழ் (சிங்கப்பூர்)</option>
<option value="ta-LK">தமிழ் (இலங்கை)</option>
<option value="ta-MY">தமிழ் (மலேசியா)</option>
<option value="te-IN">తెలుగు (భారతదేశం)</option>
<option value="vi-VN">Tiếng Việt (Việt Nam)</option>
<option value="tr-TR">Türkçe (Türkiye)</option>
<option value="ur-PK">اردو (پاکستان)</option>
<option value="ur-IN">اردو (بھارت)</option>
<option value="el-GR">Ελληνικά (Ελλάδα)</option>
<option value="bg-BG">Български (България)</option>
<option value="sr-RS">Српски (Србија)</option>
<option value="uk-UA">Українська (Україна)</option>
<option value="he-IL">עברית (ישראל)</option>
<option value="ar-IL">العربية (إسرائيل)</option>
<option value="ar-JO">العربية (الأردن)</option>
<option value="ar-AE">العربية (الإمارات)</option>
<option value="ar-BH">العربية (البحرين)</option>
<option value="ar-DZ">العربية (الجزائر)</option>
<option value="ar-SA">العربية (السعودية)</option>
<option value="ar-IQ">العربية (العراق)</option>
<option value="ar-KW">العربية (الكويت)</option>
<option value="ar-MA">العربية (المغرب)</option>
<option value="ar-TN">العربية (تونس)</option>
<option value="ar-OM">العربية (عُمان)</option>
<option value="ar-PS">العربية (فلسطين)</option>
<option value="ar-QA">العربية (قطر)</option>
<option value="ar-LB">العربية (لبنان)</option>
<option value="ar-EG">العربية (مصر)</option>
<option value="fa-IR">فارسی (ایران)</option>
<option value="hi-IN">हिन्दी (भारत)</option>
<option value="th-TH">ไทย (ประเทศไทย)</option>
<option value="ko-KR">한국어 (대한민국)</option>
<option value="zh-TW">國語 (台灣)</option>
<option value="yue-Hant-HK">廣東話 (香港)</option>
<option value="ja-JP">日本語（日本）</option>
<option value="zh-HK">普通話 (香港)</option>
<option value="zh">普通话 (中国大陆)</option>
</select>
<label for="language" class="translate">Language</label>
</div>
</div>
<div class="row">
<div class="col s6 input-field">
<input type="text" class="value" id="googleJson"/>
<label for="googleJson" class="translate">Google credentials</label>
</div>
</div>
<div class="row">
<div class="col s6 input-field">
<select class="value" id="text2command">
<option value="" class="translate">Choose instance</option>
</select>
<label for="text2command" class="translate">Use text2command:</label>
</div>
</div>
<div class="row">
<div class="file-field input-field col s6 m4">
<div class="btn">
<input type="file" accept=".umdl,.pmdl" id="files" name="files[]" multiple />
<label class="translate" style="color: white">Upload own hotword model</label>
</div>
</div>
<div class="file-field input-field col s6 m4">
<span class="translate">You can create the model here: </span>
<a href="https://snowboy.kitt.ai/hotword/" target="_blank">snowboy.kitt.ai</a>
</div>
<div class="row">
<div class="input-field col s11 l4">
<input class="value" id="sensitivity" type="number" />
<label for="sensitivity" class="translate">Sensitivity</label>
</div>
</div>
<!-- div class="col s6 input-field">
<input type="checkbox" class="value" id="rec"/>
<span for="rec" class="translate">Use "rec" instead of "arecord"</span>
</div>
<div class="col s6 input-field">
<a id="recordButton" class="waves-effect waves-light btn"><i class="material-icons right">rec</i><span class="translate">Record</span></a>
<span id="formats"></span>
</div>
<div class="col s6 input-field" id="audio_list">
</div-->
</div>
<div id="drop_zone" style="display: none" class="translate">place here</div>
</div>
</body>
</html>