How to request multiple channels using IBM Cloud Speech to Text API - api

I want to convert a wav file to text using speech-to-text on IBM Cloud.
How do I send a request to get results for two channels?
Do I use websocketAPI?
If so, is there a channel specification in the parameters?
Can anyone tell me?

Thank you for your reply.
I am trying websocket connection with javascript.
In the following program, there is no response of "websocket.send (blob);".
Is the information corresponding to the blob incorrect?
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<script>
var websocket = null;
function start() {
var IAM_access_token = "{my-token}";
var wsURI = 'wss://gateway-tok.watsonplatform.net/speech-to-text/api/v1/recognize'
+ '?access_token=' + IAM_access_token
+ '&model=ja-JP_BroadbandModel';
console.log(wsURI);
websocket = new WebSocket(wsURI);
websocket.onopen = function(evt) { onOpen(evt) };
websocket.onclose = function(evt) { onClose(evt) };
websocket.onmessage = function(evt) { onMessage(evt) };
websocket.onerror = function(evt) { onError(evt) };
}
function onOpen(evt) {
var message = {
'action': 'start',
'content-type': 'audio/wav'
};
console.log(JSON.stringify(message));
websocket.send(JSON.stringify(message));
}
function onClose(evt) {
websocket.close();
}
function onMessage(evt) {
console.log(evt);
}
function onError(evt) {
console.log(evt);
}
function sendfile() {
console.log("send click!");
console.log(document.getElementById( "data" ));
var blob = document.getElementById( "data" );
websocket.send(blob) ;
}
</script>
</head>
<body>
<form method="post" enctype="multipart/form-data">
<div id="wrap">
<button type="button" onclick="start();">start</button>
<input type="file" id="data" name="data">
<button type="button" id="send" onclick="sendfile();">send</button>
</div>
</form>
</body>
</html>

Related

SurveyJS : How to implement captcha image challenge

I try implement custom widget follow guide https://surveyjs.io/Examples/Library/?id=custom-widget-select2-tagbox
but not show image challenge of captcha
how can i implement captcha image challenge for surveyjs form?
i find the way:
html:
{
type: "html",
name: "info",
html: "<div id='g-recaptcha'></div> <div class='form-group g-recaptcha' data-callback='verifyCaptcha' data-sitekey='" + recaptchaClientKey + "'></div>"
}
ts, js
survey.onCompleting.add(function (sender, options) {
debugger;
var response = grecaptcha.getResponse();
if (response.length == 0) {
document.getElementById('g-recaptcha').innerHTML =
'<span class="form-group text-danger validation-summary-errors" data-valmsg-summary="true"><ul><li>Google reCAPTCHA validation failed</li></ul ></span >';
options.allowComplete = false;
} else {
options.allowComplete = true;
}
});
#section Scripts{
<script type="text/javascript" src="~/js/signup/survey_config.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script>
function verifyCaptcha() {
document.getElementById('g-recaptcha').innerHTML = '';
}
</script>
}

VueJS Filter Not Working

