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 的访客，保留标准阅读页面，使空间化交互建立在可访问、可回链的作品集之上。