修改anzhiyu主题的TianliGPT插件为其他大模型API

RisingIce2024-03-05

一、前言

最近刚好白嫖到了DeepSeek 的大模型API，就想着给自己的博客加上AI文章摘要的功能，但原本我博客用的anzhiyu主题集成的是TianliGPT的接口，并且只能使用他们家的接口，这就有点难受，所以扒了一下主题的源代码，发现有可以改的地方，故出此教程记录一下这个修改的过程

二、修改步骤

准备工作：

能用的大模型API并且知道该API的调用方法及参数（必备）
anzhiyu主题为本地部署的（即你的主题文件位于blog项目的theme目录下，而不是npm安装的方式）

2.1 开启AI摘要功能

修改博客目录下_config_anzhiyu.yml 文件中post_head_ai_description的内容

例子：

post_head_ai_description:
  enable: true  
  gptName: AnZhiYu
  mode: tianli # 默认模式 可选值: tianli/local
  switchBtn: false # 可以配置是否显示切换按钮 以切换tianli/local
  btnLink: https://afdian.net/item/886a79d4db6711eda42a52540025c377
  randomNum: 3 # 按钮最大的随机次数，也就是一篇文章最大随机出来几种
  basicWordCount: 1000 # 最低获取字符数, 最小1000, 最大1999
  key: 
  Referer:

mode修改为tianli
key修改为你自己的大模型API的密钥
Referer修改为你自己的大模型API的请求地址

Ps：Key和Referer每家的大模型都不太相同，自行查阅官方的接口文档

2.2 修改大模型请求脚本

修改主题目录下themes/anzhiyu/source/js/anzhiyu/的ai_abstract.js文件

主要修改的地方有以下几点：

修改async function readAloud()函数，主要是注释掉了判断tianliGPT是否可用的请求代码，例子：

async function readAloud() {
    if (!summaryID) {
      anzhiyu.snackbarShow("摘要还没加载完呢，请稍后。。。");
      return;
    }
    aiReadAloudIcon = post_ai.querySelector(".anzhiyu-icon-circle-dot");
    aiReadAloudIcon.style.opacity = "0.2";
    if (audio && !isPaused) {
      audio.pause();
      isPaused = true;
      aiReadAloudIcon.style.opacity = "1";
      aiReadAloudIcon.style.animation = "";
      aiReadAloudIcon.style.cssText = "animation: ''; opacity: 1;cursor: pointer;";
      return;
    }

    if (audio && isPaused) {
      audio.play();
      isPaused = false;
      aiReadAloudIcon.style.cssText = "animation: breathe .5s linear infinite; opacity: 0.2;cursor: pointer";
      return;
    }
    // const options = {
    //   key: AIKey,
    //   Referer: AIReferer,
    // };
    // const requestParams = new URLSearchParams({
    //   key: options.key,
    //   id: summaryID,
    // });

    // const requestOptions = {
    //   method: "GET",
    //   headers: {
    //     "Content-Type": "application/json",
    //     Referer: options.Referer,
    //   },
    // };

    // try {
    //   const response = await fetch(`https://summary.tianli0.top/audio?${requestParams}`, requestOptions);
    //   if (response.status === 403) {
    //     console.error("403 refer与key不匹配。");
    //   } else if (response.status === 500) {
    //     console.error("500 系统内部错误");
    //   } else {
    //     const audioBlob = await response.blob();
    //     const audioURL = URL.createObjectURL(audioBlob);
    //     audio = new Audio(audioURL);
    //     audio.play();
    //     aiReadAloudIcon.style.cssText = "animation: breathe .5s linear infinite; opacity: 0.2;cursor: pointer";
    //     audio.addEventListener("ended", () => {
    //       audio = null;
    //       aiReadAloudIcon.style.opacity = "1";
    //       aiReadAloudIcon.style.animation = "";
    //     });
    //   }
    // }
    //  catch (error) {
    //   console.error("请求发生错误❎");
    // }
  }

此处要修改文章摘要请求的大模型API的方式，这里以DeepSeek api为例：

DeepSeek的api的Request只要求messages与model字段是Required，所以找到async function aiAbstractTianli(num)函数，修改requestBody，关闭api的流式输出，即stream=false，此处的大模型Prompt可自由发挥，如图：
DeepSeek的api要求在请求标头加入Authentication字段来验证key，格式：bearer + xxxxxxxx(key)，找到async function aiAbstractTianli(num)函数，修改requestOptions中的headers字段，如图：