來源：https://blog.csdn.net/2403_87969572/article/details/158544724

抓取時間（ISO本地）：2026-05-18 05:17:41

---

前言

談論 AI 的時候，我們總在談論引數、算力、準確率。我們把它塞進對話方塊、表格、程式碼編輯器裡，讓它成為高效的工具，卻忘了它也可以成為一扇門——一扇通往內心，連線傳統神秘學與未來科技的門，一扇給我們帶來更多有幫助、更多有意思內容的門。

這就是我做 CyberArcanum 賽博秘儀 的全部理由：讓 AI 不再是冰冷的文字框，而是一位帶著儀式感，陪你向內探索的數字導師。

當前開源實現以 Mystic Vision Tarot（靈啟萬物） 為名，完整保留了「手勢選牌 + 握拳定契 + AI 解牌與多輪對談」的儀式閉環，你可以直接在本地跑通並體驗。

---

第一部分：The Vision —— 當神秘學的儀式感，撞上數字時代的程式碼

傳統塔羅的核心，從來不是「預知未來」。

它的靈魂，藏在洗牌時指尖的觸感、切牌時專注的呼吸、抽牌時心跳的停頓裡——這一整套完整的儀式，本質是讓你從浮躁的日常裡抽離，沉下心來直面自己的困惑；而 78 張阿卡納牌的符號，不過是你內心潛意識的投射載體。

但我見過太多數字塔羅產品，把這套充滿力量的儀式，簡化成了一個「點選抽卡」的按鈕、一段複製貼上的通用牌意、一個只會輸出套話的 AI 對話方塊。它們用科技消解了神秘，用效率殺死了共情，最終變成了毫無靈魂的娛樂玩具。

我想做的事恰恰相反：用最前沿的前端技術、計算機視覺、大語言模型，完整重構塔羅占卜的儀式閉環。不是用程式碼解構神秘，而是用程式碼為神秘賦能，讓千百年流傳的向內探索的智慧，在數字世界裡，獲得更有沉浸感、更有共情力的新生。

---

第二部分：The Experience —— 一場完整的沉浸式數字占卜儀式

CyberArcanum 的核心設計準則，是把「儀式感」刻進每一個畫素、每一次互動裡。從你開啟應用的那一刻起，你就進入了一個專屬的、幽暗而充滿力量的秘儀空間，每一步操作，都是占卜儀式不可分割的一部分。

1. 啟程：向秘儀袒露你的困惑

開啟應用，首先迎接你的不是繁雜的功能選單，而是一片緩慢流動的暗紫色星雲與深邃背景，幽微的星光粒子點綴其間。介面中央是「Mystic Vision」的標題與一行引導語，以及一個極簡的、暗金描邊風格的輸入框：

燒錄你的疑惑 · Engrave Thy Inquiry

沒有「必填項」的紅色提示，沒有苛刻的字數限制，你可以寫下關於職業、感情、成長的任何困惑，也可以只是一句「我想看看當下的狀態」。例如：「我近期的事業發展如何？」在這裡，你不需要迎合任何規則，只需要對自己坦誠。

當你寫下困惑並點選 ASCEND（啟程） 按鈕的那一刻，攝像頭將在此後悄然啟動，背景與狀態文案會引導你進入下一幕——共鳴。

2. 共鳴：在虛空之中，撥動命運的牌陣

這是整個產品最核心的創新——我們徹底拋棄了「點選選牌」的傳統互動，用 Google MediaPipe 的計算機視覺能力，讓你用自己的手，在虛空之中完成選牌的儀式。

點選啟程並授權攝像頭後，介面會提示：「揮動手部移動，握拳 3 秒翻開命運」。此時，所有攝像頭畫面均在本地處理，絕不會上傳到任何伺服器。介面中央是一副塔羅牌陣：多張大阿卡納牌以 3D 透視的方式排開，當前選中的牌位於正中，兩側牌面隨透視逐漸隱入暗處。當你的手出現在畫面中，MediaPipe 會以穩定幀率實時捕捉你手部的 21 個 3D 關鍵點。

你只需要向左或向右揮動手掌，整副牌陣就會隨著你手部的水平位移同步滾動——就像你真的在虛空之中，用手指撥動命運的牌。當前選中的牌會高亮並帶有微弱光暈，左右兩側有「LEFT」「FIST」「RIGHT」的儀式化提示：揮動選牌，握拳定契。

