文章摘要 FakeGPT
加载中...|
缘由
最近，越来越多的博主都用上了基于 TianliGPT 实现的 AI 摘要，看着挺好玩，但是 TianliGPT 是一个收费的服务，本着白嫖到底的念头（ 毕竟囊中羞涩 ），就想着能不能本地实现一个假的 AI 摘要。
当然，本站目前是基于 VitePress 搭建的，如果你的博客也是基于 VitePress 搭建的，那么你可直接仿照本站的实现方法，若果是其他的建站工具，例如 Hexo、Hugo、Typecho 等，应该也大同小异，只要支持执行 js 代码即可。
实现方法
基础准备
想要实现 AI 摘要，首先你得生成摘要内容，可以自行使用 ChatGPT 或者 讯飞星火 输出文章的摘要，当然，你也可以自行书写。
获取到摘要内容后，将其写入 md 文件的 frontmatter 中，就是三条虚线之间的内容中。
md
---
articleGPT: 这里是文章的摘要内容。
---然后，你需要确保你的建站工具能读取到 md 文件的 frontmatter 内容，由于 VitePress 支持使用 useData() 辅助函数在 <script setup> 中访问当前页面的 frontmatter，例如：
vue
<template>
{{ frontmatter }}
</template>
<script setup>
import { useData } from "vitepress";
const { frontmatter } = useData();
</script>其他建站工具可参考其对应的开发文档来实现读取 frontmatter 的内容。
当然，也可以直接使用 js 的 ID 选择器 来获取文本内容，注意，使用这种方法需要先将对应元素通过 CSS 进行隐藏处理，否则将会出现页面错乱的问题。
代码实现
VitePress 实现
假如你使用的是 VitePress 或 VuePress 等支持 Vue.js 环境的建站工具，那么你可以直接参考下文实现。
- 在你的组件目录中新建一个
ArticleGPT.vue文件，并写入以下代码：
vue
<template>
<div v-if="frontmatter.articleGPT" class="article-gpt">
<div class="title">
<span class="name"> 文章摘要 </span>
<span :class="['logo', { loading }]"> ArticleGPT </span>
</div>
<div class="content s-card">
<span class="text">{{ abstractData === "" ? "加载中..." : abstractData }}</span>
<span v-if="loading" class="point">|</span>
</div>
<div class="meta">
<span class="tip">此内容根据文章生成，并经过人工审核，仅用于文章内容的解释与总结</span>
</div>
</div>
</template>
<script setup>
import { useData } from "vitepress";
import { ref, onMounted, onBeforeUnmount } from "vue";
const { frontmatter } = useData();
// 摘要数据
const loading = ref(true);
const waitTimeOut = ref(null);
const abstractData = ref("");
const showIndex = ref(0);
// 输出摘要
const typeWriter = (text = null) => {
try {
const data = text || frontmatter.value.articleGPT;
if (!data) return false;
if (showIndex.value < data.length) {
abstractData.value += data.charAt(showIndex.value++);
// 生成字符延迟
const delay = Math.random() * (150 - 30) + 30;
setTimeout(() => {
typeWriter(text);
}, delay);
} else {
loading.value = false;
}
} catch (error) {
loading.value = false;
abstractData.value = "摘要生成失败";
console.error("摘要生成失败：", error);
}
};
// 初始化摘要
const initAbstract = () => {
waitTimeOut.value = setTimeout(
() => {
typeWriter();
},
Math.random() * (3800 - 2500) + 2500,
);
};
onMounted(() => {
if (frontmatter.value.articleGPT) initAbstract();
});
onBeforeUnmount(() => {
clearTimeout(waitTimeOut.value);
});
</script>- 然后将这个组件引用至你的通用文章组件中即可。至于具体的样式，可自行实现，本文不再概述。
其他建站工具
如果你使用的是其他建站工具，比如 Hexo 等，同样可以实现。
- 首先，你需要确保你具有以下 DOM 结构：
html
<div class="article-gpt">
<div class="title">
<span class="name"> 文章摘要 </span>
<span class="logo"> ArticleGPT </span>
</div>
<div class="content">
<span id="articleGPT" class="text"> 加载中... </span>
</div>
</div>- 然后将下列代码放置至你的
</body>标签之前：
js
// 获取 frontmatter 数据
// 可使用你的建站工具对应的获取方法或者使用选择器获取
const frontmatter = "请自行实现此处";
// 获取 articleGPT 元素
const articleGPT = document.getElementById("articleGPT");
// 摘要数据索引
let showIndex = 0;
// 输出摘要
const typeWriter = (text = null) => {
try {
const data = text || frontmatter;
if (!data) return false;
if (showIndex < data.length) {
articleGPT.innerHTML += data.charAt(showIndex++);
// 生成字符延迟
const delay = Math.random() * (150 - 30) + 30;
setTimeout(() => {
typeWriter(text);
}, delay);
}
} catch (error) {
articleGPT.innerHTML = "摘要生成失败";
console.error("摘要生成失败：", error);
}
};
// 初始化摘要
const initAbstract = () => {
setTimeout(
() => {
typeWriter();
},
// 此处随机时间可根据需要自行修改
Math.random() * (3800 - 2500) + 2500,
);
};
// 页面加载完毕后执行
window.addEventListener("DOMContentLoaded", () => {
if (frontmatter && articleGPT) initAbstract();
});- 具体的样式，自行实现，此处不再概述。
结尾
具体的示例可参考本文或本站任意一篇文章，当然，这种方法仅限图一乐，建议大家还是根据自身情况，来付费使用 TianliGPT。
0 成本实现 TianliGPT，实现纯本地的 AI 摘要https://blog.imsyy.top/posts/2024/0218
赞赏博主
评论 隐私政策