基于seq2seq的中文聊天机器人（三）

最新推荐文章于 2024-06-01 19:06:25 发布

AI驿站

最新推荐文章于 2024-06-01 19:06:25 发布

阅读量7.3k

点赞数 8

分类专栏： nlp 文章标签：聊天机器人 seq2seq 自然语言处理

本文链接：https://blog.csdn.net/daniellibin/article/details/103290756

版权

nlp 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

系列文章

1.基于seq2seq的中文聊天机器人（一）
2.基于seq2seq的中文聊天机器人（二）
3.基于seq2seq的中文聊天机器人（三）

5 可视化前端

5.1聊天机器人结构

设计一个聊天机器人需要：

浏览器前端：为用户提供友好的机器聊天页面；
机器聊天API服务：前后端通过异步的HTTP调用实现通讯，前端将对话请求提交给机器对话Web服务，完成后将结果返回前端进行展示；
机器聊天后端：使用tf-seq2seq进行机器聊天模型训练，得到对应语言的模型文件。然后通过Python命令可以进行句级的聊天，机器聊天API服务调用该命令。

逻辑功能架构如图：
在这里插入图片描述

5.2 web分析与设计

想要用户体验良好，我们就需要一个好用的web界面给用户使用，屏蔽掉底层，这样用户才能简单的使用我们的产品。
（1）主要组成部分简介
Web界面的设计主要由HTML，CSS，JS文件构成，他们的主要功能如下。

HTML（HyperText Markup
Language）超文本标记语言，决定网页的结构及内容，即“显示哪些内容”。可以把HTML说成是静态代码。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
CSS（Cascading Style
Sheet）层叠样式表单，设计网页的表现样式，即“如何显示有关内容”，CSS是将样式信息与网页内容分离的一种标记语言，我们使用css为每个元素定义样式；它主要用于美化HTML页面。
JS（JavaScript）一种动态脚本语言，控制网页的行为（效果），即“内容应该如何对事件做出反应”，使用JavaScript代码可以让前台变的有交互(点击事件)，常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

JS的常用功能： ·嵌入动态文本于HTML页面 ·对浏览器事件作出响应 ·读写HTML元素 ·在数据被提交到服务器之前验证数据；检测访客的浏览器信息 ·控制cookies，包括创建和修改等

对于一个网页来说，HTML定义网页的结构，CSS描述网页的样子，而JavaScript控制网页行为，设置一个很经典的例子是说HTML就像一个人的身体，而CSS就是人的衣服，Javascript就像人的思想和行为。

（2）分析与设计

这是一个会话界面，输入一句话，输出一句应答的话。需要设计提供对外调用的API，该API接受到用户输入的问答信息，根据接受到的信息调用模型预测应答会话并返回给服务器。

API的调用需要通过web服务器提供。Tornado是使用Python编写的一个强大的、可扩展的Web服务器。它在处理严峻的网络流量时表现得足够强健，在创建和编写时有着足够的轻量级，并能够被用在大量的应用和工具中。所以这里使用tornado绑定API对象，设置监听端口，循环监听用户的服务请求。

设计HTML的结构与内容，设置文章标题，对话框，文本输入框，发送信息，显示信息，还有背景以及头像的加载，引用js文件用于响应浏览器事件，读取数据和页面更新。

设计CSS用于美化HTML页面，选择器选择元素对其长宽高位置等进行布局设计。

编写js脚本用于页面事件的响应，页面动态更新，使用ajax实现异步通信效果，ajax可以实现动态不刷新（局部刷新）就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。

最后得到的文件目录和逻辑结构如下图
在这里插入图片描述

5.3工作流程

RestfulAPI.py开启web容器，监听8000端口，聊天机器人前端网页通过ajax请求后端接口，返回机器人应答数据。具体流程如下

打开接口访问地址，本地服务器默认http://127.0.0.1:8000/api/chatbot
浏览器加载index.html，引用css文件进行渲染，在有引用js的地方执行js
在这里插入图片描述
页面加载好了之后如上图，页面加载完成之后，chat.js就开始执行了，这时可以进行会话，输入问答信息，点击发送，启动一个事件

chat.js响应事件，将输入信息作为参数，通过ajax向服务器发送信息
服务器调用绑定的API，API通过传递的参数调用模型，生成预测会话，将会话返回给服务器服务器返回给ajax引擎json格式文件
chat.js通过ajax的函数将接收到的数据插入DOM树，再调用show函数更新网页，一轮对话完成可以继续输入信息进行对话，步骤如上

5.4.技术实现

（1） api文件
提供对外调用的接口，根据接收到的信息调用seq2seq模型返回预测结果，如果输入为空格，返回请输入聊天信息。

