人体姿态搜索完整指南用浏览器三分钟找到你想要的任意姿势【免费下载链接】pose-searchx6ud.github.io/pose-search项目地址: https://gitcode.com/gh_mirrors/po/pose-searchpose-search 是一个完全运行在浏览器端的开源人体姿态搜索工具你只需要摆出一个姿势它就能在一张照片库里自动找到最接近的动作参考全程无需后端服务器。它把「人体姿态识别」「姿态特征提取」「几何匹配算法」全部打包进一个前端项目里无论你是插画师找参考、健身教练做动作比对还是开发者想给应用加上「按姿势搜图」的能力这套开源方案都值得你花十分钟读完并上手一试。一张找不到的参考图逼疯了多少创作者先说一个几乎人人都经历过的场景。你是一名插画师正在画一个「单膝跪地、双手上举」的动态但自己摆不出来脑子里也只有模糊的画面。于是你打开素材网站输入 kneeling、raising arms……翻了几百页出来的不是站姿就是坐姿唯一一张接近的还带着水印。两小时过去参考图没找到灵感先没了。问题出在哪里图片搜索用的是文本标签而你想要的是动作本身。标签是人写的不同人用词不一样一张「下蹲」的照片可能被标注成 crouch也可能是 squat甚至是 sit。关键词的鸿沟让「按姿势找图」这件事变得异常痛苦。有没有可能——直接用姿势搜姿势pose-search 就是为这个想法而生的。它把 MediaPipe Pose 的姿态识别能力搬进浏览器用几何算法比较照片之间的动作相似度让你在本地照片库里完成基于姿势的人体姿态搜索。没有服务器没有上传没有等待。三分钟跑起来把姿态搜索部署到本地读到这里你能获得亲手启动这个项目的能力。全程只需要三条命令比你配置一个普通前端工程还要快。git clone https://gitcode.com/gh_mirrors/po/pose-search cd pose-search npm install依赖装好后启动开发服务器npm run dev浏览器会自动打开项目首页在地址栏进入搜索页后你会看到左侧一个可拖拽旋转的 3D 人体骨架右侧是一大片待检索的照片墙。选中某个身体部位点一下 Search几秒内结果就出来了。整个过程用到的核心技术栈非常轻Vue 3 TypeScript 提供界面与类型安全MediaPipe Pose 负责从图像里提取关键点WebGL 负责 3D 骨骼渲染Web Workers 负责让模型加载与推理不阻塞页面。这些后面会逐层拆开讲。原理第一层给每张照片盖上一枚姿态指纹读到这里你能获得看懂整个项目最核心的数据抽象——姿态是怎么被存档的。要让计算机理解一个人的动作长什么样第一步是把身体抽象成一组可计算的数字。MediaPipe Pose 模型从单张图像中检测出33 个人体关键点覆盖鼻子、肩膀、手肘、膝盖、胯部等主要关节每个点都带有三维坐标和可见度置信度。关键设计在于项目为每个关键点保存了两套坐标坐标系含义用途归一化坐标normalizedLandmarks关键点在图片平面上的位置范围 0~1屏幕空间的 2D 显示与分析世界坐标worldLandmarks以髋部为原点的 3D 空间坐标保留真实的肢体朝向关系用于姿态匹配为什么需要两套打个比方归一化坐标像是照片上的投影会随拍摄角度和人物远近变化世界坐标则是人物本身的骨架模型不会因为相机位置不同而失真。搜索时用世界坐标比较动作显示时用归一化坐标对齐画面各取所长。把这套检测能力封装成一个 Promise 接口整段代码不过几十行// src/utils/detect-pose.ts export function detectPose(image) { return new Promise(async function (resolve) { const pose await getInstance(); // 复用同一个 Pose 实例避免重复加载模型 pose.reset(); onResultsCallback resolve; await pose.send({image}); // 送入图像推理完成后通过回调 resolve }); }每一次检测就相当于给这张照片盖上了一枚独一无二的姿态指纹。而PhotoDataset这个类src/utils/PhotoDataset.ts会把所有照片的指纹批量压缩进一个landmarks.dat二进制文件里加载照片库时一次性读入内存几十万张图片的检索也能在毫秒级完成。原理第二层几何匹配姿势相似度如何量化读到这里你能获得理解 pose-search 最巧妙的部分——把像不像翻译成数学语言。有了姿态指纹下一个问题来了怎么判断这张照片的姿势和我摆的姿势像不像pose-search 的答案是一组姿态匹配器PoseMatcher每个匹配器负责一个身体部位。你可以翻一下src/Search/impl/目录会发现MatchShoulder、MatchElbow、MatchKnee、MatchHip、MatchFace、MatchChest等十几个实现肩、肘、膝、髋一应俱全甚至还有专门忽略相机角度的变体如MatchShoulderCameraUnrelated。以MatchShoulder为例它的思路可以概括成三步提取方向向量用左右肩、髋部等关键点计算躯干方向和肩部朝向得到几个代表动作的骨架向量转换到局部空间把世界坐标下的向量换算到以躯干为基准的局部坐标系从而排除人物高矮胖瘦的干扰比较角度差分别计算世界空间角度误差和视图空间角度误差误差越小说明动作越接近最终按综合分数排序。// src/Search/impl/MatchShoulder.ts核心逻辑节选 const error angleBetweenVec3(dirL, this.shoulderLocalDir); // 世界空间的角度误差 const viewError angleBetweenVec3(trunkUpView, this.trunkViewUp); // 视图空间的朝向误差 return { score: (Math.PI - error) * (Math.PI - viewError), // 误差越小分数越高 center: normalized[11].point, // 结果缩略图的聚焦中心 related: [...], // 关联关键点用于裁剪对齐 };这里的score不是玄学而是多个角度差的乘积——任何一个维度过大都会让总分迅速坍缩保证返回的永远是所有部位都接近的结果而不是某个单点碰巧吻合的误导项。搜索的编排逻辑也相当干净。所有匹配器统一实现PoseMatcher接口定义在src/Search/impl/search.ts一个filterAndSort函数完成逐张比对 → 过滤不合格 → 按分数降序的完整流程export function filterAndSort(photos, model, matcher) { matcher.prepare(model); // 先根据当前骨架姿态做预处理 photos.forEach(photo { const r matcher.match(photo); // 逐张照片计算匹配分数 if (r ! null) ret.push({...r, photo}); }); ret.sort((a, b) -a.score b.score); // 分数越高排越前 return ret; }这套prepare / match两段式设计非常值得借鉴prepare只算一次目标姿势的几何特征match则对每张照片复用把 O(N) 次重复计算压成了 O(1) 预计算 O(N) 轻量比对这才是它能秒级扫完整个图库的底气。亲手体验搜索左膝跪地是种什么感觉读到这里你能获得对项目交互与视觉呈现的整体印象。启动项目后你可以这么玩用鼠标拖拽左侧的 3D 骨架把左膝弯下去模拟一个单膝跪地的姿势然后在部位下拉框里选择 Left Knee点 Search。右侧照片墙会瞬间刷新每一张缩略图都自动以膝盖为中心裁剪对齐并且自动标记出左腿的关键点连线。上面这张截图来自项目仓库自带的editor.jpg展示的是编辑器页面——左侧是原图与叠加的骨架标注右侧是元数据面板你可以在这里给照片打标签、标记性别、运行姿态模型并写入数据库。配合搜索页使用你既能消费现成的图库也能亲手扩建自己的图库。一个很贴心的细节是如果你不希望结果受人物面向影响可以切到Camera Ignored忽略相机方向模式。此时匹配器会自动换成CameraUnrelated变体只比较动作本身、不比较朝向相当于告诉系统我要的是这个动作背对还是面对镜头都行。性能与架构为什么浏览器端能扛得住读到这里你能获得这套纯前端姿态识别方案在性能上的底气来源。你可能会担心把姿态识别和整库比对都塞进浏览器卡不卡pose-search 的架构给出了三层保障MediaPipe 的 WASM 优化模型文件经过预编译和体积压缩加载快、推理快专为 Web 场景打磨Web Workers 后台推理public/worker/detect-pose.worker.js把检测逻辑放到独立线程避免模型推理卡死界面WebGL 混合渲染2D 关键点用 Canvas 绘制3D 骨骼用 WebGL 着色器渲染src/components/SkeletonModelCanvas/下的light.vert、line.frag等着色器就是见证把 GPU 的资源充分利用起来。更重要的是数据库的匹配计算根本不涉及 GPU——姿态指纹是提前算好存进landmarks.dat的搜索时只是做纯内存里的向量角度比较。这意味着照片再多搜索也只是扫一遍浮点数而不是真的对每张图重新跑一次神经网络。顺带一提3D 骨骼渲染用到了gl-matrix做矩阵运算模型节点体系抽成了BodyPart、SkeletonModelNode这样的类把骨骼和节点的概念分得很清楚。如果你以后想加脖子匹配器手腕匹配器照着现有类的结构扩展即可。想把它改造成自己的工具给你两条路读到这里你能获得项目预留的扩展接口在哪儿以及两条可行的二次开发路线。路线一换数据源。PhotoDataset已经支持从photos.json和landmarks.dat加载数据writeToFile()还能把数据写回。配合编辑器页面的 Run Model 和 Add Record 按钮你可以用自己的照片库重建一套姿态数据集让搜索针对你的领域数据生效。路线二换匹配算法。实现PoseMatcher接口自定义prepare和match逻辑然后把它注册到src/Search/Search.ts的matchers注册表里页面上就会自动出现新的部位选项。比如你想搜腰部侧屈幅度完全可以仿照MatchShoulder写一个MatchWaist。对就是这么轻。整个项目的核心逻辑集中在src/Search/搜索与src/components/SkeletonModelCanvas/骨架渲染两个目录里架构清晰到花一个晚上就能通读的程度。省下翻图的时间把精力还给创作回到开头那个插画师的困境。有了 pose-search她的工作流会变成打开项目拖拽骨架摆出想要的姿势点击搜索几秒钟后参考图已经躺在屏幕上了。省下的是两小时的翻图时间保住的是创作状态里最宝贵的心流。这个项目带给你的价值可以归结为三句话如果你是创作者一个免费、离线、本地运行的姿势素材检索器找参考再也不用靠猜关键词如果你是开发者一套可复用的浏览器端人体姿态识别与几何匹配的完整参考实现PoseMatcher接口就是你的扩展起点如果你在评估技术选型它用事实证明了纯前端完成实时姿态检测与智能搜索完全可行零服务器成本、零隐私风险。接下来要做什么路径已经给你铺好了执行git clone https://gitcode.com/gh_mirrors/po/pose-search npm install npm run dev亲手体验一次姿态搜索通读src/Search/impl/下的匹配器代码体会几何算法如何量化动作相似度如果你有更好的思路按照PoseMatcher接口写一个新的匹配器提交上来让这个开源项目因为你而更强。别再让想找的姿势和搜到的图之间隔着一道关键词的墙了。这一次用你的身体去搜索。【免费下载链接】pose-searchx6ud.github.io/pose-search项目地址: https://gitcode.com/gh_mirrors/po/pose-search创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 人体姿态搜索完整指南：用浏览器三分钟找到你想要的任意姿势
人体姿态搜索完整指南用浏览器三分钟找到你想要的任意姿势【免费下载链接】pose-searchx6ud.github.io/pose-search项目地址: https://gitcode.com/gh_mirrors/po/pose-searchpose-search 是一个完全运行在浏览器端的开源人体姿态搜索工具你只需要摆出一个姿势它就能在一张照片库里自动找到最接近的动作参考全程无需后端服务器。它把「人体姿态识别」「姿态特征提取」「几何匹配算法」全部打包进一个前端项目里无论你是插画师找参考、健身教练做动作比对还是开发者想给应用加上「按姿势搜图」的能力这套开源方案都值得你花十分钟读完并上手一试。一张找不到的参考图逼疯了多少创作者先说一个几乎人人都经历过的场景。你是一名插画师正在画一个「单膝跪地、双手上举」的动态但自己摆不出来脑子里也只有模糊的画面。于是你打开素材网站输入 kneeling、raising arms……翻了几百页出来的不是站姿就是坐姿唯一一张接近的还带着水印。两小时过去参考图没找到灵感先没了。问题出在哪里图片搜索用的是文本标签而你想要的是动作本身。标签是人写的不同人用词不一样一张「下蹲」的照片可能被标注成 crouch也可能是 squat甚至是 sit。关键词的鸿沟让「按姿势找图」这件事变得异常痛苦。有没有可能——直接用姿势搜姿势pose-search 就是为这个想法而生的。它把 MediaPipe Pose 的姿态识别能力搬进浏览器用几何算法比较照片之间的动作相似度让你在本地照片库里完成基于姿势的人体姿态搜索。没有服务器没有上传没有等待。三分钟跑起来把姿态搜索部署到本地读到这里你能获得亲手启动这个项目的能力。全程只需要三条命令比你配置一个普通前端工程还要快。git clone https://gitcode.com/gh_mirrors/po/pose-search cd pose-search npm install依赖装好后启动开发服务器npm run dev浏览器会自动打开项目首页在地址栏进入搜索页后你会看到左侧一个可拖拽旋转的 3D 人体骨架右侧是一大片待检索的照片墙。选中某个身体部位点一下 Search几秒内结果就出来了。整个过程用到的核心技术栈非常轻Vue 3 TypeScript 提供界面与类型安全MediaPipe Pose 负责从图像里提取关键点WebGL 负责 3D 骨骼渲染Web Workers 负责让模型加载与推理不阻塞页面。这些后面会逐层拆开讲。原理第一层给每张照片盖上一枚姿态指纹读到这里你能获得看懂整个项目最核心的数据抽象——姿态是怎么被存档的。要让计算机理解一个人的动作长什么样第一步是把身体抽象成一组可计算的数字。MediaPipe Pose 模型从单张图像中检测出33 个人体关键点覆盖鼻子、肩膀、手肘、膝盖、胯部等主要关节每个点都带有三维坐标和可见度置信度。关键设计在于项目为每个关键点保存了两套坐标坐标系含义用途归一化坐标normalizedLandmarks关键点在图片平面上的位置范围 0~1屏幕空间的 2D 显示与分析世界坐标worldLandmarks以髋部为原点的 3D 空间坐标保留真实的肢体朝向关系用于姿态匹配为什么需要两套打个比方归一化坐标像是照片上的投影会随拍摄角度和人物远近变化世界坐标则是人物本身的骨架模型不会因为相机位置不同而失真。搜索时用世界坐标比较动作显示时用归一化坐标对齐画面各取所长。把这套检测能力封装成一个 Promise 接口整段代码不过几十行// src/utils/detect-pose.ts export function detectPose(image) { return new Promise(async function (resolve) { const pose await getInstance(); // 复用同一个 Pose 实例避免重复加载模型 pose.reset(); onResultsCallback resolve; await pose.send({image}); // 送入图像推理完成后通过回调 resolve }); }每一次检测就相当于给这张照片盖上了一枚独一无二的姿态指纹。而PhotoDataset这个类src/utils/PhotoDataset.ts会把所有照片的指纹批量压缩进一个landmarks.dat二进制文件里加载照片库时一次性读入内存几十万张图片的检索也能在毫秒级完成。原理第二层几何匹配姿势相似度如何量化读到这里你能获得理解 pose-search 最巧妙的部分——把像不像翻译成数学语言。有了姿态指纹下一个问题来了怎么判断这张照片的姿势和我摆的姿势像不像pose-search 的答案是一组姿态匹配器PoseMatcher每个匹配器负责一个身体部位。你可以翻一下src/Search/impl/目录会发现MatchShoulder、MatchElbow、MatchKnee、MatchHip、MatchFace、MatchChest等十几个实现肩、肘、膝、髋一应俱全甚至还有专门忽略相机角度的变体如MatchShoulderCameraUnrelated。以MatchShoulder为例它的思路可以概括成三步提取方向向量用左右肩、髋部等关键点计算躯干方向和肩部朝向得到几个代表动作的骨架向量转换到局部空间把世界坐标下的向量换算到以躯干为基准的局部坐标系从而排除人物高矮胖瘦的干扰比较角度差分别计算世界空间角度误差和视图空间角度误差误差越小说明动作越接近最终按综合分数排序。// src/Search/impl/MatchShoulder.ts核心逻辑节选 const error angleBetweenVec3(dirL, this.shoulderLocalDir); // 世界空间的角度误差 const viewError angleBetweenVec3(trunkUpView, this.trunkViewUp); // 视图空间的朝向误差 return { score: (Math.PI - error) * (Math.PI - viewError), // 误差越小分数越高 center: normalized[11].point, // 结果缩略图的聚焦中心 related: [...], // 关联关键点用于裁剪对齐 };这里的score不是玄学而是多个角度差的乘积——任何一个维度过大都会让总分迅速坍缩保证返回的永远是所有部位都接近的结果而不是某个单点碰巧吻合的误导项。搜索的编排逻辑也相当干净。所有匹配器统一实现PoseMatcher接口定义在src/Search/impl/search.ts一个filterAndSort函数完成逐张比对 → 过滤不合格 → 按分数降序的完整流程export function filterAndSort(photos, model, matcher) { matcher.prepare(model); // 先根据当前骨架姿态做预处理 photos.forEach(photo { const r matcher.match(photo); // 逐张照片计算匹配分数 if (r ! null) ret.push({...r, photo}); }); ret.sort((a, b) -a.score b.score); // 分数越高排越前 return ret; }这套prepare / match两段式设计非常值得借鉴prepare只算一次目标姿势的几何特征match则对每张照片复用把 O(N) 次重复计算压成了 O(1) 预计算 O(N) 轻量比对这才是它能秒级扫完整个图库的底气。亲手体验搜索左膝跪地是种什么感觉读到这里你能获得对项目交互与视觉呈现的整体印象。启动项目后你可以这么玩用鼠标拖拽左侧的 3D 骨架把左膝弯下去模拟一个单膝跪地的姿势然后在部位下拉框里选择 Left Knee点 Search。右侧照片墙会瞬间刷新每一张缩略图都自动以膝盖为中心裁剪对齐并且自动标记出左腿的关键点连线。上面这张截图来自项目仓库自带的editor.jpg展示的是编辑器页面——左侧是原图与叠加的骨架标注右侧是元数据面板你可以在这里给照片打标签、标记性别、运行姿态模型并写入数据库。配合搜索页使用你既能消费现成的图库也能亲手扩建自己的图库。一个很贴心的细节是如果你不希望结果受人物面向影响可以切到Camera Ignored忽略相机方向模式。此时匹配器会自动换成CameraUnrelated变体只比较动作本身、不比较朝向相当于告诉系统我要的是这个动作背对还是面对镜头都行。性能与架构为什么浏览器端能扛得住读到这里你能获得这套纯前端姿态识别方案在性能上的底气来源。你可能会担心把姿态识别和整库比对都塞进浏览器卡不卡pose-search 的架构给出了三层保障MediaPipe 的 WASM 优化模型文件经过预编译和体积压缩加载快、推理快专为 Web 场景打磨Web Workers 后台推理public/worker/detect-pose.worker.js把检测逻辑放到独立线程避免模型推理卡死界面WebGL 混合渲染2D 关键点用 Canvas 绘制3D 骨骼用 WebGL 着色器渲染src/components/SkeletonModelCanvas/下的light.vert、line.frag等着色器就是见证把 GPU 的资源充分利用起来。更重要的是数据库的匹配计算根本不涉及 GPU——姿态指纹是提前算好存进landmarks.dat的搜索时只是做纯内存里的向量角度比较。这意味着照片再多搜索也只是扫一遍浮点数而不是真的对每张图重新跑一次神经网络。顺带一提3D 骨骼渲染用到了gl-matrix做矩阵运算模型节点体系抽成了BodyPart、SkeletonModelNode这样的类把骨骼和节点的概念分得很清楚。如果你以后想加脖子匹配器手腕匹配器照着现有类的结构扩展即可。想把它改造成自己的工具给你两条路读到这里你能获得项目预留的扩展接口在哪儿以及两条可行的二次开发路线。路线一换数据源。PhotoDataset已经支持从photos.json和landmarks.dat加载数据writeToFile()还能把数据写回。配合编辑器页面的 Run Model 和 Add Record 按钮你可以用自己的照片库重建一套姿态数据集让搜索针对你的领域数据生效。路线二换匹配算法。实现PoseMatcher接口自定义prepare和match逻辑然后把它注册到src/Search/Search.ts的matchers注册表里页面上就会自动出现新的部位选项。比如你想搜腰部侧屈幅度完全可以仿照MatchShoulder写一个MatchWaist。对就是这么轻。整个项目的核心逻辑集中在src/Search/搜索与src/components/SkeletonModelCanvas/骨架渲染两个目录里架构清晰到花一个晚上就能通读的程度。省下翻图的时间把精力还给创作回到开头那个插画师的困境。有了 pose-search她的工作流会变成打开项目拖拽骨架摆出想要的姿势点击搜索几秒钟后参考图已经躺在屏幕上了。省下的是两小时的翻图时间保住的是创作状态里最宝贵的心流。这个项目带给你的价值可以归结为三句话如果你是创作者一个免费、离线、本地运行的姿势素材检索器找参考再也不用靠猜关键词如果你是开发者一套可复用的浏览器端人体姿态识别与几何匹配的完整参考实现PoseMatcher接口就是你的扩展起点如果你在评估技术选型它用事实证明了纯前端完成实时姿态检测与智能搜索完全可行零服务器成本、零隐私风险。接下来要做什么路径已经给你铺好了执行git clone https://gitcode.com/gh_mirrors/po/pose-search npm install npm run dev亲手体验一次姿态搜索通读src/Search/impl/下的匹配器代码体会几何算法如何量化动作相似度如果你有更好的思路按照PoseMatcher接口写一个新的匹配器提交上来让这个开源项目因为你而更强。别再让想找的姿势和搜到的图之间隔着一道关键词的墙了。这一次用你的身体去搜索。【免费下载链接】pose-searchx6ud.github.io/pose-search项目地址: https://gitcode.com/gh_mirrors/po/pose-search创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考