🔗 AI 網址摘要器 (AI URL Summarizer)

本專案為一個純前端 (Client-side only) 的智慧網址內容抓取與 AI 摘要工具。使用者輸入網址後，應用程式會在瀏覽器中透過跨域 Proxy 抓取網頁原始內容，進行解析處理後，直接於瀏覽器呼叫 Gemini API 生成結構化的內容摘要。

---

🚀 功能說明（支援的 5 大平台與網頁類型）

本工具針對不同類型的網址進行了深度最佳化，目前支援以下五種平台與內容格式：

1. 一般部落格 / 新聞 / 文章

   • 抓取機制：透過 AllOrigins 跨域 Proxy 抓取 HTML，並以 DOMParser 解析 DOM。
   • 處理重點：自動過濾並移除 <script>、<style>、<nav>、<footer> 等雜訊，優先提取 <article>、<main> 或主要的段落文字。

2. GitHub Repository 首頁

   • 識別規則：匹配 github.com/{user}/{repo}。
   • 抓取機制：自動分析專案結構，直接抓取 raw.githubusercontent.com 上的 README.md，速度極快且免透過 Proxy。

3. GitHub Raw Code / File 文件

   • 識別規則：匹配 github.com/{user}/{repo}/blob/... 等程式碼或文件網址。
   • 抓取機制：自動將該 blob 網址轉置為 raw 網址以抓取純文字或原始程式碼內容。

4. GitHub Issue / PR 討論頁面

   • 識別規則：匹配 github.com/{user}/{repo}/issues/... 或 /pull/...。
   • 抓取機制：透過 Proxy 抓取 HTML 頁面，提取該議題的主題標題、描述內文以及完整的社群討論歷程。

5. YouTube 影片頁面與其他技術文件

   • 識別規則：一般網頁域名或 YouTube 影片網址。
   • 抓取機制：抓取影片基本資訊、標題與詳細描述，進行主要內容的大綱與主題分析。

---

📖 使用方式（3 步驟說明）

步驟 1：設定您的 Gemini API 金鑰

在首頁的 API 設定區域中，輸入您的 Gemini API 金鑰（API Key）。

• 為了保障您的隱私與安全性，此金鑰會儲存於您的本地瀏覽器 (localStorage)，絕對不會上傳到任何第三方伺服器。
• 您可以點擊「👁️」圖示來切換顯示或隱藏金鑰。

(註：請在此處替換為您的實際步驟截圖)

---

步驟 2：貼上網址並調整摘要設定

在輸入框中貼上您想要進行摘要的網頁 URL，並在下方調整您的偏好設定：

• 輸出語言：預設為繁體中文，亦支援英文等其他語言。
• 摘要長度：可選擇「精簡 (Brief)」、「標準 (Standard)」或「詳細 (Detailed)」。
• 若網頁無法直接抓取（如有嚴格的防火牆），您可以切換至「貼上內文摘要」模式，手動將網頁內文複製貼上。

(註：請在此處替換為您的實際步驟截圖)

---

步驟 3：點擊摘要並查看結果

點擊「🚀 抓取內容並生成 AI 摘要」按鈕，系統會即時顯示處理進度（解析、抓取、清理、AI 推理）。

• 摘要完成後，會顯示該網頁的標題、網站類型與字數統計。
• 摘要結果包含：一句話總結、核心重點條列、詳細內文摘要、以及關鍵字標籤。
• 您可以一鍵複製摘要內容，或是將其下載為 Markdown 檔案。

(註：請在此處替換為您的實際步驟截圖)

---

🔑 申請 Gemini API Key 步驟

若您尚未擁有 Gemini API Key，請按照以下步驟進行免費申請：