def chatbot_api(infos):
    du = DataProcessing.DataUnit(**data_config)
    save_path = os.path.join(BASE_MODEL_DIR, MODEL_NAME)
    batch_size = 1
    tf.reset_default_graph()
    model = Seq2Seq(batch_size=batch_size,
                    encoder_vocab_size=du.vocab_size,
                    decoder_vocab_size=du.vocab_size,
                    mode='decode',
                    **model_config)
    # 创建session的时候允许显存增长
    config = tf.ConfigProto()
    config.gpu_options.allow_growth = True

    with tf.Session(config=config) as sess:
        init = tf.global_variables_initializer()
        sess.run(init)
        model.load(sess, save_path)

        while True:
            q = infos
            #判断接受到的参数是否为空格字符串
            if q is None or q.strip() == '':
                return "请输入聊天信息"
                continue
            q = q.strip()

            indexs = du.transform_sentence(q)
            x = np.asarray(indexs).reshape((1, -1))
            xl = np.asarray(len(indexs)).reshape((1,))
            pred = model.predict(
                sess, np.array(x),
                np.array(xl)
            )
            result = du.transform_indexs(pred[0])
            return result

在resultful.py中创建应用对象，使用tornado服务器，绑定监听端口8000，监听端口的连接。

f __name__ == '__main__':
    # 创建一个应用对象
    app = tornado.web.Application([(r'/api/chatbot', IndexHandler)])
    # 绑定一个监听端口
    app.listen(8000)
    # 启动web程序，开始监听端口的连接
    tornado.ioloop.IOLoop.current().start()

服务器增加解决跨域名请求访问和异常处理的功能，若调用api过程中出现了异常，则向用户返回服务器内部错误。

class BaseHandler(RequestHandler):
    """解决JS跨域请求问题"""
    def set_default_headers(self):
        self.set_header('Access-Control-Allow-Origin', '*')
        self.set_header('Access-Control-Allow-Methods', 'POST, GET')
        self.set_header('Access-Control-Max-Age', 1000)
        self.set_header('Access-Control-Allow-Headers', '*')
        # self.set_header('Content-type', 'application/json')
class IndexHandler(BaseHandler):
    # 添加一个处理get请求方式的方法
    def get(self):
        # 向响应中，添加数据
        infos = self.get_query_argument("infos")
        print("Q:", infos)
        # 捕捉服务器异常信息
        try:
            result = chatbot_api(infos=infos)
        except:
            result = "服务器内部错误"
        print("A:", "".join(result))
        self.write("".join(result))

（2） HTML文件

<html lang="en">

   <head>
      <meta charset="UTF-8" />
       <link rel="shortcut icon" href="chatImages/favicon.ico" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
      <title>聊天界面</title>
      <link rel="stylesheet" type="text/css" href="chatCss/chat.css" />

      <script src="chatJs/jquery.min.js"></script>
      <script src="chatJs/flexible.js"></script>
   </head>

   <body>
      <header class="header" align="center">
         <span style="font-size:18px">聊天机器人</span>
         <input type="hidden" style="font-size:15px;text-align: center;" type="text" id="picker" placeholder="参数选择"  readonly="readonly"
         value='LSTM 2层 25轮'>
      </header>
      <div class="message">

          <div class="send">
            <div class="msg">
               <img src="chatImages/man.png" alt="" />
               <p><i class="msg_input"></i>请输入内容开始对话</p>
            </div>
         </div>
         <div class="send">      
         </div>
      </div>
      <div class="footer">
         <input type="text" id='inputVal' placeholder='请输入对话内容'/>
         <p>发送</p>
      </div>
   <script src="chatJs/chat.js" type="text/javascript" charset="utf-8"></script>
   
   <script src="chatJs/picker.min.js"></script>
   <script type="text/javascript" src="chatJs/city.js"></script>
   <script type="text/javascript" src="chatJs/index.js"></script>
   
   </body>
</html>

分析：

IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame. html文档开头加载了chatJs/jquery.min.js这个文件, 可以使用丰富的jQuery函数来做开发，做更多的事情（Write less, Do more），主要是方便 DOM操作，当然它的功能挺多的。

<input type="hidden" style="font-size:15px;text-align: center;" type="text" id="picker" placeholder="参数选择"  readonly="readonly"
value='LSTM 2层 25轮'>

