让我们面对现实吧，人工智能（AI）正在接管应用程序。在不久的将来，返利折扣，大多数软件都会嵌入人工智能系统，没有人工智能的应用程序也会慢慢消失。软件应用程序能够理解用户生成的数据并将其用于有价值的预测，这一能力正迅速成为每个应用程序的必备功能。科技界的大佬们并没有意识到这一点，因为我们看到谷歌、微软e.t.c.等科技巨头推出了人工智能和机器学习api和sdk，使开发人员能够轻松地将这些功能嵌入到他们的应用程序中。在本文中，您将使用Google的visionapi来构建一个简单的表情预测游戏。你要建造什么你将要建立的应用程序是一个简单的表情游戏，向用户显示一个随机的表情，然后用户必须扫描他们周围的一个物理对象匹配的表情符号使用网络摄像头。Google的visionapi将预测扫描的图像并返回结果，并将结果与emoji进行比较，以确定是否匹配。要查看完成的代码，请查看此GitHub repo。游戏操作如下：用户必须登录才能玩用户可以从一个下拉列表中选择一个摄像头提要，该下拉列表显示系统上所有可用的摄像头提要。例如，电脑的内置摄像头用户点击Play开始一个新的游戏，然后一个表情图就会显示给用户来扫描匹配的对象用户扫描对象并单击PredictforGoogle的VisionAPI返回结果以检查匹配情况用户必须在60秒计时器用完之前扫描对象用户正确匹配得10分，错误匹配得5分用户可以跳过一个表情符号，全国大数据中心，在60秒窗口内显示另一个表情符号如果在用户得到正确的预测前60秒就用完了，游戏就结束了！"在不远的将来，大多数软件将嵌入人工智能系统，没有人工智能的应用程序将慢慢消失。"在推特上留言先决条件要继续阅读本文，需要做以下几件事：Vuejs基础知识系统上安装的Nodejs系统上安装的Vue CLI谷歌账户创建googleapi项目创建项目首先你需要建立一个Google云平台（GCP）项目。要做到这一点，只需进入GCP控制台，这将要求你用你的Google帐户登录，如果你还没有登录。登录后，您将看到GCP仪表板。要创建新项目，请单击蓝色顶部工具栏左侧的项目下拉列表。这将弹出一个包含所有项目列表的模式。如果尚未创建项目，则此模式将为空。在模态上，单击右上角的newproject按钮。这会自动重定向到项目创建页面，在那里可以创建新的Google云平台项目。输入项目名称后，将位置保留为"无组织"，然后单击"创建"按钮。系统会自动设置项目并在完成后通知您。它还将在顶部蓝色工具栏上的"项目"下拉列表中选择项目作为当前项目。如果没有自动选择新项目，则可以单击"项目"下拉列表并在模式中显示的项目列表中选择该项目。"让我们面对现实吧，人工智能（AI）正在接管应用程序。"在推特上留言启用云视觉API为了能够使用GCP的visionapi，您需要为您的项目启用API。在项目下拉列表中选择项目后，单击侧菜单上的仪表板。然后在顶部蓝色工具栏的下面，单击enableapisandservices按钮，这将重定向到API库页面，该页面显示所有可用API的列表。在搜索框中，键入Vision API以筛选列表。现在应该可以看到从列表中筛选出的cloudvisionapi。点击它来选择它。现在您将被重定向到cloudvisionapi页面，该页面概述了API的全部内容。单击蓝色的Enable按钮为您的项目启用此API。获取API密钥从应用程序调用googlecloudvisionapi时，需要使用API密钥对请求进行身份验证。要获取API密钥，只需导航到凭据页面。请确保在顶部的项目下拉列表中选择了您的项目。单击createcredentials下拉列表并从选项列表中选择API Key。系统会自动为您生成一个API密钥，并将其显示在对话框中。复制此键并关闭对话框。您将需要这个密钥在项目的后面。请注意：Google要求您为GCP帐户设置一个帐单帐户，以便在超出免费限制后继续使用API。你可以在这里设置一个帐单帐户。你可以在GCP网站上找到更多关于定价和配额的信息。正在创建Auth0应用程序接下来，您将创建Auth0应用程序来处理Vue应用程序中的身份验证，大数据在线，因此请前往Auth0的网站并单击"登录"按钮登录到控制台。登录后，单击左侧菜单上的"应用程序"。在"应用程序"页面上，单击橙色的"创建应用程序"按钮。弹出"创建应用程序"对话框后，为应用程序输入适当的名称，然后从"应用程序名称"字段下面的选项中选择"单页Web应用程序"。现在单击Create按钮完成这个过程。成功创建应用程序后，转到新创建的应用程序的"设置"部分。在Allowed Callback url、Allowed Web Origins、Allowed Logout url和Allowed Origins（CORS）字段中，输入：8080。此地址是您稍后将创建的Vue应用程序的默认地址。输入完这些值后，向下滚动并单击保存更改按钮。搭建Vue项目通过在应用程序所在的文件夹中运行以下命令，淘客放单，创建新的Vue应用程序。vue创建我的表情游戏什么时候请选择预设？在交互式CLI中出现提示，选择default。选择之后，Vue CLI将开始构建新的Vue应用程序。使用Auth0设置身份验证您将根据Auth0文档中的说明在Vue应用程序中设置Auth0身份验证。身份验证服务您需要做的第一件事是编写一个身份验证服务。为此，首先需要安装@auth0/auth0 spa js。因此，在Vue应用程序的根目录下，运行以下命令：npm安装@auth0/auth0 spa js一旦安装完成，接下来要做的就是创建身份验证服务。在身份验证服务中，您将需要Auth0域和应用程序id。若要将这些详细信息与服务代码分开，请创建一个名为auth的新文件_配置.json将以下代码段粘贴到项目的根目录中：//授权_配置.json{"domain"："您的认证域"，"clientId"："您的应用程序ID"}请确保用适当的值替换占位符"YOUR AUTH0"域和"u APP"ID。您可以在您的应用程序页面上找到您的客户端id，并且您的Auth0域的格式为[您的用户名].Auth0.com，例如user1.Auth0.com。请确保忽略.gitignore文件中的此文件，以确保不会将敏感凭据推送到公共存储库。现在要创建身份验证服务，大数据在线，在src文件夹中创建一个名为auth的文件夹，并在该文件夹中创建一个名为索引.js并粘贴以下代码：//src/认证/索引.js从"Vue"导入Vue；从"@auth0/auth0 spa js"导入createAuth0Client；/**定义身份验证后要执行的默认操作*/const DEFAULT_REDIRECT_CALLBACK=（）=>window.history.replaceState({}, 文件名称, window.location.pathname);让实例；/**返回SDK的当前实例*/export const getInstance=（）=>实例；/**创建Auth0 SDK的实例。如果已经创建了一个实例，则返回该实例*/导出const useAuth0=({onRedirectCallback=默认的"重定向"回调，重定向URI=窗口.位置.原点,…选项}) => {if（instance）返回实例；//"instance"只是一个Vue对象实例=新Vue({数据（）{返回{加载：真，isAuthenticated:错误，用户：{}，auth0Client:空，popupOpen:错误，错误：空};},方法：{/**使用弹出窗口验证用户*/async loginWithPopup（o）异步登录{打开。弹出这个=真；试试看{等待this.auth0客户端.loginWithPopup（o）；}接球（e）{//eslint禁用下一行控制台.错误（e） ；}最后{这个.popup打开=错误；}这个用户=等待this.auth0客户端.getUser（）；这是我认证的=真；},/**使用重定向登录时处理回调*/异步handleRedirectCallback（）{这个。装载=真；试试看{等待this.auth0客户端.handleRedirectCallback（）；这个用户=等待this.auth0客户端.getUser（）；这是我认证的=真；}接球（e）{这个错误=e；}最后{这个。装载=错误；}},/**使用重定向方法对用户进行身份验证*/loginWithRedirect（o）{返回this.auth0客户端.loginWithRedirect（o）；},/**返回ID令牌中存在的所有声明*/getIdTokenClaims（o）{返回this.auth0客户端.getIdTokenClaims（o）；},/**返回访问令牌。如果令牌无效或丢失，则检索新的令牌*/敏感地（o）{返回this.auth0客户端.gettokensilenly（o）；},/**得到