feat: add SummaryAI.vue

Author: laplacetw

.vitepress/theme/ThemeLayout.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { useData } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
+import themeConfig from './config'
 import Home from './components/Home.vue'
 import PostHeader from './components/PostHeader.vue'
 import PostFooter from './components/PostFooter.vue'
 import Comments from './components/Comments.vue'
+import SummaryAI from './components/SummaryAI.vue'
 
 const { page } = useData()
 const { Layout } = DefaultTheme
@@ -17,6 +19,7 @@ const { Layout } = DefaultTheme
     </template>
     <template #doc-before>
       <PostHeader />
+      <SummaryAI v-show='themeConfig.cloudflareApi'/>
     </template>
     <template #doc-after>
       <PostFooter />

.vitepress/theme/components/SummaryAI.vue

@@ -0,0 +1,68 @@
+<script setup lang='ts'>
+import { ref } from 'vue'
+import themeConfig from '../config'
+
+const summary = ref('')
+const loading = ref(false)
+
+async function summarizer(input: object) {
+  const response = await fetch(
+    themeConfig.cloudflareApi,
+    {
+      headers: {'Content-Type':'application/json'},
+      method: 'POST',
+      body: JSON.stringify(input)
+    }
+  );
+  const result = await response.json()
+  return result
+}
+
+function htmlFilter(html: HTMLElement) {
+  // clone for editing
+  const tempElement = html.cloneNode(true) as HTMLElement;
+  // remove class language-* elements
+  const langElements = tempElement.querySelectorAll("[class^='language-']")
+  langElements.forEach(el => el.parentNode?.removeChild(el))
+  
+  // remove class footnotes elements
+  const footnotes = tempElement.querySelectorAll('.footnotes')
+  footnotes.forEach(el => el.parentNode?.removeChild(el))
+
+  // remove class footnote elements
+  const footnote = tempElement.querySelectorAll('.footnote')
+  footnote.forEach(el => el.parentNode?.removeChild(el))
+  
+  return tempElement.innerText
+}
+
+function run(){
+  const articleElement = document.querySelector('.vp-doc') as HTMLElement;
+  if (!articleElement) return
+  
+  loading.value = true
+  const articleText = htmlFilter(articleElement)
+  summarizer({message: articleText}).then((res) => {
+    summary.value = '🤖 AI Summary : ' + res['response']['result']['response']
+    loading.value = false
+  })
+}
+</script>
+
+<template>
+  <div class='theme-summary'>
+    <button v-if='!summary' @click='run' class='theme-summary-button' :disabled='loading'>
+      <template v-if='loading'>
+        <span class='inline-flex space-x-2 ml-1 h-4 items-end'>
+          <span class='theme-summary-dot animate-bounce [animation-delay:-0.3s]'></span>
+          <span class='theme-summary-dot animate-bounce [animation-delay:-0.15s]'></span>
+          <span class='theme-summary-dot animate-bounce'></span>
+        </span>
+      </template>
+      <template v-else>
+        🤖 AI Summary
+      </template>
+    </button>
+    <p v-else>{{ summary }}</p>
+  </div>
+</template>

.vitepress/theme/config.ts

@@ -58,7 +58,8 @@ const themeConfig = {
     issueTerm: 'title',
     light: 'github-light',
     dark: 'gruvbox-dark'
-  }
+  },
+  cloudflareApi: ''
 }
 
 export default themeConfig

.vitepress/theme/style.css

@@ -24,6 +24,19 @@
   rounded-md ring-1 ring-cyan-500 animate-pulse;
 }
 
