/gist:cfc008599fa9a82eeba4127648009132
Forked from artemgoncharuk/gist:b31b6a656c954a2866e8<html> | |
<head> | |
<title>API Example</title> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> | |
<script type="text/javascript"> | |
var accessToken = "<your agent's client access token>"; | |
var baseUrl = "https://api.api.ai/v1/"; | |
$(document).ready(function() { | |
$("#input").keypress(function(event) { | |
if (event.which == 13) { | |
event.preventDefault(); | |
send(); | |
} | |
}); | |
$("#rec").click(function(event) { | |
switchRecognition(); | |
}); | |
}); | |
var recognition; | |
function startRecognition() { | |
recognition = new webkitSpeechRecognition(); | |
recognition.onstart = function(event) { | |
updateRec(); | |
}; | |
recognition.onresult = function(event) { | |
var text = ""; | |
for (var i = event.resultIndex; i < event.results.length; ++i) { | |
text += event.results[i][0].transcript; | |
} | |
setInput(text); | |
stopRecognition(); | |
}; | |
recognition.onend = function() { | |
stopRecognition(); | |
}; | |
recognition.lang = "en-US"; | |
recognition.start(); | |
} | |
function stopRecognition() { | |
if (recognition) { | |
recognition.stop(); | |
recognition = null; | |
} | |
updateRec(); | |
} | |
function switchRecognition() { | |
if (recognition) { | |
stopRecognition(); | |
} else { | |
startRecognition(); | |
} | |
} | |
function setInput(text) { | |
$("#input").val(text); | |
send(); | |
} | |
function updateRec() { | |
$("#rec").text(recognition ? "Stop" : "Speak"); | |
} | |
function send() { | |
var text = $("#input").val(); | |
$.ajax({ | |
type: "POST", | |
url: baseUrl + "query?v=20150910", | |
contentType: "application/json; charset=utf-8", | |
dataType: "json", | |
headers: { | |
"Authorization": "Bearer " + accessToken | |
}, | |
data: JSON.stringify({ query: text, lang: "en", sessionId: "somerandomthing" }), | |
success: function(data) { | |
setResponse(JSON.stringify(data, undefined, 2)); | |
}, | |
error: function() { | |
setResponse("Internal Server Error"); | |
} | |
}); | |
setResponse("Loading..."); | |
} | |
function setResponse(val) { | |
$("#response").text(val); | |
} | |
</script> | |
<style type="text/css"> | |
body { width: 500px; margin: 0 auto; text-align: center; margin-top: 20px; } | |
div { position: absolute; } | |
input { width: 400px; } | |
button { width: 50px; } | |
textarea { width: 100%; } | |
</style> | |
</head> | |
<body> | |
<div> | |
<input id="input" type="text"> <button id="rec">Speak</button> | |
<br>Response<br> <textarea id="response" cols="40" rows="20"></textarea> | |
</div> | |
</body> | |
</html> |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
@BipulRaman, @jib123456 - can you check it now? Just copy to my local machine and execute with my access token. |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
Hi! To add speech response add the following piece of code to function setResponse(), and let synth be a global var. Also do not JSON.stringify() in function send():success, do this in function setResponse() so that val for the below is an Object. Also test your sound, e.g. ensure sound is not muted on computer. Works in Chrome:
|
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
Could someone please explain the updateRec function and how it works? |
This comment has been minimized.
This comment has been minimized.
I have also getting JSON Respond. How I can use only reply from that format |
This comment has been minimized.
This comment has been minimized.
i have copied my client access token to the HTML code but still, it doesn't run |
This comment has been minimized.
This comment has been minimized.
Remove this symbol < from client token, and tadaaaaaaaa.... |
This comment has been minimized.
This comment has been minimized.
How it running in mobile application iOS or android? |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
isn't there a version 2 already? I tried updating this part
But doesn't seem to work |
This comment has been minimized.
This comment has been minimized.
Works perfectly for me. Can anyone help with -
|
This comment has been minimized.
This comment has been minimized.
@panconjugo: It seems one can use:
|
This comment has been minimized.
This comment has been minimized.
Can you please tell me how to set only the result of the bot's speech in the response section and not the entire json code. var debugJSON = JSON.stringify(val, undefined, 2), thnks in advance |
This comment has been minimized.
This comment has been minimized.
SOLUTION TO GET THE SPEECH VALUE FROM THE JSON:function send() {
var text = $("#input").val();
$.ajax({
type: "POST",
url: baseUrl + "query?v=20150910",
contentType: "application/json; charset=utf-8",
dataType: "json",
headers: {
"Authorization": "Bearer " + accessToken
},
data: JSON.stringify({ query: text, lang: "en", sessionId: "somerandomthing" }),
success: function(data) {
var respText = data.result.fulfillment.speech;
console.log("Respuesta: " + respText);
setResponse(respText);
},
error: function() {
setResponse("Internal Server Error");
}
});
setResponse("Thinking...");
} |
This comment has been minimized.
This comment has been minimized.
how can get text response instead of json |
This comment has been minimized.
This comment has been minimized.
what should I write in base URL? |
This comment has been minimized.
This comment has been minimized.
@SachinNarkhede see the solution from PatricioJulian (Works like a charm)
|
This comment has been minimized.
This comment has been minimized.
Application responds successfully in chat , My concern is "How to use other intents like web search and map location , navigation etc ". I had added web search, map intents but i get empty responses. I would like to know how application will respond on browser or map instead empty responses or successful json. plz help with the coding |
This comment has been minimized.
This comment has been minimized.
i want immediate help?? |
This comment has been minimized.
This comment has been minimized.
when the page loading microphone automatically blocked ? what the reason for that ? i changed access settings and all but issue is occur . |
This comment has been minimized.
This comment has been minimized.
Hi @gitdana it's because it needs a http server up and running to up and run with the microphone simply add a nodejs server and it will notblock microphone and will run with http protocol so it's done |
This comment has been minimized.
This comment has been minimized.
hello |
This comment has been minimized.
This comment has been minimized.
@jbakoume, to have a chat-alike version you need to start by implementing @PatricioJulian solution to extract from the JSON reply only the answer. This is a simple approach:
|
This comment has been minimized.
This comment has been minimized.
if you want spoken reactions do this: |
This comment has been minimized.
This comment has been minimized.
@MarcoBoer thanks for the text to speech feature, it is pretty cool. |
This comment has been minimized.
This comment has been minimized.
it is not working in android chrome browser. microphone is not enabling when clicking on speech button. |
This comment has been minimized.
This comment has been minimized.
The voice output is not working in iPhone devices, both Chrome and Safari browsers. Any solutions to this issue, please? |
This comment has been minimized.
This comment has been minimized.
@Towerss the code is not working for me. The textbox is not taking any input. |
This comment has been minimized.
This comment has been minimized.
Hi guys, If I want a picture after a specific response? How do I get it do that? I have tried using custom payload but I can't get it to work! |
This comment has been minimized.
This comment has been minimized.
i was able to run it using python simple httpserver |
This comment has been minimized.
This comment has been minimized.
REVISED HTML5 CODE<html>
<head>
<title>API Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
var accessToken ="youraccesstokenhere";
var baseUrl = "https://api.dialogflow.com/v1/";
$(document).ready(function() {
$("#input").keypress(function(event) {
if (event.which == 13) {
event.preventDefault();
send();
this.value = '';
}
});
$("#rec").click(function(event) {
switchRecognition();
});
});
var recognition;
function startRecognition() {
recognition = new webkitSpeechRecognition();
recognition.onstart = function(event) {
updateRec();
};
recognition.onresult = function(event) {
var text = "";
for (var i = event.resultIndex; i < event.results.length; ++i) {
text += event.results[i][0].transcript;
}
setInput(text);
stopRecognition();
};
recognition.onend = function() {
stopRecognition();
};
recognition.lang = "en-US";
recognition.start();
}
function stopRecognition() {
if (recognition) {
recognition.stop();
recognition = null;
}
updateRec();
}
function switchRecognition() {
if (recognition) {
stopRecognition();
} else {
startRecognition();
}
}
function setInput(text) {
$("#input").val(text);
send();
}
function updateRec() {
$("#rec").text(recognition ? "Stop" : "Speak");
}
function send() {
var text = $("#input").val();
conversation.push("Me: " + text + '\r\n');
$.ajax({
type: "POST",
url: baseUrl + "query?v=20150910",
contentType: "application/json; charset=utf-8",
dataType: "json",
headers: {
"Authorization": "Bearer " + accessToken
},
data: JSON.stringify({ query: text, lang: "en", sessionId: "somerandomthing" }),
success: function(data) {
var respText = data.result.fulfillment.speech;
console.log("Respuesta: " + respText);
setResponse(respText);
$("#response").scrollTop($("#response").height());
},
error: function() {
setResponse("Internal Server Error");
}
});
}
function setResponse(val) {
//Edit "AI: " to change name
conversation.push("AI: " + val + '\r\n');
$("#response").text(conversation.join(""));
}
var conversation = [];
</script>
<style type="text/css">
bot.body { width: 500px; margin: 0 auto; margin-top: 20px; }
bot.div { position: absolute; }
bot.input { width: 400px; }
bot.button { width: 50px; }
bot.textarea { width: 100%; }
</style>
</head>
<body>
<div class="bot">
<textarea readOnly = true; id="response" cols="40" rows="20" style="resize: none;"></textarea>
<br />
<input id="input" type="text" placeholder="Type here..." autocomplete="off" /><button id="rec">Speak</button>
</div>
</body>
</html> Added: Text response only, auto-clear input box, "conversation" view, auto-scroll (not entirely working, after a little bit stops working) |
This comment has been minimized.
This comment has been minimized.
@thealexin05 I think it's because he said "Add |
This comment has been minimized.
This comment has been minimized.
Hey guys, Thanks! |
This comment has been minimized.
This comment has been minimized.
@ignaciostellino You could just implement this in it's own stand-alone web page and use some other code to have it pop-up as a new window, and also adjust the height and width settings. |
This comment has been minimized.
This comment has been minimized.
Is there any way I can integrate images to my response? |
This comment has been minimized.
This comment has been minimized.
|
This comment has been minimized.
This comment has been minimized.
Hi, thanks @TristianK3604 etc for your great work. Does anyone have any code that we could add in order to automatically send the voice messages? (ie speech to text). Currently the speech is converted into text and user has to automatically press enter to send this text. |
This comment has been minimized.
This comment has been minimized.
Hi @TristianK3604, |
This comment has been minimized.
This comment has been minimized.
Here's the stuff mentioned above. Just put in your access token and it should all work. ` <title>API Example</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> var accessToken ="INSERT YOUR ACCESS TOKEN"; var baseUrl = "https://api.dialogflow.com/v1/"; $(document).ready(function() { $("#input").keypress(function(event) { if (event.which == 13) { event.preventDefault(); send(); this.value = ''; } }); $("#rec").click(function(event) { switchRecognition(); }); }); var recognition; function startRecognition() { recognition = new webkitSpeechRecognition(); recognition.onstart = function(event) { updateRec(); }; recognition.onresult = function(event) { var text = ""; for (var i = event.resultIndex; i < event.results.length; ++i) { text += event.results[i][0].transcript; } setInput(text); stopRecognition(); }; recognition.onend = function() { stopRecognition(); }; recognition.lang = "en-US"; recognition.start(); } function stopRecognition() { if (recognition) { recognition.stop(); recognition = null; } updateRec(); } function switchRecognition() { if (recognition) { stopRecognition(); } else { startRecognition(); } } function setInput(text) { $("#input").val(text); send(); } function updateRec() { $("#rec").text(recognition ? "Stop" : "Speak"); } function send() { var text = $("#input").val(); conversation.push("Me: " + text + '\r\n'); $.ajax({ type: "POST", url: baseUrl + "query?v=20150910", contentType: "application/json; charset=utf-8", dataType: "json", headers: { "Authorization": "Bearer " + accessToken }, data: JSON.stringify({ query: text, lang: "en", sessionId: "somerandomthing" }), success: function(data) { var respText = data.result.fulfillment.speech; console.log("Respuesta: " + respText); setResponse(respText); }, error: function() { setResponse("Internal Server Error"); } }); } function setResponse(val) { //Edit "AI: " to change name conversation.push("AI: " + val + '\r\n'); $("#response").text(conversation.join("")); } var conversation = []; </script> <style type="text/css"> body { background-color: #333333; width: 500px; margin: 0 auto; text-align: center; margin-top: 20px; } div { position: absolute; } input { color: #000000; background-color: #00BFFF; width: 500px; } button { color: #FFD700; background-color: #228B22; width: 100px; } textarea { background-color: #FFD700; width: 100%; } </style>
Chat
`
Response <textarea id="response" cols="40" rows="20"></textarea> |
This comment has been minimized.
This comment has been minimized.
@ignaciostellino No idea. Sorry. |
This comment has been minimized.
This comment has been minimized.
Buenas, ya probe el ejemplo, y funciona, SOOOLO que el micro no funciona y en chorme me bloquea en migro y lo acepto y nada. Ayuda por favor.
Speak
Response <textarea id="response" cols="40" rows="20"></textarea> |
This comment has been minimized.
This comment has been minimized.
I can get a response, but I do not see the rich content data in the JSON. Testing my app in Google Actions console and I get a beautiful image. But using this code I only get the text.
How do I actually get the rich content back? |
This comment has been minimized.
This comment has been minimized.
@TristianK3604 Man you are amazing :) thanks a lot for putting the whole filtered code |
This comment has been minimized.
This comment has been minimized.
i am getting this error can anyone help please urgent!!! mato.html:1 Failed to load https://api.dialogflow.com/v1/query?v=20150910: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'null' that is not equal to the supplied origin. Origin 'null' is therefore not allowed access. |
This comment has been minimized.
This comment has been minimized.
getting same error @ruchit2277 |
This comment has been minimized.
This comment has been minimized.
Getting the same error of @ruchit2277 and @sai2018 Failed to load https://api.dialogflow.com/v1/query?v=20150910: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'null' that is not equal to the supplied origin. Origin 'null' is therefore not allowed access. |
This comment has been minimized.
This comment has been minimized.
@cassanellicarlo |
This comment has been minimized.
This comment has been minimized.
Thanks, it works! (I was trying without a web server with Microsoft Edge and it worked) |
This comment has been minimized.
This comment has been minimized.
How do i add microphone glyphicon in the place of chat button ? |
This comment has been minimized.
This comment has been minimized.
internal server error is displaying. i tried a lot please.. anyone give solution to it |
This comment has been minimized.
This comment has been minimized.
Dude I was trying to get this working for a hot minute. Thanks a lot! |
This comment has been minimized.
This comment has been minimized.
Hey Guys, Dose anyone have HTML + JS sdk for V2 version. ? Thanks. |
This comment has been minimized.
This comment has been minimized.
@Samarth26 - Expanding on @TristianK3604 comment on Oct 23, 2017 I have used a div to display the user and bot output rather than a textarea. This way any html in the output (links,images,etc) will display. I have also added some additional styling allowing you to easily hide the user/bot name, highlight the current response, general prettyness and added a container to hide the response scroll bar if needed: |
This comment has been minimized.
This comment has been minimized.
@latestscoop Thanks alot i was looking for a code like this thanks again |
This comment has been minimized.
This comment has been minimized.
How do you add voice recognition to this example? I don't want to be typing to answer. |
This comment has been minimized.
This comment has been minimized.
Someone knows how to differentiate a message with accents from one without accents? |
This comment has been minimized.
This comment has been minimized.
Store it to a variable like this This will return 'Howdy' as per your response... |
This comment has been minimized.
This comment has been minimized.
Does anyone have an example with API V2? |
This comment has been minimized.
This isn't working for me. It says Internal Server Error.