han-dong.link — 空間化作品駕駛艙、基於來源的問答與職位匹配 agent
- TypeScript
- Astro
- React
- Three.js
- Spatial UI
- Provider-agnostic LLM
- LLM Tool-Calling
- Generative UI
- Guardrails
- Progressive Enhancement
職位匹配 agent 把貼上或上傳的 JD 整理成附來源的職位匹配報告，供招聘方快速核對；同一套 han-dong.link 也把即時問答助手與 Three.js 駕駛艙串起簡介、作品、研究與履歷。
項目概覽
角色 獨立開發者 — 互動駕駛艙 UI、Three.js 導航、問答與職位匹配 agent loop、帶來源答案卡、文件/JD 護欄、部署
場景
公開作品集要同時服務招聘方、技術同儕與研究合作者，不能讓讀者自己猜每個主張背後有什麼證據。靜態頁面可以列出作品，但很少能回答職位相關問題，也很少展示網站本身如何組織證據。
產品策略
我做了空間化駕駛艙，也保留標準閱讀頁；兩種入口與問答、職位匹配共用同一套站內內容。訪客可以打開簡介、作品、研究與履歷四個星球，也可以線性閱讀或透過帶證據的卡片提問。
成果與當前階段
已在 han-dong.link 上線 · 主頁駕駛艙入口呈現即時作品集數量 · 答案卡引用來源頁 · 可見回答軌跡 · 職位匹配把 JD 文字或文件整理成直接匹配、可遷移經驗、待確認差距與追問
我的工作
- 空間化作品駕駛艙：圍繞助手構建的 Three.js 體驗，以簡介、作品、研究、履歷四個星球呈現，並為減少動態、手機與無 WebGL 環境保留 read-mode 頁面
- 五個 typed tools（getProjects / getPublications / getStack / getTimeline / getContact），LLM 按問題自選，並有文字兜底
- 職位匹配 agent：獨立 `/role-fit` 頁面接受貼上的 JD 文字或 PDF/PNG/JPEG/WebP 上傳，輸出包含直接匹配、可遷移經驗、待確認差距與招聘方追問的匹配報告，把錄用判斷留給讀者
- Source-linked 生成式 UI：每個工具結果渲染成 React 卡片（項目卡、論文列表、工具標籤、時間線、聯絡），並連回對應來源頁
- 可見回答軌跡：助手把從站內內容檢索到答案卡生成的來源路徑顯示出來，讓訪客能看見回答為何成立
- content collections 作為單一數據源——新項目自動進 agent，無需重訓、無需 embedding
- 以證據說服：先講有站內記錄支持的優勢，簡要標出差距，事實、頭銜與數字都對應公開資料
技術證據
- 漸進增強的 Three.js 外殼：WebGL／減少動態／手機能力檢查、啟動序列、鍵盤與滾輪導航，以及從同一組 Astro content collections 顯示即時數量的駕駛艙儀表板
- Agent loop：校驗輸入 → 從 collections 組裝 grounded system prompt → LLM 工具決策 → 工具調用去重 → 解析 typed tools → 渲染卡片 + 文字
- Observable agent traces 把檢索到的 collection 記錄、選中的 tool cards 與最終文字保持可見連接，便於檢查
- 護欄：輸入校驗（長度上限、prompt-injection 正則、拒答越界與套取 prompt）加 per-IP 限流
- 職位匹配護欄：JD 專用校驗、貼上文字或本地文件輸入、PDF/圖片提取、證據白名單、數字/資質主張守衛，以及完整分析延遲時基於站內資料生成匹配報告
- provider-agnostic LLM 整合 + 確定性 mock fallback，dev / 無 key 時完全離線可跑
- Astro + Vercel 服務端渲染；三語（EN / 繁中 / 简中）；答案經 markdown 渲染
Agent loop
每個問題的流程：校驗輸入 → 從 content collections 組裝 grounded system prompt → 問 LLM 該調哪些工具 → 工具調用去重 → 解析 typed tools → 渲染卡片加文字。LLM 負責工具選擇與回答組織，代碼負責 typed resolution 與渲染。
最新 agent 更新把這條路徑變成可見 answer trace：被檢索的來源記錄、選中的卡片與最終文字保持連接，每個回答都能沿路回到站內內容。
Role Fit——帶證據的 JD 匹配
Role Fit 是一套獨立任務流程。招聘方可以貼上職位描述，或上傳 PDF／截圖；網站提取 JD 文字後，對照公開 content collections，輸出按直接匹配、可遷移經驗、待確認差距與追問組織的匹配報告。
JD 文本、分析結果與 trace 記錄僅保存在當前瀏覽器工作階段中。系統根據使用者貼上或上傳的內容及公開站內證據，輸出證據分類和追問，評分與錄用判斷仍由招聘方完成。
以站內內容為依據
agent 直接讀取 Astro content collections，因此新增項目可立即進入回答，無需 embedding 或重訓。回答始終對應已提供的信息；遇到資料未涵蓋的細節時，助手會引導訪客使用聯絡方式確認。
護欄與證據導向的回答
輸入校驗覆蓋長度、prompt-injection patterns、主題範圍與 per-IP rate limits。Role Fit 另加 JD 專用校驗、上傳文件提取限制、證據白名單，以及數字／資質主張守衛。回答先呈現有證據支持的優勢，清楚標出差距，並以公開站內資料為範圍。
駕駛艙外殼——空間化作品集
駕駛艙是網站的互動前端。它以全窗口 Three.js 場景呈現四個可導航星球：簡介、作品、研究、履歷。訪客可用滾輪、鍵盤或點擊在四個星球之間移動；每個星球打開的卡片都來自與助手相同的 Astro content collections，因此 3D 場景、檔案視圖與答案卡保持一致。
儀表板呈現同一組內容集合的即時資料；對於啟用「減少動態效果」偏好、使用流動裝置或不支援 WebGL 的訪客，保留標準閱讀頁面，使空間化互動建立在可訪問、可回鏈的作品集之上。