Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save Gugic/cfc008599fa9a82eeba4127648009132 to your computer and use it in GitHub Desktop.
Save Gugic/cfc008599fa9a82eeba4127648009132 to your computer and use it in GitHub Desktop.
<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>
@cassanellicarlo
Copy link

Thanks, it works!

(I was trying without a web server with Microsoft Edge and it worked)

@sai2018
Copy link

sai2018 commented Apr 6, 2018

How do i add microphone glyphicon in the place of chat button ?
Is it possible get a response without clicking stop button i.e just by recording and sending after few seconds??

@gopal10
Copy link

gopal10 commented Apr 18, 2018

internal server error is displaying. i tried a lot please.. anyone give solution to it

@bootyButtersauce
Copy link

Dude I was trying to get this working for a hot minute. Thanks a lot!

@safee6816
Copy link

safee6816 commented Jun 1, 2018

Hey Guys,

Dose anyone have HTML + JS sdk for V2 version. ?

Thanks.

@latestscoop
Copy link

@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:
https://github.com/latestscoop/DialogFlow-HTML5/blob/edfae95c8283fb58c54339b99253a5470539debd/Simple-DialogFlow-HTML5.html#L1-L121

@alfrededwin
Copy link

@latestscoop Thanks alot i was looking for a code like this thanks again

@bsirmacek
Copy link

How do you add voice recognition to this example? I don't want to be typing to answer.

@jlcastr
Copy link

jlcastr commented Jan 28, 2019

Someone knows how to differentiate a message with accents from one without accents?
The json does not recognize him

@prashant1k99
Copy link

I have also getting JSON Respond. How I can use only reply from that format
{
"id": "0ed65683-64b3-41eb-990b-4d1f2b6606e7",
"timestamp": "2017-03-11T20:24:21.693Z",
"result": {
"source": "domains",
"resolvedQuery": "Hi",
"action": "smalltalk.greetings",
"parameters": {
"simplified": "hello"
},
"metadata": {},
"fulfillment": {
"speech": "Howdy."
},
"score": 1
},
"status": {
"code": 200,
"errorType": "success"
},
"sessionId": "somerandomthing"
}

Store it to a variable like this
var resp = <the response data from the api>;
and to specifically use response in the app:
var speech = resp.speech;

This will return 'Howdy' as per your response...

@umnibot
Copy link

umnibot commented Mar 27, 2019

Does anyone have an example with API V2?

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