如何通过python sdk或javascript将我的chatbot用户界面连接到APIAI serverhost？ [英] how to connect my chatbot user interface to APIAI serverhost via python sdk or javascript?

问题描述

如何使用API​​.AI和python sdk api.ai 提供的令牌将我在chat和html中创建的chatbot UI精确地连接到API.AI服务器在此输入代码下面是html代码..！

 <！DOCTYPE html> 
< html> 
< head> 
< title> GUIDEBOT< / title> 
< link rel =stylesheettype =text / csshref =style.css> 
< / head> 
< link href =http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css =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']）; 
函数CollapseDemoCtrl（$ scope）{
 $ scope.isCollapsed = false; 
} 
 
< / script> 
< body> 
< div class =demong-app =GUIDEBOT> 
< div class =chat-box> 
< div class =user-photo>< img src =filebot.png>< / div> 
< p class =bot-intro> SammY，您的个人指南！< / p> 
< div class =chat-logs> 
< div class =chat self> 
< div class =user-photo>< / div> 
< p class =chat-message>您好！< / p> 
< / div> 
< div class =聊天机器人> 
< div class =user-photo>< img src =filebot.png>< / div> 
< p class =chat-message>您好！您想知道什么< / p> 
< / div> 
< div class =chat self> 
< div class =user-photo>< / div> 
< p class =chat-message>想知道值得10学分的课程吗？< / p> 
< / div> 
 
< / div> 
< div class =chat-formng-controller =CollapseDemoCtrl> 
< textarea>< / textarea> 
< button class =buttonng-click =isCollapsed =！isCollapsed>发送< / 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 {
 
背景：＃1ddced; 
 
} 
 
 .demo {
 position：absolute; 
 bottom：0px; 
 right：3px; 
} 
 
 .chat-box {
 
 width：450px; 
职位：亲属; 
 min-width：390px; 
 height：600px; 
背景：＃e6ffff; 
 padding：25px; 
 margin：20px auto; 
 box-shadow：0 4px #ccc 
 
} 
 
 .chat-box .bot-intro {
 
 font-size： 18像素; 
} 
 
 
 .user-photo {
 width：45px; 
 height：45px; 
背景：#fff; 
 border-radius：50％; 
 overflow：hidden; 
} 
 
 .user-photo img {
 width：100％; 
} 
 
 .chat-logs {
 padding：10px; 
宽度：100％; 
 height：450px; 
背景：#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：换行; 
 align-items：flex-start; 
 margin-bottom：10px; 
} 
 
 .chat .user-photo {
 width：45px; 
 height：45px; 
背景：#fff; 
 border-radius：50％; 
 overflow：hidden; 
} 
 
 .chat .user-photo img {
 width：100％; 
} 
 
 .chat .chat-message {
 width：80％; 
 padding：10px; 
 margin：5px 10px 0; 
颜色：黑色; 
 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; 
宽度：75％; 
 height：50px; 
 border：2px solid #eee; 
 border-radius：3px; 
 resize：none; 
 padding：10px; 
 font-size：18px; 
颜色：＃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）; 
} 
 
 
。聊天表单按钮{
 background：1ddced; 
 padding：5px 15px; 
 font-size：30px; 
颜色：#fff; 
 border：none; 
 margin：0px 10px; 
 
 box-shadow：0 3px 0 #ccc; 
光标：指针; 
 -webkit-transition：background .2px ease; 
 -moz-transition：background .2px ease; 
 -o-transition：background .2px ease; 
} 
 
。聊天表单按钮：haver {
背景：＃13c8d9 
} 
  

apiai提供的Access tokes键是 https://bot.api.ai/0a5185fc-2c39-4b22-bf1b-40a5eab7c8a2

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

如何请通过python sdk或javascript连接这个chatbot ui到apipi？

解决方案

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

因此，使用下面的代码，在你的情况下，你只需要链接send（）函数使用ng-click并绑定你的输入字段，然后点击发送给API.ai。

然后在API.ai中检查你设置的回调URL为，并构建一个处理来自API.ai的回复的端点。让我知道你是否需要一个例子

var accessToken =< ;你的代理访问令牌>; 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，头文件：{Authorization： 承载+ accessToken}，数据：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 ...）;}

how to exactly connect my chatbot UI which i made it in html and css to API.AI server by using the token provided by API.AI and python sdk api.aienter code here below is the 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, 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) code is

*{
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 the Access tokes key provided by apiai is https://bot.api.ai/0a5185fc-2c39-4b22-bf1b-40a5eab7c8a2

The user will send a question to APi.AI in Natural language and it wil get converted into JSON , and depending on the response it will again get converted into natural language and show it on chat.!

How to connect this chatbot ui to apipi via python sdk or javascript?

解决方案

Take a look at this example for a working case: https://gist.github.com/Dottenpixel/78d9a5487b4aeef32659a017058f75b9

So, using the code below, in your case you'd just need to link the send() function with an ng-click and bind your input field and upon click your sending to API.ai.

Then in API.ai check what you've set your callback URL as, and build an endpoint for processing the replies from API.ai. Let me know if you need an example for 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...");
}

这篇关于如何通过python sdk或javascript将我的chatbot用户界面连接到APIAI serverhost？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！