[译]使用QnA Maker将常见问题页面变成有趣的聊天机器人
By robot-v1.0
本文链接 https://www.kyfws.com/ai/turn-your-faq-pages-into-an-interesting-chat-bot-u-zh/
版权声明 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
- 5 分钟阅读 - 2061 个词 阅读量 0使用QnA Maker将常见问题页面变成有趣的聊天机器人(译文)
原文地址:https://www.codeproject.com/Articles/1186327/Turn-your-FAQ-pages-into-an-interesting-Chat-Bot-u
原文作者:Antony Gino
译文由本站 robot-v1.0 翻译
前言
Microsoft QnA Maker helps turn your FAQ pages into interesting Chat Bot. It is very simple to configure and integrate with.
Microsoft QnA Maker帮助您将常见问题页面变成有趣的聊天机器人.配置和集成非常简单.
介绍(Introduction)
我们创建的每个网站,无论是外部营销网站还是内部后台应用程序,都将始终具有一个页面,其中包含常见问题解答(FAQ).这些常见问题解答通常在单个页面中设计,其中包含带有内部链接和搜索框的问题和答案列表.如何使这个有趣?(Every website that we create be it an external marketing website or an internal back office application always will have a page which will contain the Frequently Asked Questions(FAQ). These FAQs are usually designed in a single page with the list of questions and answers with internal links and a search box. How to make this interesting?)
让我们开始(Let us Begin)
微软提出了一款产品QnA Maker,该产品可以将任何常见问题解答变成聊天机器人.将常见问题转换为聊天机器人非常简单.只需按照这些简单的说明进行操作即可.(Microsoft came up with a product QnA Maker which can turn any FAQs into a chat bot. Converting FAQs into chat bot is very simple. Just follow these simple instructions.)
登录到(Login to) QnA制造商(QnA Maker)
如果您没有帐户,请创建一个帐户,然后按照通常的注册流程进行操作(Create an account, if you don’t have one and follow the usual registration process)
登录后,用户将被带到该页面(Once you log in, the user is taken to this page)
点击"创建新服务"按钮.提供服务的名称,如果您有基于Internet的网站,则可以提供FAQ页面的URL,QnAMaker将从其中提取问题和答案.(Click on the “Create New Service” button. Provide the name for the service, if you have an internet based website, you can provide the URL of the FAQ page, the QnAMaker will extract the Questions and Answers out of it.)
您还可以使用以下格式在Word文档中提供问题和答案(You can also provide the Questions and Answers in a word document, in the following format)
另外,您可以在下一步中手动提供问题和答案.(Else, you can provide the Questions and Answers manually in the next step.)
点击"创建服务"继续.服务已创建.知识库屏幕将列出从上一步中提取的所有问题和答案.如果尚未提取,则可以通过单击右上角的"添加新的QnA对"来手动添加.(Click “Create Service” to continue. The service is created. The Knowledge Base screen will list all the questions and answers extracted out of the previous step. If it hasn’t extracted some, you can manually add those by clicking on the “Add new QnA Pair” on the top right hand corner.)
完成所有问题和答案的添加后,您可以通过单击右侧的"测试"菜单来测试您的机器人(Once you are done adding all the Questions and Answers you can test your bot by clicking on the “Test” Menu on the right hand side)
在聊天文本框中输入文字,您将看到机器人如何回答您的问题.如果漫游器识别出该问题的多个备选方案.您可以从左侧选项中选择合适的选项.单击"保存并重新训练"以训练您的机器人.(Type in the chat text box and you could see how the bot answers to your questions. If the bot identifies more than one alternatives to the question. You can select the appropriate ones from the left hand side options. Click “Save and Retrain” to train you bot.)
培训完成后,单击"发布"以完成该过程.(Once the training is done, Click on Publish to complete the process.)
显示了示例HTTP请求,要发送的请求为JSON格式.(The sample HTTP request is shown, the request to be sent is in a JSON format.)
{“题”:""}({“question”:””})
我们可以通过创建ASP.NET MVC应用程序来创建使用者应用程序.在HomeController.cs文件中,创建一个"聊天"方法(We can create a consumer application by creating an ASP.NET MVC application. In the HomeController.cs file, Create a method “Chat”)
[ValidateInput(false)]
public string Chat(string query)
{
string responseString = string.Empty;
var knowledgebaseId = ""; // Use knowledge base id created.
var qnamakerSubscriptionKey = ""; //Use subscription key assigned to you.
//Build the URI
Uri qnamakerUriBase = new Uri("https://westus.api.cognitive.microsoft.com/qnamaker/v1.0");
var builder = new UriBuilder(@"https://westus.api.cognitive.microsoft.com/qnamaker/v1.0/knowledgebases/" + knowledgebaseId + "/generateAnswer");
//Add the question as part of the body
var postBody = "{\"question\": \"" + query + "\"}";
//Send the POST request
using (WebClient client = new WebClient())
{
//Set the encoding to UTF8
client.Encoding = System.Text.Encoding.UTF8;
//Add the subscription key header
client.Headers.Add("Ocp-Apim-Subscription-Key", qnamakerSubscriptionKey);
client.Headers.Add("Content-Type", "application/json");
responseString = client.UploadString(builder.Uri, postBody);
var response = JsonConvert.DeserializeObject<QnAMakerResult>(responseString);
if (response.Score > 10.0)
{
return response.Answer;
}
else
{
return "Sorry, I don't have an answer. Please mail admin@application.com";
}
}
}
在客户端,我们可以创建一个简单的基因敲除脚本,以调用控制器端点并将其绑定到html.(In the client side, we can create a simple knockoutjs script to invoke the controller endpoint and tie it to a html.)
function AppViewModel() {
var self = this;
self.people = ko.observableArray([]);
self.searchKeyUp = function (d, e) {
if (e.keyCode == 13) {
addPerson();
}
}
self.addPerson = function () {
addPerson();
};
function addPerson()
{
var q = $("#btn-input").val();
if (q != "")
{
$("#btn-input").val("");
self.people.push({ Name: "You - ", Query: q });
$.ajax({
type: "GET",
url: '@Url.Action("Chat", "Home")',
//contentType: "application/json; charset=utf-8",
data: { query: q },
// dataType: "json",
success: function (data) {
console.log(data.replace(/\ /g, ''));
data = data.replace(/\</g, '<').replace(/\>/g, '>');
self.people.push({ Name: "Smarty - ", Query: data });
},
error: function () { alert('Error'); }
});
}
}
}
ko.applyBindings(new AppViewModel());
HTML视图可以表示(the HTML view can be expressed)
<div class="row">
<div class="col-md-offset-7 col-md-5">
<div class="panel panel-default">
<div class="panel-heading" id="accordion">
<div class="input-group">
<input id="btn-input" type="text" data-bind="event: { keyup: searchKeyUp }"
class="form-control input-sm" placeholder="Type your message here..."
vk_18c1e="subscribed" style="direction: ltr;" />
<span class="input-group-btn">
<button class="btn btn-default btn-sm" id="btn-chat" data-bind="click: addPerson">
<i class="fa fa-paper-plane" aria-hidden="true"></i>
</button>
</span>
</div>
</div>
<div class="panel-collapse collapse in" id="collapseOne">
<div class="panel-body">
<ul class="chat" style="font-size:11px">
<li class="left clearfix" data-bind="foreach:people">
<div class="chat-body clearfix" style="padding:10px">
<div class="header">
<strong class="pull-left primary-font" style="margin-right:8px" data-bind="text:Name"></strong>
</div>
<div style="padding-left:2px" data-bind="bindHTML:Query">
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
如果知识中有一些标记和html文本,则创建一个自定义绑定(In case if the knowledge has some a tag and html text then create a custom binding)
ko.bindingHandlers.bindHTML = {
init: function () {
// Prevent binding on the dynamically-injected HTML (as developers are unlikely to expect that, and it has security implications)
return { 'controlsDescendantBindings': true };
},
update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
// setHtml will unwrap the value if needed
ko.utils.setHtml(element, valueAccessor());
var elementsToAdd = element.children;
for (var i = 0; i < elementsToAdd.length; i++) {
ko.cleanNode(elementsToAdd[i]); //Clean node from Knockout bindings
ko.applyBindings(bindingContext, elementsToAdd[i]);
}
}
};
许可
本文以及所有相关的源代码和文件均已获得The Code Project Open License (CPOL)的许可。
Javascript C# .NET Windows Knockout.js Azure Dev Architect 新闻 翻译