+.theme-summary {
+  @apply border-2 border-dashed border-gray-400 dark:border-gray-600 
+  p-4 min-h-[120px] flex items-center justify-center text-gray-700 dark:text-gray-300;
+}
+
+.theme-summary-button {
+  @apply bg-yellow-500 text-black text-black font-bold py-2 px-4 rounded-lg;
+}
+
+.theme-summary-dot {
+  @apply w-2 h-2 bg-current rounded-full
+}
+
 .theme-pagination {
   @apply flex items-center justify-center px-3 h-8 leading-tight cursor-pointer
   text-cyan-700 border border-gray-300 sm:hover:bg-gray-300 sm:hover:text-cyan-500 

CHANGELOG.md

@@ -1,3 +1,8 @@
+# 2025-04-15
+
+### Features
+- add SummaryAI.vue
+
 # 2025-02-22
 
 ### Features

README.md

@@ -21,25 +21,85 @@ If there has any problem please feel free to create issue.
 Detailed changes are documented in the [CHANGELOG](./CHANGELOG.md).
 
 ## Features
-- create new post with CLI
-- add JSON-LD for SEO on post pages
-- style with Tailwind CSS (RWD)
-- style for light / dark mode
-- pagination with History API
-- [built-in sitemap generation](https://vitepress.dev/guide/sitemap-generation#sitemap-generation)
-- common use config integration
-- [utterances](https://utteranc.es) for blog comments
-- sync light / dark mode for utterances
-- [MathJax style optimization for mobile](https://github.com/vuejs/vitepress/issues/3914#issuecomment-2138527325)
-- prev / next links without fontmatter setting
-- support footnote by [markdown-it-footnote](https://github.com/markdown-it/markdown-it-footnote)
+- 🖋️ **Generate new posts via CLI** – Scaffold articles instantly with a single command
+- 🤖 **AI-powered summary** – Real-time article overview powered by AI
+- 📈 **SEO-ready with JSON-LD** – Auto-injected schema data on every post page
+- 🎨 **Style with Tailwind CSS** – Responsive design that looks great in both light/dark mode
+- 📚 **Pagination powered by History API** – Smooth navigation between post lists
+- 🗺️ [**Automatic sitemap generation**](https://vitepress.dev/guide/sitemap-generation#sitemap-generation) – Boost your site's visibility in search engines
+- 🧩 **Modular config integration** – Centralized control for site and theme settings
+- 💬 [**Utterances for comments**](https://utteranc.es) – GitHub-powered commenting system
+- 🔄 **Theme-aware Utterances** – Auto-sync comment box with light/dark mode
+- 📐 [**Optimized MathJax rendering**](https://github.com/vuejs/vitepress/issues/3914#issuecomment-2138527325) – Clean, responsive math formulas on mobile
+- ⏭️ **Prev/Next post links** – Auto-generated without extra frontmatter
+- 🦶 **Footnote support** – Powered by [markdown-it-footnote](https://github.com/markdown-it/markdown-it-footnote) for scholarly notes
 
 ## Prerequisite
 - [Node.js](https://nodejs.org) version 18 or higher.
 
 ## Usage
 - Clone the project.
 - Edit [theme config](/.vitepress/theme/config.ts) and [public files](/public/) for custom.
+- To enable the AI-powered realtime summary, you need to sign up for [Cloudflare](https://www.cloudflare.com), create your own AI Worker (free), and configure the Worker API in the theme config.
+```
+# worker.js
+const corsHeaders = {
+  'Access-Control-Allow-Origin': 'YOUR_HOST',
+  'Access-Control-Allow-Methods': 'POST, OPTIONS',
+  'Access-Control-Allow-Headers': 'Content-Type',
+  'Content-Type': 'application/json'
+};
+
+const sendErrorResponse = (message, status = 500) => {
+  return new Response(JSON.stringify({ error: message }), {
+    status,
+    headers: corsHeaders
+  });
+};
+
+export default {
+  async fetch(request, env) {
+    if (request.method === 'OPTIONS') {
+      return new Response(null, { headers: corsHeaders });
+    }
+
+    if (request.method !== 'POST') {
+      return sendErrorResponse('Only POST requests are allowed', 405);
+    }
+
+    try {
+      const { message } = await request.json();
+      if (!message) {
+        return sendErrorResponse('Missing message in request body', 400);
+      }
+      const model = '@cf/meta/llama-3.1-8b-instruct';
+      const userID = 'YOUR_USER_ID';
+      const gateway = `https://gateway.ai.cloudflare.com/v1/${userID}/ai-gateway/workers-ai/${model}`;
+      const prompt = `You are a professional summarization assistant. Based on the content I provide, generate a summary no longer than 60 characters, and return only the summary—no additional text: ${message}`;
+      const apiResponse = await fetch(
+        gateway,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `${env.key}`
+          },
+          body: JSON.stringify({'prompt': prompt})
+        }
+      );
+
+      if (!apiResponse.ok) {
+        throw new Error(`Cloudflare Workers AI error: ${apiResponse.statusText}`);
+      }
+
+      const response = await apiResponse.json();
+      return new Response(JSON.stringify({ response }), { headers: corsHeaders });
+    } catch (error) {
+      return sendErrorResponse(error.message);
+    }
+  }
+};
+```
 - Launch terminal and execute commands as follows :
 ```shell
 # install devDependencies

README_CH.md

@@ -20,25 +20,85 @@
 有關更新的細節都紀錄在 [CHANGELOG](./CHANGELOG.md)。
 
 ## 主題特色
-- 透過終端機指令建立新文章
-- 文章頁面使用 JSON-LD 改進 SEO
-- Tailwind CSS (響應式)
-- 淺色 / 深色主題切換
-- 文章列表分頁使用 History API
-- [內建網站地圖(sitemap)生成](https://vitepress.dev/guide/sitemap-generation#sitemap-generation)
-- 整合常用網站 / 主題設定
-- 使用 [utterances](https://utteranc.es) 留言系統
-- utterances 同步切換淺色 / 深色主題
-- [針對行動裝置瀏覽改善 MathJax 樣式](https://github.com/vuejs/vitepress/issues/3914#issuecomment-2138527325)
-- 自動產生上一篇 / 下一篇連結(無需手動設定)
-- 整合 [markdown-it-footnote](https://github.com/markdown-it/markdown-it-footnote) 腳註支援
+- 🖋️ 使用 CLI 快速建立新文章 – 一行指令即可生成文章模板  
+- 🤖 AI 即時摘要 – 即時生成文章重點摘要，讓讀者快速掌握內容
+- 📈 SEO 強化（支援 JSON-LD）– 自動在每篇文章注入結構化資料  
+- 🎨 採用 Tailwind CSS 設計 – 響應式頁面，支援明暗主題切換 
+- 📚 分頁功能（使用 History API）– 流暢切換文章列表，無需重新載入  
+- 🗺️ [自動生成 Sitemap](https://vitepress.dev/guide/sitemap-generation#sitemap-generation) – 提升部落格在搜尋引擎中的能見度
+- 🧩 模組化設定整合 – 將框架與主題設定集中管理，易於維護與擴充
+- 💬 [Utterances 留言系統](https://utteranc.es) – 基於 GitHub Issues 的輕量化留言功能
+- 🔄 留言區主題同步 – Utterances 會自動配合網站明暗模式切換
+- 📐 [針對行動裝置瀏覽改善 MathJax 樣式]((https://github.com/vuejs/vitepress/issues/3914#issuecomment-2138527325)) – 易讀的數學公式呈現
+- ⏭️ 上/下一篇自動連結 – 無需額外設定 frontmatter
+- 🦶 支援腳註 – 使用 [markdown-it-footnote](https://github.com/markdown-it/markdown-it-footnote) 呈現專業註解說明  
 
 ## 先決條件
 - [Node.js](https://nodejs.org) 版本最低需求為 18.0.0
 
 ## 如何使用
 - 複製或下載本主題
 - 根據個人需求編輯 [theme config](/.vitepress/theme/config.ts) 和 [public 資料夾](/public/)中的檔案
+- 若要啟用AI即時摘要，必須註冊[Cloudflare](https://www.cloudflare.com)並建立你的AI Worker (提供免費額度)，再將Worker API填入主題設定
+```
+# worker.js
+const corsHeaders = {
+  'Access-Control-Allow-Origin': 'YOUR_HOST',
+  'Access-Control-Allow-Methods': 'POST, OPTIONS',
+  'Access-Control-Allow-Headers': 'Content-Type',
+  'Content-Type': 'application/json'
+};
+
+const sendErrorResponse = (message, status = 500) => {
+  return new Response(JSON.stringify({ error: message }), {
+    status,
+    headers: corsHeaders
+  });
+};
+
+export default {
+  async fetch(request, env) {
+    if (request.method === 'OPTIONS') {
+      return new Response(null, { headers: corsHeaders });
+    }
+
+    if (request.method !== 'POST') {
+      return sendErrorResponse('Only POST requests are allowed', 405);
+    }
+
+    try {
+      const { message } = await request.json();
+      if (!message) {
+        return sendErrorResponse('Missing message in request body', 400);
+      }
+      const model = '@cf/meta/llama-3.1-8b-instruct';
+      const userID = 'YOUR_USER_ID';
+      const gateway = `https://gateway.ai.cloudflare.com/v1/${userID}/ai-gateway/workers-ai/${model}`;
+      const prompt = `你是一個專業的摘要助手，請根據我提供的內容，生成不超過60字的繁體中文摘要，並且只回傳摘要，不得包含其他內容: ${message}`;
+      const apiResponse = await fetch(
+        gateway,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `${env.key}`
+          },
+          body: JSON.stringify({'prompt': prompt})
+        }
+      );
+
+      if (!apiResponse.ok) {
+        throw new Error(`Cloudflare Workers AI error: ${apiResponse.statusText}`);
+      }
+
+      const response = await apiResponse.json();
+      return new Response(JSON.stringify({ response }), { headers: corsHeaders });
+    } catch (error) {
+      return sendErrorResponse(error.message);
+    }
+  }
+};
+```
 - 啟動終端機執行以下指令 :
 ```shell
 # 安裝依賴套件