agent-robot-avatar 0.3.1 → 0.5.2

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/docs/README.pt.md CHANGED
@@ -1,225 +1,186 @@
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
- ![Versão](https://img.shields.io/badge/version-v0.3.1-111111?style=flat-square) [![License](https://img.shields.io/badge/license-MIT-0A7EA4?style=flat-square)](../LICENSE) [![CI](https://github.com/CX-ArtLab/agent-robot-avatar/actions/workflows/validate.yml/badge.svg?branch=main)](https://github.com/CX-ArtLab/agent-robot-avatar/actions/workflows/validate.yml) [![Ko-fi](https://img.shields.io/badge/Ko--fi-Support-FF5E5B?style=flat-square&logo=ko-fi&logoColor=white)](https://ko-fi.com/P0E625WIOI)
10
-
11
- ![Vanilla JavaScript](https://img.shields.io/badge/Vanilla-JavaScript-F7DF1E?style=flat-square&logo=javascript&logoColor=000) ![Web Component](https://img.shields.io/badge/Web-Native%20Component-5A67D8?style=flat-square) ![SVG](https://img.shields.io/badge/Rendering-SVG-FFB13B?style=flat-square&logo=svg&logoColor=000) ![Zero Dependencies](https://img.shields.io/badge/Dependencies-0-2EA44F?style=flat-square) ![14 Agent States](https://img.shields.io/badge/Agent%20states-14-8B5CF6?style=flat-square) ![Pointer Following](https://img.shields.io/badge/Pointer-following-00A67E?style=flat-square) ![Jelly Drag](https://img.shields.io/badge/Drag-jelly%20physics-FF69B4?style=flat-square)
12
-
13
- Um Web Component leve e expressivo de avatar robótico para agentes de IA e outras aplicações interativas.
14
-
15
- É adequado para interfaces de assistentes e agentes de IA, incluindo produtos e experiências semelhantes a ChatGPT, Claude, Codex, Cursor, Grok Bot, Gemini CLI e OpenCode.
16
-
17
- Também pode ser usado em desktop pets, pets virtuais, companheiros de desktop, mascotes digitais, avatares de chatbot e outras experiências com personagens interativos.
18
-
19
- Agent Robot Avatar também pode funcionar como uma camada de feedback visual para interfaces de agentes no estilo AG-UI.
20
-
21
- Agent Robot Avatar é construído com SVG e JavaScript puro, sem dependência de frameworks de animação de terceiros. Funciona como um Custom Element nativo e oferece uma API compacta para expressões, estados de interação, seguimento do ponteiro, feedback de espera e formato da cabeça.
22
-
23
- **Versão pública atual: v0.3.1**
24
-
25
- <p align="center">
26
- <img src="../assets/demo/agent-robot-avatar-demo.gif" alt="Demonstração animada interativa do Agent Robot Avatar" width="560">
27
- </p>
28
-
29
- ## Demo ao vivo
30
-
31
- Experimente a demo interativa: [Abrir Agent Robot Avatar](https://cx-artlab.github.io/agent-robot-avatar/?lang=pt)
32
-
33
- ## Principais recursos
34
-
35
- - SVG + JavaScript puro
36
- - Web Component nativo
37
- - Sem dependências de frameworks de animação
38
- - Piscar automático e movimento sutil do olhar
39
- - Seguimento do ponteiro e movimento da cabeça com inércia
40
- - Deformação local tipo gelatina ao arrastar e retorno elástico
41
- - Estados e expressões de Agent controláveis por código
42
- - Semântica separada para espera, falha, aviso, inspeção, bloqueio e erro de sistema
43
- - Arredondamento da cabeça ajustável
44
- - Antena flutuante com indicação piscante opcional
45
- - Demo separado do componente reutilizável
46
-
47
- ## Início rápido
48
-
49
- Ao usar diretamente o código do repositório, mantenha `agent-robot-avatar.js` junto com `src/` e carregue a entrada pública:
50
-
51
- ```html
52
- <script type="module" src="./agent-robot-avatar.js"></script>
53
- ```
54
-
55
- ```html
56
- <agent-robot-avatar id="avatar"></agent-robot-avatar>
57
- ```
58
-
59
- O avatar entra automaticamente no estado idle. Um exemplo mínimo está em [`examples/basic.html`](../examples/basic.html).
60
-
61
- ## API básica
62
-
63
- ```js
64
- const avatar = document.querySelector('#avatar');
65
-
66
- avatar.play('success');
67
- avatar.play('failure');
68
- avatar.play('warning');
69
- avatar.play('inspect');
70
- avatar.play('blocked');
71
- avatar.play('error');
72
-
73
- avatar.reset();
74
- ```
75
-
76
- ## Estados e expressões
77
-
78
- | Estado | API | Uso |
79
- | --- | --- | --- |
80
- | Idle | `idle` | Estado normal de espera |
81
- | Bored | `bored` | Longos períodos sem tarefa ativa |
82
- | Waiting | `waiting` | Solicitação enviada, aguardando resultado |
83
- | Input | `input` | Usuário digitando |
84
- | Send | `send` | Envio / feedback de aceno |
85
- | Success | `success` | Tarefa concluída com sucesso |
86
- | Failure | `failure` | Tarefa concluída sem sucesso |
87
- | Warning | `warning` | Ação arriscada ou destrutiva exige confirmação |
88
- | Inspect | `inspect` | Revisar, conferir ou verificar um resultado |
89
- | Blocked | `blocked` | Solicitação bloqueada ou impossibilitada de continuar |
90
- | System error | `error` | Falha de conexão, serviço ou sistema |
91
- | Surprise | `surprise` | Evento ou resultado inesperado |
92
- | Sleep | `sleep` | Entrar em repouso |
93
- | Wake | `wake` | Sair do repouso |
94
-
95
- `failure` representa falha da própria tarefa; `error` é reservado para problemas de conexão, serviço ou sistema. `waiting` indica uma solicitação pendente e `bored` representa inatividade.
96
-
97
- Aliases semânticos também estão disponíveis:
98
-
99
- ```js
100
- avatar.play('failed');
101
- avatar.play('fail');
102
- avatar.play('verify');
103
- avatar.play('review');
104
- avatar.play('angry'); // mesma expressão visual de blocked
105
- avatar.play('policy-blocked');
106
- avatar.play('system-error');
107
- avatar.play('connection-error');
108
- ```
109
-
110
- ## Espera contínua
111
-
112
- ```js
113
- avatar.startWaiting();
114
- // Pare quando a resposta ou resultado chegar.
115
- avatar.stopWaiting();
116
- ```
117
-
118
- Qualquer outra ação também interrompe o estado waiting ativo.
119
-
120
- ## Seguimento do ponteiro
121
-
122
- ```js
123
- avatar.setPointerFollow(false);
124
- avatar.setPointerFollow(true);
125
- ```
126
-
127
- ## Arredondamento da cabeça
128
-
129
- ```js
130
- avatar.setHeadRoundness(0); // mais quadrada
131
- avatar.setHeadRoundness(50); // padrão
132
- avatar.setHeadRoundness(100); // mais arredondada
133
-
134
- console.log(avatar.getHeadRoundness());
135
- ```
136
-
137
- Os valores são limitados a `0–100`. Alterações emitem `head-roundness-change`.
138
-
139
- ```js
140
- avatar.addEventListener('head-roundness-change', (event) => {
141
- console.log(event.detail.value);
142
- });
143
- ```
144
-
145
- ## Evento de estado
146
-
147
- Cada mudança visual emite `face-state`:
148
-
149
- ```js
150
- avatar.addEventListener('face-state', (event) => {
151
- console.log(event.detail.state);
152
- });
153
- ```
154
-
155
- ## Atributos
156
-
157
- ```html
158
- <agent-robot-avatar
159
- size="160"
160
- color="#08090b"
161
- auto-sleep="30000">
162
- </agent-robot-avatar>
163
- ```
164
-
165
- | Atributo | Descrição |
166
- | --- | --- |
167
- | `size` | Tamanho do componente em pixels |
168
- | `color` | Cor principal do avatar |
169
- | `auto-sleep` | Tempo de inatividade antes de dormir, em ms; `0` desativa |
170
-
171
- ## Comportamento padrão
172
-
173
- Sem chamadas explícitas à API, o avatar já oferece piscadas aleatórias, movimento sutil do olhar, seguimento do ponteiro próximo, movimento inercial da cabeça, retorno natural a idle e suspensão automática opcional.
174
-
175
- ## Interação por arraste
176
-
177
- Ao arrastar, a cabeça se deforma localmente ao redor do ponto de interação, em vez de se mover como um corpo rígido.
178
-
179
- - Puxão forte para fora: ativa `angry` após retornar
180
- - Empurrão forte para o centro: ativa `success` após retornar
181
- - Arraste pequeno: apenas deformação
182
-
183
- Essas expressões de arraste só se aplicam em idle quando nenhuma ação programática controla o avatar. Durante `waiting`, `input`, `inspect` e outras ações ativas, a deformação é preservada, mas a expressão de arraste é suprimida e não é reproduzida depois. `pointercancel` restaura apenas a forma, sem acionar success ou angry.
184
-
185
- ## Demo interativo
186
-
187
- `demo/index.html` inclui todos os estados públicos, seguimento do ponteiro, arraste tipo gelatina, ciclo de waiting, ajuste do arredondamento, controles de cor e comportamento e simulação de conversa com Agent. O JavaScript exclusivo do Demo fica isolado em `demo/` e não faz parte do runtime reutilizável do npm.
188
-
189
- ## Estrutura do projeto
190
-
191
- ```text
192
- agent-robot-avatar.js Entrada pública do componente
193
- src/ Runtime reutilizável e módulos de expressão
194
- demo/ Demo interativo e scripts exclusivos
195
- examples/ Exemplos mínimos de integração
196
- assets/support/ Recursos QR de apoio / pagamento
197
- docs/ Documentação multilíngue
198
- README.md Documento principal em inglês
199
- CHANGELOG.md Histórico público de versões
200
- CONTRIBUTING.md Guia de contribuição
201
- package.json Metadados do pacote
202
- LICENSE Licença MIT
203
- ```
204
-
205
- ## Distribuição e compatibilidade
206
-
207
- O pacote está publicado no npm como `agent-robot-avatar` e inclui declarações TypeScript para ações, eventos e métodos públicos. Destina-se a navegadores modernos com suporte a ES Modules, Custom Elements, SVG, Pointer Events e Web Animations API.
208
-
209
- ## Contribuição
210
-
211
- Issues e Pull Requests são bem-vindos. Leia [`CONTRIBUTING.md`](../CONTRIBUTING.md) antes de enviar alterações.
212
-
213
- ## Status do projeto
214
-
215
- v0.3.1 é a versão pública atual. v0.1.0 continua disponível como a primeira versão pública. A API pública é mantida deliberadamente pequena para evoluir com cuidado antes de um futuro compromisso de estabilidade `1.0.0`.
216
-
217
- Agent Robot Avatar é um projeto independente de código aberto e não é afiliado, endossado nem representa nenhuma plataforma ou marca de IA.
218
-
219
- ## Licença
220
-
221
- MIT License. Consulte [`LICENSE`](../LICENSE).
222
-
223
- ## Pague-me um café
224
-
225
- <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>
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
+ ![Version](https://img.shields.io/badge/version-v0.5.2-111111?style=flat-square) [![License](https://img.shields.io/badge/license-MIT-0A7EA4?style=flat-square)](../LICENSE) [![CI](https://github.com/CX-ArtLab/agent-robot-avatar/actions/workflows/validate.yml/badge.svg?branch=main)](https://github.com/CX-ArtLab/agent-robot-avatar/actions/workflows/validate.yml) [![Ko-fi](https://img.shields.io/badge/Ko--fi-Support-FF5E5B?style=flat-square&logo=ko-fi&logoColor=white)](https://ko-fi.com/P0E625WIOI)
10
+
11
+ ![Vanilla JavaScript](https://img.shields.io/badge/Vanilla-JavaScript-F7DF1E?style=flat-square&logo=javascript&logoColor=000) ![Web Component](https://img.shields.io/badge/Web-Native%20Component-5A67D8?style=flat-square) ![SVG](https://img.shields.io/badge/Rendering-SVG-FFB13B?style=flat-square&logo=svg&logoColor=000) ![Zero Dependencies](https://img.shields.io/badge/Dependencies-0-2EA44F?style=flat-square)
12
+
13
+ Um Web Component leve e expressivo de avatar robô para agentes de IA e aplicações interativas.
14
+
15
+ Pode ser usado em assistentes de IA, interfaces de agentes, companheiros de desktop, pets virtuais, mascotes digitais, avatares de chatbot e outras experiências com personagens interativos.
16
+
17
+ É adequado para interfaces de assistentes de IA e agentes, incluindo produtos e experiências semelhantes ao ChatGPT, Claude, Codex, Cursor, Grok Bot, Gemini CLI e OpenCode.
18
+
19
+ Construído com SVG e JavaScript nativo, funciona como um Custom Element e não possui dependências em tempo de execução.
20
+
21
+ O Agent Robot Avatar também pode ser usado como camada de feedback visual para interfaces de agentes no estilo AG-UI.
22
+
23
+ <p align="center">
24
+ <img src="../assets/demo/agent-robot-avatar-demo.gif" alt="Demonstração animada interativa do Agent Robot Avatar" width="560">
25
+ </p>
26
+
27
+ ## Demo ao vivo
28
+
29
+ [Abrir a demo interativa](https://cx-artlab.github.io/agent-robot-avatar/?lang=pt)
30
+
31
+ ## Destaques
32
+
33
+ - Web Component nativo
34
+ - Renderização SVG + JavaScript nativo
35
+ - Zero dependências em tempo de execução
36
+ - Piscar automático e comportamento idle sutil
37
+ - Olhos que seguem o ponteiro e movimento inercial da cabeça
38
+ - Deformação local tipo gelatina ao arrastar, com recuperação elástica
39
+ - Compressão ao manter pressionado e antena elástica arrastável
40
+ - Estados e expressões do Agent controláveis por código
41
+ - Feedback para waiting, success, failure, warning, review, blocked e system error
42
+ - Suporte a movimento reduzido
43
+ - Comportamento de sono configurável
44
+ - Arredondamento da cabeça ajustável
45
+ - Pisca de status opcional na antena
46
+ - Declarações TypeScript incluídas
47
+
48
+ ## Instalação
49
+
50
+ ```bash
51
+ npm install agent-robot-avatar
52
+ ```
53
+
54
+ ```js
55
+ import 'agent-robot-avatar';
56
+ ```
57
+
58
+ Também é possível carregar diretamente o código-fonte do repositório:
59
+
60
+ ```html
61
+ <script type="module" src="./agent-robot-avatar.js"></script>
62
+ ```
63
+
64
+ Depois, adicione o componente:
65
+
66
+ ```html
67
+ <agent-robot-avatar id="avatar"></agent-robot-avatar>
68
+ ```
69
+
70
+ Nenhum código de inicialização é necessário. O avatar entra automaticamente no estado idle padrão.
71
+
72
+ ## Uso básico
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
+ Ações disponíveis:
85
+
86
+ `idle` · `bored` · `waiting` · `waiting-wrap` · `input` · `send` · `success` · `failure` · `warning` · `inspect` · `blocked` · `error` · `surprise` · `love` · `random` · `sleep` · `wake`
87
+
88
+ `failure` representa uma tarefa concluída sem sucesso; `error` é reservado para falhas de conexão, serviço ou sistema.
89
+
90
+ `love` expressa carinho ou gratidão: os dois olhos se inclinam até formar um único coração, batem três vezes e depois voltam ao normal.
91
+
92
+ `random` reproduz um giro de caça-níqueis: cada olho rola sobre um tambor; depois o olho esquerdo desacelera, quica e para, seguido do direito. `slot` é um alias.
93
+
94
+ Um fluxo típico de solicitação de Agent:
95
+
96
+ ```js
97
+ avatar.startWaiting();
98
+
99
+ // Segunda espera: os olhos saem por um lado e voltam pelo outro.
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
+ ## Opções comuns
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
+ | Atributo | Uso |
123
+ | --- | --- |
124
+ | `size` | Tamanho do avatar em pixels |
125
+ | `color` | Cor principal do avatar |
126
+ | `auto-sleep` | Tempo de inatividade antes do sono automático; `0` desativa |
127
+ | `wake-on` | Política de despertar automático: `activity`, `interaction` ou `manual` |
128
+ | `motion` | Política de movimento: `auto`, `reduce` ou `full` |
129
+ | `press-squeeze` | Pressione o centro para comprimir; `false` desativa |
130
+ | `antenna-drag` | Arraste e retorno elástico da antena com reação de raiva; `false` desativa |
131
+
132
+ Controles comuns em tempo de execução:
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
+ Manter o centro pressionado inicia a compressão. Ao mover mais de 4 pixels CSS, o mesmo gesto passa ao arraste de cabeça existente. A antena usa o mesmo limite de distância e termina com a reação de raiva existente.
143
+
144
+ ## Eventos e integração
145
+
146
+ O componente emite `face-state` para mudanças de estado visual e `action-state` para mudanças semânticas no ciclo de vida das ações.
147
+
148
+ Para integrações com a aplicação host e textos de status acessíveis, prefira `action-state`. Veja [`examples/accessibility.html`](../examples/accessibility.html) para um exemplo executável do ciclo de vida de uma solicitação.
149
+
150
+ Um exemplo mínimo de integração está disponível em [`examples/basic.html`](../examples/basic.html).
151
+
152
+ ## Compatibilidade
153
+
154
+ Projetado para navegadores modernos com suporte a ES Modules, Custom Elements, SVG, Pointer Events, Web Animations API, `IntersectionObserver`, `ResizeObserver` e `matchMedia`.
155
+
156
+ Os testes automatizados cobrem Chromium, Firefox e WebKit.
157
+
158
+ ## Contribuindo
159
+
160
+ Issues e Pull Requests são bem-vindos. Consulte [`CONTRIBUTING.md`](../CONTRIBUTING.md) antes de enviar alterações.
161
+
162
+ ## Status do projeto
163
+
164
+ **Versão pública atual: v0.5.2**
165
+
166
+ A API pública é mantida deliberadamente compacta enquanto o projeto evolui em direção a um futuro compromisso de estabilidade `1.0.0`.
167
+
168
+ Agent Robot Avatar é desenvolvido de forma independente e não é afiliado, endossado nem representa qualquer plataforma ou marca de IA.
169
+
170
+ ## Design do personagem e identidade visual
171
+
172
+ O personagem Agent Robot Avatar, incluindo sua aparência robótica e identidade visual, é um design original da CX ArtLab.
173
+
174
+ A licença MIT se aplica ao software e ao código-fonte. Ela permite usar, modificar e distribuir o avatar como parte de aplicações, mas não transfere a propriedade do nome Agent Robot Avatar, da identidade do personagem ou de sua identidade visual, nem concede o direito de apresentá-los como personagem original ou marca independente de outra parte.
175
+
176
+ Os nomes de produtos de terceiros mencionados neste projeto servem apenas para descrever possíveis casos de uso e não indicam afiliação ou endosso.
177
+
178
+ ## Licença
179
+
180
+ MIT License. Consulte [`LICENSE`](../LICENSE).
181
+
182
+ ---
183
+
184
+ Se este projeto for útil para você, você pode me pagar um café.
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>
@@ -0,0 +1,186 @@
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
+ ![Version](https://img.shields.io/badge/version-v0.5.2-111111?style=flat-square) [![License](https://img.shields.io/badge/license-MIT-0A7EA4?style=flat-square)](../LICENSE) [![CI](https://github.com/CX-ArtLab/agent-robot-avatar/actions/workflows/validate.yml/badge.svg?branch=main)](https://github.com/CX-ArtLab/agent-robot-avatar/actions/workflows/validate.yml) [![Ko-fi](https://img.shields.io/badge/Ko--fi-Support-FF5E5B?style=flat-square&logo=ko-fi&logoColor=white)](https://ko-fi.com/P0E625WIOI)
10
+
11
+ ![Vanilla JavaScript](https://img.shields.io/badge/Vanilla-JavaScript-F7DF1E?style=flat-square&logo=javascript&logoColor=000) ![Web Component](https://img.shields.io/badge/Web-Native%20Component-5A67D8?style=flat-square) ![SVG](https://img.shields.io/badge/Rendering-SVG-FFB13B?style=flat-square&logo=svg&logoColor=000) ![Zero Dependencies](https://img.shields.io/badge/Dependencies-0-2EA44F?style=flat-square)
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>