how to connect my chatbot user interface to APIAI serverhost via python sdk or javascript? -
how connect chatbot ui made in html , css api.ai server using token provided api.ai , python sdk api.aienter code here below html code ..!
<!doctype html> <html> <head> <title>guidebot</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"> <script src="http://code.angularjs.org/angular-1.0.1.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.4.0/ui-bootstrap-tpls.min.js"></script> <script> var guidebot = angular.module('guidebot', ['ui.bootstrap']); function collapsedemoctrl($scope) { $scope.iscollapsed = false; } </script> <body > <div class="demo" ng-app="guidebot"> <div class="chat-box" > <div class="user-photo"><img src="filebot.png"></div> <p class="bot-intro">sammy, personal guidebot!</p> <div class="chat-logs"> <div class="chat self"> <div class="user-photo"></div> <p class="chat-message">hello !</p> </div> <div class="chat bot"> <div class="user-photo"><img src="filebot.png"></div> <p class="chat-message">hello ! know </p> </div> <div class="chat self"> <div class="user-photo"></div> <p class="chat-message">would know courses worth 10 credits?</p> </div> </div> <div class="chat-form" ng-controller="collapsedemoctrl"> <textarea></textarea> <button class="button" ng-click="iscollapsed = !iscollapsed">send</button> <div collapse="iscollapsed"> </div> </div> </div> </div> </body> </html> css(style.css) code
*{ margin:0; padding-bottom: 0pz; font-family:tahoma, sans-serif; box-sizing: border-box; } body{ background: #1ddced; } .demo{ position: absolute; bottom: 0px; right: 3px; } .chat-box{ width: 450px; position: relative; min-width: 390px; height:600px; background: #e6ffff; padding: 25px; margin: 20px auto; box-shadow: 0 4px #ccc } .chat-box .bot-intro{ font-size:18px; } .user-photo { width:45px; height:45px; background : #fff; border-radius:50%; overflow:hidden; } .user-photo img{ width:100%; } .chat-logs{ padding: 10px; width: 100%; height: 450px; background: #eee; overflow-x: hidden; overflow-y: scroll; } .chat-logs:: -webkit-scrollbar{ width:10px; } .chat-logs:: -webkit-scrollbar-thumb{ border-rad: 5px; background: rgba(0,0,0,.1); } .chat{ display: flex; flex-flow: row wrap; align-items: flex-start; margin-bottom:10px; } .chat .user-photo{ width:45px; height:45px; background : #fff; border-radius:50%; overflow:hidden; } .chat .user-photo img{ width:100%; } .chat .chat-message { width: 80%; padding: 10px; margin: 5px 10px 0; color: black; border-radius: 10px; font-size:18px; } .self .chat-message{ background: #4dff88; } .bot .chat-message{ background: #1ddced; order: -1; } .chat-form{ margin-top:20px; display:flex; align-items: flex-start; } .chat-form textarea{ background: #fbfbfb; width:75%; height:50px; border: 2px solid #eee; border-radius:3px; resize:none; padding:10px; font-size: 18px; color: #333; } .chat-form textarea:focus { background: #fff; } .chat-form textarea:: -webkit-scrollbar{ width:10px; } .chat-form textarea:: -webkit-scrollbar-thumb{ border-rad: 5px; background: rgba(0,0,0,.1); } .chat-form button{ background:1ddced; padding: 5px 15px; font-size:30px; color:#fff; border: none; margin: 0px 10px; box-shadow: 0 3px 0 #ccc; cursor: pointer; -webkit-transition: background .2px ease; -moz-transition: background .2px ease; -o-transition: background .2px ease; } .chat-form button:haver{ background: #13c8d9 } and access tokes key provided apiai https://bot.api.ai/0a5185fc-2c39-4b22-bf1b-40a5eab7c8a2
the user send question api.ai in natural language , wil converted json , , depending on response again converted natural language , show on chat.!
how connect chatbot ui apipi via python sdk or javascript?
take @ example working case: https://gist.github.com/dottenpixel/78d9a5487b4aeef32659a017058f75b9
so, using code below, in case you'd need link send() function ng-click , bind input field , upon click sending api.ai.
then in api.ai check you've set callback url as, , build endpoint processing replies api.ai. let me know if need example that
var accesstoken = "<your agent access token>"; var baseurl = "https://api.api.ai/v1/"; 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: "<any random string>" }), success: function(data) { setresponse(json.stringify(data, undefined, 2)); }, error: function() { setresponse("internal server error"); } }); setresponse("loading..."); }
Comments
Post a Comment