{"id":29024496,"url":"https://github.com/kkdubey/conversational-ai-avatar-angular","last_synced_at":"2026-04-05T08:35:51.888Z","repository":{"id":300178625,"uuid":"1005425422","full_name":"kkdubey/conversational-ai-avatar-angular","owner":"kkdubey","description":"🤖 Interactive AI Avatar application built with Angular 18+ that integrates Azure AI Avatar, Speech Services, and OpenAI to create engaging conversational experiences with realistic talking avatars. Features real-time speech recognition, text-to-speech synthesis, and WebRTC communication.","archived":false,"fork":false,"pushed_at":"2025-06-20T08:03:00.000Z","size":180,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-20T09:19:19.238Z","etag":null,"topics":["ai-avatar","angular","azure","conversational-ai","openai","real-time-communication","webrtc","webrtc-avatar"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kkdubey.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-20T07:57:19.000Z","updated_at":"2025-06-20T08:08:56.000Z","dependencies_parsed_at":"2025-06-20T09:19:21.532Z","dependency_job_id":"bf13ac94-55da-41a5-a6e5-787cd7b1fca1","html_url":"https://github.com/kkdubey/conversational-ai-avatar-angular","commit_stats":null,"previous_names":["kkdubey/conversational-ai-avatar-angular"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kkdubey/conversational-ai-avatar-angular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kkdubey%2Fconversational-ai-avatar-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kkdubey%2Fconversational-ai-avatar-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kkdubey%2Fconversational-ai-avatar-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kkdubey%2Fconversational-ai-avatar-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kkdubey","download_url":"https://codeload.github.com/kkdubey/conversational-ai-avatar-angular/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kkdubey%2Fconversational-ai-avatar-angular/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31430009,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-05T08:13:15.228Z","status":"ssl_error","status_checked_at":"2026-04-05T08:13:11.839Z","response_time":75,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai-avatar","angular","azure","conversational-ai","openai","real-time-communication","webrtc","webrtc-avatar"],"created_at":"2025-06-26T04:02:02.861Z","updated_at":"2026-04-05T08:35:51.859Z","avatar_url":"https://github.com/kkdubey.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Azure AI Avatar - Angular Application\r\n\r\nAn interactive AI tutor application built with Angular that integrates Azure AI Avatar, Azure Speech Services, and Azure OpenAI to create a conversational AI experience with a realistic avatar interface.\r\n\r\n## 🎯 Features\r\n\r\n- **Interactive AI Avatar**: Real-time talking avatar powered by Azure AI Avatar service\r\n- **Speech Recognition**: Convert speech to text using Azure Speech Services\r\n- **Text-to-Speech**: Natural voice synthesis with customizable voices\r\n- **AI Conversation**: Intelligent responses powered by Azure OpenAI (GPT-4)\r\n- **Responsive Design**: Bootstrap-based UI that works on desktop and mobile\r\n- **Real-time Communication**: WebRTC for low-latency audio/video streaming\r\n- **Cognitive Search Integration**: Optional \"On Your Data\" functionality\r\n- **Microphone Testing**: Built-in audio diagnostics and testing tools\r\n\r\n## 🏗️ Architecture\r\n\r\nThe application consists of two main components:\r\n- **Configuration Component**: Setup and manage Azure service configurations\r\n- **Session Component**: Interactive avatar conversation interface\r\n\r\n### Key Services\r\n- `AzureAiAvatarService`: Manages avatar synthesis, WebRTC connections, and speech recognition\r\n- `ConfigurationService`: Handles application settings and Azure service configurations\r\n\r\n## 🚀 Quick Start\r\n\r\n### Prerequisites\r\n\r\n- **Node.js** (version 18 or higher)\r\n- **Angular CLI** (version 18.2.4 or higher)\r\n- **Azure Subscriptions** with the following services:\r\n  - Azure Speech Services (in a region that supports AI Avatar)\r\n  - Azure OpenAI Service\r\n  - Azure Cognitive Search (optional, for \"On Your Data\" features)\r\n\r\n### Installation\r\n\r\n1. **Clone the repository**:\r\n   ```bash\r\n   git clone https://github.com/kkdubey/conversational-ai-avatar-angular.git\r\n   cd conversational-ai-avatar-angular\r\n   ```\r\n\r\n2. **Install dependencies**:\r\n   ```bash\r\n   npm install\r\n   ```\r\n\r\n3. **Start the development server**:\r\n   ```bash\r\n   npm start\r\n   ```\r\n\r\n4. **Open your browser** and navigate to `http://localhost:4200`\r\n\r\n## ⚙️ Configuration\r\n\r\n### Required Azure Services Setup\r\n\r\n#### 1. Azure Speech Service\r\n- Create an Azure Speech Service resource\r\n- **Important**: Choose a region that supports Azure AI Avatar:\r\n  - **West US 2** (Recommended)\r\n  - **West Europe** \r\n  - **Southeast Asia**\r\n- Copy the API Key and Region\r\n\r\n#### 2. Azure OpenAI Service\r\n- Create an Azure OpenAI resource\r\n- Deploy a GPT-4 model (e.g., `gpt-4o`)\r\n- Copy the Endpoint URL, API Key, and Deployment Name\r\n\r\n#### 3. Azure Cognitive Search (Optional)\r\n- Required only if using \"On Your Data\" functionality\r\n- Create a Cognitive Search service\r\n- Create and populate a search index\r\n- Copy the Endpoint URL, API Key, and Index Name\r\n\r\n### Application Configuration\r\n\r\n1. **Launch the application** and you'll see the Configuration page\r\n2. **Fill in the required fields**:\r\n   - Azure Speech Service region and API key\r\n   - Azure OpenAI endpoint, API key, and deployment name\r\n   - Avatar character and style preferences\r\n   - Speech-to-Text and Text-to-Speech settings\r\n3. **Test your setup**:\r\n   - Use \"🎤 Test Mic\" to verify microphone access\r\n   - Use \"🔊 Test Audio\" to check audio output\r\n   - Use \"🔍 Diagnostics\" to run comprehensive checks\r\n4. **Start the session** by clicking \"🚀 Start Session\"\r\n\r\n### Configuration Options\r\n\r\n| Field | Description | Example |\r\n|-------|-------------|---------|\r\n| **Region** | Azure Speech Service region | `westus2` |\r\n| **API Key** | Azure Speech Service key | `your-speech-api-key` |\r\n| **OpenAI Endpoint** | Azure OpenAI resource URL | `https://your-resource.openai.azure.com` |\r\n| **OpenAI API Key** | Azure OpenAI service key | `your-openai-api-key` |\r\n| **Deployment Name** | OpenAI model deployment | `model-deployment-name` |\r\n| **System Prompt** | AI assistant instructions | `You are a helpful AI tutor...` |\r\n| **STT Locales** | Speech recognition languages | `en-US,es-ES,fr-FR` |\r\n| **TTS Voice** | Text-to-speech voice | `en-US-AvaMultilingualNeural` |\r\n| **Avatar Character** | Avatar appearance | `meg` |\r\n| **Avatar Style** | Avatar presentation style | `formal` |\r\n\r\n## 🎮 Usage\r\n\r\n### Starting a Conversation\r\n1. Complete the configuration form\r\n2. Click \"🚀 Start Session\"\r\n3. Allow microphone permissions when prompted\r\n4. Wait for the avatar to load and initialize\r\n5. Start speaking when you see the microphone is active\r\n\r\n### Conversation Features\r\n- **Voice Interaction**: Speak naturally to the AI avatar\r\n- **Text Input**: Type messages using the text input box\r\n- **Continuous Mode**: Enable for ongoing conversations without button presses\r\n- **Auto-start Microphone**: Automatically begin listening when session starts\r\n\r\n### Controls\r\n- **🎤 Microphone Toggle**: Enable/disable voice input\r\n- **📝 Text Input**: Send typed messages\r\n- **⏹️ Stop Session**: End the current avatar session\r\n- **🔄 Debug**: View detailed session information\r\n\r\n## 🛠️ Development\r\n\r\n### Project Structure\r\n```\r\nsrc/\r\n├── app/\r\n│   ├── configuration/          # Configuration component\r\n│   ├── session/               # Avatar session component\r\n│   ├── services/              # Angular services\r\n│   │   ├── azure-ai-avatar.service.ts\r\n│   │   └── configuration.service.ts\r\n│   ├── app.component.*        # Main app component\r\n│   └── app.config.ts          # App configuration\r\n├── assets/                    # Static assets\r\n└── index.html                 # Main HTML file\r\n```\r\n\r\n### Development Server\r\nRun `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.\r\n\r\n### Building for Production\r\n```bash\r\nng build\r\n```\r\nThe build artifacts will be stored in the `dist/` directory.\r\n\r\n### Running Tests\r\n```bash\r\nng test      # Unit tests\r\nng e2e       # End-to-end tests (requires additional setup)\r\n```\r\n\r\n## 🔧 Troubleshooting\r\n\r\n### Common Issues\r\n\r\n#### Avatar Connection 404 Error\r\n- **Cause**: Region doesn't support Azure AI Avatar or invalid endpoint\r\n- **Solution**: \r\n  - Verify your region supports AI Avatar (use West US 2)\r\n  - Check your Speech Service API key is correct\r\n  - Ensure proper network connectivity\r\n\r\n#### Microphone Not Working\r\n- **Cause**: Browser permissions or device access issues\r\n- **Solution**:\r\n  - Allow microphone permissions in your browser\r\n  - Check if other applications are using the microphone\r\n  - Use the built-in microphone test feature\r\n\r\n#### OpenAI API Errors\r\n- **Cause**: Invalid credentials or model deployment issues\r\n- **Solution**:\r\n  - Verify your Azure OpenAI endpoint and API key\r\n  - Ensure your deployment name matches exactly\r\n  - Check your API key has proper permissions\r\n\r\n#### Audio/Video Issues\r\n- **Cause**: WebRTC connection problems or codec issues\r\n- **Solution**:\r\n  - Check browser compatibility (Chrome/Edge recommended)\r\n  - Ensure proper network configuration\r\n  - Try refreshing the browser\r\n\r\n### Debug Tools\r\n- Use the **🔍 Diagnostics** button to run comprehensive system checks\r\n- Check browser developer console for detailed error messages\r\n- Use the **🔄 Debug** button in session view for real-time status\r\n\r\n## 🔒 Security Considerations\r\n\r\n**⚠️ Important**: This is a development/demo application. For production use:\r\n\r\n- **API Key Security**: Implement server-side API key management\r\n- **Authentication**: Add proper user authentication\r\n- **HTTPS**: Always use HTTPS in production\r\n- **Rate Limiting**: Implement API rate limiting\r\n- **Input Validation**: Sanitize all user inputs\r\n- **CORS Configuration**: Properly configure CORS policies\r\n\r\n## 📦 Dependencies\r\n\r\n### Main Dependencies\r\n- **Angular 18.2.x**: Frontend framework\r\n- **RxJS**: Reactive programming\r\n- **Bootstrap 5.3.x**: UI framework (via CDN)\r\n\r\n### Azure SDKs\r\n- Uses REST APIs and WebRTC for Azure service integration\r\n- No additional Azure SDKs required\r\n\r\n## 🤝 Contributing\r\n\r\n1. Fork the repository\r\n2. Create a feature branch (`git checkout -b feature/amazing-feature`)\r\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\r\n4. Push to the branch (`git push origin feature/amazing-feature`)\r\n5. Open a Pull Request\r\n\r\n## 📄 License\r\n\r\nThis project is licensed under the MIT License - see the LICENSE file for details.\r\n\r\n## 🆘 Support\r\n\r\nFor additional help:\r\n- Check the [CONFIGURATION.md](./CONFIGURATION.md) file for detailed setup instructions\r\n- Review the [TROUBLESHOOTING.md](./TROUBLESHOOTING.md) file for common issues\r\n- Open an issue on the repository for bugs or feature requests\r\n- Consult the [Angular CLI Documentation](https://angular.dev/tools/cli) for Angular-specific questions\r\n\r\n## 🌟 Acknowledgments\r\n\r\n- Built with [Angular CLI](https://github.com/angular/angular-cli)\r\n- Powered by Azure AI services\r\n- UI components from Bootstrap\r\n- Icons from Unicode emoji set\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkkdubey%2Fconversational-ai-avatar-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkkdubey%2Fconversational-ai-avatar-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkkdubey%2Fconversational-ai-avatar-angular/lists"}