From 5f384af6cf2178756a2a217a1983974e94c923f0 Mon Sep 17 00:00:00 2001
From: "thomas.kopp" <thomas.kopp@tueit.de>
Date: Thu, 2 Apr 2026 01:18:26 +0200
Subject: [PATCH] feat: add diarization section to settings page

Adds a "Diarisierung" section with an enabled/disabled toggle,
HuggingFace token input, and a help link to pyannote/speaker-diarization-3.1.
loadConfig() and the save handler now persist diarization settings.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/settings.html | 19 +++++++++++++++++++
 frontend/settings.js   |  7 +++++++
 2 files changed, 26 insertions(+)

diff --git a/frontend/settings.html b/frontend/settings.html
index 2e2582d..82ab5cc 100644
--- a/frontend/settings.html
+++ b/frontend/settings.html
@@ -94,6 +94,25 @@
         <button class="btn primary" id="save-btn">Speichern</button>
       </div>
     </section>
+
+    <section>
+      <h2>Diarisierung</h2>
+      <div class="field">
+        <label>
+          <input type="checkbox" id="diar-enabled" style="margin-right:6px;accent-color:var(--yellow);">
+          Sprecher-Erkennung aktivieren
+        </label>
+      </div>
+      <div class="field">
+        <label>HuggingFace Token</label>
+        <input type="text" id="diar-hf-token" placeholder="hf_...">
+      </div>
+      <p style="font-size:.78rem;color:var(--muted);margin-bottom:10px;">
+        Token benötigt Lesezugriff auf
+        <a href="https://huggingface.co/pyannote/speaker-diarization-3.1" target="_blank"
+           style="color:var(--yellow);text-decoration:none;">pyannote/speaker-diarization-3.1</a>.
+      </p>
+    </section>
   </main>
   <div class="toast" id="toast"></div>
   <script src="/settings.js"></script>
diff --git a/frontend/settings.js b/frontend/settings.js
index 23349b7..034a4d9 100644
--- a/frontend/settings.js
+++ b/frontend/settings.js
@@ -58,6 +58,9 @@ async function loadConfig() {
   const ollamaUrl = (cfg.ollama && cfg.ollama.base_url) || 'http://localhost:11434';
   document.getElementById('ollama-url').value = ollamaUrl;
   await loadOllamaModels(ollamaUrl, cfg.ollama && cfg.ollama.model);
+  const diarCfg = cfg.diarization || {};
+  document.getElementById('diar-enabled').checked = !!diarCfg.enabled;
+  document.getElementById('diar-hf-token').value = diarCfg.hf_token || '';
 }
 
 document.getElementById('refresh-devices-btn').addEventListener('click', loadDevices);
@@ -98,6 +101,10 @@ document.getElementById('save-btn').addEventListener('click', async function() {
       base_url: document.getElementById('ollama-url').value,
       model: document.getElementById('ollama-model').value,
     },
+    diarization: {
+      enabled: document.getElementById('diar-enabled').checked,
+      hf_token: document.getElementById('diar-hf-token').value.trim(),
+    },
   };
   const r = await apiFetch('/config', { method: 'PUT', body: JSON.stringify(body) });
   if (r.ok) { showToast('Gespeichert'); } else { showToast('Fehler beim Speichern'); }