feat(audio): add custom OpenAI-compatible TTS/ASR provider support (#357)

app/generation-preview/page.tsx

@@ -728,7 +728,10 @@ function GenerationPreviewContent() {
                 ttsVoice: settings.ttsVoice,
                 ttsSpeed: settings.ttsSpeed,
                 ttsApiKey: ttsProviderConfig?.apiKey || undefined,
-                ttsBaseUrl: ttsProviderConfig?.baseUrl || undefined,
+                ttsBaseUrl:
+                  ttsProviderConfig?.baseUrl ||
+                  ttsProviderConfig?.customDefaultBaseUrl ||
+                  undefined,
               }),
               signal,
             });

components/agent/agent-bar.tsx

@@ -113,7 +113,10 @@ function AgentVoicePill({
             ttsVoice: voiceId,
             ttsSpeed: 1,
             ttsApiKey: providerConfig?.apiKey,
-            ttsBaseUrl: providerConfig?.serverBaseUrl || providerConfig?.baseUrl,
+            ttsBaseUrl:
+              providerConfig?.serverBaseUrl ||
+              providerConfig?.baseUrl ||
+              providerConfig?.customDefaultBaseUrl,
           }),
           signal: controller.signal,
         });
@@ -337,7 +340,10 @@ function TeacherVoicePill({
             ttsVoice: voiceId,
             ttsSpeed: 1,
             ttsApiKey: providerConfig?.apiKey,
-            ttsBaseUrl: providerConfig?.serverBaseUrl || providerConfig?.baseUrl,
+            ttsBaseUrl:
+              providerConfig?.serverBaseUrl ||
+              providerConfig?.baseUrl ||
+              providerConfig?.customDefaultBaseUrl,
           }),
           signal: controller.signal,
         });

components/audio/tts-config-popover.tsx

@@ -68,7 +68,7 @@ export function TtsConfigPopover() {
         voice: ttsVoice,
         speed: ttsSpeed,
         apiKey: providerConfig?.apiKey,
-        baseUrl: providerConfig?.baseUrl,
+        baseUrl: providerConfig?.baseUrl || providerConfig?.customDefaultBaseUrl,
       });
     } catch (error) {
       const message =

components/generation/media-popover.tsx

@@ -9,8 +9,8 @@
   Mic,
   SlidersHorizontal,
   ChevronRight,
   Play,
   Loader2,
 } from 'lucide-react';
 import { toast } from 'sonner';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
@@ -24,7 +24,7 @@
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
 import { Slider } from '@/components/ui/slider';
 import { Switch } from '@/components/ui/switch';
 import { cn } from '@/lib/utils';
 import { useI18n } from '@/lib/hooks/use-i18n';
@@ -32,10 +32,11 @@
 import { useTTSPreview } from '@/lib/audio/use-tts-preview';
 import { IMAGE_PROVIDERS } from '@/lib/media/image-providers';
 import { VIDEO_PROVIDERS } from '@/lib/media/video-providers';
-import { TTS_PROVIDERS, getTTSVoices } from '@/lib/audio/constants';
+import { TTS_PROVIDERS, getTTSVoices, CUSTOM_ASR_DEFAULT_LANGUAGES } from '@/lib/audio/constants';
 import { ASR_PROVIDERS, getASRSupportedLanguages } from '@/lib/audio/constants';
 import type { ImageProviderId, VideoProviderId } from '@/lib/media/types';
 import type { TTSProviderId, ASRProviderId } from '@/lib/audio/types';
