[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-jeeliz--jeelizWeboji":3,"tool-jeeliz--jeelizWeboji":64},[4,17,27,35,43,56],{"id":5,"name":6,"github_repo":7,"description_zh":8,"stars":9,"difficulty_score":10,"last_commit_at":11,"category_tags":12,"status":16},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,3,"2026-04-05T11:01:52",[13,14,15],"开发框架","图像","Agent","ready",{"id":18,"name":19,"github_repo":20,"description_zh":21,"stars":22,"difficulty_score":23,"last_commit_at":24,"category_tags":25,"status":16},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 真正成长为懂上",138956,2,"2026-04-05T11:33:21",[13,15,26],"语言模型",{"id":28,"name":29,"github_repo":30,"description_zh":31,"stars":32,"difficulty_score":23,"last_commit_at":33,"category_tags":34,"status":16},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 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",107662,"2026-04-03T11:11:01",[13,14,15],{"id":36,"name":37,"github_repo":38,"description_zh":39,"stars":40,"difficulty_score":23,"last_commit_at":41,"category_tags":42,"status":16},3704,"NextChat","ChatGPTNextWeb\u002FNextChat","NextChat 是一款轻量且极速的 AI 助手，旨在为用户提供流畅、跨平台的大模型交互体验。它完美解决了用户在多设备间切换时难以保持对话连续性，以及面对众多 AI 模型不知如何统一管理的痛点。无论是日常办公、学习辅助还是创意激发，NextChat 都能让用户随时随地通过网页、iOS、Android、Windows、MacOS 或 Linux 端无缝接入智能服务。\n\n这款工具非常适合普通用户、学生、职场人士以及需要私有化部署的企业团队使用。对于开发者而言，它也提供了便捷的自托管方案，支持一键部署到 Vercel 或 Zeabur 等平台。\n\nNextChat 的核心亮点在于其广泛的模型兼容性，原生支持 Claude、DeepSeek、GPT-4 及 Gemini Pro 等主流大模型，让用户在一个界面即可自由切换不同 AI 能力。此外，它还率先支持 MCP（Model Context Protocol）协议，增强了上下文处理能力。针对企业用户，NextChat 提供专业版解决方案，具备品牌定制、细粒度权限控制、内部知识库整合及安全审计等功能，满足公司对数据隐私和个性化管理的高标准要求。",87618,"2026-04-05T07:20:52",[13,26],{"id":44,"name":45,"github_repo":46,"description_zh":47,"stars":48,"difficulty_score":23,"last_commit_at":49,"category_tags":50,"status":16},2268,"ML-For-Beginners","microsoft\u002FML-For-Beginners","ML-For-Beginners 是由微软推出的一套系统化机器学习入门课程，旨在帮助零基础用户轻松掌握经典机器学习知识。这套课程将学习路径规划为 12 周，包含 26 节精炼课程和 52 道配套测验，内容涵盖从基础概念到实际应用的完整流程，有效解决了初学者面对庞大知识体系时无从下手、缺乏结构化指导的痛点。\n\n无论是希望转型的开发者、需要补充算法背景的研究人员，还是对人工智能充满好奇的普通爱好者，都能从中受益。课程不仅提供了清晰的理论讲解，还强调动手实践，让用户在循序渐进中建立扎实的技能基础。其独特的亮点在于强大的多语言支持，通过自动化机制提供了包括简体中文在内的 50 多种语言版本，极大地降低了全球不同背景用户的学习门槛。此外，项目采用开源协作模式，社区活跃且内容持续更新，确保学习者能获取前沿且准确的技术资讯。如果你正寻找一条清晰、友好且专业的机器学习入门之路，ML-For-Beginners 将是理想的起点。",84991,"2026-04-05T10:45:23",[14,51,52,53,15,54,26,13,55],"数据工具","视频","插件","其他","音频",{"id":57,"name":58,"github_repo":59,"description_zh":60,"stars":61,"difficulty_score":10,"last_commit_at":62,"category_tags":63,"status":16},3128,"ragflow","infiniflow\u002Fragflow","RAGFlow 是一款领先的开源检索增强生成（RAG）引擎，旨在为大语言模型构建更精准、可靠的上下文层。它巧妙地将前沿的 RAG 技术与智能体（Agent）能力相结合，不仅支持从各类文档中高效提取知识，还能让模型基于这些知识进行逻辑推理和任务执行。\n\n在大模型应用中，幻觉问题和知识滞后是常见痛点。RAGFlow 通过深度解析复杂文档结构（如表格、图表及混合排版），显著提升了信息检索的准确度，从而有效减少模型“胡编乱造”的现象，确保回答既有据可依又具备时效性。其内置的智能体机制更进一步，使系统不仅能回答问题，还能自主规划步骤解决复杂问题。\n\n这款工具特别适合开发者、企业技术团队以及 AI 研究人员使用。无论是希望快速搭建私有知识库问答系统，还是致力于探索大模型在垂直领域落地的创新者，都能从中受益。RAGFlow 提供了可视化的工作流编排界面和灵活的 API 接口，既降低了非算法背景用户的上手门槛，也满足了专业开发者对系统深度定制的需求。作为基于 Apache 2.0 协议开源的项目，它正成为连接通用大模型与行业专有知识之间的重要桥梁。",77062,"2026-04-04T04:44:48",[15,14,13,26,54],{"id":65,"github_repo":66,"name":67,"description_en":68,"description_zh":69,"ai_summary_zh":69,"readme_en":70,"readme_zh":71,"quickstart_zh":72,"use_case_zh":73,"hero_image_url":74,"owner_login":75,"owner_name":76,"owner_avatar_url":77,"owner_bio":78,"owner_company":79,"owner_location":79,"owner_email":80,"owner_twitter":81,"owner_website":82,"owner_url":83,"languages":84,"stars":93,"forks":94,"last_commit_at":95,"license":96,"difficulty_score":23,"env_os":97,"env_gpu":98,"env_ram":99,"env_deps":100,"category_tags":108,"github_topics":109,"view_count":23,"oss_zip_url":79,"oss_zip_packed_at":79,"status":16,"created_at":129,"updated_at":130,"faqs":131,"releases":166},2837,"jeeliz\u002FjeelizWeboji","jeelizWeboji","Real time WebGL and JavaScript library for face tracking, expression detection and animated emoticons in the browser, with both SVG and Three.js demos included 😄","jeelizWeboji 是一款基于 WebGL 和 JavaScript 的开源库，专为在浏览器中实现实时人脸追踪、表情检测及动态表情符号动画而设计。它解决了传统方案依赖服务器处理导致延迟高、隐私风险大等痛点，所有视频分析均在用户本地客户端完成，无需上传任何图像数据。\n\n该工具非常适合前端开发者、互动媒体设计师以及希望为网页应用增添趣味性的技术人员。借助 jeelizWeboji，用户可以轻松构建嵌入式的动态虚拟形象（如可爱的浣熊或自定义 3D 角色），使其实时模仿使用者的面部表情。其核心技术亮点在于利用神经网络高效驱动 GPU 进行运算，不仅能精准识别 11 种面部表情和三轴旋转角度，还具备出色的环境适应能力，即使在光线不佳的情况下也能保持稳健运行。此外，它对移动端友好，并提供了基于 Three.js 和 SVG 的丰富演示案例与辅助工具，大幅降低了 3D 动画集成的门槛，让创建生动的交互式网页体验变得简单快捷。","\n**NOTICE: Apple\u003Csup>©\u003C\u002Fsup>'s lawyers threatened us to file a complain on the 21th of August 2019 for infringing their intellectual property. So we have replaced the 3D animated fox by a raccoon.**\n\n**Indeed, Apple\u003Csup>©\u003C\u002Fsup> owns the intellectual property of 3D animated foxes (but not on raccoons yet). Thank you for your understanding.**\n\n\n\n# JavaScript\u002FWebGL library to detect and reproduce facial expressions\n\n\nYou can build your own animated emoticon embedded in your web application thanks to this library. The video is processed exclusively on the client-side.\n\nThe computing power of your GPU is important. If your GPU is powerful, many detections per second will be processed and the result will be smooth and accurate.\n\nThe face detection should work even if the lighting is not great. However, the better is the input image, the better is the face expressions detection. Here are some tips to get a good experience:\n\n* The face should be well enlighted: the nose, the eyes should be distinguishable,\n* Avoid backlighting: The background should be a wall, not a window,\n* The face should not be too far, neither too close to the camera: the face should ideally cover 1\u002F3 of the camera height. It should be fully visible,\n* The camera should be placed in front of the user. A side view is not recommended,\n* Beards and mustaches can make mouth movement detection harder, and glasses can disturb eyes detection.\n\n\n## Table of contents\n\n* [Features](#features)\n* [Architecture](#architecture)\n* [Demonstrations](#demonstrations)\n  * [Run locally](#run-locally)\n  * [Using module](#using-module)\n* [Integration](#integration)\n  * [With a bundler](#with-a-bundler)\n  * [With JavaScript frontend frameworks](#with-javascript-frontend-frameworks)\n  * [Native](#native)\n* [Hosting](#hosting)\n* [About the tech](#about-the-tech)\n  * [Under the hood](#under-the-hood)\n  * [Compatibility](#compatibility)\n* [Documentation](#documentation)\n* [License](#license)\n* [References](#references)\n\n\n## Features\n\n* face detection and tracking,\n* detects 11 facial expressions,\n* face rotation around the 3 axis,\n* robust to lighting conditions,\n* mobile friendly,\n* examples provided using SVG and THREE.js.\n\n## Architecture\n\n* `\u002Fassets\u002F`: assets, both for 3D and 2D demonstrations (3D meshes, images),\n* `\u002Fdemos\u002F`: the most interesting: the demos!,\n* `\u002Fdist\u002F`: heart of the library:\n  * `jeelizFaceExpressions.js`: main minified script. It gets the camera video feed, exploit the neural network to detect the face and the expressions and stabilize the result,\n  * `jeelizFaceExpressionsNNC.json`: neural network model loaded by the main script,\n* `\u002Fdoc\u002F`: some additionnal documentation,\n* `\u002Fhelpers\u002F`: The outputs of the main script are very raw. It is convenient to use these helpers to animate a 3D model with the THREE.js helper or a SVG file with the SVG helper. All demos use these helpers,\n* `\u002Flibs\u002F`: some javascript libs,\n* `\u002FmeshConverter\u002F`: only for the THREE.js use. Tool to build the 3D model file including morphs from separate .OBJ files.\n\n\n## Demonstrations\n\nAll the following demos are included in this repository, in the `\u002Fdemos` path. You can try them:\n\n* THREE.JS based demos:\n\n  * **Cute raccoon**: [source code](\u002Fdemos\u002Fthree\u002Fraccoon\u002F), [live demo](https:\u002F\u002Fjeeliz.com\u002Fdemos\u002Fweboji\u002Fdemos\u002Fthree\u002Fraccoon\u002F)\n  * **Cute raccoon from a MP4 video**: [source code](\u002Fdemos\u002Fthree\u002FexternalVideo\u002F), [live demo](https:\u002F\u002Fjeeliz.com\u002Fdemos\u002Fweboji\u002Fdemos\u002Fthree\u002FexternalVideo\u002F)\n  * **Ready Player Me**! [source code](\u002Fdemos\u002Fthree\u002FreadyPlayerMe\u002F), [live demo](https:\u002F\u002Fjeeliz.com\u002Fdemos\u002Fweboji\u002Fdemos\u002Fthree\u002FreadyPlayerMe\u002F)\n \n\n* SVG based demos:\n\n  * **Cool Cartman**: [source code](\u002Fdemos\u002Fsvg), [live demo](https:\u002F\u002Fjeeliz.com\u002Fdemos\u002Fweboji\u002Fdemos\u002Fsvg\u002F)\n\n* Native demos:\n\n  * **Cute raccoon**: [source code and instruction to build and run it](\u002Fdemos\u002Fcordova\u002Fraccoon) This demo works as a native application using Apache Cordova. It has been tested successfully on iOS. The base code is the same than the THREE.js raccoon demo.\n\n* In [\u002Fdemos\u002FmediaStream](\u002Fdemos\u002FmediaStream), you can run a demo built in a modern JavaScript environment (React, Webpack, NPM) where multiple animated 3D raccoons can communicate together.\n\n\n* Third party demos:\n\n  * **Piano Genie**: play the piano with your face expressions! This is pretty addictive ;). [live demo - ace-piano-genie.glitch.me](https:\u002F\u002Fface-piano-genie.glitch.me\u002F), [code and further details](https:\u002F\u002Fglitch.com\u002Fedit\u002F#!\u002Fpiano-genie)\n\n  * **Browse Hands Free**, by [Oz Ramos](https:\u002F\u002Ftwitter.com\u002FLabOfOz): The demo improves web accessibility for disabled people. You can control the mouse cursor with your head (turn your head to move the cursor, smile to click). [live demo - browsehandsfree.com - click on the camera icon to start](https:\u002F\u002Fhandsfree.js.org\u002F#\u002F), [further details](https:\u002F\u002Fgithub.com\u002Fjeeliz\u002FjeelizWeboji\u002Fissues\u002F13#issuecomment-473500657). The code is available on github here: [handsfreejs\u002Fhandsfree](https:\u002F\u002Fgithub.com\u002Fhandsfreejs\u002Fhandsfree).\n\n  * **Vauta**, by [Nono](https:\u002F\u002Ftwitter.com\u002Fke4563): You can anime a .VRM 3D character avatar in the browser. This web application is only in Japanese. [live demo - vauta.netlify.com](https:\u002F\u002Fvauta.netlify.com\u002F), [tweet and video](https:\u002F\u002Ftwitter.com\u002Fke4563\u002Fstatus\u002F1099673171777617922)\n\n  * **Laer**, by [Yakumo](https:\u002F\u002Fgithub.com\u002FZahanWu). A manga style character reproduces your face expressions. Drawings are really good! This webapp is only in Japanese but the interface is very intuitive (Choose the avatar, click on the big red button and accept the camera access request). [Github repository](https:\u002F\u002Fgithub.com\u002FZahanWu\u002Flaer) [Live demo](https:\u002F\u002Flaer-39ee6.web.app\u002F) [Twitter post](https:\u002F\u002Ftwitter.com\u002FJeeliz_AR\u002Fstatus\u002F1481660159504097292)\n\n  * **Drowsiness detection**, by [Abhilash26](https:\u002F\u002Fgithub.com\u002Fabhilash26) aka [Dinodroid](https:\u002F\u002Fko-fi.com\u002Fdinodroid): Be sure to don't fall asleep when driving thanks to this webapp! You can try it here: [dont-drive-drowsy.glitch.me](https:\u002F\u002Fdont-drive-drowsy.glitch.me\u002F), [view the source code](https:\u002F\u002Fgithub.com\u002Fabhilash26\u002Fdont-drive-drowsy) or a [demo video](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=FjqySZE8CTY)\n\n  * **Expressions reader**, by [Abhilash26](https:\u002F\u002Fgithub.com\u002Fabhilash26) aka [Dinodroid](https:\u002F\u002Fko-fi.com\u002Fdinodroid): detects 5 high level expressions (happiness, fear, anger, surprise, sadness) from the morph coefficients given by this lib, and display them as smileys. You can try it here: [emotion-reader.glitch.me](https:\u002F\u002Femotion-reader.glitch.me\u002F) or [browse the source code](https:\u002F\u002Fgithub.com\u002Fabhilash26\u002Femotion-reader)\n\n\nIf you have made an application or a fun demonstration using this library, we would love to check it out and add a link here! Just contact us on [Twitter @Jeeliz_AR](https:\u002F\u002Ftwitter.com\u002FJeeliz_AR) or [LinkedIn](https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fjeeliz).\n\n\n#### Run locally\n\nYou just have to serve the content of this directory using a HTTPS server. Camera access can be not authorized depending on the web browser the application is hosted by an unsecured HTTP server. You can use *Docker* for example to run a HTTPS server:\n\n\n1. Run docker-compose\n\n```\ndocker-compose up\n```\n\n2. Open a browser and go to `localhost:8888`\n\n\nIf you have not bought a camera yet, a screenshot video of the Cartman Demo is available here:\n\n\u003Cp align=\"center\">\n\u003Ca href='https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=WxaL_kXwtRE'>\u003Cimg src='https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fjeeliz_jeelizWeboji_readme_6e2252d73675.jpg'>\u003C\u002Fa>\n\u003C\u002Fp>\n\n\n\n#### Using module\n\n`\u002Fdist\u002FjeelizFaceExpressions.module.js` is exactly the same as `\u002Fdist\u002FjeelizFaceExpressions.js` except that it works as JavaScript module, so you can import it directly using:\n\n```javascript\nimport 'dist\u002FjeelizFaceExpressions.module.js'\n```\n\nor using `require`:\n\n```javascript\nconst faceExpressions = require('.\u002Flib\u002FjeelizFaceExpressions.module.js')\n\u002F\u002F...\n```\n\nThere is no demo using the module version yet.\n\n\n\n## Integration\n\n### With a bundler\n\nIf you use this library with a bundler (typically *Webpack* or *Parcel*), first you should use the [module version](#using-module).\n\nThen, with the standard library, we load the neural network model (specified by `NNCPath` provided as initialization parameter) using AJAX for the following reasons:\n\n* If the user does not accept to share its camera, or if WebGL is not enabled, we don't have to load the neural network model,\n* We suppose that the library is deployed using a static HTTPS server.\n\nWith a bundler, it is a bit more complicated. It is easier to load the neural network model using a classical `import` or `require` call and to provide it using the `NNC` init parameter:\n\n```javascript\nconst faceExpressions = require('.\u002Flib\u002FjeelizFaceExpressions.module.js')\nconst neuralNetworkModel = require('.\u002Fdist\u002FjeelizFaceExpressionsNNC.json')\n\nfaceExpressions.init({\n  NNC: neuralNetworkModel, \u002F\u002Finstead of NNCPath\n  \u002F\u002F... other init parameters\n});\n```\n\n### With JavaScript frontend frameworks\n\nWe don't cover here the integration with mainstream JavaScript frontend frameworks (*React*, *Vue*, *Angular*).\nIf you submit Pull Request adding the boilerplate or a demo integrated with specific frameworks, you are welcome and they will be accepted of course.\nWe can provide this kind of integration as a specific development service ( please contact us [here](https:\u002F\u002Fjeeliz.com\u002Fcontact-us\u002F) ). But it is not so hard to do it by yourself. Here is a bunch of submitted issues dealing with *React* integration. Most of them are for [Jeeliz FaceFilter](https:\u002F\u002Fgithub.com\u002Fjeeliz\u002FjeelizFaceFilter), but the problem is similar:\n\n* Angular integration: [Jeff Winder](https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fjeffwinder\u002F) has integrated this library with Angular \u002F Electron. His amazing work is published on Github here: [JeffWinder\u002FjeelizWeboji-angular-electron-example](https:\u002F\u002Fgithub.com\u002FJeffWinder\u002FjeelizWeboji-angular-electron-example),\n* React integration: [#74](https:\u002F\u002Fgithub.com\u002Fjeeliz\u002FjeelizFaceFilter\u002Fissues\u002F74#issuecomment-455624092) and [#122](https:\u002F\u002Fgithub.com\u002Fjeeliz\u002FjeelizFaceFilter\u002Fissues\u002F122#issuecomment-533185928)\n* [is it possible to use this library in react native project](https:\u002F\u002Fgithub.com\u002Fjeeliz\u002FjeelizFaceFilter\u002Fissues\u002F21)\n* [Having difficulty using JeelizThreeHelper in ReactApp](https:\u002F\u002Fgithub.com\u002Fjeeliz\u002FjeelizFaceFilter\u002Fissues\u002F137)\n\nYou can also take a look at these Github code repositories:\n* [ikebastuz\u002FjeelizTest](https:\u002F\u002Fgithub.com\u002Fikebastuz\u002FjeelizTest): React demo of a CSS3D FaceFilter. It is based on [Create React App](https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fcreate-react-app)\n* [CloffWrangler\u002Ffacevoice](https:\u002F\u002Fgithub.com\u002FCloffWrangler\u002Ffacevoice): Another demo based on [Create React App]\n* [nickydev100\u002FFFMpeg-Angular-Face-Filter](https:\u002F\u002Fgithub.com\u002Fnickydev100\u002FFFMpeg-Angular-Face-Filter): Angular boilerplate\n\n\n### Native\n\nIt is possible to execute a JavaScript application using this library into a *Webview* for a native app integration.\nBut with IOS \u003C 14.3 the camera access is disabled inside webviews. If you want to make your application run on devices with IOS versions older than 14.3, you have to implement a hack to stream the camera video into the `WKWebview` using websockets.\n\nHis hack has been implemented into this repository:\n\n* [Apache Cordova IOS demo (it should also work on Android)](\u002Ftree\u002Fmaster\u002Fdemos\u002Fcordova)\n* [Youtube video of the demo](https:\u002F\u002Fyoutu.be\u002Fyx9uA1g6-rA)\n* [Github submitted issue](\u002Fissues\u002F27)\n* [Linkedin post detailing pros and cons](https:\u002F\u002Fwww.linkedin.com\u002Ffeed\u002Fupdate\u002Furn:li:activity:6587781973287198720)\n\nBut it is still a dirty hack introducing a bottleneck. It still run pretty well on a high end device (tested on Iphone XR), but it is better to stick on a full web environment.\n\n\n\n## Hosting\n\nThis library requires the user's camera feed through `MediaStream API`. Your application should then be hosted with a HTTPS server (the certificate can be self-signed). It won't work at all with unsecure HTTP, even locally with some web browsers.\n\nBe careful to enable gzip HTTP\u002FHTTPS compression for JSON and JS files. Indeed, the neuron network JSON in, `\u002Fdist\u002F` is quite heavy, but very well compressed with GZIP. You can check the gzip compression of your server [here](https:\u002F\u002Fcheckgzipcompression.com\u002F).\n\nThe neuron network JSON file is loaded using an ajax `XMLHttpRequest` after the user has accepted to share its camera. We proceed this way to avoid to load this quite heavy file if the user refuses to share its camera or if there is no camera available. The loading will be faster if you systematically preload the JSON file using a service worker or a simple raw `XMLHttpRequest` just after the loading of the HTML page. Then the file will be in the browser cache and will be fast to request.\n\n\n\n## About the tech\n\n### Under the hood\n\nThe heart of the lib is `JEELIZFACEEXPRESSIONS`. It is implemented by `\u002Fdist\u002FjeelizFaceExpressions.js` script. It relies on Jeeliz WebGL Deep Learning technology to detect and track the user's face using a deep learning network, and to simultaneously evaluate the expression factors. The accuracy is adaptative: the best is the hardware, the more detections are processed per second. All is done client-side.\n\nThe documentation of `JEELIZFACEEXPRESSIONS` is included in this repository as a PDF file, [\u002Fdoc\u002FjeelizFaceExpressions.pdf](\u002Fdoc\u002FjeelizFaceExpressions.pdf). In the main scripts of the demonstration, we never call these methods directly, but always through the helpers. Here is the indices of the morphs returned by this library:\n\n* 0:  smileRight → closed mouth smile right\n* 1:  smileLeft  → closed mouth smile left\n* 2:  eyeBrowLeftDown → left eyebrow frowned\n* 3:  eyeBrowRightDown → right eyebrow frowned\n* 4:  eyeBrowLeftUp → raise left eyebrow (surprise)\n* 5:  eyeBrowRightUp → raise right eyebrow (surprise)\n* 6:  mouthOpen → open mouth\n* 7:  mouthRound → o shaped mouth\n* 8:  eyeRightClose → close right eye\n* 9:  eyeLeftClose  → close left eye\n* 10: mouthNasty   → nasty mouth (show teeth)\n\n\n\n### Compatibility\n\n* If `WebGL2` is available, it uses `WebGL2` and no specific extension is required,\n* If `WebGL2` is not available but `WebGL1`, we require either `OES_TEXTURE_FLOAT` extension or `OES_TEXTURE_HALF_FLOAT` extension,\n* If `WebGL2` is not available, and if `WebGL1` is not available or neither `OES_TEXTURE_FLOAT` or `OES_HALF_TEXTURE_FLOAT` are implemented, the user is not compatible.\n\nIn all cases, you need to have WebRTC implemented in the web browser, otherwise this library will not be able to get the camera video feed. The compatibility tables are on, [caniuse.com](https:\u002F\u002Fcaniuse.com\u002F): [WebGL1](https:\u002F\u002Fcaniuse.com\u002F#feat=webgl), [WebGL2](https:\u002F\u002Fcaniuse.com\u002F#feat=webgl2), [WebRTC](https:\u002F\u002Fcaniuse.com\u002F#feat=stream).\n\nIf a compatibility error is triggered, please post an issue on this repository. If this is a camera access error, please first retry after closing all applications which could use your device (Skype, Messenger, other browser tabs and windows, ...). Please include:\n* a screenshot of [webglreport.com - WebGL1](http:\u002F\u002Fwebglreport.com\u002F?v=1) (about your `WebGL1` implementation),\n* a screenshot of [webglreport.com - WebGL2](http:\u002F\u002Fwebglreport.com\u002F?v=2) (about your `WebGL2` implementation),\n* the log from the web console,\n* the steps to reproduce the bug, and screenshots.\n\nThis library works quite everywhere, and it works very well with a high end device like an Iphone X. But if your device is too cheap or too old, it will perform too few evaluations per second and the application will be slow.\n\n\n## Documentation\n\n* `JEELIZFACEEXPRESSIONS`: All the helpers rely on this library to get the facial morph coefficients. With this documentation you can interface this library with your own 3D or 2D engine. [Click here to read the PDF of the specs](\u002Fdoc\u002FjeelizFaceExpressions.pdf),\n* [README.md about using the meshConverter](\u002FmeshConverter): Used in the THREE.JS Raccoon demo\n\u003C!-- * [Create your own animated emoticon for the web](https:\u002F\u002Fjeeliz.com\u002Fblog\u002Fcreate-animojis-for-the-web\u002F)\n* [Integrate the animated emoticon on your website](https:\u002F\u002Fjeeliz.com\u002Fblog\u002Fadd-a-weboji-on-website\u002F) -->\n\n\n## License\n\n[Apache 2.0](http:\u002F\u002Fwww.apache.org\u002Flicenses\u002FLICENSE-2.0.html). This application is free for both commercial and non-commercial use.\n\n\u003C!-- We appreciate attribution by including the [Jeeliz logo](https:\u002F\u002Fjeeliz.com\u002Fwp-content\u002Fuploads\u002F2018\u002F01\u002FLOGO_JEELIZ_BLUE.png) and a link to the [Jeeliz website](https:\u002F\u002Fjeeliz.com) in your application or desktop website. Of course we do not expect a large link to Jeeliz over your face filter, but if you can put the link in the credits\u002Fabout\u002Fhelp\u002Ffooter section it would be great. -->\n\n\n## References\n\n* [Jeeliz official website](https:\u002F\u002Fjeeliz.com)\n* [Three.JS official website with documentation, demos, examples...](https:\u002F\u002Fthreejs.org\u002F)\n* [Webgl Academy: tutorials about WebGL and THREE.JS](http:\u002F\u002Fwww.webglacademy.com)\n\n","**通知：苹果公司\u003Csup>©\u003C\u002Fsup>的律师于2019年8月21日威胁我们，称我们将因侵犯其知识产权而遭到投诉。因此，我们已将3D动画狐狸替换为浣熊。**\n\n**确实，苹果公司\u003Csup>©\u003C\u002Fsup>拥有3D动画狐狸的知识产权（但目前尚未涉及浣熊）。感谢您的理解。**\n\n\n\n# 用于检测和重现面部表情的 JavaScript\u002FWebGL 库\n\n\n借助此库，您可以在自己的 Web 应用程序中构建并嵌入个性化的动画表情符号。整个视频处理过程完全在客户端进行。\n\n您的 GPU 计算能力至关重要。如果您的 GPU 性能较强，每秒可以处理大量检测任务，从而确保结果流畅且准确。\n\n即使光线条件不佳，面部检测功能也应能正常工作。不过，输入图像的质量越高，面部表情检测的效果就越好。以下是一些提升体验的建议：\n\n* 面部应充分受光：鼻子和眼睛应清晰可辨；\n* 避免逆光拍摄：背景应为墙面，而非窗户；\n* 面部与摄像头的距离不宜过远或过近：理想情况下，面部应占据摄像头画面高度的约三分之一，并且需完全可见；\n* 摄像头应正对用户放置，不建议采用侧拍角度；\n* 胡须和络腮胡可能会使嘴部动作的检测更加困难，而眼镜则可能干扰眼部的检测。\n\n\n## 目录\n\n* [功能](#features)\n* [架构](#architecture)\n* [演示](#demonstrations)\n  * [本地运行](#run-locally)\n  * [使用模块](#using-module)\n* [集成](#integration)\n  * [使用打包工具](#with-a-bundler)\n  * [使用 JavaScript 前端框架](#with-javascript-frontend-frameworks)\n  * [原生方式](#native)\n* [托管](#hosting)\n* [技术简介](#about-the-tech)\n  * [底层原理](#under-the-hood)\n  * [兼容性](#compatibility)\n* [文档](#documentation)\n* [许可证](#license)\n* [参考文献](#references)\n\n\n## 功能\n\n* 面部检测与跟踪，\n* 可检测 11 种面部表情，\n* 支持面部在三个轴上的旋转，\n* 对光照条件具有较强的鲁棒性，\n* 适合移动设备使用，\n* 提供基于 SVG 和 THREE.js 的示例。\n\n## 架构\n\n* `\u002Fassets\u002F`：包含 3D 和 2D 演示所需的资源文件（3D 网格、图片等）；\n* `\u002Fdemos\u002F`：最精彩的部分——演示代码！\n* `\u002Fdist\u002F`：库的核心目录：\n  * `jeelizFaceExpressions.js`：主压缩脚本，负责获取摄像头视频流，利用神经网络检测面部及表情，并对结果进行平滑处理；\n  * `jeelizFaceExpressionsNNC.json`：由主脚本加载的神经网络模型；\n* `\u002Fdoc\u002F`：附加文档；\n* `\u002Fhelpers\u002F`：主脚本输出的数据较为原始，使用这些辅助工具可以更方便地通过 THREE.js 动画化 3D 模型，或借助 SVG 辅助工具操作 SVG 文件。所有演示均使用这些辅助工具；\n* `\u002Flibs\u002F`：一些 JavaScript 库；\n* `\u002FmeshConverter\u002F`：仅适用于 THREE.js 使用，用于从独立的 .OBJ 文件中提取数据并生成包含变形目标的 3D 模型文件。\n\n## 演示\n\n以下所有演示都包含在本仓库的 `\u002Fdemos` 目录中。你可以尝试它们：\n\n* 基于 THREE.js 的演示：\n\n  * **可爱浣熊**：[源代码](\u002Fdemos\u002Fthree\u002Fraccoon\u002F)，[在线演示](https:\u002F\u002Fjeeliz.com\u002Fdemos\u002Fweboji\u002Fdemos\u002Fthree\u002Fraccoon\u002F)\n  * **来自 MP4 视频的可爱浣熊**：[源代码](\u002Fdemos\u002Fthree\u002FexternalVideo\u002F)，[在线演示](https:\u002F\u002Fjeeliz.com\u002Fdemos\u002Fweboji\u002Fdemos\u002Fthree\u002FexternalVideo\u002F)\n  * **Ready Player Me**！[源代码](\u002Fdemos\u002Fthree\u002FreadyPlayerMe\u002F)，[在线演示](https:\u002F\u002Fjeeliz.com\u002Fdemos\u002Fweboji\u002Fdemos\u002Fthree\u002FreadyPlayerMe\u002F)\n\n* 基于 SVG 的演示：\n\n  * **酷炫卡特曼**：[源代码](\u002Fdemos\u002Fsvg)，[在线演示](https:\u002F\u002Fjeeliz.com\u002Fdemos\u002Fweboji\u002Fdemos\u002Fsvg\u002F)\n\n* 原生演示：\n\n  * **可爱浣熊**：[源代码及构建和运行说明](\u002Fdemos\u002Fcordova\u002Fraccoon) 这个演示使用 Apache Cordova 作为原生应用运行。已在 iOS 上成功测试。其基础代码与 THREE.js 浣熊演示相同。\n\n* 在 [\u002Fdemos\u002FmediaStream](\u002Fdemos\u002FmediaStream) 中，你可以运行一个基于现代 JavaScript 环境（React、Webpack、NPM）构建的演示，在其中多个动画化的 3D 浣熊可以相互交流。\n\n\n* 第三方演示：\n\n  * **钢琴精灵**：用你的面部表情弹钢琴！这非常让人上瘾；）。[在线演示 - ace-piano-genie.glitch.me](https:\u002F\u002Fface-piano-genie.glitch.me\u002F)，[代码及更多详情](https:\u002F\u002Fglitch.com\u002Fedit\u002F#!\u002Fpiano-genie)\n\n  * **无手浏览**，由 [Oz Ramos](https:\u002F\u002Ftwitter.com\u002FLabOfOz) 开发：该演示提升了残疾人士的网页可访问性。你可以用头部控制鼠标光标（转动头部移动光标，微笑点击）。[在线演示 - browsehandsfree.com - 点击相机图标开始](https:\u002F\u002Fhandsfree.js.org\u002F#\u002F)，[更多详情](https:\u002F\u002Fgithub.com\u002Fjeeliz\u002FjeelizWeboji\u002Fissues\u002F13#issuecomment-473500657)。代码可在 GitHub 上找到：[handsfreejs\u002Fhandsfree](https:\u002F\u002Fgithub.com\u002Fhandsfreejs\u002Fhandsfree)。\n\n  * **Vauta**，由 [Nono](https:\u002F\u002Ftwitter.com\u002Fke4563) 开发：你可以在浏览器中为 .VRM 3D 角色头像赋予动画效果。这个 Web 应用仅提供日语版本。[在线演示 - vauta.netlify.com](https:\u002F\u002Fvauta.netlify.com\u002F)，[推文及视频](https:\u002F\u002Ftwitter.com\u002Fke4563\u002Fstatus\u002F1099673171777617922)\n\n  * **Laer**，由 [Yakumo](https:\u002F\u002Fgithub.com\u002FZahanWu) 开发。一位漫画风格的角色会模仿你的面部表情。画风非常出色！该 Web 应用仅提供日语版本，但界面非常直观（选择头像，点击大红色按钮并同意摄像头访问请求）。[GitHub 仓库](https:\u002F\u002Fgithub.com\u002FZahanWu\u002Flaer) [在线演示](https:\u002F\u002Flaer-39ee6.web.app\u002F) [Twitter 帖子](https:\u002F\u002Ftwitter.com\u002FJeeliz_AR\u002Fstatus\u002F1481660159504097292)\n\n  * **困倦检测**，由 [Abhilash26](https:\u002F\u002Fgithub.com\u002Fabhilash26) 又名 [Dinodroid](https:\u002F\u002Fko-fi.com\u002Fdinodroid) 开发：有了这个 Web 应用，开车时再也不用担心打瞌睡了！你可以在这里试用：[dont-drive-drowsy.glitch.me](https:\u002F\u002Fdont-drive-drowsy.glitch.me\u002F)，[查看源代码](https:\u002F\u002Fgithub.com\u002Fabhilash26\u002Fdont-drive-drowsy) 或观看 [演示视频](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=FjqySZE8CTY)\n\n  * **表情读取器**，由 [Abhilash26](https:\u002F\u002Fgithub.com\u002Fabhilash26) 又名 [Dinodroid](https:\u002F\u002Fko-fi.com\u002Fdinodroid) 开发：它能根据本库提供的形变系数检测 5 种高级别表情（快乐、恐惧、愤怒、惊讶、悲伤），并以表情符号的形式显示出来。你可以在这里试用：[emotion-reader.glitch.me](https:\u002F\u002Femotion-reader.glitch.me\u002F) 或 [浏览源代码](https:\u002F\u002Fgithub.com\u002Fabhilash26\u002Femotion-reader)\n\n\n如果你使用本库开发了应用程序或有趣的演示，我们非常乐意查看并在此处添加链接！请通过 [Twitter @Jeeliz_AR](https:\u002F\u002Ftwitter.com\u002FJeeliz_AR) 或 [LinkedIn](https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fjeeliz) 联系我们。\n\n\n#### 本地运行\n\n你只需使用 HTTPS 服务器来服务此目录的内容即可。如果应用托管在非安全的 HTTP 服务器上，浏览器可能不会授权访问摄像头。例如，你可以使用 *Docker* 来运行 HTTPS 服务器：\n\n\n1. 运行 docker-compose\n\n```\ndocker-compose up\n```\n\n2. 打开浏览器并访问 `localhost:8888`\n\n\n如果你还没有购买摄像头，这里提供卡特曼演示的截图视频：\n\n\u003Cp align=\"center\">\n\u003Ca href='https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=WxaL_kXwtRE'>\u003Cimg src='https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fjeeliz_jeelizWeboji_readme_6e2252d73675.jpg'>\u003C\u002Fa>\n\u003C\u002Fp>\n\n\n\n#### 使用模块\n\n`\u002Fdist\u002FjeelizFaceExpressions.module.js` 与 `\u002Fdist\u002FjeelizFaceExpressions.js` 完全相同，只是它可以作为 JavaScript 模块使用，因此你可以直接通过以下方式导入：\n\n```javascript\nimport 'dist\u002FjeelizFaceExpressions.module.js'\n```\n\n或者使用 `require`：\n\n```javascript\nconst faceExpressions = require('.\u002Flib\u002FjeelizFaceExpressions.module.js')\n\u002F\u002F...\n```\n\n目前尚无使用模块版本的演示。\n\n\n## 集成\n\n### 使用打包工具\n\n如果你使用打包工具（通常是 *Webpack* 或 *Parcel*）来集成本库，首先应使用 [模块版本](#using-module)。\n\n然后，对于标准库而言，我们会根据初始化参数 `NNCPath` 指定的路径，通过 AJAX 加载神经网络模型，原因如下：\n\n* 如果用户拒绝共享摄像头，或者 WebGL 未启用，则无需加载神经网络模型；\n* 我们假设库是部署在静态 HTTPS 服务器上的。\n\n但在使用打包工具时，情况会稍微复杂一些。更简单的方法是使用传统的 `import` 或 `require` 语句加载神经网络模型，并将其作为 `NNC` 初始化参数传递：\n\n```javascript\nconst faceExpressions = require('.\u002Flib\u002FjeelizFaceExpressions.module.js')\nconst neuralNetworkModel = require('.\u002Fdist\u002FjeelizFaceExpressionsNNC.json')\n\nfaceExpressions.init({\n  NNC: neuralNetworkModel, \u002F\u002F 替代 NNCPath\n  \u002F\u002F... 其他初始化参数\n});\n```\n\n### 与 JavaScript 前端框架\n\n我们在此不讨论与主流 JavaScript 前端框架（*React*、*Vue*、*Angular*）的集成。如果您提交包含样板代码或特定框架集成示例的 Pull Request，我们将非常欢迎并予以接受。当然，我们也可以将此类集成作为一项专门的开发服务提供给您（请通过[这里](https:\u002F\u002Fjeeliz.com\u002Fcontact-us\u002F)与我们联系）。不过，您自己动手实现也并不困难。以下是一些关于 *React* 集成的已提交问题：其中大多数是针对 [Jeeliz FaceFilter](https:\u002F\u002Fgithub.com\u002Fjeeliz\u002FjeelizFaceFilter) 的，但问题本质上是相似的：\n\n* Angular 集成：[Jeff Winder](https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fjeffwinder\u002F) 已将该库与 Angular \u002F Electron 集成。他的精彩工作已发布在 GitHub 上：[JeffWinder\u002FjeelizWeboji-angular-electron-example](https:\u002F\u002Fgithub.com\u002FJeffWinder\u002FjeelizWeboji-angular-electron-example)。\n* React 集成：[#74](https:\u002F\u002Fgithub.com\u002Fjeeliz\u002FjeelizFaceFilter\u002Fissues\u002F74#issuecomment-455624092) 和 [#122](https:\u002F\u002Fgithub.com\u002Fjeeliz\u002FjeelizFaceFilter\u002Fissues\u002F122#issuecomment-533185928)。\n* [是否可以在 React Native 项目中使用此库](https:\u002F\u002Fgithub.com\u002Fjeeliz\u002FjeelizFaceFilter\u002Fissues\u002F21)。\n* [在 ReactApp 中使用 JeelizThreeHelper 遇到困难](https:\u002F\u002Fgithub.com\u002Fjeeliz\u002FjeelizFaceFilter\u002Fissues\u002F137)。\n\n您也可以查看以下 GitHub 代码仓库：\n* [ikebastuz\u002FjeelizTest](https:\u002F\u002Fgithub.com\u002Fikebastuz\u002FjeelizTest)：基于 CSS3D 的 FaceFilter React 示例。它基于 [Create React App](https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fcreate-react-app)。\n* [CloffWrangler\u002Ffacevoice](https:\u002F\u002Fgithub.com\u002FCloffWrangler\u002Ffacevoice)：另一个基于 [Create React App] 的示例。\n* [nickydev100\u002FFFMpeg-Angular-Face-Filter](https:\u002F\u002Fgithub.com\u002Fnickydev100\u002FFFMpeg-Angular-Face-Filter)：Angular 样板工程。\n\n### 原生应用\n\n可以通过原生应用中的 *Webview* 来运行使用该库的 JavaScript 应用程序，从而实现原生集成。然而，在 iOS \u003C 14.3 的版本中，Webview 内部会禁用摄像头访问权限。如果您希望您的应用程序能够在低于 iOS 14.3 的设备上运行，则需要通过 WebSocket 将摄像头视频流注入到 `WKWebview` 中，这是一种变通方案。\n\n该变通方案已在以下仓库中实现：\n* [Apache Cordova iOS 演示（也适用于 Android）](\u002Ftree\u002Fmaster\u002Fdemos\u002Fcordova)。\n* [演示的 YouTube 视频](https:\u002F\u002Fyoutu.be\u002Fyx9uA1g6-rA)。\n* [GitHub 上的相关问题](\u002Fissues\u002F27)。\n* [LinkedIn 上详细说明优缺点的帖子](https:\u002F\u002Fwww.linkedin.com\u002Ffeed\u002Fupdate\u002Furn:li:activity:6587781973287198720)。\n\n不过，这仍然是一种不太优雅的 hack，会引入性能瓶颈。尽管在高端设备上（如 iPhone XR）表现尚可，但最好还是直接在完整的 Web 环境中运行。\n\n## 托管\n\n该库需要通过 `MediaStream API` 获取用户的摄像头流。因此，您的应用程序必须部署在 HTTPS 服务器上（证书可以是自签名的）。即使在本地，某些浏览器也无法在非安全的 HTTP 协议下正常工作。\n\n请注意为 JSON 和 JS 文件启用 gzip HTTP\u002FHTTPS 压缩。实际上，位于 `\u002Fdist\u002F` 目录下的神经网络 JSON 文件体积较大，但经过 GZIP 压缩后效果非常好。您可以使用 [checkgzipcompression.com](https:\u002F\u002Fcheckgzipcompression.com\u002F) 来检查服务器的 gzip 压缩情况。\n\n神经网络 JSON 文件会在用户同意共享摄像头后，通过 AJAX 的 `XMLHttpRequest` 加载。我们采用这种方式是为了避免在用户拒绝共享摄像头或设备没有摄像头时加载这个较大的文件。如果您能在 HTML 页面加载完成后立即使用 Service Worker 或简单的原始 `XMLHttpRequest` 预加载该 JSON 文件，那么后续请求将会更快，因为文件已经缓存在浏览器中。\n\n## 技术细节\n\n### 内部原理\n\n该库的核心是 `JEELIZFACEEXPRESSIONS`，由 `\u002Fdist\u002FjeelizFaceExpressions.js` 脚本实现。它依赖于 Jeeliz 的 WebGL 深度学习技术，利用深度学习网络检测和跟踪用户面部，并同时评估表情因子。精度会根据硬件性能动态调整：硬件越强大，每秒处理的检测数量就越多。整个过程完全在客户端完成。\n\n`JEELIZFACEEXPRESSIONS` 的文档以 PDF 文件的形式包含在本仓库中，路径为 [\u002Fdoc\u002FjeelizFaceExpressions.pdf](\u002Fdoc\u002FjeelizFaceExpressions.pdf)。在演示的主要脚本中，我们从不直接调用这些方法，而是始终通过辅助函数来操作。以下是该库返回的表情形态索引：\n\n* 0：smileRight → 合嘴微笑（右侧）\n* 1：smileLeft → 合嘴微笑（左侧）\n* 2：eyeBrowLeftDown → 左眉下压\n* 3：eyeBrowRightDown → 右眉下压\n* 4：eyeBrowLeftUp → 左眉上扬（惊讶）\n* 5：eyeBrowRightUp → 右眉上扬（惊讶）\n* 6：mouthOpen → 张嘴\n* 7：mouthRound → 圆形嘴\n* 8：eyeRightClose → 闭合右眼\n* 9：eyeLeftClose → 闭合左眼\n* 10：mouthNasty → 露齿咧嘴（恶心）\n\n### 兼容性\n\n* 如果支持 `WebGL2`，则使用 `WebGL2`，无需任何额外扩展；\n* 如果不支持 `WebGL2` 但支持 `WebGL1`，则需要 `OES_TEXTURE_FLOAT` 或 `OES_TEXTURE_HALF_FLOAT` 扩展；\n* 如果既不支持 `WebGL2`，也不支持 `WebGL1`，且未实现 `OES_TEXTURE_FLOAT` 或 `OES_TEXTURE_HALF_FLOAT`，则该设备不兼容。\n\n无论哪种情况，您的浏览器都必须支持 WebRTC，否则该库将无法获取摄像头视频流。兼容性表格可在 [caniuse.com](https:\u002F\u002Fcaniuse.com\u002F) 上找到：[WebGL1](https:\u002F\u002Fcaniuse.com\u002F#feat=webgl)，[WebGL2](https:\u002F\u002Fcaniuse.com\u002F#feat=webgl2)，[WebRTC](https:\u002F\u002Fcaniuse.com\u002F#feat=stream)。\n\n如果出现兼容性错误，请在本仓库中提交问题。如果是摄像头访问权限相关的错误，请先关闭所有可能占用您设备的应用程序（如 Skype、Messenger、其他浏览器标签页和窗口等），然后再重试。请附上：\n* [webglreport.com - WebGL1](http:\u002F\u002Fwebglreport.com\u002F?v=1) 的截图（关于您的 `WebGL1` 实现）；\n* [webglreport.com - WebGL2](http:\u002F\u002Fwebglreport.com\u002F?v=2) 的截图（关于您的 `WebGL2` 实现）；\n* 浏览器控制台的日志；\n* 复现问题的步骤及截图。\n\n该库几乎可以在任何地方运行，并且在像 iPhone X 这样的高端设备上表现尤为出色。但如果您的设备过于廉价或老旧，每秒能处理的检测次数就会减少，导致应用运行缓慢。\n\n## 文档\n\n* `JEELIZFACEEXPRESSIONS`: 所有辅助工具都依赖这个库来获取面部变形系数。通过这份文档，您可以将该库与您自己的 3D 或 2D 引擎进行集成。[点击此处阅读规格 PDF](\u002Fdoc\u002FjeelizFaceExpressions.pdf)，\n* [关于使用 meshConverter 的 README.md](\u002FmeshConverter): 用于 THREE.JS 负鼠演示中\n\u003C!-- * [为网页创建您自己的动画表情符号](https:\u002F\u002Fjeeliz.com\u002Fblog\u002Fcreate-animojis-for-the-web\u002F)\n* [将动画表情符号集成到您的网站](https:\u002F\u002Fjeeliz.com\u002Fblog\u002Fadd-a-weboji-on-website\u002F) -->\n\n\n## 许可证\n\n[Apache 2.0](http:\u002F\u002Fwww.apache.org\u002Flicenses\u002FLICENSE-2.0.html)。本应用可用于商业和非商业用途，且完全免费。\n\n\u003C!-- 我们感谢您在应用或桌面网站中包含 [Jeeliz 标志](https:\u002F\u002Fjeeliz.com\u002Fwp-content\u002Fuploads\u002F2018\u002F01\u002FLOGO_JEELIZ_BLUE.png) 并链接至 [Jeeliz 官网](https:\u002F\u002Fjeeliz.com)，以表示引用。当然，我们并不要求在您的人脸滤镜上放置一个大型的 Jeeliz 链接，但如果能在致谢\u002F关于页面\u002F帮助\u002F页脚部分添加该链接，那就再好不过了。 -->\n\n\n## 参考资料\n\n* [Jeeliz 官方网站](https:\u002F\u002Fjeeliz.com)\n* [Three.JS 官方网站，提供文档、演示、示例等](https:\u002F\u002Fthreejs.org\u002F)\n* [Webgl Academy：关于 WebGL 和 THREE.JS 的教程](http:\u002F\u002Fwww.webglacademy.com)","# jeelizWeboji 快速上手指南\n\njeelizWeboji 是一个基于 JavaScript\u002FWebGL 的库，用于在客户端检测并复现面部表情。它利用 GPU 算力实时处理摄像头视频流，可轻松为 Web 应用添加动画表情符号（如 3D 浣熊或 SVG 卡通形象）。\n\n## 环境准备\n\n*   **操作系统**：支持 Windows、macOS、Linux 及移动端（iOS\u002FAndroid）。\n*   **浏览器**：支持现代浏览器（Chrome, Firefox, Safari, Edge），必须支持 **WebGL** 和 **MediaStream API**。\n*   **服务器要求**：\n    *   必须使用 **HTTPS** 协议托管应用（本地开发可使用自签名证书），否则浏览器将禁止访问摄像头。\n    *   建议开启 Gzip 压缩以提升 JSON 模型加载速度。\n*   **硬件建议**：\n    *   需要性能较好的 GPU 以获得流畅的检测帧率。\n    *   摄像头应正对用户，光线充足，避免逆光。面部最好占据摄像头画面的 1\u002F3。\n    *   注意：浓密胡须可能影响嘴部检测，眼镜可能干扰眼部检测。\n\n## 安装步骤\n\n你可以通过下载源码或使用模块包的方式集成。\n\n### 方式一：克隆仓库运行演示（推荐新手）\n\n如果你希望直接运行官方提供的演示项目（如 3D 浣熊）：\n\n1.  克隆仓库：\n    ```bash\n    git clone https:\u002F\u002Fgithub.com\u002Fjeeliz\u002FjeelizWeboji.git\n    cd jeelizWeboji\n    ```\n\n2.  启动本地 HTTPS 服务器（使用 Docker）：\n    ```bash\n    docker-compose up\n    ```\n\n3.  在浏览器中访问：\n    ```text\n    http:\u002F\u002Flocalhost:8888\n    ```\n    *注：若不使用 Docker，需自行配置任意支持 HTTPS 的静态文件服务器。*\n\n### 方式二：通过 NPM 安装（用于项目开发）\n\n虽然官方主要提供直接引用的脚本，但你也可以将文件放入项目中。若使用打包工具（如 Webpack\u002FVite）：\n\n1.  下载核心文件到项目目录（例如 `lib\u002F`）：\n    *   `jeelizFaceExpressions.module.js`\n    *   `jeelizFaceExpressionsNNC.json` (神经网络模型)\n\n2.  或者直接使用 CDN 链接（需确保你的构建工具能处理非 npm 资源）。\n\n## 基本使用\n\n以下示例展示如何在原生 JavaScript 环境中初始化库并获取面部数据。\n\n### 1. HTML 结构\n创建一个用于显示视频预览和结果的容器：\n\n```html\n\u003Ccanvas id=\"canvas\">\u003C\u002Fcanvas>\n\u003C!-- 可选：用于显示 3D 模型或 SVG 的容器 -->\n\u003Cdiv id=\"output-container\">\u003C\u002Fdiv>\n```\n\n### 2. JavaScript 初始化\n引入库文件并调用初始化函数。\n\n**注意**：如果使用打包工具（Webpack 等），请直接 `import` 或 `require` 模型文件；如果是传统脚本标签引入，则使用 `NNCPath` 指定模型 URL。\n\n#### 场景 A：使用打包工具 (Webpack\u002FVite\u002FRollup)\n\n```javascript\nimport faceExpressions from '.\u002Flib\u002FjeelizFaceExpressions.module.js';\nimport neuralNetworkModel from '.\u002Flib\u002FjeelizFaceExpressionsNNC.json';\n\nfaceExpressions.init({\n  canvasId: 'canvas',\n  NNC: neuralNetworkModel, \u002F\u002F 直接传入导入的 JSON 对象\n  callbackReady: function(errCode, spec) {\n    if (errCode) {\n      console.log('AN ERROR HAPPENS. ERROR CODE =', errCode);\n      return;\n    }\n    console.log('INFO: JEELIZFACEEXPRESSIONS IS READY');\n    \n    \u002F\u002F 开始检测循环\n    function detect() {\n      const detections = faceExpressions.detect();\n      \n      if (detections.length > 0) {\n        const det = detections[0];\n        \u002F\u002F det.expressions 包含 11 种表情系数 (0.0 - 1.0)\n        \u002F\u002F det.rotation 包含 3 轴旋转数据\n        console.log('表情数据:', det.expressions);\n        \n        \u002F\u002F 在此处更新你的 3D 模型 (Three.js) 或 SVG 属性\n        \u002F\u002F updateMyAvatar(det); \n      }\n      \n      requestAnimationFrame(detect);\n    }\n    \n    detect();\n  },\n  callbackTrack: function(detects) {\n    \u002F\u002F 每一帧的追踪回调\n  }\n});\n```\n\n#### 场景 B：传统 script 标签引入\n\n```html\n\u003Cscript src=\"dist\u002FjeelizFaceExpressions.js\">\u003C\u002Fscript>\n\u003Cscript>\n  JeelizFaceExpressions.init({\n    canvasId: 'canvas',\n    NNCPath: 'dist\u002FjeelizFaceExpressionsNNC.json', \u002F\u002F 指向模型文件的路径\n    callbackReady: function(errCode, spec) {\n      if (errCode) {\n        console.log('初始化失败，错误代码:', errCode);\n        return;\n      }\n      \n      function loop() {\n        const detects = JeelizFaceExpressions.detect();\n        if (detects.length > 0) {\n          \u002F\u002F 获取第一个检测到的人脸数据\n          const face = detects[0];\n          \u002F\u002F face.expressions: [眉毛, 眼睛, 嘴巴等 11 个数值]\n          \u002F\u002F face.rotation: [x, y, z]\n          \n          \u002F\u002F 在这里驱动你的动画逻辑\n          \u002F\u002F animateCharacter(face);\n        }\n        requestAnimationFrame(loop);\n      }\n      loop();\n    }\n  });\n\u003C\u002Fscript>\n```\n\n### 3. 驱动动画\n库本身只输出原始数据（表情系数和旋转角度）。要看到效果，你需要结合 **Three.js**（用于 3D 模型）或 **SVG** 操作来映射这些数据。官方在 `\u002Fhelpers\u002F` 目录下提供了 `JeelizThreeHelper` 和 `JeelizSVGHelper` 辅助工具，可简化将检测数据绑定到模型形态键（Morph Targets）的过程。","某在线教育平台希望在其网页版互动课堂中，让学生通过摄像头实时驱动一个 3D 卡通形象（如浣熊）来增强上课的趣味性和参与感。\n\n### 没有 jeelizWeboji 时\n- **开发门槛极高**：团队需自行研究复杂的计算机视觉算法或购买昂贵的商业 SDK，且难以在纯前端环境中实现。\n- **服务器压力巨大**：若采用服务端处理视频流方案，会导致带宽成本飙升，并产生明显的动作延迟，破坏互动体验。\n- **兼容性差**：难以同时兼顾桌面端和移动端浏览器，尤其在低端设备上无法流畅运行面部捕捉功能。\n- **表情识别单一**：只能获取简单的人脸坐标，无法精准捕捉眨眼、张嘴等 11 种细微面部表情，导致卡通形象僵硬。\n\n### 使用 jeelizWeboji 后\n- **纯前端快速集成**：直接引入 JavaScript 库即可利用客户端 GPU 算力，无需后端支持，几天内即可完成 3D 浣熊形象的嵌入。\n- **零延迟流畅互动**：视频数据完全在本地浏览器处理，消除了网络传输延迟，学生的表情变化能毫秒级同步到卡通形象上。\n- **广泛的设备适配**：凭借对 WebGL 的深度优化，即使在普通手机浏览器上也能稳定运行，且对光线条件和佩戴眼镜等情况具有鲁棒性。\n- **丰富的表情映射**：自动识别 11 种面部表达式及三维旋转角度，通过内置的 Three.js 辅助工具，让卡通浣熊能生动模仿学生的喜怒哀乐。\n\njeelizWeboji 将高门槛的实时面部捕捉技术转化为轻量级的浏览器原生能力，以极低成本实现了沉浸式的网页互动体验。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fjeeliz_jeelizWeboji_6e2252d7.jpg","jeeliz","Jeeliz","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002Fjeeliz_22e50cab.png","Eyewear Virtual Try-On for the Web",null,"contact@jeeliz.com","JeelizVTO","https:\u002F\u002Fjeeliz.com","https:\u002F\u002Fgithub.com\u002Fjeeliz",[85,89],{"name":86,"color":87,"percentage":88},"JavaScript","#f1e05a",99.7,{"name":90,"color":91,"percentage":92},"Python","#3572A5",0.3,1095,149,"2026-03-27T08:53:59","Apache-2.0","Linux, macOS, Windows","需要支持 WebGL 的 GPU（集成显卡或独立显卡均可），性能越强检测帧率越高，无特定型号或显存要求","未说明",{"notes":101,"python":102,"dependencies":103},"这是一个纯前端 JavaScript\u002FWebGL 库，无需 Python 环境。必须通过 HTTPS 服务器托管（本地开发也需 HTTPS，否则浏览器会阻止摄像头访问）。建议在光线充足、正对摄像头的环境下使用。在 iOS 14.3 以下的原生 Webview 中摄像头访问受限，需特殊处理。","不需要",[104,105,106,107],"WebGL","MediaStream API","THREE.js (可选，用于 3D 演示)","Apache Cordova (可选，用于原生应用)",[13,14],[110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128],"javascript","webgl","threejs","weboji","webcam","deep-learning","face","face-expression","computer-vision","augmented-reality","face-detection","face-tracking","real-time","morph","animated","emoticon","tracking","camera","webar","2026-03-27T02:49:30.150509","2026-04-06T07:18:39.498292",[132,137,142,147,152,157,162],{"id":133,"question_zh":134,"answer_zh":135,"source_url":136},13121,"在 iOS 或 Cordova 应用中构建时遇到 WebGL 错误（如 INVALID_OPERATION: texImage2D）怎么办？","该问题通常与旧版 iOS 的相机访问权限和 WebGL 支持有关。好消息是，从 iOS 14.3 开始，Chrome、Firefox、Opera 以及嵌入在原生应用中的 WKWebViews 已启用相机访问权限，Jeeliz Weboji 在这些环境下可以正常工作。如果您在旧设备（如 iPad 3 运行 iOS 9）上遇到此错误，建议升级系统或测试环境至 iOS 14.3 以上版本。","https:\u002F\u002Fgithub.com\u002Fjeeliz\u002FjeelizWeboji\u002Fissues\u002F27",{"id":138,"question_zh":139,"answer_zh":140,"source_url":141},13122,"如何在移动设备上优化性能并解决低帧率（FPS）问题？","如果在较新的手机（如 Samsung Note 10）上帧率较低（5-12 FPS），可能的原因及解决方案包括：\n1. **视频分辨率过高**：检查 getUserMedia API 的实现，尝试强制使用较低的媒体约束（media constraints）以降低视频分辨率。\n2. **WebGL 瓶颈**：刷新视频纹理时可能涉及 CPU，导致变慢。\n3. **多上下文切换**：库创建了两个 WebGL 上下文（一个用于神经网络，一个用于 THREE.js），某些实现可能在切换上下文时表现不佳。\n4. **Canvas 分辨率过大**：检查 THREE.js canvas 的分辨率设置。\n此外，维护者已推送了更快、更轻量级的新神经网络模型，更新到最新版本通常能显著提升中等配置手机的性能。","https:\u002F\u002Fgithub.com\u002Fjeeliz\u002FjeelizWeboji\u002Fissues\u002F33",{"id":143,"question_zh":144,"answer_zh":145,"source_url":146},13123,"遇到 'Not enough capabilities' 错误或 WebGL2 兼容性问题该如何处理？","如果在特定设备（如 Samsung A5 2016）上遇到 'ERROR in ContextFeedForward: Not enough capabilities' 错误，这通常是因为设备的 WebGL 能力不足。维护者已发布了新的神经网络模型，该模型比旧版本更快、更轻量，且对硬件要求更低，同时保持了相同的准确率。建议首先升级到库的最新版本。如果问题仍然存在，可能是该设备确实不支持所需的 WebGL 特性，需考虑降级方案或提示用户更换设备。","https:\u002F\u002Fgithub.com\u002Fjeeliz\u002FjeelizWeboji\u002Fissues\u002F26",{"id":148,"question_zh":149,"answer_zh":150,"source_url":151},13124,"如何平滑面部表情动画并减少抖动？","为了获得更自然的动画效果并减少抖动，社区开发者建议采取以下措施：\n1. **降低精度**：表情影响值（influences）精度过高会导致模型移动幅度过大，可以使用 `.toFixed()` 函数限制小数位数。\n2. **平均化处理**：眼睛通常同时开合（眨眼除外），眉毛也是如此。可以编写函数计算双眼或双眉的平均值来统一控制。\n3. **位移阈值过滤**：创建一个“平均位移”函数，计算上一帧与当前帧之间旋转和影响值的变化。如果平均位移低于设定的阈值，则不更新 weboji 状态，从而有效减少画面抖动。","https:\u002F\u002Fgithub.com\u002Fjeeliz\u002FjeelizWeboji\u002Fissues\u002F25",{"id":153,"question_zh":154,"answer_zh":155,"source_url":156},13125,"是否可以将该库作为 NPM 包使用或在 Webpack\u002FDiscourse 等环境中集成？","虽然官方可能没有直接提供 NPM 包（视具体时间点而定），但社区已成功通过 Webpack 将该库打包并在复杂环境（如 Discourse 组件）中使用。集成时的关键点包括：\n1. 使用 Webpack 将库捆绑到您的项目中。\n2. 确保正确配置资源路径（assets path）。\n3. 如果需要，可以参考社区提供的 Boilerplate 或示例代码进行适配。维护者欢迎用户提交 Pull Request 来改进文档或添加 NPM 支持。","https:\u002F\u002Fgithub.com\u002Fjeeliz\u002FjeelizWeboji\u002Fissues\u002F13",{"id":158,"question_zh":159,"answer_zh":160,"source_url":161},13126,"如何获取面部的坐标数据（x, y, width, height）以进行截图或进一步处理？","如果您需要像 jeelizFaceFilter 的 `detectState` 那样获取面部的 x, y, 宽度和高度坐标以便截取面部图片，请注意 Jeeliz Weboji 主要专注于表情捕捉。不过，您可以参考 jeelizFaceFilter 的实现方式，或者查看库中是否暴露了类似 `get_pos` 的方法（部分版本可能已添加）。如果原生不支持，可能需要结合视频流数据和检测到的人脸区域自行计算边界框，或者参考维护者在其他相关仓库（如 jeelizFaceFilter）中提供的坐标提取逻辑。","https:\u002F\u002Fgithub.com\u002Fjeeliz\u002FjeelizWeboji\u002Fissues\u002F8",{"id":163,"question_zh":164,"answer_zh":165,"source_url":151},13127,"该库使用的模型是基于 TensorFlow 构建的吗？如何用更多样本改进模型？","关于模型的具体训练框架（如是否使用 TensorFlow），维护者未直接在回复中确认细节，但提到了他们正将重心转向增强现实（AR）用例（见 jeelizAR 项目）。对于希望用更多样本图像改进模型的用户，目前官方并未开放直接的重新训练流程。不过，用户可以利用 Jeeliz YouTube 频道上的图片和视频作为参考数据。如果需要进行深度定制或训练，可能需要具备一定的 Python 核心知识并导入相关的 Matlab 库（根据社区讨论推测），或者直接联系维护者探讨合作可能性。",[]]