一种实现智能语音外呼系统内可视化话术配置的方法与流程

本发明涉及一种系统话术配置方法，具体涉及一种实现智能语音外呼系统内可视化话术配置的方法。

背景技术：

当今，智能ai技术已经风靡全球，但每个智能设备的背后往往容纳了多方面的技术，例如智能ai机器人则包含了语音合成，语音解析，自然语言处理，针对不同行业服务还需要做不同类型的话术模板等等，每项技术的发展都代表的智能设备的升级，现如今智能设备的飞速发展，针对每个行业所需的话术模板则成了当下最紧迫的繁琐工作。目前市场的智能ai机器人引用话术模板大部分都是嵌入机器人内部，也就是常说的硬编码，当业务需求来了之后需要开发人员手动的把话术模板通过硬编码方式写入对应的机器人下。但目前还没有一种可视化的工具来实现话术模板配置，这样客户便不能自己手动操控自己的话术模板，不能满足各行各业的多样化模板的需求。

技术实现要素：

本发明的目的在于提供一种实现智能语音外呼系统内可视化话术配置的方法，解决目前均是采用硬编码的方式进行话术配置，没有可视化话术配置模板，使客户不能自行直接操控话术模板，从而无法使外呼系统同时满足各行各业多样化模板需求的问题。

为解决上述的技术问题，本发明采用以下技术方案：

一种实现智能语音外呼系统内可视化话术配置的方法，包括如下步骤：

s1、使用angular框架构建前端的基础部分形成web可视化工具系统，所述基础部分包括网页的创建、js和css的导入以及项目目录结构的划分；

s2、将jqueryui的js库导入使用angular开发的web可视化工具系统，采用jsplumb的连线库将客户设计话术的各个节点进行连线；

s3、编写话术模板配置工具，完成源代码；

s4、执行angular的cli将完成源代码后的web可视化工具系统进行打包，打包成包含index、html、css和jss的文件，将打包的文件发布到服务器上，通过浏览器进行访问指定地址。

进一步的技术方案是，所述编写话术模板配置工具包括对话术模板配置工具进行布局，布局方式为：顶部是工具栏、右边是属性面板、左边是源节点栏、中部区域是控制台。

更进一步的技术方案是，所述工具栏、属性面板、源节点栏和控制台均为angular单独的组件，且工具栏、属性面板、源节点栏和控制台均设置有相匹配的html、css和javascript代码，用一个根组件分别将工具栏、属性面板、源节点栏和控制台导入根组件下。

更进一步的技术方案是，有两个变量来保存ui和话术模板本身的数据，两个变量传递给工具栏、属性面板、源节点栏和控制台中进行修改和添加。

更进一步的技术方案是，所述源节点栏在鼠标点击源节点进行拖动到控制台时，使用jquery的drop和droppable方法；

当鼠标把节点拖到控制台释放鼠标时，调用clone方法进行对源节点的深度拷贝，将拷贝的节点对象append到控制台，同时将节点对象添加到两个变量的数组下。

更进一步的技术方案是，所述工具栏作为控制台操作节点和连线的工具，在工具栏中设有若干图标，在选中工具栏的某一个图标后，将调用控制台内部的回调方法。

更进一步的技术方案是，所述属性面板用于对节点的属性进行相应的增删改，控制台内的节点与属性面板采用了angular的数据双向绑定。

更进一步的技术方案是，所述控制台中的节点采用直接调用本地的方法，在控制台内修改完成所有节点和连线后，会自动将数据通过http保存到后台服务器。

更进一步的技术方案是，所述根组件在初次渲染话术模板时需要http请求后端获取ui和话术模板的数据，在请求拿到数据后，将数据赋值给ui和话术模板的两个变量值，同时渲染可视化界面。

与现有技术相比，本发明至少具有以下的有益效果之一：

1、可以兼容以前硬编码方式的话术模板，可以将以前的硬编码的话术流程过渡为可视化的话术流程，并且可以针对硬编码的话术进行属性的增删改查等操作。

2、可以对节点的大小、类型及其他扩展附属属性做增删改查；

3、由于话术的流程不是一次性的设计，需要时常的修改配置，本方案还可以对连线的类型及其他附属属性做增删改查；

4、可以实现话术模板结构图的放大缩小，方便话术流程全局预览；

5、将代码方式的话术流程模版转化成可视化的话术流程模版，可以实现智能语音外呼系统的可视化话术配置；

6、实现话术模板结构图的整体拖拽，进而使用户可以快速的定位某个节点或者连线；