Why does filter do not work?
Error says: [Vue warn]: Failed to resolve filter: uppercase.
Not sure why but filter is not working.
Also, is this the best way to code this functionality? Are there any ways to do this, or the suggested ways? I'm not sure about using the $refs, maybe I can do this simpler, but with effective use of reusable components.
I'm trying to emulate an Ajax Response by using random message and status instead.
Link: JSBIN
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app">
<login-alert ref="refalert"></login-alert>
<p>
<button #click="showme">Random Alert</button>
</p>
</div>
<script src=" https://unpkg.com/vue"></script>
<template id="template-alert">
<div v-if="showAlert">
<div :class="'alert alert-'+alertType+' alert-dismissible'" transition="fade">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true" v-on:click="close">×</button>
<h4>{{title|uppercase}}!</h4>
{{message}}
</div>
</div>
</template>
<script>
Vue.component('login-alert', {
template: '#template-alert',
data: function() {
return {
alertType : null,
title : null,
message : null,
showAlert : false
}
},
methods: {
close: function() {
this.alertType= null;
this.title= null;
this.message= null;
this.showAlert= false;
},
open: function(type, message) {
this.alertType= type;
this.title = type;
this.message= message;
this.showAlert= true;
}
}
});
var app = new Vue({
el: '#app',
methods: {
showme: function() {
var randomStatus = ['error', 'warning', 'success'];
var randomMessage = ['Lorem Ipsum', 'Adolor Sit Amet', 'Abed Meepo'];
var status = randomStatus[Math.floor(Math.random() * randomStatus.length)];
var message = randomMessage[Math.floor(Math.random() * randomMessage.length)];
this.$refs.refalert.open(status,message);
}
}
});
</script>
</body>
</html>
The uppercase filter has been removed in Vue.js 2.
https://v2.vuejs.org/v2/guide/migration.html#Built-In-Text-Filters-removed
You can simply use:
{{ text.toUpperCase() }}
As far as the structure of your code goes, something like this is probably better off in a method:
close: function() {
this.alertType= null;
this.title= null;
this.message= null;
this.showAlert= false;
}
Since you are duplicating it twice but just with different values.

How to get results after submit form with PhantomJS?

I'm trying to get results from a simple form using PhantomJS. I'm using jQuery but don't work. I have this HTML:
<!doctype html>
<html>
<head>
<title>PhantomJS!</title>
</head>
<body>
<form method="post" id="frm">
<input type="text" name="nombre" id="nombre" />
<input type="submit" value="Publicar" id="btn-submit" />
</form>
Your name is <span id="nombrez"><?php if (isset($_POST['nombre'])) { echo $_POST['nombre'];} ?></span>
</body>
</html>
And this Javascript code:
var page = require('webpage').create();
page.open('http://localhost/phantom/', function() {
page.includeJs("https://code.jquery.com/jquery-3.1.1.slim.js", function() {
page.evaluate(function() {
$('#nombre').val('Fabian');
document.forms[0].submit();
});
page.onLoadFinished = function(){
console.log($("#nombrez").html());
phantom.exit();
};
});
});
page.onLoadFinished must not be called inside of page.evaluate, but inside the main PhantomJS script:
var page = require('webpage').create();
page.onLoadFinished = function(){
var html = page.evaluate(function(){
return document.getElementById("nombrez").innerHTML;
});
console.log(html);
phantom.exit();
};
page.open('http://localhost/phantom/', function() {
page.includeJs("https://code.jquery.com/jquery-3.1.1.slim.js", function() {
page.evaluate(function() {
$('#nombre').val('Fabian');
document.forms[0].submit();
});
});
});
However page.onLoadFinished fires every time a page is done loading and with this implementation phantom will exit the first the time page is loaded, even before the form is submitted.
You need to implement some check to distinguish between the first and the second load of the page. For example, if return html variable is empty it means that we haven't submitted page yet.

Image preview while uploading image

I am using the following script to preview image during upload. But it is notworking and not changing the src attribute.
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#field_header_image 1_preview')
.attr('src',e.target.result)
.width(150)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
Please check the JS Fiddle here http://jsfiddle.net/sw6fW/
<html>
<head>
<script src="jquery.js"></script>
<meta charset=utf-8 />
<title>Auto Image Preview</title>
</head>
<body>
<input type='file' onchange="readURL(this);" />
<img id="image_prev" src="#" alt="your image" />
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#image_prev')
.attr('src', e.target.result)
.width(150)
.height(150);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
</body>
</html>
refer to this link to get your question answered
http://rameshworpathak.com.np/preview-uploaded-image-using-jquery-while-uploading-image/
Hopefully it will help you

localStorage and updateView + windows 8

