# @bwnd/bbot 中文文档

规范地址：https://npmcn.com/package/%40bwnd/bbot/

版本：0\.6\.1
npm 元数据更新时间：2026-10-29T00:03:30.363Z
中文译文更新时间：2026-11-09T00:37:12.936Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40bwnd/bbot
原文对照：https://npmcn.com/package/%40bwnd/bbot/?lang=original
项目主页：https://bbot.bwnd.app/
源码仓库：https://github.com/bwndapp/bbot

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：155 kB，19 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：0 个
- peer 依赖：react \>=17
- 首次发布：2026-08-31T22:38:34.137Z
- 最新版本发布：2026-10-29T00:03:30.143Z
- 近 30 天下载量：1910（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：8（近 12 个月 8 个）

## 中文简介

AI代理的一面:30个表情,人们一眼看就看,9个反应,唇语相声. 代理面相协议的参考渲染器. 无相依相.

## 安装

```sh
npm install @bwnd/bbot
```

也可以使用：`pnpm add @bwnd/bbot`、`yarn add @bwnd/bbot`、`bun add @bwnd/bbot`

## README

![](https://npmcn.com/package/%40bwnd/bbot/docs/logo.png)

# 鲍勃

**AI特工的脸.**

它显示一个经纪人在做什么 和它的感觉, 一种方式人们阅读 看着:思考、工作、担心、高兴。 它跟随你的光标 眨眼 和嘴唇同步 当代理说话。 30个情绪,9发一发 反应, **4.8 kB 击出**,没有依赖关系.

### [尝试它活在bbot.bwnd.app](https://bbot.bwnd.app/)

![bbot — give your app a face](https://npmcn.com/package/%40bwnd/bbot/docs/hero.png)

* * *

## 安装

```sh
npm i @bwnd/bbot
```

```js
import { createFace } from '@bwnd/bbot'

const face = createFace(document.querySelector('#bot'), { expression: 'curious' })
face.react('bounce')
```

样式在运行时被注入, 因此没有 CSS 导入和没有 `<link>`。反应 这是一种可选的同伴依赖性——上面的一行没有牵出任何一条.

## 或者完全跳过安装

捆绑是包含样式的主机,所以这是一个整体整合:

```html
<div id="bot" style="width:160px;height:160px"></div>

<script type="module">
  import { createFace } from 'https://bbot.bwnd.app/face.js'

  const face = createFace(document.querySelector('#bot'), { expression: 'curious' })
  face.react('bounce')
</script>
```

> **给主机元素一个宽度和高度.** SVG装满了容器 所以 一个没有大小的容器就什么也没有了。 这是人们唯一会去的地方.

在 jsDelivr 上镜像, 如果您宁可贴上标签, 而不是最新的音轨 :

```js
import { createFace } from 'https://cdn.jsdelivr.net/gh/bwndapp/bbot@main/dist/face.js'
```

## 反应

```jsx
import { Face } from '@bwnd/bbot/react'

<Face size={160} expression="curious" mouth pupils />
```

反应建筑是预编而成的 里面有船的样式 所以它和 Vite、Next、CRA或Parcel——没有转录JSX `node_modules`没有CSS 导入。 开车通过裁判:

```jsx
const face = useRef(null)

<Face ref={face} size={160} />

face.current.react('bounce')       // one-shot, decays on its own
face.current.setExpression('sad')  // springs across, never snaps
face.current.look(-1, 0, 1200)     // force the gaze left for 1.2s
```

## 表达式

![30 expressions: idle, content, happy, joy, excited, love, surprised, scared, curious, confused, thinking, focus, suspicious, smug, sly, bored, worried, sad, annoyed, angry, sleepy, sleep](https://npmcn.com/package/%40bwnd/bbot/docs/expressions.png)

```js
face.setExpression('sleepy')
```

表达的每个领域都是弹簧目标 所以情绪会从 无论它们现在在哪里 而不是切割. `EXPRESSION_NAMES` 列举 他们运行的时间.

这个库里有一个形状:一个圆. 上面的情绪都会来 从两个头色的长方形 滑过每个眼睛并旋转 `angry` 财务报告和审定财务报表 `sad` 在相向旋转时是相同的盖.

## 反应

`blink` • 妇女 `wink` • 妇女 `nod` • 妇女 `shake` • 妇女 `bounce` • 妇女 `pop` • 妇女 `boing` • 妇女 `spin` • 妇女 `jitter`

```js
face.react('nod')
```

反应层在任何情绪的上方 活跃和腐烂自己。 他们 因此,一次发射两枚是好的,并打算. `REACTION_NAMES` 列举 他们.

## 他们

![The same face in four colour schemes: default white on black, inverted black on white, acid green, and sky blue](https://npmcn.com/package/%40bwnd/bbot/docs/themes.png)

四种自定义属性. 把他们放在脸上,或者放在上面的任何东西上 图书馆船除了暗模式默认之外,没有自己的颜色.

```css
#bot {
  --face-skin:  #000;      /* the big circle — and the lids, which must match  */
  --face-ink:   #e9ebec;   /* eyes and mouth                                   */
  --face-ring:  #2f3336;   /* hairline around the head; transparent by default */
  --face-pupil: var(--face-skin);
}
```

`--face-skin` 是负载的。 盖子是被剪去的头色矩形 每只眼睛,所以如果它不匹配 坐在头后,每一个表达 接缝.

> 自定义属性集 **在面部元素本身上** 击败继承自 一个祖先。 如果一个主题不被接受,那通常是原因.

## 如何运作

### 头是球形

![The same face looking up-left, at rest, and down-right — the far eye foreshortens into an ellipse while the near one stays round](https://npmcn.com/package/%40bwnd/bbot/docs/tracking.png)

眼睛不会在平盘上滑倒. 每个功能都有休息地点 {\\fn华文楷体\\fs20\\bord1\\shad1\\1che0e0e0\\2ch000000}地表上有一塊球被叫出并被打出去取景的球體,結果是: 向屏幕反射正图 因此,特性 旅行曲线 环线附近的路径和缓慢(从正角到正角的点) `R·sin θ`),一个圆 将表面工程涂成椭圆形——半径全宽, 沿着它被压扁了 眼睛和口都变成一球.

### 一切都是一个泉水

没有 CSS 转换, 没有键框 。 每个动画值都是被挡住的弹簧 每个框架的一体化, 这就是为什么一个反应可以分层 情绪没有 两个战斗.

## 道具

| 道具 | 默认 |  |
| --- | --- | --- |
| `size` | `140` | px, 平方( 只反应) |
| `expression` | `'idle'` | 任意键 `EXPRESSIONS` |
| `mouth` | `false` | 画出嘴巴和眼睛 |
| `pupils` | `false` | 内点的音轨与平面 |
| `track` | `true` | 完全跟着指针 |
| `blink` | `true` | 非自愿眨眼 |
| `idle` | `true` | 当指针静静地转来转去 |

除了别的事 `expression` 在施工时读取一次——修改一个 重建 SVG. `expression` 动画.

## 业绩

一个 `requestAnimationFrame` 循环和整个页面的一个指针监听器,不 不管有多少人的脸。 每张面额成本~15 `setAttribute` 每个帧的电话,和 向外滚动的相框完全通过 `IntersectionObserver`。 。 。 .

从外屏幕或背景标签返回后, 重新排出闪烁的计时器 而不是一举一动地解决积压问题.

`prefers-reduced-motion` 放下闲散的流浪 眨眼和反应 自动摇动——不要自加后卫.

## 大小

样式表由捆绑所注入,所以这些是整数——有 没有什么可补充的了.

|  | 已修改 | 击出 |
| --- | --- | --- |
| `createFace` (无框架) | 13.4千贝 | **4.8千贝** |
| `<Face>` (外部反应) | 14.2千贝 | **5.2千贝** |
| `@bwnd/bbot/fx` (可选) | 15.9千贝 | 4.9千贝 |
| `@bwnd/bbot/talk` (可选) | 1.9千贝 | 1.0克贝 |

后两个是独立的切入点,除非您导入,否则成本不高 他们.

## 效果

`@bwnd/bbot/fx` 添加尾声: 每个0–1, 相容的10个独立接头.

```js
import { createFace } from '@bwnd/bbot'
import { applyFx } from '@bwnd/bbot/fx'

const face = createFace(document.querySelector('#bot'))
const fx = applyFx(document.querySelector('#bot svg'), { chrome: 0.9, gloss: 0.8 })
fx.set({ bloom: 0.6 })   // change any knob at any time
```

`gloss` (接电灯), `rim` (一个霓虹管), `chrome` (一个反射的房间), `glass` (身体细而墨分相去相去相去也, `bloom` (紧 燃烧, `halation` (宽膜出血), `holo`, (中文(简体) ), `scan` (扫描), `scratch` (一件穿得干净的外套)和 `hue` (缓慢漂移).

层层是懒惰地建造的,所以一个把手,你以0的代价不惜一切代价离开. `chrome` 财务报告和审定财务报表 `scratch` 是昂贵的两所;其余的几乎是免费的.

## 说话

`@bwnd/bbot/talk` 将一张相片指向音频,并让其唇音同步. 脸已经 懂得说话 `face.talk(level)` 需要0比1的音响, 这是一半 听着.

```js
import { listen } from '@bwnd/bbot/talk'

const face = createFace(el, { mouth: true })
const stop = listen(document.querySelector('audio'), face)
```

`listen` 需要一个 `<audio>`编号 :`<video>`页:1 `MediaStream` (一个麦克风,一个WebRTC音轨) 或一个 `AudioNode` 您已经连接,然后返回 `stop()`。 。 。 .

它测量声音的颜色,并传递它作为 `talk(level, { wide, round })` ——分出三分和低音分出. 那些挑嘴的形状: 明亮的 音频去宽而浅 ("ee"), 黑暗音频小而圆 ("oo"), 响亮的中段 放下下巴("啊"). `talk(level)` 它自己打开和关闭.

对于渲染而不是回放,有 `analyseVoice(audioBuffer)`,其 `.at(time)` 返回时 `{ level, wide, round }`。同步后跟随帧本身 时间戳而不是音卡的做, 准确的,即使 编码器口吃——在完全没有音频设备的地方有效. 这个 将活分析器节点跟踪到0.004以内.

## 对于特工

bbot是用于 **[代理面额协议](https://npmcn.com/package/%40bwnd/bbot/spec/)**,一个 打开格式让一个AI代理来显示它在做什么以及它对此的感受: 状态( n)`thinking`, (中文(简体) ), `working`, (中文(简体) ), `waiting`, (中文(简体) ), `error`30种表达方式之一, 反应,或用唇音说话. 每个表达都有普通语言 光泽,所以同样的信号与面部,标题或屏幕阅读器文本一样有效.

```json
{ "type": "face.state", "state": "working", "label": "Searching your files" }
```

桌面部件在 [`widget/`](https://npmcn.com/package/%40bwnd/bbot/widget/) 把这个放在桌面上: 聊天 通过OpenRouter, 11Labs的声音,和一张脸 进行谈话.

机器可读文件在图书馆旁边服务,所以代理可以解决 如何在循环中没有人类使用它:

-   [`SKILL.md`](https://bbot.bwnd.app/SKILL.md) 完全API和值得避免的错误
-   [`llms.txt`](https://bbot.bwnd.app/llms.txt) ——短指数

## 地方发展

```bash
npm install
npm run build     # -> dist/face.js, styles injected at runtime
npm run demo      # -> http://localhost:8080/demo/
```

## 添加表达式

添加一行为 `EXPRESSIONS` 内 `src/expressions.js`。页眉注释文档 每个领域及其单位。 有两件事很难理解:

-   **一个浅 `lidT` 读作凹出,不是盖出.** 圆圈的和弦是 已经关闭了 6% 的宽度。 去~0.3或停留在0.
-   **以形相分出出出出分出出出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分出分.** `happy` 财务报告和审定财务报表 `joy` 开始于 同样的穹顶在两个大小 并读作一个情绪. `joy` 只是成为了它自己的东西 一次两个盖子都进来 使它成为一个月亮.

## 品牌资产

| 文件 |  |
| --- | --- |
| [`docs/logo.svg`](https://npmcn.com/package/%40bwnd/bbot/docs/logo.svg) | 标记——一条路,眼睛被打出 `evenodd`,填充为 `currentColor` |
| [`docs/logo.png`](https://npmcn.com/package/%40bwnd/bbot/docs/logo.png) | 1024×1024 平方图标, 用于外形 |
| [`docs/logotype.png`](https://npmcn.com/package/%40bwnd/bbot/docs/logotype.png) | 水平锁定, 标记 + 文字标记 |

SVG取出任何颜色,不需要背景阅读——但 `currentColor` 只在内嵌、不装入时解决 `<img>`。 。 。 .

## 贷项

视觉语言——近黑画布,发线边界进行分离 而不是阴影, 紧跟的类型, 完全圆形的药丸按钮—— 灵感 以 **X的设计系统**。 。 。 .

面相本身是原始执行. 球体投影,盖子 弹簧模型是从零开始为这个图书馆写的.

建于开阔地上 [体重](https://bwnd.app/) 孵化器.

## 捐款

见 [捐款额](https://npmcn.com/package/%40bwnd/bbot/CONTRIBUTING.md), (中文(简体) ), [施政](https://npmcn.com/package/%40bwnd/bbot/GOVERNANCE.md) 财务报告和审定财务报表 页:1 [行为守则](https://npmcn.com/package/%40bwnd/bbot/CODE_OF_CONDUCT.md)安全问题: [警卫](https://npmcn.com/package/%40bwnd/bbot/SECURITY.md)。 。 。 .

## 许可证

麻省理工学院.

## 常见问题

### @bwnd/bbot 是什么？

AI代理的一面:30个表情,人们一眼看就看,9个反应,唇语相声\. 代理面相协议的参考渲染器\. 无相依相\.

### 如何安装 @bwnd/bbot？

在项目目录运行 npm install @bwnd/bbot，或使用 pnpm add / yarn add / bun add。

### @bwnd/bbot 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/bwnd\_\_bbot 是否存在。

### @bwnd/bbot 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @bwnd/bbot 可以商用吗？

@bwnd/bbot 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @bwnd/bbot 的下载量有多少？

根据 npm 官方下载统计，@bwnd/bbot 在 2026/10/09 – 2026/11/07 这 30 天内被下载 1,910 次，日均约 64 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @bwnd/bbot 还在维护吗？

最新版本 0\.6\.1 发布于 2026/10/29（11 天前）；至今共发布 8 个版本，其中过去 12 个月发布了 8 个；首次发布于 2026/09/01。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。