narrator-avatar 1.0.3 → 1.0.4
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 +32 -6
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -18,7 +18,7 @@ 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)
|
|
21
|
+
- [Using with Vite](#using-with-vite-dev-and-production)
|
|
22
22
|
- [Props](#props)
|
|
23
23
|
- [Ref API](#ref-api)
|
|
24
24
|
- [Environment variables](#environment-variables)
|
|
@@ -33,7 +33,7 @@ npm install narrator-avatar
|
|
|
33
33
|
|
|
34
34
|
Peer dependencies (React 18+) and `@met4citizen/talkinghead` are installed automatically.
|
|
35
35
|
|
|
36
|
-
**Using Vite?**
|
|
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).
|
|
37
37
|
|
|
38
38
|
## Usage
|
|
39
39
|
|
|
@@ -71,11 +71,13 @@ function MyPage() {
|
|
|
71
71
|
}
|
|
72
72
|
```
|
|
73
73
|
|
|
74
|
-
## Using with Vite
|
|
74
|
+
## Using with Vite (dev and production)
|
|
75
75
|
|
|
76
|
-
**Required
|
|
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
77
|
|
|
78
|
-
|
|
78
|
+
Do **all three** of the following.
|
|
79
|
+
|
|
80
|
+
### 1. Vite config
|
|
79
81
|
|
|
80
82
|
```js
|
|
81
83
|
// vite.config.js or vite.config.ts
|
|
@@ -85,10 +87,34 @@ import react from '@vitejs/plugin-react';
|
|
|
85
87
|
export default defineConfig({
|
|
86
88
|
plugins: [react()],
|
|
87
89
|
optimizeDeps: { exclude: ['@met4citizen/talkinghead'] },
|
|
90
|
+
build: {
|
|
91
|
+
rollupOptions: {
|
|
92
|
+
external: ['@met4citizen/talkinghead', 'three'],
|
|
93
|
+
},
|
|
94
|
+
},
|
|
88
95
|
});
|
|
89
96
|
```
|
|
90
97
|
|
|
91
|
-
|
|
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.
|
|
92
118
|
|
|
93
119
|
## Props
|
|
94
120
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "narrator-avatar",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"description": "React component for 3D talking avatars with lip-sync, Deepgram/Google TTS, content-aware gestures, and pause/resume",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/narrator-avatar.umd.cjs",
|