+import { isCustomASRProvider } from '@/lib/audio/types';
 import type { SettingsSection } from '@/lib/types/settings';
 
 interface MediaPopoverProps {
@@ -137,9 +138,9 @@
   const ttsVoice = useSettingsStore((s) => s.ttsVoice);
   const ttsSpeed = useSettingsStore((s) => s.ttsSpeed);
   const ttsProvidersConfig = useSettingsStore((s) => s.ttsProvidersConfig);
   const setTTSProvider = useSettingsStore((s) => s.setTTSProvider);
   const setTTSVoice = useSettingsStore((s) => s.setTTSVoice);
   const setTTSSpeed = useSettingsStore((s) => s.setTTSSpeed);
 
   const asrProviderId = useSettingsStore((s) => s.asrProviderId);
   const asrLanguage = useSettingsStore((s) => s.asrLanguage);
@@ -167,8 +168,6 @@
     needsKey: boolean,
   ) => !needsKey || !!configs[id]?.apiKey || !!configs[id]?.isServerConfigured;
 
-  const ttsSpeedRange = TTS_PROVIDERS[ttsProviderId]?.speedRange;
-
   // ─── Dynamic browser voices ───
   const [browserVoices, setBrowserVoices] = useState<SpeechSynthesisVoice[]>([]);
   useEffect(() => {
@@ -216,7 +215,7 @@
 
   // TTS: grouped by provider, voices as items (matching Image/Video pattern)
   // Browser-native voices are split into sub-groups by language.
   const ttsGroups = useMemo(() => {
     const groups: SelectGroupData[] = [];
 
     for (const p of Object.values(TTS_PROVIDERS)) {
@@ -261,7 +260,7 @@
   }, [ttsProvidersConfig, locale, browserVoices, t]);
 
   // TTS preview
   const handlePreview = useCallback(async () => {
     if (previewing) {
       stopPreview();
       return;
@@ -275,7 +274,7 @@
         voice: ttsVoice,
         speed: ttsSpeed,
         apiKey: providerConfig?.apiKey,
-        baseUrl: providerConfig?.baseUrl,
+        baseUrl: providerConfig?.baseUrl || providerConfig?.customDefaultBaseUrl,
       });
     } catch (error) {
       const message =
@@ -293,23 +292,41 @@
     ttsVoice,
   ]);
 
-  // ASR: only available providers
-  const asrGroups = useMemo(
-    () =>
-      Object.values(ASR_PROVIDERS)
-        .filter((p) => cfgOk(asrProvidersConfig, p.id, p.requiresApiKey))
-        .map((p) => ({
-          groupId: p.id,
-          groupName: p.name,
-          groupIcon: p.icon,
-          available: true,
-          items: getASRSupportedLanguages(p.id).map((l) => ({
-            id: l,
-            name: l,
-          })),
+  // ASR: built-in + custom providers
+  const asrGroups = useMemo(() => {
+    const groups: SelectGroupData[] = [];
+
+    // Built-in providers
+    for (const p of Object.values(ASR_PROVIDERS)) {
+      if (!cfgOk(asrProvidersConfig, p.id, p.requiresApiKey)) continue;
+      groups.push({
+        groupId: p.id,
+        groupName: p.name,
+        groupIcon: p.icon,
+        available: true,
+        items: getASRSupportedLanguages(p.id).map((l) => ({
+          id: l,
+          name: l,
         })),
-    [asrProvidersConfig],
-  );
+      });
+    }
+
+    // Custom providers — only show if at least one model is configured
+    for (const [id, cfg] of Object.entries(asrProvidersConfig)) {
+      if (!isCustomASRProvider(id)) continue;
+      const customModels = cfg.customModels || [];
+      if (customModels.length === 0) continue;
+      const providerName = cfg.customName || id;
+      groups.push({
+        groupId: id,
+        groupName: providerName,
+        available: true,
+        items: CUSTOM_ASR_DEFAULT_LANGUAGES.map((l) => ({ id: l, name: l })),
+      });
+    }
+
+    return groups;
+  }, [asrProvidersConfig]);
 
   // Auto-select first enabled tab on open
   const handleOpenChange = (isOpen: boolean) => {

components/settings/add-audio-provider-dialog.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import { useState } from 'react';
+import { Dialog, DialogContent, DialogTitle, DialogDescription } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Plus } from 'lucide-react';
+import { useI18n } from '@/lib/hooks/use-i18n';
+
+export interface NewAudioProviderData {
+  name: string;
+  baseUrl: string;
+  defaultModel: string;
+  requiresApiKey: boolean;
+}
+
+interface AddAudioProviderDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onAdd: (data: NewAudioProviderData) => void;
+  type: 'tts' | 'asr';
+}
+
+export function AddAudioProviderDialog({
+  open,
+  onOpenChange,
+  onAdd,
+  type,
+}: AddAudioProviderDialogProps) {
+  const { t } = useI18n();
+
+  const [name, setName] = useState('');
+  const [baseUrl, setBaseUrl] = useState('');
+  const [defaultModel, setDefaultModel] = useState('');
+  const [requiresApiKey, setRequiresApiKey] = useState(false);
+
+  // Reset form when dialog closes
+  const [prevOpen, setPrevOpen] = useState(open);
+  if (open !== prevOpen) {
+    setPrevOpen(open);
+    if (!open) {
+      setName('');
+      setBaseUrl('');
+      setDefaultModel('');
+      setRequiresApiKey(false);
+    }
+  }
+
+  const handleAdd = () => {
+    if (!name.trim() || !baseUrl.trim()) return;
+    onAdd({
+      name: name.trim(),
+      baseUrl: baseUrl.trim(),
+      defaultModel: defaultModel.trim(),
+      requiresApiKey,
+    });
+    onOpenChange(false);
+  };
+
+  const titleKey =
+    type === 'tts' ? 'settings.addCustomTTSProvider' : 'settings.addCustomASRProvider';
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[450px]">
+        <DialogTitle className="sr-only">{t(titleKey)}</DialogTitle>
+        <DialogDescription className="sr-only">
+          {t('settings.addCustomAudioProviderDescription')}
+        </DialogDescription>
+        <div className="space-y-4">
+          <div className="pb-3 border-b">
+            <h2 className="text-lg font-semibold">{t(titleKey)}</h2>
+            <p className="text-xs text-muted-foreground mt-1">
+              {t('settings.addCustomAudioProviderDescription')}
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <Label>{t('settings.providerName')}</Label>
+            <Input
+              placeholder={type === 'tts' ? 'My Local TTS' : 'My Local ASR'}
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label>{t('settings.defaultBaseUrl')}</Label>
+            <Input
+              type="url"
+              placeholder="http://localhost:8000/v1"
+              value={baseUrl}
+              onChange={(e) => setBaseUrl(e.target.value)}
+            />
+          </div>
+
+          {/* Default Model — TTS only (ASR models are managed in provider settings) */}
+          {type === 'tts' && (
+            <div className="space-y-2">
+              <Label>{t('settings.defaultModel')}</Label>
+              <Input
+                placeholder="tts-1"
+                value={defaultModel}
+                onChange={(e) => setDefaultModel(e.target.value)}
+              />
+              <p className="text-xs text-muted-foreground">{t('settings.defaultModelHint')}</p>
+            </div>
+          )}
+
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="audio-requires-api-key"
+              checked={requiresApiKey}
+              onCheckedChange={(checked) => setRequiresApiKey(checked as boolean)}
+            />
+            <label htmlFor="audio-requires-api-key" className="text-sm cursor-pointer">
+              {t('settings.requiresApiKey')}
+            </label>
+          </div>
+
+          <div className="flex items-center justify-end gap-2 pt-3 border-t">
+            <Button variant="outline" size="sm" onClick={() => onOpenChange(false)}>
+              {t('settings.cancelEdit')}
+            </Button>
+            <Button
+              size="sm"
+              onClick={handleAdd}
+              disabled={!name.trim() || !baseUrl.trim()}
+              className="gap-1.5"
+            >
+              <Plus className="h-3.5 w-3.5" />
+              {t('settings.addProviderButton')}
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}