Add multi-speaker support for group conversations

Features:
- Speaker management system with unique IDs and colors
- Visual speaker selection with avatars and color coding
- Automatic language detection per speaker
- Real-time translation for all speakers' languages
- Conversation history with speaker attribution
- Export conversation as text file
- Persistent speaker data in localStorage

UI Components:
- Speaker toolbar with add/remove controls
- Active speaker indicators
- Conversation view with color-coded messages
- Settings toggle for multi-speaker mode
- Mobile-responsive speaker buttons

Technical Implementation:
- SpeakerManager class handles all speaker operations
- Automatic translation to all active languages
- Conversation entries with timestamps
- Translation caching per language
- Clean separation of original vs translated text
- Support for up to 8 concurrent speakers

User Experience:
- Click to switch active speaker
- Visual feedback for active speaker
- Conversation flows naturally with colors
- Export feature for meeting minutes
- Clear conversation history option
- Seamless single/multi speaker mode switching

This enables group conversations where each participant can speak
in their native language and see translations in real-time.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

templates/index.html

@@ -124,6 +124,25 @@
     <div class="container">
         <h1 class="text-center mb-4">Voice Language Translator</h1>
         <!--<p class="text-center text-muted">Powered by Gemma 3, Whisper & Edge TTS</p>-->
+        
+        <!-- Multi-speaker toolbar -->
+        <div id="speakerToolbar" class="card mb-3" style="display: none;">
+            <div class="card-body p-2">
+                <div class="d-flex align-items-center justify-content-between flex-wrap">
+                    <div class="d-flex align-items-center gap-2 mb-2 mb-md-0">
+                        <button id="addSpeakerBtn" class="btn btn-sm btn-outline-primary">
+                            <i class="fas fa-user-plus"></i> Add Speaker
+                        </button>
+                        <button id="toggleMultiSpeaker" class="btn btn-sm btn-secondary">
+                            <i class="fas fa-users"></i> Multi-Speaker: <span id="multiSpeakerStatus">OFF</span>
+                        </button>
+                    </div>
+                    <div id="speakerList" class="d-flex gap-2 flex-wrap">
+                        <!-- Speaker buttons will be added here dynamically -->
+                    </div>
+                </div>
+            </div>
+        </div>
 
         <div class="row">
             <div class="col-md-6 mb-3">
@@ -205,6 +224,26 @@
                 <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%"></div>
             </div>
         </div>
+        
+        <!-- Multi-speaker conversation view -->
+        <div id="conversationView" class="card mt-4" style="display: none;">
+            <div class="card-header bg-info text-white d-flex justify-content-between align-items-center">
+                <h5 class="mb-0">Conversation</h5>
+                <div>
+                    <button id="exportConversation" class="btn btn-sm btn-light">
+                        <i class="fas fa-download"></i> Export
+                    </button>
+                    <button id="clearConversation" class="btn btn-sm btn-light">
+                        <i class="fas fa-trash"></i> Clear
+                    </button>
+                </div>
+            </div>
+            <div class="card-body" style="max-height: 400px; overflow-y: auto;">
+                <div id="conversationContent">
+                    <!-- Conversation entries will be added here -->
+                </div>
+            </div>
+        </div>
 
         <audio id="audioPlayer" style="display: none;"></audio>
         
@@ -305,6 +344,13 @@
                                 <small class="text-muted d-block">Shows translation as it's generated for faster feedback</small>
                             </label>
                         </div>
+                        <div class="form-check form-switch mb-3">
+                            <input class="form-check-input" type="checkbox" id="multiSpeakerMode">
+                            <label class="form-check-label" for="multiSpeakerMode">
+                                Enable multi-speaker mode
+                                <small class="text-muted d-block">Track multiple speakers in conversations</small>
+                            </label>
+                        </div>
                         
                         <hr>