Threads Wrapped

你的 Threads 年終回顧工具 — 將你一整年的串文數據轉化為精美的統計報告。

隱私聲明

本工具 100% 尊重使用者隱私：

• 無伺服器：完全在你的瀏覽器本地運行
• 無資料上傳：你的資料不會離開你的裝置
• 無資料儲存：所有處理都在記憶體中完成，關閉頁面即清除
• 無追蹤：不使用任何分析工具或 Cookie
• 開源透明：所有程式碼公開可查

簡單來說，你的資料只屬於你。

功能特色

📊 統計分析

• 統計你的年度發文數量與字數
• 找出你最活躍的日子與時段
• 分析你的連續發文紀錄
• 列出獲得最多讚的貼文
• 提取你的熱門關鍵詞與 Emoji
• 追蹤粉絲成長趨勢
• 視覺化熱力圖展示發文模式

🎬 互動體驗

• Instagram 風格的動態故事流
• 長按暫停功能，方便截圖分享
• 響應式設計，支援各種裝置
• 流暢的頁面切換動畫

🔒 隱私與安全

• 強化的內容安全策略（CSP）
• 完整的 ARIA 無障礙屬性
• 符合 OWASP 2025 安全標準

使用方式

步驟一：下載你的 Threads 資料

1. 開啟 Instagram App
2. 前往「設定和動態」→「帳號管理中心」→「你的資訊和權限」→「下載你的資訊」
3. 選擇「部分資訊」
4. 只勾選「Threads」
5. 選擇格式為「JSON」、日期範圍「所有時間」
6. 提交申請，等待 Instagram 寄送下載連結（通常幾分鐘到幾小時）

步驟二：上傳資料

1. 前往 Threads Wrapped 網站
2. 上傳下載的 ZIP 檔案，或解壓後上傳整個資料夾
3. 等待分析完成

步驟三：查看你的年終回顧

• 瀏覽統計結果頁面
• 點選「播放故事」觀看動態呈現
• 截圖分享你的年終回顧

技術架構

threads-wrapped/
├── index.html          # 上傳頁面
├── result.html         # 統計結果頁面
├── story.html          # 故事流頁面
├── about.html          # 關於頁面
├── faq.html            # 常見問題
├── privacy.html        # 隱私政策
├── css/                # 樣式檔案
│   ├── global.css      # 全域樣式
│   ├── upload.css      # 上傳頁面樣式
│   ├── result.css      # 結果頁面樣式
│   ├── stories.css     # 故事流樣式
│   ├── content.css     # 內容頁面共用樣式
│   ├── about.css       # 關於頁面樣式
│   ├── faq.css         # FAQ 頁面樣式
│   └── privacy.css     # 隱私政策樣式
├── js/
│   ├── upload.js       # 上傳邏輯
│   ├── parser.js       # JSON 解析器
│   ├── analyzer.js     # 統計分析引擎
│   ├── renderer.js     # 結果渲染
│   ├── result.js       # 結果頁互動
│   ├── zip-handler.js  # ZIP 處理
│   ├── xss-utils.js    # XSS 防護工具
│   ├── hamburger-menu.js        # 響應式導航選單
│   ├── responsive-scale.js      # 響應式縮放
│   ├── story-bootstrap.js       # 故事流啟動器
│   └── stories/        # 故事流模組
│       ├── StoryEngine.js       # 故事引擎（含長按暫停功能）
│       ├── StoryPage.js         # 故事頁面基類
│       └── pages/      # 13 個故事頁面
│           ├── Page01Opening.js
│           ├── Page02FirstPost.js
│           ├── Page03TotalPosts.js
│           ├── Page04MostActiveDay.js
│           ├── Page05Streak.js
│           ├── Page06Words.js
│           ├── Page07TopLiked.js
│           ├── Page08Keywords.js
│           ├── Page09AITools.js
│           ├── Page09Followers.js
│           ├── Page10PeakMonth.js
│           ├── Page11Personality.js
│           ├── Page12Emoji.js
│           └── Page13Ending.js
├── images/             # 圖片資源
│   ├── favicon.svg
│   ├── threads-logo-white.svg
│   ├── threads-logo-wordmark-white.svg
│   └── threads-wrapped_cover.webp
└── sitemap.xml         # 網站地圖

技術棧

前端技術

• HTML5 語義化標籤
• CSS3 現代特性（Grid、Flexbox、CSS Variables）
• 原生 JavaScript（ES6+ Module）
• 無框架依賴，輕量快速

第三方函式庫

• zip.js - ZIP 檔案處理

安全性

• 內容安全策略（CSP）with hash-based script integrity
• XSS 防護機制
• 符合 OWASP 2025 安全標準

無障礙性

• 完整的 ARIA 屬性
• 鍵盤導航支援
• 螢幕閱讀器友善
• 符合 WCAG 2.1 AA 標準

本地開發

# 複製專案
git clone https://github.com/haunchen/threads-wrapped.git
cd threads-wrapped

# 啟動本地伺服器（任選一種）
python3 -m http.server 8000
# 或
npx serve
# 或
npx live-server

# 開啟瀏覽器
open http://localhost:8000

授權

本專案採用 MIT License 授權。

專案特色

🎨 設計理念

• 簡潔現代的使用者介面
• 流暢的動畫與過場效果
• Instagram 風格的故事流體驗
• 響應式設計，完美支援各種裝置

🚀 效能優化

• 純前端實作，無需後端伺服器
• 本地處理，快速且私密
• 模組化程式碼架構
• 優化的資源載入策略

📱 跨平台支援

• 桌面瀏覽器（Chrome、Firefox、Safari、Edge）
• 行動裝置瀏覽器（iOS Safari、Android Chrome）
• 平板裝置最佳化

第三方套件

• zip.js - BSD-3-Clause License
• html2canvas - MIT License（用於結果頁面截圖功能）

相關連結

• 線上體驗
• 資料匯出教學
• 關於專案
• 常見問題
• 隱私政策

作者

Made by 法蘭克 & 阿璋

法蘭克的連結

• Tech Blog: frankchen.tw
• GitHub: @haunchen

阿璋的連結

• Hao Tool: haotool.org
• GitHub: @s123104

支持我們

如果這個專案對你有幫助，歡迎請我們喝杯咖啡 ☕

致謝

感謝所有使用 Threads Wrapped 的朋友們，你們的支持是我們持續改進的動力！

---

免責聲明：本專案與 Meta Platforms, Inc. 無關，非 Meta 官方產品。Threads 是 Meta Platforms, Inc. 的註冊商標。