feat: 搜索功能集成调研

rxliuli commented 1 year ago

动机

还是希望为网站添加搜索功能，目前当然可以下载 epub 再搜索，但如果在线就能搜索当然是更好的。

需求

支持中文
支持 vuepress 集成
免费
有可能的话最好存在服务端以便做高级优化

调研

algolia-docsearch: 免费层 10k records 不够用，有付费计划比较贵（$1/10k+M），而且需要付费会让事情变得很麻烦
@vuepress/plugin-search@next: 官方搜索插件，只索引标题，几乎没什么用处
vuepress-plugin-full-text-search2: 目前样式上存在 bug，没有找到简单的解决方法

algolia-docsearch

algolia-docsearch 的服务可以为网站添加搜索功能，支持中文和 vuepress,主要问题是需要付费，因为文本量实在太大，默认 10k record 的免费层不够用。

github actions: https://github.com/marketplace/actions/algolia-docsearch-indexer
一个开源的 vuepress 的配置: https://github.com/algolia/docsearch-configs/blob/9f1cd561c04c69e5e0c91e317a6b1f2a91ac1d1d/configs/waline.json
vuepress 配置：https://v2.vuepress.vuejs.org/zh/reference/plugin/docsearch.html#%E8%8E%B7%E5%8F%96%E6%90%9C%E7%B4%A2%E7%B4%A2%E5%BC%95

vuepress-plugin-full-text-search2

参考：docusaurus-search-local 似乎已经有一个不错的替代品：https://github.com/ota-meshi/vuepress-plugin-full-text-search2/issues/30#issuecomment-1250035901

vuepress 官方有一个搜索标题的插件 @vuepress/plugin-search，但其实我们希望的是全文搜索，为了避免额外的维护成本，也不希望使用后端服务。lunr 是一个支持多语言搜索的搜索引擎，非常适合嵌入到网站上。

实现

[ ] 调研 lunr.js 本地搜索，需要支持中文搜索
[ ] 调研如何集成到 vuepress 中
[ ] 发布为单独的 npm 包

相关资源

http://lunrjs.com/
https://github.com/MihaiValentin/lunr-languages
https://github.com/nextapps-de/flexsearch: 基于内存的搜索引擎 -- 需要调研是否可以将索引序列化及反序列化 -- 确认支持，ref: https://github.com/nextapps-de/flexsearch#export--import
https://github.com/yanyiwu/nodejieba: 中文分词
向网站添加搜索引擎：https://medium.com/dev-channel/how-to-add-full-text-search-to-your-website-4e9c80ce2bf4

andylizi commented 1 year ago

只用前端实现全文搜索感觉不太现实。

后端的话就好办太多了。Cloudflare Workers 免费版每天有十万次请求额度，也就是每分钟60次。我感觉对于我们的网站来说，在可以预见的未来内，是绰绰有余了。

rxliuli commented 1 year ago

只用前端实现全文搜索感觉不太现实。

后端的话就好办太多了。Cloudflare Workers 免费版每天有十万次请求额度，也就是每分钟60次。我感觉对于我们的网站来说，在可以预见的未来内，是绰绰有余了。

吾辈考虑过 cloudflare workers，但不确定是否有什么现有的工具可以做到这点，也不确定在受限制的 vm 中（每个请求的 CPU 时间有限制）是否可以做这种感觉上是 CPU 密集型的操作

andylizi commented 1 year ago

唔，像正经搜索引擎那种级别的全文搜索的话肯定是不够用的，但我们肯定不需要做到那个级别的自然语言处理。我感觉讨论这个问题首先得明确我们的需求。我看了一下目前我们的文本量大约有4MB（UTF-8），那么：

第1级：haystack.contains("needle") 这种的话，10ms的时间是肯定足够的。虽然功能比较有限，但我感觉已经可以胜任大多数的简单搜索需求
第2级：用户手动进行分词，然后将关键词分开来提交服务器，返回所有关键词在相近位置出现的结果。应该也做得到。似乎Google Book 的网页版阅读器就是这个搜索算法，不过人家英文分词是幼儿园难度……
第2.5级：自动分词有没有可能在前端进行呢？这个据我所知难度还是不小，尤其是如果需要字典的话那体积……搞不好还不如在前端搜索
第3级：自动匹配近义词？英文的话我知道可以搜同一个词的不同变形（这对英文是极其关键的需求，但中文……）
更多：在这之上的话，我见识有限，想不出来全文搜索还能做到怎样的程度了XD

andylizi commented 1 year ago

其实与其搜索文本，我倒是有一个能大幅改善查资料的体验的想法。TTS每一章不是由多个POV“部分”构成的嘛，我们能不能把每一部分给人工标记一下，注明POV角色以及大致发生了什么。有点像这种形式。这样的话如果一个人对TTS的剧情已经有一定印象，但是想要找到某一情节具体是在哪里发生的（这其实就是我100%的搜索TTS的场景），有了这个索引就可以在短时间内肉眼定位，不需要凭借着模糊记得的关键词和章节去尝试搜索了。

rxliuli commented 1 year ago

一个基本的设计思路，不过可能要晚点实现了。里面涉及到很多第三方的 API，像是 github actions/github app/cf-worker/cf-kv 之类的

rxliuli commented 1 year ago

做了一些基本的测试，确定了纯服务端搜索是不可能的，所以打算仍然使用客户端搜索，目前已知的信息

从载入索引文件解析到搜索需要花费 61ms，这在 cf workers 中是不可行的，而且分词仍然必须在客户端完成，幸运的是 jieba-wasm 支持网页端使用
目前仅检索 markdown 的索引文件大约为 2M（HTML 更复杂一些，但应该不会膨胀太多），所以看起来下载到客户端内存中问题也不是很大。事实上，吾辈的 blog 就是这样做的（hexo-generator-search）

index

data.zip

rxliuli commented 1 year ago

事实证明，这比吾辈想象中更加复杂，文档网站没有如此大量的文本所有可以实现客户端搜索，但对于小说的文本量而言，这似乎是不可接受的。

pages meta data: 5.66M index data: 7.08M

正常压缩之后大约一共 5.1M，吾辈的 blog 网站的 index 文件也不过 800k+ 而已。。。

测试代码均在：https://github.com/liuli-moe/to-the-stars/tree/feat-search/.vuepress/plugins/vuepress-plugin-flexsearch

将两个 json 发布到了 github pages，一些基本的加载时间测试