agent-robot-avatar 0.3.2 → 0.6.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 +209 -124
- package/LICENSE +21 -21
- package/README.md +198 -446
- package/agent-robot-avatar.js +27 -25
- package/docs/README.de.md +185 -166
- package/docs/README.es.md +185 -225
- package/docs/README.fr.md +185 -225
- package/docs/README.ja.md +185 -225
- package/docs/README.ko.md +185 -225
- package/docs/README.pt.md +185 -225
- package/docs/README.ru.md +185 -0
- package/docs/README.zh-CN.md +202 -396
- package/docs/README.zh-TW.md +185 -227
- package/index.d.ts +141 -111
- package/package.json +79 -77
- package/src/agent-robot-avatar-actions.js +403 -400
- package/src/agent-robot-avatar-antenna.js +152 -152
- package/src/agent-robot-avatar-core.js +1155 -1152
- package/src/agent-robot-avatar-extension-host.js +78 -78
- package/src/agent-robot-avatar-failure.js +131 -131
- package/src/agent-robot-avatar-geometry.js +40 -40
- package/src/agent-robot-avatar-gestures.js +170 -0
- package/src/agent-robot-avatar-head-roundness.js +103 -103
- package/src/agent-robot-avatar-inspect.js +242 -242
- package/src/agent-robot-avatar-love.js +226 -0
- package/src/agent-robot-avatar-random.js +272 -0
- package/src/agent-robot-avatar-runtime.js +948 -860
- package/src/agent-robot-avatar-version.js +3 -3
- package/src/agent-robot-avatar-waiting.js +154 -121
- package/src/agent-robot-avatar-wrap.js +66 -0
- package/src/agent-robot-avatar-antenna-flash.js +0 -127
package/agent-robot-avatar.js
CHANGED
|
@@ -1,25 +1,27 @@
|
|
|
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-
|
|
6
|
-
import './src/agent-robot-avatar-
|
|
7
|
-
import './src/agent-robot-avatar-
|
|
8
|
-
import './src/agent-robot-avatar-
|
|
9
|
-
import './src/agent-robot-avatar-
|
|
10
|
-
import
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
//
|
|
15
|
-
// runtime
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
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-inspect.js';
|
|
6
|
+
import './src/agent-robot-avatar-failure.js';
|
|
7
|
+
import './src/agent-robot-avatar-love.js';
|
|
8
|
+
import './src/agent-robot-avatar-random.js';
|
|
9
|
+
import './src/agent-robot-avatar-head-roundness.js';
|
|
10
|
+
import './src/agent-robot-avatar-gestures.js';
|
|
11
|
+
import './src/agent-robot-avatar-runtime.js';
|
|
12
|
+
import { VERSION } from './src/agent-robot-avatar-version.js';
|
|
13
|
+
|
|
14
|
+
// Elements already present in markup can upgrade while the core module is
|
|
15
|
+
// loading, before runtime extensions finish installing their prototype hooks.
|
|
16
|
+
// Initialize those existing instances once the full public entry is ready so
|
|
17
|
+
// runtime policies (including touch-action) are applied synchronously.
|
|
18
|
+
if (typeof document !== 'undefined') {
|
|
19
|
+
document.querySelectorAll('agent-robot-avatar').forEach(avatar => avatar._resumeFrames?.());
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
if (typeof window !== 'undefined') {
|
|
23
|
+
window.AgentRobotAvatarVersion = VERSION;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
export { AgentRobotAvatar, VERSION };
|
|
27
|
+
export default AgentRobotAvatar;
|
package/docs/README.de.md
CHANGED
|
@@ -1,166 +1,185 @@
|
|
|
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) | [
|
|
8
|
-
|
|
9
|
-
   
|
|
12
|
-
|
|
13
|
-
Eine
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
Agent Robot Avatar
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
-
|
|
36
|
-
-
|
|
37
|
-
-
|
|
38
|
-
-
|
|
39
|
-
-
|
|
40
|
-
-
|
|
41
|
-
-
|
|
42
|
-
-
|
|
43
|
-
-
|
|
44
|
-
-
|
|
45
|
-
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
avatar.
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
`
|
|
89
|
-
|
|
90
|
-
`
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
avatar.
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
```
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
`
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
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
|
+
Eine leichtgewichtige, ausdrucksstarke Roboter-Avatar-Web-Component für KI-Agenten und interaktive Anwendungen.
|
|
14
|
+
|
|
15
|
+
Sie kann in KI-Assistenten, Agent-Oberflächen, Desktop-Begleitern, virtuellen Haustieren, digitalen Maskottchen, Chatbot-Avataren und anderen interaktiven Charaktererlebnissen eingesetzt werden.
|
|
16
|
+
|
|
17
|
+
Geeignet für KI-Assistenten- und Agent-Oberflächen, einschließlich Produkten und Erlebnissen ähnlich wie ChatGPT, Claude, Codex, Cursor, Grok Bot, Gemini CLI und OpenCode.
|
|
18
|
+
|
|
19
|
+
Sie basiert auf SVG und Vanilla JavaScript, läuft als natives Custom Element und hat keine Runtime-Abhängigkeiten.
|
|
20
|
+
|
|
21
|
+
Agent Robot Avatar kann außerdem als visuelle Feedback-Ebene für Agent-Oberflächen im AG-UI-Stil verwendet werden.
|
|
22
|
+
|
|
23
|
+
<p align="center">
|
|
24
|
+
<img src="../assets/demo/agent-robot-avatar-demo.gif" alt="Interaktive Animationsdemo von Agent Robot Avatar" width="560">
|
|
25
|
+
</p>
|
|
26
|
+
|
|
27
|
+
## Live-Demo
|
|
28
|
+
|
|
29
|
+
[Interaktive Demo öffnen](https://cx-artlab.github.io/agent-robot-avatar/?lang=de)
|
|
30
|
+
|
|
31
|
+
## Besondere Merkmale
|
|
32
|
+
|
|
33
|
+
- Native Web Component
|
|
34
|
+
- SVG-Rendering + Vanilla JavaScript
|
|
35
|
+
- Keine Runtime-Abhängigkeiten
|
|
36
|
+
- Automatisches Blinzeln und dezentes Idle-Verhalten
|
|
37
|
+
- Zeigerfolgende Augen und träge Kopfbewegung
|
|
38
|
+
- Lokale Jelly-Drag-Verformung mit elastischer Rückkehr
|
|
39
|
+
- Drücken-und-Halten-Stauchung und ziehbare Federantenne
|
|
40
|
+
- Programmatisch steuerbare Agent-Zustände und Ausdrücke
|
|
41
|
+
- Feedback für waiting, success, failure, warning, review, blocked und system error
|
|
42
|
+
- Unterstützung für reduzierte Bewegung
|
|
43
|
+
- Konfigurierbares Schlafverhalten
|
|
44
|
+
- Einstellbare Kopfrundung
|
|
45
|
+
- Optionales Statusblinken der Antenne
|
|
46
|
+
- TypeScript-Deklarationen enthalten
|
|
47
|
+
|
|
48
|
+
## Installation
|
|
49
|
+
|
|
50
|
+
```bash
|
|
51
|
+
npm install agent-robot-avatar
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
```js
|
|
55
|
+
import 'agent-robot-avatar';
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
Alternativ kann der Repository-Quellcode direkt geladen werden:
|
|
59
|
+
|
|
60
|
+
```html
|
|
61
|
+
<script type="module" src="./agent-robot-avatar.js"></script>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
Dann die Komponente hinzufügen:
|
|
65
|
+
|
|
66
|
+
```html
|
|
67
|
+
<agent-robot-avatar id="avatar"></agent-robot-avatar>
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
Es ist kein Initialisierungscode nötig. Der Avatar wechselt automatisch in seinen standardmäßigen Idle-Zustand.
|
|
71
|
+
|
|
72
|
+
## Grundlegende Verwendung
|
|
73
|
+
|
|
74
|
+
```js
|
|
75
|
+
const avatar = document.querySelector('#avatar');
|
|
76
|
+
|
|
77
|
+
avatar.play('success');
|
|
78
|
+
avatar.play('wary');
|
|
79
|
+
avatar.play('refuse');
|
|
80
|
+
|
|
81
|
+
avatar.reset();
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
Verfügbare Aktionen:
|
|
85
|
+
|
|
86
|
+
`idle` · `bored` · `waiting-spin` · `waiting-wrap` · `waiting-wave` · `input` · `affirm` · `success` · `failure` · `wary` · `inspect` · `angry` · `refuse` · `surprise` · `love` · `random` · `sleep` · `wake`
|
|
87
|
+
|
|
88
|
+
Aktionsnamen beschreiben, was der Avatar tut. `refuse` schüttelt den Kopf, für eine Anfrage, die der Agent nicht ausführen kann oder will; `failure` steht für eine Aufgabe oder Verbindung ohne Erfolg; `wary` dreht den Kopf und mustert misstrauisch von oben bis unten, für eine Aktion, die eine Bestätigung braucht. Namen aus 0.5 (`send`, `warning`, `error`, `blocked` und weitere) funktionieren bis 1.0 weiter, mit einem Hinweis in der Konsole; siehe die [Upgrade-Tabelle](../CHANGELOG.md#upgrading-from-05x).
|
|
89
|
+
|
|
90
|
+
`love` drückt Zuneigung oder Dank aus: Die beiden Augen neigen sich zu einem einzigen Herz zusammen, schlagen dreimal und kehren dann zurück.
|
|
91
|
+
|
|
92
|
+
`random` spielt einen Spielautomaten-Dreh ab: Jedes Auge rollt über eine Walze, dann bremst das linke Auge, federt nach und kommt zur Ruhe, danach das rechte. `slot` ist ein Alias.
|
|
93
|
+
|
|
94
|
+
Ein typischer Agent-Anfrageablauf:
|
|
95
|
+
|
|
96
|
+
```js
|
|
97
|
+
avatar.startWaiting();
|
|
98
|
+
|
|
99
|
+
// Zweite Wartebewegung: Die Augen drehen seitlich heraus und kommen von der anderen Seite zurück.
|
|
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('failure');
|
|
107
|
+
}
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
## Häufige Optionen
|
|
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
|
+
| Attribut | Zweck |
|
|
123
|
+
| --- | --- |
|
|
124
|
+
| `size` | Avatargröße in Pixeln |
|
|
125
|
+
| `color` | Hauptfarbe des Avatars |
|
|
126
|
+
| `auto-sleep` | Leerlaufzeit vor automatischem Schlaf; `0` deaktiviert ihn |
|
|
127
|
+
| `wake-on` | Automatische Aufwachstrategie: `activity`, `interaction` oder `manual` |
|
|
128
|
+
| `motion` | Bewegungsstrategie: `auto`, `reduce` oder `full` |
|
|
129
|
+
| `press-squeeze` | Mitte gedrückt halten und stauchen; `false` deaktiviert die Geste |
|
|
130
|
+
| `antenna-drag` | Antenne ziehen, federnd zurückkehren und wütend reagieren; `false` deaktiviert sie |
|
|
131
|
+
|
|
132
|
+
Häufige Runtime-Steuerungen:
|
|
133
|
+
|
|
134
|
+
```js
|
|
135
|
+
avatar.setPointerFollow(false);
|
|
136
|
+
avatar.setHeadRoundness(75);
|
|
137
|
+
avatar.setPressSqueeze(true);
|
|
138
|
+
avatar.setAntennaDrag(true);
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
Gedrückthalten in der Mitte startet die Stauchung. Nach mehr als 4 CSS-Pixeln Bewegung wechselt dieselbe Zeigergeste zum vorhandenen Kopfziehen. Die Antenne verwendet dessen Distanzlimit und endet mit der vorhandenen Wutreaktion.
|
|
142
|
+
|
|
143
|
+
## Ereignisse und Integration
|
|
144
|
+
|
|
145
|
+
Die Komponente sendet `face-state` für visuelle Zustandsänderungen und `action-state` für semantische Änderungen im Aktionslebenszyklus.
|
|
146
|
+
|
|
147
|
+
Für Host-Integrationen und barrierefreie Statustexte sollte `action-state` bevorzugt werden. Ein ausführbares Anfrage-Lifecycle-Beispiel befindet sich in [`examples/accessibility.html`](../examples/accessibility.html).
|
|
148
|
+
|
|
149
|
+
Ein minimales Integrationsbeispiel ist unter [`examples/basic.html`](../examples/basic.html) verfügbar.
|
|
150
|
+
|
|
151
|
+
## Kompatibilität
|
|
152
|
+
|
|
153
|
+
Für moderne Browser mit Unterstützung für ES Modules, Custom Elements, SVG, Pointer Events, Web Animations API, `IntersectionObserver`, `ResizeObserver` und `matchMedia`.
|
|
154
|
+
|
|
155
|
+
Automatisierte Browsertests decken Chromium, Firefox und WebKit ab.
|
|
156
|
+
|
|
157
|
+
## Mitwirken
|
|
158
|
+
|
|
159
|
+
Issues und Pull Requests sind willkommen. Bitte vor Änderungen [`CONTRIBUTING.md`](../CONTRIBUTING.md) lesen.
|
|
160
|
+
|
|
161
|
+
## Projektstatus
|
|
162
|
+
|
|
163
|
+
**Aktuelle öffentliche Version: v0.6.0**
|
|
164
|
+
|
|
165
|
+
Die öffentliche API bleibt bewusst kompakt, während sich das Projekt in Richtung einer zukünftigen Stabilitätszusage mit `1.0.0` entwickelt.
|
|
166
|
+
|
|
167
|
+
Agent Robot Avatar wird unabhängig entwickelt und ist mit keiner KI-Plattform oder Marke verbunden, von ihr unterstützt oder deren offizieller Vertreter.
|
|
168
|
+
|
|
169
|
+
## Charakterdesign und visuelle Identität
|
|
170
|
+
|
|
171
|
+
Der Agent-Robot-Avatar-Charakter einschließlich seines Roboterdesigns und seiner visuellen Identität ist ein Originaldesign von CX ArtLab.
|
|
172
|
+
|
|
173
|
+
Die MIT-Lizenz gilt für Software und Quellcode. Sie erlaubt die Nutzung, Änderung und Verteilung des Avatars als Teil von Anwendungen, überträgt jedoch nicht das Eigentum am Namen Agent Robot Avatar, an der Charakteridentität oder der visuellen Identität und gewährt nicht das Recht, diese als eigenen Originalcharakter oder eigenständige Marke eines Dritten darzustellen.
|
|
174
|
+
|
|
175
|
+
In diesem Projekt genannte Produktnamen Dritter dienen nur zur Beschreibung möglicher Anwendungsfälle und bedeuten keine Verbindung oder Unterstützung.
|
|
176
|
+
|
|
177
|
+
## Lizenz
|
|
178
|
+
|
|
179
|
+
MIT License. Siehe [`LICENSE`](../LICENSE).
|
|
180
|
+
|
|
181
|
+
---
|
|
182
|
+
|
|
183
|
+
Wenn dir dieses Projekt nützlich ist, kannst du mir einen Kaffee spendieren.
|
|
184
|
+
|
|
185
|
+
<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>
|