1. 前往 Google AI Studio： 開啟瀏覽器並造訪 Google AI Studio 官方網站 (https://aistudio.google.com/)。
2. 登入 Google 帳號： 使用您的 Google 帳戶登入平台。
3. 建立 API 金鑰：
   • 點擊左上角或導覽列中的 "Get API key" 按鈕。
   • 點擊 "Create API key"。
   • 選擇一個現有的 Google Cloud 專案，或建立一個新專案來生成金鑰。
4. 複製並儲存：
   • 複製生成的 API Key（格式通常為 AIzaSy... 開頭）。
   • 請妥善保管您的金鑰，切勿將其公開提交至 GitHub 等公開代碼庫中。

---

🚢 部署到 GitHub Pages 步驟

本專案為純前端 Vite 專案，已設定為相對路徑建置，非常適合託管於 GitHub Pages。請遵循以下步驟進行部署：

方法一：使用 gh-pages 套件自動部署（推薦）

1. 安裝 gh-pages 開發依賴：

   npm install -D gh-pages

2. 設定 package.json 腳本： 在您的 package.json 中的 "scripts" 區塊，新增以下兩個指令（記得將 <username> 替換為您的 GitHub 帳號，<repo-name> 替換為專案名稱）：

   "predeploy": "npm run build",
   "deploy": "gh-pages -d dist"

3. 一鍵部署： 在終端機中執行以下指令，系統會自動編譯專案並將 dist 資料夾推送到您的 GitHub Repository 的 gh-pages 分支：

   npm run deploy

4. 啟用 GitHub Pages：

   • 前往您的 GitHub Repository 頁面，點擊 Settings -> Pages。
   • 在 Build and deployment 下方的 Source 選擇 Deploy from a branch。
   • 將 Branch 設為 gh-pages，目錄選擇 / (root)，點擊 Save。
   • 稍等幾分鐘後，您的網站即可透過 https://<username>.github.io/<repo-name>/ 進行存取！

---

方法二：透過 GitHub Actions 自動化部署

1. 在專案根目錄下建立路徑為 .github/workflows/deploy.yml 的檔案。
2. 寫入以下工作流配置，這樣每次您將代碼推送到 main 分支時，GitHub 就會自動完成建置與部署：

   name: Deploy to GitHub Pages
   
   on:
     push:
       branches:
         - main
   
   permissions:
     contents: write
   
   jobs:
     build-and-deploy:
       runs-on: ubuntu-latest
       steps:
         - name: Checkout
           uses: actions/checkout@v4
   
         - name: Set up Node
           uses: actions/setup-node@v4
           with:
             node-version: 20
             cache: 'npm'
   
         - name: Install dependencies
           run: npm ci
   
         - name: Build
           run: npm run build
   
         - name: Deploy
           uses: JamesIves/github-pages-deploy-action@v4
           with:
             folder: dist
             branch: gh-pages

---

❓ 常見問題 FAQ

Q1：為什麼有些網址會出現「抓取或摘要過程發生問題」？

• 原因：部分網站（如 Medium、某些新聞網）設有嚴格的跨域保護 (CORS) 或防火牆 (Cloudflare 等) 來防範爬蟲抓取。
• 解決方案：當遇到此類網站時，建議切換至本工具的「貼上內文摘要」模式，直接手動複製網頁文字並貼入進行摘要。

Q2：我輸入的 Gemini API Key 安全嗎？

• 安全：本專案為純前端靜態應用程式。您的 API 金鑰僅會儲存在您自己的瀏覽器 localStorage 中，並直接在您的瀏覽器與 Google Gemini API 之間進行通訊，不會經由任何第三方後端伺服器轉發，請放心使用。

Q3：為什麼需要 .nojekyll 檔案？

• 原因：GitHub Pages 預設會使用 Jekyll 靜態網站產生器來處理上傳的檔案。由於 Vite 打包出來的資源檔案（如 JS、CSS）常以底線 _ 開頭（例如 _astro 或特定結構），Jekyll 會忽略這些檔案導致網頁格式失效（載入 404）。
• 解決方案：在部署目錄（如 dist）中放置一個空的 .nojekyll 檔案，以告知 GitHub Pages 繞過 Jekyll 直接發佈原始檔案。本專案已自動將此檔案納入建置打包流程中。

Q4：Gemini API 呼叫是免費的嗎？

• 是的：Google 目前為 Gemini 1.5/2.0/3.0 等模型提供免費的使用配額（具備每分鐘呼叫次數限制），對於個人日常摘要需求非常足夠。若需更大頻率的使用，可以於 Google AI Studio 綁定付款帳戶。