agent-robot-avatar 0.5.2 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +56 -7
- package/README.md +93 -16
- package/agent-robot-avatar-lite.js +44 -0
- package/agent-robot-avatar.js +2 -2
- package/index.d.ts +94 -17
- package/lite.d.ts +5 -0
- package/package.json +12 -5
- package/src/agent-robot-avatar-actions.js +17 -14
- package/src/agent-robot-avatar-core.js +5 -2
- package/src/agent-robot-avatar-gestures.js +9 -0
- package/src/agent-robot-avatar-runtime.js +58 -12
- package/src/agent-robot-avatar-skin-patterns.js +234 -0
- package/src/agent-robot-avatar-skins.js +256 -0
- package/src/agent-robot-avatar-version.js +1 -1
- package/src/agent-robot-avatar-waiting.js +30 -6
- package/src/skins/catalog.js +218 -0
- package/src/skins/collection-materials.js +118 -0
- package/src/skins/eyelids.js +32 -0
- package/src/skins/glaze-variants.js +29 -0
- package/src/skins/layered-texture.js +162 -0
- package/src/skins/material-data.js +111 -0
- package/src/skins/material-library.js +302 -0
- package/src/skins/metal-tint.js +11 -0
- package/src/skins/more-materials.js +69 -0
- package/src/skins/native.js +754 -0
- package/src/skins/paints.js +3 -0
- package/src/skins/revised-materials.js +44 -0
- package/src/skins/second-pass-materials.js +71 -0
- package/src/skins/soft-materials.js +111 -0
- package/src/skins/sports-materials.js +38 -0
- package/src/skins/wood-materials.js +68 -0
- package/assets/support/alipay.png +0 -0
- package/assets/support/wechat-pay.png +0 -0
- package/docs/README.de.md +0 -186
- package/docs/README.es.md +0 -186
- package/docs/README.fr.md +0 -186
- package/docs/README.ja.md +0 -186
- package/docs/README.ko.md +0 -186
- package/docs/README.pt.md +0 -186
- package/docs/README.ru.md +0 -186
- package/docs/README.zh-CN.md +0 -190
- package/docs/README.zh-TW.md +0 -186
- package/src/agent-robot-avatar-antenna-flash.js +0 -127
package/docs/README.ru.md
DELETED
|
@@ -1,186 +0,0 @@
|
|
|
1
|
-
# Agent Robot Avatar
|
|
2
|
-
|
|
3
|
-
<p align="center">
|
|
4
|
-
<img src="../assets/readme/agent-robot-avatar-header.jpg" alt="Agent Robot Avatar">
|
|
5
|
-
</p>
|
|
6
|
-
|
|
7
|
-
[English](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/README.md) | [简体中文](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.zh-CN.md) | [Español](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.es.md) | [Русский](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.ru.md) | [Français](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.fr.md) | [Português](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.pt.md) | [Deutsch](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.de.md) | [日本語](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.ja.md) | [한국어](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.ko.md) | [繁體中文](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.zh-TW.md)
|
|
8
|
-
|
|
9
|
-
 [](../LICENSE) [](https://github.com/CX-ArtLab/agent-robot-avatar/actions/workflows/validate.yml) [](https://ko-fi.com/P0E625WIOI)
|
|
10
|
-
|
|
11
|
-
   
|
|
12
|
-
|
|
13
|
-
Лёгкий и выразительный Web Component с роботом-аватаром для AI-агентов и интерактивных приложений.
|
|
14
|
-
|
|
15
|
-
Его можно использовать в AI-ассистентах, интерфейсах агентов, настольных компаньонах, виртуальных питомцах, цифровых маскотах, аватарах чат-ботов и других интерактивных персонажах.
|
|
16
|
-
|
|
17
|
-
Подходит для интерфейсов AI-ассистентов и агентов, включая продукты и сценарии, похожие на ChatGPT, Claude, Codex, Cursor, Grok Bot, Gemini CLI и OpenCode.
|
|
18
|
-
|
|
19
|
-
Компонент построен на SVG и vanilla JavaScript, работает как нативный Custom Element и не имеет runtime-зависимостей.
|
|
20
|
-
|
|
21
|
-
Agent Robot Avatar также можно использовать как слой визуальной обратной связи для интерфейсов агентов в стиле AG-UI.
|
|
22
|
-
|
|
23
|
-
<p align="center">
|
|
24
|
-
<img src="../assets/demo/agent-robot-avatar-demo.gif" alt="Интерактивная анимационная демонстрация Agent Robot Avatar" width="560">
|
|
25
|
-
</p>
|
|
26
|
-
|
|
27
|
-
## Демонстрация в реальном времени
|
|
28
|
-
|
|
29
|
-
[Открыть интерактивную демонстрацию](https://cx-artlab.github.io/agent-robot-avatar/?lang=ru)
|
|
30
|
-
|
|
31
|
-
## Основные возможности
|
|
32
|
-
|
|
33
|
-
- Нативный Web Component
|
|
34
|
-
- SVG-рендеринг + vanilla JavaScript
|
|
35
|
-
- Ноль runtime-зависимостей
|
|
36
|
-
- Автоматическое моргание и лёгкое idle-поведение
|
|
37
|
-
- Следование глазами за указателем и инерционное движение головы
|
|
38
|
-
- Локальная jelly-деформация при перетаскивании с упругим возвратом
|
|
39
|
-
- Сжатие при удержании и перетаскиваемая пружинящая антенна
|
|
40
|
-
- Программное управление состояниями и выражениями Agent
|
|
41
|
-
- Обратная связь для waiting, success, failure, warning, review, blocked и system error
|
|
42
|
-
- Поддержка reduced motion
|
|
43
|
-
- Настраиваемое поведение сна
|
|
44
|
-
- Регулируемое скругление головы
|
|
45
|
-
- Опциональное мигание антенны для статуса
|
|
46
|
-
- TypeScript-декларации включены
|
|
47
|
-
|
|
48
|
-
## Установка
|
|
49
|
-
|
|
50
|
-
```bash
|
|
51
|
-
npm install agent-robot-avatar
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
```js
|
|
55
|
-
import 'agent-robot-avatar';
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
Также можно напрямую загрузить исходный код из репозитория:
|
|
59
|
-
|
|
60
|
-
```html
|
|
61
|
-
<script type="module" src="./agent-robot-avatar.js"></script>
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
Затем добавьте компонент:
|
|
65
|
-
|
|
66
|
-
```html
|
|
67
|
-
<agent-robot-avatar id="avatar"></agent-robot-avatar>
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
Инициализация не требуется. Аватар автоматически переходит в стандартное состояние idle.
|
|
71
|
-
|
|
72
|
-
## Базовое использование
|
|
73
|
-
|
|
74
|
-
```js
|
|
75
|
-
const avatar = document.querySelector('#avatar');
|
|
76
|
-
|
|
77
|
-
avatar.play('success');
|
|
78
|
-
avatar.play('warning');
|
|
79
|
-
avatar.play('error');
|
|
80
|
-
|
|
81
|
-
avatar.reset();
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
Доступные действия:
|
|
85
|
-
|
|
86
|
-
`idle` · `bored` · `waiting` · `waiting-wrap` · `input` · `send` · `success` · `failure` · `warning` · `inspect` · `blocked` · `error` · `surprise` · `love` · `random` · `sleep` · `wake`
|
|
87
|
-
|
|
88
|
-
`failure` означает, что задача завершилась неуспешно; `error` предназначен для ошибок соединения, сервиса или системы.
|
|
89
|
-
|
|
90
|
-
`love` выражает симпатию или благодарность: два глаза наклоняются друг к другу и образуют одно сердце, трижды бьются и возвращаются в исходное состояние.
|
|
91
|
-
|
|
92
|
-
`random` проигрывает вращение игрового автомата: каждый глаз катится по барабану, затем левый глаз замедляется, подпрыгивает и останавливается, следом правый. `slot` — псевдоним.
|
|
93
|
-
|
|
94
|
-
Типичный жизненный цикл запроса Agent:
|
|
95
|
-
|
|
96
|
-
```js
|
|
97
|
-
avatar.startWaiting();
|
|
98
|
-
|
|
99
|
-
// Второй вариант ожидания: глаза уходят с одной стороны и возвращаются с другой.
|
|
100
|
-
avatar.startWaiting({ variant: 'wrap' });
|
|
101
|
-
|
|
102
|
-
try {
|
|
103
|
-
const result = await runAgentRequest();
|
|
104
|
-
await avatar.play(result.ok ? 'success' : 'failure');
|
|
105
|
-
} catch (error) {
|
|
106
|
-
await avatar.play('error');
|
|
107
|
-
}
|
|
108
|
-
```
|
|
109
|
-
|
|
110
|
-
## Часто используемые параметры
|
|
111
|
-
|
|
112
|
-
```html
|
|
113
|
-
<agent-robot-avatar
|
|
114
|
-
size="160"
|
|
115
|
-
color="#08090b"
|
|
116
|
-
auto-sleep="30000"
|
|
117
|
-
wake-on="activity"
|
|
118
|
-
motion="auto">
|
|
119
|
-
</agent-robot-avatar>
|
|
120
|
-
```
|
|
121
|
-
|
|
122
|
-
| Атрибут | Назначение |
|
|
123
|
-
| --- | --- |
|
|
124
|
-
| `size` | Размер аватара в пикселях |
|
|
125
|
-
| `color` | Основной цвет аватара |
|
|
126
|
-
| `auto-sleep` | Время бездействия до автоматического сна; `0` отключает его |
|
|
127
|
-
| `wake-on` | Политика автоматического пробуждения: `activity`, `interaction` или `manual` |
|
|
128
|
-
| `motion` | Политика движения: `auto`, `reduce` или `full` |
|
|
129
|
-
| `press-squeeze` | Удержание центра для сжатия; `false` отключает жест |
|
|
130
|
-
| `antenna-drag` | Перетаскивание и пружинящий возврат антенны с сердитой реакцией; `false` отключает жест |
|
|
131
|
-
|
|
132
|
-
Часто используемые runtime-настройки:
|
|
133
|
-
|
|
134
|
-
```js
|
|
135
|
-
avatar.setPointerFollow(false);
|
|
136
|
-
avatar.setHeadRoundness(75);
|
|
137
|
-
avatar.setAntennaFlash(true);
|
|
138
|
-
avatar.setPressSqueeze(true);
|
|
139
|
-
avatar.setAntennaDrag(true);
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
Удержание центра запускает сжатие. После перемещения более чем на 4 CSS-пикселя тот же жест переходит в существующее перетаскивание головы. Для антенны действует тот же предел расстояния, а после возврата запускается существующая сердитая реакция.
|
|
143
|
-
|
|
144
|
-
## События и интеграция
|
|
145
|
-
|
|
146
|
-
Компонент отправляет `face-state` при изменениях визуального состояния и `action-state` при семантических изменениях жизненного цикла действий.
|
|
147
|
-
|
|
148
|
-
Для интеграции с host-приложением и доступного статусного текста предпочтительнее `action-state`. Рабочий пример жизненного цикла запроса находится в [`examples/accessibility.html`](../examples/accessibility.html).
|
|
149
|
-
|
|
150
|
-
Минимальный пример интеграции доступен в [`examples/basic.html`](../examples/basic.html).
|
|
151
|
-
|
|
152
|
-
## Совместимость
|
|
153
|
-
|
|
154
|
-
Рассчитан на современные браузеры с поддержкой ES Modules, Custom Elements, SVG, Pointer Events, Web Animations API, `IntersectionObserver`, `ResizeObserver` и `matchMedia`.
|
|
155
|
-
|
|
156
|
-
Автоматизированные тесты покрывают Chromium, Firefox и WebKit.
|
|
157
|
-
|
|
158
|
-
## Участие в разработке
|
|
159
|
-
|
|
160
|
-
Issues и Pull Requests приветствуются. Перед отправкой изменений прочитайте [`CONTRIBUTING.md`](../CONTRIBUTING.md).
|
|
161
|
-
|
|
162
|
-
## Статус проекта
|
|
163
|
-
|
|
164
|
-
**Текущая публичная версия: v0.5.2**
|
|
165
|
-
|
|
166
|
-
Публичный API намеренно остаётся компактным, пока проект развивается к будущему обязательству стабильности `1.0.0`.
|
|
167
|
-
|
|
168
|
-
Agent Robot Avatar разрабатывается независимо и не аффилирован, не одобрен и не представляет какую-либо AI-платформу или бренд.
|
|
169
|
-
|
|
170
|
-
## Дизайн персонажа и визуальная идентичность
|
|
171
|
-
|
|
172
|
-
Персонаж Agent Robot Avatar, включая внешний вид робота и визуальную идентичность, является оригинальной разработкой CX ArtLab.
|
|
173
|
-
|
|
174
|
-
MIT License применяется к программному обеспечению и исходному коду. Она разрешает использовать, изменять и распространять аватар как часть приложений, но не передаёт права собственности на название Agent Robot Avatar, идентичность персонажа или визуальную идентичность и не даёт права представлять их как оригинального персонажа или самостоятельный бренд другой стороны.
|
|
175
|
-
|
|
176
|
-
Названия сторонних продуктов, упомянутые в проекте, используются только для описания возможных сценариев применения и не означают аффилированность или одобрение.
|
|
177
|
-
|
|
178
|
-
## Лицензия
|
|
179
|
-
|
|
180
|
-
MIT License. См. [`LICENSE`](../LICENSE).
|
|
181
|
-
|
|
182
|
-
---
|
|
183
|
-
|
|
184
|
-
Если этот проект оказался полезен, вы можете угостить меня кофе.
|
|
185
|
-
|
|
186
|
-
<a href='https://ko-fi.com/P0E625WIOI' target='_blank'><img height='36' style='border:0px;height:36px;' src='https://storage.ko-fi.com/cdn/kofi6.png?v=6' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>
|
package/docs/README.zh-CN.md
DELETED
|
@@ -1,190 +0,0 @@
|
|
|
1
|
-
# Agent Robot Avatar
|
|
2
|
-
|
|
3
|
-
<p align="center">
|
|
4
|
-
<img src="../assets/readme/agent-robot-avatar-header.jpg" alt="Agent Robot Avatar">
|
|
5
|
-
</p>
|
|
6
|
-
|
|
7
|
-
[English](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/README.md) | [简体中文](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.zh-CN.md) | [Español](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.es.md) | [Русский](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.ru.md) | [Français](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.fr.md) | [Português](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.pt.md) | [Deutsch](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.de.md) | [日本語](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.ja.md) | [한국어](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.ko.md) | [繁體中文](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.zh-TW.md)
|
|
8
|
-
|
|
9
|
-
 [](../LICENSE) [](https://github.com/CX-ArtLab/agent-robot-avatar/actions/workflows/validate.yml) [](https://ko-fi.com/P0E625WIOI)
|
|
10
|
-
|
|
11
|
-
   
|
|
12
|
-
|
|
13
|
-
一个轻量、富表现力的机器人头像 Web Component,适用于 AI Agent 与交互式应用。
|
|
14
|
-
|
|
15
|
-
可用于 AI 助手、Agent 界面、桌面伙伴、虚拟宠物、数字吉祥物、聊天机器人头像及其他交互角色体验。
|
|
16
|
-
|
|
17
|
-
可用于 AI 助手、Agent 界面,包括类似 ChatGPT、Claude、Codex、Cursor、Grok Bot、Gemini CLI 和 OpenCode 的产品与体验。
|
|
18
|
-
|
|
19
|
-
使用 SVG 与原生 JavaScript 构建,以原生 Custom Element 运行,运行时零依赖。
|
|
20
|
-
|
|
21
|
-
Agent Robot Avatar 还可作为 AG-UI 风格 Agent 界面的视觉反馈层。
|
|
22
|
-
|
|
23
|
-
<p align="center">
|
|
24
|
-
<img src="../assets/demo/agent-robot-avatar-demo.gif" alt="Agent Robot Avatar 交互动画演示" width="560">
|
|
25
|
-
</p>
|
|
26
|
-
|
|
27
|
-
## 在线 Demo
|
|
28
|
-
|
|
29
|
-
[打开交互 Demo](https://cx-artlab.github.io/agent-robot-avatar/?lang=zh-CN)
|
|
30
|
-
|
|
31
|
-
## 特点
|
|
32
|
-
|
|
33
|
-
- 原生 Web Component
|
|
34
|
-
- SVG 渲染 + 原生 JavaScript
|
|
35
|
-
- 运行时零依赖
|
|
36
|
-
- 自动眨眼与轻微待机动作
|
|
37
|
-
- 眼睛跟随指针与头部惯性运动
|
|
38
|
-
- 果冻式局部拖拽形变与弹性恢复
|
|
39
|
-
- 按住挤压与可拖动的弹簧天线交互
|
|
40
|
-
- 可通过程序控制 Agent 状态与表情
|
|
41
|
-
- 支持 waiting、success、failure、warning、review、blocked、system error 等反馈
|
|
42
|
-
- 支持减少动态效果
|
|
43
|
-
- 可配置自动睡眠行为
|
|
44
|
-
- 可调头部圆角
|
|
45
|
-
- 可选天线状态闪烁
|
|
46
|
-
- 内置 TypeScript 类型声明
|
|
47
|
-
|
|
48
|
-
## 安装
|
|
49
|
-
|
|
50
|
-
```bash
|
|
51
|
-
npm install agent-robot-avatar
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
```js
|
|
55
|
-
import 'agent-robot-avatar';
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
也可以直接加载仓库源码:
|
|
59
|
-
|
|
60
|
-
```html
|
|
61
|
-
<script type="module" src="./agent-robot-avatar.js"></script>
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
然后添加组件:
|
|
65
|
-
|
|
66
|
-
```html
|
|
67
|
-
<agent-robot-avatar id="avatar"></agent-robot-avatar>
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
无需初始化代码,头像会自动进入默认待机状态。
|
|
71
|
-
|
|
72
|
-
## 基础用法
|
|
73
|
-
|
|
74
|
-
```js
|
|
75
|
-
const avatar = document.querySelector('#avatar');
|
|
76
|
-
|
|
77
|
-
avatar.play('success');
|
|
78
|
-
avatar.play('warning');
|
|
79
|
-
avatar.play('error');
|
|
80
|
-
|
|
81
|
-
avatar.reset();
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
可用动作:
|
|
85
|
-
|
|
86
|
-
`idle` · `bored` · `waiting` · `waiting-wrap` · `input` · `send` · `success` · `failure` · `warning` · `inspect` · `blocked` · `error` · `surprise` · `love` · `random` · `sleep` · `wake`
|
|
87
|
-
|
|
88
|
-
`failure` 用于表示任务执行完成但结果失败;`error` 用于连接、服务或系统错误。
|
|
89
|
-
|
|
90
|
-
`love` 用于表达喜欢或感谢:两只眼睛向中间靠拢合成一颗爱心,跳动三下后恢复。
|
|
91
|
-
|
|
92
|
-
`random` 播放老虎机式的转动:两只眼睛各自在滚筒上滚动,随后左眼减速、弹跳着停下,右眼稍后停下。`slot` 是它的别名。
|
|
93
|
-
|
|
94
|
-
一个典型的 Agent 请求流程:
|
|
95
|
-
|
|
96
|
-
```js
|
|
97
|
-
avatar.startWaiting();
|
|
98
|
-
|
|
99
|
-
// 第二种等待:眼睛从一侧转出,再从另一侧转入。
|
|
100
|
-
avatar.startWaiting({ variant: 'wrap' });
|
|
101
|
-
|
|
102
|
-
try {
|
|
103
|
-
const result = await runAgentRequest();
|
|
104
|
-
await avatar.play(result.ok ? 'success' : 'failure');
|
|
105
|
-
} catch (error) {
|
|
106
|
-
await avatar.play('error');
|
|
107
|
-
}
|
|
108
|
-
```
|
|
109
|
-
|
|
110
|
-
## 常用选项
|
|
111
|
-
|
|
112
|
-
```html
|
|
113
|
-
<agent-robot-avatar
|
|
114
|
-
size="160"
|
|
115
|
-
color="#08090b"
|
|
116
|
-
auto-sleep="30000"
|
|
117
|
-
wake-on="activity"
|
|
118
|
-
motion="auto">
|
|
119
|
-
</agent-robot-avatar>
|
|
120
|
-
```
|
|
121
|
-
|
|
122
|
-
| 属性 | 用途 |
|
|
123
|
-
| --- | --- |
|
|
124
|
-
| `size` | 头像像素尺寸 |
|
|
125
|
-
| `color` | 头像主色 |
|
|
126
|
-
| `auto-sleep` | 自动睡眠前的空闲时间;`0` 为关闭 |
|
|
127
|
-
| `wake-on` | 自动唤醒策略:`activity`、`interaction` 或 `manual` |
|
|
128
|
-
| `motion` | 动态效果策略:`auto`、`reduce` 或 `full` |
|
|
129
|
-
| `press-squeeze` | 按住头像中心进行挤压;设为 `false` 可关闭 |
|
|
130
|
-
| `antenna-drag` | 拖动天线、弹簧复原并接愤怒表情;设为 `false` 可关闭 |
|
|
131
|
-
|
|
132
|
-
常用运行时控制:
|
|
133
|
-
|
|
134
|
-
```js
|
|
135
|
-
avatar.setPointerFollow(false);
|
|
136
|
-
avatar.setHeadRoundness(75);
|
|
137
|
-
avatar.setAntennaFlash(true);
|
|
138
|
-
avatar.setPressSqueeze(true);
|
|
139
|
-
avatar.setAntennaDrag(true);
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
按住头像中心会开始挤压;移动超过 4 个 CSS 像素后,同一次指针操作会切换为原有的头部拖动。拖动天线沿用头部拖动的距离限制,复原后接原有的愤怒反应。
|
|
143
|
-
|
|
144
|
-
## 事件与集成
|
|
145
|
-
|
|
146
|
-
组件通过 `face-state` 报告视觉状态变化,通过 `action-state` 报告语义动作生命周期变化。
|
|
147
|
-
|
|
148
|
-
宿主应用集成和无障碍状态播报优先使用 `action-state`。可查看 [`examples/accessibility.html`](../examples/accessibility.html) 中的请求生命周期示例。
|
|
149
|
-
|
|
150
|
-
最小集成示例位于 [`examples/basic.html`](../examples/basic.html)。
|
|
151
|
-
|
|
152
|
-
## 兼容性
|
|
153
|
-
|
|
154
|
-
面向支持 ES Modules、Custom Elements、SVG、Pointer Events、Web Animations API、`IntersectionObserver`、`ResizeObserver` 和 `matchMedia` 的现代浏览器。
|
|
155
|
-
|
|
156
|
-
自动浏览器测试覆盖 Chromium、Firefox 和 WebKit。
|
|
157
|
-
|
|
158
|
-
## 参与贡献
|
|
159
|
-
|
|
160
|
-
欢迎提交 Issue 和 Pull Request。提交修改前请阅读 [`CONTRIBUTING.md`](../CONTRIBUTING.md)。
|
|
161
|
-
|
|
162
|
-
## 项目状态
|
|
163
|
-
|
|
164
|
-
**当前公开版本:v0.5.2**
|
|
165
|
-
|
|
166
|
-
公开 API 会在未来 `1.0.0` 稳定性承诺前继续保持精简并谨慎演进。
|
|
167
|
-
|
|
168
|
-
Agent Robot Avatar 为独立开发的开源项目,不隶属于、代表或获得任何 AI 平台或品牌的官方背书。
|
|
169
|
-
|
|
170
|
-
## 角色设计与视觉标识
|
|
171
|
-
|
|
172
|
-
Agent Robot Avatar 角色,包括机器人外观与视觉标识,均为 CX ArtLab 的原创设计。
|
|
173
|
-
|
|
174
|
-
MIT License 适用于软件和源代码,允许在应用中使用、修改和分发该头像,但不会转移 Agent Robot Avatar 名称、角色身份或视觉标识的所有权,也不授予将其作为其他方原创角色或独立品牌进行展示的权利。
|
|
175
|
-
|
|
176
|
-
本项目提及的第三方产品名称仅用于说明可能的使用场景,不代表任何关联或官方认可。
|
|
177
|
-
|
|
178
|
-
## 许可证
|
|
179
|
-
|
|
180
|
-
MIT License。详见 [`LICENSE`](../LICENSE)。
|
|
181
|
-
|
|
182
|
-
---
|
|
183
|
-
|
|
184
|
-
## 请我喝杯咖啡
|
|
185
|
-
|
|
186
|
-
如果这个项目对你有帮助,也可以请我喝杯咖啡:
|
|
187
|
-
|
|
188
|
-
| Ko-fi | 支付宝 | 微信支付 |
|
|
189
|
-
| --- | --- | --- |
|
|
190
|
-
| <a href='https://ko-fi.com/P0E625WIOI' target='_blank'><img height='36' style='border:0px;height:36px;' src='https://storage.ko-fi.com/cdn/kofi6.png?v=6' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a> | <img src="../assets/support/alipay.png" alt="支付宝收款码" width="160"> | <img src="../assets/support/wechat-pay.png" alt="微信支付收款码" width="160"> |
|
package/docs/README.zh-TW.md
DELETED
|
@@ -1,186 +0,0 @@
|
|
|
1
|
-
# Agent Robot Avatar
|
|
2
|
-
|
|
3
|
-
<p align="center">
|
|
4
|
-
<img src="../assets/readme/agent-robot-avatar-header.jpg" alt="Agent Robot Avatar">
|
|
5
|
-
</p>
|
|
6
|
-
|
|
7
|
-
[English](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/README.md) | [简体中文](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.zh-CN.md) | [Español](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.es.md) | [Русский](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.ru.md) | [Français](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.fr.md) | [Português](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.pt.md) | [Deutsch](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.de.md) | [日本語](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.ja.md) | [한국어](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.ko.md) | [繁體中文](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.zh-TW.md)
|
|
8
|
-
|
|
9
|
-
 [](../LICENSE) [](https://github.com/CX-ArtLab/agent-robot-avatar/actions/workflows/validate.yml) [](https://ko-fi.com/P0E625WIOI)
|
|
10
|
-
|
|
11
|
-
   
|
|
12
|
-
|
|
13
|
-
一個輕量、富有表現力的機器人頭像 Web Component,適用於 AI Agent 與互動式應用。
|
|
14
|
-
|
|
15
|
-
可用於 AI 助理、Agent 介面、桌面夥伴、虛擬寵物、數位吉祥物、聊天機器人頭像,以及其他互動角色體驗。
|
|
16
|
-
|
|
17
|
-
適用於 AI 助理與 Agent 介面,包括類似 ChatGPT、Claude、Codex、Cursor、Grok Bot、Gemini CLI 與 OpenCode 的產品與體驗。
|
|
18
|
-
|
|
19
|
-
使用 SVG 與原生 JavaScript 建構,以原生 Custom Element 運作,執行階段零依賴。
|
|
20
|
-
|
|
21
|
-
Agent Robot Avatar 也可作為 AG-UI 風格 Agent 介面的視覺回饋層。
|
|
22
|
-
|
|
23
|
-
<p align="center">
|
|
24
|
-
<img src="../assets/demo/agent-robot-avatar-demo.gif" alt="Agent Robot Avatar 互動動畫示範" width="560">
|
|
25
|
-
</p>
|
|
26
|
-
|
|
27
|
-
## 線上 Demo
|
|
28
|
-
|
|
29
|
-
[開啟互動 Demo](https://cx-artlab.github.io/agent-robot-avatar/?lang=zh-TW)
|
|
30
|
-
|
|
31
|
-
## 特點
|
|
32
|
-
|
|
33
|
-
- 原生 Web Component
|
|
34
|
-
- SVG 渲染 + 原生 JavaScript
|
|
35
|
-
- 執行階段零依賴
|
|
36
|
-
- 自動眨眼與輕微待機動作
|
|
37
|
-
- 眼睛跟隨指標與頭部慣性移動
|
|
38
|
-
- 果凍式局部拖曳形變與彈性復原
|
|
39
|
-
- 按住擠壓與可拖曳的彈簧天線互動
|
|
40
|
-
- 可透過程式控制 Agent 狀態與表情
|
|
41
|
-
- 支援 waiting、success、failure、warning、review、blocked、system error 等回饋
|
|
42
|
-
- 支援減少動態效果
|
|
43
|
-
- 可設定自動睡眠行為
|
|
44
|
-
- 可調整頭部圓角
|
|
45
|
-
- 可選天線狀態閃爍
|
|
46
|
-
- 內含 TypeScript 型別宣告
|
|
47
|
-
|
|
48
|
-
## 安裝
|
|
49
|
-
|
|
50
|
-
```bash
|
|
51
|
-
npm install agent-robot-avatar
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
```js
|
|
55
|
-
import 'agent-robot-avatar';
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
也可以直接載入儲存庫原始碼:
|
|
59
|
-
|
|
60
|
-
```html
|
|
61
|
-
<script type="module" src="./agent-robot-avatar.js"></script>
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
接著加入元件:
|
|
65
|
-
|
|
66
|
-
```html
|
|
67
|
-
<agent-robot-avatar id="avatar"></agent-robot-avatar>
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
不需要初始化程式碼,頭像會自動進入預設待機狀態。
|
|
71
|
-
|
|
72
|
-
## 基本用法
|
|
73
|
-
|
|
74
|
-
```js
|
|
75
|
-
const avatar = document.querySelector('#avatar');
|
|
76
|
-
|
|
77
|
-
avatar.play('success');
|
|
78
|
-
avatar.play('warning');
|
|
79
|
-
avatar.play('error');
|
|
80
|
-
|
|
81
|
-
avatar.reset();
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
可用動作:
|
|
85
|
-
|
|
86
|
-
`idle` · `bored` · `waiting` · `waiting-wrap` · `input` · `send` · `success` · `failure` · `warning` · `inspect` · `blocked` · `error` · `surprise` · `love` · `random` · `sleep` · `wake`
|
|
87
|
-
|
|
88
|
-
`failure` 用於表示任務執行完成但結果失敗;`error` 用於連線、服務或系統錯誤。
|
|
89
|
-
|
|
90
|
-
`love` 用於表達喜歡或感謝:兩隻眼睛向中間靠攏合成一顆愛心,跳動三下後恢復。
|
|
91
|
-
|
|
92
|
-
`random` 播放老虎機式的轉動:兩隻眼睛各自在滾筒上滾動,隨後左眼減速、彈跳著停下,右眼稍後停下。`slot` 是它的別名。
|
|
93
|
-
|
|
94
|
-
典型的 Agent 請求流程:
|
|
95
|
-
|
|
96
|
-
```js
|
|
97
|
-
avatar.startWaiting();
|
|
98
|
-
|
|
99
|
-
// 第二種等待:眼睛從一側轉出,再從另一側轉入。
|
|
100
|
-
avatar.startWaiting({ variant: 'wrap' });
|
|
101
|
-
|
|
102
|
-
try {
|
|
103
|
-
const result = await runAgentRequest();
|
|
104
|
-
await avatar.play(result.ok ? 'success' : 'failure');
|
|
105
|
-
} catch (error) {
|
|
106
|
-
await avatar.play('error');
|
|
107
|
-
}
|
|
108
|
-
```
|
|
109
|
-
|
|
110
|
-
## 常用選項
|
|
111
|
-
|
|
112
|
-
```html
|
|
113
|
-
<agent-robot-avatar
|
|
114
|
-
size="160"
|
|
115
|
-
color="#08090b"
|
|
116
|
-
auto-sleep="30000"
|
|
117
|
-
wake-on="activity"
|
|
118
|
-
motion="auto">
|
|
119
|
-
</agent-robot-avatar>
|
|
120
|
-
```
|
|
121
|
-
|
|
122
|
-
| 屬性 | 用途 |
|
|
123
|
-
| --- | --- |
|
|
124
|
-
| `size` | 頭像像素尺寸 |
|
|
125
|
-
| `color` | 頭像主色 |
|
|
126
|
-
| `auto-sleep` | 自動睡眠前的閒置時間;`0` 為關閉 |
|
|
127
|
-
| `wake-on` | 自動喚醒策略:`activity`、`interaction` 或 `manual` |
|
|
128
|
-
| `motion` | 動態效果策略:`auto`、`reduce` 或 `full` |
|
|
129
|
-
| `press-squeeze` | 按住頭像中心進行擠壓;設為 `false` 可關閉 |
|
|
130
|
-
| `antenna-drag` | 拖曳天線、彈簧復原並接憤怒表情;設為 `false` 可關閉 |
|
|
131
|
-
|
|
132
|
-
常用執行階段控制:
|
|
133
|
-
|
|
134
|
-
```js
|
|
135
|
-
avatar.setPointerFollow(false);
|
|
136
|
-
avatar.setHeadRoundness(75);
|
|
137
|
-
avatar.setAntennaFlash(true);
|
|
138
|
-
avatar.setPressSqueeze(true);
|
|
139
|
-
avatar.setAntennaDrag(true);
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
按住頭像中心會開始擠壓;移動超過 4 個 CSS 像素後,同一次指標操作會切換為原有的頭部拖曳。拖曳天線沿用頭部拖曳的距離限制,復原後接原有的憤怒反應。
|
|
143
|
-
|
|
144
|
-
## 事件與整合
|
|
145
|
-
|
|
146
|
-
元件透過 `face-state` 回報視覺狀態變化,透過 `action-state` 回報語意動作生命週期變化。
|
|
147
|
-
|
|
148
|
-
宿主應用整合與無障礙狀態播報建議優先使用 `action-state`。可查看 [`examples/accessibility.html`](../examples/accessibility.html) 中的請求生命週期範例。
|
|
149
|
-
|
|
150
|
-
最小整合範例位於 [`examples/basic.html`](../examples/basic.html)。
|
|
151
|
-
|
|
152
|
-
## 相容性
|
|
153
|
-
|
|
154
|
-
面向支援 ES Modules、Custom Elements、SVG、Pointer Events、Web Animations API、`IntersectionObserver`、`ResizeObserver` 和 `matchMedia` 的現代瀏覽器。
|
|
155
|
-
|
|
156
|
-
自動瀏覽器測試涵蓋 Chromium、Firefox 和 WebKit。
|
|
157
|
-
|
|
158
|
-
## 參與貢獻
|
|
159
|
-
|
|
160
|
-
歡迎提交 Issue 和 Pull Request。提交修改前請閱讀 [`CONTRIBUTING.md`](../CONTRIBUTING.md)。
|
|
161
|
-
|
|
162
|
-
## 專案狀態
|
|
163
|
-
|
|
164
|
-
**目前公開版本:v0.5.2**
|
|
165
|
-
|
|
166
|
-
公開 API 會在未來 `1.0.0` 穩定性承諾前繼續保持精簡並謹慎演進。
|
|
167
|
-
|
|
168
|
-
Agent Robot Avatar 為獨立開發的開源專案,不隸屬、代表或獲得任何 AI 平台或品牌的官方背書。
|
|
169
|
-
|
|
170
|
-
## 角色設計與視覺識別
|
|
171
|
-
|
|
172
|
-
Agent Robot Avatar 角色,包括機器人外觀與視覺識別,均為 CX ArtLab 的原創設計。
|
|
173
|
-
|
|
174
|
-
MIT License 適用於軟體和原始碼,允許在應用中使用、修改和散布該頭像,但不會轉移 Agent Robot Avatar 名稱、角色身分或視覺識別的所有權,也不授予將其作為其他方原創角色或獨立品牌展示的權利。
|
|
175
|
-
|
|
176
|
-
本專案提及的第三方產品名稱僅用於說明可能的使用情境,不代表任何關聯或官方認可。
|
|
177
|
-
|
|
178
|
-
## 授權條款
|
|
179
|
-
|
|
180
|
-
MIT License。詳見 [`LICENSE`](../LICENSE)。
|
|
181
|
-
|
|
182
|
-
---
|
|
183
|
-
|
|
184
|
-
## 請我喝杯咖啡
|
|
185
|
-
|
|
186
|
-
<a href='https://ko-fi.com/P0E625WIOI' target='_blank'><img height='36' style='border:0px;height:36px;' src='https://storage.ko-fi.com/cdn/kofi6.png?v=6' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>
|