TalkAvatar

A real-time interactive virtual human built with React, Vite, and LiveKit.
No coding required — deploy it and start communicating right away.
Customize with your own 3D model and gestures to create a unique, instantly-responsive virtual assistant.

---

✨ Features

• 🗣️ Real-time voice and video interaction
• ⚡ Fast and modern React + Vite development stack
• 🎭 Easy 3D model customization
• 🔧 Zero code setup for basic use
• 🔌 Seamless LiveKit integration for WebRTC communication

---

🚀 Quick Start

1. Deploy & Run

Simply deploy the project to your environment, and it’s ready to use out of the box.

2. Customize Your Avatar

• Place your own 3D model files in the /public/models folder.
• Update the model loading path in /src/components/Avatar.jsx.

3. Configure Environment

After local deployment, create a .env file in the project root with the following variables:

LIVEKIT_URL=your_livekit_server_url
LIVEKIT_API_KEY=your_livekit_api_key
LIVEKIT_API_SECRET=your_livekit_api_secret
AGENT_NAME=your_virtual_agent_name

Note: You’ll need to sign up at LiveKit to obtain your own API keys.

---

🧩 Available Official Plugins

• @vitejs/plugin-react – Uses Babel for Fast Refresh
• @vitejs/plugin-react-swc – Uses SWC for Fast Refresh

---

📁 Project Structure Highlights

TalkAvatar/
├── backend/                   # Backend services (Python-based)
│   ├── __pycache__/          # Python bytecode cache
│   └── main.py               # Main backend server application
├── public/                   # Public assets directory
│   ├── animations/           # Animation files directory
│   ├── audios/               # Audio files directory
│   ├── models/               # 3D models directory (for custom avatars)
│   ├── textures/             # Texture files directory
│   └── vite.svg              # Vite framework logo
├── src/                      # Source code directory
│   ├── Screen/               # Screen components directory
│   ├── assets/               # Static assets directory
│   ├── components/           # Reusable components directory
│   ├── App.css               # Main application styles
│   ├── App.jsx               # Root React application component
│   ├── constant.js           # Application constants and configuration
│   ├── index.css             # Global CSS styles
│   └── main.jsx              # Application entry point
├── .gitignore                # Git ignore configuration
├── README.md                 # Project documentation (this file)
├── eslint.config.js          # ESLint configuration
├── index.html                # HTML entry file
├── package-lock.json         # npm dependency lock file
├── package.json              # Project dependencies and scripts
├── vite.config.js            # Vite build configuration
└── yarn.lock                 # Yarn dependency lock file

---

📌 Summary

With TalkAvatar, you can quickly set up a fully interactive virtual human tailored to your brand or use case — just swap in your model, add your LiveKit credentials, and start the conversation.

---

Enjoy building your own virtual human! 🎉