當你找到那張與你共鳴的牌並停下揮動，選牌的儀式，就此完成。

3. 定契：以握拳之誓，鎖定你的牌面

傳統塔羅裡，定牌是整個儀式裡最神聖的環節——一旦選定，便不可更改，這是你與牌之間的契約。

在 CyberArcanum 裡，我們沒有用一個冰冷的「確認」按鈕來完成這個環節，而是設計了握拳三秒定契的互動。當你在牌陣中選好當前牌面後，介面會持續提示你：

握拳 3 秒，翻開命運。

當你握緊拳頭，MediaPipe 會實時識別握拳手勢（透過指尖與手掌根部的相對位置判斷手指是否蜷曲）。識別邏輯在端側完成：當多根手指的指尖相對手腕的距離小於指節相對手腕的距離時，視為握拳。一旦握拳狀態連續保持約 3 秒，便會觸發定契——沒有撤銷，沒有重選，你必須為自己的選擇負責。這，就是儀式的力量。

4. 揭示：命運的牌面，在此刻緩緩掀開

定契完成，便到了整個儀式最有張力的環節——翻牌。

當前選中的那張牌會從牌背緩緩翻轉，暗金紋樣與神秘符號的牌背逐漸被牌面取代，正面的阿卡納牌圖與牌名（中英雙語）、基礎釋義，一點點呈現在你眼前。狀態文案變為「星象已現 · 宿命歸位」。翻牌動效與 3D 透視、背反隱藏（backface-hidden）結合，讓一張牌從「未選中」到「翻開」的過渡充滿張力。

每一張牌翻開的瞬間，都是留給你和自己內心對話的時間。當牌面完全掀開，介面的光線會穩定下來，牌面的能量在此刻完全釋放，並同時開啟下一幕——對談。

5. 對談：AI 導師的深度解讀，與無界的追問

牌面不是終點，而是對話的起點。這也是 CyberArcanum 和很多塔羅產品最核心的區別：我們沒有給你一段固定的、複製貼上的牌意，而是用 DeepSeek API，為你打造了一位真正懂牌、懂你、有溫度的 Mystic Vision 導師。

牌面翻開的同時，會向 AI 傳送一段結構化提示：你的初始困惑、抽中的塔羅牌名稱（中英文）、牌面基礎釋義。DeepSeek 會基於這些資訊，生成一段專屬的、流式輸出的深度解讀。它不會給你非黑即白的「算命結果」，也不會說模稜兩可的套話，而是會把塔羅牌的符號寓意和你的具體處境結合起來，幫你梳理當下的狀態，看見內心忽略的情緒，找到困惑的核心。

更重要的是，支援完整的多輪上下文對話。你可以隨時在輸入框中追問，例如：

• 「這張牌給我的最大警示是什麼？」
• 「我該怎麼突破當下的這個困境？」
• 「如果我選擇了這個方向，牌面給我的提示是什麼？」

DeepSeek 會完整記住你最初的問題、牌面資訊、以及之前的全部對話，像一位真正資深的塔羅師一樣，陪著你一步步向內探索。回覆以 Markdown 渲染（標題、加粗、列表等），閱讀體驗更清晰。AI 在這裡不是算命的工具，而是陪你和自己對話的橋樑。

---

第三部分：The Tech Stack —— 藏在儀式感背後的技術實現

所有極致的體驗，都離不開紮實的技術支撐。當前倉庫（Mystic Vision Tarot）的技術架構，始終圍繞著「沉浸式體驗」與「儀式閉環」搭建，每一個技術選型，都為了讓儀式感更完整、互動更流暢、解讀更有溫度。

前端架構：React + TypeScript + Vite

這是經過驗證的、非常適合本專案的技術組合，核心解決了兩點：開發效率與執行與構建效能。

• Vite：毫秒級冷啟動與熱更新，在除錯複雜翻牌動效與手勢互動時，可以實時預覽每一幀的細節。構建階段能產出體積與載入速度都可控的靜態資源，配合開發伺服器配置（如埠 3000、host: '0.0.0.0'），本地與區域網體驗都很順暢。
• React：元件化架構讓「輸入模組、手勢識別與攝像頭、牌陣與翻牌、對話模組」可以清晰解耦，狀態透過 useState / useRef / useCallback 管理，翻牌與選牌邏輯集中在主元件內，可維護性高。React 19 與現代 Hooks 為非同步流與 ref 同步提供了穩定基礎。
• TypeScript：在多模組、多 API 對接（MediaPipe 手勢資料、DeepSeek 流式介面、塔羅牌資料與訊息型別）的場景下，型別安全能在開發階段規避大量潛在問題，互動狀態流轉也更清晰可控。

