使用图灵机器人API简单搭建网页实现自动回复机器人虚拟女朋友

实用代码 无标签
0 214
admin
admin 自由达人 2022-02-10 18:17:40
用户等级:9级

本文使用图灵机器人API编写Html简单构建了一个网页,实现了聊天机器人。

原理:简单地向API地址发送请求,并获取回答信息,从而实现交互。

Image


 页面使用Vue框架构建而成,注意其中的API key需要替换成自己的哦,在图灵机器人官网可以免费注册获得的!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
  </head>
  <body>
    <div id="app" class="flex">
    <br />
    <br />
    <h1 style="color: burlywood;">{{title}}</h1>
    <br />
    <br />
    <div id="app" class="box">
        <br />
        <br />
        <img :src="katouImage" style="width: 120px">
        <br />
        <br />
        <div class="answer">
            MM:
            {{answer}}
        </div>
        <br />
        <br />
      <div>
         You:
        <input type="text" v-model="question"/>
      </div>
    </div>
    </div>
    <script type="text/javascript">
      var app = new Vue({
        el:"#app",
        data:{
          katouImage:"katou.jpg",
          question:'',
          answer:'你刚刚,说了什么?',
          title:"虚拟好友"
        },
        watch:{
          question(newv)
          {
            var func = _.debounce(this.getResult, 1000);  
            func();
          }
        },
        methods:{        
          getResult()
          {
            console.log("getresult");
            if(this.question.indexOf('。')== -1)
            {
              this.answer = "请以中文的 '。'结尾,yo!"
              return
            }
            axios.get('http://www.tuling123.com/openapi/api?key=这里换成你自己的KEY哦&info=' + this.question)
                 .then(res=>{
                 console.log(res);
                 this.answer = res.data.text
               })
               .catch(function(err){
            }) 
          }
        }
      })
    </script>

<style>
    .flex {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      width: 35rem;
      height: 22rem;
      background: #ffffff;
      border-radius: 14px;
      box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
    }
    .answer{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      width: 400px;
      height: 25px;
      background:lightskyblue;
      border-radius: 20px;
      box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
    }
    </style>
  </body>
</html>


本文章最后由 admin2022-02-10 18:18 编辑
楼主签名:有些梦虽然遥不可及,但并不是不可能实现。
回帖
回复列表