narrator-avatar 1.0.4 → 1.0.5
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/README.md +2 -50
- package/dist/narrator-avatar.js +34734 -371
- package/dist/narrator-avatar.js.map +1 -1
- package/dist/narrator-avatar.umd.cjs +4066 -4
- package/dist/narrator-avatar.umd.cjs.map +1 -1
- package/package.json +6 -5
package/README.md
CHANGED
|
@@ -8,7 +8,7 @@ React component for 3D talking avatars with lip-sync, Deepgram or Google TTS, co
|
|
|
8
8
|
## Features
|
|
9
9
|
|
|
10
10
|
- **3D avatars** – Ready Player Me–compatible GLB models (full-body)
|
|
11
|
-
- **Lip-sync** – Word-level sync with Deepgram or Google TTS
|
|
11
|
+
- **Lip-sync** – Word-level sync with Deepgram or Google TTS (English bundled; other languages need extra setup)
|
|
12
12
|
- **TTS** – Deepgram (streaming) or Google Cloud Text-to-Speech
|
|
13
13
|
- **Gestures** – Content-aware hand gestures using all 8 built-in: handup, index, ok, thumbup, thumbdown, side, shrug, namaste
|
|
14
14
|
- **Playback** – Speak, Pause, Resume, Stop (phrase-level in accurate mode)
|
|
@@ -18,7 +18,6 @@ React component for 3D talking avatars with lip-sync, Deepgram or Google TTS, co
|
|
|
18
18
|
|
|
19
19
|
- [Install](#install)
|
|
20
20
|
- [Usage](#usage)
|
|
21
|
-
- [Using with Vite](#using-with-vite-dev-and-production)
|
|
22
21
|
- [Props](#props)
|
|
23
22
|
- [Ref API](#ref-api)
|
|
24
23
|
- [Environment variables](#environment-variables)
|
|
@@ -31,9 +30,7 @@ React component for 3D talking avatars with lip-sync, Deepgram or Google TTS, co
|
|
|
31
30
|
npm install narrator-avatar
|
|
32
31
|
```
|
|
33
32
|
|
|
34
|
-
Peer dependencies (React 18+)
|
|
35
|
-
|
|
36
|
-
**Using Vite?** You must add the Vite config and an import map or the avatar will fail in both dev and production. See [Using with Vite](#using-with-vite-dev-and-production).
|
|
33
|
+
Peer dependencies (React 18+) are installed automatically. The package bundles TalkingHead, Three.js (0.151), and English lip-sync—**no import maps or Vite config required.**
|
|
37
34
|
|
|
38
35
|
## Usage
|
|
39
36
|
|
|
@@ -71,51 +68,6 @@ function MyPage() {
|
|
|
71
68
|
}
|
|
72
69
|
```
|
|
73
70
|
|
|
74
|
-
## Using with Vite (dev and production)
|
|
75
|
-
|
|
76
|
-
**Required.** The underlying `@met4citizen/talkinghead` package loads lip-sync language modules via dynamic `import()`. If Vite bundles or pre-bundles it, those imports break and you get a 404 on `lipsync-en.mjs` and **`Cannot read properties of undefined (reading 'preProcessText')`** in both dev and production.
|
|
77
|
-
|
|
78
|
-
Do **all three** of the following.
|
|
79
|
-
|
|
80
|
-
### 1. Vite config
|
|
81
|
-
|
|
82
|
-
```js
|
|
83
|
-
// vite.config.js or vite.config.ts
|
|
84
|
-
import { defineConfig } from 'vite';
|
|
85
|
-
import react from '@vitejs/plugin-react';
|
|
86
|
-
|
|
87
|
-
export default defineConfig({
|
|
88
|
-
plugins: [react()],
|
|
89
|
-
optimizeDeps: { exclude: ['@met4citizen/talkinghead'] },
|
|
90
|
-
build: {
|
|
91
|
-
rollupOptions: {
|
|
92
|
-
external: ['@met4citizen/talkinghead', 'three'],
|
|
93
|
-
},
|
|
94
|
-
},
|
|
95
|
-
});
|
|
96
|
-
```
|
|
97
|
-
|
|
98
|
-
### 2. Import map in `index.html`
|
|
99
|
-
|
|
100
|
-
Add this **before** your main script (e.g. before `<script type="module" src="/src/main.jsx">`). It loads talkinghead (and three) from the CDN so the lip-sync modules resolve correctly in production.
|
|
101
|
-
|
|
102
|
-
```html
|
|
103
|
-
<script type="importmap">
|
|
104
|
-
{
|
|
105
|
-
"imports": {
|
|
106
|
-
"@met4citizen/talkinghead": "https://cdn.jsdelivr.net/npm/@met4citizen/talkinghead@1.7.0/modules/talkinghead.mjs",
|
|
107
|
-
"three": "https://cdn.jsdelivr.net/npm/three@0.180.0/build/three.module.js",
|
|
108
|
-
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.180.0/examples/jsm/"
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
</script>
|
|
112
|
-
```
|
|
113
|
-
|
|
114
|
-
### 3. Restart and rebuild
|
|
115
|
-
|
|
116
|
-
- **Dev:** restart the dev server after changing the config.
|
|
117
|
-
- **Production:** run `npm run build` again and redeploy.
|
|
118
|
-
|
|
119
71
|
## Props
|
|
120
72
|
|
|
121
73
|
| Prop | Description |
|