图像分割 (Transformers.js)¶

体验直接在浏览器中运行的 AI 图像分割模型！借助 Transformers.js，我们可以对图像中的不同对象进行像素级分割，精确识别它们的轮廓和区域。

上传一张图片，模型将尝试分割图中的对象，并用不同颜色高亮显示它们。

分割图像

状态: 请上传图片并点击按钮

工作原理¶

此演示利用 Transformers.js 库在浏览器中进行图像分割：

1. 加载库: 通过 CDN 引入 Transformers.js。
2. 模型加载: 首次点击“分割图像”按钮时，会从 Hugging Face Hub 下载预训练的图像分割模型 (例如 Xenova/detr-resnet-50-panoptic)。这类模型能够识别图像中的不同对象并为每个对象生成一个像素级别的掩码 (mask)。模型下载后会被浏览器缓存。
3. 图像处理与分割:
   • 用户上传的图像被加载并在页面上预览。
   • 图像数据传递给加载的 image-segmentation pipeline。
   • 模型处理图像并返回一个包含分割结果的列表。每个结果通常包括：
     • label: 物体的类别 (例如：人, 汽车, 天空)。
     • score: 模型对该分割结果的置信度。
     • mask: 一个包含每个像素归属信息的对象 (通常是一个 RawImage 对象，其 data 属性是一个表示掩码的数组)。
4. 结果可视化:
   • 检测到的对象类别及其置信度会列出。
   • 一个 <canvas> 元素会覆盖在预览图像之上。对于每个检测到的对象，其对应的掩码会用一种随机生成的半透明颜色绘制到 canvas 上，从而在原图上高亮显示对象的精确区域。

关于全景分割 (Panoptic Segmentation)¶

示例中使用的 Xenova/detr-resnet-50-panoptic 模型执行的是全景分割任务。全景分割是图像分割的一个分支，它结合了语义分割（为每个像素分配类别标签，如“汽车”、“树木”）和实例分割（区分同一类别的不同对象实例，如“汽车1”、“汽车2”）的目标。

简单来说，全景分割的目标是为图像中的每个像素分配一个类别标签和一个实例ID。

客户端 AI 的优势¶

• 精细的图像理解: 直接在浏览器中实现像素级的对象识别。
• 隐私保护: 图像数据保留在用户浏览器中。
• 交互式体验: 用户可以快速看到复杂图像分析任务的结果。
• 降低服务器依赖: 减少服务器计算和带宽成本。

Transformers.js 使得在 Web 应用中集成此类高级计算机视觉功能变得更加容易。