上面一段隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。用来对参数进行选择，这里想要通过picker实现网络属性的三级联动选择，选择编码器和解码器的神经元是LSTM还是GRU，网络层数，以及训练的轮数，这里默认参数是LSTM 2层 25轮。
加载移动端适配js  chatJs/flexible.js  在移动设备上使用时自适应屏幕。
中间为显示对话内容，显示发送的信息和接受到的服务器返回的信息。
下部为输入文本框和发送框，发送框绑定一个事件，引入了chat.js响应发送事件。
Picker.min.js 以及index.js实现模型属性的联动选择，为筛选器组件，这里没有使用到。
city.js为模型属性的三级联动库，用于模型的属性选择。
（3）js文件
js文件主要功能是通过ajax实现DOM树的更新。
Upview函数的功能是选择message插入html内容，并且实现页面的对话自动滚动到底部。
Show函数定义了发送和接受信息的html变量，并且调用了upview函数更新视图

*聊天信息，发送和接受的信息*/
function show(headSrc, str, className) {
   var html = "<div class=" + className + "><div class='msg'><img src=" + headSrc + " />" +
      "<p><i class='msg_input'></i>" + str + "</p></div></div>";
   upView(html);
}
/*更新视图*/
function upView(html) {
   $('.message').append(html);  //选择message插入html内容
   $('body,html').animate({
      scrollTop: $('.message').outerHeight() - window.innerHeight
   }, 200); // 自动将页面移动到最底部
   }

jQuery主要函数，DOM加载完成之后，jQuery获取输入框焦点为inputval赋值，并且需要绑定键盘的up状态进行信息输入，输入框的p标签（发送）绑定信息获取事件，调用getMessage函数与服务器的数据交换和页面更新。

getMessage函数执行数据交换和网页更新，首先判断输入是否为空，为空则返回，什么也不做，不空则为发送框上锁，防止连续提交，将输入信息显示到对话框，清空输入框。通过ajax异步执行请求，与服务器交换数据，先向服务器发送数据，服务器调用绑定的API返回数据。请求服务成功之后，再调用show函数将接收到的数据用于更新DOM ，再显示到对话框中。

//页面DOM文档加载完成后加载执行
$(function () {
   $('#inputVal').focus();//点击获得输入框焦点
   $('.footer').on('keyup', 'input', function () {//绑定输入框键盘up
      if ($(this).val().length > 0) {               //状态
         $(this).next().css('background', '#114F8E');

      } else {
         $(this).next().css('background', '#ddd');
      }
   });

   $('.footer p').click(getMessage);//绑定信息获取事件
   $(document).keyup(function (ev) {  //文本框按下回车键执行事件
      if (ev.keyCode == 13) {
         getMessage();
      }
   })
      //获取输入的文本信息
   function getMessage() {
      var val = $('#inputVal').val();  //返回inputVal的值给val
      if (val == '')
         return;    //若为空，则直接返回
      if (flag) {
         flag = false;   //上锁，防止连续提交
            //输入信息显示到对话框
         show("./chatImages/woman.png", $(".footer input").val(), "show");
         // 替换为各自的接口地址
         var url = "http://127.0.0.1:8000/api/chatbot";
         //清空input
         $(".footer input").val("").next().css('background', '#ddd');
         $.ajax({   //异步执行请求，与服务器交换数据
            type: "get",       //请求的方式，有POST和GET两种，默认是GET，数据类型是String
            dataType: "json",  //预期服务器返回的数据类型json
            async: true,       //异步请求
            url: url,          //请求的服务器地址，默认是当前页面，数据类型是String
            data: {
               infos: val,    //发送到服务器的数据，必须为key/value格式
            },
            complete: function (data) {  //请求成功之后前端处理的代码
               flag = true;
               message = data.responseText
                  setTimeout(function () {   //浏览器会在合适的时间，将代码插入任务队列
                     show("chatImages/man.png", message, "send");  //显示接受到的信息
                  }, 500);   //500毫秒后调用function函数
            }
         });
      }
   }
});

5.5部署测试

我们已将项目部署到阿里云服务器上，地址http://47.100.77.54:8088/（如果不回复就是我把服务关掉了）
输入空格则会提示返回请输入聊天信息，输入简单直接的问题基本上可以得到预期的效果。
在这里插入图片描述

在这里插入图片描述

最后附上github地址，欢迎star~
https://github.com/daniellibin/seq2seq-chatbot

AI驿站

关注

8
点赞
踩
44

收藏

觉得还不错? 一键收藏
25
评论
基于seq2seq的中文聊天机器人（三）

5 可视化前端5.1聊天机器人结构设计一个聊天机器人需要：浏览器前端：为用户提供友好的机器聊天页面；机器聊天API服务：前后端通过异步的HTTP调用实现通讯，前端将对话请求提交给机器对话Web服务，完成后将结果返回前端进行展示；机器聊天后端：使用tf-seq2seq进行机器聊天模型训练，得到对应语言的模型文件。然后通过Python命令可以进行句级的聊天，机器聊天API服务调用该命令。逻...
复制链接

扫一扫