UI组件后端【免费下载链接】dicebearDiceBear is an avatar library for designers and developers. 项目地址https://gitcode.com/gh_mirrors/di/dicebear点击查看免费下载Bottts 是 DiceBear 提供的一款免费机器人头像风格它把头像拆解为可交换的面部、嘴巴、天线、侧部单元与表面纹理通过一个seed即可生成形态各异的机器人。本文围绕 Bottts 风格文档 展开讲解如何通过 DiceBear 的 HTTP API 与 JavaScript 库快速生成 Bottts 头像并结合仓库内的预设数据与源码实现深入说明其核心选项、定制方法与渲染原理。Bottts 风格是什么Bottts 的全称描述是 Robot heads assembled from swappable faces, mouths, antennas, side units and textures即机器人头像由可交换的部件组装而成。它与传统人物肖像风格不同所有部件都围绕机器人主题设计并且共用一套外壳颜色。从仓库中的预设数据文件和编辑器选项定义可以看出Bottts 的可定制部件包括眼睛eyes提供bulging、dizzy、glow、happy、robocop、round、roundFrame01、roundFrame02、sensor等变体嘴巴mouth提供bite、grill01、grill02、grill03、smile01、smile02、square01、square02等变体头顶部件top提供bulb01、glowingBulb01、glowingBulb02、horns、lights、pyramid、radar等天线与装饰变体。编辑器在德语界面中专门把 bottts 的top翻译为 Kopfaufsatz头顶饰件以避免与头部混淆见 OptionsTabs.vue 注释 与 de.json侧部单元sides提供antenna02、cables01、cables02、round、square、squareAssymetric等变体表面纹理texture通过textureProbability控制纹理叠加层的出现概率其变体键为textureVariant编辑器德语标签为 Textur。Bottts 的整套外壳shell使用单一颜色组baseColor。预设描述中明确写道 Bottts has one color group for the whole shell因此更换一个调色板就能改变整台机器人的主色。通过 HTTP API 快速生成 Bottts 头像Bottts 是 DiceBear 官方 HTTP API 支持的风格之一。HTTP API 的调用方式在集成文档中有完整说明核心 URL 模板为https://api.dicebear.com/11.x/styleName/svg将styleName替换为bottts即可https://api.dicebear.com/11.x/bottts/svg要生成同一个用户每次访问都看到同一个机器人的稳定头像传入一个稳定的seed例如用户 IDhttps://api.dicebear.com/11.x/bottts/svg?seeduser-8f3a2c同一个 seed 永远返回同一张图片这正是把 Bottts 用作未上传头像用户的默认占位图的关键。若 seed 含空格等特殊字符需先做 URL 编码。HTTP API 支持多种输出格式。在集成文档中Bottts 被选作演示五种格式的例子https://api.dicebear.com/11.x/bottts/svg https://api.dicebear.com/11.x/bottts/png https://api.dicebear.com/11.x/bottts/jpg https://api.dicebear.com/11.x/bottts/webp https://api.dicebear.com/11.x/bottts/avif其中 SVG 可无限缩放、没有尺寸上限PNG、JPG、WebP、AVIF 最大 256×256 像素且有更低的速率限制。API 还提供definition.json与options.json两个元数据端点返回 bottts 的定义 JSON 与每个可选项的类型、枚举值和取值范围适合用来构建头像编辑器之类的工具。在 JavaScript 库中使用 Bottts如果不想依赖远程 API可以在浏览器或 Node.js22中本地渲染。需要安装核心库与样式定义包npm install dicebear/core dicebear/styles基础用法参见 JavaScript 库文档import { Style, Avatar } from dicebear/core; import bottts from dicebear/styles/bottts.json with { type: json }; const style new Style(bottts); const avatar new Avatar(style, { seed: robot-42, // ... other options }); const svg avatar.toString();生成固定尺寸、圆形的机器人头像const avatar new Avatar(style, { seed: robot-42, size: 128, borderRadius: 50, // circular avatar });配合变换类核心选项翻转、旋转、缩放、平移时可直接像下面这样传入以avataaars为例的写法对 bottts 同样适用const avatar new Avatar(style, { seed: Jane, flip: horizontal, rotate: 10, scale: 0.9, translateY: 5, });多个头像同时内联到同一页面时可开启idRandomization为每个 SVG 的内部 ID 加随机后缀避免url(#…)冲突但注意它会破坏输出的确定性快照测试或 SSR 场景应关闭。Bottts 的核心定制选项通用核心选项Bottts 继承 DiceBear 所有风格共享的核心选项完整定义见核心选项文档。与本风格最相关的几个选项类型默认值说明seedstring确定性生成的种子flipnone \| horizontal \| vertical \| bothnone翻转头像rotatenumber \| [min, max]0旋转角度−360 到 360scalenumber \| [min, max]1围绕画布中心的统一缩放0 到 10borderRadiusnumber \| [min, max]0圆角0 到 5050 为圆形sizeintegerunset输出像素尺寸1 到 4096translateX/translateYnumber \| [min, max]0平移画布宽/高的百分比tagsstring \| string[]unset按标签过滤变体!前缀表示排除背景选项背景选项对所有风格都可用即使风格定义本身没有background颜色组选项类型默认值说明backgroundColorstring \| string[]unset背景色十六进制#可省略backgroundColorFillsolid \| linear \| radialsolid背景填充方式可传数组随机backgroundColorFillStopsinteger \| [min, max]2渐变停靠点数最小 2backgroundColorAnglenumber \| [min, max]0渐变角度−360 到 360backgroundColorOrderrandom \| fixedrandom固定顺序使用颜色组件与颜色动态选项对 bottts 中的每个组件eyes、mouth、top、sides、texture可以用{component}Variant限定变体可传单个字符串、字符串数组或带权重的对象{ variant: weight }用{component}Probability控制出现概率0 到 100。例如只想要呆萌灯泡眼和方嘴的机器人const avatar new Avatar(style, { seed: dizzy-bot, eyesVariant: [dizzy, glow], mouthVariant: square01, });对颜色组baseColor与background可用{color}Color覆盖调色板并用{color}ColorFill、{color}ColorAngle、{color}ColorFillStops、{color}ColorOrder控制填充细节。传入{color}ColorOrder: fixed时颜色严格保持给定顺序渐变按首到尾作为停靠点实心填充始终用第一个颜色。一个值得注意的风格特性多个预设的说明都提到Bottts 中有部分眼睛、一个嘴巴和若干天线把颜色直接画进美术素材里而不是暴露为颜色组因此这些变体不受baseColor换色影响强行改色时这些变体会从可选池中消失。例如 sepia 预设说明指出Five eye sets, one mouth and three antennas carry a color painted into the artwork rather than exposed as a group, so those variants drop out。为这类机器人做品牌换色时需要注意这一约束。用官方预设快速落地仓库为 Bottts 维护了 12 套官方预设完整数据见 bottts.json对应预设页面。预设本质上就是一组普通的渲染选项选中一套后可以读取它的选项代码也可以直接在 DiceBear Playground 中打开继续微调。预设未覆盖的选项仍随 seed 变化因此每套预设对应多少种不同的机器人取决于它锁定了多少自由度。ID名称摘要核心选项bareBare无背景、无表面纹理backgroundColor: []textureProbability: 0sepiaSepia黄铜机器人在仿古纸上米色背景 4 个黄铜外壳色并锁定 eyes/mouth/top/sides 变体池greyscaleGreyscale四级灰阶的裸金属浅灰背景 4 个钢灰色同样锁定变体池duotoneDuotone单一靛蓝外壳backgroundColor: [dfe3f5]baseColor: [3d4272]mutedMuted大地色系外壳6 个大地色替换默认 22 个饱和色electricElectric近黑背景上的荧光色6 个超出风格自带色域的荧光色pastel-wallPastel Wall五款柔和背景外壳不动5 个柔和背景色bold-popBold Pop饱和背景 饱和外壳5 个高饱和背景色night-shiftNight Shift暗色界面专用近黑背景 风格色域偏亮端的外壳色sunriseSunrise暖色渐变背景2 色 backgroundColorFill: linearbackgroundColorAngle: 135full-castFull Cast每个机器人都带纹理textureProbability: 100默认约 50%close-upClose Up放大脸部适合小尺寸头像scale: 1.2其中sepia、greyscale、duotone、muted四套预设共同使用了同一组变体池9 种眼睛、8 种嘴巴、7 种头顶部件、6 种侧部单元下面以sepia为例给出完整可复制的选项对象{ backgroundColor: [dfc9a3], baseColor: [8a6a3f, a3814f, 6f5433, b59463], eyesVariant: [ bulging, dizzy, glow, happy, robocop, round, roundFrame01, roundFrame02, sensor ], mouthVariant: [ bite, grill01, grill02, grill03, smile01, smile02, square01, square02 ], topVariant: [ bulb01, glowingBulb01, glowingBulb02, horns, lights, pyramid, radar ], sidesVariant: [ antenna02, cables01, cables02, round, square, squareAssymetric ] }在 HTTP API 中把预设选项以查询参数形式拼接即可数组用逗号分隔https://api.dicebear.com/11.x/bottts/svg?seedbrass-01backgroundColordfc9a3baseColor8a6a3f,a3814f,6f5433,b59463textureProbability0源码视角Bottts 是如何被解析与渲染的风格页与预设的自动接线Bottts 风格页本体是一段极简的 Vue 组件调用见 bottts/index.md实际渲染交由SiteStylePage组件完成。仓库中的 sync-preset-pages.ts 会自动把预设数据接入每个风格页对有SiteStylePage的风格页预设区由该组件自行渲染对其他风格页则在## Options之前插入## Presets与StylePresets组件。这意味着你在文档站点上看到的 Bottts 预设画廊其数据源就是 bottts.json。选项归一化与变体权重在dicebear/core的 JavaScript 实现中用户传入的选项先由 Options.ts 归一化标量被统一转为数组、[min, max]被转为内部Range结构随后由 Resolver.ts 结合风格定义与 PRNG 完成最终取值。变体选择的核心逻辑在Resolver.#variantWeightsResolver.ts当用户显式设置了{component}Variant时它完全接管该组件的变体池列表中的每个变体权重为 1权重对象则按给定权重加权此时tags过滤被忽略只有未显式设置变体时tags过滤才生效两者都未设置则使用风格定义的全部变体。组件显隐则由{component}Probability决定未设置时回落到定义中的默认概率见#probability与#isVisible。这也解释了为什么textureProbability: 0能直接关闭纹理层。预览种子与一致性每个风格页顶部的预览行由 generate-preview-seeds.ts 生成它为每个风格挑选 8 个 seed使预览行的首字母拼出 DICEBEAR并按图形差异 调色板差异 相邻同色惩罚的评分做确定性束搜索。脚本注释特别提到行内能给 bottts 分配 8 个不同的机器人且其中 4 个仍是同一金色——这从侧面印证了 Bottts 的多样性主要由部件形态而非颜色驱动。在 CLI 集成文档的对比输出示例中bottts一行显示0/20 0/53 identical说明参与对比的 53 个变体在两侧版本中渲染结果完全一致——这也是 Bottts 变体规模的一个可验证参考20 个 seed、53 个变体均无差异。相关风格Bottts Neutral如果只需要机器人眼睛和嘴巴而不需要头部、天线与侧部单元官方还提供了精简版Bottts Neutral见 bottts-neutral 文档机器人的脸直接落在彩色方块上没有任何头壳部件。它的预设数据在 bottts-neutral.json同样包含bare、sepia、greyscale、duotone、muted、electric、pastel-wall、bold-pop、sunrise、full-cast、close-up等预设其中close-up的缩放值为1.25。在头像尺寸极小的评论区场景Neutral 版往往比完整版更可读。许可与使用提醒DiceBear 的各类风格来自不同创作者每位创作者为自己的风格选择许可证完整清单见许可概览。HTTP API 免费用于非商业用途SVG 限 50 次请求/秒、位图格式限 10 次/秒超限返回429需要商业使用或更高配额时可参考自托管 HTTP API 指南部署自己的实例。此外公开 HTTP API 不支持idRandomization、fontFamily、fontWeight与title选项这些能力需要自托管才能启用。小结Bottts 用一套简洁的部件组装模型覆盖了从呆萌到硬核的广阔视觉范围眼睛、嘴巴、头顶部件、侧部单元与纹理层各自独立可控单一baseColor颜色组让整体换色异常简单。无论你是通过一行 HTTP URL、几行 JavaScript 代码还是直接复用仓库中的 12 套官方预设都能在几分钟内得到一批风格统一、形态各异的机器人头像。想进一步动手可以打开 Playground 调出任意预设读取它的选项 JSON 再继续调整。赞分享UI组件后端【免费下载链接】dicebearDiceBear is an avatar library for designers and developers. 项目地址https://gitcode.com/gh_mirrors/di/dicebear点击查看免费下载相关推荐DiceBear Bottts Neutral 头像风格实战指南纯色方块上的机器人脸生成与个性化DiceBear Bottts Neutral 头像风格实战指南纯色方块上的机器人脸生成与个性化 Bottts Neutral 是 DiceBear 中一支极UI组件后端Cutouts 头像风格完全指南用 DiceBear 生成撕纸拼贴风人物头像Cutouts 头像风格完全指南用 DiceBear 生成撕纸拼贴风人物头像 Cutouts 是 DiceBear 头像库中一款「撕纸拼贴」风格的免费头像生成UI组件后端OpenClaw Z.AIGLMProvider 实战指南端点自动探测、模型目录与思考层级配置OpenClaw Z.AIGLMProvider 实战指南端点自动探测、模型目录与思考层级配置 本文基于 OpenClaw 仓库中 docs/providUI组件后端上一篇快速实现Layui表格行拖拽排序5步完整操作指南下一篇Science Parse核心功能详解3分钟掌握PDF论文的标题、作者与摘要提取创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考