如何用 pose-search 在浏览器里实现人体姿态搜索从翻图库翻到崩溃到一键找到目标动作【免费下载链接】pose-searchx6ud.github.io/pose-search项目地址: https://gitcode.com/gh_mirrors/po/pose-search你有没有过这种经历素材库里躺着几千张人物照片你想找一张右腿抬起、手臂自然下垂的参考图结果一张张翻过去半小时过去眼睛都花了还是没找到满意的。更糟的是你想找侧身、肩膀抬高的姿势光靠脑子里的关键词根本描述不出来——这种需求用文字标签根本没法搜。这正是 pose-search 想解决的问题一个纯前端的人体姿态搜索工具让你用摆一个姿势代替打一堆关键词直接在图库里找出最接近的图片。它是什么以及 3 分钟怎么跑起来一句话pose-search 是一个运行在浏览器里、基于 MediaPipe 的人体姿态搜索项目。它先给每张图提取 33 个人体关键点存成姿态特征然后你用鼠标拖出一个 3D 小人骨架摆出目标姿势它就能在图片库里按关节角度相似度打分排序找出最匹配的几张。全程在本地浏览器运行不需要任何后端。上手非常简单三步走git clone https://gitcode.com/gh_mirrors/po/pose-search npm install npm run dev跑起来后打开页面浏览器会自动加载 MediaPipe 的检测模型首次会稍等一下随后就能拖骨架、点搜索了。先别管原理动手试一次搜索你立刻就能理解它到底在做什么——这就是先尝到甜头。三大杀手锏为什么它能看懂动作与其逐个模块讲源码不如直接看它凭什么好用。第一招把搜索关键词换成摆姿势。传统的图片搜索靠标签匹配但手肘微屈 30 度、膝盖微微内扣这种描述标签根本写不出来。pose-search 把搜索入口做成了一个可拖拽的 3D 人体骨架你掰哪个关节它就按哪个关节去比对。像在玩一个简易手办掰完就搜直观到不需要看任何文档。第二招匹配器像一把把角度卡尺。项目把人体拆成了面部、胸部、肩、肘、髋、膝等十几个部位每个部位都有一个专门的匹配器。拿肩部匹配器举例它会算两个角度肩关节在以躯干为参照的局部坐标里的朝向以及在当前视角下的朝向。两个角度都足够接近才判定匹配评分是两者误差的加权乘积。这就好比给骨架上的关节角度打分——角度差得越小分数越高图片排得越靠前。核心逻辑见 src/Search/impl/所有匹配器都实现了同一个PoseMatcher接口。第三招自带数据流水线。它不只帮你搜还帮你攒数据。项目配套了一个编辑器页面/#/editor可以连 Unsplash 的 API 搜图、跑姿态检测、标记性别标签最后把关键点压缩成二进制文件landmarks.dat存进项目里。也就是说图片库是你自己的你可以按需扩充这套检测→存储→搜索的闭环是完整打通的。图编辑器里同一张照片的 2D 关键点与 3D 骨架可视化右侧面板可以维护标签和性别信息跟着做一个实战从摆姿势到出结果我们做一个最典型的小任务在自带图库里搜索右手叉腰肘部向外打开的姿势。第一步选中目标部位。在搜索页的下拉框里选择Right Elbow右肘意思就是我只关心右手肘这个关节的弯曲方向其他部位暂不考虑。这一步决定用哪个匹配器。第二步拖骨架摆姿势。在中间那个 3D 骨架上用鼠标拖拽右臂的肘部关节把它掰成肘尖朝外的样子。这时候骨架的 3D 坐标会同步到匹配器的内部状态里相当于给它一把参照卡尺。第三步点搜索。点击搜索按钮后页面会遍历图库中每一张图用右肘匹配器计算每张图与当前姿势的误差角过滤掉误差太大的剩下的按分数从高到低排。搜索页面核心就一段逻辑见 src/Search/Search.ts// 遍历每张照片让匹配器打分再按分数倒序排列 matcher.prepare(model); photos.forEach(photo { const r matcher.match(photo); if (r) results.push({ ...r, photo }); }); results.sort((a, b) b.score - a.score);这一步在做什么prepare根据你摆好的骨架算出目标角度match对每张图返回一个评分分数越高越像。仅此而已几十行代码就完成了整个搜索循环。第四步看结果。结果以缩略图形式展示点击还能看大图。如果发现搜出来的姿势方向反了项目还内置了镜像翻转逻辑——因为拍照片时人物可能面朝左或面朝右匹配器会自动判断是否需要把关键点做水平镜像再比对不用你自己操心左右问题。新手最容易踩的 4 个坑坑一以为全身都像才算匹配。不。你选了哪个部位它就只比哪个部位其他关节一概不管。想搜全身姿势得自己分多个部位分别搜再综合这是设计如此不是 bug。坑二忽略是否与相机角度相关。界面上有个Camera Related开关。开了它匹配会同时要求视角方向也接近适合找正面/侧面朝向一致的图关掉它则会用另一套与相机无关的匹配器只关心关节的相对角度。想找动作对但朝向随意的图记得关掉这个开关。对应代码是每个部位旁边的CameraUnrelated匹配器见 src/Search/impl/。坑三依赖关系没装全。项目需要 WebGL2 支持。如果你的浏览器或环境不支持 WebGL2搜索页会给出警告页面可能白屏或只有静态部分。换一个现代 Chrome/Edge 基本都能解决。坑四photos.json和landmarks.dat对不上。这是自己扩充图库时最常见的错——只改了图片列表忘了重新生成关键点数据文件结果搜索时读出来的关键点全是零。编辑器里点完Run Model后记得点Save data.db把两个文件一起写出去。和其他方案比一比对比项pose-search纯前端服务器端姿态服务直接用 MediaPipe/TF 裸写部署成本几乎为零静态页面即用需要云主机、GPU、运维中等要自己搭全套数据隐私图片不出浏览器天然合规图片要上传有合规风险取决于你放哪跑搜索能力开箱即用拖骨架即搜通常只给检测不给检索完全没有检索要自己写上手速度分钟级天级周级适用边界单机、中小图库、个人/团队内部工具海量图库、多用户在线服务需要深度定制算法或接入自有模型一句话总结pose-search 最舒服的场景是图库在万张以内、不想碰服务器、想把精力花在业务上的开发者。图库量级大、需要多人同时在线再考虑迁移到服务器方案。进阶专区性能与扩展对性能敏感的读者两个点值得深挖数据压缩很讲究。所有图片的关键点被打包进一个Float32Array二进制文件里每张图固定 33×7 个浮点数读取时用offset直接寻址一次 IO 全量载入内存。图库从几千涨到几万搜索仍是纯内存遍历速度几乎不受影响。数据格式见 src/utils/PhotoDataset.ts。自定义匹配器很便宜。PoseMatcher接口只有两个方法prepare(model)和match(photo)。想加手腕旋转或腰腹扭转这种新维度照着MatchShoulder的写法复制一个类注册到Search.ts顶部的matchers字典里就能用。这也是这个项目最值得抄的作业。现在就试一下把找图的时间从半小时压缩到十秒钟把描述不出来的姿势变成摆出来就能搜这就是 pose-search 一天能做成的改变。它把人体姿态搜索这件事从专业后端工程师的专利变成了任何一个前端开发者 clone 下来就能跑的东西。别再犹豫了打开终端跑一遍npm install亲手摆一个姿势、搜一次图你会立刻理解它的价值——毕竟真正好用的工具从来不需要解释两遍。【免费下载链接】pose-searchx6ud.github.io/pose-search项目地址: https://gitcode.com/gh_mirrors/po/pose-search创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考