[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"tool-Volcomix--virtual-background":3,"similar-Volcomix--virtual-background":127},{"id":4,"github_repo":5,"name":6,"description_en":7,"description_zh":8,"ai_summary_zh":9,"readme_en":10,"readme_zh":11,"quickstart_zh":12,"use_case_zh":13,"hero_image_url":14,"owner_login":15,"owner_name":16,"owner_avatar_url":17,"owner_bio":18,"owner_company":19,"owner_location":20,"owner_email":18,"owner_twitter":21,"owner_website":22,"owner_url":23,"languages":24,"stars":48,"forks":49,"last_commit_at":50,"license":51,"difficulty_score":52,"env_os":53,"env_gpu":54,"env_ram":53,"env_deps":55,"category_tags":68,"github_topics":73,"view_count":92,"oss_zip_url":18,"oss_zip_packed_at":18,"status":93,"created_at":94,"updated_at":95,"faqs":96,"releases":126},4814,"Volcomix\u002Fvirtual-background","virtual-background","Demo on adding virtual background to a live video stream in the browser","virtual-background 是一个在浏览器中为实时视频流添加虚拟背景效果的开源演示项目。它主要解决了用户在网页端进行视频会议或直播时，无需安装额外软件即可快速替换或模糊背景的需求，特别适用于缺乏专业拍摄环境的场景。\n\n该项目非常适合前端开发者、WebAI 研究人员以及对浏览器端机器学习应用感兴趣的技术人员参考使用。通过阅读其源码，用户可以深入了解如何在网页环境中高效集成和调用先进的图像分割模型。\n\n技术层面，virtual-background 支持切换三种主流的预训练分割模型：BodyPix、MediaPipe Meet Segmentation 以及 ML Kit Selfie Segmentation。其独特亮点在于针对性能进行了深度优化：例如在 MediaPipe 方案中，项目没有简单依赖通用的 TensorFlow.js 后端，而是构建了一个基于 WebAssembly 的轻量级工具，结合 TFLite、XNNPACK 代理及 SIMD 指令集加速，实现了接近原生应用的运行效率。此外，它还巧妙利用 Canvas 2D 的滤镜与混合模式替代传统绘图方法，以在笔记本电脑","virtual-background 是一个在浏览器中为实时视频流添加虚拟背景效果的开源演示项目。它主要解决了用户在网页端进行视频会议或直播时，无需安装额外软件即可快速替换或模糊背景的需求，特别适用于缺乏专业拍摄环境的场景。\n\n该项目非常适合前端开发者、WebAI 研究人员以及对浏览器端机器学习应用感兴趣的技术人员参考使用。通过阅读其源码，用户可以深入了解如何在网页环境中高效集成和调用先进的图像分割模型。\n\n技术层面，virtual-background 支持切换三种主流的预训练分割模型：BodyPix、MediaPipe Meet Segmentation 以及 ML Kit Selfie Segmentation。其独特亮点在于针对性能进行了深度优化：例如在 MediaPipe 方案中，项目没有简单依赖通用的 TensorFlow.js 后端，而是构建了一个基于 WebAssembly 的轻量级工具，结合 TFLite、XNNPACK 代理及 SIMD 指令集加速，实现了接近原生应用的运行效率。此外，它还巧妙利用 Canvas 2D 的滤镜与混合模式替代传统绘图方法，以在笔记本电脑上获得更流畅的帧率。这是一个探索浏览器端高性能 AI 视觉处理的优秀范例。","# Virtual Background\n\n> Demo on adding virtual background to a live video stream in the browser.\n\n:point_right: [Try it live here!](https:\u002F\u002Fvolcomix.github.io\u002Fvirtual-background)\n\n[![](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FVolcomix_virtual-background_readme_760c1f703309.png)](https:\u002F\u002Fvolcomix.github.io\u002Fvirtual-background)\n\n## Table of contents\n\n- [Implementation details](#implementation-details)\n  - [BodyPix](#bodypix)\n  - [MediaPipe Meet Segmentation](#mediapipe-meet-segmentation)\n    - [Building TFLite to WebAssembly](#building-tflite-to-webassembly)\n    - [Canvas 2D + CPU](#canvas-2d--cpu)\n    - [WebGL 2](#webgl-2)\n  - [ML Kit Selfie Segmentation](#ml-kit-selfie-segmentation)\n- [Performance](#performance)\n- [Possible improvements](#possible-improvements)\n- [Related work](#related-work)\n- [Running locally](#running-locally)\n- [Building TensorFlow Lite tool](#building-tensorflow-lite-tool)\n\n## Implementation details\n\nIn this demo you can switch between 3 different ML pre-trained segmentation models:\n\n- [BodyPix](https:\u002F\u002Fgithub.com\u002Ftensorflow\u002Ftfjs-models\u002Fblob\u002Fmaster\u002Fbody-pix)\n- [MediaPipe Meet Segmentation](https:\u002F\u002Fmediapipe.page.link\u002Fmeet-mc)\n- [ML Kit Selfie Segmentation](https:\u002F\u002Fdevelopers.google.com\u002Fml-kit\u002Fvision\u002Fselfie-segmentation)\n\n### BodyPix\n\nThe drawing utils provided in BodyPix are not optimized for the simple background image use case of this demo. That's why I haven't used [toMask](https:\u002F\u002Fgithub.com\u002Ftensorflow\u002Ftfjs-models\u002Ftree\u002Fmaster\u002Fbody-pix#bodypixtomask) nor [drawMask](https:\u002F\u002Fgithub.com\u002Ftensorflow\u002Ftfjs-models\u002Ftree\u002Fmaster\u002Fbody-pix#bodypixdrawmask) methods from the API to get a higher framerate.\n\nThe [drawBokehEffect](https:\u002F\u002Fgithub.com\u002Ftensorflow\u002Ftfjs-models\u002Ftree\u002Fmaster\u002Fbody-pix#bodypixdrawbokeheffect) method from BodyPix API is not used. Instead, [CanvasRenderingContext2D.filter](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FCanvasRenderingContext2D\u002Ffilter) property is configured with [blur](\u003Chttps:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Ffilter#blur()>) and [CanvasRenderingContext2D.globalCompositeOperation](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FCanvasRenderingContext2D\u002FglobalCompositeOperation) is setup to blend the different layers according to the segmentation mask.\n\nThe result provides an interesting framerate on laptop but is not really usable on mobile (see [Performance](#performance) for more details). On both devices, the segmentation lacks precision compared to Meet segmentation model.\n\n**Note: BodyPix relies on the default TensorFlow.js backend for your device (i.e. `webgl` usually). The [WASM backend](https:\u002F\u002Fgithub.com\u002Ftensorflow\u002Ftfjs\u002Ftree\u002Fmaster\u002Ftfjs-backend-wasm) seems to be slower for this model, at least on MacBook Pro.**\n\n### MediaPipe Meet Segmentation\n\nMeet segmentation model is only available as a [TensorFlow Lite](https:\u002F\u002Fwww.tensorflow.org\u002Flite) model file. Few approaches are discussed in [this issue](https:\u002F\u002Fgithub.com\u002Ftensorflow\u002Ftfjs\u002Fissues\u002F4177) to convert and use it with TensorFlow.js but I decided to try implementing something closer to Google original approach described in [this post](https:\u002F\u002Fai.googleblog.com\u002F2020\u002F10\u002Fbackground-features-in-google-meet.html). Hence the demo relies on a small WebAssembly tool built on top of [TFLite](https:\u002F\u002Fblog.tensorflow.org\u002F2020\u002F07\u002Faccelerating-tensorflow-lite-xnnpack-integration.html) along with [XNNPACK](https:\u002F\u002Fgithub.com\u002Fgoogle\u002FXNNPACK) delegate and [SIMD](https:\u002F\u002Fgithub.com\u002FWebAssembly\u002Fsimd) support.\n\n**Note: [Meet segmentation model card](https:\u002F\u002Fmediapipe.page.link\u002Fmeet-mc) was initially released under [Apache 2.0](http:\u002F\u002Fwww.apache.org\u002Flicenses\u002FLICENSE-2.0) license (read more [here](https:\u002F\u002Fgithub.com\u002Ftensorflow\u002Ftfjs\u002Fissues\u002F4177) and [here](https:\u002F\u002Fgithub.com\u002Fgoogle\u002Fmediapipe\u002Fissues\u002F1460)) but seems to be switched to [Google Terms of Service](https:\u002F\u002Fpolicies.google.com\u002Fterms?hl=en-US) since Jan 21, 2021. Not sure what it means for this demo. [Here](docs\u002Fmeet-segmentation-model-card-2020-10-12.pdf) is a copy of the model card matching the model files used in this demo**\n\n#### Building TFLite to WebAssembly\n\nYou can find the source of the TFLite inference tool in the [tflite directory](.\u002Ftflite) of this repository. Instructions to build TFLite using Docker are described in a dedicated section: [Building TensorFlow Lite tool](#building-tensorflow-lite-tool).\n\n- The Bazel WORKSPACE configuration is inspired from [MediaPipe repository](https:\u002F\u002Fgithub.com\u002Fgoogle\u002Fmediapipe\u002Fblob\u002Fmaster\u002FWORKSPACE).\n- Emscripten toolchain for Bazel was setup following [Emsdk repository instructions](https:\u002F\u002Fgithub.com\u002Femscripten-core\u002Femsdk\u002Ftree\u002Fmaster\u002Fbazel) and changed to match [XNNPACK build config](https:\u002F\u002Fgithub.com\u002Fgoogle\u002FXNNPACK\u002Fblob\u002Fec0bf144ad55cde0698083f12e0a20d4525689a6\u002FBUILD.bazel#L7340).\n- TensorFlow source [is patched](tflite\u002Fentrypoint.sh#L7) to match Emscripten toolchain and WASM CPU.\n- C++ functions are [called directly from JavaScript](https:\u002F\u002Femscripten.org\u002Fdocs\u002Fporting\u002Fconnecting_cpp_and_javascript\u002FInteracting-with-code.html#call-compiled-c-c-code-directly-from-javascript) to achieve the best performance.\n- [Memory is accessed directly](https:\u002F\u002Femscripten.org\u002Fdocs\u002Fporting\u002Femscripten-runtime-environment.html#emscripten-memory-representation) from JavaScript through pointer offsets to exchange image data with WASM.\n\n#### Canvas 2D + CPU\n\nThis rendering pipeline is pretty much the same as for BodyPix. It relies on Canvas compositing properties to blend rendering layers according to the segmentation mask.\n\nInteractions with TFLite inference tool are executed on CPU to convert from UInt8 to Float32 for the model input and to apply softmax on the model output.\n\n#### WebGL 2\n\nThe WebGL 2 rendering pipeline relies entirely on `webgl2` canvas context and GLSL shaders for:\n\n- Resizing inputs to fit the segmentation model (there are still CPU operations to copy from RGBA UInt8Array to RGB Float32Array in TFLite WASM memory).\n- [Softmax](https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FSoftmax_function) on segmentation model output to get the probability of each pixel to be a person.\n- Joint bilateral filter to smooth the segmentation mask and to preserve edges from the original input frame (implementation based on [MediaPipe repository](https:\u002F\u002Fgithub.com\u002Fgoogle\u002Fmediapipe\u002Fblob\u002Fmaster\u002Fmediapipe\u002Fcalculators\u002Fimage\u002Fbilateral_filter_calculator.cc)).\n- Blending background image with [light wrapping](https:\u002F\u002Fwww.imaging-resource.com\u002Fnews\u002F2016\u002F02\u002F11\u002Fcreate-natural-looking-composite-images-using-light-wrapping-technique).\n- Original input frame background blur. Great articles [here](https:\u002F\u002Frastergrid.com\u002Fblog\u002F2010\u002F09\u002Fefficient-gaussian-blur-with-linear-sampling\u002F) and [here](https:\u002F\u002Fsoftware.intel.com\u002Fcontent\u002Fwww\u002Fus\u002Fen\u002Fdevelop\u002Fblogs\u002Fan-investigation-of-fast-real-time-gpu-based-image-blur-algorithms.html).\n\n### ML Kit Selfie Segmentation\n\n[Thanks to @RemarkableGuy for pointing out this model.](https:\u002F\u002Fgithub.com\u002FVolcomix\u002Fvirtual-background\u002Fissues\u002F2)\n\n[Selfie segmentation](https:\u002F\u002Fdevelopers.google.com\u002Fml-kit\u002Fvision\u002Fselfie-segmentation) model's architecture is very close to the one of Meet segmentation and they both seem to be generated from the same Keras model (see [this issue](https:\u002F\u002Fgithub.com\u002FVolcomix\u002Fvirtual-background\u002Fissues\u002F2) for more details). It is released under [Apache 2.0](http:\u002F\u002Fwww.apache.org\u002Flicenses\u002FLICENSE-2.0) and you can find in this repo a [copy of the model card](docs\u002Fmlkit-selfie-model-card-2021-02-16.pdf) matching the model used in this demo (here is the [original current model card](https:\u002F\u002Fdevelopers.google.com\u002Fml-kit\u002Fimages\u002Fvision\u002Fselfie-segmentation\u002Fselfie-model-card.pdf)). The model was extracted from its [official artifact](https:\u002F\u002Fmvnrepository.com\u002Fartifact\u002Fcom.google.mlkit\u002Fsegmentation-selfie\u002F16.0.0-beta1).\n\nUnlike what is described in the model card, the output of the model is a single channel allowing to get a float value of the segmentation mask. Besides that, the model is inferred using the exact same pipeline as Meet segmentation. However, the model does not perform as well as Meet segmentation because of its higher input resolution (see [Performance](#performance) for more details), even though it still offers better quality segmentation than BodyPix.\n\n## Performance\n\nHere are the performance observed for the whole rendering pipelines, including inference and post-processing, when using the device camera on smartphone **Pixel 3 (Chrome)**.\n\n| Model   | Input resolution | Backend          | Pipeline        | FPS |\n| ------- | ---------------- | ---------------- | --------------- | --- |\n| BodyPix | 640x360          | WebGL            | Canvas 2D + CPU | 11  |\n| ML Kit  | 256x256          | WebAssembly      | Canvas 2D + CPU | 9   |\n| ML Kit  | 256x256          | WebAssembly      | WebGL 2         | 9   |\n| ML Kit  | 256x256          | WebAssembly SIMD | Canvas 2D + CPU | 17  |\n| ML Kit  | 256x256          | WebAssembly SIMD | WebGL 2         | 19  |\n| Meet    | 256x144          | WebAssembly      | Canvas 2D + CPU | 14  |\n| Meet    | 256x144          | WebAssembly      | WebGL 2         | 16  |\n| Meet    | 256x144          | WebAssembly SIMD | Canvas 2D + CPU | 26  |\n| Meet    | 256x144          | WebAssembly SIMD | WebGL 2         | 31  |\n| Meet    | 160x96           | WebAssembly      | Canvas 2D + CPU | 29  |\n| Meet    | 160x96           | WebAssembly      | WebGL 2         | 35  |\n| Meet    | 160x96           | WebAssembly SIMD | Canvas 2D + CPU | 48  |\n| Meet    | 160x96           | WebAssembly SIMD | WebGL 2         | 60  |\n\n## Possible improvements\n\n- Rely on alpha channel to save texture fetches from the segmentation mask.\n- Blur the background image outside of the rendering loop and use it for light wrapping instead of the original background image. This should produce better rendering results for large light wrapping masks.\n- Optimize joint bilateral filter shader to prevent unnecessary variables, calculations and costly functions like `exp`.\n- Try [separable approximation](https:\u002F\u002Fwww.researchgate.net\u002Fpublication\u002F4181202_Separable_bilateral_filtering_for_fast_video_preprocessing) for joint bilateral filter.\n- Compute everything on lower source resolution (scaling down at the beginning of the pipeline).\n- Build TFLite and XNNPACK with multithreading support. Few configuration examples are in [TensorFlow.js WASM backend](https:\u002F\u002Fgithub.com\u002Ftensorflow\u002Ftfjs\u002Fblob\u002Fmaster\u002Ftfjs-backend-wasm\u002Fsrc\u002Fcc\u002FBUILD).\n- Detect WASM features to load automatically the right TFLite WASM runtime. Inspirations could be taken from [TensorFlow.js WASM backend](https:\u002F\u002Fgithub.com\u002Ftensorflow\u002Ftfjs\u002Fblob\u002Fmaster\u002Ftfjs-backend-wasm\u002Fsrc\u002Fflags_wasm.ts) which is based on [GoogleChromeLabs\u002Fwasm-feature-detect](https:\u002F\u002Fgithub.com\u002FGoogleChromeLabs\u002Fwasm-feature-detect).\n- Experiment with [DeepLabv3+](https:\u002F\u002Fgithub.com\u002Ftensorflow\u002Fmodels\u002Ftree\u002Fmaster\u002Fresearch\u002Fdeeplab) and maybe retrain `MobileNetv3-small` model directly.\n\n## Related work\n\nYou can learn more about a pre-trained TensorFlow.js model in the [BodyPix repository](https:\u002F\u002Fgithub.com\u002Ftensorflow\u002Ftfjs-models\u002Fblob\u002Fmaster\u002Fbody-pix).\n\nHere is a technical overview of [background features in Google Meet](https:\u002F\u002Fai.googleblog.com\u002F2020\u002F10\u002Fbackground-features-in-google-meet.html) which relies on:\n\n- [MediaPipe](https:\u002F\u002Fmediapipe.dev\u002F)\n- [WebAssembly](https:\u002F\u002Fwebassembly.org\u002F)\n- [WebAssembly SIMD](https:\u002F\u002Fgithub.com\u002FWebAssembly\u002Fsimd)\n- [WebGL](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FWebGL_API)\n- [XNNPACK](https:\u002F\u002Fgithub.com\u002Fgoogle\u002FXNNPACK)\n- [TFLite](https:\u002F\u002Fblog.tensorflow.org\u002F2020\u002F07\u002Faccelerating-tensorflow-lite-xnnpack-integration.html)\n- [Custom segmentation ML models from Google](https:\u002F\u002Fmediapipe.page.link\u002Fmeet-mc)\n- Custom rendering effects through OpenGL shaders from Google\n\n## Running locally\n\nIn the project directory, you can run:\n\n### `yarn start`\n\nRuns the app in the development mode.\\\nOpen [http:\u002F\u002Flocalhost:3000](http:\u002F\u002Flocalhost:3000) to view it in the browser.\n\nThe page will reload if you make edits.\\\nYou will also see any lint errors in the console.\n\n### `yarn test`\n\nLaunches the test runner in the interactive watch mode.\\\nSee the section about [running tests](https:\u002F\u002Ffacebook.github.io\u002Fcreate-react-app\u002Fdocs\u002Frunning-tests) for more information.\n\n### `yarn build`\n\nBuilds the app for production to the `build` folder.\\\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\\\nYour app is ready to be deployed!\n\nSee the section about [deployment](https:\u002F\u002Ffacebook.github.io\u002Fcreate-react-app\u002Fdocs\u002Fdeployment) for more information.\n\n## Building TensorFlow Lite tool\n\nDocker is required to build TensorFlow Lite inference tool locally.\n\n### `yarn build:tflite`\n\nBuilds WASM functions that can infer Meet and ML Kit segmentation models. The TFLite tool is built both with and without SIMD support.\n","# 虚拟背景\n\n> 在浏览器中为实时视频流添加虚拟背景的演示。\n\n:point_right: [在此处实时体验！](https:\u002F\u002Fvolcomix.github.io\u002Fvirtual-background)\n\n[![](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FVolcomix_virtual-background_readme_760c1f703309.png)](https:\u002F\u002Fvolcomix.github.io\u002Fvirtual-background)\n\n## 目录\n\n- [实现细节](#implementation-details)\n  - [BodyPix](#bodypix)\n  - [MediaPipe Meet 分割](#mediapipe-meet-segmentation)\n    - [将 TFLite 编译为 WebAssembly](#building-tflite-to-webassembly)\n    - [Canvas 2D + CPU](#canvas-2d--cpu)\n    - [WebGL 2](#webgl-2)\n  - [ML Kit 自拍分割](#ml-kit-selfie-segmentation)\n- [性能](#performance)\n- [可能的改进](#possible-improvements)\n- [相关工作](#related-work)\n- [本地运行](#running-locally)\n- [构建 TensorFlow Lite 工具](#building-tensorflow-lite-tool)\n\n## 实现细节\n\n在本演示中，您可以切换使用三种不同的预训练机器学习分割模型：\n\n- [BodyPix](https:\u002F\u002Fgithub.com\u002Ftensorflow\u002Ftfjs-models\u002Fblob\u002Fmaster\u002Fbody-pix)\n- [MediaPipe Meet 分割](https:\u002F\u002Fmediapipe.page.link\u002Fmeet-mc)\n- [ML Kit 自拍分割](https:\u002F\u002Fdevelopers.google.com\u002Fml-kit\u002Fvision\u002Fselfie-segmentation)\n\n### BodyPix\n\nBodyPix 提供的绘图工具并未针对本演示中简单的背景图像用例进行优化。因此，我没有使用 API 中的 [toMask](https:\u002F\u002Fgithub.com\u002Ftensorflow\u002Ftfjs-models\u002Ftree\u002Fmaster\u002Fbody-pix#bodypixtomask) 或 [drawMask](https:\u002F\u002Fgithub.com\u002Ftensorflow\u002Ftfjs-models\u002Ftree\u002Fmaster\u002Fbody-pix#bodypixdrawmask) 方法来提高帧率。\n\nBodyPix API 中的 [drawBokehEffect](https:\u002F\u002Fgithub.com\u002Ftensorflow\u002Ftfjs-models\u002Ftree\u002Fmaster\u002Fbody-pix#bodypixdrawbokeheffect) 方法也没有被使用。取而代之的是，通过配置 [CanvasRenderingContext2D.filter](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FCanvasRenderingContext2D\u002Ffilter) 属性中的 [blur](\u003Chttps:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Ffilter#blur()>)，并设置 [CanvasRenderingContext2D.globalCompositeOperation](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FCanvasRenderingContext2D\u002FglobalCompositeOperation)，根据分割掩码混合不同图层。\n\n这样的实现方式在笔记本电脑上可以获得不错的帧率，但在移动设备上则不太实用（更多详情请参阅 [性能](#performance)）。无论是在哪种设备上，与 Meet 分割模型相比，其分割精度都稍显不足。\n\n**注意：BodyPix 依赖于您设备上的默认 TensorFlow.js 后端（通常是 `webgl`）。对于此模型而言，[WASM 后端](https:\u002F\u002Fgithub.com\u002Ftensorflow\u002Ftfjs\u002Ftree\u002Fmaster\u002Ftfjs-backend-wasm)似乎速度较慢，至少在 MacBook Pro 上是如此。**\n\n### MediaPipe Meet 分割\n\nMeet 分割模型仅以 [TensorFlow Lite](https:\u002F\u002Fwww.tensorflow.org\u002Flite) 模型文件的形式提供。在 [此问题](https:\u002F\u002Fgithub.com\u002Ftensorflow\u002Ftfjs\u002Fissues\u002F4177) 中讨论了几种将其转换并与 TensorFlow.js 配合使用的方案，但我决定尝试实现一种更接近 Google 原始方法的方式，该方法在 [这篇博客文章](https:\u002F\u002Fai.googleblog.com\u002F2020\u002F10\u002Fbackground-features-in-google-meet.html) 中有所描述。因此，本演示依赖于一个基于 [TFLite](https:\u002F\u002Fblog.tensorflow.org\u002F2020\u002F07\u002Faccelerating-tensorflow-lite-xnnpack-integration.html) 构建的 WebAssembly 工具，并结合 [XNNPACK](https:\u002F\u002Fgithub.com\u002Fgoogle\u002FXNNPACK) 委托以及 [SIMD](https:\u002F\u002Fgithub.com\u002FWebAssembly\u002Fsimd) 支持。\n\n**注意：[Meet 分割模型卡片](https:\u002F\u002Fmediapipe.page.link\u002Fmeet-mc) 最初是以 [Apache 2.0](http:\u002F\u002Fwww.apache.org\u002Flicenses\u002FLICENSE-2.0) 许可证发布的（更多信息请参阅 [此处](https:\u002F\u002Fgithub.com\u002Ftensorflow\u002Ftfjs\u002Fissues\u002F4177) 和 [此处](https:\u002F\u002Fgithub.com\u002Fgoogle\u002Fmediapipe\u002Fissues\u002F1460)），但自 2021 年 1 月 21 日起，似乎已切换为 [Google 服务条款](https:\u002F\u002Fpolicies.google.com\u002Fterms?hl=en-US)。这对手此演示意味着什么尚不清楚。[这里](docs\u002Fmeet-segmentation-model-card-2020-10-12.pdf) 是一份与本演示所用模型文件相符的模型卡片副本。**\n\n#### 将 TFLite 编译为 WebAssembly\n\n您可以在本仓库的 [tflite 目录](.\u002Ftflite) 中找到 TFLite 推理工具的源代码。使用 Docker 构建 TFLite 的说明已在专门的部分中介绍：[构建 TensorFlow Lite 工具](#building-tensorflow-lite-tool)。\n\n- Bazel WORKSPACE 配置灵感来源于 [MediaPipe 仓库](https:\u002F\u002Fgithub.com\u002Fgoogle\u002Fmediapipe\u002Fblob\u002Fmaster\u002FWORKSPACE)。\n- Bazel 的 Emscripten 工具链按照 [Emsdk 仓库的说明](https:\u002F\u002Fgithub.com\u002Femscripten-core\u002Femsdk\u002Ftree\u002Fmaster\u002Fbazel) 进行设置，并调整为与 [XNNPACK 构建配置](https:\u002F\u002Fgithub.com\u002Fgoogle\u002FXNNPACK\u002Fblob\u002Fec0bf144ad55cde0698083f12e0a20d4525689a6\u002FBUILD.bazel#L7340)相匹配。\n- TensorFlow 源代码已被 [打补丁](tflite\u002Fentrypoint.sh#L7) 以适应 Emscripten 工具链和 WASM CPU。\n- C++ 函数被 [直接从 JavaScript 调用](https:\u002F\u002Femscripten.org\u002Fdocs\u002Fporting\u002Fconnecting_cpp_and_javascript\u002FInteracting-with-code.html#call-compiled-c-c-code-directly-from-javascript)，以达到最佳性能。\n- 通过指针偏移量，JavaScript 可以直接 [访问内存](https:\u002F\u002Femscripten.org\u002Fdocs\u002Fporting\u002Femscripten-runtime-environment.html#emscripten-memory-representation)，从而与 WASM 交换图像数据。\n\n#### Canvas 2D + CPU\n\n此渲染管线与 BodyPix 的基本相同。它依赖于 Canvas 的合成属性，根据分割掩码混合渲染图层。\n\n与 TFLite 推理工具的交互在 CPU 上执行，用于将输入从 UInt8 转换为 Float32，并对模型输出应用 softmax。\n\n#### WebGL 2\n\nWebGL 2 渲染管线完全依赖于 `webgl2` 画布上下文和 GLSL 着色器，用于：\n\n- 调整输入大小以适配分割模型（不过，在 TFLite WASM 内存中，仍然需要 CPU 操作将 RGBA UInt8Array 复制到 RGB Float32Array）。\n- 对分割模型输出应用 [softmax](https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FSoftmax_function)，以获取每个像素属于人物的概率。\n- 使用联合双边滤波器平滑分割掩码，并保留原始输入帧中的边缘（实现基于 [MediaPipe 仓库](https:\u002F\u002Fgithub.com\u002Fgoogle\u002Fmediapipe\u002Fblob\u002Fmaster\u002Fmediapipe\u002Fcalculators\u002Fimage\u002Fbilateral_filter_calculator.cc)）。\n- 将背景图像与 [光线包裹](https:\u002F\u002Fwww.imaging-resource.com\u002Fnews\u002F2016\u002F02\u002F11\u002Fcreate-natural-looking-composite-images-using-light-wrapping-technique) 技术相结合。\n- 对原始输入帧进行背景模糊处理。有关高效高斯模糊的优秀文章可以参见 [这里](https:\u002F\u002Frastergrid.com\u002Fblog\u002F2010\u002F09\u002Fefficient-gaussian-blur-with-linear-sampling\u002F) 和 [这里](https:\u002F\u002Fsoftware.intel.com\u002Fcontent\u002Fwww\u002Fus\u002Fen\u002Fdevelop\u002Fblogs\u002Fan-investigation-of-fast-real-time-gpu-based-image-blur-algorithms.html)。\n\n### ML Kit 自拍分割\n\n[感谢 @RemarkableGuy 指出这个模型。](https:\u002F\u002Fgithub.com\u002FVolcomix\u002Fvirtual-background\u002Fissues\u002F2)\n\n[自拍分割](https:\u002F\u002Fdevelopers.google.com\u002Fml-kit\u002Fvision\u002Fselfie-segmentation)模型的架构与 Meet 分割非常接近，两者似乎都源自同一个 Keras 模型（详情请参阅 [此问题](https:\u002F\u002Fgithub.com\u002FVolcomix\u002Fvirtual-background\u002Fissues\u002F2)）。该模型采用 [Apache 2.0](http:\u002F\u002Fwww.apache.org\u002Flicenses\u002FLICENSE-2.0) 许可证发布，本仓库中包含一份与本演示所用模型匹配的 [模型卡片副本](docs\u002Fmlkit-selfie-model-card-2021-02-16.pdf)（原始最新模型卡片请见 [此处](https:\u002F\u002Fdevelopers.google.com\u002Fml-kit\u002Fimages\u002Fvision\u002Fselfie-segmentation\u002Fselfie-model-card.pdf)）。该模型是从其 [官方制品](https:\u002F\u002Fmvnrepository.com\u002Fartifact\u002Fcom.google.mlkit\u002Fsegmentation-selfie\u002F16.0.0-beta1) 中提取出来的。\n\n与模型卡片中的描述不同，该模型的输出为单通道，可以直接得到分割掩码的浮点值。除此之外，该模型的推理流程与 Meet 分割完全一致。然而，由于输入分辨率较高，该模型的表现不如 Meet 分割（更多细节请参阅 [性能](#performance) 部分），尽管它仍然比 BodyPix 提供更高质量的分割结果。\n\n## 性能\n\n以下是在智能手机 **Pixel 3 (Chrome)** 上使用设备摄像头时，整个渲染流水线（包括推理和后处理）所观测到的性能。\n\n| 模型   | 输入分辨率 | 后端          | 流水线        | FPS |\n| ------- | ---------------- | ---------------- | --------------- | --- |\n| BodyPix | 640x360          | WebGL            | Canvas 2D + CPU | 11  |\n| ML Kit  | 256x256          | WebAssembly      | Canvas 2D + CPU | 9   |\n| ML Kit  | 256x256          | WebAssembly      | WebGL 2         | 9   |\n| ML Kit  | 256x256          | WebAssembly SIMD | Canvas 2D + CPU | 17  |\n| ML Kit  | 256x256          | WebAssembly SIMD | WebGL 2         | 19  |\n| Meet    | 256x144          | WebAssembly      | Canvas 2D + CPU | 14  |\n| Meet    | 256x144          | WebAssembly      | WebGL 2         | 16  |\n| Meet    | 256x144          | WebAssembly SIMD | Canvas 2D + CPU | 26  |\n| Meet    | 256x144          | WebAssembly SIMD | WebGL 2         | 31  |\n| Meet    | 160x96           | WebAssembly      | Canvas 2D + CPU | 29  |\n| Meet    | 160x96           | WebAssembly      | WebGL 2         | 35  |\n| Meet    | 160x96           | WebAssembly SIMD | Canvas 2D + CPU | 48  |\n| Meet    | 160x96           | WebAssembly SIMD | WebGL 2         | 60  |\n\n## 可能的改进\n\n- 利用 Alpha 通道来减少从分割掩码中读取纹理的操作。\n- 在渲染循环之外对背景图像进行模糊处理，并将其用于光照包裹，而不是使用原始背景图像。这样可以为较大的光照包裹掩码生成更好的渲染效果。\n- 优化联合双边滤波着色器，以避免不必要的变量、计算以及 `exp` 等开销较大的函数。\n- 尝试使用 [可分离近似](https:\u002F\u002Fwww.researchgate.net\u002Fpublication\u002F4181202_Separable_bilateral_filtering_for_fast_video_preprocessing) 来实现联合双边滤波。\n- 在较低的源分辨率下进行所有计算（在流水线开始时进行缩放）。\n- 构建支持多线程的 TFLite 和 XNNPACK。一些配置示例可以在 [TensorFlow.js WASM 后端](https:\u002F\u002Fgithub.com\u002Ftensorflow\u002Ftfjs\u002Fblob\u002Fmaster\u002Ftfjs-backend-wasm\u002Fsrc\u002Fcc\u002FBUILD) 中找到。\n- 检测 WASM 特性，以自动加载合适的 TFLite WASM 运行时。可以参考 [TensorFlow.js WASM 后端](https:\u002F\u002Fgithub.com\u002Ftensorflow\u002Ftfjs\u002Fblob\u002Fmaster\u002Ftfjs-backend-wasm\u002Fsrc\u002Fflags_wasm.ts)，其基于 [GoogleChromeLabs\u002Fwasm-feature-detect](https:\u002F\u002Fgithub.com\u002FGoogleChromeLabs\u002Fwasm-feature-detect)。\n- 尝试使用 [DeepLabv3+](https:\u002F\u002Fgithub.com\u002Ftensorflow\u002Fmodels\u002Ftree\u002Fmaster\u002Fresearch\u002Fdeeplab)，并考虑直接重新训练 `MobileNetv3-small` 模型。\n\n## 相关工作\n您可以在 [BodyPix 仓库](https:\u002F\u002Fgithub.com\u002Ftensorflow\u002Ftfjs-models\u002Fblob\u002Fmaster\u002Fbody-pix) 中了解更多关于预训练 TensorFlow.js 模型的信息。\n\n以下是关于 [Google Meet 中的背景功能](https:\u002F\u002Fai.googleblog.com\u002F2020\u002F10\u002Fbackground-features-in-google-meet.html) 的技术概述，该功能依赖于：\n\n- [MediaPipe](https:\u002F\u002Fmediapipe.dev\u002F)\n- [WebAssembly](https:\u002F\u002Fwebassembly.org\u002F)\n- [WebAssembly SIMD](https:\u002F\u002Fgithub.com\u002FWebAssembly\u002Fsimd)\n- [WebGL](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FWebGL_API)\n- [XNNPACK](https:\u002F\u002Fgithub.com\u002Fgoogle\u002FXNNPACK)\n- [TFLite](https:\u002F\u002Fblog.tensorflow.org\u002F2020\u002F07\u002Faccelerating-tensorflow-lite-xnnpack-integration.html)\n- [来自 Google 的自定义分割机器学习模型](https:\u002F\u002Fmediapipe.page.link\u002Fmeet-mc)\n- 通过 OpenGL 着色器实现的 Google 自定义渲染效果\n\n## 本地运行\n\n在项目目录中，您可以运行：\n\n### `yarn start`\n\n以开发模式运行应用程序。\\\n打开 [http:\u002F\u002Flocalhost:3000](http:\u002F\u002Flocalhost:3000) 即可在浏览器中查看。\n\n如果您进行编辑，页面将会重新加载。\\\n同时，任何 lint 错误也会显示在控制台中。\n\n### `yarn test`\n\n以交互式监视模式启动测试运行程序。\\\n更多信息请参阅关于 [运行测试](https:\u002F\u002Ffacebook.github.io\u002Fcreate-react-app\u002Fdocs\u002Frunning-tests) 的章节。\n\n### `yarn build`\n\n将应用程序构建为生产版本，并输出到 `build` 文件夹。\\\n它会在生产模式下正确地打包 React，并优化构建以获得最佳性能。\n\n构建后的文件会被压缩，文件名中会包含哈希值。\\\n您的应用已准备好部署！\n\n更多信息请参阅关于 [部署](https:\u002F\u002Ffacebook.github.io\u002Fcreate-react-app\u002Fdocs\u002Fdeployment) 的章节。\n\n## 构建 TensorFlow Lite 工具\n\n本地构建 TensorFlow Lite 推理工具需要 Docker。\n\n### `yarn build:tflite`\n\n构建可用于推理 Meet 和 ML Kit 分割模型的 WASM 函数。TFLite 工具会分别构建支持和不支持 SIMD 的版本。","# Virtual Background 快速上手指南\n\n本项目是一个在浏览器中为实时视频流添加虚拟背景效果的演示工具，支持多种机器学习分割模型（BodyPix、MediaPipe Meet Segmentation、ML Kit Selfie Segmentation）。\n\n## 环境准备\n\n### 系统要求\n- **操作系统**：Windows \u002F macOS \u002F Linux\n- **浏览器**：推荐使用最新版的 Chrome 或 Edge（需支持 WebGL 2 和 WebAssembly SIMD 以获得最佳性能）\n- **硬件**：\n  - 桌面端：建议配备独立显卡以获得更高帧率\n  - 移动端：部分高端机型（如 Pixel 3+）可运行，但帧率和精度可能受限\n\n### 前置依赖\n- **Node.js** (推荐 v14 或更高版本)\n- **Yarn** 包管理器\n- **Docker** (仅当需要重新构建 TFLite WebAssembly 工具时需要)\n\n## 安装步骤\n\n1. **克隆项目仓库**\n   ```bash\n   git clone https:\u002F\u002Fgithub.com\u002FVolcomix\u002Fvirtual-background.git\n   cd virtual-background\n   ```\n\n2. **安装依赖**\n   建议使用国内镜像源加速安装（如淘宝镜像）：\n   ```bash\n   yarn config set registry https:\u002F\u002Fregistry.npmmirror.com\n   yarn install\n   ```\n\n3. **(可选) 构建 TFLite 工具**\n   如果需要自定义或更新底层的 WebAssembly 推理工具，请参考原文档中的 \"Building TensorFlow Lite tool\" 章节使用 Docker 进行构建。一般用户可直接使用项目中已预编译的文件。\n\n## 基本使用\n\n### 1. 启动开发服务器\n在项目根目录下运行以下命令启动本地服务：\n\n```bash\nyarn start\n```\n\n### 2. 访问应用\n打开浏览器访问：\n```text\nhttp:\u002F\u002Flocalhost:3000\n```\n\n### 3. 功能操作\n- 允许浏览器访问摄像头权限。\n- 在界面中选择不同的分割模型（BodyPix, Meet Segmentation, ML Kit）。\n- 切换渲染后端（Canvas 2D + CPU 或 WebGL 2），WebGL 2 通常性能更佳。\n- 上传或选择预设的背景图片\u002F视频，即可看到虚拟背景效果。\n\n> **提示**：若需在移动设备测试，请确保手机与电脑在同一局域网内，并使用 `0.0.0.0` 绑定地址启动服务，或直接部署至静态托管服务（如 GitHub Pages）后通过 HTTPS 访问。","某远程协作团队需要在浏览器端快速搭建一个无需安装客户端的视频会议原型，以测试新功能的用户接受度。\n\n### 没有 virtual-background 时\n- 团队成员在家办公时背景杂乱（如堆满杂物的书架或走动家属），严重分散参会者注意力，影响专业形象。\n- 若要实现背景替换，后端需部署昂贵的 GPU 服务器进行实时视频流处理，导致原型开发成本高昂且延迟巨大。\n- 现有方案往往依赖特定操作系统或强制用户下载专用客户端，无法直接在 Chrome 或 Firefox 等主流浏览器中即开即用。\n- 开发者在尝试集成 BodyPix 等模型时，因默认绘图工具未针对背景图优化，导致帧率过低，画面卡顿无法实用。\n\n### 使用 virtual-background 后\n- 利用内置的 MediaPipe Meet Segmentation 或 ML Kit 模型，用户在网页端即可实时精准分割人像，自动替换为统一的虚拟办公室背景。\n- 通过 WebAssembly 和 WebGL 2 加速技术，将计算压力完全转移至用户本地设备，无需后端介入即可流畅运行，大幅降低服务器成本。\n- 基于纯前端实现，任何拥有现代浏览器的设备（包括部分移动端）均可直接访问链接使用，彻底消除了安装门槛。\n- 针对背景替换场景专门优化的渲染逻辑（如使用 Canvas filter 替代默认 drawMask），显著提升了帧率，确保了视频流的顺滑体验。\n\nvirtual-background 让开发者能在零后端负担的前提下，为浏览器视频流赋予企业级的隐私保护与专业化视觉效果。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FVolcomix_virtual-background_760c1f70.png","Volcomix","Sébastien Jalliffier Verne","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002FVolcomix_961cd036.jpg",null,"@contrastio","Grenoble","sebjalliff","https:\u002F\u002Fvolcomix.github.io\u002F","https:\u002F\u002Fgithub.com\u002FVolcomix",[25,29,33,37,40,44],{"name":26,"color":27,"percentage":28},"TypeScript","#3178c6",91.9,{"name":30,"color":31,"percentage":32},"HTML","#e34c26",2.6,{"name":34,"color":35,"percentage":36},"Starlark","#76d275",2.4,{"name":38,"color":39,"percentage":36},"C++","#f34b7d",{"name":41,"color":42,"percentage":43},"Shell","#89e051",0.5,{"name":45,"color":46,"percentage":47},"Dockerfile","#384d54",0.2,516,126,"2026-03-31T08:15:26","Apache-2.0",4,"未说明","非必需。主要依赖浏览器环境，支持 WebGL 2 或 CPU (WebAssembly) 后端。性能取决于设备 GPU\u002FCPU 能力，无特定显卡型号或 CUDA 版本要求。",{"notes":56,"python":57,"dependencies":58},"这是一个基于浏览器的演示项目，无需安装 Python 环境。核心运行依赖于支持 WebAssembly (含 SIMD 优化更佳) 和 WebGL 2 的现代浏览器。若需本地构建 TFLite WebAssembly 工具，则需要 Docker、Bazel 和 Emscripten 工具链。在移动设备上使用 BodyPix 模型时性能较差，建议使用 MediaPipe Meet Segmentation 模型以获得更好帧率。","不需要",[59,60,61,62,63,64,65,66,67],"TensorFlow.js","BodyPix","MediaPipe Meet Segmentation (TFLite)","ML Kit Selfie Segmentation","WebAssembly","XNNPACK","Emscripten","Bazel","Node.js\u002FYarn (用于本地开发)",[69,70,71,72],"开发框架","视频","插件","图像",[74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91],"react","video","stream","demo","typescript","tensorflow","tfjs","tflite","wasm","webgl","background","segmentation","shaders","simd","bodypix","mlkit","selfie","mediapipe",2,"ready","2026-03-27T02:49:30.150509","2026-04-07T11:35:25.683529",[97,102,107,112,117,122],{"id":98,"question_zh":99,"answer_zh":100,"source_url":101},21875,"当浏览器标签页切换到后台时，视频为什么会暂停？如何解决？","这是由于浏览器为了节省资源，在标签页处于后台时会降低或暂停请求动画帧（RAF）。解决方案是参考提交 af46ab9d1017d03ff1c519f395b996ee21006957 中的修复方法。需要注意的是，该修复可能导致 FPS 不稳定。为了平衡性能和后台运行能力，可以考虑通过 UI 开关控制是否使用 `await readPixelsAsync()`：使用它可以避免阻塞主线程但会降低 FPS，移除 `await` 则能提高 FPS 但可能影响后台运行稳定性。此外，也可以考虑使用 Web Worker 来处理定时任务。","https:\u002F\u002Fgithub.com\u002FVolcomix\u002Fvirtual-background\u002Fissues\u002F25",{"id":103,"question_zh":104,"answer_zh":105,"source_url":106},21876,"如何在 Angular 或其他构建工具中解决 tflite.wasm 文件路径错误（404 Not Found）的问题？","tflite.js 中硬编码了 wasm 文件的路径，导致在某些构建环境（如 Angular）中无法找到文件。解决方法是在初始化模块时传入 `locateFile` 配置函数来动态指定文件路径。示例代码如下：\n\nconst createdTFLiteSIMD = await createTFLiteModule({\n  locateFile: (file) => 'path\u002Fto\u002Fyour\u002Ftflite.wasm'\n});\n\n或者参考 MediaPipe 的用法：\n\nconst selfieSegmentation = new SelfieSegmentation({\n  locateFile: (file) => {\n    return `https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@mediapipe\u002Fselfie_segmentation\u002F${file}`;\n  }\n});","https:\u002F\u002Fgithub.com\u002FVolcomix\u002Fvirtual-background\u002Fissues\u002F16",{"id":108,"question_zh":109,"answer_zh":110,"source_url":111},21877,"为什么 BodyPix 的 TFLite 模型在此项目中无法正常工作或输出分辨率异常？","BodyPix 模型的输出通常需要处理由步长（strides）引起的填充（padding）和缩放问题，这需要额外的 TensorFlow 逻辑来将低分辨率的输出掩码映射回原始图像尺寸。在该项目的演示中实现这些逻辑需要大量额外工作。此外，测试表明在 WASM 上运行 BodyPix TFLite 模型的性能并不比 WebGL 上的 TFJS 版本好，甚至更差，且支持的分辨率更低。因此，目前不建议在此管道中使用 BodyPix TFLite 模型。","https:\u002F\u002Fgithub.com\u002FVolcomix\u002Fvirtual-background\u002Fissues\u002F11",{"id":113,"question_zh":114,"answer_zh":115,"source_url":116},21878,"运行 `yarn build:tflite` 构建 TFLite 镜像失败怎么办？","构建失败通常与 Emscripten 链接错误或依赖项版本有关。维护者已确认相关 CI 构建问题已修复。如果遇到类似链接失败（Linking tflite-simd failed），请确保拉取最新的代码库，因为维护者已经解决了导致构建中断的问题。如果文件体积异常增大，可能是由于 TensorFlow 或 XNNPACK 底层更新所致，通常不影响功能使用。","https:\u002F\u002Fgithub.com\u002FVolcomix\u002Fvirtual-background\u002Fissues\u002F48",{"id":118,"question_zh":119,"answer_zh":120,"source_url":121},21879,"如何更新项目中的 TFLite 模型和对应的 WASM 文件以使用最新版本？","项目可能使用的是较旧版本的模型（如 1 月份的 Selfie Segmentation 模型）。要更新模型，请访问 Google MediaPipe 官方文档获取最新的模型文件（https:\u002F\u002Fdevelopers.google.com\u002Fmediapipe\u002Fsolutions\u002Fvision\u002Fimage_segmenter）。注意，直接替换模型文件后，可能需要重新构建 WASM 推理工具，因为新模型可能与旧的推理工具不兼容，这也是导致 GitHub Workflow 构建失败的常见原因。建议等待项目维护者更新或自行排查推理工具的兼容性错误。","https:\u002F\u002Fgithub.com\u002FVolcomix\u002Fvirtual-background\u002Fissues\u002F62",{"id":123,"question_zh":124,"answer_zh":125,"source_url":111},21880,"使用 TFLite WASM 模型时性能不如预期，有什么优化建议？","如果在 WASM 上运行 TFLite 模型性能不佳（例如 FPS 低于 TFJS WebGL 版本），可以尝试以下优化：1. 检查是否使用了 SIMD 版本的 WASM 文件（tflite-simd.wasm），通常性能更好；2. 调整模型参数，例如使用更快的模型变体（如 mobilenet050, stride16）；3. 权衡精度与速度，尝试使用 float16 或 int8 量化模型；4. 如果不需要后台运行，可以考虑移除 `readPixelsAsync()` 前的 `await` 以提升帧率，但这可能会阻塞主线程。",[],[128,139,147,156,164,172],{"id":129,"name":130,"github_repo":131,"description_zh":132,"stars":133,"difficulty_score":134,"last_commit_at":135,"category_tags":136,"status":93},4358,"openclaw","openclaw\u002Fopenclaw","OpenClaw 是一款专为个人打造的本地化 AI 助手，旨在让你在自己的设备上拥有完全可控的智能伙伴。它打破了传统 AI 助手局限于特定网页或应用的束缚，能够直接接入你日常使用的各类通讯渠道，包括微信、WhatsApp、Telegram、Discord、iMessage 等数十种平台。无论你在哪个聊天软件中发送消息，OpenClaw 都能即时响应，甚至支持在 macOS、iOS 和 Android 设备上进行语音交互，并提供实时的画布渲染功能供你操控。\n\n这款工具主要解决了用户对数据隐私、响应速度以及“始终在线”体验的需求。通过将 AI 部署在本地，用户无需依赖云端服务即可享受快速、私密的智能辅助，真正实现了“你的数据，你做主”。其独特的技术亮点在于强大的网关架构，将控制平面与核心助手分离，确保跨平台通信的流畅性与扩展性。\n\nOpenClaw 非常适合希望构建个性化工作流的技术爱好者、开发者，以及注重隐私保护且不愿被单一生态绑定的普通用户。只要具备基础的终端操作能力（支持 macOS、Linux 及 Windows WSL2），即可通过简单的命令行引导完成部署。如果你渴望拥有一个懂你",349277,3,"2026-04-06T06:32:30",[137,69,72,138],"Agent","数据工具",{"id":140,"name":141,"github_repo":142,"description_zh":143,"stars":144,"difficulty_score":134,"last_commit_at":145,"category_tags":146,"status":93},3808,"stable-diffusion-webui","AUTOMATIC1111\u002Fstable-diffusion-webui","stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。\n\n无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。",162132,"2026-04-05T11:01:52",[69,72,137],{"id":148,"name":149,"github_repo":150,"description_zh":151,"stars":152,"difficulty_score":92,"last_commit_at":153,"category_tags":154,"status":93},1381,"everything-claude-code","affaan-m\u002Feverything-claude-code","everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。\n\n通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。\n\n这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上",142651,"2026-04-06T23:34:12",[69,137,155],"语言模型",{"id":157,"name":158,"github_repo":159,"description_zh":160,"stars":161,"difficulty_score":92,"last_commit_at":162,"category_tags":163,"status":93},2271,"ComfyUI","Comfy-Org\u002FComfyUI","ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。\n\n这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。\n\n无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",107888,"2026-04-06T11:32:50",[69,72,137],{"id":165,"name":166,"github_repo":167,"description_zh":168,"stars":169,"difficulty_score":92,"last_commit_at":170,"category_tags":171,"status":93},4721,"markitdown","microsoft\u002Fmarkitdown","MarkItDown 是一款由微软 AutoGen 团队打造的轻量级 Python 工具，专为将各类文件高效转换为 Markdown 格式而设计。它支持 PDF、Word、Excel、PPT、图片（含 OCR）、音频（含语音转录）、HTML 乃至 YouTube 链接等多种格式的解析，能够精准提取文档中的标题、列表、表格和链接等关键结构信息。\n\n在人工智能应用日益普及的今天，大语言模型（LLM）虽擅长处理文本，却难以直接读取复杂的二进制办公文档。MarkItDown 恰好解决了这一痛点，它将非结构化或半结构化的文件转化为模型“原生理解”且 Token 效率极高的 Markdown 格式，成为连接本地文件与 AI 分析 pipeline 的理想桥梁。此外，它还提供了 MCP（模型上下文协议）服务器，可无缝集成到 Claude Desktop 等 LLM 应用中。\n\n这款工具特别适合开发者、数据科学家及 AI 研究人员使用，尤其是那些需要构建文档检索增强生成（RAG）系统、进行批量文本分析或希望让 AI 助手直接“阅读”本地文件的用户。虽然生成的内容也具备一定可读性，但其核心优势在于为机器",93400,"2026-04-06T19:52:38",[71,69],{"id":173,"name":174,"github_repo":175,"description_zh":176,"stars":177,"difficulty_score":134,"last_commit_at":178,"category_tags":179,"status":93},4487,"LLMs-from-scratch","rasbt\u002FLLMs-from-scratch","LLMs-from-scratch 是一个基于 PyTorch 的开源教育项目，旨在引导用户从零开始一步步构建一个类似 ChatGPT 的大型语言模型（LLM）。它不仅是同名技术著作的官方代码库，更提供了一套完整的实践方案，涵盖模型开发、预训练及微调的全过程。\n\n该项目主要解决了大模型领域“黑盒化”的学习痛点。许多开发者虽能调用现成模型，却难以深入理解其内部架构与训练机制。通过亲手编写每一行核心代码，用户能够透彻掌握 Transformer 架构、注意力机制等关键原理，从而真正理解大模型是如何“思考”的。此外，项目还包含了加载大型预训练权重进行微调的代码，帮助用户将理论知识延伸至实际应用。\n\nLLMs-from-scratch 特别适合希望深入底层原理的 AI 开发者、研究人员以及计算机专业的学生。对于不满足于仅使用 API，而是渴望探究模型构建细节的技术人员而言，这是极佳的学习资源。其独特的技术亮点在于“循序渐进”的教学设计：将复杂的系统工程拆解为清晰的步骤，配合详细的图表与示例，让构建一个虽小但功能完备的大模型变得触手可及。无论你是想夯实理论基础，还是为未来研发更大规模的模型做准备",90106,"2026-04-06T11:19:32",[155,72,137,69]]