met4citizen/TalkingHead

Talking Head (3D): A JavaScript class for real-time lip-sync using full-body 3D avatars.

TalkingHead (3D) – 개요

TalkingHead는 3D 아바타(Mixamo 호환 리깅이 포함된 GLB 모델)를 웹 페이지에 배치하고 실시간으로 말하기, 제스처, 얼굴 표정을 보여줄 수 있게 해주는 JavaScript 라이브러리입니다. 아바타는 음성에 맞춰 립싱크를 할 수 있고, 이모지를 얼굴 포즈로 표시할 수 있으며, 다양한 AI 서비스(OpenAI, Google TTS, Whisper 등)에 의해 제어될 수 있습니다. 이 라이브러리는 렌더링을 위해 Three.js를 기반으로 구축되었으며 브라우저에서 완전히 작동합니다. CDN에서 로드하거나 npm을 통해 설치할 수 있습니다.

핵심 기능

기능	설명
실시간 립싱크	텍스트 음성 변환(TTS) 서비스(기본값은 Google Cloud TTS) 또는 `HeadAudio`와 같은 오디오 기반 모듈에서 viseme를 생성합니다. 기본적으로 여러 언어(en, fi, de, fr, lt)를 지원하며 사용자 정의 모듈로 확장할 수 있습니다.
전신 아바타	Mixamo 리깅, ARKit/Oculus 블렌드 셰이프 정의, 머리카락 및 의류를 위한 다이내믹 본 물리 엔진이 포함된 GLB 파일을 지원합니다.
이모지-표정 매핑	내장된 이모지 사전을 통해 표준 이모지를 얼굴 블렌드 셰이프 값으로 변환합니다.
플러그형 TTS 백엔드	Google Cloud TTS, ElevenLabs, Azure Speech 또는 단어 단위 타임스탬프나 viseme ID를 반환할 수 있는 모든 서비스와 함께 작동합니다.
LLM 기반 제어	OpenAI 함수 호출(function calling)을 사용하여 아바타의 제스처와 음성을 제어하는 예시 데모를 제공합니다.
WebRTC 지원	관련 프로젝트인 `HeadAudio`는 WebRTC를 통한 음성 대 음성 통신을 위한 저지연 오디오 워크렛을 제공합니다.
애드온 생태계	관련 모듈로 `HeadTTS`(브라우저 전용 신경망 TTS), `HeadAudio`(오디오 기반 viseme 감지), `MotionEngine`(LLM 시맨틱 제어가 가능한 고급 제스처 라이브러리)이 있습니다.
구성 가능한 렌더링	카메라, 조명 및 아바타 수준의 옵션이 방대한 옵션 객체를 통해 제공됩니다. 회전, 팬, 줌 활성화/비활성화, 분위기 변경 등을 설정할 수 있습니다.

주요 사용 사례 (README 참조)

인간-AI 그룹 대화 – 다중 사용자 채팅 시뮬레이션을 위한 DialogLab 툴킷에서 사용됩니다.
WebRTC를 통한 실시간 AI 음성 – HeadAudio 데모는 립싱크가 포함된 음성 대 음성 스트리밍을 제공합니다.
화상 회의 아바타 – Olivia라는 이름의 아바타가 전사(transcription) 및 AI 생성 답변 기능을 추가하는 데모.
완전 브라우저 기반 AI 어시스턴트 – EdgeSpeaker 사이트는 WebGPU를 사용하여 모든 것(LLM, TTS, 립싱크)을 로컬에서 실행하며 외부 API 키가 필요하지 않습니다.
인터랙티브 3D 경험 – 재활용 상담사, Twitch 어드벤처 월드, 양자 물리학 교육, AI 기반 데이팅 프로필 아바타 등.

시작하기 (빠른 시작)

라이브러리 포함 – npm (npm i @met4citizen/talkinghead) 또는 CDN에서 직접 가져옵니다:

<script type="importmap">
{"imports":{"talkinghead":"https://cdn.jsdelivr.net/gh/met4citizen/TalkingHead@1.7/modules/talkinghead.mjs"}}
</script>

TalkingHead 인스턴스 생성:

import { TalkingHead } from "talkinghead";
const head = new TalkingHead(document.getElementById('avatar'), {
  ttsEndpoint: "/gtts/",   // Google TTS 프록시
  jwtGet: myJwtFetcher,      // 선택 사항인 SSO 토큰 가져오기
  lipsyncModules: ["en","fi"],
});

아바타 로드 (적절한 리깅이 포함된 GLB 파일):

await head.showAvatar({
  url: "./avatars/avaturn.glb",
  body: "F",
  avatarMood: "neutral",
  ttsLang: "en-GB",
  lipsyncLang: "en",
});

말하게 하기:
```
head.speakText("Hello, world!");
```

README에는 Google TTS API 키만 있으면 작동하는 최소한의 HTML 예제도 제공됩니다.

확장 / 커스텀

자체 TTS 추가 – 단어 단위 타임스탬프 또는 viseme ID를 반환하는 서비스를 구현하고 ttsEndpoint를 지정합니다(또는 직접 Google 호출을 위한 ttsApikey 단축키를 사용합니다).
새로운 언어 – 립싱크 언어 모듈을 생성하고 lipsyncModules에 추가합니다.
다이내믹 본 및 물리 엔진 – 아바타 옵션에서 modelDynamicBones를 정의합니다 (부록 E 참조).
제스처 라이브러리 – 시맨틱 LLM 기반 제스처를 위해 MotionEngine을 연결합니다.
아바타 전용 모드 – avatarOnly: true로 설정하면 기존 Three.js 씬에 통합하기 위한 armature 객체만 가져옵니다.

누가 사용할까요?

연구자 – Embodied AI 에이전트, 대화형 UI 연구 또는 멀티모달 상호작용 실험을 구축하는 연구자.
개발자 – 가상 발표자, AI 기반 고객 서비스 아바타 또는 게임 스타일의 NPC를 만드는 개발자.
교육자 / 취미가 – 무거운 백엔드 인프라를 다루지 않고 웹 데모에 말하는 3D 캐릭터를 빠르게 추가하고 싶은 분.

라이선스 및 가용성

이 라이브러리는 오픈 소스 라이선스로 출시되었습니다 (README에는 GitHub 릴리스 및 npm 패키지 링크가 있습니다). 모든 코드, 데모 비디오 및 관련 모듈은 공개적으로 접근 가능합니다.

요약: TalkingHead는 그래픽, 음성 합성 및 LLM 제어를 연결하는 기능이 풍부한 브라우저 기반 3D 아바타 프레임워크로, 인터랙티브한 AI 기반 가상 캐릭터를 구축하려는 모든 사람에게 실용적인 도구입니다.