图灵客服机器人集成

一、网址

图灵网址：http://www.tuling123.com/

二、进入后注册，购买套餐，获取秘钥

三、代码

css代码【tuling.css】

* {
     padding: 0;
     margin: 0;
 }

 ::-webkit-scrollbar {
     display: none;
 }

 html,
 body {
     height: 100%;
 }

 .wrapper {
      600px;
     height: 600PX;
     margin: 0 auto;
     background-color: rgba(100, 112, 154, 0.2);
     border-radius: 10px;
 }

 p {
     text-align: center;
     background-color: rgba(226, 190, 170, 0.8);
     height: 40px;
     line-height: 40px;
     font-size: 20px;
     color: #fff;
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;



 }

 .content-box {
     overflow-y: auto;
      100%;
     height: calc(100% - 90px)
 }

 .avitor {
     /*float:left;*/

      30px;
     height: 30px;
     border-radius: 50%;
     /*border: 1px solid black;*/
     display: inline-block;


 }

 .mine {
     float: right;
     margin: 10px;
      calc(100% - 10px);

 }

 .robot {
     float: left;
     margin: 10px;
      calc(100% - 10px);




 }

 .mine .avitor {
     float: right;

     background-image: url("./4.png");
 }

 .mine .text {
     float: right;
     background-color: rgba(112, 182, 163, 0.5);
     margin-right: 15px;
     position: relative;

 }

 .mine .text::after {
     content: "";
      0px;
     height: 0px;
     display: inline-block;
     position: absolute;
     right: -20px;
     top: 9px;
     border- 20px;
     border: 10px solid transparent;
     border-left-color: rgba(112, 182, 163, 0.5);

 }

 .robot .text {
     background-color: rgba(81, 173, 93, 0.5);
     margin-left: 15px;
     position: relative;


 }

 .robot .text::after {
     content: "";
      0px;
     height: 0px;
     display: inline-block;
     border: 10px solid transparent;
     border-right-color: rgba(81, 173, 93, 0.5);
     position: absolute;
     left: -20px;
     top: 9px;
 }

 .robot .avitor {
     background-image: url("./2.png");
 }

 .mine .avitor,
 .robot .avitor {
     background-size: 100% 100%;
     vertical-align: top;
 }


 .text {
     max- 250px;
     border: 1px solid #ddd;
     display: inline-block;
     padding: 10px;
     border-radius: 10px;


 }

 .input-box {
     height: 50px;
      100%;
     background-color: rgba(191, 155, 255, 0.5);
     line-height: 50px;
     text-align: center;

 }

 #inp {
     padding-left: 4px;
     font-size: 16px;
      60%;
     height: 60%;
     border: 1px solid #ccc;
     border-radius: 6px;
     /*margin:10px auto;*/

 }

 #submit {
     border-radius: 5px;
     font-size: 16px;
     padding: 3px 12px;
     margin: 0 5px;
     background-color: #FFFFFFFF;
     outline: none;
     border: none;
     font-weight: bolder;
     color: ##404040FF;
     box-shadow: 0px 1px 3px 1px #404040FF;
     transition: all 0.5 linear;
 }

 input::placeholder {
     color: #A0A0A0FF;
     font-size: 13px;

 }

 #submit:hover {
     transform: scale(1.1);
     box-shadow: 0px 3px 5px 1px #404040FF;


 }

css code

js代码【ajax.js】

 1 function ajax(method, url, callback, data, flag) {
 2      var xhr = null;
 3      if (window.XMLHttpRequest) {
 4          xhr = new XMLHttpRequest();
 5      } else {
 6          xhr = new ActiveXObject('Microsoft.XMLHttp')
 7      }
 8      xhr.onreadystatechange = function() {
 9          if (xhr.readyState == 4) {
10              if (xhr.status == 200) {
11                  callback(xhr.responseText);
12              } else {
13                  console.log('error');
14              }
15          }
16      }
17      method = method.toUpperCase();
18      if (method == 'GET') {
19          var date = new Date(),
20              timer = date.getTime();
21          xhr.open(method, url + '?' + data + '&timer=' + timer, flag);
22          xhr.send();
23      } else if (method == 'POST') {
24          xhr.open(method, url, flag);
25          xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
26          xhr.send(data);
27      }
28  }

js Code

html代码

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>智能机器人</title>
 6         <link rel="stylesheet" href="css/tuling.css">
 7     </head>
 8     <body>
 9         <div class="wrapper">
10             <p class="name">机器人客服</p>
11             <div class="content-box">
12                 <div class="robot">
13                     <div class="avitor"></div>
14                     <div class="text">您好！请问有什么需要帮助？</div>
15                 </div>
16             </div>
17             <div class="input-box">
18                 <input type="text" name="" id="inp" placeholder="你想说点啥~">
19                 <button type="" id="submit">发送</button>
20             </div>
21         </div>
22         <script src="./js/ajax.js"></script>
23         <script src="./js/jquery-3.6.0.min.js"></script>
24         <script>
25             //初始化方法
26             function init() {
27                 bindEvent();
28             }
29             
30             //绑定事件
31             function bindEvent() {
32                 
33                 $('#inp').keyup(function(e) {
34                     if (e.keyCode == 13) {
35                         $('#submit').trigger('click');
36                     }
37                 });
38                 
39                 $('#submit').click(function(e) {
40                     var val = $('#inp').val();
41                     if (val) {
42                         addDom('mine', val);
43                         getData(val);
44                         $('#inp').val('');
45                     }
46                 })
47             }
48 
49             // 文字添加到页面中去
50             function addDom(who, val) {
51                 $(' <div class="' + who + '">
52                 <div class="avitor"></div>
53                 <div class="text">' + val + '</div>
54             </div>').appendTo($('.content-box'));
55                 var scrollHeight = $('.content-box')[0].scrollHeight;
56                 var innerHeight = $('.content-box').innerHeight();
57                 $('.content-box').scrollTop(scrollHeight - innerHeight);
58             }
59             
60             //获取数据
61             function getData(val) {
62                 //key值为你购买的秘钥
63                 var paras = "key=6a99ba9e46c94adaafe8c8dbd06f91b2&info=" + val;
64                 ajax('POST', "http://www.tuling123.com/openapi/api", success, paras, true)
65 
66                 function success(data) {
67                     // console.log(data)
68                     da = eval("(" + data + ")")
69                     addDom('robot', da.text);
70                 }
71 
72             }
73             init()
74         </script>
75     </body>
76 </html>

html Code

注意：一定要引用jq

四、项目截图

五、运行截图

六、总结

不推荐使用，不能发送语音，图片等信息，收费太贵，每月19.9，而且还要自己写皮肤，不值得，不推荐。

七、Demo链接

链接: https://pan.baidu.com/s/1pLNrP-7mcwrxQK4r1lLwHw 提取码: tqhn