7、不需要客户下载应用，只需要一个浏览器即可，全部操作都在云端完成。

附图说明

图1为本发明中的可视化话术配置的界面效果展示图。

图2位本发明中的可视化话术配置应用时的界面效果展示图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

实施例：

图1示出了本发明实现智能语音外呼系统内可视化话术配置的方法的一个较佳实施例，本实现智能语音外呼系统内可视化话术配置的方法包括如下步骤：

s1、使用angular框架构建前端的基础部分形成web可视化工具系统，所述基础部分包括网页的创建、js和css的导入以及项目目录结构的划分；

s2、将jqueryui的js库导入使用angular开发的web可视化工具系统，采用jsplumb的连线库将客户设计话术的各个节点进行连线；

s3、编写话术模板配置工具，完成源代码；

s4、执行angular的cli将完成源代码后的web可视化工具系统进行打包，打包成包含index、html、css和jss的文件，将打包的文件发布到服务器上，通过浏览器进行访问指定地址。

使用市场上流行的angular框架构建前端的基础部分，当编写完源代码后，将用angular打包一个可以部署到任何服务器上web网页包，为了满足节点可以拖拽功能需要将jqueryui的js库导入系统，为了实现连线功能采用了jsplumb的连线库，做完以上步骤之后就可以编写自己的话术模板配置工具了。

首先先从可视化话术模板配置工具的布局开始，可视化话术模板配置布局包括四部分，顶部是工具栏、右边是属性面板、左边是源节点栏、中部区域是控制台。

工具栏、属性面板、源节点栏和控制台这四个部分可分别作为angular单独的组件，这样有利于后期迭代些新的功能，工具栏、属性面板、源节点栏和控制台均设置有相匹配的html、css和javascript代码，用一个根组件分别将工具栏、属性面板、源节点栏和控制台导入根组件下。在此为了保存ui和话术模板本身的数据，需要声明两个变量来存储数据。由于工具栏、属性面板、源节点栏和控制台这四个模块都需要与ui和话术模板进行交互，所以需要把两个变量传递给工具栏、属性面板、源节点栏和控制台中进行修改和添加。

源节点栏：左侧源节点作为节点的源，当鼠标点击源节点进行拖动到控制台时，需要使用jquery的drop和droppable方法；当鼠标把节点拖到控制台释放鼠标的时候调用clone方法进行对源节点的深度拷贝，将拷贝的节点对象append到控制台，同时将节点对象添加到两个变量的数组下。节点代表了话术流程里的每句话，每句话的多少决定了节点的大小，节点放大是为了好操作，缩小是为了方便预览话术流程的整体。

工具栏：顶部的工具栏作为控制台操作节点和连线所需的工具选项栏。在工具栏内设计有若干图标，当选中工具栏的某一个图标，将要调用控制台内部的回调方法。例如点击工具栏的放大图标进行放大控制台的节点结构树的方法，该方法采用了css3里的scale方法进行对整个节点的放大缩小功能；当节点放大和缩小，是依据鼠标当前位置作为源点进行缩放；当点击清空按钮，则清空根组件下的两个变量，删除则是对两个ui和话术模板变量进行了修改同时依赖了angular的双向绑定实现界面的事实变化。节点的放大缩小方便话术流程全局预览。

属性面板：右侧的属性面板是对节点的属性进行对应的增删改，当选中控制台中的某个节点，树形面板会显示该节点的所有属性，这里也采用angular的数据双向绑定，当选中控制台中的节点，会修改变量里的数据同时会选中当前的节点，而属性面板的属性表单面板只是对变量里选中的节点做对应的数据绑定以及界面渲染，可以进行对连线或者节点的属性做增删改的操作。

控制台：控制台中的节点也可以直接调用本地的方法。比如对节点的放大或缩小，当鼠标放到节点的右下角光标图标变为可拖拽状态，如果进行对节点拖拽大小，则调用jquery的size方法实现图形的大小，同时修改变量里该节点的样式以保证下次渲染是同样的大小；当鼠标对节点双击会调用jsplumb的delete方法对所有节点的连线进行删除同时修改两个变量下节点对象的相关属性，进而保证下次渲染的同步性；当修改完成所有节点和连线会自动将数据通过http保存到后台服务器。

根组件：当页面初次渲染话术模板需要http请求后端获取ui和模板的数据，当请求拿到数据将数据赋值给ui和话术模板数据两个变量，同时调用工具栏、属性面板、源节点栏和控制台渲染可视化界面。

