为文章添加AI摘要

添加AI摘要

本文介绍一种基本通用的方法,为文章添加一个酷炫的 AI 摘要功能 在线体验

准备工作

首先，需要注册MemFire并创建一个应用，随后建立必要的数据表。以下是数据表的示例结构：

summary表的主要功能包括：

• 存储文章与对应的AI生成摘要，避免在内容不变的情况下重复调用AI接口。
• 执行基础判断，以防止API接口被滥用。

后端

https://github.com/TiannV/ai-summary/blob/main/function/index.js

后端逻辑的核心内容包括

• 检测summary表中是否存在文章内容的hash值，若不存在，说明检验失败，直接返回错误；
• 检查summary表中是否已存在对应文章的摘要，存在则直接返回摘要；如果不存在，则调用AI接口生成摘要。

以下是后端代码示例

  const { data, error } = await supabase
    .from('summary')
    .select('hash, summary')
    .eq('hash', hash).single();

  if (error) {
    resp.setStatusCode(403)
    resp.setHeader('Content-Type', 'application/json')
    resp.send(JSON.stringify(error));
    return;
  }

    if (data.summary) {
      resp.send(JSON.stringify(data));
      return;
    }

    const init = {
      body: JSON.stringify({
        "model": process.env.model,
        "messages": [
          {
            "role": "system",
            "content": "你是一个摘要生成工具,你需要解释我发送给你的内容,不要换行,不要超过200字,不要包含链接,只需要简单介绍文章的内容,不需要提出建议和缺少的东西,不要提及用户.请用中文回答,这篇文章讲述了什么?"
          },
          {
            "role": "user",
            "content": body.content
          }
        ],
        "safe_mode": false
      }),
      method: "POST",
      headers: {
        "content-type": "application/json;charset=UTF-8",
        "Authorization": process.env.apiKey,
      },
    };

使用MemFireCloud云函数作为后端地址。
上传index.zip 至 云函数 获得后端地址

环境变量

• apiKey: AI服务的API密钥。
• apiUrl: AI接口的URL地址。
• appKey: MemFireCloud应用的密钥。
• appUrl: MemFireCloud应用的URL地址。
• model: 使用的AI模型。

前端

https://github.com/TiannV/ai-summary/blob/main/summary.js
在文章页面中，通过以下代码集成AI摘要功能

<!-- 可以在网页结构的任何位置插入,只要你能够 -->
<script src="上面的js文件"></script>
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js"></script>

<!-- 但要确保的是,下列代码一定要在上述 js 之后插入 -->
<script data-pjax defer>
  const { createClient } = supabase
  client = createClient(app_url, app_key)

  new ChucklePostAI({
    // 文章内容所在的元素属性的选择器,也是AI挂载的容器,AI将会挂载到该容器的最前面
    el: '#post>#article-container',
	summary_directly: true,
	summary_toggle: false,
	rec_method: 'web',
	pjax: true,
	supabase: client,
	summary_url: summary_url
  })
</script>

app_url,app_key 填写对应应用的信息，summary_url填写上面云函数的地址

仓库地址

项目的完整代码和文档可以在GitHub仓库中找到。
项目仓库中已实现了gitbook对应的插件

参考

给博客添加一个AI摘要