Error: Hydration failed because the initial UI does not match what was rendered on the server.

[SeanBannister]

trafficstars

Brilliant project, thanks for your work on this as I was attempting to do something similar. I'm particularly interested in helping to minimize the delay between responses and possibly improve the virtual character.

I don't usually work with next or react so just wanted to report the following error I received on the first run of next dev (the project still seems to work fine):

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Call Stack
throwOnHydrationMismatch
node_modules\react-dom\cjs\react-dom.development.js (12507:0)
tryToClaimNextHydratableInstance
node_modules\react-dom\cjs\react-dom.development.js (12535:0)
updateHostComponent
node_modules\react-dom\cjs\react-dom.development.js (19902:0)
beginWork
node_modules\react-dom\cjs\react-dom.development.js (21618:0)
HTMLUnknownElement.callCallback
node_modules\react-dom\cjs\react-dom.development.js (4164:0)
Object.invokeGuardedCallbackDev
node_modules\react-dom\cjs\react-dom.development.js (4213:0)
invokeGuardedCallback
node_modules\react-dom\cjs\react-dom.development.js (4277:0)
beginWork$1
node_modules\react-dom\cjs\react-dom.development.js (27451:0)
performUnitOfWork
node_modules\react-dom\cjs\react-dom.development.js (26557:0)
workLoopSync
node_modules\react-dom\cjs\react-dom.development.js (26466:0)
renderRootSync
node_modules\react-dom\cjs\react-dom.development.js (26434:0)
performConcurrentWorkOnRoot
node_modules\react-dom\cjs\react-dom.development.js (25738:0)
workLoop
node_modules\scheduler\cjs\scheduler.development.js (266:0)
flushWork
node_modules\scheduler\cjs\scheduler.development.js (239:0)
MessagePort.performWorkUntilDeadline
node_modules\scheduler\cjs\scheduler.development.js (533:0)

[JavaFXpert]

Thanks Sean. What similar thing were you attempting to do?

I'm new to next and react, and the hydration warning has me puzzled. For now I'm OK with the fact that an optimized production build (npm run build / npm start) suppresses that warning.

Regarding delay, I'm experimenting with various GPT-3 max_tokens values to strike a balance between rich / quick responses. I asked the supplier of the video avatars about reducing the frame rate but they said that quality would suffer.

I do plan on updating the repo soon, adding the ability to ask for current and relative dates/times, and dates/times in various locations, using the four languages supported so far. The main objective for this and upcoming improvements is to provide practice in areas that GPT-3 can't help with (e.g. accessing date/time). Another improvement will be that the AI characters attributes (e.g. favorite foods, friends names) will be more easily customized via generated prompts.

Thanks for reaching out, James Weaver

[SeanBannister]

Thanks for the response. The similar thing I was looking to achieve was talking avatars with GPT-3, there was a part of me that really wanted to integrate with Unreal's Metahuman characters because they're so life like and easy for anyone to create, there's a project already integrating Amazon Polly with Metahumans https://github.com/aws-samples/amazon-polly-metahumans