迷你聊天客服架构的流程及前端实践

暑假在深圳中国移动国际实习，公司里正在研发优化“无忧行”境外流量app，也是中国移动为出境游用户推出的出境游通讯服务门户APP，满足用户境外上网通讯，吃喝行玩购需求。大家有兴趣可以使用一下看看。如下图：

关于聊天客服

目前在做这款产品语音及聊天客服这方面的工作，其中涉及到人工智能，NLP和前端方面等知识。公司前两周开会时集中讨论了客服Q&A对的数据设计，其中有约60%-70%的智能客服是纯使用excel标注的标准回答，剩下的一部分问答对则会以更加人性化的方式灵活安排，这将会使用深度学习和数据训练等知识。
通过用户的每一句发问，聊天客服机器人需要判断这句话涉及了哪个（哪些）服务业务（有标注）因此技术人员开始获取已经在app上收集到的真实的客服聊天对话并交给我们先进行人工标注。标注语料和标注方式如下：

标注语料：

标注方式：

这里用户咨询到关于门票的问题，我们就给他打上“门票：00090600 ”的标签（红圈）。最后海量的数据标注再经过我们用一些python脚本删减处理后就送到我们mentor的模型里做训练了。

聊天小界面

mentor那边的服务器现在可以通过post一个json格式的数据过去，这个数据便可以携带我们用户说的每一句话，然后服务器会立即处理并返回一个有着json格式的字符串数据。通过postman这款软件我先模拟post了一下服务器，返回ok。

用户输入数据封装格式：

返回数据：pred_label 是识别后的语句类型数字，最后需要通过一个txt文件映射过去（例如变成00090600），score是用户输入和输出的意图匹配概率，后面训练的越大越好，status 200 就是请求成功

然后上一些代码，这里把html，css和javascript分开：

静态页面：html

页面样式：css

.talk_con{                      /*一些简单背景界面*/
      width:1000px;           
      height:500px;         
      border:2px solid #666;            
      margin:50px auto 0;            
      background:#f9f9f9;       
      }        
.talk_show{            /*对话框显示部分，注意overflow设置成auto，不然聊着聊着语句就跑出对话框了*/
      width:580px;           
      height:420px;           
      border:1px solid #666;          
      background:#fff;            
      margin:10px auto 0;            
      overflow:auto;       
      }     
.talk_input{            
      width:580px;            
      margin:10px auto 0;        
      }     
.whotalk{           
      width:80px;           
      height:30px;           
      float:left;           
      outline:none;        
      }       
.talk_word{           /*用户说的话*/
      width:420px;           
      height:26px;         
      padding:0px;           
      float:left;           
      margin-left:10px;           
      outline:none;           
      text-indent:10px;       
       }               
.talk_sub{            
          width:56px;          
          height:30px;           
          float:left;            
          margin-left:10px;        
           }       
.atalk{           
          margin:10px;        
           }    
.atalk span{                                     /*这里把客服和用户做a,b区分，对话分别左对齐和右对齐*/
          display:inline-block;         
          background:#0181cc;        
          border-radius:10px;       
          color:#fff;          
          padding:5px 10px;       
           }     
.btalk{            
          margin:10px;         
          text-align:right;      
          }     
.btalk span{       
          display:inline-block;         
          background:#ef8201;       
          border-radius:10px;         
          color:rgba(255, 255, 255, 0.979);         
          padding:5px 10px;       
           }

点击发送按钮后：javascript

这里打码的地方就是你请求的服务器url了，32行比较长没有截全，客服可以被控制说出多少信息。

小展示和结尾

最后就是基础逻辑的效果图，在apache24的环境下调用localhost访问网页即可：

后面后续的完整对话慢慢补充，还有美化。。这个就看公司给啥模板了，前几个训练效果还可以，score在70多以上，最后一个“再见”应该是归类到闲聊00110000比较合适，闲聊数据我们在打标签时基本没发现多少个，所以训练效果比较差，容易误判。后面要开始在这个基础上提升并开始向移动端迁移了。如果里面有什么疑问和建议欢迎来打扰，感觉数据就是人工智能的基础啊。