如果我们可以创建一个人工智能图像搜索服务呢？输入一个单词，并获得标题或描述与我们的搜索匹配的图像。更好的是，如果我们可以创建一个AI图像搜索服务，而不是仅仅匹配标题和图像描述，我们可以搜索图像中的某些内容，而不管给定的图像标题或描述是什么。例如，找到一个有狗在里面，或那些可能有路灯或公共汽车（更像一个图像搜索工具）。很少有人工智能的例子显示他们的底层技术是什么样子的。因此，在这篇由两部分组成的文章中，我们将展示如何构建一个智能搜索服务来充当图像搜索工具，不仅基于标题，而且基于图像内容。这个应用程序将主要使用React，Cloudinary和Algolia搜索。在第一篇文章中，我们将构建应用程序的父组件，它是有状态的组件。先决条件不需要知道如何编写人工智能代码来跟进（就像我们使用人工智能技术一样）。具备基本的HTML，CSS，JavaScript和React知识。此外，对Express、Axios和Webtask等技术的了解也提供了额外的优势，但并非如此必需的.InstallationNode.js用于在此服务中构建后端服务器，并且需要其包管理器npm才能为此安装基本节点模块项目。下载这里是Node和npm。您可以通过在您的命令上运行此命令来验证它们是否已安装行：复制到剪贴板节点-v净现值-v这两种工具的版本都应该显示在控制台。反应，一个前端JavaScript库，用于前端用户交互。流行的createreact应用程序构建工具将用于快速构建。通过安装Create React app创建React项目使用：复制到剪贴板npm安装-g创建react应用程序现在，我们可以从头开始快速构建React应用程序使用：复制到剪贴板创建react应用程序智能搜索这将创建一个简单的React应用程序。cd进入智能搜索并在控制台中运行以下命令以启动应用程序：复制到剪贴板npm运行启动您已成功创建simply React应用程序。现在我们将根据我们的应用定制它，它有两个主要功能-上传和搜索。此应用程序有几个依赖项和功能所需的模块。依赖关系是：Algoliasearch：用于在我们的应用程序中启动Algolia AI搜索需要从客户端服务器端进行axios通信主体解析器：解析中间件中的传入请求类名：用于在JavaScript中动态连接类名Cloudinary:Cloudinary为web和移动设备提供了一个很棒的图像存储、转换和交付解决方案连接多方：连接多方中间件快递：A节点.js创建节点服务器的框架react instantsearch:Algolia的react搜索库webtask工具：无服务器架构的webtask通过在您的命令上运行此命令来安装这些依赖项行：复制到剪贴板npm install--save algoliasearch axios body parser类名cloudinary cloudinary react connect多方快速反应实例搜索webtask工具注意使用-save标志可确保依赖项保存在本地包.json可以在node\u modules文件夹中找到。在客户端，在索引.html文件，Cloudinary是必需的，它包含在HTML脚本底部的脚本标记中，就在结束标记之前。包括这些脚本：复制到剪贴板......另外，在HTML脚本的head标记中，Bulma和react instant search主题algoliacss文件被导入。这些是用来设计我们的应用程序。Bulma是一个基于flexbox的免费开源CSS框架。这些标记包括在链接中负责人：抄送剪贴板......不过，在索引.html在公用文件夹中，可以将页面的标题更改为任何标题更喜欢。现在我们已经安装了所有的依赖项，所以最好先构建前端，然后再在后端。正在构建前端在我们的图像搜索工具的前端部分，我们将利用它包括有状态和无状态组件。在当前的应用程序中，createreact app工具已经帮助在中创建了一个单一的有状态组件应用程序js以及相应的CSS文件应用程序.css. 这是大多数有状态配置将发生的地方。对于无状态组件，我们将需要images modal和imagelist的组件。在src文件夹中，创建一个名为components的文件夹。在"组件"文件夹中，创建所需的组件-莫代尔.js, 图像列表.js以及相应的CSS文件-模态.css, ImageList.js.现在我们有所需的所有构建文件，我们将开发父级应用程序js组件。！配置应用程序jsIn这个应用程序js文件位于src文件夹中，清除所有编写的代码，以便重新开始。首先，导入所有必需的模块使用：复制到剪贴板导入React，{Component}来自'React'；进口{即时搜索，搜索箱，无限位}来自"react instantsearch/dom"；从"axios"导入axios；从"./components/ImageList"导入ImageList；从"./components/Modal"导入Modal；导入'/应用程序.css';...React、axios InstantSearch、SearchBox和InfiniteHits以及创建的组件（ImageList和Modal）。另外，父对象的样式表应用程序js文件是导入。下一个，我们配置App组件。App组件只是React组件类的一个扩展，具有定义的构造函数函数和方法。应用程序的状态在构造函数函数中定义，以及应用程序类的一些必需属性。创建一个空类，扩展前面导入的React组件并将其导出：Copy to clipboard...类应用程序扩展组件{//配置在这里}导出默认应用程序；在App类中，创建一个构造函数，在这里定义状态变量和构造函数属性。复制到剪贴板...类应用程序扩展组件{建造师（道具）{超级（道具）；这个州= {modalIsActive:错误，预览：""，previewPublicId:""，说明：""，previewPayload:""，挂起：假};}}导出默认应用程序在构造函数中定义的state对象中，可以看到定义的各种变量。它们各自的状态可以改变，事件基于它们当时的状态。定义的状态是：modalisActive：这表示上传图像时使用的模式的状态，它被分配一个布尔值，当它为真时，模式应该是打开的，反之亦然。预览：这是可供预览的上载资产的URL。previewPublicId：分配给上载图像的PublicId，用作每个图像的唯一标识符。描述：用户定义的图像描述。previewPayload：一旦上传了一个图像，从Cloudinary服务器接收的数据就被分配给预览负载。pending：这用于在我们的应用程序中创建一些"阻塞"功能，以防止其他进程在pending为true时运行或在pending为false时运行。现在我们已经定义了状态属性，让我们定义一些我们将在应用程序中需要的关键构造函数变量。在构造函数中包含此项功能：复制到剪贴板...此.requestURL='https://wt-nwambarchitian-gmail_com-0.run.webtask.io/ai-搜索'；本.cl= 云端窗;this.uploadWidget= this.cl.createUploadWidget({cloud_name:'christekh'，上载预设：'idcidr0h'}，（错误，[数据]）=>{控制台.log（数据）；此设置状态({预览：data.secure_url,previewPayload:数据，预览发布：data.public_标识});});...首先，我们将服务器的webtask地址赋给requestURL变量，了解webtasks、serverless架构以及如何在这里创建webtask。但是，您可能需要等到服务器最终构建完成后再发送到webtask。对窗口对象调用Cloudinary属性并将其分配给本.cl。现在我们可以使用Cloudinary upload widget来处理来自文件系统源URL和camera的上传！createUploadWidget方法在Cloudinary窗口对象上调用并分配给this.uploadWidget变量。在createUploadWidget中，第一个参数是从Cloudinary仪表板获取的用户详细信息的对象。在Cloudinary上创建一个帐户并导航到仪表板以查看您的云名称和上载预设。第二个参数是一个回调函数，第一个参数是error，第二个参数是返回的数据数组参数.In在函数中，我们首先将返回的数据记录到控制台（调试时很方便），然后通过将返回数据的属性分配给状态变量来更改应用程序的状态。我们已经完成了构造函数，让我们开始创建所需的类方法。在应用程序类中，添加：复制到剪贴板...切换模式（）{此设置状态（{modalIsActive:！this.state.modalIsActive});}handleDropZoneClick（事件）{this.uploadWidget.open();}handleDescriptionChange（事件）{常数{value}=事件.目标;如果(值.长度