I have a problem with speech recognition integration into webchat. This is the code I use. It´s just the same code like here: https://github.com/microsoft/BotFramework-WebChat/blob/master/SPEECH.md#integrating-web-chat-into-your-page
But I always get the error: Uncaught SyntaxError: Unexpected identifier at line...
and line of error is: webSpeechPonyfillFactory: await createSpeechRecognitionOnlyPonyfillFactory({
Without speech recognition it´s all working. Do you have some idea?
const { createCognitiveServicesSpeechServicesPonyfillFactory, createDirectLine, renderWebChat } = window.WebChat;
const styleOptions = {
botAvatarInitials: 'Bot',
userAvatarInitials: 'You'
};
renderWebChat(
{
directLine: createDirectLine({
secret: 'FFFFFFFFFFFFFFFF'
}),
language: 'de-DE',
webSpeechPonyfillFactory: await createSpeechRecognitionOnlyPonyfillFactory({
region: 'westeurope',
subscriptionKey: 'FFFFFFFFFFFFFFFFFFFFFF'
}),
styleOptions
},
document.getElementById('webchat')
);
document.querySelector('#webchat > *').focus();
Try this :
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Web Chat: Cognitive Services Speech Services using JavaScript</title>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<style>
html, body { height: 100% }
body { margin: 0 }
#webchat {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="webchat" role="main"></div>
<script>
(async function () {
const styleOptions = {
botAvatarInitials: 'Bot',
userAvatarInitials: 'You'
};
window.WebChat.renderWebChat({
directLine: createDirectLine({
secret: 'FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF'
}),
language: 'de-DE',
webSpeechPonyfillFactory: await createCognitiveServicesSpeechServicesPonyfillFactory({
region: 'westeurope',
subscriptionKey: 'FFFFFFFFFFFFFFFFFFFFFFFFFFFFFF'
}),
styleOptions
}, document.getElementById('webchat'));
document.querySelector('#webchat > *').focus();
})().catch(err => console.error(err));
</script>
</body>
</html>
Related
I wanna make a motion graph by using gsap in vue3. I met a question. here is an example below. object-type variable like tl return by data() is transform to Proxy by default. And it dose not work when I config it later. So I try to define a variable in setup() without using reactive(). And it works when I config it later.
Run this example, I find some differences exists between tl1(define in setup without reactive()) and tl2.target(define in data()). You can run it on CodePen.
Could someone tell me the reason why it dosen't work when it becomes proxy object?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app" style="width: 5rem;height: 5rem;">
<button #click="moveOrigin">actionOrigin</button>
<button #click="moveProxy">actionProxy</button>
</div>
<script src="https://unpkg.com/vue#next"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script>
const app = {
setup() {
const tl1 = gsap.timeline({ paused: true });
const flag = true;
return { tl1,flag };
},
data(){
const tl2 = gsap.timeline({ paused: true });
return {tl2};
},
methods: {
moveOrigin() {
console.log("tl1 Origin");
console.log(this.tl1);
if (this.flag) {
this.tl1.to("button", { y: "+=2rem", duration: 1 });
} else {
this.tl1.to("button", { y: "-=2rem", duration: 1 });
}
this.flag = !this.flag;
this.tl1.play();
},
moveProxy() {
console.log("tl2 Proxy");
console.log(this.tl2);
if (this.flag) {
this.tl2.to("button", { y: "+=2rem", duration: 1 });
} else {
this.tl2.to("button", { y: "-=2rem", duration: 1 });
}
this.flag = !this.flag;
this.tl2.play();
},
}
};
Vue.createApp(app).mount('#app');
</script>
</body>
</html>
Im new in this electron space, and have a problem. i didn´t manage to get my custom buttons to work. This drives me crazy. Anyone an idea what i´m doing wrong? the Buttons do simply nothing when i click. My code is an example from an older youtube Tutorial, and i think things have changed since then.
Here is my code:
menuHandler.js
const $ = require('jquery');
const { remote } = require('electron');
var win = remote.getCurrentWindow();
$('#minimize').click(function () {
win.minimize();
});
$('#close').click(function () {
win.close();
});
$('#maximize').click(function () {
if (win.isMaximized()) {
win.unmaximize();
} else {
win.maximize();
}
console.log(win.isMaximized());
});
my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/reset.css" rel="stylesheet">
<link href="css/menu.css" rel="stylesheet">
<script type ="text/javascript"> src="/src/js/menuHandler.js"</script>
</head>
<body>
<div id="container">
<nav>
<div id="buttons">
<div id="minimize">
<span id="minimize-font">—</span>
</div>
<div id="maximize">
<span id="size-font">◻</span>
</div>
<div id="close">
<span id="close-font" >✕</span>
</div>
</div>
</nav>
</div>
</html>
</body>
</html>
and my app.js
const { app, BrowserWindow } = require('electron');
const path = require('path');
const url = require('url');
let win;
var IMG_DIR = '/img/';
var APP_DIR = '/src/';
function createWindow() {
win = new BrowserWindow({
width: 1100,
height: 750,
minWidth: 930,
minHeight: 650,
frame: false,
/*title: "Nader | Initio",
resizable: true, */
backgroundColor: '#1A373E',
icon: path.join(__dirname, IMG_DIR, 'icon.png'),
webPreferences: {
nodeIntegration: true
}
});
win.openDevTools()
win.loadURL(url.format({
pathname: path.join(__dirname, APP_DIR, 'index.html'),
protocol: 'file:',
slashes: true
}))
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if(process.platform !== 'darwin') {
app.quit();
}
});
thank you for your help!
Several small things are needed to make your code work:
<script type ="text/javascript"> src="/src/js/menuHandler.js"</script>
needs to be
<script type="text/javascript" src="/src/js/menuHandler.js"></script>
Since Electron 10, released in August 2020, you need to set enableRemoteModule: true in the webPreferences if you want to use remote in the renderer process.
Lastly, you should register the button click event handlers after the page is loaded. Otherwise, chances are the elements don't exist yet.
$(window).on("load", function() {
console.log("loaded");
$("#minimize").click(function () {
console.log("minimize");
win.minimize();
});
// etc.
});
As a general tip I'd advise to make use of the DevTools, which you already activate in your code. There, in the Console tab, you can see JavaScript errors happening in the renderer process.
I am currently having an issue with the botchat framework from Microsoft.
In essence, they are saying that for the framework to work in I.E., all you have to do is change the script for their webchat-es5.js version. However, this still does not work at all in IE. I am using IE 11. All other browsers work fine, except IE.
Could someone please point me in the right direction so that I may have this ChatBot actually work in IE?
Here is the code I am using for all of this stuff:
Relevant HTML:
<div id="webchat" role="main" style="position: absolutel bottom:0; left:0; width:100%; height:100%;"></div>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat-es5.js"></script>
Relevant JavaScript:
const styleOptions =
{
accent: '#0063B1',
backgroundColor: 'White; border:2px solid #23447e; border-radius: 25px; padding-top:20px',
cardEmphasisBackgroundColor: '#F0F0F0',
paddingRegular: 10,
paddingWide: 10 * 2,
subtle: '#767676',
bubbleBackground: '#CCCCCC',
bubbleBorder: 'solid 1px #E6E6E6',
bubbleBorderRadius: 10,
bubbleFromUserBackground: '#0084ff',
bubbleFromUserBorder: 'solid 1px #E6E6E6',
bubbleFromUserBorderRadius: 10,
bubbleFromUserTextColor: 'White',
bubbleImageHeight: 100, //240,
bubbleMaxWidth: 480, // screen width = 600px
bubbleMinHeight: 40,
bubbleMinWidth: 250, // min screen width = 300px, Edge requires 372px (https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/13621468/)
bubbleTextColor: 'Black',
// Send box
hideSendBox: false,
hideUploadButton: false,
microphoneButtonColorOnDictate: '#F33',
sendBoxBackground: 'White',
sendBoxButtonColor: '#767676',
sendBoxButtonColorOnDisabled: '#CCC',
sendBoxButtonColorOnFocus: '#333',
sendBoxButtonColorOnHover: '#333',
sendBoxHeight: 40,
sendBoxMaxHeight: 200,
sendBoxTextColor: 'Black',
sendBoxBorderBottom: '',
sendBoxBorderLeft: '2px solid #23447e; border-radius: 25px',
sendBoxBorderRight: '2px solid #23447e; border-radius: 25px',
sendBoxBorderTop: '2px solid #23447e; border-radius: 25px',
sendBoxPlaceholderColor: '#23447e',
sendBoxTextWrap: false,
typingAnimationBackgroundImage: 'https://support.signal.org/hc/article_attachments/360016877511/typing-animation-3x.gif',
spinnerAnimationBackgroundImage: 'https://support.signal.org/hc/article_attachments/360016877511/typing-animation-3x.gif',
avatarSize: 80,
botAvatarImage: 'https://s3.gifyu.com/images/oie_3BXuLVEkv2Ad.gif',
userAvatarImage: 'https://i.ibb.co/5xz4X4P/kissclipart-generic-person-icon-clipart-computer-icons-person-96a092499db1d0d3.png',
botAvatarInitials: '',
userAvatarInitials: ''
};
const token = 'MY TOKEN SECRET IS HERE';
const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
dispatch({
type: 'WEB_CHAT/SEND_EVENT',
payload: {
name: 'webchat/join',
value: { language: window.navigator.language }
}
});
}
return next(action);
});
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({ token }),
styleOptions
}, document.getElementById("webchat"));
I've also tried their other version of rendering/creating the webchat :
window.fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' })
.then(function (res) {
return res.json();
})
.then(function (json) {
const token = json.token;
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({
token: token
})
}, document.getElementById('webchat'));
document.querySelector('#webchat > *').focus();
});
With this instantiated version, it still doesn't work in IE, and in other browsers, it loads the MockBot from GitHub instead of my own chatbot.
Arrow functions in IE11 are not supported, so you store middleware is causing the problem. Take a look at the code snippet below.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Web Chat: Full-featured bundle with ES5 polyfills</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
This CDN points to the latest official release of Web Chat. If you need to test against Web Chat's latest bits, please refer to pointing to Web Chat's MyGet feed:
https://github.com/microsoft/BotFramework-WebChat#how-to-test-with-web-chats-latest-bits
-->
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat-es5.js"></script>
<style>
html, body { height: 100% }
body { margin: 0 }
#webchat {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="webchat" role="main"></div>
<script>
// This code is modified to run in browser without async and Promise support
window.fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' })
.then(function (res) {
return res.json();
})
.then(function (json) {
const token = json.token;
const store = window.WebChat.createStore(
{},
function(store) {
return function(next) {
return function(action) {
if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
store.dispatch({
type: 'WEB_CHAT/SEND_EVENT',
payload: {
name: 'webchat/join',
value: { language: window.navigator.language }
}
});
}
return next(action);
}
}
}
);
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({
token: token
}),
store: store
}, document.getElementById('webchat'));
document.querySelector('#webchat > *').focus();
});
</script>
</body>
</html>
Hope this helps!
I started working on a large project that uses extensive number of vuex getters. The problem is, that large amount of them rely to be called in specific order or at specific time to have correct data from other getters. Looks like vue dev tools is trying to access those values, calling the getters not in expected order so some values are not correct and the app is throwing errors. Because of this I cannot use the dev tools and cannot find a simple way around it.
Here is simple snippet reproducing the issue.
This code will run just fine, but once you open dev tools, it tries to access the getter selselectedPrice which returns error until we have some data.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vuex#3.1.1/dist/vuex.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in goodThings" :key="item.title">{{ item.title }}</li>
</ul>
{{totalPrice}}
</div>
<script>
const getSomeRandomData = () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve([
{
title: 'fasfasf',
price: 20
},
{
title: 'asgfasgasg',
price: 30
},
{
title: 'asgasgasg',
price: 40
}
])
}, 1000)
})
}
const store = new Vuex.Store({
state: {
selectedItem: undefined,
warehouse: []
},
actions: {
fetchData: async function ({ commit }) {
const response = await getSomeRandomData()
commit("SET_WAREHOUSE", response)
}
},
mutations: {
SET_WAREHOUSE: (state, payload) => {
state.warehouse = [...payload]
}
},
getters: {
selselectedPrice: (state) => {
return state.warehouse[state.selectedItem].price
},
goodThings: (state) => {
return state.warehouse
},
totalPrice: (state) => {
return state.warehouse.reduce((a, item) => a+item.price, 0)
}
}
})
Vue.use(Vuex)
let app = new Vue({
el: '#app',
store,
created() {
this.$store.dispatch('fetchData')
},
computed: {
goodThings() {
return this.$store.getters.goodThings
},
totalPrice() {
return this.$store.getters.totalPrice
}
}
})
</script>
</body>
</html>
I want to login with google plus using javascript,below is my code
index.html
Here i placed all scripts,html code
<html>
<title>Login With google plus</title>
<meta name="google-signin-client_id"
content="aaaaaaaaaaa.apps.googleusercontent.com ">
<script src="jquery.min.js"></script>
<script src="https://apis.google.com/js/client:platform.js?
onload=renderButton" async defer></script>
<script>
function onSuccess(googleUser) {
var profile = googleUser.getBasicProfile();
gapi.client.load('plus', 'v1', function () {
var request = gapi.client.plus.people.get({
'userId': 'me'
});
request.execute(function (resp) {
var profileHTML = '<div class="profile"><div class="head">Welcome
'+resp.name.givenName+'! <a href="javascript:void(0);"
onclick="signOut();">Sign out</a></div>';
profileHTML += '<img src="'+resp.image.url+'"/><div
class="proDetails"><p>'+resp.displayName+'</p>
<p>'+resp.emails[0].value+'</p><p>'+resp.gender+'</p>
<p>'+resp.id+'</p><p>View Google+ Profile
</p></div></div>';
$('.userContent').html(profileHTML);
$('#gSignIn').slideUp('slow');
});
});
}
function onFailure(error) {
alert(error);
}
function renderButton() {
gapi.signin2.render('gSignIn', {
'scope': 'profile email',
'width': 240,
'height': 50,
'longtitle': true,
'theme': 'dark',
'onsuccess': onSuccess,
'onfailure': onFailure
});
}
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
$('.userContent').html('');
$('#gSignIn').slideDown('slow');
});
}
</script>
<div id="gSignIn"></div>
<div class="userContent"></div>
</html>
but when i want to login this error will show.
That’s an error.
Error: invalid_client
The OAuth client was not found.
I can't get this error, please help me to solve this error.
You have to register your application with google console to be able to use the OAuth, You will have to specify the return url after OAuth is granted by the client