agent-robot-avatar 0.6.0 → 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 +11 -1
- package/README.md +84 -19
- package/agent-robot-avatar-lite.js +44 -0
- package/agent-robot-avatar.js +2 -1
- package/index.d.ts +64 -0
- package/lite.d.ts +5 -0
- package/package.json +11 -6
- package/src/agent-robot-avatar-core.js +5 -2
- package/src/agent-robot-avatar-runtime.js +4 -1
- 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/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 -185
- package/docs/README.es.md +0 -185
- package/docs/README.fr.md +0 -185
- package/docs/README.ja.md +0 -185
- package/docs/README.ko.md +0 -185
- package/docs/README.pt.md +0 -185
- package/docs/README.ru.md +0 -185
- package/docs/README.zh-CN.md +0 -202
- package/docs/README.zh-TW.md +0 -185
package/docs/README.ja.md
DELETED
|
@@ -1,185 +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
|
-
AI Agent やインタラクティブなアプリケーション向けの、軽量で表情豊かなロボットアバター Web Component です。
|
|
14
|
-
|
|
15
|
-
AI アシスタント、Agent インターフェース、デスクトップコンパニオン、バーチャルペット、デジタルマスコット、チャットボットのアバターなど、さまざまなインタラクティブキャラクター体験に利用できます。
|
|
16
|
-
|
|
17
|
-
ChatGPT、Claude、Codex、Cursor、Grok Bot、Gemini CLI、OpenCode に似た製品や体験を含む、AI アシスタントおよび Agent インターフェースに適しています。
|
|
18
|
-
|
|
19
|
-
SVG と Vanilla 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
|
-
## ライブデモ
|
|
28
|
-
|
|
29
|
-
[インタラクティブデモを開く](https://cx-artlab.github.io/agent-robot-avatar/?lang=ja)
|
|
30
|
-
|
|
31
|
-
## 特長
|
|
32
|
-
|
|
33
|
-
- ネイティブ Web Component
|
|
34
|
-
- SVG レンダリング + Vanilla JavaScript
|
|
35
|
-
- ランタイム依存なし
|
|
36
|
-
- 自動まばたきと控えめな idle 動作
|
|
37
|
-
- ポインター追従する目と慣性のある頭部モーション
|
|
38
|
-
- ゼリー風の局所ドラッグ変形と弾性復帰
|
|
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('wary');
|
|
79
|
-
avatar.play('refuse');
|
|
80
|
-
|
|
81
|
-
avatar.reset();
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
利用可能なアクション:
|
|
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
|
-
アクション名はアバターの見た目を表します。`refuse` は首を横に振る動きで、Agent が実行できない・しない依頼に使います。`failure` はタスクや接続がうまくいかなかった場合、`wary` は首をかしげて上下に見定める警戒の目つきで、確認が必要な操作に使います。0.5 の旧名(`send`、`warning`、`error`、`blocked` など)は 1.0 まで使えますが、コンソールに改名の通知が出ます。[移行表](../CHANGELOG.md#upgrading-from-05x)を参照してください。
|
|
89
|
-
|
|
90
|
-
`love` は好意や感謝を表します。両目が寄り合って一つのハートになり、3 回脈打ってから元に戻ります。
|
|
91
|
-
|
|
92
|
-
`random` はスロットマシンの回転を再生します。各目がドラム上を転がり、まず左目が減速してバウンドしながら止まり、続いて右目が止まります。`slot` はエイリアスです。
|
|
93
|
-
|
|
94
|
-
典型的な Agent リクエストの流れ:
|
|
95
|
-
|
|
96
|
-
```js
|
|
97
|
-
avatar.startWaiting();
|
|
98
|
-
|
|
99
|
-
// 2 つ目の待機動作:目が片側へ抜け、反対側から戻ります。
|
|
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
|
-
## よく使うオプション
|
|
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` | アバターのサイズ(px) |
|
|
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.setPressSqueeze(true);
|
|
138
|
-
avatar.setAntennaDrag(true);
|
|
139
|
-
```
|
|
140
|
-
|
|
141
|
-
中央の長押しで圧縮が始まり、4 CSS ピクセルを超えて動かすと、同じポインタージェスチャーが従来の頭部ドラッグへ切り替わります。アンテナには頭部ドラッグと同じ距離制限が適用され、復帰後に従来の怒り反応が続きます。
|
|
142
|
-
|
|
143
|
-
## イベントと統合
|
|
144
|
-
|
|
145
|
-
コンポーネントは視覚状態の変化を `face-state`、意味的なアクションライフサイクルの変化を `action-state` で通知します。
|
|
146
|
-
|
|
147
|
-
ホストアプリとの統合やアクセシビリティ向けステータステキストには `action-state` を推奨します。実行可能なリクエストライフサイクル例は [`examples/accessibility.html`](../examples/accessibility.html) を参照してください。
|
|
148
|
-
|
|
149
|
-
最小構成の統合例は [`examples/basic.html`](../examples/basic.html) にあります。
|
|
150
|
-
|
|
151
|
-
## 互換性
|
|
152
|
-
|
|
153
|
-
ES Modules、Custom Elements、SVG、Pointer Events、Web Animations API、`IntersectionObserver`、`ResizeObserver`、`matchMedia` をサポートするモダンブラウザ向けです。
|
|
154
|
-
|
|
155
|
-
自動ブラウザテストは Chromium、Firefox、WebKit を対象にしています。
|
|
156
|
-
|
|
157
|
-
## コントリビューション
|
|
158
|
-
|
|
159
|
-
Issue と Pull Request を歓迎します。変更を送る前に [`CONTRIBUTING.md`](../CONTRIBUTING.md) を確認してください。
|
|
160
|
-
|
|
161
|
-
## プロジェクト状況
|
|
162
|
-
|
|
163
|
-
**現在の公開バージョン:v0.6.0**
|
|
164
|
-
|
|
165
|
-
公開 API は、将来の `1.0.0` における安定性コミットメントに向けて、意図的にコンパクトなまま慎重に進化させています。
|
|
166
|
-
|
|
167
|
-
Agent Robot Avatar は独立して開発されたプロジェクトであり、いかなる AI プラットフォームやブランドとも提携・承認・公式な関係はありません。
|
|
168
|
-
|
|
169
|
-
## キャラクターデザインとビジュアルアイデンティティ
|
|
170
|
-
|
|
171
|
-
Agent Robot Avatar のキャラクター、ロボットの外観、ビジュアルアイデンティティは CX ArtLab によるオリジナルデザインです。
|
|
172
|
-
|
|
173
|
-
MIT License はソフトウェアとソースコードに適用されます。アプリケーションの一部としてアバターを使用・変更・配布できますが、Agent Robot Avatar の名称、キャラクターアイデンティティ、ビジュアルアイデンティティの所有権を移転するものではなく、他者のオリジナルキャラクターや独立ブランドとして提示する権利を付与するものでもありません。
|
|
174
|
-
|
|
175
|
-
本プロジェクト内で言及する第三者製品名は、想定される使用例を説明するためのものであり、提携や承認を示すものではありません。
|
|
176
|
-
|
|
177
|
-
## ライセンス
|
|
178
|
-
|
|
179
|
-
MIT License。詳しくは [`LICENSE`](../LICENSE) を参照してください。
|
|
180
|
-
|
|
181
|
-
---
|
|
182
|
-
|
|
183
|
-
このプロジェクトが役に立ったら、コーヒーを一杯ごちそうしていただけます。
|
|
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>
|
package/docs/README.ko.md
DELETED
|
@@ -1,185 +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
|
-
AI Agent와 인터랙티브 애플리케이션을 위한 가볍고 표현력 있는 로봇 아바타 Web Component입니다.
|
|
14
|
-
|
|
15
|
-
AI 어시스턴트, Agent 인터페이스, 데스크톱 컴패니언, 가상 펫, 디지털 마스코트, 챗봇 아바타 등 다양한 인터랙티브 캐릭터 경험에 사용할 수 있습니다.
|
|
16
|
-
|
|
17
|
-
ChatGPT, Claude, Codex, Cursor, Grok Bot, Gemini CLI, OpenCode와 유사한 제품 및 경험을 포함한 AI 어시스턴트와 Agent 인터페이스에 적합합니다.
|
|
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
|
-
## 라이브 데모
|
|
28
|
-
|
|
29
|
-
[인터랙티브 데모 열기](https://cx-artlab.github.io/agent-robot-avatar/?lang=ko)
|
|
30
|
-
|
|
31
|
-
## 주요 특징
|
|
32
|
-
|
|
33
|
-
- 네이티브 Web Component
|
|
34
|
-
- SVG 렌더링 + 순수 JavaScript
|
|
35
|
-
- 런타임 의존성 0
|
|
36
|
-
- 자동 눈 깜빡임과 은은한 idle 동작
|
|
37
|
-
- 포인터를 따라가는 눈과 관성 있는 머리 움직임
|
|
38
|
-
- 젤리 스타일의 국소 드래그 변형과 탄성 복귀
|
|
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('wary');
|
|
79
|
-
avatar.play('refuse');
|
|
80
|
-
|
|
81
|
-
avatar.reset();
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
사용 가능한 액션:
|
|
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
|
-
액션 이름은 아바타의 모습을 나타냅니다. `refuse`는 고개를 젓는 동작으로 Agent가 수행할 수 없거나 하지 않을 요청에 사용하고, `failure`는 작업이나 연결이 성공하지 못한 경우, `wary`는 고개를 돌려 위아래로 살피는 경계의 눈빛으로 확인이 필요한 작업에 사용합니다. 0.5의 이전 이름(`send`, `warning`, `error`, `blocked` 등)은 1.0까지 동작하지만 콘솔에 이름 변경 안내가 표시됩니다. [업그레이드 표](../CHANGELOG.md#upgrading-from-05x)를 참고하세요.
|
|
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('failure');
|
|
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` | 아바타 크기(px) |
|
|
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.setPressSqueeze(true);
|
|
138
|
-
avatar.setAntennaDrag(true);
|
|
139
|
-
```
|
|
140
|
-
|
|
141
|
-
중앙을 길게 누르면 압축이 시작됩니다. 4 CSS 픽셀을 넘게 움직이면 같은 포인터 제스처가 기존 머리 드래그로 전환됩니다. 안테나는 머리 드래그와 같은 거리 제한을 사용하며 복귀 후 기존 화난 반응이 이어집니다.
|
|
142
|
-
|
|
143
|
-
## 이벤트와 통합
|
|
144
|
-
|
|
145
|
-
컴포넌트는 시각 상태 변경에 `face-state`, 의미 기반 액션 라이프사이클 변경에 `action-state`를 발생시킵니다.
|
|
146
|
-
|
|
147
|
-
호스트 애플리케이션 통합과 접근성 상태 텍스트에는 `action-state` 사용을 권장합니다. 실행 가능한 요청 라이프사이클 예시는 [`examples/accessibility.html`](../examples/accessibility.html)을 참고하세요.
|
|
148
|
-
|
|
149
|
-
최소 통합 예시는 [`examples/basic.html`](../examples/basic.html)에 있습니다.
|
|
150
|
-
|
|
151
|
-
## 호환성
|
|
152
|
-
|
|
153
|
-
ES Modules, Custom Elements, SVG, Pointer Events, Web Animations API, `IntersectionObserver`, `ResizeObserver`, `matchMedia`를 지원하는 최신 브라우저를 대상으로 합니다.
|
|
154
|
-
|
|
155
|
-
자동 브라우저 테스트는 Chromium, Firefox, WebKit을 포함합니다.
|
|
156
|
-
|
|
157
|
-
## 기여
|
|
158
|
-
|
|
159
|
-
Issue와 Pull Request를 환영합니다. 변경 사항을 제출하기 전에 [`CONTRIBUTING.md`](../CONTRIBUTING.md)를 확인하세요.
|
|
160
|
-
|
|
161
|
-
## 프로젝트 상태
|
|
162
|
-
|
|
163
|
-
**현재 공개 버전: v0.6.0**
|
|
164
|
-
|
|
165
|
-
공개 API는 향후 `1.0.0` 안정성 약속을 향해 발전하는 동안 의도적으로 간결하게 유지합니다.
|
|
166
|
-
|
|
167
|
-
Agent Robot Avatar는 독립적으로 개발되며 어떤 AI 플랫폼이나 브랜드와도 제휴, 보증 또는 공식적인 관계가 없습니다.
|
|
168
|
-
|
|
169
|
-
## 캐릭터 디자인과 비주얼 아이덴티티
|
|
170
|
-
|
|
171
|
-
Agent Robot Avatar 캐릭터의 로봇 외형과 비주얼 아이덴티티는 CX ArtLab의 오리지널 디자인입니다.
|
|
172
|
-
|
|
173
|
-
MIT License는 소프트웨어와 소스 코드에 적용됩니다. 애플리케이션의 일부로 아바타를 사용·수정·배포할 수 있지만 Agent Robot Avatar의 이름, 캐릭터 정체성 또는 비주얼 아이덴티티의 소유권을 이전하지 않으며, 이를 다른 주체의 오리지널 캐릭터나 독립 브랜드로 표시할 권리를 부여하지 않습니다.
|
|
174
|
-
|
|
175
|
-
이 프로젝트에 언급된 제3자 제품명은 가능한 사용 사례를 설명하기 위한 것이며 제휴나 보증을 의미하지 않습니다.
|
|
176
|
-
|
|
177
|
-
## 라이선스
|
|
178
|
-
|
|
179
|
-
MIT License. 자세한 내용은 [`LICENSE`](../LICENSE)를 참고하세요.
|
|
180
|
-
|
|
181
|
-
---
|
|
182
|
-
|
|
183
|
-
이 프로젝트가 유용하다면 커피 한 잔을 사 주셔도 좋습니다.
|
|
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>
|
package/docs/README.pt.md
DELETED
|
@@ -1,185 +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
|
-
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('wary');
|
|
79
|
-
avatar.play('refuse');
|
|
80
|
-
|
|
81
|
-
avatar.reset();
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
Ações disponíveis:
|
|
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
|
-
Os nomes das ações descrevem o que o avatar faz. `refuse` balança a cabeça, para um pedido que o Agent não pode ou não vai realizar; `failure` é para uma tarefa ou conexão que não deu certo; `wary` vira a cabeça e olha de cima a baixo com desconfiança, para uma ação que exige confirmação. Os nomes da 0.5 (`send`, `warning`, `error`, `blocked` e outros) continuam funcionando com um aviso no console até a 1.0; veja a [tabela de atualização](../CHANGELOG.md#upgrading-from-05x).
|
|
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('failure');
|
|
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.setPressSqueeze(true);
|
|
138
|
-
avatar.setAntennaDrag(true);
|
|
139
|
-
```
|
|
140
|
-
|
|
141
|
-
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.
|
|
142
|
-
|
|
143
|
-
## Eventos e integração
|
|
144
|
-
|
|
145
|
-
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.
|
|
146
|
-
|
|
147
|
-
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.
|
|
148
|
-
|
|
149
|
-
Um exemplo mínimo de integração está disponível em [`examples/basic.html`](../examples/basic.html).
|
|
150
|
-
|
|
151
|
-
## Compatibilidade
|
|
152
|
-
|
|
153
|
-
Projetado para navegadores modernos com suporte a ES Modules, Custom Elements, SVG, Pointer Events, Web Animations API, `IntersectionObserver`, `ResizeObserver` e `matchMedia`.
|
|
154
|
-
|
|
155
|
-
Os testes automatizados cobrem Chromium, Firefox e WebKit.
|
|
156
|
-
|
|
157
|
-
## Contribuindo
|
|
158
|
-
|
|
159
|
-
Issues e Pull Requests são bem-vindos. Consulte [`CONTRIBUTING.md`](../CONTRIBUTING.md) antes de enviar alterações.
|
|
160
|
-
|
|
161
|
-
## Status do projeto
|
|
162
|
-
|
|
163
|
-
**Versão pública atual: v0.6.0**
|
|
164
|
-
|
|
165
|
-
A API pública é mantida deliberadamente compacta enquanto o projeto evolui em direção a um futuro compromisso de estabilidade `1.0.0`.
|
|
166
|
-
|
|
167
|
-
Agent Robot Avatar é desenvolvido de forma independente e não é afiliado, endossado nem representa qualquer plataforma ou marca de IA.
|
|
168
|
-
|
|
169
|
-
## Design do personagem e identidade visual
|
|
170
|
-
|
|
171
|
-
O personagem Agent Robot Avatar, incluindo sua aparência robótica e identidade visual, é um design original da CX ArtLab.
|
|
172
|
-
|
|
173
|
-
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.
|
|
174
|
-
|
|
175
|
-
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.
|
|
176
|
-
|
|
177
|
-
## Licença
|
|
178
|
-
|
|
179
|
-
MIT License. Consulte [`LICENSE`](../LICENSE).
|
|
180
|
-
|
|
181
|
-
---
|
|
182
|
-
|
|
183
|
-
Se este projeto for útil para você, você pode me pagar um café.
|
|
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>
|