dialog flow js example
<html> <head> <title>API Example</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="https://cdn.jsdelivr.net/npm/jquery@2.1.1/dist/jquery.min.js"></script> <script type="text/javascript"> var accessToken = "<Put Your Agent Access Token Here!>"; var baseUrl = "https://api.api.ai/v1/"; var synth; var conversation=[]; $(document).ready(function() { $("#input").keypress(function(event) { if (event.which == 13) { event.preventDefault(); send(); } }); $("#rec").click(function(event) { switchRecognition(); }); $("#speech").click(function(event) { setSpeechResponse(conversation[conversation.length - 1]); //setSpeechResponse('test'); }); }); var recognition; function getVoices(){ alert(synth.getVoices()) setTimeout('getVoices',1000) } 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) { //setResponse(JSON.stringify(data, undefined, 2)); console.dir(data); var respText = data.result.fulfillment.speech; setResponse(respText); $("#response").scrollTop($("#response").height()); }, error: function() { setResponse("Internal Server Error"); } }); //setResponse("Loading..."); } function setResponse(val) { conversation.push("AI: " + val + '\r\n'); $("#response").text(conversation.join("")); setSpeechResponse(val); } function setSpeechResponse(val) { if(!val){ return; } synth = window.speechSynthesis; var utterThis = new SpeechSynthesisUtterance(val); utterThis.lang = "en-US"; synth.speak(utterThis); } </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><button id="speech">Speech</button> <br>Response<br> <textarea id="response" cols="40" rows="20"></textarea> </div> </body> </html>
源码:https://gist.github.com/zengde/75a4063c9c3cabda237e8dd650a36b61