Index.html

[vpriyanshu671]

the major issues not understanding the code , like there should be separate files and how one can use it , alot of function depends on each other where not clear mentioning how everything works and Worst part is JWN Tokens i means why it is so bad

[met4citizen]

You are correct. The example app has expanded significantly, feature-by-feature and, at some point, should be divided into several smaller examples.

However, the index.html is just an example. It was never meant to be used as a basis of your own app, so you can just skip it. Instead, you can/should simply integrate the TalkingHead class and the two lip-sync modules found in the modules directory into your own project by following the instructions outlined in the Readme.

It's good also to note that the TalkingHead class doesn't require the use of JSON Web Tokens. You always have the option to directly use the Google TTS endpoint with your API key. However, JWT is a good choice, I think, when you prefer not to expose API keys in your client-side code and opt for Single-sign-on functionality.

[vpriyanshu671]

Hey, There is no clear mentioning so, how can i extract only the avatar from your code ? basically i create my own API for response so, i want the part from your code to extract the avatar and use it so, can u provided details steps

[met4citizen]

All you need are the three JavaScript modules (.mjs files) from the ./modules/ directory along with some Ready Player Me full-body avatar 3D model (.glb file). For detailed steps how to instantiate the TalkingHead class, show the avatar, and make it speak, simply follow the README chapter titled "Talking Head class".

[SPCMASTER]

THE AVATAR DOES NOT APPEAR ON THE MAIN PAGE

[vpriyanshu671]

SPCMASTER can u tell me are using above Talkinghead or my updated version ?

[met4citizen]

THE AVATAR DOES NOT APPEAR ON THE MAIN PAGE

There are several ways to set up and use the TalkingHead class, so you need to be more specific about what you were trying to do so that we can help you.

I suggest you start with the new minimal code example (if you haven't already). It imports all the necessary modules from a CDN, so you don't have to install any modules locally.

Please note that the 3D model is a large file, so the first time you open the page, you need to give it some time to load.

[SPCMASTER]

@vpriyanshu671 The new version

[SPCMASTER]

@met4citizen The avatar cannot speak when writing text

[met4citizen]

By default, the TalkingHead class uses Google Cloud TTS. If you are using the minimal.html example, there is a marked place in the HTML file where you can put your Google TTS API key.

Without the text-to-speech service and the API key, the avatar cannot speak. Google TTS is a paid service, but Google provides up to 4 million characters for free each month, typically sufficient for personal use.

Note that if at some point you plan to create an app for public use, you should not include your API key in any client-side code. In such cases, I recommend setting up your own TTS proxy. For more information, please refer to the README.