PStack Debugger - Voice AI Demo

Interactive 3D avatar with voice conversation capabilities powered by Hollo AI

How to Use

  1. Wait for the connection status to show "Connected"
  2. Click the "Start Speaking" button
  3. Allow microphone access when prompted
  4. Speak naturally - your voice will be transcribed
  5. The AI will respond with both text and voice
  6. Click again to stop listening

Features

  • 🎤 Real-time speech-to-text
  • 🔊 AI voice responses (MP3 streaming)
  • 💬 Text streaming display
  • 🤖 3D avatar with animations
  • 📝 Full conversation history

Technical Notes

  • Browser: Chrome/Edge recommended (best speech recognition support)
  • Connection: Uses Socket.IO for real-time streaming
  • Audio: Base64-encoded MP3 chunks
  • API: Hollo AI Chatbot API

Voice-Enabled Avatar

Future Integration: Custom Events API

// Coming soon: Send game events that the AI can respond to with voice

// Example: Player chat message triggers AI response
sendAvatarEvent('PLAYER_CHAT', {
  playerId: 'player1',
  playerName: 'Alice',
  message: 'Hello, how do I play this card?'
});

// The AI will:
// 1. Receive the chat message
// 2. Process it with context awareness
// 3. Respond with synthesized voice
// 4. Trigger appropriate avatar animations

// Example: Game state change triggers AI commentary
sendAvatarEvent('CARD_PLAYED', {
  playerId: 'player1',
  cardId: 'ace_spades',
  isWinningMove: true
});

// AI responds: "Excellent play! The Ace of Spades..."
// Avatar plays 'excited' animation

Embedding the Voice Avatar

<!-- HTML: Embed the voice-enabled avatar -->
<iframe
  id="voiceAvatar"
  src="https://pc-debug.pstack.ai/embed-voice"
  width="100%"
  height="700"
  style="border: none;"
  allow="microphone"
></iframe>

<!-- IMPORTANT: The 'allow="microphone"' attribute is required -->

<script>
// Listen for status updates from the embed
window.addEventListener('message', (event) => {
  if (event.data?.type === 'VOICE_STATUS') {
    console.log('Voice status:', event.data.status);
    // status can be: 'connecting', 'connected', 'disconnected'
  }

  if (event.data?.type === 'AI_RESPONSE') {
    console.log('AI said:', event.data.text);
    // You can use this to sync game state with AI responses
  }
});
</script>