手勢與攝像頭：Google MediaPipe 端側計算機視覺

整個產品最具辨識度的手勢互動，完全基於 Google MediaPipe 實現，核心優勢是：低延遲與隱私安全。

• @mediapipe/hands：在瀏覽器端實時檢測手部 21 個 3D 關鍵點（landmarks），透過 CDN 引入，無需後端參與。初始化時設定 maxNumHands: 1、minDetectionConfidence 與 minTrackingConfidence（如 0.6），在弱光下也能保持穩定識別。
• @mediapipe/camera_utils：負責從裝置攝像頭取幀並驅動 Hands 模型。影片流繫結到頁面內一個隱藏的 <video> 元素，每一幀透過 hands.send({ image: videoElement }) 送入模型，在 onResults 回撥中拿到 multiHandLandmarks。
• 互動邏輯：
  • 選牌：取第一隻手的手腕或掌心關鍵點的水平座標 x，與上一幀比較，若水平位移超過閾值（如 0.02），則根據方向遞增或遞減當前選牌索引，實現牌陣左右滾動。
  • 握拳定契：自定義 checkIsFist(landmarks)，根據 MediaPipe 的 21 點索引（如指尖 8、12、16、20，指節 6、10、14、18，手腕 0），計算指尖到手腕的距離與指節到手腕的距離；當「指尖更靠近手腕」的手指數量達到設定數量（如 ≥3），判定為握拳。握拳狀態持續 3000ms 後觸發翻牌；若中途鬆開超過約 1.2 秒，則重置計時，避免誤觸。
• 隱私：所有攝像頭畫面的處理與手勢識別均在使用者本地完成，不會將影片或影象上傳到雲端，既保證低延遲，也守護隱私。

解牌與對話：DeepSeek API 流式多輪對話

當前版本的解牌與多輪對話全部由 DeepSeek API 驅動。

• 系統角色：在請求中固定一位「資深塔羅牌占卜師 · Mystic Vision」的系統提示，要求根據牌面含義與使用者問題，用專業、神秘且富有同理心的語調，以 Markdown 輸出解讀。
• 流式輸出：使用 DeepSeek 的 stream: true 介面，服務端以 SSE 形式返回 token，前端逐 chunk 拼接到當前助手訊息並觸發重繪，配合 marked 實時渲染 Markdown，形成「打字機」式的閱讀體驗。
• 上下文：每次使用者傳送訊息時，將「歷史對話 + 當前使用者輸入」一併傳送；翻牌後的首條解讀則使用「占卜啟動」專用 prompt（包含使用者問題、選中牌名與釋義），保證首答緊扣牌面與問題。這樣即可實現長上下文、多輪追問，AI 不會忘記你的問題與之前的對話。

專案中依賴裡仍保留 @google/genai，便於未來擴充套件多模態或其它模型；當前線上解牌與對話鏈路以 DeepSeek 為主。

---

第四部分：結語與展望

CyberArcanum 從來不是一個「用 AI 算命」的玩具。

做這個專案的初心，是想證明一件事：科技從來不是人文的對立面，程式碼也從來不是冰冷的符號。我們可以用最前沿的計算機視覺、大語言模型、前端技術，去守護千百年流傳下來的、人類向內探索的智慧；我們可以用程式碼，重構一場充滿儀式感的占卜，讓 AI 不再是對話方塊裡的工具，而是能陪你對話、陪你探索、陪你直面內心的夥伴。

傳統神秘學的核心，是「看見自己」；而 AI 的能力，是幫我們更清晰地看見。當這兩者相遇，便有了 CyberArcanum 賽博秘儀。

體驗與開源

• GitHub 開源倉庫：https://github.com/ChenAI-TGF/mystic-vision-tarot

歡迎大家來體驗這場數字時代的占卜儀式，也歡迎所有開發者一起參與進來，完善這個賽博秘儀的世界。未來，還會加入更多牌陣、更豐富的手勢互動、以及語音對話等能力，讓這場向內探索的旅程，有更多可能性。

