聊天机器人无疑是一个热门话题。 我仍然记得几个月前我与微软在香港组织的黑客马拉松EC Jamming的12个团队中有4个团队正在从事聊天机器人项目。
但是我是一个真正的网络爱好者和传播者。
诸如Google API.ai ， Microsoft Bot Framework和Microsoft LUIS （语言理解情报服务）之类的出色框架使开发人员可以毫不费力地在多个渠道中构建和启动聊天机器人 。
换句话说，为增强聊天机器人开发人员的能力，技术巨头已经投入了大量资源来构建组件和微服务/网络服务，这些组件和微服务/网络服务可以高效，准确地在聊天机器人的管道中执行单个特定任务。 例如，LUIS可帮助您了解由机器学习支持的带有单个API端点的培训模型的用户。
现在，我们为什么不利用这些服务来建立一个像聊天机器人一样了解用户意图和兴趣的网站，同时，由于网络必须提供丰富的元素，我们能够提供比传统的聊天机器人。
就我而言，我现在正在为美国的毕业课程申请建立一个个人作品集页面。
在静态，类似于标准简历的HTML内容之上，我实现了一个标题，该标题可与用户互动，并在用户提出有关我的体验的特定问题时重新排列页面上呈现的样式和组件-就像我在那儿一样，1 1，与该用户回答诸如“您在Microsoft从事什么工作？”之类的问题。
更好的是本教程，所谓的ChatWeb是使用无服务器的体系结构构建的（这要归功于Azure Functions ），这意味着您完全不必担心构建和维护服务器。 只是前端。 只是ReactJS 。
以下所有内容均假设一个有效的Azure帐户。 Azure提供了一个月的免费试用版供您试用。 即使免费试用期结束后，此体系结构中的所有产品仍具有每月免费配额，这些配额不容易超过。
内容
- 培训和发布Microsoft LUIS端点
- 建立Azure功能
- 反应并提取
微软LUIS
再说一遍。 LUIS通过使机器人能够理解用户的文字来在聊天机器人的生态系统中发挥重要作用。 LUIS端点的最终目标是使用查询，它返回JSON数据以及诸如“用户想要什么？”之类的问题的答案。 和“是否涉及任何具体实体？”
Example:
query = "What have you done at Microsoft?
-----
LUIS API returns
{
"query": "what have you done at microsoft",
"topScoringIntent": {
"intent": "WhatDidYouDo",
"score": 0.729854763
}, "entities": [ {
"entity": "microsoft",
"type": "Company",
"startIndex": 22,
"endIndex": 30,
"score": 0.9897579
} ]
}有了这些信息，以及React JS中的功能组件呈现机制，您已经准备好构建LUIS Web应用程序。
但是在深入探讨这一点以及如何使用Azure Functions保护订阅**之前，让我还向您展示如何在LUIS.ai上训练我的语言理解模型。
建立LUIS应用程式的逐步指南
在LUIS上创建帐户后，应转到此页面。
点击新应用按钮。 它应该询问您应用程序的名称及其文化（例如，zh-cn。我没有尝试过其他文化。）。
在边栏上，单击“意图”，您将在其中开始定义用户可能拥有的可能的意图。 例如，如果您正在创建一个电子商务网站，则该网站应遵循的意图可能是“购买”，“浏览”，“客户支持”等。基本上，请尝试列出用户的所有可能原因。来使用您的应用程序。
在构建投资组合页面的情况下，我希望我的LUIS应用能够帮助我从句子中检测出用户是否对我学到的东西（技术堆栈）或我做了什么（项目详细信息）更感兴趣，以及在哪家公司，我可以提供合适的个性化布局。
创建意图后，您可以为LUIS提供一些示例，这些示例应可以预期该特定意图。 对于此示例，我告诉LUIS，一个用户问“您为Microsoft做过什么”，“您在Microsoft中做了什么”等问题的用户很可能会问“您做了什么”（意图），并且将“ Microsoft”映射到公司实体。
在为每个定义的意图输入可靠的10个示例后，转到侧栏上的“ 培训 和测试 ”，然后单击“ 培训应用程序 ”。 LUIS将为您处理机器学习部分。
魔法。
我喜欢在21世纪初成为应用程序开发人员。 清新，但尚未完全被AI接管。
完成后，转到“ 发布应用程序 ”页面，您可以一键向上整理应用程序到生产环境，并获得如下所示的端点：
https://westus.api.cognitive.microsoft.com/luis/v2.0/apps/{app id}?subscription-key={app key}&timezoneOffset=0&verbose=true&q={user query}和爆炸。
现在，您有了一个端点，该端点将用户的文字输入转换为JSON格式的结构化和自定义意图和实体。
Azure功能
现在，此步骤不是强制性的，但强烈建议执行此步骤，因为将您的秘密和**公开给客户端浏览器通常是一种不好的做法。
特别是，一旦您的每月请求量超过1万，LUIS便开始向您收费-这并不像您想的那样雄心勃勃。 请求是指交易。 一个太高兴而不能停止以娱乐为题的快乐用户可能是一个沉重的负担。
您真的不想冒风险，让其他人在他们的LUIS应用程序上使用您的订阅**-您可能不知道其他站点上的使用情况，但是他们的账单仍在您身上。
我们可以通过实现代理服务器（也许使用Node和Express）并在后端完成HTTP请求来解决此问题。
但是， Azure Function是另一个更好的解决方案，即使不是最好的解决方案。
这很简单。
让我们看看如何在5分钟内使用Azure Functions构建代理终结点。
只需在Azure仪表板上搜索“功能应用程序”，然后创建一个具有应用程序名称（我将其命名为“ LUIS-proxy”），订阅计划（是的……我在Microsoft的实习期结束。免费试用时间。）以及所有其他简单预期的输入。 在这里没有什么让您感到惊讶的。
因此，此功能应用程序将要执行的操作就像我们从前面的步骤中获得的LUIS端点一样，但是没有向用户提供您的API ID和订阅**的访问权限。
让我仅引用Azure Functions的官方网站上的内容-除了团队本身以外，谁还能解释Azure Functions。
“功能提供了具有高度可靠性和安全性的完全托管的计算平台。 通过按需扩展，您可以在需要时获得所需的资源。”
使用Azure Functions，客户端代码将调用此Azure终结点，然后它将在Azure的计算平台上使用LUIS的API**完成HTTP请求，并将LUIS结果简单地返回给客户端。 如果您熟悉Functional Programming ，可以将其视为Azure云上的lambda函数。
同样，如果您不熟悉此步骤，则无需执行此步骤即可建立一个了解用户的网站。 这是出于安全原因。 此外，也欢迎您使用Node和Express堆栈构建此代理，并使用Digital Ocean ， Linode或Heroku设置API端点。 在这种情况下，它们都很好。
但是，如果您决定在这方面关注我，
这是您将在Function App上执行的操作：
该函数用C＃编写，主要是因为我觉得C＃可以使用WebClient以更有效的方式完成任务（只需从LUIS下载响应资源）。 Azure Functions确实支持JavaScript ，您可以按照自己喜欢的方式随意执行此部分。
但是您确实可以使用我编写的这段代码来屏蔽任何Web服务提供商提供的任何API**。 只需将您将在AJAX中使用的Url链接粘贴到此屏幕快照中的占位符上，然后单击右上角的</> Get function url以获取LUIS的代理端点。
最后，请记住在{您的应用}> CORS下，定义并管理白名单来源列表以调用此端点。 我真的很喜欢这个功能。 这样可以确保只有您的网站才有权使用此API端点 。
反应并提取
最后，对于客户端代码，我再次选择React。
但是这次，除了“反应既干净又干净”之外，还有其他原因。 我承诺。
React能够控制使用this.state渲染的组件，因此我们不必如此频繁地向回调地狱发送AJAX请求。 返回ES6 Promise的polyfill Fetch库可与React无缝配合使用。 最后，我也希望以后可以将其模块化为带有npm和yarn的LUIS Wrapper React组件。
在我开始显示一些代码之前。 记住要运行create-react-app。
# in your terminal
create-react-app <project name>
cd <project name>
npm install --save whatwg-fetch
npm start
这将为您设置所需的一切，并在localhost：3000处打开该应用程序。
有了fetch和React的state现在可用，我们将能够让该应用程序根据从LUIS返回的用户意图来呈现组件。 我的高级体系结构将是这样的（一个构造函数，一个处理LUIS查询的函数以及一个render函数）
... standard React import statements
import 'whatwg-fetch';
class ChatWeb extends Component {
constructor(props) {
super(props);
this.state = {
query: "",
intent: "",
company: ""
}
} submitLUISQuery(e) {
e.preventDefault(); fetch (`{Azure Functions Endpoint}&query=${this.state.query}`)
.then(res => JSON.parse(res.json()))
.then(json => {
this.setState({
intent: json.topScoringIntent.intent,
company: json.entities[0].entity
});
});
} render() {
const { intent, company } = this.state;return (
{ intent === "WhatDidYouDo"
&& ... // component to render in this case
}
{ intent === "WhatDidYouLearn"
&& ... // component to render in this case
}
);
}
}
现在，我认为使用react-router-dom可以更好地控制渲染。 从现在开始，我在这个项目组合项目上的工作将完全按照此目的进行-寻找一种更有效和模块化的方法来正确地流水化技术堆栈和数据。
同样，这是一个概念和高级原型，我迫不及待要与社区分享。 特别是新学期（也是最后一个学期）本周开始，我将继续申请研究生课程，GRE和可能的工作寻找（是的。我仍然希望有雇主赞助我的签证，所以我不需要OPT拼命地。）
最后…
我只想说，当然，目前还不是最佳的用户体验。 人们不希望与您的网站进行对话，这也是这些技术主要在Chatbot上使用的原因。 但是，我认为这绝对是一个有趣而有趣的实验，我将进一步深入研究— 我们绝对可以使网站像聊天机器人一样了解用户 。
这真让我兴奋！
这为Web UX开辟了许多新的可能性。
如果您有任何更好的UX设计可以与ChatWeb概念协同工作，请通过[email protected]与我联系 ，在Linkedin上与我联系，或在下面留下评论。 我的私人Gitlab中已经有样板了，我们有工作要做！