dsh-audiogen 0.1.0 → 0.3.0

package/src/audio-engine.ts

@@ -164,7 +164,7 @@ async function fetchWithTimeout(url: string, init: RequestInit, timeoutMs: numbe
 async function normalizeAudioResponse(
   response: Response,
   options: { apiKey: string; fallbackMime?: string },
-): Promise<Array<{ data: Uint8Array; mime: string }>> {
+): Promise<Array<{ data: Uint8Array; mime: string; voiceId?: string }>> {
   if (!response.ok) {
     let detail = ''
     try {
@@ -187,13 +187,14 @@ async function normalizeAudioResponse(
     } catch {
       throw new AudioGenError('audio endpoint returned an unprocessable response body', 'audio-bad-response')
     }
-    const base64 = findBase64Audio(parsed)
-    if (base64 !== undefined && base64.length > 0) {
+    const encoded = findBase64Audio(parsed)
+    if (encoded !== undefined && encoded.length > 0) {
       let data: Uint8Array
       try {
-        data = new Uint8Array(Buffer.from(base64, 'base64'))
+        const isHex = /^[0-9a-fA-F]+$/.test(encoded) && encoded.length % 2 === 0
+        data = new Uint8Array(Buffer.from(encoded, isHex ? 'hex' : 'base64'))
       } catch {
-        throw new AudioGenError('audio endpoint returned invalid base64', 'audio-bad-response')
+        throw new AudioGenError('audio endpoint returned invalid audio encoding', 'audio-bad-response')
       }
       return [{ data, mime: detectAudioMime(data) ?? contentType ?? 'audio/mpeg' }]
     }
@@ -212,7 +213,7 @@ async function normalizeAudioResponse(
   return [{ data: buffer, mime: audioMime(buffer, response.headers.get('content-type') ?? contentType ?? null) }]
 }
 
-async function openAITTS(channel: AudioChannel, request: GenerateAudioRequest, signal?: AbortSignal): Promise<Array<{ data: Uint8Array; mime: string }>> {
+async function openAITTS(channel: AudioChannel, request: GenerateAudioRequest, signal?: AbortSignal): Promise<Array<{ data: Uint8Array; mime: string; voiceId?: string }>> {
   const base = endpointBase(channel.apiUrl)
   const endpoint = /\/audio\/speech(\?|$)/i.test(base) ? base : `${base}/audio/speech`
   const model = (request.upstream ?? request.model) || 'tts-1'
@@ -238,7 +239,7 @@ async function openAITTS(channel: AudioChannel, request: GenerateAudioRequest, s
   return normalizeAudioResponse(response, { apiKey: channel.apiKey, fallbackMime: 'audio/mpeg' })
 }
 
-async function elevenLabs(channel: AudioChannel, request: GenerateAudioRequest, signal?: AbortSignal): Promise<Array<{ data: Uint8Array; mime: string }>> {
+async function elevenLabs(channel: AudioChannel, request: GenerateAudioRequest, signal?: AbortSignal): Promise<Array<{ data: Uint8Array; mime: string; voiceId?: string }>> {
   const base = endpointBase(channel.apiUrl)
   const model = (request.upstream ?? request.model) || 'eleven_multilingual_v2'
   const voiceId = (request.voice ?? request.model ?? model).trim()
@@ -268,27 +269,90 @@ async function elevenLabs(channel: AudioChannel, request: GenerateAudioRequest,
   return normalizeAudioResponse(response, { apiKey: channel.apiKey, fallbackMime: 'audio/mpeg' })
 }
 
-async function minimax(channel: AudioChannel, request: GenerateAudioRequest, signal?: AbortSignal): Promise<Array<{ data: Uint8Array; mime: string }>> {
-  const base = endpointBase(channel.apiUrl)
-  const endpoint = /\/t2a_v2(\?|$)/i.test(base) ? base : `${base}/t2a_v2`
-  const model = (request.upstream ?? request.model) || 'speech-01-turbo'
+function minimaxApiBase(base: string): string {
+  const trimmed = endpointBase(base)
+  return /\/v1$/i.test(trimmed) ? trimmed : `${trimmed}/v1`
+}
+
+async function minimax(channel: AudioChannel, request: GenerateAudioRequest, signal?: AbortSignal): Promise<Array<{ data: Uint8Array; mime: string; voiceId?: string }>> {
+  const base = minimaxApiBase(channel.apiUrl)
+  const model = (request.upstream ?? request.model) || (request.mode === 'music' ? 'music-3.0' : 'speech-2.8-hd')
   const voice = request.voice ?? request.model ?? ''
-  const body: Record<string, unknown> = {
-    model,
-    text: request.prompt,
-    stream: false,
-    ...(voice === '' ? {} : { voice_setting: {
-      voice_id: voice,
-      ...(request.speed !== undefined ? { speed: request.speed } : {}),
-      vol: 1,
-      pitch: 0,
-    } }),
-    audio_setting: {
-      format: request.format ?? 'mp3',
-      sample_rate: 32000,
-      bitrate: 128000,
-    },
+
+  if (request.mode === 'voice_design') {
+    const endpoint = `${base}/voice_design`
+    const body: Record<string, unknown> = {
+      prompt: request.prompt,
+      preview_text: request.previewText ?? request.voice ?? '你好，这是新设计的音色试听。',
+    }
+    const response = await fetchWithTimeout(endpoint, {
+      method: 'POST',
+      redirect: 'error',
+      headers: {
+        authorization: `Bearer ${channel.apiKey.trim()}`,
+        'content-type': 'application/json',
+        accept: 'application/json',
+      },
+      body: JSON.stringify(body),
+      signal,
+    }, UPSTREAM_TIMEOUT_MS)
+    if (!response.ok) {
+      const detail = await response.text().catch(() => '')
+      throw new AudioGenError(`MiniMax voice design API error (HTTP ${response.status})${detail === '' ? '' : `: ${detail.slice(0, 300)}`}`, 'audio-api-error')
+    }
+    const payload = await response.json() as {
+      voice_id?: string
+      trial_audio?: string
+      base_resp?: { status_code?: number; status_msg?: string }
+    }
+    if (payload.base_resp?.status_code !== undefined && payload.base_resp.status_code !== 0) {
+      throw new AudioGenError(payload.base_resp.status_msg ?? `MiniMax returned status ${payload.base_resp.status_code}`, 'audio-api-error')
+    }
+    const encoded = payload.trial_audio ?? ''
+    if (encoded === '') throw new AudioGenError('MiniMax voice design returned no trial audio', 'audio-empty-result')
+    const isHex = /^[0-9a-fA-F]+$/.test(encoded) && encoded.length % 2 === 0
+    const data = new Uint8Array(Buffer.from(encoded, isHex ? 'hex' : 'base64'))
+    return [{
+      data,
+      mime: 'audio/mpeg',
+      ...(payload.voice_id === undefined ? {} : { voiceId: payload.voice_id }),
+    }]
   }
+
+  let endpoint: string
+  let body: Record<string, unknown>
+  if (request.mode === 'music') {
+    endpoint = `${base}/music_generation`
+    body = {
+      model,
+      prompt: request.prompt,
+      ...(request.duration !== undefined ? { duration: request.duration } : {}),
+      audio_setting: {
+        format: request.format ?? 'mp3',
+        sample_rate: 44100,
+        bitrate: 256000,
+      },
+    }
+  } else {
+    endpoint = `${base}/t2a_v2`
+    body = {
+      model,
+      text: request.prompt,
+      stream: false,
+      ...(voice === '' ? {} : { voice_setting: {
+        voice_id: voice,
+        ...(request.speed !== undefined ? { speed: request.speed } : {}),
+        vol: 1,
+        pitch: 0,
+      } }),
+      audio_setting: {
+        format: request.format ?? 'mp3',
+        sample_rate: 32000,
+        bitrate: 128000,
+      },
+    }
+  }
+
   const response = await fetchWithTimeout(endpoint, {
     method: 'POST',
     redirect: 'error',
@@ -303,7 +367,7 @@ async function minimax(channel: AudioChannel, request: GenerateAudioRequest, sig
   return normalizeAudioResponse(response, { apiKey: channel.apiKey, fallbackMime: 'audio/mpeg' })
 }
 
-async function stabilityAudio(channel: AudioChannel, request: GenerateAudioRequest, signal?: AbortSignal): Promise<Array<{ data: Uint8Array; mime: string }>> {
+async function stabilityAudio(channel: AudioChannel, request: GenerateAudioRequest, signal?: AbortSignal): Promise<Array<{ data: Uint8Array; mime: string; voiceId?: string }>> {
   const base = endpointBase(channel.apiUrl)
   const endpoint = /\/generation(\?|$)/i.test(base) ? base : `${base}/generation`
   const model = (request.upstream ?? request.model) || 'stable-audio-2.0'
@@ -327,7 +391,7 @@ async function stabilityAudio(channel: AudioChannel, request: GenerateAudioReque
   return normalizeAudioResponse(response, { apiKey: channel.apiKey, fallbackMime: 'audio/mpeg' })
 }
 
-async function genericAudio(channel: AudioChannel, request: GenerateAudioRequest, signal?: AbortSignal): Promise<Array<{ data: Uint8Array; mime: string }>> {
+async function genericAudio(channel: AudioChannel, request: GenerateAudioRequest, signal?: AbortSignal): Promise<Array<{ data: Uint8Array; mime: string; voiceId?: string }>> {
   const base = endpointBase(channel.apiUrl)
   if (request.mode === 'tts' && !/\/generate(\?|$)/i.test(base)) {
     return openAITTS(channel, request, signal)
@@ -364,10 +428,13 @@ export async function generateAudio(
   channel: AudioChannel,
   request: GenerateAudioRequest,
   signal?: AbortSignal,
-): Promise<Array<{ data: Uint8Array; mime: string }>> {
+): Promise<Array<{ data: Uint8Array; mime: string; voiceId?: string }>> {
   if (channel.apiUrl.trim() === '') throw new AudioGenError('channel API URL is not configured', 'audio-no-endpoint')
   if (channel.apiKey.trim() === '') throw new AudioGenError('channel API key is not configured', 'audio-no-key')
   if (request.prompt.trim() === '') throw new AudioGenError('audio prompt/text is required', 'audio-empty-prompt')
+  if (request.mode === 'voice_design' && !isMiniMax(channel)) {
+    throw new AudioGenError('音色设计当前仅支持 MiniMax 渠道', 'voice-design-unsupported')
+  }
 
   if (isElevenLabs(channel)) return elevenLabs(channel, request, signal)
   if (isMiniMax(channel)) return minimax(channel, request, signal)

package/src/audio-models.ts

@@ -0,0 +1,129 @@
+/**
+ * Host-side model/voice discovery.
+ *
+ * MiniMax exposes a voice-management API that returns all available system and
+ * user-generated voice ids; we combine those with the known MiniMax music
+ * models so the settings card can offer a full categorized catalog.
+ */
+
+import type { AudioChannel } from './audio-engine.ts'
+import type { AudioModelCategory, DiscoveredAudioModel } from './protocol.ts'
+import { audioPresetById } from './audio-presets.ts'
+
+function isMiniMax(channel: AudioChannel): boolean {
+  return channel.preset === 'minimax' || /minimax/i.test(channel.apiUrl)
+}
+
+function baseUrl(url: string): string {
+  return url.trim().replace(/\/+$/, '')
+}
+
+function categoryFor(id: string): AudioModelCategory | undefined {
+  const value = id.toLowerCase()
+  if (/(tts|speech|voice|t2a)/i.test(value)) return 'tts'
+  if (/(music|song|cover|lyrics)/i.test(value)) return 'music'
+  if (/(sfx|sound.?effect|effect|foley)/i.test(value)) return 'sfx'
+  return undefined
+}
+
+async function postJson(url: string, apiKey: string, body: unknown): Promise<unknown> {
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: {
+      authorization: `Bearer ${apiKey.trim()}`,
+      'content-type': 'application/json',
+    },
+    body: JSON.stringify(body),
+  })
+  if (!response.ok) {
+    const text = await response.text().catch(() => '')
+    throw new Error(`HTTP ${response.status}${text === '' ? '' : `: ${text.slice(0, 300)}`}`)
+  }
+  return response.json()
+}
+
+/** Discover available models/voices for a channel. */
+export async function discoverAudioModels(channel: AudioChannel): Promise<{ models: DiscoveredAudioModel[]; source: string }> {
+  if (channel.apiUrl.trim() === '') throw new Error('API URL is not configured')
+  if (channel.apiKey.trim() === '') throw new Error('API key is not configured')
+
+  if (isMiniMax(channel)) {
+    const base = baseUrl(channel.apiUrl).replace(/\/v1$/i, '')
+    const url = `${base}/v1/get_voice`
+    const payload = await postJson(url, channel.apiKey, { voice_type: 'all' }) as {
+      system_voice?: Array<{ voice_id?: string; voice_name?: string; description?: string[] }>
+      voice_cloning?: Array<{ voice_id?: string; description?: string[] }>
+      voice_generation?: Array<{ voice_id?: string; description?: string[] }>
+      base_resp?: { status_code?: number; status_msg?: string }
+    }
+    if (payload.base_resp?.status_code !== undefined && payload.base_resp.status_code !== 0) {
+      throw new Error(payload.base_resp.status_msg ?? `MiniMax returned status ${payload.base_resp.status_code}`)
+    }
+    const models: DiscoveredAudioModel[] = []
+    for (const voice of payload.system_voice ?? []) {
+      const id = voice.voice_id?.trim() ?? ''
+      if (id === '') continue
+      models.push({
+        alias: voice.voice_name?.trim() || id,
+        id,
+        category: 'tts',
+        ...(voice.description !== undefined && voice.description.length > 0 ? { description: voice.description.join('；') } : {}),
+      })
+    }
+    for (const voice of payload.voice_cloning ?? []) {
+      const id = voice.voice_id?.trim() ?? ''
+      if (id === '') continue
+      models.push({
+        alias: id,
+        id,
+        category: 'tts',
+        ...(voice.description !== undefined && voice.description.length > 0 ? { description: voice.description.join('；') } : {}),
+      })
+    }
+    for (const voice of payload.voice_generation ?? []) {
+      const id = voice.voice_id?.trim() ?? ''
+      if (id === '') continue
+      models.push({
+        alias: id,
+        id,
+        category: 'tts',
+        ...(voice.description !== undefined && voice.description.length > 0 ? { description: voice.description.join('；') } : {}),
+      })
+    }
+    // MiniMax music models are not returned by get_voice; append the static catalog.
+    const music = (audioPresetById('minimax')?.models ?? []).filter(model => model.category === 'music')
+    for (const model of music) models.push({ ...model, category: 'music' as const })
+    const deduped = dedupe(models)
+    return { models: deduped, source: 'MiniMax get_voice + built-in music catalog' }
+  }
+
+  // Best-effort OpenAI-compatible /models discovery.
+  const base = baseUrl(channel.apiUrl)
+  const url = `${base}/models`
+  const response = await fetch(url, {
+    headers: { authorization: `Bearer ${channel.apiKey.trim()}` },
+  })
+  if (!response.ok) {
+    throw new Error(`model list request failed (HTTP ${response.status}); please add models manually`)
+  }
+  const payload = await response.json() as { data?: Array<{ id?: string }> }
+  const models: DiscoveredAudioModel[] = []
+  for (const item of payload.data ?? []) {
+    const id = item.id?.trim() ?? ''
+    if (id === '') continue
+    const category = categoryFor(id) ?? 'tts'
+    models.push({ alias: id, id, category })
+  }
+  return { models: dedupe(models), source: 'OpenAI-compatible /models' }
+}
+
+function dedupe(models: DiscoveredAudioModel[]): DiscoveredAudioModel[] {
+  const seen = new Set<string>()
+  const out: DiscoveredAudioModel[] = []
+  for (const model of models) {
+    if (seen.has(model.id)) continue
+    seen.add(model.id)
+    out.push(model)
+  }
+  return out
+}

package/src/audio-presets.ts

@@ -26,9 +26,9 @@ export const AUDIO_PRESETS: AudioPresetProvider[] = [
     apiUrl: 'https://api.openai.com/v1',
     hint: 'OpenAI 官方语音合成接口（/audio/speech）',
     models: [
-      { alias: 'tts-1', id: 'tts-1' },
-      { alias: 'tts-1-hd', id: 'tts-1-hd' },
-      { alias: 'gpt-4o-mini-tts', id: 'gpt-4o-mini-tts' },
+      { alias: 'tts-1', id: 'tts-1', category: 'tts' },
+      { alias: 'tts-1-hd', id: 'tts-1-hd', category: 'tts' },
+      { alias: 'gpt-4o-mini-tts', id: 'gpt-4o-mini-tts', category: 'tts' },
     ],
   },
   {
@@ -37,22 +37,31 @@ export const AUDIO_PRESETS: AudioPresetProvider[] = [
     apiUrl: 'https://api.elevenlabs.io/v1',
     hint: 'ElevenLabs TTS；模型列表请填写你的 Voice ID（如 Rachel / Adam 等别名）',
     models: [
-      { alias: 'Rachel', id: '21m00Tcm4TlvDq8ikWAM' },
-      { alias: 'Adam', id: 'pNInz6obpgDQGcFmaJgB' },
-      { alias: 'Antoni', id: 'ErXwobaYiN019PkySvjV' },
-      { alias: 'Bella', id: 'EXAVITQu4vr4xnSDxMaL' },
+      { alias: 'Rachel', id: '21m00Tcm4TlvDq8ikWAM', category: 'tts' },
+      { alias: 'Adam', id: 'pNInz6obpgDQGcFmaJgB', category: 'tts' },
+      { alias: 'Antoni', id: 'ErXwobaYiN019PkySvjV', category: 'tts' },
+      { alias: 'Bella', id: 'EXAVITQu4vr4xnSDxMaL', category: 'tts' },
     ],
   },
   {
     id: 'minimax',
     name: 'MiniMax',
-    apiUrl: 'https://api.minimax.chat/v1',
-    hint: 'MiniMax 语音合成（T2A）；需在 API URL 后按官方要求携带 GroupId 或使用完整接口地址',
+    apiUrl: 'https://api.minimaxi.com',
+    hint: 'MiniMax 音色设计 / TTS / 音乐生成；可使用“获取可用模型”拉取账号音色',
     models: [
-      { alias: 'speech-01-turbo', id: 'speech-01-turbo' },
-      { alias: 'speech-01-hd', id: 'speech-01-hd' },
-      { alias: 'speech-02-turbo', id: 'speech-02-turbo' },
-      { alias: 'speech-02-hd', id: 'speech-02-hd' },
+      // TTS models
+      { alias: 'speech-2.8-hd', id: 'speech-2.8-hd', category: 'tts' },
+      { alias: 'speech-2.8-turbo', id: 'speech-2.8-turbo', category: 'tts' },
+      { alias: 'speech-2.6-hd', id: 'speech-2.6-hd', category: 'tts' },
+      { alias: 'speech-2.6-turbo', id: 'speech-2.6-turbo', category: 'tts' },
+      { alias: 'speech-02-hd', id: 'speech-02-hd', category: 'tts' },
+      { alias: 'speech-02-turbo', id: 'speech-02-turbo', category: 'tts' },
+      { alias: 'speech-01-hd', id: 'speech-01-hd', category: 'tts' },
+      { alias: 'speech-01-turbo', id: 'speech-01-turbo', category: 'tts' },
+      // Music models
+      { alias: 'music-3.0', id: 'music-3.0', category: 'music' },
+      { alias: 'music-2.6', id: 'music-2.6', category: 'music' },
+      { alias: 'music-cover', id: 'music-cover', category: 'music' },
     ],
   },
   {
@@ -61,8 +70,8 @@ export const AUDIO_PRESETS: AudioPresetProvider[] = [
     apiUrl: 'https://api.stability.ai/v2beta/audio',
     hint: 'Stability AI 音乐/音效生成（stable-audio 系列）',
     models: [
-      { alias: 'stable-audio-2.0', id: 'stable-audio-2.0' },
-      { alias: 'stable-audio-1.0', id: 'stable-audio-1.0' },
+      { alias: 'stable-audio-2.0', id: 'stable-audio-2.0', category: 'music' },
+      { alias: 'stable-audio-1.0', id: 'stable-audio-1.0', category: 'music' },
     ],
   },
   {

package/src/audio-store.ts

@@ -99,6 +99,7 @@ export async function appendHistory(entry: HistoryEntryInput): Promise<HistoryEn
     model: entry.model,
     prompt: entry.prompt,
     ...(entry.voice === undefined ? {} : { voice: entry.voice }),
+    ...(entry.voiceId === undefined ? {} : { voiceId: entry.voiceId }),
     ...(entry.speed === undefined ? {} : { speed: entry.speed }),
     ...(entry.duration === undefined ? {} : { duration: entry.duration }),
     ...(entry.format === undefined ? {} : { format: entry.format }),
@@ -106,6 +107,7 @@ export async function appendHistory(entry: HistoryEntryInput): Promise<HistoryEn
       url: audio.url,
       mime: audio.mime,
       ...(audio.duration === undefined ? {} : { duration: audio.duration }),
+      ...(audio.voiceId === undefined ? {} : { voiceId: audio.voiceId }),
     })),
     ...(entry.channelId === undefined ? {} : { channelId: entry.channelId }),
     ...(entry.channel === undefined ? {} : { channel: entry.channel }),

package/src/client/AudioGenPanel.tsx

@@ -1,5 +1,8 @@
+
 /**
  * The AI 音频 panel: a compact audio-generation studio.
+ * TTS / music / SFX / voice design are separated; each mode only lists
+ * compatible models and shows its own parameters.
  */
 
 import { useEffect, useMemo, useState } from 'react'
@@ -7,7 +10,7 @@ import type { AudiogenApi } from './api.ts'
 import type { AudiogenScope } from './settings-scope.ts'
 import { audioModelOptions } from './settings-scope.ts'
 import { tt } from './helpers.ts'
-import { GENERATE_API, HISTORY_API, type AudioMode, type GeneratedAudio, type HistoryEntry } from '../protocol.ts'
+import { HISTORY_API, type AudioMode, type GeneratedAudio, type HistoryEntry } from '../protocol.ts'
 import css from './audio-panel.module.css'
 
 function useConfig(scope: AudiogenScope) {
@@ -47,11 +50,12 @@ export function AudioGenPanel(props: { api: AudiogenApi; scope: AudiogenScope })
   const channels = config?.channels ?? []
   const connected = enabled && channels.some(channel => {
     const keyHeld = scope.getSecretSetSnapshot(`channelSecrets.${channel.id}`)
-    return channel.apiUrl.trim() !== '' && keyHeld && channel.models.length > 0
+    return channel.apiUrl.trim() !== '' && keyHeld && (channel.models.length > 0 || channel.preset === 'minimax')
   })
 
   const [mode, setMode] = useState<AudioMode>('tts')
   const [prompt, setPrompt] = useState('')
+  const [previewText, setPreviewText] = useState('')
   const [model, setModel] = useState('')
   const [voice, setVoice] = useState('')
   const [speed, setSpeed] = useState('')
@@ -62,11 +66,18 @@ export function AudioGenPanel(props: { api: AudiogenApi; scope: AudiogenScope })
   const [outputs, setOutputs] = useState<GeneratedAudio[]>([])
   const { entries, reload, clear } = useHistory()
 
+  const visibleModels = useMemo(() => {
+    if (mode === 'voice_design') return []
+    return modelOptions.models
+      .filter(entry => entry.category === undefined || entry.category === 'tts' && mode === 'tts' || entry.category === mode)
+      .map(entry => entry.alias)
+  }, [modelOptions.models, mode])
+
   useEffect(() => {
-    if (modelOptions.models.length > 0 && !modelOptions.models.includes(model)) {
-      setModel(modelOptions.models[0]!)
+    if (visibleModels.length > 0 && !visibleModels.includes(model)) {
+      setModel(visibleModels[0]!)
     }
-  }, [modelOptions.models, model])
+  }, [visibleModels, model])
 
   const submit = async (): Promise<void> => {
     if (prompt.trim() === '') {
@@ -78,8 +89,9 @@ export function AudioGenPanel(props: { api: AudiogenApi; scope: AudiogenScope })
     try {
       const response = await api.generate({
         mode,
-        model: (model || modelOptions.models[0]) ?? '',
+        model: (model || visibleModels[0]) ?? '',
         prompt: prompt.trim(),
+        ...(previewText.trim() !== '' ? { previewText: previewText.trim() } : {}),
         ...(voice.trim() !== '' ? { voice: voice.trim() } : {}),
         ...(speed.trim() !== '' ? { speed: Number(speed) } : {}),
         ...(duration.trim() !== '' ? { duration: Number(duration) } : {}),
@@ -101,9 +113,12 @@ export function AudioGenPanel(props: { api: AudiogenApi; scope: AudiogenScope })
   const modeLabel = useMemo(() => {
     if (mode === 'tts') return tt('mode.tts')
     if (mode === 'music') return tt('mode.music')
-    return tt('mode.sfx')
+    if (mode === 'sfx') return tt('mode.sfx')
+    return tt('mode.voiceDesign')
   }, [mode])
 
+  const needModel = mode !== 'voice_design'
+
   return (
     <div className={css.panel}>
       <header className={css.header}>
@@ -113,7 +128,7 @@ export function AudioGenPanel(props: { api: AudiogenApi; scope: AudiogenScope })
       <div className={css.layout}>
         <div className={css.form}>
           <div className={css.modeRow}>
-            {(['tts', 'music', 'sfx'] as const).map(item => (
+            {(['tts', 'music', 'sfx', 'voice_design'] as const).map(item => (
               <button
                 key={item}
                 type="button"
@@ -121,50 +136,73 @@ export function AudioGenPanel(props: { api: AudiogenApi; scope: AudiogenScope })
                 data-active={mode === item ? 'true' : 'false'}
                 onClick={() => setMode(item)}
               >
-                {item === 'tts' ? tt('mode.tts') : item === 'music' ? tt('mode.music') : tt('mode.sfx')}
+                {item === 'tts' ? tt('mode.tts') : item === 'music' ? tt('mode.music') : item === 'sfx' ? tt('mode.sfx') : tt('mode.voiceDesign')}
               </button>
             ))}
           </div>
+
           <label className={css.label}>
-            <span>{mode === 'tts' ? '文本' : '提示词'}</span>
+            <span>{mode === 'voice_design' ? '音色描述' : mode === 'tts' ? '文本' : '提示词'}</span>
             <textarea className={css.textarea} value={prompt} onChange={event => setPrompt(event.target.value)} placeholder={tt('prompt.placeholder')} />
           </label>
-          <label className={css.label}>
-            <span>{tt('model.label')}</span>
-            <select className={css.select} value={model} onChange={event => setModel(event.target.value)}>
-              {modelOptions.models.length === 0 ? <option value="">（请在设置中添加）</option> : null}
-              {modelOptions.models.map(item => <option key={item} value={item}>{item}</option>)}
-            </select>
-          </label>
+
+          {mode === 'voice_design' ? (
+            <label className={css.label}>
+              <span>试听文本</span>
+              <input className={css.input} value={previewText} onChange={event => setPreviewText(event.target.value)} placeholder="你好，这是新设计的音色试听。" />
+            </label>
+          ) : null}
+
+          {needModel ? (
+            <label className={css.label}>
+              <span>{tt('model.label')}</span>
+              <select className={css.select} value={model} onChange={event => setModel(event.target.value)}>
+                {visibleModels.length === 0 ? <option value="">（当前模式暂无可用模型）</option> : null}
+                {visibleModels.map(item => <option key={item} value={item}>{item}</option>)}
+              </select>
+            </label>
+          ) : null}
+
           {mode === 'tts' ? (
             <label className={css.label}>
               <span>{tt('voice.label')}</span>
               <input className={css.input} value={voice} onChange={event => setVoice(event.target.value)} placeholder="alloy / 自定义音色" />
             </label>
           ) : null}
-          <label className={css.label}>
-            <span>{tt('speed.label')}</span>
-            <input className={css.input} type="number" step="0.1" min="0.5" max="2" value={speed} onChange={event => setSpeed(event.target.value)} placeholder="1.0" />
-          </label>
-          <label className={css.label}>
-            <span>{tt('duration.label')}</span>
-            <input className={css.input} type="number" step="1" min="1" max="120" value={duration} onChange={event => setDuration(event.target.value)} placeholder="30" />
-          </label>
-          <label className={css.label}>
-            <span>{tt('format.label')}</span>
-            <select className={css.select} value={format} onChange={event => setFormat(event.target.value)}>
-              <option value="mp3">mp3</option>
-              <option value="wav">wav</option>
-              <option value="flac">flac</option>
-              <option value="ogg">ogg</option>
-              <option value="pcm">pcm</option>
-            </select>
-          </label>
+
+          {mode === 'tts' ? (
+            <label className={css.label}>
+              <span>{tt('speed.label')}</span>
+              <input className={css.input} type="number" step="0.1" min="0.5" max="2" value={speed} onChange={event => setSpeed(event.target.value)} placeholder="1.0" />
+            </label>
+          ) : null}
+
+          {mode === 'music' || mode === 'sfx' ? (
+            <label className={css.label}>
+              <span>{tt('duration.label')}</span>
+              <input className={css.input} type="number" step="1" min="1" max="120" value={duration} onChange={event => setDuration(event.target.value)} placeholder="30" />
+            </label>
+          ) : null}
+
+          {needModel ? (
+            <label className={css.label}>
+              <span>{tt('format.label')}</span>
+              <select className={css.select} value={format} onChange={event => setFormat(event.target.value)}>
+                <option value="mp3">mp3</option>
+                <option value="wav">wav</option>
+                <option value="flac">flac</option>
+                <option value="ogg">ogg</option>
+                <option value="pcm">pcm</option>
+              </select>
+            </label>
+          ) : null}
+
           {!connected && <p className={css.hint}>{tt('config.missing')}</p>}
-          <button type="button" className={css.generate} disabled={loading || !connected} onClick={() => void submit()}>
+          <button type="button" className={css.generate} disabled={loading || !connected || (needModel && visibleModels.length === 0)} onClick={() => void submit()}>
             {loading ? tt('generating') : tt('generate')}
           </button>
         </div>
+
         <div className={css.result}>
           {error !== null ? <p className={css.error}>{error}</p> : null}
           {outputs.length === 0 ? <p className={css.empty}>{tt('result.empty')}</p> : (
@@ -173,6 +211,7 @@ export function AudioGenPanel(props: { api: AudiogenApi; scope: AudiogenScope })
               <div className={css.audioList}>
                 {outputs.map((audio, index) => (
                   <div className={css.audioCard} key={audio.id}>
+                    {audio.voiceId !== undefined ? <p className={css.hint}>新音色 ID：{audio.voiceId}</p> : null}
                     <audio className={css.audio} controls preload="metadata" src={dataUrlOf(audio)} />
                     <a className={css.download} href={dataUrlOf(audio)} download={`generated-${index + 1}.${audio.mime.split('/')[1]?.replace('mpeg', 'mp3') ?? 'mp3'}`}>下载</a>
                   </div>
@@ -181,6 +220,7 @@ export function AudioGenPanel(props: { api: AudiogenApi; scope: AudiogenScope })
             </>
           )}
         </div>
+
         <aside className={css.history}>
           <div className={css.historyHeader}>
             <strong className={css.historyTitle}>{tt('history.title')}</strong>