I have some items and I mark them as favorite by pressing a button, here is the code:
function AddToFavorites() {
//called when a shop is added as as a favorite one.
//first we check if already is favorite
var favoritesArray = getStoreArray();
var alreadyExists = exists();
if (!alreadyExists) {
favoritesArray.push(itemHolder);
var storage = window.localStorage;
storage.shopsFavorites = JSON.stringify(favoritesArray);
}
}
function exists() {
var alreadyExists = false;
var favoritesArray = getStoreArray();
for (var key in favoritesArray) {
if (favoritesArray[key].title == itemHolder.title) {
//already exists
alreadyExists = true;
}
}
return alreadyExists;
}
function getStoreArray() {
//restores our favorites array if any or creates one
var storage = window.localStorage;
var favoritesArray = storage.shopsFavorites;
if (favoritesArray == null || favoritesArray == "") {
//if first time
favoritesArray = new Array();
} else {
//if there are already favorites
favoritesArray = JSON.parse(favoritesArray);
}
return favoritesArray;
}
And I have a favorites.html to present those as a list.
The problem I have is that the list doesn't update automaticly every time I add or remove items.
Here is my code for that:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Αγαπημένα</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<link href="favoritesDetails.css" rel="stylesheet" />
<script src="favoritesDetails.js"></script>
</head>
<body>
<div class="favoritesDetails fragment">
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back" disabled type="button"></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">Αγαπημένα</span>
</h1>
</header>
<section aria-label="Main content" role="main">
<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
<div class="mediumListIconTextItem">
<img src="#" class="mediumListIconTextItem-Image" data-win-bind="src: picture" />
<div class="mediumListIconTextItem-Detail">
<h4 data-win-bind="innerText: title"></h4>
<h6 data-win-bind="innerText: text"></h6>
</div>
</div>
</div>
<div id="basicListView" data-win-control="WinJS.UI.ListView"
data-win-options="{itemDataSource : DataExample.itemList.dataSource,
itemTemplate: select('#mediumListIconTextTemplate')}">
</div>
</section>
</div>
</body>
</html>
And here is the JavaScript code:
// For an introduction to the Page Control template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232511
var dataArray = [], shopsArray = [];
(function () {
"use strict";
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
var nav = WinJS.Navigation;
var ui = WinJS.UI;
shopsArray = getStoreArray();
if (shopsArray) {
for (var key in shopsArray) {
var group = { title: shopsArray[key].title, text: shopsArray[key].subtitle, picture: shopsArray[key].backgroundImage, description: shopsArray[key].description, phoneNumbers: shopsArray[key].content };
dataArray.push(group);
}
var dataList = new WinJS.Binding.List(dataArray);
// Create a namespace to make the data publicly
// accessible.
var publicMembers =
{
itemList: dataList
};
WinJS.Namespace.define("DataExample", publicMembers);
}
WinJS.UI.Pages.define("/pages/favoritesDetails/favoritesDetails.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
},
unload: function () {
},
updateLayout: function (element, viewState, lastViewState) {
}
});
})();
function getStoreArray() {
//restores our favorites array if any or creates one
var storage = window.localStorage;
var favoritesArray = storage.shopsFavorites;
if (favoritesArray == null || favoritesArray == "") {
//if first time
favoritesArray = new Array();
} else {
//if there are already favorites
favoritesArray = JSON.parse(favoritesArray);
}
return favoritesArray;
}
So how can I update the favorites HTML page when new favorites are stored/removed in the localDB? can i add event listeners there?
Is the code that stores favorites a part of the same app?
If so, I would consider adding the favorite to the underlying WinJS.Binding.list that you're using to bind to the ListView, and then store the updated list info in the DB, rather than trying to react to changes in the DB from the ListView.
Have a look at the following sample, which shows how to update a ListView dynamically:
http://code.msdn.microsoft.com/windowsapps/ListView-custom-data-4dcfb128/sourcecode?fileId=50893&pathId=1976562066
Hope that helps!