How kevinxo328/azure-avatar-demo works
Azure Avatar Demo is a browser application for selecting an avatar and interacting through chat or microphone input, with batch-rendered and realtime avatar modes. The routed assistant coordinates configuration, transcription, Azure OpenAI replies, and avatar playback; batch mode submits and polls a job, while realtime mode establishes Speech SDK/WebRTC avatar output. The README documents Azure OpenAI and Avatar integration. Some wiring is inferred only where named calls are explicit; unsampled API implementations and the referenced avatar configuration asset are not represented as repository nodes.
Main entry points: AvatarAssistant.tsx Avatar assistant · realtimeAvatarSlice.ts Realtime avatar state · useBatchAvatar.ts Batch job manager · bg-remove-player.tsx Avatar player
Components 17
Application
- App bootstrap
src/main.tsx - Route selection
src/routes/routes.tsx
Conversation
- Avatar assistant
src/pages/avatar/AvatarAssistant.tsx - Avatar settings
src/components/form/config-form.tsx - Chat display
src/components/chat-messages.tsx - Microphone control
src/components/mic-button.tsx - Audio recorder
src/hooks/useRecoder.ts
Avatar modes
- Batch job manager
src/hooks/useBatchAvatar.ts - Realtime avatar state
src/store/realtimeAvatarSlice.ts - Avatar player
src/components/bg-remove-player.tsx
Azure services
- OpenAI API
src/apis/aoai.ts - Speech API
src/apis/speech.ts - Speech utilities
src/utils/speech-studio.ts
Other components
- User
- Azure OpenAI
- Azure Avatar
- Browser media
Connections 25
- User → App bootstrap: opens app
- App bootstrap → Route selection: mounts routes
- Route selection → Avatar assistant: selects mode
- User → Avatar assistant: chooses avatar
- Avatar assistant → Avatar settings: renders settings
- Avatar assistant → Chat display: supplies messages
- User → Microphone control: starts recording
- Microphone control → Audio recorder: controls capture
- Audio recorder → Browser media: captures audio
- Avatar assistant → OpenAI API: requests transcription
- Avatar assistant → OpenAI API: requests completion
- OpenAI API → Azure OpenAI: sends requests
- Avatar assistant → Speech utilities: transcribes audio
- Speech utilities → Azure Avatar: uses Speech SDK
- Avatar assistant → Batch job manager: starts batch job
- Batch job manager → Speech API: creates and polls
- Speech API → Azure Avatar: calls batch service
- Avatar assistant → Realtime avatar state: connects avatar
- Realtime avatar state → Speech API: gets avatar token
- Realtime avatar state → Speech utilities: creates synthesizer
- Realtime avatar state → Azure Avatar: opens realtime session
- Azure Avatar → Realtime avatar state: streams media
- Realtime avatar state → Avatar player: provides media stream
- Batch job manager → Avatar player: provides batch video
- Avatar player → Browser media: renders video