Create a gist now

Instantly share code, notes, and snippets.

<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>
@jib123456

This isn't working for me. It says Internal Server Error.

@bipulraman

It is not working. It says Internal Server Error.
If we see Browser Network log, Each POST request to API returning two responses.
One with code 204 (empty response) and another is 200 (JSON response)
screen

@Gugic
Owner
Gugic commented Dec 8, 2016

@bipulraman, @jib123456 - can you check it now? Just copy to my local machine and execute with my access token.

@dubyajaysmith

Worked well here. Thanks Gugic.
ai2

@SinanGabel

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:

            if (val.result) {
                var say=""; 
                say = val.result.fulfillment.speech;
                
                synth = window.speechSynthesis;
                var utterThis = new SpeechSynthesisUtterance(say);
                //utterThis.lang = "en-US";
                synth.speak(utterThis);
            }
@A-Guidry
A-Guidry commented Jan 1, 2017 edited

I am getting a 401 error and the "internal server message" I have tried everything I can think of to allow it connect.
screen shot 2017-01-01 at 1 38 15 pm

@ankitch01
ankitch01 commented Jan 9, 2017 edited

Copy the client access token and paste it in your html code .. check attached screenshot for reference.

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment