Voice Comparison Panel

A/B voice comparison — two labeled columns, each with a language-grouped voice select (VoicePicker) and a native <audio> player shown once audio is set, a shared comparison textarea, and a Compare button with a loading state. Wire onCompare.

Library

LocalMode

Framework

React

Type

component

License

MIT

Install

npx shadcn add @localmode/ui/ui/audio/voice-comparison-panel

Files

• apps/ui/registry/localmode/audio/voice-comparison-panel/voice-comparison-panel.tsx
• apps/ui/src/lib/browser-utils.ts
• apps/ui/registry/localmode/lib/utils.ts
• apps/ui/registry/localmode/audio/voice-picker/voice-picker.tsx
• apps/ui/registry/localmode/audio/waveform-activity-bars/waveform-activity-bars.tsx

Source

https://github.com/LocalMode-AI/LocalMode

Categories

• Comparison Table Components
• React Comparison Table Components
• Tailwind CSS Comparison Table Components
• Data Display Components
• React Data Display Components
• Tailwind CSS Data Display Components
• Input Components
• React Input Components
• Tailwind CSS Input Components
• Select Components
• React Select Components
• Tailwind CSS Select Components

More from LocalMode

• Data Table Artifact
• Mic Selector
• Voice Picker
• Voice Explorer Block
• GGUF Explorer Block
• Vector Data Manager Block
• Model Cache Table
• Language Pair Selector
• Model Comparison Panel
• Artifact
• Chart Artifact
• Code Diff Viewer