dialog flow js example

作者: zengde 分类: ai 发布时间: 2019-04-15 02:23
<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
bot dialogflow