使用 NativeScript 和 Azure 认知服务进行语言检测

是否曾经需要在您的移动应用中确定文本输入的语言？虽然这可能看起来是一个利基功能，但如果您仔细想想，语言检测有很多用例。

根据语言而非位置提供自定义体验；
识别和翻译语言之间的文本；
将问题路由到具有适当语言知识的人员。

值得庆幸的是，我们可以求助于云来轻松解决此问题。具体来说，就是Microsoft Azure。

有兴趣在 NativeScript 中使用 Azure？观看我们网络研讨会的重播，“使用 Azure 和 NativeScript 构建可扩展的移动应用”。

Azure 提供各种“认知服务”，使您的应用能够与云中的 AI 驱动的算法进行交互。您可以通过查看、聆听、说话和解释通过传统通信方法输入的内容，使您的应用能够使用其某些“人类”感官。

让我们看看今天如何利用其中一个 Azure 认知服务 API：文本分析。

注意：在继续之前，如果您还没有免费的 Azure 帐户，请立即创建一个。您需要您的订阅密钥和远程终结点地址才能真正执行任何操作！

创建 Azure 认知服务资源

我们需要非常重要的订阅密钥和远程终结点来对我们的 NativeScript 应用进行 Azure 身份验证。因此，首先，您需要使用 Azure 门户或 Azure CLI 创建一个新的Azure 认知服务资源。此资源将启用对文本分析 API 的访问。

提示：无需复制文档！Microsoft 提供了一些关于如何通过Azure 门户或Azure CLI执行此操作的简单说明。

完成此步骤后，您应该拥有一个类似于以下内容的远程终结点

https://myservicename.cognitiveservices.azure.com

...以及一个类似于以下内容的用于 Azure 身份验证的订阅密钥

8hj3jks686l98098jhkhhu678686adfe

不要尝试使用以上任何一个，它们将无法工作😉。

英语、保加利亚语或……世界语？

有了密钥和终结点，我们就可以开始编写代码了。我今天创建的示例应用将非常简单。它将包括

一个TextField UI 组件，用于文本输入；
一个Button 组件，供用户点击（如果变得太复杂，请阻止我）；
一个Label 组件，用于显示 Azure 对输入文本语言的最佳猜测。

这是我的基本 UI 层

<Page 
    xmlns="http://schemas.nativescript.org/tns.xsd" 
    navigatingTo="navigatingTo"
    class="page">

    <Page.actionBar>
        <ActionBar title="Azure Text Analytics" class="action-bar"></ActionBar>
    </Page.actionBar>

    <StackLayout class="p-20">
        <TextField hint="Hey! Enter some text here." text="{{ theText }}" returnKeyType="done" />
        <Button text="Submit" tap="{{ onTap }}" class="-primary -rounded-sm" />
        <Label id="lblLanguage" class="h2 text-center" textWrap="true"/>
    </StackLayout>

</Page>

在 app.scss 文件中添加一些时髦的 SASS，使我的应用具有“Bootstrap”的外观和感觉

$base-theme: Bootstrap;
$skin-name: Bootstrap;
$swatch-name: Bootstrap;
$border-radius: 0.25rem;
$accent: #007bff;
$secondary: #e4e7eb;
$info: #17a2b8;
$success: #28a745;
$warning: #ffc107;
$error: #dc3545;
$body-bg: #ffffff;
$body-color: #292b2c;
$component-bg: #ffffff;
$component-color: #292b2c;
$card-cap-bg: #f7f7f9;
$card-cap-color: #292b2c;
$series-a: #0275d8;
$series-b: #5bc0de;
$series-c: #5cb85c;
$series-d: #f0ad4e;
$series-e: #e67d4a;
$series-f: #d9534f;

@import '~nativescript-theme-core/index';

提示：如果您是 NativeScript 新手，我最喜欢的资源包括NativeScript Playground 教程和nslayouts.com，以了解本机用户界面布局。

接下来我想将我的 UI 层连接到 Azure。我特别不需要任何花哨的 Azure SDK——尽管如果您将来需要使用一个，则有一个JavaScript SDK。

import { Observable } from 'tns-core-modules/data/observable';
import { request } from 'tns-core-modules/http';
const topmost = require('tns-core-modules/ui/frame').topmost;

export class HelloWorldModel extends Observable {
    theText: string;

    onTap() {
        const page = topmost().currentPage;
        const key = '[insert your key]';
        const endpoint = '[insert your endpoint]';
        const path = '/text/analytics/v2.1/languages';

        let docs = { documents: [{ id: '1', text: this.theText }] };

        let getLanguage = function(d) {
            let body = JSON.stringify(d);

            request({
                url: endpoint + path,
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Ocp-Apim-Subscription-Key': key
                },
                content: body
            }).then(
                response => {
                    let res = response.content.toJSON();
                    let lblLanguage = page.getViewById('lblLanguage');
                    lblLanguage.text = '"' + d.documents[0].text + '" is probably ' + res.documents[0].detectedLanguages[0].name + '.';
                },
                e => {
                    console.log(e); // error
                }
            );
        };

        getLanguage(docs);
    }
}

注意：此示例使用“核心”NativeScript（纯香草 JavaScript/TypeScript 版本）。您当然也可以使用Angular或Vue.js。

让我们逐步了解这段代码

我的onTap 方法响应用户点击按钮。
getLanguage 方法将输入的文本插入到 Azure 预期的documents 数组中。
使用跨平台 HTTP request 模块，我们可以POST 我们的数据并接收来自 Azure 的响应！

轻而易举！

nativescript azure text analytics

上述请求生成的 JSON 响应将类似于以下内容

{
   "documents": [
      {
         "id": "1",
         "detectedLanguages": [
            {
               "name": "English",
               "iso6391Name": "en",
               "score": 1.0
            }
         ]
      }
   ]
}

您可以在detectedLanguages 节点中看到，我们已将“英语”识别为最可能的语言。尝试使用其他语言自己试试看

西班牙语：“Hola Mundo”
简体中文：“你好，世界”
保加利亚语：“Здравей свят”
世界语：“Saluton mondo”

此时，您的应用逻辑可以接管并根据检测到的语言引导用户的体验！

接下来是什么？

我们将在以后的文章中更详细地介绍 Microsoft Azure、Azure Functions 和其他认知服务。

使用 Azure 开心进行 NativeScript 开发！☁️