# kevinxo328/azure-avatar-demo architecture

> Architecture diagram of the GitHub repository kevinxo328/azure-avatar-demo, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/kevinxo328/azure-avatar-demo
- Repository: https://github.com/kevinxo328/azure-avatar-demo

## Overview

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: [`src/pages/avatar/AvatarAssistant.tsx`](https://github.com/kevinxo328/azure-avatar-demo/blob/main/src/pages/avatar/AvatarAssistant.tsx) (Avatar assistant), [`src/store/realtimeAvatarSlice.ts`](https://github.com/kevinxo328/azure-avatar-demo/blob/main/src/store/realtimeAvatarSlice.ts) (Realtime avatar state), [`src/hooks/useBatchAvatar.ts`](https://github.com/kevinxo328/azure-avatar-demo/blob/main/src/hooks/useBatchAvatar.ts) (Batch job manager), [`src/components/bg-remove-player.tsx`](https://github.com/kevinxo328/azure-avatar-demo/blob/main/src/components/bg-remove-player.tsx) (Avatar player)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application"]
  node_entry["App bootstrap<br/>[main.tsx]"]
  node_router["Route selection<br/>[routes.tsx]"]
end

subgraph group_interaction["Conversation"]
  node_assistant["Avatar assistant"]
  node_settings["Avatar settings<br/>[config-form.tsx]"]
  node_chatui["Chat display<br/>[chat-messages.tsx]"]
  node_mic["Microphone control<br/>[mic-button.tsx]"]
  node_recorder["Audio recorder<br/>[useRecoder.ts]"]
end

subgraph group_avatar["Avatar modes"]
  node_batchhook["Batch job manager<br/>[useBatchAvatar.ts]"]
  node_realtimestore["Realtime avatar state"]
  node_player["Avatar player"]
end

subgraph group_services["Azure services"]
  node_aoai["OpenAI API<br/>[aoai.ts]"]
  node_speechapi["Speech API<br/>[speech.ts]"]
  node_speechutil["Speech utilities<br/>[speech-studio.ts]"]
end

node_user(("User"))
node_azureaoai{{"Azure OpenAI"}}
node_azureavatar{{"Azure Avatar"}}
node_browser["Browser media"]

node_user -->|"opens app"| node_entry
node_entry -->|"mounts routes"| node_router
node_router -->|"selects mode"| node_assistant
node_user -->|"chooses avatar"| node_assistant
node_assistant -->|"renders settings"| node_settings
node_assistant -->|"supplies messages"| node_chatui
node_user -->|"starts recording"| node_mic
node_mic -->|"controls capture"| node_recorder
node_recorder -->|"captures audio"| node_browser
node_assistant -->|"requests transcription"| node_aoai
node_assistant -->|"requests completion"| node_aoai
node_aoai -->|"sends requests"| node_azureaoai
node_assistant -->|"transcribes audio"| node_speechutil
node_speechutil -->|"uses Speech SDK"| node_azureavatar
node_assistant -->|"starts batch job"| node_batchhook
node_batchhook -->|"creates and polls"| node_speechapi
node_speechapi -->|"calls batch service"| node_azureavatar
node_assistant -->|"connects avatar"| node_realtimestore
node_realtimestore -->|"gets avatar token"| node_speechapi
node_realtimestore -->|"creates synthesizer"| node_speechutil
node_realtimestore -->|"opens realtime session"| node_azureavatar
node_azureavatar -->|"streams media"| node_realtimestore
node_realtimestore -->|"provides media stream"| node_player
node_batchhook -->|"provides batch video"| node_player
node_player -->|"renders video"| node_browser

click node_entry "https://github.com/kevinxo328/azure-avatar-demo/blob/main/src/main.tsx"
click node_router "https://github.com/kevinxo328/azure-avatar-demo/blob/main/src/routes/routes.tsx"
click node_assistant "https://github.com/kevinxo328/azure-avatar-demo/blob/main/src/pages/avatar/AvatarAssistant.tsx"
click node_settings "https://github.com/kevinxo328/azure-avatar-demo/blob/main/src/components/form/config-form.tsx"
click node_chatui "https://github.com/kevinxo328/azure-avatar-demo/blob/main/src/components/chat-messages.tsx"
click node_mic "https://github.com/kevinxo328/azure-avatar-demo/blob/main/src/components/mic-button.tsx"
click node_recorder "https://github.com/kevinxo328/azure-avatar-demo/blob/main/src/hooks/useRecoder.ts"
click node_aoai "https://github.com/kevinxo328/azure-avatar-demo/blob/main/src/apis/aoai.ts"
click node_speechapi "https://github.com/kevinxo328/azure-avatar-demo/blob/main/src/apis/speech.ts"
click node_speechutil "https://github.com/kevinxo328/azure-avatar-demo/blob/main/src/utils/speech-studio.ts"
click node_batchhook "https://github.com/kevinxo328/azure-avatar-demo/blob/main/src/hooks/useBatchAvatar.ts"
click node_realtimestore "https://github.com/kevinxo328/azure-avatar-demo/blob/main/src/store/realtimeAvatarSlice.ts"
click node_player "https://github.com/kevinxo328/azure-avatar-demo/blob/main/src/components/bg-remove-player.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_entry,node_router,node_user,node_browser toneBlue
class node_assistant,node_settings,node_chatui,node_mic,node_recorder toneAmber
class node_batchhook,node_realtimestore,node_player toneMint
class node_aoai,node_speechapi,node_speechutil toneRose
class node_azureaoai,node_azureavatar toneIndigo
```

## Components

### Application

- [App bootstrap](https://github.com/kevinxo328/azure-avatar-demo/blob/main/src/main.tsx): `src/main.tsx`
- [Route selection](https://github.com/kevinxo328/azure-avatar-demo/blob/main/src/routes/routes.tsx): `src/routes/routes.tsx`

### Conversation

- [Avatar assistant](https://github.com/kevinxo328/azure-avatar-demo/blob/main/src/pages/avatar/AvatarAssistant.tsx): `src/pages/avatar/AvatarAssistant.tsx`
- [Avatar settings](https://github.com/kevinxo328/azure-avatar-demo/blob/main/src/components/form/config-form.tsx): `src/components/form/config-form.tsx`
- [Chat display](https://github.com/kevinxo328/azure-avatar-demo/blob/main/src/components/chat-messages.tsx): `src/components/chat-messages.tsx`
- [Microphone control](https://github.com/kevinxo328/azure-avatar-demo/blob/main/src/components/mic-button.tsx): `src/components/mic-button.tsx`
- [Audio recorder](https://github.com/kevinxo328/azure-avatar-demo/blob/main/src/hooks/useRecoder.ts): `src/hooks/useRecoder.ts`

### Avatar modes

- [Batch job manager](https://github.com/kevinxo328/azure-avatar-demo/blob/main/src/hooks/useBatchAvatar.ts): `src/hooks/useBatchAvatar.ts`
- [Realtime avatar state](https://github.com/kevinxo328/azure-avatar-demo/blob/main/src/store/realtimeAvatarSlice.ts): `src/store/realtimeAvatarSlice.ts`
- [Avatar player](https://github.com/kevinxo328/azure-avatar-demo/blob/main/src/components/bg-remove-player.tsx): `src/components/bg-remove-player.tsx`

### Azure services

- [OpenAI API](https://github.com/kevinxo328/azure-avatar-demo/blob/main/src/apis/aoai.ts): `src/apis/aoai.ts`
- [Speech API](https://github.com/kevinxo328/azure-avatar-demo/blob/main/src/apis/speech.ts): `src/apis/speech.ts`
- [Speech utilities](https://github.com/kevinxo328/azure-avatar-demo/blob/main/src/utils/speech-studio.ts): `src/utils/speech-studio.ts`

### Other components

- **User**
- **Azure OpenAI**
- **Azure Avatar**
- **Browser media**

## Connections

- 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