tueit_GmbH/tueit_Transkriptor
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: add frontend speaker naming card for diarization

Browse Source 
Shows a card with excerpt navigation and name inputs when the backend
emits speakers_unknown. Submitting posts the mapping to /speakers or
leaves speakers anonymous; handles awaiting_speakers status label.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Thomas Kopp
2026-04-02 01:17:23 +02:00
parent e04816fce6
commit 0eb85b98f1
2 changed files with 135 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+45
View File
@@ -169,6 +169,42 @@
transition: color 0.15s; flex-shrink: 0;
}
.del-btn:hover { color: var(--red); }
.speaker-card {
background: var(--surface); border: 1px solid var(--yellow);
border-radius: 10px; padding: 20px; display: flex; flex-direction: column; gap: 16px;
}
.speaker-card.hidden { display: none; }
.speaker-card-title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--yellow); }
.speaker-rows { display: flex; flex-direction: column; gap: 14px; }
.speaker-row { display: flex; flex-direction: column; gap: 6px; }
.excerpt-nav { display: flex; align-items: center; gap: 8px; }
.excerpt-nav-btn {
background: none; border: 1px solid var(--border); color: var(--muted);
border-radius: 4px; padding: 2px 8px; cursor: pointer; font-family: inherit;
font-size: 0.85rem; transition: border-color 0.15s, color 0.15s;
}
.excerpt-nav-btn:hover { border-color: var(--yellow); color: var(--yellow); }
.excerpt-counter { font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
.speaker-excerpt {
font-size: 0.82rem; color: var(--muted); font-style: italic;
background: var(--surface2); border-radius: 6px; padding: 8px 12px;
line-height: 1.5; min-height: 3em;
}
.speaker-name-input {
background: var(--surface2); border: 1px solid var(--border); color: var(--text);
border-radius: 6px; padding: 8px 12px; font-family: inherit; font-size: 0.9rem;
outline: none; transition: border-color 0.15s; width: 100%;
}
.speaker-name-input:focus { border-color: var(--yellow); }
.speaker-card-actions { display: flex; gap: 10px; justify-content: flex-end; }
.card-btn {
padding: 8px 18px; border-radius: 6px; border: 1px solid var(--border);
background: none; color: var(--text); cursor: pointer; font-family: inherit;
font-size: 0.85rem; transition: all 0.15s;
}
.card-btn:hover { border-color: var(--yellow); color: var(--yellow); }
.card-btn.primary { background: var(--yellow); color: #111; border-color: var(--yellow); font-weight: 600; }
.card-btn.primary:hover { background: #e6c200; border-color: #e6c200; }
</style>
</head>
<body>
@@ -183,6 +219,15 @@
</div>
</header>
<main>
<div id="speaker-card" class="speaker-card hidden">
<span class="speaker-card-title">Sprecher identifizieren</span>
<div id="speaker-rows" class="speaker-rows"></div>
<div class="speaker-card-actions">
<button id="speaker-anonym-btn" class="card-btn">Anonym lassen</button>
<button id="speaker-confirm-btn" class="card-btn primary">Übernehmen</button>
</div>
</div>
<section class="record-section">
<button id="record-btn" title="Aufnahme starten / stoppen">
<svg class="mic-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">