搜索到
25
篇
库
相关的结果
-
-
您可能不知道的 Alan 当前有很多语音助手：iOS 有 Siri，Windows 有小娜，Android 有 Google Assistant，亚马逊的 Alexa，国内安卓有灵犀。各大厂还推出了小度、小雅、小爱、天猫精灵等智能音箱产品，深受大家喜爱。这些语音助手或语音 AI 产品有一个基本上都是基于移动设备的。除了少有几个在线搜索、在线翻译 App 使用语音助手，很少看到使用了语音功能的 Web App。主要还是因为移动场景下语音设备一般是标配，语音功能能解放双手，使用起来很方便。而电脑没有声卡没有麦克风一样跑得很溜，加上 Web 语音技术不是原生的，自行研发成本很高。随着 Serverless（无服务器环境）和云计算云服务大行其道，我相信语音 Web App 会流行起来的。下面就会为大家推荐一个高级语音 AI 平台 Alan。如果您已经迫不及待，先 体验一下 最终效果吧，英语单词要读准哟 ?。一、Alan 概述Alan 提供了一个完整的无服务器环境来构建强大且可靠的应用内语音助手和聊天机器人。无需创建口语模型、训练语音识别软件、部署和托管语音组件 —— Alan AI 后端完成了大部分工作。您的应用程序的语音体验可以由单个开发人员构建和开发，而不是由机器学习和 DevOps 专家团队构建和开发，因此您无需额外开销即可向应用添加语音界面。使用 Alan，您可以超越触摸和键入界面的功能，并且语音可以在您的应用程序中启用任何复杂的工作流程或功能。Alan 语音脚本是用 JavaScript 编写的，这使得它们具有高度的可定制性和灵活性。使用 Alan 创建的语音界面构建一次即可部署在任何地方——您无需为特定平台重建它们。二、Alan 起步想为您的应用创建语音助手吗？请按照以下步骤开始使用 Alan。1. 注册 Alan Studio注册 Alan Studio 或 登录（如果您已经注册）。2. 创建语音脚本进入 Alan Studio，可以看到已有的项目统计、Create Voice Assistant 按钮、可用的免费交互次数。如下图：免费用户可以默认交互 50 次，如果绑定 github 并给 Alan 点赞，可以送交互（最多 9 次）。免费次数用完后，用户需要更改成付费方式并在线充值才能继续使用 Alan 语音云服务。2.1 新建工程单击Create Voice Assistant会显示如下选择对话框：此处选择一个空白模板新建工程，也可以复制一个 语音脚本示例 模板来编辑工程。Alan Studio 在线编辑器的界面如下：2.2 编写语音脚本要让用户与您的语音助手交互，您需要添加用户可以提供的语音脚本命令。语音脚本描述了与用户对话的结构，或预期的对话场景。在 Alan Studio 中，在脚本编辑区输入以下代码：// Use this sample to create your own voice commands intent('(going| ) right', p => { p.play('Right'); p.play({command:'go-right'}); }); intent('(going| ) left', p => { p.play('Left'); p.play({command:'go-left'}); }); intent('(going| ) up', p => { p.play('Up'); p.play({command:'go-up'}); }); intent('(going| )down', p => { p.play('Down'); p.play({command:'go-down'}); });也可以通过点击 Add script 按钮来新增多个语音脚本。目前 Alan 提供的语音脚本示例有：Bitcoin（比特币语音助手）、Calculator（计算器机器人）、News（新闻头条播报）、CRM（客户关系管理语音助手）、Small Talk（简单聊天机器人）、Weather（天气播报机器人）、Jeopardy（极限游戏机器人）、Translation（翻译机器人）。2.3 测试语音脚本在 Alan Studio 中，在 Edit 选项卡下方，键入聊天或按麦克风按钮说话，可以测试语音脚本。免费用户有功能限制：不能使用 Alan Studio 的测试视图通过 Alan Studio 底部的日志面板可以查看：系统日志：Alan Studio 系统消息语法日志：语音脚本错误信息短语日志：对话中对话消息的信息3. 集成到应用程序中在 Alan Studio 工具栏中点击 Integrations，首先要选择整合一样，开发阶段一般选择 Development。最重要需要 Copy SDK Key，如下图：免费用户有功能限制：不能选择整合环境。这个在客户端调用云服务时会用到。我们还可以在该面板中配置 Alan 按钮。免费用户有功能限制：不能添加编辑个性化配置选项。能不能支持中文语音有待验证。根据配置 Alan Studio 会生成相应的嵌入代码，如下图：新建一个 html 文件，将脚本标记添加到页面：<script src="https://studio.alan.app/web/lib/alan_lib.min.js"></script>给 Alan 按钮添加一个容器：<div class="alan-btn"></div>在 script 标签中复制嵌入代码示例并做如下相应修改：var btn = alanBtn({ right: 24, top: 24, size: 48, key: "8fc5f867070d9b45dbfb01d46106baf62e956eca572e1d8b807a3e2338fdd0dc/stage", onCommand: (commandData) => { console.log(commandData); let style = document.getElementById("circle").style; const command = commandData.command; if (command === "go-right") { style.transform += "translateX(50px)"; } ... }, rootEl: document.getElementById("alan-btn") }); btn.activate(); btn.playText("you are welcome"); btn.playCommand({ command: "go-down" });点击此处查看 完整实例代码。当用户说：going left 或 left，Alanw 会向用户播放文本 Left 并将小球向左移动 50px，其它方向亦然。如果免费语音次数已经使用完，会听到一个语音提示让用户充值。在本实例中，Alan 按钮实例初始化完成后，我们使用 activate() 方法以编程方式打开激活 Alan 按钮，调用 playText() 方法播放 you are welcome，并使用 playCommand() 方法执行将小球向右移动 50px;三、服务器端 API1. 意图您可以使用 intent() 函数在脚本中定义语音命令。该功能可用于完成用户要求的任务或回答用户的问题。在 intent() 函数中，您必须指定一种或多种模式 — 调用命令的用户话语，以及调用命令时必须触发的一种或多种响应操作。命令和响应部分支持正则表达式、通配符。详细语法详见 模式。编写命令时，您可以将预定义和用户定义的插槽添加到意图模式。插槽是用户话语中的 变量，允许 Alan 识别和检索有用的信息。2. 响应在 Alan 中，您可以通过以下功能触发语音命令的响应操作：play()reply()2.1 Playplay() 是用于响应操作的预定义函数。您可以使用它来响应用户或向客户端应用程序发送命令。响应用户要向用户播放响应，您需要在 play() 函数中定义一个模式。Alan 将使用这句话作为回应。在上面示例中，当用户说：going right 或 right 会调用该命令。 作为响应操作，Alan 向用户播放文本 Right。向 App 发送命令play() 函数可用于向与 Alan 集成的客户端应用程序发送命令。此类命令可让您在应用程序端执行特定活动，例如，导航到应用程序中的另一个页面、突出显示屏幕上的 UI 元素等。通过这种方式，您可以同步语音和视觉效果，并为您的应用创建多模式界面。要发送命令，请将 JSON 传递给 play() 函数。在上面示例中，当用户说：going right 或 right 会调用该命令。 作为响应操作，Alan 向客户端 App 发送 go-right 命令。当然，更灵活的方式发送命令的同时要在应用程序端处理命令，您必须为从 Alan 的语音脚本接收到的命令定义处理程序。有关详细信息，请参阅 onCommand处理程序。2.2 答复reply() 是一个预定义的函数，如果你只需要给用户一个响应，不需要做任何复杂的动作，就可以使用它。intent('Say $(W hello|goodbye)', reply('$(W)'));其实就是 play(语音文本)，在 reply() 函数中，您可以像在 play() 函数中一样使用模式和插槽。3. 意图匹配您的项目可以有许多语音命令。当用户发出命令时，Alan 会将命令与脚本中最合适的意图进行匹配。为此，Alan 分别评估每个意图，并为意图分配不同的权重或匹配分数。匹配分值范围从 1（最准确的匹配）到 0（不匹配）。得分最高的命令被选为最佳匹配。在下面的示例中，如果用户询问：天气如何？第一个意图将被选为最佳匹配。 第二个意图将不会被匹配，因为它包含的单词比用户的话语多。 反之亦然，如果用户问：今天的天气如何？第二个意图将获得更高的分数，因为它是最准确的匹配。intent('What is the weather?', p => { p.play('The weather is a word'); }); intent('What is the weather today?', p => { p.play('The weather today is great!') });详细语法 服务端 API。四、Alan 客户端 SDK1. 支持平台使用 Alan 客户端 SDK，您可以将 Alan 与下列构建的应用集成在一起：JavaScriptReactAngularVueEmberElectronIoniciOSAndroidApache CordovaFlutterReact NativeMicrosoft PowerApps2. 主要参数下面将以 JavaScript 为例进行介绍。Alan 按钮最主要的参数有：key：Alan Studio 项目的密钥。rootEl：添加 Alan 按钮的元素。如果没有提供 rootEl，则将 Alan 按钮添加到 body 中。onCommand：用于处理来自 Alan 语音脚本的命令的回调。在此回调中，您可以设置 —— 有关应用程序对语音脚本接收到的命令做出反应的逻辑。onButtonState：接收 Alan 按钮连接状态的回调。目前 Alan Web SDK 只支持现代浏览器，不支持 IE 浏览器。五、展望语音 AI 会成为未来最主流的交互方式。根据贝恩公司此前的一份调研数据显示，未来人机交互方式中，语音交互将会占到 30%左右。语音助手移动 App 以其先天优势仍然占据主导地位，而语音助手将作为 Web App 增强功能不断创新，让我们的生活更美好。参考：https://studio.alan.apphttps://alan.app/docs/usage/getting-startedhttps://alan.app/docs/client-api/web/vanillahttps://alan.app/docs/usage/video/studio#alan-studio-videos
-
在3D城市中可视化拟建建筑 在本教程中，您将学习如何创建一个 Cesium 应用程序以用您自己的 3D 模型替换真实城市中的建筑物。您可以使用它来可视化拟建建筑物的影响。它如何改变天际线？从特定楼层或房间看去会是什么样子？我们将介绍如何：在网络上设置和部署您的 Cesium 应用程序添加全球 3D 建筑、地形和图像的基础图层隐藏单个建筑物并用您自己的 3D 模型替换它们 这是您将构建的应用程序。您可以切换建议的建筑物并从多个角度查看它。开始之前我们将从 Cesium ion 获取全球卫星图像、3D 建筑和地形，Cesium ion 是一个用于流式传输和托管 3D 内容的开放平台。 如果您还没有免费的 Cesium ion 帐户，请注册一个。登录后：转到您的 Access Tokens 选项卡。请注意默认令牌旁边的复制按钮。我们将在下一步中使用此令牌。Cesiumion 是一个用于流式传输和托管 3D 内容的开放平台，包括全球精选数据，您可以使用这些数据创建自己的真实世界应用程序。步骤1：设置你的Cesium 应用我们将使用开源 JavaScript 引擎 CesiumJS 创建我们的应用程序。我们将使用在线 IDE Glitch 来托管我们的应用程序。使用我们放在一起的基本模板创建一个新的 Glitch 项目。单击左侧面板中的 index.html 查看应用程序代码。替换为您的令牌页面 your_token_here 中的访问令牌 。通过单击顶部的 Show 并选择 Next to The Code 来运行应用程序。到目前为止，index.html 中的代码做了三件事：导入 CesiumJS 库。JavaScript和 CSS 文件在这两行中加载：<script src="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Cesium.js"></script> <link href="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Widgets/widgets.css" rel="stylesheet" />为场景添加一个 HTML 容器：<div id=cesiumContainer></div>。初始化查看器：const viewer = new Cesium.Viewer('cesiumContainer');。你现在有一个基本的 CesiumJS 应用程序在你的浏览器中运行，其中包含来自 Cesium ion 的全球卫星图像。配置自动刷新每次代码更改时，Glitch 都会自动刷新页面。您可以通过单击左上角的项目名称并取消选中此框来切换它：使用应用程序窗口顶部的刷新按钮重新运行应用程序：步骤 2：添加 Cesium OSM 建筑和 Cesium 世界地形Cesium OSM Buildings 是一个全球基础层，拥有超过 3.5 亿个来自 OpenStreetMap 数据的建筑物。它用作 3D Tiles，这是 Cesium 创建的开放标准，可以将 3D 内容流式传输到任何兼容的客户端。让我们添加这些图层，然后将相机移动到我们虚构的新建筑所在的城市 — 科罗拉多州丹佛市。用下面的代码替换 index.html 中的 JavaScript 代码，保留之前的访问令牌行。单击并拖动以移动相机。拖动时按住 CTRL 以倾斜。单击任何建筑物以查看其元数据。// Keep your Cesium.Ion.defaultAccessToken = 'your_token_here' line above. // STEP 2 CODE // Initialize the viewer with Cesium World Terrain. const viewer = new Cesium.Viewer('cesiumContainer', { terrainProvider: Cesium.createWorldTerrain() }); // Add Cesium OSM Buildings. const buildingsTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings()); // Fly the camera to Denver, Colorado at the given longitude, latitude, and height. viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(-104.9965, 39.74248, 4000) }); 此时，您完整的 index.html 将如下所示（访问令牌除外）。在以后的步骤中，您将在标记内的现有代码下方添加新代码 script。<!DOCTYPE html> <html lang="en"> <head> <script src="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Cesium.js"></script> <link href="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Widgets/widgets.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body> <div id="cesiumContainer"></div> <script> // Your access token can be found at: https://cesium.com/ion/tokens. // This is the default access token from your ion account Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ODdlN2I5OS1iZDMyLTQ2MTItODQwYi01MGE3NGI3NGIzNGUiLCJpZCI6MTE4MjU5LCJpYXQiOjE2NzA5ODI0MDd9.XpfuSxbcNuxNF1jMqI5FxveHXhiq6VVCsww80hIVAME'; // Keep your Cesium.Ion.defaultAccessToken = 'your_token_here' line above. // STEP 2 CODE // Initialize the viewer with Cesium World Terrain. const viewer = new Cesium.Viewer('cesiumContainer', { terrainProvider: Cesium.createWorldTerrain() }); // Add Cesium OSM Buildings. const buildingsTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings()); // Fly the camera to Denver, Colorado at the given longitude, latitude, and height. viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(-104.9965, 39.74248, 4000) }); </script> </body> </html>Cesium OSM Buildings 与全球高分辨率 3D 地形图层 Cesium World Terrain 绑定。这使其非常适合需要精确建筑高度的应用，例如洪水分析工具。步骤 3：确定新建建筑面积在我们添加新建筑物之前，让我们添加一个 GeoJSON 文件来标记它的足迹。这将告诉我们哪些现有建筑物需要拆除。下载 GeoJSON 文件。将 GeoJSON 文件拖放到您的 Cesium ion 仪表板中。按 上传 。步骤 4：上传后，记下预览窗口下的资产 ID。在 index.html 中添加以下代码。替换 your_asset_id 为您的资产 ID。ID 是一个数字，因此您不需要引号。// STEP 3 CODE async function addBuildingGeoJSON() { // Load theGeoJSONfile from Cesium ion. const geoJSONURL = await Cesium.IonResource.fromAssetId(your_asset_id); // Create the geometry from the GeoJSON, and clamp it to the ground. constGeoJSON= await Cesium.GeoJsonDataSource.load(geoJSONURL, { clampToGround: true }); // Add it to the scene. const dataSource = await viewer.dataSources.add(geoJSON); // By default, polygons in CesiumJS will be draped over all3Dcontent in the scene. // Modify the polygons so that this draping only applies to the terrain, not3Dbuildings. for (const entity of dataSource.entities.values) { entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN; } // Move the camera so that the polygon is in view. viewer.flyTo(dataSource); } addBuildingGeoJSON(); 您现在会在地面上看到建筑物的足迹。使用鼠标滚轮放大或右键单击并拖动以仔细查看。步骤 5：隐藏现场现有的 3D 建筑现在我们已经确定了新建筑的去向，我们可以看到当前有哪些建筑。我们将使用 3D Tiles Styling Language 来隐藏它们。在上面的占地面积中，我们可以看到在我们拟建的新建筑所在地有六座建筑——一座大型建筑和五座小得多的建筑。添加以下代码。它隐藏了所有较小的 3D 建筑。// STEP 4 CODE // Hide individual buildings in this area using3DTiles Styling language. buildingsTileset.style = new Cesium.Cesium3DTileStyle({ // Create a style rule to control each building's "show" property. show: { conditions : [ // Any building that has this elementId will have `show = false`. ['${elementId} === 332469316', false], ['${elementId} === 332469317', false], ['${elementId} === 235368665', false], ['${elementId} === 530288180', false], ['${elementId} === 530288179', false], // If a building does not have one of these elementIds, set `show = true`. [true, true] ] }, // Set the default color style for this particular3DTileset. // For any building that has a `cesium#color` property, use that color, otherwise make it white. color: "Boolean(${feature['cesium#color']}) ? color(${feature['cesium#color']}) : color('#ffffff')" });扩展此代码以隐藏剩余的 3D 建筑。单击建筑物以找到其elementI。添加另一行，如：['${elementId} === large_building_elementId', false]步骤 6：上传并定位新建筑让我们上传建议的建筑模型。下载此 glTF 模型。将其拖放到您的 Cesium 离子仪表板中。选择 3D Model (tile as 3D Tiles) 并按上传 。完成拼贴后，单击 资产预览窗口顶部的 Adjust Tileset Location 按钮。在搜索框中输入建筑物地址 1250 Cherokee Street ，然后单击 下一步 。使用查看器上的控件，在视觉上定位和旋转建筑物，使其与下面的卫星图像对齐。您的最终设置应大致为：经度：-104.9909 纬度：39.73579 身高：1577 航向：-8按 保存。确保地理定位准确性在本教程中，您手动定位了一座新建筑。如果建筑物已经进行了地理参考，Cesium ion 会自动将其放置在正确的位置。您还可以使用 REST API 对其进行地理定位。通过地理定位指南了解更多信息 。步骤 7：将新建筑添加到场景中现在让我们将新建筑物添加到场景中。在资产预览窗口下获取我们刚刚地理定位的建筑模型的资产 ID。在 index.html 中添加以下代码。替换 your_asset_id 为您的资产 ID。// STEP 6 CODE // Add the3DTileset you created from your Cesium ion account. const newBuildingTileset = viewer.scene.primitives.add( new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(your_asset_id) }) ); // Move the camera to the new building. viewer.flyTo(newBuildingTileset);步骤 8：添加一个按钮来切换新建筑在 index.html 中，将按钮添加到您的 <body> 标签内的上方<script。<button id="toggle-building">Toggle new building</button>在 head 标签内添加以下 CSS style标签：<style type="text/css"> #toggle-building { z-index: 1; position: fixed; top: 5px; left: 5px; } </style>在 index.html 中添加以下 JavaScript：// STEP 7 CODE // Toggle the tileset's show property when the button is clicked. document.querySelector('#toggle-building').onclick = function() { newBuildingTileset.show = !newBuildingTileset.show; };步骤 9：考虑建筑对周围环境的影响现在您可以比较有和没有这座新建筑的场景！丹佛的全景山景备受推崇。这座建筑如何影响其他地方的景色，例如科罗拉多州议会大厦？对科罗拉多州议会大厦景观的影响。要重现这一点，请搜索美国科罗拉多州丹佛市的州议会大厦并调整相机。我们甚至可以探索国会大厦入口处的景色将如何变化。从更接近地面的角度对视图的影响。完整教程源码这是带有 your_token_here 和 your_asset_id 占位符的此应用程序的完整源代码。<!DOCTYPE html> <html lang="en"> <head> <script src="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Cesium.js"></script> <link href="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Widgets/widgets.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> <style type="text/css"> #toggle-building { z-index: 1; position: fixed; top: 5px; left: 5px; } </style> </head> <body> <div id="cesiumContainer"></div> <button id="toggle-building">Toggle new building</button> <script> // Your access token can be found at: https://cesium.com/ion/tokens. // This is the default access token from your ion account Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ODdlN2I5OS1iZDMyLTQ2MTItODQwYi01MGE3NGI3NGIzNGUiLCJpZCI6MTE4MjU5LCJpYXQiOjE2NzA5ODI0MDd9.XpfuSxbcNuxNF1jMqI5FxveHXhiq6VVCsww80hIVAME'; // Keep your Cesium.Ion.defaultAccessToken = 'your_token_here' line from above. // STEP 2 CODE // Initialize the viewer with Cesium World Terrain. const viewer = new Cesium.Viewer('cesiumContainer', { terrainProvider: Cesium.createWorldTerrain() }); // Add Cesium OSM Buildings. const buildingsTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings()); // Fly the camera to Denver, Colorado at the given longitude, latitude, and height. /* viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(-104.9965, 39.74248, 4000) }); */ // STEP 3 CODE async function addBuildingGeoJSON() { // Load theGeoJSONfile from Cesium ion. const geoJSONURL = await Cesium.IonResource.fromAssetId(your_asset_id); // Create the geometry from the GeoJSON, and clamp it to the ground. constGeoJSON= await Cesium.GeoJsonDataSource.load(geoJSONURL, { clampToGround: true }); // Add it to the scene. const dataSource = await viewer.dataSources.add(geoJSON); // By default, polygons in CesiumJS will be draped over all3Dcontent in the scene. // Modify the polygons so that this draping only applies to the terrain, not3Dbuildings. for (const entity of dataSource.entities.values) { entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN; } // Move the camera so that the polygon is in view. // viewer.flyTo(dataSource); } addBuildingGeoJSON(); // STEP 4 CODE // Hide individual buildings in this area using3DTiles Styling language. buildingsTileset.style = new Cesium.Cesium3DTileStyle({ // Create a style rule to control each building's "show" property. show: { conditions : [ // Any building that has this elementId will have `show = false`. ['${elementId} === 532245203', false], ['${elementId} === 332469316', false], ['${elementId} === 332469317', false], ['${elementId} === 235368665', false], ['${elementId} === 530288180', false], ['${elementId} === 530288179', false], // If a building does not have one of these elementIds, set `show = true`. [true, true] ] }, // Set the default color style for this particular3DTileset. // For any building that has a `cesium#color` property, use that color, otherwise make it white. color: "Boolean(${feature['cesium#color']}) ? color(${feature['cesium#color']}) : color('#ffffff')" }); // STEP 6 CODE // Add the3DTileset you created from your Cesium ion account. const newBuildingTileset = viewer.scene.primitives.add( new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(your_asset_id) }) ); // Move the camera to the new building. viewer.flyTo(newBuildingTileset); // STEP 7 CODE // Toggle the tileset's show property when the button is clicked. document.querySelector('#toggle-building').onclick = function() { newBuildingTileset.show = !newBuildingTileset.show; }; </script> </body> </html>下一步如果您有自己的建筑模型，请尝试使用它而不是提供的示例 —— glTF、OBJ 和 FBX 都受支持。或者将建筑物放置在您自己的城市中。请参阅 3D 模型导入指南以了解更多信息。
-
-
