From c8ce8de1d9b36899e19ca16c9095f1c2ff19d893 Mon Sep 17 00:00:00 2001
From: mayx
Date: Tue, 1 Oct 2024 10:12:03 +0000
Subject: Update 3 files

- /js/main.js
- /_posts/2024-10-01-suggest.md
- /_posts/2024-09-27-rag.md---
 _posts/2024-09-27-rag.md     |  2 +-
 _posts/2024-10-01-suggest.md | 81 ++++++++++++++++++++++++++++++++++++++++++++
 js/main.js                   |  2 +-
 3 files changed, 83 insertions(+), 2 deletions(-)
 create mode 100644 _posts/2024-10-01-suggest.md

diff --git a/_posts/2024-09-27-rag.md b/_posts/2024-09-27-rag.md
index 6d3830c..47d880d 100644
--- a/_posts/2024-09-27-rag.md
+++ b/_posts/2024-09-27-rag.md
@@ -329,7 +329,7 @@ export default {
   为了避免重复生成向量（主要是不知道它这个数据库怎么根据id进行查询），所以在D1数据库里新加了一个数字类型的字段“is_vec”，另外就是创建向量数据库，创建方法看官方文档吧，如果不想用那个命令行工具可以看[API文档](https://developers.cloudflare.com/api/operations/vectorize-create-vectorize-index)。因为那个嵌入模型生成的维度是768，所以创建这个数据库的时候维度也是768。度量算法反正推荐的是cosine，其他的没试过不知道效果怎么样。最终如果想用我的代码，需要在Worker的设置页面中把绑定的向量数据库变量设置成“mayx_index”，如果想用其他的可以自己修改代码。   
 
 # 其他想法
-  其实我也想加推荐文章和智能搜索的，但就是因为没有中文嵌入模型要翻译太费时间😅，所以就算啦，至于其他的功能回头看看还有什么AI可以干的有趣功能吧。   
+  其实我也想加 ~~推荐文章~~ （在2024.10.01[已经做出来了](/2024/10/01/suggest.html)）和智能搜索的，但就是因为没有中文嵌入模型要翻译太费时间😅，所以就算啦，至于其他的功能回头看看还有什么AI可以干的有趣功能吧。   
 
 # 感想
   Cloudflare实在是太强了，什么都能免费，这个RAG功能其他家都是拿出去卖的，他们居然免费！唯一可惜的就是仅此一家，免费中的垄断地位了，希望Cloudflare能不忘初心，不要倒闭或者变质了🤣。
\ No newline at end of file
diff --git a/_posts/2024-10-01-suggest.md b/_posts/2024-10-01-suggest.md
new file mode 100644
index 0000000..14c3bb2
--- /dev/null
+++ b/_posts/2024-10-01-suggest.md
@@ -0,0 +1,81 @@
+---
+layout: post
+title: 如何给博客添加相似文章推荐功能
+tags: [Cloudflare, Workers, Vectorize, 博客]
+---
+
+  看来向量数据库的作用有很多啊……<!--more-->    
+
+# 起因
+  前几天我[用Cloudflare Vectorize给博客的聊天机器人加了知识库的功能](/2024/09/27/rag.html)，本来想着用向量数据库做文章推荐是不是每次都要走翻译+向量化的操作，不过后来我又仔细看了一下Cloudflare的官方文档，发现它是[可以根据ID查询存储的向量](https://developers.cloudflare.com/vectorize/reference/client-api/#get-vectors-by-id)的，既然这样的话用现有的数据库做一个相似文章推荐应该非常简单，于是我就做了一个试试看。   
+
+# 制作过程
+## 后端部分
+  其实流程很简单，就是把对应ID的向量查出来之后拿着这个向量再去查询就好了，唯一需要注意的就是它查出来的第一条肯定是自己，所以只要把第一条删掉就行，代码也非常简单：   
+```javascript
+if (url.pathname.startsWith("/suggest")) {
+  let resp = [];
+  let result = await env.mayx_index.getByIds([
+    query
+  ]);
+  if (result.length) {
+    resp = await env.mayx_index.query(result[0].values, { topK: 6 });
+    resp = resp.matches;
+    resp.splice(0, 1);
+  }
+  resp = resp.map(respObj => {
+    respObj.id = encodeURI(respObj.id);
+    return respObj;
+  });
+  return Response.json(resp, {
+    headers: commonHeader
+  });
+}
+```
+## 前端部分
+  后端当然很简单，但是我之前有些欠考虑了，我当时做[AI摘要](/2024/07/03/ai-summary.html)和[知识库](/2024/09/27/rag.html)的时候，都只存了文章的链接，没有存标题😅……但是推荐文章的超链接总不能不放标题吧……那怎么办呢？一种就是我把数据库清空然后摘要中加一个字段，向量数据库中加一个元数据，这样查询的时候就能查到标题然后显示出来了。不过这种方法我仔细考虑了一下，麻烦是一方面，另一方面是我的接口没做验证，有人乱上传文章会影响推荐链接显示的内容，不太合适……那应该用什么办法呢？   
+  我还想到一个办法，我之前[给博客做过全文搜索的功能](/2021/07/23/search.html)，用这个JS关联查询就能查到标题，而且查不到的内容也显示不出来，这样就能避免有人故意乱上传导致显示奇怪的内容了，不过之前的设计是每次查询都要加载一次包含我文章内容的JSON文件，感觉不太合理，虽然那个文件不算特别大，但是也挺影响速度的，所以我想了一下还是用localStorage缓存一下比较好，所以增加了一个能缓存获取搜索JSON的函数：   
+```javascript
+function getSearchJSON(callback) {
+  var searchData = JSON.parse(localStorage.getItem(lastUpdated));
+  if (!searchData) {
+    localStorage.clear();
+    $.getJSON("/search.json", function (data) {
+        localStorage.setItem(lastUpdated, JSON.stringify(data));
+        callback(data);
+    });
+  } else {
+    callback(searchData);
+  }
+}
+```
+  做好这个之后就可以做文章推荐的功能了，不过文章推荐应不应该加载完页面就加载呢？其实我测了一下Vectorize数据库的查询速度，不算很慢，但还是需要时间，另外免费版我看了下额度是每月3000万个查询的向量维度，这个其实我没看太懂😂。另外Cloudflare不知道为什么没有展示免费版剩余的额度，而且它是按月计算的，导致我不敢乱用这个查询。所以我想了一下还是给个按钮来调用吧。最终调用的函数如下：   
+```javascript
+function getSuggestBlog(blogurl) {
+    var suggest = $("#suggest-container")[0];
+    suggest.innerHTML = "Loading...";
+    $.get(BlogAPI + "/suggest?id=" + blogurl, function (data) {
+        if (data.length) {
+            getSearchJSON(function (search) {
+                suggest.innerHTML = '<b>推荐文章</b><hr style="margin: 0 0 5px"/>';
+                const searchMap = new Map(search.map(item => [item.url, item]));
+                const merged = data.map(suggestObj => {
+                    const searchObj = searchMap.get(suggestObj.id);
+                    return searchObj ? { ...searchObj } : null;
+                });
+                merged.forEach(element => {
+                    if (element) {
+                        suggest.innerHTML += "<a href=" + element.url + ">" + element.title + "</a> - " + element.date + "<br />";
+                    }
+                });
+            });
+        } else {
+            suggest.innerHTML = "暂无推荐文章……";
+        }
+    });
+}
+```
+
+# 感想
+  看来向量数据库的用途还是挺广泛的，不仅仅是为了给AI使用，说不定还能做更多有意思的功能，这下不得不更依赖Cloudflare了😆。   
+  另外随着做了越来越多的功能，做新的功能还能用上旧的功能，感觉这样我的博客可以有不少发展的空间啊😁。   
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index 4a15c46..00ca4e0 100644
--- a/js/main.js
+++ b/js/main.js
@@ -46,7 +46,7 @@ function getSuggestBlog(blogurl) {
     var suggest = $("#suggest-container")[0];
     suggest.innerHTML = "Loading...";
     $.get(BlogAPI + "/suggest?id=" + blogurl, function (data) {
-        if (data) {
+        if (data.length) {
             getSearchJSON(function (search) {
                 suggest.innerHTML = '<b>推荐文章</b><hr style="margin: 0 0 5px"/>';
                 const searchMap = new Map(search.map(item => [item.url, item]));
-- 
cgit 1.4.1-2-gfad0