AI 驱动的混合搜索正在封闭测试中。 加入等候名单,获取早期访问权限!

前往主页Meilisearch 的标志
返回文章
2021 年 2 月 23 日

Meilisearch:一张空白的画布

Carolina Ferreira
Carolina FerreiraMeilisearch 的开发者布道师@CarolainFG
Meilisearch: a blank canvas

大家好!正如你们中的一些人可能知道的那样,我最近加入了 Meilisearch,担任开发者布道师。我工作的一部分是回答问题,从而帮助社区,所以过去几个月我的首要任务是了解 Meilisearch。我认为学习新软件的最佳方式就像任何开发者一样使用它:构建一些东西。因此,我开始制作一个演示。

这个演示是在 Meilisearch 的最新版本 v0.19 时创建的,由于 Meilisearch 的较新版本中添加了新功能,本博文中描述的一些解决方法不再必要。

Meilisearch x MoMA

第一步是找到一个我喜欢使用的漂亮数据集。在几次尝试处理一些非结构化数据集失败后,我偶然发现了现代艺术博物馆(MoMA)的存储库。真是幸运的发现!他们有两个数据集:艺术家和艺术品。我决定选择艺术品数据集,因为它具有关于每件艺术品的所有基本信息:标题、艺术家、尺寸、媒介,甚至是艺术家的传记。但最好的是它是 JSON 格式的!无需转换、无需恢复 MongoDB 转储、无需抓取:Meilisearch 准备就绪 😀

我使用 Meilisearch JavaScript 创建索引、添加文档并自定义设置。对于前端,我决定使用 Instant Meilisearch,并结合 Vue InstantSearch,如meilisearch-vue 存储库中所述。我有点懒,所以如果我发现一个毫不费力地提供良好结果的工具,我就会使用它!幸运的是,InstantSearch 提供了所有前端工具,可以随意自定义搜索环境,因此您只需几行代码即可体验 Meilisearch 的强大功能及其搜索时即时显示功能。最后,我尝试添加一些不错的样式,但这不是我的强项 😅 我提前为视觉设计道歉!

您可以在这里看到结果

Web interface with searchbar and results for the query "Picasso"

解决问题

因此,我找到了一个数据集,将其索引到 Meilisearch 实例中,并为搜索设置了前端。一切都完成了,对吗?不完全是;现在是迭代并使搜索结果感觉良好的时候了。

我很幸运地找到了一个结构化的 JSON 数据集,它可以与 Meilisearch 无缝协作。尽管如此,我还是必须做一些小的更改才能更好地显示结果。由于 Meilisearch 的自动高亮不适用于存储在数组中的查询结果,因此我必须在添加之前将数组值转换为字符串

我还想允许用户按日期对结果进行排序。由于日期字段没有标准格式,我必须检索年份并将其存储在新的 `sortByDate` 字段中。然后出现了另一个问题:Meilisearch 不支持在查询时进行排序(至少目前还不行)!为了规避这个问题并实现此功能,我创建了另外两个索引,其自定义排名规则为 desc(DateToSortBy) 和 asc(DateToSortBy)。每次您在下拉菜单中更改排序选项时,Meilisearch 实际上是在完全不同的索引中进行搜索,但速度如此之快,以至于人眼看不到变化 🤯

您可以在这里看到排序的实际效果

Web interface with the query "Picasso" sorting by ascending and then descending date gif

🧐 您可能已经注意到我说 Meilisearch 尚未支持查询时排序,那是因为它是我们的公共路线图上最受欢迎的功能之一,并且现在正在考虑中 🥳 所以如果您还没有这样做,请查看 Meilisearch 的路线图,并为您最喜欢的功能投票或提交您自己的想法!👉 更新说明:查询时排序已在 Meilisearch v0.22 中发布。

创建此演示最具挑战性的部分是处理一个包含 138,151 个文档的未知数据集,因为大量文档使得很难知道不同字段的可能值和长度。我首先希望用户能够按 `medium` 过滤结果(例如,“照片”或“绘画”)。直到我意识到某些艺术品的 `medium` 字段有很多行!例如这个

"H (卷 IX):正面带有 Kliun 的石版手稿文本的封面;Terent'ev 的 1 幅石版插图;石版手稿文本。L (卷 XIII):封面正面带有 Kirill Zdanevich 的石版插图和手稿设计;石版手稿和打字文本。M (卷 XIV):封面正面带有 Kirill Zdanevich 的石版手稿设计和插图;石版手稿和打字文本。P (卷 XVII):封面正面带有 Goncharova 的石版手稿设计;以及 Mikhail Pustynin 和 Olga Olesha-Suok 的石版手稿文本"

你能想象将此作为刻面过滤器吗?对 UI 非常不友好...

接近完美

制作此演示最简单的部分是设置 Meilisearch。一旦我决定要将哪些属性显示可搜索,其余的就轻而易举了。除了上面提到的突出显示和排序问题外,我最后更改的是属性排名顺序。默认情况下,属性排名顺序是根据索引的第一个文档中属性的出现顺序自动生成的。在我的例子中,第一个属性是 `title`,这意味着在 `title` 字段中具有匹配查询词的艺术品会排在结果列表的首位。这产生了不错的结果,但我很确定我可以做得更好。

我不但要考虑哪些属性对于这个特定数据集最重要;我还要考虑更可能进行哪些类型的查询。如果用户使用标题查询特定的艺术品,他会得到相关的结果,因为使用的词语不太可能在其他许多字段中找到。但是,如果用户查询著名艺术家的姓名,则很可能在艺术品标题中找到该姓名,例如作为致敬。所以我决定将 `artist` 放在可搜索属性列表的顶部。在我进行更改之前,这是在搜索“Van Gogh”时,您会在前几个结果中发现的内容

Information and image of a litograph called "Do You Leave without seeing the 150 Van Gogh's" by Willem Jacob Henri Berend Sandberg

如您所见,它是艺术家 Willem Jacob Henri Berend Sandberg 创作的艺术品,其中标题中出现了“Van Gogh”这个名字,但它不是真正的梵高。

现在,在设置中更改可搜索属性的顺序后,第一个结果确实是 Vincent Van Gogh 创作的艺术品

Information and image of the litograph "The Potato Eaters" by Vincent van Gogh

像这样的简单更改如何影响搜索结果真是令人惊叹。Meilisearch 开箱即用就具有超高的相关性,但它允许您根据您的需求调整结果的相关性,这对于为最终用户提供出色的体验至关重要。

开源博物馆体验

演示源代码可在GitHub 上找到。请随意试用,并向我展示您可以做什么!😁

我们能够访问这个非凡的目录有多酷?感谢 MoMA 的慷慨,您可以在世界任何地方探索博物馆。现在,感谢 Meilisearch,它仅需 50 毫秒即可到达 🚀


照片由 Robert ByeUnsplash 上拍摄

How to add AI-powered search to a React app

如何向 React 应用程序添加 AI 驱动的搜索

使用 Meilisearch 的 AI 驱动搜索构建一个 React 电影搜索和推荐应用程序。

Carolina Ferreira
Carolina Ferreira2024 年 9 月 24 日
Build your Next.js Shopify storefront with Blazity

使用 Blazity 构建您的 Next.js Shopify 店面

学习使用 Next.js 和 Blazity 商务入门工具构建 Shopify 店面。

Laurent Cazanove
Laurent Cazanove2024年8月19日
Meilisearch 1.8

Meilisearch 1.8

Meilisearch 1.8 带来了负关键词搜索、搜索稳健性和 AI 搜索方面的改进,包括新的嵌入器。

Carolina Ferreira
Carolina Ferreira2024年5月7日