鲍勃
AI特工的脸.
它显示一个经纪人在做什么 和它的感觉, 一种方式人们阅读 看着:思考、工作、担心、高兴。 它跟随你的光标 眨眼 和嘴唇同步 当代理说话。 30个情绪,9发一发 反应, 4.8 kB 击出,没有依赖关系.
尝试它活在bbot.bwnd.app
安装
npm i @bwnd/bbot
import { createFace } from '@bwnd/bbot'
const face = createFace(document.querySelector('#bot'), { expression: 'curious' })
face.react('bounce')
样式在运行时被注入, 因此没有 CSS 导入和没有 <link>。反应
这是一种可选的同伴依赖性——上面的一行没有牵出任何一条.
或者完全跳过安装
捆绑是包含样式的主机,所以这是一个整体整合:
<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 上镜像, 如果您宁可贴上标签, 而不是最新的音轨 :
import { createFace } from 'https://cdn.jsdelivr.net/gh/bwndapp/bbot@main/dist/face.js'
反应
import { Face } from '@bwnd/bbot/react'
<Face size={160} expression="curious" mouth pupils />
反应建筑是预编而成的 里面有船的样式 所以它和
Vite、Next、CRA或Parcel——没有转录JSX node_modules没有CSS
导入。 开车通过裁判:
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
表达式
face.setExpression('sleepy')
表达的每个领域都是弹簧目标 所以情绪会从
无论它们现在在哪里 而不是切割. EXPRESSION_NAMES 列举
他们运行的时间.
这个库里有一个形状:一个圆. 上面的情绪都会来
从两个头色的长方形 滑过每个眼睛并旋转 angry
财务报告和审定财务报表 sad 在相向旋转时是相同的盖.
反应
blink • 妇女 wink • 妇女 nod • 妇女 shake • 妇女 bounce • 妇女 pop • 妇女 boing • 妇女 spin • 妇女 jitter
face.react('nod')
反应层在任何情绪的上方 活跃和腐烂自己。 他们
因此,一次发射两枚是好的,并打算. REACTION_NAMES 列举
他们.
他们
四种自定义属性. 把他们放在脸上,或者放在上面的任何东西上 图书馆船除了暗模式默认之外,没有自己的颜色.
#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 是负载的。 盖子是被剪去的头色矩形
每只眼睛,所以如果它不匹配 坐在头后,每一个表达
接缝.
自定义属性集 在面部元素本身上 击败继承自 一个祖先。 如果一个主题不被接受,那通常是原因.
如何运作
头是球形
眼睛不会在平盘上滑倒. 每个功能都有休息地点
{\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个独立接头.
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的音响, 这是一半
听着.
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是用于 代理面额协议,一个
打开格式让一个AI代理来显示它在做什么以及它对此的感受:
状态( n)thinking, (中文(简体) ), working, (中文(简体) ), waiting, (中文(简体) ), error30种表达方式之一,
反应,或用唇音说话. 每个表达都有普通语言
光泽,所以同样的信号与面部,标题或屏幕阅读器文本一样有效.
{ "type": "face.state", "state": "working", "label": "Searching your files" }
桌面部件在 widget/ 把这个放在桌面上: 聊天
通过OpenRouter, 11Labs的声音,和一张脸
进行谈话.
机器可读文件在图书馆旁边服务,所以代理可以解决 如何在循环中没有人类使用它:
地方发展
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 | 标记——一条路,眼睛被打出 evenodd,填充为 currentColor |
docs/logo.png | 1024×1024 平方图标, 用于外形 |
docs/logotype.png | 水平锁定, 标记 + 文字标记 |
SVG取出任何颜色,不需要背景阅读——但 currentColor
只在内嵌、不装入时解决 <img>。 。 。 .
贷项
视觉语言——近黑画布,发线边界进行分离 而不是阴影, 紧跟的类型, 完全圆形的药丸按钮—— 灵感 以 X的设计系统。 。 。 .
面相本身是原始执行. 球体投影,盖子 弹簧模型是从零开始为这个图书馆写的.
建于开阔地上 体重 孵化器.
捐款
见 捐款额, (中文(简体) ), 施政 财务报告和审定财务报表 页:1 行为守则安全问题: 警卫。 。 。 .
许可证
麻省理工学院.