agent-robot-avatar 0.2.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 +60 -0
- package/LICENSE +21 -0
- package/README.md +286 -0
- package/agent-robot-avatar.js +16 -0
- package/assets/support/alipay.png +0 -0
- package/assets/support/wechat-pay.png +0 -0
- package/docs/README.de.md +152 -0
- package/docs/README.es.md +217 -0
- package/docs/README.fr.md +215 -0
- package/docs/README.ja.md +217 -0
- package/docs/README.ko.md +217 -0
- package/docs/README.pt.md +217 -0
- package/docs/README.zh-CN.md +286 -0
- package/docs/README.zh-TW.md +219 -0
- package/index.d.ts +78 -0
- package/package.json +76 -0
- package/src/agent-robot-avatar-actions.js +394 -0
- package/src/agent-robot-avatar-antenna-flash.js +127 -0
- package/src/agent-robot-avatar-antenna.js +173 -0
- package/src/agent-robot-avatar-core.js +1056 -0
- package/src/agent-robot-avatar-extension-host.js +73 -0
- package/src/agent-robot-avatar-failure.js +127 -0
- package/src/agent-robot-avatar-head-roundness.js +136 -0
- package/src/agent-robot-avatar-inspect.js +231 -0
- package/src/agent-robot-avatar-version.js +3 -0
- package/src/agent-robot-avatar-waiting.js +121 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
All notable user-facing changes to Agent Robot Avatar are documented here.
|
|
4
|
+
|
|
5
|
+
The project follows Semantic Versioning for public releases. Internal development build numbers are not part of the public version history.
|
|
6
|
+
|
|
7
|
+
## [Unreleased]
|
|
8
|
+
|
|
9
|
+
## [0.2.0] - 2026-09-04
|
|
10
|
+
|
|
11
|
+
First stable release of the backward-compatible 0.2 series.
|
|
12
|
+
|
|
13
|
+
### Added
|
|
14
|
+
|
|
15
|
+
- Added Traditional Chinese, Japanese, Korean, Spanish, Portuguese, German, and French documentation.
|
|
16
|
+
- Added package, installation, server-import, and real-browser smoke tests.
|
|
17
|
+
- Added `setAntennaFlash(enabled)` for per-avatar antenna flashing.
|
|
18
|
+
- Added built-in TypeScript declarations for actions, events, and public methods.
|
|
19
|
+
|
|
20
|
+
### Changed
|
|
21
|
+
|
|
22
|
+
- Added a lightweight animated GIF preview for the README documentation.
|
|
23
|
+
- Moved localized README files into the `docs/` directory and added a unified language selector.
|
|
24
|
+
- Moved the interactive Demo and Windows launcher into the `demo/` directory.
|
|
25
|
+
- Removed runtime Demo badge logic and cache-busting query strings from internal module imports.
|
|
26
|
+
- Made the package safe to import in server-side JavaScript without browser globals.
|
|
27
|
+
- Corrected package side-effect metadata so bundlers preserve custom-element registration.
|
|
28
|
+
- Added typed package exports and automated declaration checks for npm consumers.
|
|
29
|
+
- Added an npm release rehearsal command and forced publishing to the official npm registry.
|
|
30
|
+
- Replaced four layers of runtime method wrapping with a shared extension registry.
|
|
31
|
+
- Routed built-in actions and antenna drawing through the same registry, leaving one lifecycle entry point.
|
|
32
|
+
- Shared global input listeners across avatar instances and paused frame rendering after sleep animations settle.
|
|
33
|
+
|
|
34
|
+
## [0.1.0] - 2026-09-02
|
|
35
|
+
|
|
36
|
+
First public release.
|
|
37
|
+
|
|
38
|
+
### Added
|
|
39
|
+
|
|
40
|
+
- Reusable `<agent-robot-avatar>` Web Component built with SVG and vanilla JavaScript
|
|
41
|
+
- Public `play(name)` and `reset()` APIs
|
|
42
|
+
- Idle gaze, automatic blinking, pointer following, and inertial head movement
|
|
43
|
+
- Jelly-style local drag deformation with elastic recovery
|
|
44
|
+
- `idle`, `bored`, `waiting`, `input`, `send`, `success`, `failure`, `warning`, `inspect`, `angry`, `error`, `surprise`, `sleep`, and `wake` states
|
|
45
|
+
- Dedicated `startWaiting()` and `stopWaiting()` lifecycle for pending Agent requests
|
|
46
|
+
- Distinct semantics for task failure, system error, blocked content, warning confirmation, and result inspection
|
|
47
|
+
- Semantic aliases for failure, review / verification, blocked-content, and system / connection-error states
|
|
48
|
+
- `face-state` event for host application synchronization
|
|
49
|
+
- `setPointerFollow(enabled)` API
|
|
50
|
+
- Adjustable head shape with `setHeadRoundness(value)` and `getHeadRoundness()`
|
|
51
|
+
- `head-roundness-change` event
|
|
52
|
+
- Optional `size`, `color`, and `auto-sleep` attributes
|
|
53
|
+
- Floating antenna with optional status flashing, disabled by default
|
|
54
|
+
- Full interactive Demo and a minimal integration example
|
|
55
|
+
- English and Simplified Chinese documentation
|
|
56
|
+
- npm-compatible package metadata for later package publication
|
|
57
|
+
- Contribution guide, issue templates, pull request template, MIT License, and Ko-fi funding metadata
|
|
58
|
+
|
|
59
|
+
[0.2.0]: https://github.com/CX-ARTLab/agent-robot-avatar/releases/tag/v0.2.0
|
|
60
|
+
[0.1.0]: https://github.com/CX-ARTLab/agent-robot-avatar/releases/tag/v0.1.0
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 CX ART Lab
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,286 @@
|
|
|
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) | [繁體中文](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.zh-TW.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) | [Español](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.es.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) | [Français](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.fr.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
|
+
A lightweight, expressive robot avatar Web Component for AI agents and other interactive applications.
|
|
14
|
+
|
|
15
|
+
Agent Robot Avatar is built with SVG and vanilla JavaScript. It has no third-party animation framework dependency, works as a native custom element, and exposes a compact API for expressions, interaction states, pointer behavior, waiting feedback, and head-shape customization.
|
|
16
|
+
|
|
17
|
+
**Current public version: v0.2.0**
|
|
18
|
+
|
|
19
|
+
<p align="center">
|
|
20
|
+
<img src="./assets/demo/agent-robot-avatar-demo.gif" alt="Agent Robot Avatar interactive animation demo" width="560">
|
|
21
|
+
</p>
|
|
22
|
+
|
|
23
|
+
## Highlights
|
|
24
|
+
|
|
25
|
+
- Pure SVG + vanilla JavaScript
|
|
26
|
+
- Native Web Component
|
|
27
|
+
- No third-party animation framework
|
|
28
|
+
- Automatic blinking and subtle idle gaze
|
|
29
|
+
- Pointer-following eyes and inertial head movement
|
|
30
|
+
- Jelly-style local drag deformation with elastic recovery
|
|
31
|
+
- Programmatically controlled Agent states and expressions
|
|
32
|
+
- Distinct waiting, failure, warning, review, blocked-content, and system-error semantics
|
|
33
|
+
- Adjustable head roundness
|
|
34
|
+
- Floating antenna with optional status flashing
|
|
35
|
+
- Demo UI kept separate from the reusable component
|
|
36
|
+
|
|
37
|
+
## Quick start
|
|
38
|
+
|
|
39
|
+
When using the repository source directly, keep `agent-robot-avatar.js` together with the `src/` directory, then load the public entry:
|
|
40
|
+
|
|
41
|
+
```html
|
|
42
|
+
<script type="module" src="./agent-robot-avatar.js"></script>
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
Add the custom element:
|
|
46
|
+
|
|
47
|
+
```html
|
|
48
|
+
<agent-robot-avatar id="avatar"></agent-robot-avatar>
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
The avatar enters its default idle behavior automatically. No initialization code is required.
|
|
52
|
+
|
|
53
|
+
A minimal runnable example is available at [`examples/basic.html`](./examples/basic.html).
|
|
54
|
+
|
|
55
|
+
Bundler-based projects can install and use the component from npm with:
|
|
56
|
+
|
|
57
|
+
```bash
|
|
58
|
+
npm install agent-robot-avatar
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
```js
|
|
62
|
+
import 'agent-robot-avatar';
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
The package includes TypeScript declarations for actions, events, and public methods. No TypeScript setup is required beyond normal package installation.
|
|
66
|
+
|
|
67
|
+
## Basic API
|
|
68
|
+
|
|
69
|
+
Trigger an expression or state with `play()`:
|
|
70
|
+
|
|
71
|
+
```js
|
|
72
|
+
const avatar = document.querySelector('#avatar');
|
|
73
|
+
|
|
74
|
+
avatar.play('success');
|
|
75
|
+
avatar.play('failure');
|
|
76
|
+
avatar.play('warning');
|
|
77
|
+
avatar.play('inspect');
|
|
78
|
+
avatar.play('angry');
|
|
79
|
+
avatar.play('error');
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
Return to the default idle state:
|
|
83
|
+
|
|
84
|
+
```js
|
|
85
|
+
avatar.reset();
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
## Actions and states
|
|
89
|
+
|
|
90
|
+
| State | API name | Intended use |
|
|
91
|
+
| --- | --- | --- |
|
|
92
|
+
| Idle | `idle` | Default idle state |
|
|
93
|
+
| Bored | `bored` | Long idle periods or no active task |
|
|
94
|
+
| Waiting | `waiting` | A request has been sent and a result is still pending |
|
|
95
|
+
| Input | `input` | The user is typing |
|
|
96
|
+
| Send | `send` | Content was sent / nod feedback |
|
|
97
|
+
| Success | `success` | A task completed successfully |
|
|
98
|
+
| Failure | `failure` | A task completed unsuccessfully |
|
|
99
|
+
| Warning | `warning` | A risky or destructive action needs confirmation |
|
|
100
|
+
| Inspect | `inspect` | Reviewing, checking, or verifying a result |
|
|
101
|
+
| Blocked | `angry` | A request is blocked, disallowed, or cannot proceed |
|
|
102
|
+
| System error | `error` | Connection, service, or system failure |
|
|
103
|
+
| Surprise | `surprise` | An unexpected event or result |
|
|
104
|
+
| Sleep | `sleep` | Enter the sleep state |
|
|
105
|
+
| Wake | `wake` | Wake from sleep |
|
|
106
|
+
|
|
107
|
+
The state names intentionally distinguish task results from system conditions. For example, `failure` means the requested task finished unsuccessfully, while `error` is reserved for connection, service, or system failures. `waiting` represents an active pending request; `bored` represents inactivity.
|
|
108
|
+
|
|
109
|
+
Semantic aliases are also available:
|
|
110
|
+
|
|
111
|
+
```js
|
|
112
|
+
avatar.play('failed'); // same as failure
|
|
113
|
+
avatar.play('fail'); // same as failure
|
|
114
|
+
avatar.play('verify'); // same as inspect
|
|
115
|
+
avatar.play('review'); // same as inspect
|
|
116
|
+
avatar.play('blocked'); // same as angry
|
|
117
|
+
avatar.play('policy-blocked'); // same as angry
|
|
118
|
+
avatar.play('system-error'); // same as error
|
|
119
|
+
avatar.play('connection-error'); // same as error
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
## Continuous waiting
|
|
123
|
+
|
|
124
|
+
For real Agent workflows, use the dedicated waiting lifecycle when a request is in progress:
|
|
125
|
+
|
|
126
|
+
```js
|
|
127
|
+
avatar.startWaiting();
|
|
128
|
+
|
|
129
|
+
// Stop when a response or result arrives.
|
|
130
|
+
avatar.stopWaiting();
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
Calling another action also interrupts the active waiting state.
|
|
134
|
+
|
|
135
|
+
## Pointer following
|
|
136
|
+
|
|
137
|
+
Pointer following is enabled by default and can be controlled programmatically:
|
|
138
|
+
|
|
139
|
+
```js
|
|
140
|
+
avatar.setPointerFollow(false);
|
|
141
|
+
avatar.setPointerFollow(true);
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
## Antenna flashing
|
|
145
|
+
|
|
146
|
+
Antenna status flashing is disabled by default and can be enabled per avatar:
|
|
147
|
+
|
|
148
|
+
```js
|
|
149
|
+
avatar.setAntennaFlash(true);
|
|
150
|
+
avatar.setAntennaFlash(false);
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
## Head roundness
|
|
154
|
+
|
|
155
|
+
The head shape can be adjusted from a squarer form to a rounder form without changing the eye clipping or drag-deformation system:
|
|
156
|
+
|
|
157
|
+
```js
|
|
158
|
+
avatar.setHeadRoundness(0); // squarer
|
|
159
|
+
avatar.setHeadRoundness(50); // default
|
|
160
|
+
avatar.setHeadRoundness(100); // rounder
|
|
161
|
+
|
|
162
|
+
console.log(avatar.getHeadRoundness());
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
Values are clamped to the `0–100` range. The interactive Demo uses three presets by default and can unlock continuous adjustment.
|
|
166
|
+
|
|
167
|
+
The component emits `head-roundness-change` when the value changes:
|
|
168
|
+
|
|
169
|
+
```js
|
|
170
|
+
avatar.addEventListener('head-roundness-change', (event) => {
|
|
171
|
+
console.log(event.detail.value);
|
|
172
|
+
});
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
## State event
|
|
176
|
+
|
|
177
|
+
The component emits a `face-state` event whenever its visual state changes:
|
|
178
|
+
|
|
179
|
+
```js
|
|
180
|
+
avatar.addEventListener('face-state', (event) => {
|
|
181
|
+
console.log(event.detail.state);
|
|
182
|
+
});
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
Host applications can use this event to synchronize interface state, logs, Agent workflows, or accessibility feedback.
|
|
186
|
+
|
|
187
|
+
## Attributes
|
|
188
|
+
|
|
189
|
+
```html
|
|
190
|
+
<agent-robot-avatar
|
|
191
|
+
size="160"
|
|
192
|
+
color="#08090b"
|
|
193
|
+
auto-sleep="30000">
|
|
194
|
+
</agent-robot-avatar>
|
|
195
|
+
```
|
|
196
|
+
|
|
197
|
+
| Attribute | Description |
|
|
198
|
+
| --- | --- |
|
|
199
|
+
| `size` | Component size in pixels |
|
|
200
|
+
| `color` | Main avatar color |
|
|
201
|
+
| `auto-sleep` | Idle time before automatic sleep, in milliseconds; `0` disables automatic sleep |
|
|
202
|
+
|
|
203
|
+
All attributes are optional.
|
|
204
|
+
|
|
205
|
+
## Default behavior
|
|
206
|
+
|
|
207
|
+
Without explicit API calls, the avatar already provides subtle ambient behavior:
|
|
208
|
+
|
|
209
|
+
- Random blinking
|
|
210
|
+
- Subtle gaze wandering
|
|
211
|
+
- Pointer following when the cursor is nearby
|
|
212
|
+
- Light inertial head movement
|
|
213
|
+
- Natural return to idle
|
|
214
|
+
- Optional automatic sleep
|
|
215
|
+
|
|
216
|
+
## Drag interaction
|
|
217
|
+
|
|
218
|
+
The avatar supports direct pointer dragging. The head deforms locally around the interaction point instead of moving as a rigid object.
|
|
219
|
+
|
|
220
|
+
- Strong outward pull: triggers `angry` after recovery
|
|
221
|
+
- Strong inward push toward the center: triggers `success` after recovery
|
|
222
|
+
- Small drag: deformation only, with no expression trigger
|
|
223
|
+
|
|
224
|
+
When released, the shape returns with an elastic rebound.
|
|
225
|
+
|
|
226
|
+
## Interactive Demo
|
|
227
|
+
|
|
228
|
+
`demo/index.html` contains the full interactive Demo, including:
|
|
229
|
+
|
|
230
|
+
- All public expression states
|
|
231
|
+
- Pointer following
|
|
232
|
+
- Jelly drag deformation
|
|
233
|
+
- Waiting lifecycle
|
|
234
|
+
- Head-roundness presets and continuous adjustment
|
|
235
|
+
- Color and behavior controls
|
|
236
|
+
- Simulated Agent conversation states
|
|
237
|
+
|
|
238
|
+
The interactive Demo and Demo-only JavaScript are isolated in `demo/` and are not included in the reusable package runtime.
|
|
239
|
+
|
|
240
|
+
## Project structure
|
|
241
|
+
|
|
242
|
+
```text
|
|
243
|
+
agent-robot-avatar.js Public component entry
|
|
244
|
+
src/ Reusable component runtime and expression modules
|
|
245
|
+
demo/ Interactive Demo and Demo-only helpers
|
|
246
|
+
examples/ Minimal integration examples
|
|
247
|
+
assets/support/ Support / payment QR assets
|
|
248
|
+
docs/ Localized documentation
|
|
249
|
+
README.md English main documentation
|
|
250
|
+
CHANGELOG.md Public release history
|
|
251
|
+
CONTRIBUTING.md Contribution guide
|
|
252
|
+
package.json Package metadata
|
|
253
|
+
LICENSE MIT License
|
|
254
|
+
```
|
|
255
|
+
|
|
256
|
+
## Distribution
|
|
257
|
+
|
|
258
|
+
The package is published on npm as `agent-robot-avatar`. It includes the public entry, TypeScript declarations, runtime modules, documentation, and support assets.
|
|
259
|
+
|
|
260
|
+
The npm package intentionally includes only the public entry, TypeScript declarations, `src/` runtime, documentation, and support assets; Demo-only files are excluded.
|
|
261
|
+
|
|
262
|
+
## Compatibility
|
|
263
|
+
|
|
264
|
+
Agent Robot Avatar is designed for modern browsers with support for ES modules, Custom Elements, SVG, Pointer Events, and the Web Animations API.
|
|
265
|
+
|
|
266
|
+
## Contributing
|
|
267
|
+
|
|
268
|
+
Issues and pull requests are welcome. See [`CONTRIBUTING.md`](./CONTRIBUTING.md) before submitting changes.
|
|
269
|
+
|
|
270
|
+
## Project status
|
|
271
|
+
|
|
272
|
+
v0.1.0 is the first public release line. The public API is intentionally small so it can evolve carefully before a future `1.0.0` stability commitment.
|
|
273
|
+
|
|
274
|
+
Agent Robot Avatar is independently developed and is not affiliated with, endorsed by, or representative of any AI platform or brand.
|
|
275
|
+
|
|
276
|
+
## License
|
|
277
|
+
|
|
278
|
+
MIT License. See [`LICENSE`](./LICENSE).
|
|
279
|
+
|
|
280
|
+
## Buy me a coffee
|
|
281
|
+
|
|
282
|
+
If this project is useful to you, you can buy me a coffee. Use whichever option is most convenient:
|
|
283
|
+
|
|
284
|
+
| Ko-fi | Alipay | WeChat Pay |
|
|
285
|
+
| --- | --- | --- |
|
|
286
|
+
| <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="Alipay QR code" width="160"> | <img src="./assets/support/wechat-pay.png" alt="WeChat Pay QR code" width="160"> |
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import AgentRobotAvatar from './src/agent-robot-avatar-extension-host.js';
|
|
2
|
+
import './src/agent-robot-avatar-actions.js';
|
|
3
|
+
import './src/agent-robot-avatar-antenna.js';
|
|
4
|
+
import './src/agent-robot-avatar-waiting.js';
|
|
5
|
+
import './src/agent-robot-avatar-antenna-flash.js';
|
|
6
|
+
import './src/agent-robot-avatar-inspect.js';
|
|
7
|
+
import './src/agent-robot-avatar-failure.js';
|
|
8
|
+
import './src/agent-robot-avatar-head-roundness.js';
|
|
9
|
+
import { VERSION } from './src/agent-robot-avatar-version.js';
|
|
10
|
+
|
|
11
|
+
if (typeof window !== 'undefined') {
|
|
12
|
+
window.AgentRobotAvatarVersion = VERSION;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export { AgentRobotAvatar, VERSION };
|
|
16
|
+
export default AgentRobotAvatar;
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,152 @@
|
|
|
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) | [繁體中文](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.zh-TW.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) | [Español](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.es.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) | [Français](https://github.com/CX-ArtLab/agent-robot-avatar/blob/main/docs/README.fr.md)
|
|
8
|
+
|
|
9
|
+
 [](../LICENSE) [](https://github.com/CX-ArtLab/agent-robot-avatar/actions/workflows/validate.yml) [](https://ko-fi.com/P0E625WIOI)
|
|
10
|
+
|
|
11
|
+
Eine leichte, ausdrucksstarke Roboter-Avatar-Web-Component für KI-Agenten und andere interaktive Anwendungen.
|
|
12
|
+
|
|
13
|
+
Agent Robot Avatar basiert auf SVG und Vanilla JavaScript und benötigt kein externes Animationsframework. Die Komponente funktioniert als natives Custom Element und stellt eine kompakte API für Ausdrücke, Interaktionszustände, Pointer-Following, Wartefeedback und Kopfform bereit.
|
|
14
|
+
|
|
15
|
+
**Aktuelle öffentliche Version: v0.2.0**
|
|
16
|
+
|
|
17
|
+
<p align="center">
|
|
18
|
+
<img src="../assets/demo/agent-robot-avatar-demo.gif" alt="Interaktive animierte Demo von Agent Robot Avatar" width="560">
|
|
19
|
+
</p>
|
|
20
|
+
|
|
21
|
+
## Highlights
|
|
22
|
+
|
|
23
|
+
- SVG + Vanilla JavaScript
|
|
24
|
+
- Native Web Component
|
|
25
|
+
- Keine externe Animations-Framework-Abhängigkeit
|
|
26
|
+
- Automatisches Blinzeln und subtile Blickbewegung
|
|
27
|
+
- Pointer-Following und träge Kopfbewegung
|
|
28
|
+
- Lokale Jelly-Drag-Verformung mit elastischer Rückkehr
|
|
29
|
+
- Programmatisch steuerbare Agent-Zustände und Ausdrücke
|
|
30
|
+
- Getrennte Semantik für waiting, failure, warning, inspect, blocked und system error
|
|
31
|
+
- Einstellbare Kopfrundung
|
|
32
|
+
- Schwebende Antenne mit optionalem Statusblinken
|
|
33
|
+
- Demo klar vom wiederverwendbaren Component-Runtime getrennt
|
|
34
|
+
|
|
35
|
+
## Schnellstart
|
|
36
|
+
|
|
37
|
+
```html
|
|
38
|
+
<script type="module" src="./agent-robot-avatar.js"></script>
|
|
39
|
+
<agent-robot-avatar id="avatar"></agent-robot-avatar>
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
Ein minimales Beispiel befindet sich unter [`examples/basic.html`](../examples/basic.html).
|
|
43
|
+
|
|
44
|
+
## Basis-API
|
|
45
|
+
|
|
46
|
+
```js
|
|
47
|
+
const avatar = document.querySelector('#avatar');
|
|
48
|
+
avatar.play('success');
|
|
49
|
+
avatar.play('failure');
|
|
50
|
+
avatar.play('warning');
|
|
51
|
+
avatar.play('inspect');
|
|
52
|
+
avatar.play('angry');
|
|
53
|
+
avatar.play('error');
|
|
54
|
+
avatar.reset();
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
## Zustände und Ausdrücke
|
|
58
|
+
|
|
59
|
+
| Zustand | API | Typische Verwendung |
|
|
60
|
+
| --- | --- | --- |
|
|
61
|
+
| Idle | `idle` | Normaler Bereitschaftszustand |
|
|
62
|
+
| Bored | `bored` | Längere Zeit ohne aktive Aufgabe |
|
|
63
|
+
| Waiting | `waiting` | Anfrage gesendet, Ergebnis steht noch aus |
|
|
64
|
+
| Input | `input` | Benutzer tippt |
|
|
65
|
+
| Send | `send` | Senden / Nicken als Feedback |
|
|
66
|
+
| Success | `success` | Aufgabe erfolgreich abgeschlossen |
|
|
67
|
+
| Failure | `failure` | Aufgabe wurde erfolglos abgeschlossen |
|
|
68
|
+
| Warning | `warning` | Eine wichtige Aktion benötigt Bestätigung |
|
|
69
|
+
| Inspect | `inspect` | Ergebnis prüfen oder verifizieren |
|
|
70
|
+
| Blocked | `angry` | Anfrage blockiert oder kann nicht fortgesetzt werden |
|
|
71
|
+
| System error | `error` | Verbindungs-, Dienst- oder Systemfehler |
|
|
72
|
+
| Surprise | `surprise` | Unerwartetes Ereignis oder Ergebnis |
|
|
73
|
+
| Sleep | `sleep` | Schlafzustand aktivieren |
|
|
74
|
+
| Wake | `wake` | Aus dem Schlafzustand zurückkehren |
|
|
75
|
+
|
|
76
|
+
`failure` beschreibt einen Fehlschlag der Aufgabe selbst; `error` ist für Verbindungs-, Dienst- oder Systemprobleme reserviert. `waiting` bezeichnet eine laufende Anfrage, `bored` dagegen Inaktivität.
|
|
77
|
+
|
|
78
|
+
```js
|
|
79
|
+
avatar.startWaiting();
|
|
80
|
+
avatar.stopWaiting();
|
|
81
|
+
avatar.setPointerFollow(false);
|
|
82
|
+
avatar.setPointerFollow(true);
|
|
83
|
+
avatar.setHeadRoundness(0);
|
|
84
|
+
avatar.setHeadRoundness(50);
|
|
85
|
+
avatar.setHeadRoundness(100);
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
`setHeadRoundness()` akzeptiert Werte von `0–100`. Änderungen lösen `head-roundness-change` aus. Visuelle Zustandsänderungen lösen `face-state` aus.
|
|
89
|
+
|
|
90
|
+
## Attribute
|
|
91
|
+
|
|
92
|
+
```html
|
|
93
|
+
<agent-robot-avatar size="160" color="#08090b" auto-sleep="30000"></agent-robot-avatar>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
| Attribut | Beschreibung |
|
|
97
|
+
| --- | --- |
|
|
98
|
+
| `size` | Component-Größe in Pixeln |
|
|
99
|
+
| `color` | Hauptfarbe des Avatars |
|
|
100
|
+
| `auto-sleep` | Inaktivitätszeit bis zum automatischen Schlaf in ms; `0` deaktiviert |
|
|
101
|
+
|
|
102
|
+
## Standardverhalten und Drag
|
|
103
|
+
|
|
104
|
+
Ohne explizite API-Aufrufe bietet der Avatar zufälliges Blinzeln, subtile Blickbewegungen, Pointer-Following, leichte Trägheit und optionalen Auto-Sleep. Beim Ziehen verformt sich der Kopf lokal um den Interaktionspunkt und kehrt elastisch zurück.
|
|
105
|
+
|
|
106
|
+
- Stark nach außen ziehen: nach der Rückkehr `angry`
|
|
107
|
+
- Stark zur Mitte drücken: nach der Rückkehr `success`
|
|
108
|
+
- Kleine Bewegung: nur Verformung
|
|
109
|
+
|
|
110
|
+
## Interaktive Demo
|
|
111
|
+
|
|
112
|
+
`demo/index.html` enthält alle öffentlichen Zustände, Pointer-Following, Jelly-Drag, den waiting-Lebenszyklus, Kopfrundung, Farb- und Verhaltenssteuerung sowie eine simulierte Agent-Unterhaltung. Demo-spezifisches JavaScript liegt unter `demo/` und ist nicht Teil des wiederverwendbaren npm-Runtimes.
|
|
113
|
+
|
|
114
|
+
## Projektstruktur
|
|
115
|
+
|
|
116
|
+
```text
|
|
117
|
+
agent-robot-avatar.js Öffentlicher Component-Einstieg
|
|
118
|
+
src/ Wiederverwendbarer Runtime und Ausdrucksmodule
|
|
119
|
+
demo/ Interaktive Demo und Demo-spezifische Skripte
|
|
120
|
+
examples/ Minimale Integrationsbeispiele
|
|
121
|
+
assets/support/ Support-/Zahlungs-QR-Ressourcen
|
|
122
|
+
docs/ Mehrsprachige Dokumentation
|
|
123
|
+
README.md Englische Hauptdokumentation
|
|
124
|
+
CHANGELOG.md Öffentliche Versionshistorie
|
|
125
|
+
CONTRIBUTING.md Beitragsleitfaden
|
|
126
|
+
package.json Paket-Metadaten
|
|
127
|
+
LICENSE MIT License
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
## Distribution und Kompatibilität
|
|
131
|
+
|
|
132
|
+
Das Paket ist als `agent-robot-avatar` auf npm veröffentlicht und enthält TypeScript-Deklarationen für Aktionen, Ereignisse und öffentliche Methoden. Unterstützt werden moderne Browser mit ES Modules, Custom Elements, SVG, Pointer Events und Web Animations API.
|
|
133
|
+
|
|
134
|
+
## Beitragen
|
|
135
|
+
|
|
136
|
+
Issues und Pull Requests sind willkommen. Bitte vor Änderungen [`CONTRIBUTING.md`](../CONTRIBUTING.md) lesen.
|
|
137
|
+
|
|
138
|
+
## Projektstatus
|
|
139
|
+
|
|
140
|
+
v0.1.0 ist die erste öffentliche Release-Linie. Die öffentliche API bleibt bewusst klein, damit sie vor einer späteren Stabilitätszusage mit `1.0.0` sorgfältig weiterentwickelt werden kann.
|
|
141
|
+
|
|
142
|
+
Agent Robot Avatar ist ein unabhängig entwickeltes Open-Source-Projekt und steht in keiner offiziellen Verbindung zu einer KI-Plattform oder Marke.
|
|
143
|
+
|
|
144
|
+
## Lizenz
|
|
145
|
+
|
|
146
|
+
MIT License. Siehe [`LICENSE`](../LICENSE).
|
|
147
|
+
|
|
148
|
+
## Unterstütze mich mit einem Kaffee
|
|
149
|
+
|
|
150
|
+
| Ko-fi | Alipay | WeChat Pay |
|
|
151
|
+
| --- | --- | --- |
|
|
152
|
+
| <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="Alipay QR-Code" width="160"> | <img src="../assets/support/wechat-pay.png" alt="WeChat Pay QR-Code" width="160"> |
|