当以上源代码完成之后可以执行angular的cli进行对完成源代码后的web可视化工具系统进行打包，从而将打包的文件发布到服务器上，通过浏览器进行访问指定地址，打开该可视化工具进行话术模板的流程配置。打包的目的是压缩并混淆源码，减少网络传输资源。

在引用以前的话术模板，则需要在属性面板选择“模板属性”选择之前的话术模板属性，该选则是唯一性的，也就是说每个属性只能选择一次绑定指定的节点，不能同一个属性同时绑定好几个节点。

连线属性会有两种类型一种是本地连线，就是纯粹的建立关系的连线不涉及话术业务；第二种是涉及话术流程业务的，这个根据客户需要自己进行选择连线类型。

本实现智能语音外呼系统内可视化话术配置的方法涉及到的技术包括web前端的开发、http请求与后台交互，以及后端java和数据库的使用。有web前端实现ui的展示操作，而后台则对话术模板数据及连线和节点的界面数据进行增删改查的业务操作及持久化，http则是连接后台与前台的传输工具。

s1中的angular框架可以有国产的vue以及react来进行替代，但与国产的vue和react相比，采用angular框架来构建前端基础部分可以使该框架的数据和ui的双向绑定机制，同时语法结构采用了typescript，语法上写起来相对于vue和react来说更加规范。

s2中的各个节点也可以手动编写节点拖拽及放大缩小，但是这样的方式耗时较长，出于时间原因，不需要重复造轮子的因素将jqueryui的js库导入了本项目中。阿里巴巴g6也可以实现节点之间的连线功能，但是出于g6的编程方式和说明文档不及jsplumb，所以采用了jsplumb易于快速构建话术模版配置系统。

由于本系统采用的是b/s架构，对于网络传输方面要减少资源的访问并同时打消别人侵权自己的代码，所以需要对源码进行压缩打包。

同时，为了实现兼容之前硬编码的话术，属性面板中单独扩展了一项模版属性选项，该选项里的数据都是通过http查询之前硬编码到机器人的话术节点及关系信息，当选中其中的某一项，赋值给ui节点图形。这样通过ui就可以很直观的的表现出机器人之前话术的流程。

其中前述的节点的大小控制是通过jqueryui下的resize方法，节点的大小控制有助与保证节点里的内容可以完整展示，类型及其他的扩展附属属性的增删改查依赖了http的数据请求，当对某个属性做增删改的时候，会同步调用http请求处理响应的数据，这样一方面保证中途退出之后下次登录可以继续修改，而不需要重新开始。

话术模版结构图的放到缩小采用了市场上最流行的css3的transform对象scale属性来控制的，之所以采用css3是因为浏览器自带的渲染引擎要比通过js计算来渲染速度上要快的多。

用于智能语音外呼系统的可视化话术配置方法的基本功能包括以下几方面：

1、可以兼容以前硬编码方式的话术模板，可以将以前的硬编码的话术流程过渡为可视化的话术流程，并且可以针对硬编码的话术进行属性的增删改查等操作。

2、可以对节点的大小、类型及其他扩展附属属性做增删改查；

3、由于话术的流程不是一次性的设计，需要时常的修改配置，本方案还可以对连线的类型及其他附属属性做增删改查；

4、可以实现话术模板结构图的放大缩小，方便话术流程全局预览；

5、将代码方式的话术流程模版转化成可视化的话术流程模版，可以实现智能语音外呼系统的可视化话术配置；

6、实现话术模板结构图的整体拖拽，该方法是通过js手动计算容器相对于浏览器的定位来实现的，实现这个功能目的是为了让用户可以快速的定位某个节点或者连线；

7、由于本系统采用的b/s架构所以不需要客户下载应用，只需要一个浏览器即可，全部操作都是在云端完成。

本发明提出的可视化的工具来实现话术模板配置，这样客户自己就可操控自己的话术模板，满足了各行各业的多样化模板，同时针对公司内部也可以减少成本的支出。

尽管这里参照本发明的多个解释性实施例对本发明进行了描述，但是，应该理解，本领域技术人员可以设计出很多其他的修改和实施方式，这些修改和实施方式将落在本申请公开的原则范围和精神之内。更具体地说，在本申请公开、附图和权利要求的范围内，可以对主题组合布局的组成部件和/或布局进行多种变型和改进。除了对组成部件和/或布局进行的变形和改进外，对于本领域技术人员来说，其他的用途也将是明显的。