Add HuggingFace token setting for speaker detection

- Add "Speakers" tab in Settings with HF token input field
- Include step-by-step instructions for obtaining the token
- Pass hf_token from settings through Rust → Python pipeline → diarize
- Token can also be set via HF_TOKEN environment variable as fallback
- Move skip_diarization checkbox to Speakers tab

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

src/lib/components/SettingsModal.svelte

@@ -9,7 +9,7 @@
   let { visible, onClose }: Props = $props();
 
   let localSettings = $state<AppSettings>({ ...$settings });
-  let activeTab = $state<'transcription' | 'ai' | 'local'>('transcription');
+  let activeTab = $state<'transcription' | 'speakers' | 'ai' | 'local'>('transcription');
 
   // Sync when settings store changes
   $effect(() => {
@@ -46,6 +46,9 @@
         <button class="tab" class:active={activeTab === 'transcription'} onclick={() => activeTab = 'transcription'}>
           Transcription
         </button>
+        <button class="tab" class:active={activeTab === 'speakers'} onclick={() => activeTab = 'speakers'}>
+          Speakers
+        </button>
         <button class="tab" class:active={activeTab === 'ai'} onclick={() => activeTab = 'ai'}>
           AI Provider
         </button>
@@ -77,10 +80,27 @@
             <label for="stt-lang">Language (blank = auto-detect)</label>
             <input id="stt-lang" type="text" bind:value={localSettings.transcription_language} placeholder="e.g., en, es, fr" />
           </div>
+        {:else if activeTab === 'speakers'}
+          <div class="field">
+            <label for="hf-token">HuggingFace Token</label>
+            <input id="hf-token" type="password" bind:value={localSettings.hf_token} placeholder="hf_..." />
+          </div>
+          <div class="info-box">
+            <p class="info-title">Why is this needed?</p>
+            <p>Speaker detection uses the <strong>pyannote.audio</strong> model, which is hosted on HuggingFace and requires accepting a license agreement.</p>
+            <p class="info-title">How to get a token:</p>
+            <ol>
+              <li>Create a free account at <strong>huggingface.co</strong></li>
+              <li>Go to <strong>huggingface.co/pyannote/speaker-diarization-3.1</strong> and accept the license</li>
+              <li>Go to <strong>huggingface.co/settings/tokens</strong> and create a token with <em>read</em> access</li>
+              <li>Paste the token above and click Save</li>
+            </ol>
+            <p>The model will be downloaded automatically on first use (~100 MB).</p>
+          </div>
           <div class="field checkbox">
             <label>
               <input type="checkbox" bind:checked={localSettings.skip_diarization} />
-              Skip speaker diarization (faster, no speaker labels)
+              Skip speaker detection (faster, no speaker labels)
             </label>
           </div>
         {:else if activeTab === 'ai'}
@@ -252,6 +272,37 @@
     color: #666;
     line-height: 1.4;
   }
+  .info-box {
+    background: rgba(233, 69, 96, 0.05);
+    border: 1px solid #2a3a5e;
+    border-radius: 6px;
+    padding: 0.75rem 1rem;
+    margin-bottom: 1rem;
+    font-size: 0.8rem;
+    color: #b0b0b0;
+    line-height: 1.5;
+  }
+  .info-box p {
+    margin: 0 0 0.5rem;
+  }
+  .info-box p:last-child {
+    margin-bottom: 0;
+  }
+  .info-box .info-title {
+    color: #e0e0e0;
+    font-weight: 600;
+    font-size: 0.8rem;
+  }
+  .info-box ol {
+    margin: 0.25rem 0 0.5rem;
+    padding-left: 1.25rem;
+  }
+  .info-box li {
+    margin-bottom: 0.25rem;
+  }
+  .info-box strong {
+    color: #e0e0e0;
+  }
   .modal-footer {
     display: flex;
     justify-content: flex-end;

src/lib/stores/settings.ts

@@ -14,6 +14,7 @@ export interface AppSettings {
   transcription_device: string;
   transcription_language: string;
   skip_diarization: boolean;
+  hf_token: string;
 }
 
 const defaults: AppSettings = {
@@ -29,6 +30,7 @@ const defaults: AppSettings = {
   transcription_device: 'cpu',
   transcription_language: '',
   skip_diarization: false,
+  hf_token: '',
 };
 
 export const settings = writable<AppSettings>({ ...defaults });

src/routes/+page.svelte

@@ -133,6 +133,7 @@
         device: $settings.transcription_device || undefined,
         language: $settings.transcription_language || undefined,
         skipDiarization: $settings.skip_diarization || undefined,
+        hfToken: $settings.hf_token || undefined,
       });
 
       // Create speaker entries from pipeline result