---
title: bbox-visualizer
canonical_url: "https://www.modelscope.cn/studios/sealofyou/bbox-visualizer"
md_url: "https://www.modelscope.cn/studios/sealofyou/bbox-visualizer.md"
repository: sealofyou/bbox-visualizer
chinese_name: "边界框可视化工具"
last_updated: 2026-02-05
sdk_type: static
sdk_version: 3.29.0
downloads: 0
stars: 1
---

# bbox-visualizer

> bbox-visualizer - sealofyou 在 ModelScope 创建的在线 Demo。支持多种坐标格式

sealofyou/bbox-visualizer 是 ModelScope 魔搭社区上的在线可交互 Demo（创空间），基于 static 3.29.0 构建，中文名为「边界框可视化工具」。

- **Repository**: sealofyou/bbox-visualizer
- **SDK**: static
- **SDK version**: 3.29.0
- **Downloads**: 0
- **Stars**: 1
- **Last updated**: 2026-02-05

Source: https://www.modelscope.cn/studios/sealofyou/bbox-visualizer

---

# BBox Visualizer

一个纯前端的边界框（Bounding Box）可视化工具，用于验证大模型输出和格式转换预览。

## 功能特点

- 🖼️ **图片上传**：拖拽或点击上传图片
- 📐 **多格式支持**：X1Y1X2Y2 / XYWH / Qwen归一化(0-999)
- 🔧 **智能解析**：自动识别 JSON 中的 bbox 和 label 字段
- 🎨 **丰富样式**：不同 label 不同颜色，半透明填充
- 🖱️ **交互功能**：悬停高亮、点击隐藏/显示、图例统计
- 📱 **响应式设计**：桌面端 + 移动端抽屉式面板

## 使用方法

### 快速开始

1. 上传一张图片
2. 在输入框中粘贴 bbox 数据（JSON 格式）
3. 选择正确的坐标格式（如果自动检测不对可手动切换）
4. 实时查看可视化结果

### 支持的数据格式

```json
// 纯 bbox 数组
[100, 100, 400, 400]

// 带 label 的对象
{"label": "cat", "bbox": [100, 100, 400, 400]}

// 对象数组
[
  {"label": "cat", "bbox": [100, 100, 400, 400]},
  {"label": "dog", "box": [50, 50, 200, 250]}
]
```

### 字段名称支持

- **Label**：`label`, `labels`, `class`, `name`, `category`
- **Bbox**：`bbox`, `box`, `coordinates`, `rect`, `position`

## 坐标格式说明

| 格式 | 说明 | 示例 |
|------|------|------|
| X1Y1X2Y2 | 左上角 + 右下角坐标 | `[100, 100, 400, 400]` |
| XYWH | 左上角 + 宽高 | `[100, 100, 300, 300]` |
| Qwen归一化 | 0-999 范围，自动缩放到图片尺寸 | `[500, 500, 800, 800]` |

## 技术栈

- 纯 HTML/CSS/JavaScript
- Canvas API 用于绘制
- 无需服务器，可直接在浏览器运行

## License

MIT