---

第五部分：如何本地啟動 —— 從零跑通賽博秘儀

下面步驟可以讓你在本地完整執行 Mystic Vision Tarot 專案，無需部署即可體驗「啟程 → 手勢選牌 → 握拳定契 → 翻牌 → AI 對談」的完整流程。

環境要求

• Node.js：建議 v18 或以上（推薦 LTS 版本），用於執行 npm 與 Vite。
• 瀏覽器：支援攝像頭與現代 JavaScript 的瀏覽器（如 Chrome、Edge、Firefox、Safari）。手勢識別在 Chrome 繫上表現最穩定。
• 網路：首次安裝依賴需要訪問 npm 源；執行時需能訪問 DeepSeek API（若已配置）及 MediaPipe 的 CDN（cdn.jsdelivr.net）。

步驟一：獲取專案程式碼

若專案已在 Git 倉庫中，可克隆：

git clone <你的倉庫地址>
cd mystic-vision-tarot

若只有壓縮包，解壓後進入專案根目錄即可：

cd mystic-vision-tarot

步驟二：安裝依賴

在專案根目錄執行：

npm install

等待依賴安裝完成（包含 React、Vite、TypeScript、marked 等）。若使用國內網路，可配置 npm 映象以加速（如 npm config set registry https://registry.npmmirror.com）。

步驟三：配置 DeepSeek API（可選但推薦）

解牌與對話依賴 DeepSeek API。當前實現中，API Key 在 services/api.ts 內配置；若你希望使用自己的 Key，可：

• 開啟 services/api.ts，找到 DEEPSEEK_API_KEY，替換為你自己的 Key；
• 或透過環境變數 / 構建時注入（需在程式碼中改為讀取 import.meta.env 等），避免把 Key 提交到倉庫。

若暫時不配置，翻牌與介面仍可正常使用，僅 AI 解讀請求會失敗，可根據控制檯報錯排查。

步驟四：啟動開發伺服器

在專案根目錄執行：

npm run dev

終端中會輸出類似：

  VITE v6.x.x  ready in xxx ms
  ➜  Local:   http://localhost:3000/
  ➜  Network: http://192.168.x.x:3000/

表示開發伺服器已啟動。預設埠為 3000（在 vite.config.ts 中配置）。

步驟五：在瀏覽器中開啟並授權攝像頭

1. 在瀏覽器位址列輸入：**http://localhost:3000/**（或終端裡顯示的 Local 地址）。
2. 若為首次訪問，瀏覽器可能會請求攝像頭許可權，請選擇「允許」。攝像頭僅用於本地手勢識別，畫面不會上傳。
3. 頁面載入後，先等待幾秒，直到介面出現「占卜引擎已就緒」或「ASCEND」按鈕可點選，表示 MediaPipe 手部模型已載入完成。

步驟六：完整體驗流程

1. 啟程：在「燒錄你的疑惑」輸入框中寫下你的問題（例如「我近期的事業發展如何？」），點選 ASCEND。
2. 共鳴：允許攝像頭後，在鏡頭前左右揮動手掌，觀察牌陣隨手勢左右切換，選中心儀的那張牌。
3. 定契：選好後握拳並保持約 3 秒，即可觸發翻牌。
4. 揭示：牌面翻轉並展示牌名與釋義。
5. 對談：若已配置 DeepSeek API，將自動收到一段基於你問題與牌面的解讀；你可以在下方輸入框中繼續追問，進行多輪對話。

常用命令補充

• 構建生產版本：npm run build，產物在 dist 目錄。
• 本地預覽構建結果：npm run build 後再執行 npm run preview，可在本地模擬生產環境訪問。

常見問題

• 攝像頭無法使用：請確認使用 HTTPS 或 localhost（多數瀏覽器僅在此環境下授權攝像頭），並檢查是否被其他應用佔用。
• 手勢無反應：確保手部在畫面內、光線充足；若仍無效，可開啟開發者工具檢視是否有 MediaPipe 或攝像頭相關報錯。
• AI 無回覆或報錯：檢查 DeepSeek API Key 是否有效、網路是否能訪問 DeepSeek 介面，以及 services/api.ts 中的介面地址與引數是否正確。

按照以上步驟，即可在本地完整體驗 CyberArcanum 賽博秘儀 的儀式閉環。若有問題，歡迎在倉庫提 Issue 或參與貢獻。