如何通过Python SDK或JavaScript将我的聊天机器人用户界面连接到APIAI Serverhost

如何将我在html和css中制作的聊天机器人UI精确连接到API。使用 API 提供的令牌的 AI 服务器。AI 和 Python sdk api.ai enter code here下面是 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？

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

因此，使用下面的代码，在您的情况下，您只需要将 send(( 函数与 ng-click 链接并绑定您的输入字段，然后单击发送到 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...");
}

相关内容

最新更新

热门标签：