feat(voice): self-hosted speech recognition via Whisper (STT_*)
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 1m49s
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 1m49s
- STT_URL switches voice input to an OpenAI-compatible Whisper server (e.g. speaches); without it the browser's recognition stays. Configured by environment only, with limits for upload size, parallel jobs, hourly budget per user and timeout. The demo always uses the browser. - POST /voice/transcribe forwards recordings and returns the text; nothing is stored. On startup MindSift waits for the server and asks it to download the model if missing. - Admin card shows the active mode and server state, with a test recording. - docker-compose: optional "whisper" service (speaches 0.8.3 CPU, profile "whisper", models in ./whisper). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
sandrodachandClaude Opus 5.5 committed
1 parent
6a5e82431f
commit
7801cd13b9
18 files changed
+816
-6
No files matched your search
@@ -29,6 +29,7 @@ import { passwordProblem } from '../../lib/password';
|
||||
import { UserAvatar } from '../../components/UserAvatar';
|
||||
import { ToggleSwitch } from '../../components/ToggleSwitch';
|
||||
import { BackupAdminCard } from './BackupAdminCard';
|
||||
import { VoiceStatusCard } from './VoiceStatusCard';
|
||||
import { CountBadge } from '../../components/CountBadge';
|
||||
|
||||
interface AdminSettingsViewProps {
|
||||
@@ -1115,6 +1116,8 @@ export const AdminSettingsView: React.FC<AdminSettingsViewProps> = ({
|
||||
|
||||
<BackupAdminCard settings={settings} onSave={(patch) => handleSaveSystemSettings(patch)} />
|
||||
|
||||
<VoiceStatusCard />
|
||||
|
||||
{/* Alarm webhooks into the local network (SSRF protection) */}
|
||||
<div className="p-4 bg-canvas border border-border rounded-card flex items-center justify-between gap-4">
|
||||
<div className="pr-4">
|
||||
|
||||
@@ -0,0 +1,189 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { AlertCircle, Check, Loader2, Mic, RefreshCw, Square } from 'lucide-react';
|
||||
import { api } from '../../lib/api';
|
||||
import { VoiceAdminStatus } from '../../lib/types';
|
||||
|
||||
const TEST_SECONDS = 6;
|
||||
|
||||
// Admin: which speech recognition is active. Configured only by environment (STT_*), so this card
|
||||
// just shows the state and offers a short test recording through the own Whisper server.
|
||||
export const VoiceStatusCard: React.FC = () => {
|
||||
const [info, setInfo] = useState<VoiceAdminStatus | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [recording, setRecording] = useState(false);
|
||||
const [testing, setTesting] = useState(false);
|
||||
const [result, setResult] = useState<{ text: string; ms: number } | null>(null);
|
||||
const recorderRef = useRef<MediaRecorder | null>(null);
|
||||
const stopTimerRef = useRef<number | null>(null);
|
||||
|
||||
const load = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
setInfo(await api.adminVoiceStatus());
|
||||
setError(null);
|
||||
} catch (err: any) {
|
||||
setError(err.message || 'Status konnte nicht geladen werden');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
void load();
|
||||
return () => {
|
||||
if (stopTimerRef.current !== null) window.clearTimeout(stopTimerRef.current);
|
||||
recorderRef.current?.stream.getTracks().forEach((t) => t.stop());
|
||||
};
|
||||
}, []);
|
||||
|
||||
const stopRecording = () => {
|
||||
if (stopTimerRef.current !== null) window.clearTimeout(stopTimerRef.current);
|
||||
stopTimerRef.current = null;
|
||||
if (recorderRef.current?.state === 'recording') recorderRef.current.stop();
|
||||
};
|
||||
|
||||
const startTest = async () => {
|
||||
setResult(null);
|
||||
setError(null);
|
||||
let stream: MediaStream;
|
||||
try {
|
||||
stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
||||
} catch {
|
||||
setError('Kein Zugriff auf das Mikrofon (Berechtigung, oder die Seite läuft nicht über HTTPS)');
|
||||
return;
|
||||
}
|
||||
const recorder = new MediaRecorder(stream);
|
||||
const chunks: Blob[] = [];
|
||||
recorder.ondataavailable = (e) => {
|
||||
if (e.data.size > 0) chunks.push(e.data);
|
||||
};
|
||||
recorder.onstop = async () => {
|
||||
stream.getTracks().forEach((t) => t.stop());
|
||||
setRecording(false);
|
||||
setTesting(true);
|
||||
const started = performance.now();
|
||||
try {
|
||||
const text = await api.transcribe(new Blob(chunks, { type: recorder.mimeType }));
|
||||
setResult({ text, ms: Math.round(performance.now() - started) });
|
||||
} catch (err: any) {
|
||||
setError(err.message || 'Spracherkennung fehlgeschlagen');
|
||||
} finally {
|
||||
setTesting(false);
|
||||
}
|
||||
};
|
||||
recorderRef.current = recorder;
|
||||
recorder.start();
|
||||
setRecording(true);
|
||||
stopTimerRef.current = window.setTimeout(stopRecording, TEST_SECONDS * 1000);
|
||||
};
|
||||
|
||||
const status = info?.status;
|
||||
const serverOk = info?.mode === 'server' && status?.reachable && status?.modelReady;
|
||||
|
||||
return (
|
||||
<div className="p-4 bg-canvas border border-border rounded-card space-y-3">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<h3 className="font-bold text-main flex items-center gap-1.5">
|
||||
<Mic className="w-4 h-4 text-accent" />
|
||||
Spracherkennung
|
||||
</h3>
|
||||
<p className="text-muted mt-0.5">
|
||||
Wird nur über Umgebungsvariablen eingestellt (<code className="font-mono">STT_URL</code>,{' '}
|
||||
<code className="font-mono">STT_MODEL</code> …); Fehler stehen im Container-Log.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={load}
|
||||
disabled={loading}
|
||||
title="Status neu prüfen"
|
||||
className="btn-action h-11 w-11 sm:h-8 sm:w-8 flex items-center justify-center shrink-0 disabled:opacity-40"
|
||||
>
|
||||
<RefreshCw className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{info && (
|
||||
<dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-xs">
|
||||
<dt className="text-muted">Aktiv</dt>
|
||||
<dd className="text-main font-semibold">
|
||||
{info.mode === 'server'
|
||||
? 'Eigener Server (Whisper)'
|
||||
: info.mode === 'off'
|
||||
? 'Ausgeschaltet'
|
||||
: info.demo && info.url
|
||||
? 'Browser (in der Demo immer)'
|
||||
: 'Browser (Spracherkennung des Browsers)'}
|
||||
</dd>
|
||||
{info.url && (
|
||||
<>
|
||||
<dt className="text-muted">Server</dt>
|
||||
<dd className="text-main font-mono break-all">{info.url}</dd>
|
||||
<dt className="text-muted">Modell</dt>
|
||||
<dd className="text-main font-mono break-all">{info.model}</dd>
|
||||
<dt className="text-muted">Sprache</dt>
|
||||
<dd className="text-main">{info.language || 'automatisch'}</dd>
|
||||
</>
|
||||
)}
|
||||
{info.mode === 'server' && (
|
||||
<>
|
||||
<dt className="text-muted">Zustand</dt>
|
||||
<dd className="flex items-center gap-1.5">
|
||||
{serverOk ? (
|
||||
<span className="text-status-ok flex items-center gap-1">
|
||||
<Check className="w-3.5 h-3.5" /> Erreichbar, Modell geladen
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-status-err flex items-center gap-1">
|
||||
<AlertCircle className="w-3.5 h-3.5" />
|
||||
{status?.reachable ? 'Modell fehlt noch (wird heruntergeladen)' : 'Nicht erreichbar'}
|
||||
{status?.error && !status.reachable ? `: ${status.error}` : ''}
|
||||
</span>
|
||||
)}
|
||||
</dd>
|
||||
<dt className="text-muted">Grenzen</dt>
|
||||
<dd className="text-main">
|
||||
{Math.round(info.maxSeconds / 60)} Min. bzw. {info.maxUploadMb} MB pro Aufnahme, {info.maxParallel}{' '}
|
||||
gleichzeitig, {info.perUserPerHour} pro Person und Stunde, {info.timeoutSeconds} s Zeitlimit
|
||||
</dd>
|
||||
</>
|
||||
)}
|
||||
</dl>
|
||||
)}
|
||||
|
||||
{info?.mode === 'server' && (
|
||||
<div className="pt-2 border-t border-border flex flex-col sm:flex-row sm:items-center gap-2">
|
||||
{recording ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={stopRecording}
|
||||
className="btn-danger h-11 sm:h-8 px-3 text-xs flex items-center justify-center gap-1.5"
|
||||
>
|
||||
<Square className="w-3.5 h-3.5" /> Aufnahme beenden
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={startTest}
|
||||
disabled={testing}
|
||||
className="btn-secondary h-11 sm:h-8 px-3 text-xs flex items-center justify-center gap-1.5 disabled:opacity-40"
|
||||
>
|
||||
{testing ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Mic className="w-3.5 h-3.5" />}
|
||||
{testing ? 'Wird erkannt…' : `Testaufnahme (${TEST_SECONDS} s)`}
|
||||
</button>
|
||||
)}
|
||||
{recording && <span className="text-muted">Sprich jetzt …</span>}
|
||||
{result && (
|
||||
<span className="text-main">
|
||||
„{result.text || '(nichts erkannt)'}“ <span className="text-faint">· {(result.ms / 1000).toFixed(1)} s</span>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && <p className="text-status-err text-xs">{error}</p>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -35,6 +35,7 @@ import {
|
||||
TagSummary,
|
||||
User,
|
||||
UserInvite,
|
||||
VoiceAdminStatus,
|
||||
WSMessage,
|
||||
} from './types';
|
||||
import { extractHashtags } from './hashtags';
|
||||
@@ -1047,6 +1048,26 @@ export const api = {
|
||||
await request(`/api/v1/admin/invites/${id}`, { method: 'DELETE' });
|
||||
},
|
||||
|
||||
async adminVoiceStatus(): Promise<VoiceAdminStatus> {
|
||||
return request<VoiceAdminStatus>('/api/v1/admin/voice');
|
||||
},
|
||||
|
||||
// Sends a recording to the own Whisper server (voice mode "server") and returns the text
|
||||
async transcribe(audio: Blob): Promise<string> {
|
||||
const token = getToken();
|
||||
const ext = audio.type.includes('mp4') ? 'm4a' : audio.type.includes('ogg') ? 'ogg' : 'webm';
|
||||
const form = new FormData();
|
||||
form.append('file', audio, `aufnahme.${ext}`);
|
||||
const res = await fetch('/api/v1/voice/transcribe', {
|
||||
method: 'POST',
|
||||
headers: token ? { Authorization: `Bearer ${token}` } : {},
|
||||
body: form,
|
||||
});
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) throw new Error(data.error || `Spracherkennung fehlgeschlagen (HTTP ${res.status})`);
|
||||
return data.text || '';
|
||||
},
|
||||
|
||||
async adminGetSettings(): Promise<SystemSettings> {
|
||||
return request<SystemSettings>('/api/v1/admin/settings');
|
||||
},
|
||||
|
||||
@@ -21,6 +21,26 @@ export interface AuthStatus {
|
||||
privacyUrl?: string;
|
||||
hasPrivacyContent?: boolean;
|
||||
};
|
||||
// Voice input: own Whisper server, the browser's recognition, or switched off (STT_* environment)
|
||||
voice?: { mode: VoiceMode; maxSeconds: number };
|
||||
}
|
||||
|
||||
export type VoiceMode = 'server' | 'browser' | 'off';
|
||||
|
||||
// Admin view of the speech recognition (read-only, configured by environment)
|
||||
export interface VoiceAdminStatus {
|
||||
mode: VoiceMode;
|
||||
demo: boolean;
|
||||
url?: string;
|
||||
model?: string;
|
||||
language?: string;
|
||||
apiKeySet?: boolean;
|
||||
maxSeconds: number;
|
||||
maxUploadMb: number;
|
||||
maxParallel: number;
|
||||
perUserPerHour: number;
|
||||
timeoutSeconds: number;
|
||||
status?: { reachable: boolean; modelReady: boolean; error?: string; checkedAt?: string };
|
||||
}
|
||||
|
||||
// Who can see whom: nobody, members of the same organization, or everybody (Doku/sharing-and-permissions.md)
|
||||
|
||||
Reference in new issue
Block a user