UD5工具箱
状态机可视化工具 - 绘制状态图并生成代码
拖拽添加状态和转换，定义事件和动作，生成 JavaScript 状态机代码。
预设模板
维度管理 (3-10个)
数据集 (1-6个)
显示设置
数值矩阵 (0-100)
Canvas噪点纹理生成 - 可下载背景图
通过Canvas生成不同粒度、颜色的噪点纹理图片，适合用作页面背景或叠加。
响应式设计测试工具 - 多分辨率视口预览
在线响应式布局测试器，同时预览常见设备分辨率的网页显示效果，帮助检查前端适配。
图片高斯模糊工具 - Canvas在线模糊效果
在线对图片应用高斯模糊滤镜，可通过滑块调节模糊半径强度，实时预览效果并下载。
Import Map 演示 - 浏览器端模块映射实验
编写 HTML 和 import map，在浏览器中直接导入裸标识符模块并执行。
Image Capture API 演示 - 拍照并获取原始帧
使用 ImageCapture.takePhoto() 拍摄高分辨率照片，或抓取实时帧并下载。
图标字体实时预览 - 输入码点测试大小
粘贴自定义图标字体的Unicode，调节尺寸颜色立即查看效果。
图片像素化处理工具 - 在线马赛克效果调整
上传图片，拖动滑块调整像素块大小，实时预览马赛克效果并导出为图片。
图片镜像翻转工具 - 在线水平/垂直对称处理
将图片进行水平镜像或垂直翻转，简单快捷，纯Canvas处理，下载保存翻转后的图片。
精灵帧动画生成器 - 多图播放及CSS动画
上传序列帧图片，合成spritesheet并生成对应CSS steps()帧动画代码。
图片色彩直方图查看器 - RGB/亮度通道分布
上传图片，显示红、绿、蓝及亮度通道的直方图，辅助评估曝光与色彩分布。
MediaRecorder API 多媒体录制 - 摄像头+音频捕获
获取摄像头和麦克风，录制视频片段并回放或下载，展示 API 基本用法。
代码语法高亮工具 - 在线代码美化展示
粘贴代码自动进行语法高亮显示，支持主流编程语言，生成带行号的HTML代码块，方便嵌入博客。
WebCodecs API 图像解码器 - 解码 JPEG/PNG 帧
使用 ImageDecoder API 解码图片并逐帧显示（若为动图），展示底层编解码能力。
图像水彩画效果生成 - 多层滤镜叠加模拟湿笔画
通过多次模糊、噪点叠加和边缘强化算法，将普通照片转换成湿润通透的水彩画风格。
CSV 数据概要分析器 - 列统计与分布可视化
上传CSV文件，自动计算每列的计数、唯一值、缺失率及数值型分布直方图，快速了解数据。
图片直方图查看器 - RGB/亮度通道分析
上传图片，绘制其亮度及红绿蓝通道的直方图，辅助曝光评估。
图片翻转工具 - 水平/垂直翻转及转置
将图片进行水平翻转、垂直翻转或行列转置，方便调整自拍或扫描方向。
音乐频谱可视化 - 实时跳动频率柱
本地音频或麦克风输入时，显示随音乐跳动的频谱柱状图，多种配色风格。
交互式图像分割演示 - 点击分离对象
在图像上点击，利用前端模型将点击范围内的主要物体自动从背景分离。
触摸事件探查器 - 多点触控详细数据记录
实时显示touchstart/move/end事件的所有属性：坐标、力度、半径与角度，辅助手势开发。
动态 GIF 合成工具 - 多张图片帧合并成 GIF
上传多张图片作为帧，调整每帧延迟，合成并下载动态 GIF，完全浏览器端实现。
基于模式的模拟数据生成器 - 自定义字段与规则
定义字段名称和类型（姓名、邮箱、数字范围等），批量生成符合规则的 JSON 模拟数据。
精灵表查看器 - 分解并预览各帧动画
上传精灵表图片，设定行数和列数，实时播放动画并提取单帧。
像素化/马赛克工具 - 图片区域打码遮盖
在图片上拖拽矩形区域，对该区域进行像素化处理，用于遮盖敏感信息，可调节方块大小。
图片渐变色提取器 - 在线分析图片主渐变
从上传的图片中智能提取主要渐变色方向与色标，生成对应CSS渐变代码，用于设计背景。
交互式图像分割演示 - 点击选择对象
使用 SAM 或其他前端模型，点击图片中的对象区域实现像素级分割，体验智能抠图。
代码片段转图片 - 高亮代码导出为美观图片
粘贴代码并选择高亮主题，将代码片段渲染为精美的PNG图片，便于社交媒体分享。
波形音频播放器组件 - 可拖拽进度高亮
生成带有音频波形可视化、可点击跳转的可定制HTML音频播放器代码。
View Transition API 演练场 - 页面切换动画配置
在单页内模拟MPA过渡效果，自定义进场/出场动画，体验View Transitions API丝滑切换。