手把手教你做自然语言理解智能对话的微信小程序「完整源码分享」

那年夏天 2018-08-11

重要更新！！！！

现在“智能聊”小程序支持语音输入了！！！！！

完整代码请参考下面这篇文章！！

微信小程序语音聊天智能对话（源码分享）

======================

本文原地址：http://blog.csdn.net/u011211290/article/details/77247674

源代码地址：https://pan.baidu.com/s/1miT2SXU

这段时间开发了一个智能对话的微信小程序，下面就把这个介绍一下。

0.介绍

界面：

手把手教你做自然语言理解智能对话的微信小程序「完整源码分享」

对话：

手把手教你做自然语言理解智能对话的微信小程序「完整源码分享」

功能：目前支持闲聊，问时间，问天气，算24点，单位换算，汇率查询，邮政编码，笑话，故事，算数功能。

说明：这些功能可以在语义后台单独添加，不需要更新微信小程序。

1.智能对话接口

首先是对话的接口，用的是OLAMI的接口，可以自己定义需要的对话，也有系统提供的对话模块。

对话模块定义好之后，查看API文档，将对话通过API发送之后就可以得到回答。

API调用代码：用来发送语义的API请求。

NLIRequest:function(corpus,arg) { // corpus是要发送的对话；arg是回调方法

var that = this;

// appkey

var appkey = that.globalData.NLPAppkey;

// appsecret

var appSecret = that.globalData.NLPAppSecret;

var api = "nli";

var timestamp = new Date().getTime();

// MD5签名

var sign = MD5.md5(appSecret + "api=" + api + "appkey=" + appkey + "timestamp=" + timestamp + appSecret);

var rqJson = { "data": { "input_type": 1, "text": corpus }, "data_type": "stt" };

var rq = JSON.stringify(rqJson);

var nliUrl = that.globalData.NLPUrl;

// cusid是用来实现上下文的，可以自己随意定义内容，要够长够随机

var cusid = that.globalData.NLPCusid;

console.log("[Console log]:NLIRequest(),URL:" + nliUrl);

wx.request({

url: nliUrl,

data: {

appkey: appkey,

api: api,

timestamp: timestamp,

sign: sign,

rq: rq,

cusid: cusid,

},

header: { 'content-type': 'application/x-www-form-urlencoded' },

method: 'POST',

success: function (res) {

var resData = res.data;

console.log("[Console log]:NLIRequest() success...");

console.log("[Console log]:Result:");

console.log(resData);

var nli = JSON.stringify(resData);

// 回调函数，解析数据

typeof arg.success == "function" && arg.success(nli);

},

fail: function (res) {

console.log("[Console log]:NLIRequest() failed...");

console.error("[Console log]:Error Message:" + res.errMsg);

typeof arg.fail == "function" && arg.fail();

},

complete: function () {

console.log("[Console log]:NLIRequest() complete...");

typeof arg.complete == "function" && arg.complete();

}

})

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48

随机生成设备识别码（识别码用来支持语义中的上下文，每个客户端需要不同的识别码用来识别设备，准确的说是区分客户端）

// onLaunch()函数，小程序生存周期内只调用一次。

onLaunch: function () {

//调用API从本地缓存中获取数据

var logs = wx.getStorageSync('logs') || []

logs.unshift(Date.now())

wx.setStorageSync('logs', logs)

// 如果cusid(设备识别码)不存在或者长度小于20,，则重新生成。

var cusid = this.globalData.NLPCusid;

if (cusid == null || cusid.length < 20){

this.setCusid();

}

},

// cusid生成函数

setCusid:function(){

// 大小写字母和数字

var str = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"

// 生成30位随机字符串

var cusidLength = 30,cusid = '';

for(var i = 0; i < cusidLength; i++){

var oneStr = str.charAt(Math.floor(Math.random() * str.length));

cusid += oneStr;

}

this.globalData.NLPCusid = cusid;

console.log("[Console log]:New cusid:" + cusid);

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

2.对话内容显示

前端显示代码：用的是scroll-view的标签，里面循环输出对话列表，用位置信息标记是用户输入还是系统对话，使用scroll-into-view来滚动到最新的位置。

<view class="container">

<scroll-view class="scrool-view" scroll-y="true" scroll-with-animation="true" scroll-into-view="{{scrolltop}}" enable-back-to-top="true">

<view class="chat-list">

<block wx:for="{{chatList}}" wx:key="time">

<view id="roll{{index + 1}}" class="chat-left" wx:if="{{item.orientation == 'l'}}">

<image class="avatar-img" src="/res/image/chat_logo.png"></image>

<text>{{item.text}}</text>

<image class="avatar-img"></image>

</view>

<view id="roll{{index + 1}}" class="chat-right" wx:if="{{item.orientation == 'r'}}">

<image class="avatar-img"></image>

<text>{{item.text}}{{item.url}}</text>

<image class="avatar-img" src="{{userLogoUrl}}"></image>

</view>

</block>

</view>

</scroll-view>

<view id="rollend" class="weui-footer weui-footer__text">语义解析技术由OLAMI提供</view>

<form bindsubmit="sendChat">

<view class="ask-input-word">

<input class="input-big" placeholder="" name="ask_word" type="text" bindconfirm="sendChat" bindinput="Typing" value="{{askWord}}" />

<button formType="submit" size="mini" disabled="{{sendButtDisable}}">发送</button>

</view>

</form>

</view>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

【1】scroll-into-view=”{{scrolltop}}”是将对话滚动到最新位置，在js中把最新的id赋给scrolltop，页面会自动滚动到指定位置。

【2】chatList存储对话内容，循环渲染对话框。orientation是左右位置，左边是答案，右边是用户输入。

【3】userLogoUrl是用户头像的url，如果用户不授权使用用户公开信息，则使用默认的用户头像。

其他控制代码

index.js：主要用来控制页面的动态显示和需要的网络请求发送。

var app = getApp();

var that;

var chatListData = [];

Page({

data: {

// 自定义欢迎语的语料(界面加载时调用API，通过语义后台定义的回答，返回内容，后面会有语义平台的配置。)

defaultCorpus:'你都会什么',

// 用户输入

askWord: '',

// 发送按钮disable

sendButtDisable:true,

// 用户信息

userInfo: {},

// 对话信息

chatList: [],

// 对话滚动标志

scrolltop:'',

// 用户Logo，如果用户不授权，则使用默认图像

userLogoUrl:'/res/image/user_default.png',

},

onLoad: function () {

that = this;

// 取得用户信息，把用户头像放入用户Logo中

app.getUserInfo(function (userInfo) {

var aUrl = userInfo.avatarUrl;

if(aUrl != null){

that.setData({

userLogoUrl: aUrl

});

}

});

// 自定义欢迎语

this.sendRequest(this.data.defaultCorpus);

},

onReady: function () {

},

// 监听用户输入

Typing:function(e){

var inputVal = e.detail.value;

var buttDis = true;

if(inputVal.length != 0){

var buttDis = false;

}

that.setData({

sendButtDisable: buttDis,

})

},

// 调用语义接口

sendChat: function (e) {

let word = e.detail.value.ask_word ? e.detail.value.ask_word : e.detail.value;

that.addChat(word, 'r');

that.setData({

askWord: '',

sendButtDisable: true,

});

// 请求函数

that.sendRequest(word);

},

// 发送网络请求

sendRequest(corpus){

app.NLIRequest(corpus, {

'success': function (res) {

if (res.status == "error") {

wx.showToast({

title: '返回数据有误！',

})

return;

}

that.NLIProcess(res);

},

'fail': function (res) {

wx.showToast({

title: '请求失败！',

})

return;

}

});

},

// 处理语义（拿到回答）

NLIProcess: function(res){

var nlires = JSON.parse(res);

var nliArray = nlires.data.nli;

if(nliArray.length == 0){

wx.showToast({

title: '返回数据有误！',

})

return;

}

var answer = nliArray[0].desc_obj.result;

if(answer == null){

wx.showToast({

title: '返回数据有误！',

})

return;

}

// 增加回答

that.addChat(answer, 'l');

var dataArray = nliArray[0].data_obj;

// 对特殊信息处理，比如新闻中除了回答还有返回的新闻信息

if(dataArray != null && dataArray.length > 0){

var objType = nliArray[0].type;

// 对选择数据进行显示

if(objType == 'selection' && dataArray.length > 1){

that.newsProcess(dataArray);

return;

}

// 对新闻单独处理

if (objType == 'news' && dataArray.length == 1) {

var title = dataArray[0].title;

var detail = dataArray[0].detail;

var news = title + "" + detail;

that.addChat(news, 'l');

return;

}

// 如果有其他回答，也进行输出

var content = dataArray[0].content;

if (content != null && content != answer){

that.addChat(content, 'l');

}

}

return;

},

// 新闻选择数据显示

newsProcess(selectionArray){

for(var i = 0; i < selectionArray.length; i++){

var title = selectionArray[i].title;

var detail = selectionArray[i].detail;

var selectiondetail = "[第" + (i+1) + "条]:" + title + "" + detail;

that.addChatWithFlag(selectiondetail, 'l',false);

}

},

// 显示回答，并滚动到最新位置

addChat: function (word, orientation) {

that.addChatWithFlag(word, orientation,true);

},

// 显示回答并选择是否滚动到最新位置(true为是，false为否)

addChatWithFlag: function (word, orientation, scrolltopFlag){

let ch = { 'text': word, 'time': new Date().getTime(), 'orientation': orientation };

chatListData.push(ch);

var charlenght = chatListData.length;

if (scrolltopFlag){

that.setData({

chatList: chatListData,

scrolltop: "roll" + charlenght,

});

}else{

that.setData({

chatList: chatListData,

});

}

}

})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154

index.js中的代码是前端的显示逻辑，关于语义处理的部分，因为不同的类型可能返回的数据是不一致的，所以需要针对内容进行特殊处理，就比如“新闻”，因为新闻数据是一个数组，所以需要对其进行循环处理显示。

语义平台配置(index.js中自定义欢迎语)

a.注册并登陆首页，点击账号并进入 应用管理 。

手把手教你做自然语言理解智能对话的微信小程序「完整源码分享」

b.新建模块并进入模块

手把手教你做自然语言理解智能对话的微信小程序「完整源码分享」

c.新建grammar和定义回答

手把手教你做自然语言理解智能对话的微信小程序「完整源码分享」

d.发布

在发布标签页中点击“发布”，使得编写的语法生效

e.配置

在应用管理中把新建的模块勾选，即可生效。（NLI模块为自定义，对话系统模块为系统提供）

手把手教你做自然语言理解智能对话的微信小程序「完整源码分享」

完成配置之后，就可以更新语法配置来更新欢迎语，不需要更新代码。

最后

总体来说，页面比较简单，但是调整一些内容会比较繁琐。发送按钮的文字目前在开发工具中没有问题，但是在手机上显示会不居中。

源代码地址：https://pan.baidu.com/s/1miT2SXU

那年夏天

那年夏天

相关推荐

中国发布信息技术十大前沿热点问题，自动驾驶等入选

　在哈尔滨继续举行的 2019 年中国科协年会上，中国科协信息科技学会联合体作为信息科技领域的高端智库，承办以“人工智能”为主题的信息科技论坛，并发布信息技术领域十大前沿热点问题，自动驾驶、人工生物智能等入选。自然语言理解是计算机迈进智能的必经之路，作为新

syumilai / 0评论 2019-07-01

揭秘任务型对话机器人（上篇）

欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~通常情况下是为了满足带有明确目的的用户，例如查流量，查话费，订餐，订票，咨询等任务型场景。由于用户的需求较为复杂，通常情况下需分多轮互动，用户也可能在对话过程中不断修改与完善自己的需求，任务型机器人

quyunfei / 0评论 2019-06-27

只知道CS224N？斯坦福最新推出NLU公开课CS224U

NLP 标准公开课 CS224N 已经开放一段时间了，相信很多读者已经学了一遍了。最近，斯坦福自然语言理解公开课 CS224u 也开放了，所有课件、代码和视频都已经开放。嗯，是时候该学一波 CS224u 了。这门面向项目的课程侧重于开发系统和算法，以实现对

AbnerZ / 0评论 2019-06-20

在阿里AI实验室做NLP高级算法工程师是一种什么样的体验？

最近应届生的拼抢大战的号角已经吹响。正如昨天那篇雄文，年薪25万也只是个白菜价......这让营长真心羞愧啊.....同样敲键盘的...不说也罢。绝不将小小的忧桑带入工作。在人工智能实验室一直从事自然语言理解领域的工作，在解决实际问题的时候，可以分享下最大

GavinChen / 0评论 2017-10-24

微软收购伯克利公司Semantic Machines：探索语音交互技术新前沿

今日，微软宣布收购由 UC Berkeley 教授 Dan Klein 与斯坦福大学教授 Percy Liang 等人共同创立的对话系统创业公司 Semantic Machines。这家公司的技术或许将在语音合成、深度学习和自然语言处理等方面帮助微软与亚马

yangz / 0评论 2018-05-21

NLP这么火，可这4个问题一直没解决

本文基于专家调查和学术会议讨论，总结了NLP中的4个主要开放问题，分别涉及自然语言理解、数据可用性、多文档推理以及模型评估问题。本文作者Sebastian Ruder 是一名很活跃的自然语言处理 研究员。Sebastian 是 AYLIEN的一名研究科学

Kaiyuansjtu / 0评论 2019-01-17

小i机器人交互系统发力自然语言理解，CEO朱频频称今年收入5亿

今天，小i机器人在上海发布了智能客服、智慧金融等“AI+”8大领域解决方案，首次展示了小i机器人的技术、产品、解决方案、服务体系、生态体系五个方面。公司CEO朱频频在接受采访时透露，小i机器人去年营收2亿多，今年预计能达到5亿，“明年继续double”。一

我和我追逐的梦 / 0评论 2018-07-05

词嵌入所不能解决的自然语言理解：会话人工智能的方向在哪？

近年来，我们看到在各种设备上都开始加载一种「智能」数字助理。在最近的消费电子展，现代和丰田都发布了新型车载助理。不过虽然这些应用背后的技术越来越好，但是还是存在着用户对其失望的情绪：他们对「智能」的期望并没有得到满足。尽管数据驱动的方式在自然语言处理中取得

tft0 / 0评论 2017-02-26

基于机器学习完成自然语言理解中经典的文本情感分类的任务

人工智能和自然语言理解近年来，人工智能算法被应用到了自然语言处理领域，获得了比传统模型更优秀的成果。如Bengio等学者基于深度学习的思想构建了神经概率语言模型，并进一步利用各种深层神经网络在大规模英文语料上进行语言模型的训练，完成了句法分析和情感分类等常

NeverStop / 0评论 2018-11-07

机器不学习：NLP系列3 自然语言理解-意图分类

机器不学习 www.jqbxx.com : 深度聚合机器学习、深度学习算法及技术实战自然语言理解。Natural language understanding is a subtopic of natural language processing in

caokaifa / 0评论 2018-08-20

售前导购机器人的未来：推荐与交互系统融合+应用场景深化

随着人工智能浪潮的再次兴起，对话机器人有了突飞猛进的发展，无论是互联网巨头，还是高校、研究院都取得了可观的成绩，大致可分为检索式、生成式和知识图谱式三种。其中，知识图谱式的对话机器人实现比较难，但相对更有前景。莫瑜认为，机器或机器人，从开始自身就具备一套语

Wearabledevice / 0评论 2018-05-20

AI时代，为什么懂语音者得天下

语言是人类重要的交际工具，是人与人之间进行沟通交流的基础表达符号。无论时代如何进步，世界如何改变，这种人们之间最基础的表达符号是不会改变的。尽管被一些所谓未来学家预言谈论“超级智能”、“奇点”、“人类危机论”的人工智能时代正全面袭来，但语言就像那戈壁滩上的

心理学哲学批判性思维 / 0评论 2017-11-29

出门问问李志飞：自然语言理解是巨大蓝海

“如果你有10亿美元，应该投入到自然语言理解的研究中。”这是机器学习领域学术界的大神Michael Jordan说的，中国人工智能领域的先锋创业者、出门问问创始人李志飞对此深以为然。从邀请函来看，这项合作是关于人工智能与汽车的。不过针对出门问问获得大型车企

互联网小兵 / 0评论 2017-04-03

李彦宏：川普当选之后 全球创新可能会向中国转移

安科科技讯 11月18日上午消息，第三届世界互联网大会16日在乌镇开幕。今日上午的“互联网企业家”论坛，百度董事长兼CEO李彦宏发表了演讲。据李彦宏介绍，中国六十多万亿的GDP中有十万亿和汽车有关，无人车是人工智能在汽车领域影响力较大的应用方向。在昨天李彦

互联网那些事 / 0评论 2016-11-18