文章/答案/技术大牛

发布

社区首页 >问答首页 >如何通过python sdk或javascript将我的聊天机器人用户界面连接到APIAI serverhost？

问如何通过python sdk或javascript将我的聊天机器人用户界面连接到APIAI serverhost？
EN

Stack Overflow用户

提问于 2017-04-06 19:03:43

回答 1查看 700关注 0票数 1

如何使用API.AI和python sdk api.aienter code here提供的令牌，将我用html和css制作的聊天机器人UI准确地连接到API.AI服务器，下面是html代码。

<!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, Your 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 ! What Would you like to know </p>
            </div>
             <div class="chat self">
                <div class="user-photo"></div>
                <p class="chat-message">Would like to know the 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)代码是

*{
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
}

apiai提供的访问令牌密钥是https://bot.api.ai/0a5185fc-2c39-4b22-bf1b-40a5eab7c8a2。

用户将以自然语言向APi.AI发送问题，问题将被转换为JSON，并根据响应再次转换为自然语言并在聊天中显示。

如何通过python sdk或javascript将此聊天机器人ui连接到apipi？

javascript

python

html

css

dialogflow-es

回答 1

Stack Overflow用户

发布于 2017-04-16 15:40:08

看一下这个工作案例的例子：https://gist.github.com/Dottenpixel/78d9a5487b4aeef32659a017058f75b9

因此，使用下面的代码，在您的示例中，您只需要将send()函数与ng-click链接起来，并绑定您的输入字段，然后在单击时将您的send发送到API.ai。

然后在API.ai中检查您设置的回调URL，并为处理来自API.ai的回复构建一个端点。如果你需要一个这样的例子，请告诉我

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...");
}

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43253299

复制

相似问题

问如何通过python sdk或javascript将我的聊天机器人用户界面连接到APIAI serverhost？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何通过python sdk或javascript将我的聊天机器人用户界面连接到APIAI serverhost？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何通过python sdk或javascript将我的聊天机器人用户界面连接到APIAI serverhost？
EN