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