dsh-audiogen 0.3.4 → 0.4.0

package/src/client/audio-player.tsx

@@ -0,0 +1,87 @@
+/**
+ * Custom audio player: play/pause, seekable progress and time readout.
+ * Replaces the native `<audio controls>` look with a themed control so the
+ * panel matches the DSH design tokens in light and dark modes.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { MuteIcon, PauseIcon, PlayIcon, VolumeIcon } from './icons.tsx'
+import css from './audio-panel.module.css'
+
+function format(seconds: number): string {
+  if (!Number.isFinite(seconds) || seconds < 0) return '0:00'
+  const whole = Math.floor(seconds)
+  const minutes = Math.floor(whole / 60)
+  const rest = whole % 60
+  return `${minutes}:${rest < 10 ? `0${rest}` : String(rest)}`
+}
+
+export function AudioPlayer(props: {
+  src: string
+  compact?: boolean
+  /** Optional key to force a fresh element when the source changes identity. */
+  itemKey?: string
+}): React.JSX.Element {
+  const ref = useRef<HTMLAudioElement | null>(null)
+  const [playing, setPlaying] = useState(false)
+  const [muted, setMuted] = useState(false)
+  const [current, setCurrent] = useState(0)
+  const [duration, setDuration] = useState(0)
+
+  useEffect(() => {
+    // Reset when the source changes (the media element re-loads).
+    setPlaying(false)
+    setCurrent(0)
+    setDuration(0)
+  }, [props.src])
+
+  const toggle = useCallback((): void => {
+    const el = ref.current
+    if (el === null) return
+    if (el.paused) void el.play().catch(() => { /* autoplay/interrupt best-effort */ })
+    else el.pause()
+  }, [])
+
+  const seek = useCallback((event: React.MouseEvent<HTMLDivElement>): void => {
+    const el = ref.current
+    if (el === null || duration <= 0) return
+    const rect = event.currentTarget.getBoundingClientRect()
+    const ratio = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width))
+    el.currentTime = ratio * duration
+  }, [duration])
+
+  const toggleMute = useCallback((): void => {
+    const el = ref.current
+    if (el === null) return
+    el.muted = !el.muted
+    setMuted(el.muted)
+  }, [])
+
+  const percent = duration > 0 ? Math.min(100, (current / duration) * 100) : 0
+
+  return (
+    <div className={props.compact === true ? css.playerCompact : css.player} data-playing={playing ? 'true' : 'false'}>
+      <audio
+        ref={ref}
+        src={props.src}
+        preload="metadata"
+        onPlay={() => setPlaying(true)}
+        onPause={() => setPlaying(false)}
+        onEnded={() => setPlaying(false)}
+        onTimeUpdate={event => setCurrent(event.currentTarget.currentTime)}
+        onLoadedMetadata={event => setDuration(event.currentTarget.duration)}
+      />
+      <button type="button" className={css.playButton} aria-label={playing ? '暂停' : '播放'} onClick={toggle}>
+        {playing ? <PauseIcon /> : <PlayIcon />}
+      </button>
+      <div className={css.track} role="slider" aria-label="播放进度" aria-valuemin={0} aria-valuemax={Math.round(duration)} aria-valuenow={Math.round(current)} onClick={seek}>
+        <div className={css.trackFill} style={{ width: `${percent}%` }} />
+        <div className={css.trackKnob} style={{ left: `${percent}%` }} />
+      </div>
+      <span className={css.time}>{format(current)}{duration > 0 ? ` / ${format(duration)}` : ''}</span>
+      <button type="button" className={css.muteButton} aria-label={muted ? '取消静音' : '静音'} onClick={toggleMute}>
+        {muted ? <MuteIcon /> : <VolumeIcon />}
+      </button>
+    </div>
+  )
+}

package/src/client/icons.tsx

@@ -0,0 +1,170 @@
+/**
+ * Tiny inline SVG icon set for the AI 音频 panel (no icon dependency).
+ * Each icon is a 1em × 1em stroke/fill glyph that inherits currentColor.
+ */
+
+import type { JSX, ReactNode } from 'react'
+
+function Svg(props: { children: ReactNode; viewBox?: string }): JSX.Element {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox={props.viewBox ?? '0 0 16 16'}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      {props.children}
+    </svg>
+  )
+}
+
+export function PlayIcon(): JSX.Element {
+  return (
+    <Svg viewBox="0 0 16 16">
+      <path d="M5 3.2v9.6a.6.6 0 0 0 .9.5l7.5-4.8a.6.6 0 0 0 0-1L5.9 2.7a.6.6 0 0 0-.9.5Z" fill="currentColor" stroke="none" />
+    </Svg>
+  )
+}
+
+export function PauseIcon(): JSX.Element {
+  return (
+    <Svg viewBox="0 0 16 16">
+      <rect x="4.2" y="2.8" width="2.6" height="10.4" rx="0.9" fill="currentColor" stroke="none" />
+      <rect x="9.2" y="2.8" width="2.6" height="10.4" rx="0.9" fill="currentColor" stroke="none" />
+    </Svg>
+  )
+}
+
+export function StarIcon(props: { filled?: boolean }): JSX.Element {
+  return (
+    <Svg viewBox="0 0 16 16">
+      <path
+        d="M8 1.9l1.8 3.7 4.1.6-3 2.9.7 4.1L8 11.2l-3.6 1.9.7-4.1-3-2.9 4.1-.6L8 1.9Z"
+        fill={props.filled === true ? 'currentColor' : 'none'}
+      />
+    </Svg>
+  )
+}
+
+export function DownloadIcon(): JSX.Element {
+  return (
+    <Svg viewBox="0 0 16 16">
+      <path d="M8 2.5v7M8 9.5l-2.6-2.6M8 9.5l2.6-2.6" />
+      <path d="M2.8 10.8v1.7a1 1 0 0 0 1 1h8.4a1 1 0 0 0 1-1v-1.7" />
+    </Svg>
+  )
+}
+
+export function TrashIcon(): JSX.Element {
+  return (
+    <Svg viewBox="0 0 16 16">
+      <path d="M3 4.4h10M6.2 2.9h3.6M5.2 4.4l.5 8a1 1 0 0 0 1 .9h2.6a1 1 0 0 0 1-.9l.5-8" />
+    </Svg>
+  )
+}
+
+export function SearchIcon(): JSX.Element {
+  return (
+    <Svg viewBox="0 0 16 16">
+      <circle cx="7" cy="7" r="4.2" />
+      <path d="m10.2 10.2 3 3" />
+    </Svg>
+  )
+}
+
+export function CopyIcon(): JSX.Element {
+  return (
+    <Svg viewBox="0 0 16 16">
+      <rect x="5.4" y="5.4" width="7.4" height="7.4" rx="1.2" />
+      <path d="M10.6 5.4V4a1.2 1.2 0 0 0-1.2-1.2H4A1.2 1.2 0 0 0 2.8 4v5.4A1.2 1.2 0 0 0 4 10.6h1.4" />
+    </Svg>
+  )
+}
+
+export function CheckIcon(): JSX.Element {
+  return (
+    <Svg viewBox="0 0 16 16">
+      <path d="m3.2 8.4 3.1 3.1L12.8 4.9" />
+    </Svg>
+  )
+}
+
+export function CloseIcon(): JSX.Element {
+  return (
+    <Svg viewBox="0 0 16 16">
+      <path d="m4 4 8 8M12 4l-8 8" />
+    </Svg>
+  )
+}
+
+export function VolumeIcon(): JSX.Element {
+  return (
+    <Svg viewBox="0 0 16 16">
+      <path d="M2.8 6.2v3.6h2.4l3 2.6V3.6l-3 2.6H2.8Z" fill="currentColor" stroke="none" />
+      <path d="M10.4 5.6a3.4 3.4 0 0 1 0 4.8M12 4.2a5.6 5.6 0 0 1 0 7.6" />
+    </Svg>
+  )
+}
+
+export function MuteIcon(): JSX.Element {
+  return (
+    <Svg viewBox="0 0 16 16">
+      <path d="M2.8 6.2v3.6h2.4l3 2.6V3.6l-3 2.6H2.8Z" fill="currentColor" stroke="none" />
+      <path d="m10.4 6.2 3.2 3.6M13.6 6.2l-3.2 3.6" />
+    </Svg>
+  )
+}
+
+export function MicIcon(): JSX.Element {
+  return (
+    <Svg viewBox="0 0 16 16">
+      <rect x="5.8" y="2" width="4.4" height="7.2" rx="2.2" />
+      <path d="M3.2 8a4.8 4.8 0 0 0 9.6 0M8 12.8V14" />
+    </Svg>
+  )
+}
+
+export function MusicNoteIcon(): JSX.Element {
+  return (
+    <Svg viewBox="0 0 16 16">
+      <path d="M6.2 12.6V4l6-1.4v8.6" />
+      <circle cx="4.7" cy="12.6" r="1.7" />
+      <circle cx="10.7" cy="11.2" r="1.7" />
+    </Svg>
+  )
+}
+
+export function WaveIcon(): JSX.Element {
+  return (
+    <Svg viewBox="0 0 16 16">
+      <path d="M2 6h1M4.5 3.5v9M7.2 2v12M9.9 4v8M12.6 5.5v5M14.5 6.5v3" />
+    </Svg>
+  )
+}
+
+export function GridIcon(): JSX.Element {
+  return (
+    <Svg viewBox="0 0 16 16">
+      <rect x="2.5" y="2.5" width="4.6" height="4.6" rx="1" />
+      <rect x="8.9" y="2.5" width="4.6" height="4.6" rx="1" />
+      <rect x="2.5" y="8.9" width="4.6" height="4.6" rx="1" />
+      <rect x="8.9" y="8.9" width="4.6" height="4.6" rx="1" />
+    </Svg>
+  )
+}
+
+export function ListIcon(): JSX.Element {
+  return (
+    <Svg viewBox="0 0 16 16">
+      <path d="M5.4 4.2h8.2M5.4 8h8.2M5.4 11.8h8.2" />
+      <circle cx="2.8" cy="4.2" r="0.8" fill="currentColor" stroke="none" />
+      <circle cx="2.8" cy="8" r="0.8" fill="currentColor" stroke="none" />
+      <circle cx="2.8" cy="11.8" r="0.8" fill="currentColor" stroke="none" />
+    </Svg>
+  )
+}

package/src/client/library-save-dialog.tsx

@@ -0,0 +1,173 @@
+/**
+ * «保存到资源库» dialog: pick type/category, set name/tags/note, then save.
+ * Built from either freshly generated audio or a history entry.
+ */
+
+import { useMemo, useState } from 'react'
+import type { AudiogenApi } from './api.ts'
+import type { AudioMode, GeneratedAudio, LibraryEntry, LibraryType } from '../protocol.ts'
+import css from './audio-panel.module.css'
+
+export interface SaveDialogContext {
+  mode: AudioMode
+  prompt: string
+  voice?: string
+  voiceId?: string
+  model?: string
+  channel?: string
+  channelId?: string
+  params?: Record<string, unknown>
+}
+
+export function typeOfMode(mode: AudioMode): LibraryType {
+  if (mode === 'voice_design') return 'voice'
+  return mode
+}
+
+export const LIBRARY_TYPE_LABELS: Record<LibraryType, string> = {
+  voice: '音色',
+  music: '音乐',
+  sfx: '音效',
+  tts: 'TTS 语音',
+}
+
+function parseTags(text: string): string[] {
+  return [...new Set(text.split(/[,，、\n]/).map(tag => tag.trim()).filter(tag => tag !== ''))].slice(0, 20)
+}
+
+function guessCategory(type: LibraryType, context: SaveDialogContext): string {
+  if (type === 'voice') {
+    const probe = `${context.voiceId ?? ''} ${context.voice ?? ''}`.toLowerCase()
+    if (/male|男/.test(probe)) return 'male'
+    if (/female|女/.test(probe)) return 'female'
+    return 'custom'
+  }
+  if (type === 'tts') return (context.voice ?? context.voiceId ?? 'default').replace(/[^a-zA-Z0-9\u4e00-\u9fa5._-]+/g, '_')
+  return ''
+}
+
+export function LibrarySaveDialog(props: {
+  api: AudiogenApi
+  files: GeneratedAudio[]
+  context: SaveDialogContext
+  onClose: () => void
+  onSaved: (entry: LibraryEntry) => void
+}): React.JSX.Element {
+  const { api, files, context } = props
+  const [type, setType] = useState<LibraryType>(typeOfMode(context.mode))
+  const [category, setCategory] = useState(() => guessCategory(typeOfMode(context.mode), context))
+  const [name, setName] = useState('')
+  const [tags, setTags] = useState('')
+  const [note, setNote] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const isVoice = type === 'voice'
+  const isTts = type === 'tts'
+
+  const defaultName = useMemo(() => {
+    const flat = context.prompt.replace(/\s+/g, ' ').trim()
+    return flat === '' ? '未命名音频' : (flat.length > 40 ? `${flat.slice(0, 40)}…` : flat)
+  }, [context.prompt])
+
+  const switchType = (next: LibraryType): void => {
+    setType(next)
+    setCategory(guessCategory(next, context))
+  }
+
+  const save = async (): Promise<void> => {
+    setSaving(true)
+    setError(null)
+    try {
+      const result = await api.librarySave({
+        audioFiles: files.map(file => ({
+          id: file.id,
+          file: file.file,
+          mime: file.mime,
+          ...(file.voiceId === undefined ? {} : { voiceId: file.voiceId }),
+          ...(file.duration === undefined ? {} : { duration: file.duration }),
+        })),
+        type,
+        ...(category.trim() !== '' && (isVoice || isTts) ? { category: category.trim() } : {}),
+        ...(name.trim() !== '' ? { name: name.trim() } : {}),
+        ...(parseTags(tags).length > 0 ? { tags: parseTags(tags) } : {}),
+        ...(note.trim() !== '' ? { note: note.trim() } : {}),
+        provenance: {
+          mode: context.mode,
+          prompt: context.prompt,
+          ...(context.channel === undefined ? {} : { channel: context.channel }),
+          ...(context.channelId === undefined ? {} : { channelId: context.channelId }),
+          ...(context.model === undefined ? {} : { model: context.model }),
+          ...(context.voice === undefined ? {} : { voice: context.voice }),
+          ...(context.voiceId === undefined ? {} : { voiceId: context.voiceId }),
+          ...(context.params === undefined ? {} : { params: context.params }),
+        },
+      })
+      if (!result.ok || result.entry === undefined) {
+        setError(result.message ?? '保存失败')
+        return
+      }
+      props.onSaved(result.entry)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div className={css.modalMask}>
+      <div className={css.modal} role="dialog" aria-modal="true" aria-label="保存到资源库">
+        <div className={css.modalHead}>
+          <strong>{files.length > 1 ? `保存 ${files.length} 段音频到资源库` : '保存到资源库'}</strong>
+          <button type="button" className={css.iconButton} aria-label="关闭" onClick={props.onClose}>×</button>
+        </div>
+        <div className={css.modalBody}>
+          <div className={css.formRow}>
+            <label className={css.label}>
+              <span>资源类型</span>
+              <select className={css.input} value={type} onChange={event => switchType(event.target.value as LibraryType)}>
+                {(['voice', 'music', 'sfx', 'tts'] as LibraryType[]).map(item => (
+                  <option key={item} value={item}>{LIBRARY_TYPE_LABELS[item]}</option>
+                ))}
+              </select>
+            </label>
+            {isVoice || isTts ? (
+              <label className={css.label}>
+                <span>{isVoice ? '音色分级（男 / 女）' : '按音色归档（voice 键）'}</span>
+                {isVoice ? (
+                  <select className={css.input} value={category} onChange={event => setCategory(event.target.value)}>
+                    <option value="male">男声 male</option>
+                    <option value="female">女声 female</option>
+                    <option value="custom">未分级 custom</option>
+                  </select>
+                ) : (
+                  <input className={css.input} value={category} onChange={event => setCategory(event.target.value)} placeholder={context.voice ?? 'default'} />
+                )}
+              </label>
+            ) : null}
+          </div>
+          <label className={css.label}>
+            <span>名称（留空则使用提示词）</span>
+            <input className={css.input} value={name} onChange={event => setName(event.target.value)} placeholder={defaultName} />
+          </label>
+          <label className={css.label}>
+            <span>标签（逗号分隔，可多个）</span>
+            <input className={css.input} value={tags} onChange={event => setTags(event.target.value)} placeholder={'温暖, 男声, 复古…'} />
+          </label>
+          <label className={css.label}>
+            <span>备注（可选）</span>
+            <textarea className={css.textarea} rows={2} value={note} onChange={event => setNote(event.target.value)} placeholder="用途、风格备注…" />
+          </label>
+          {error !== null ? <p className={css.error}>{error}</p> : null}
+        </div>
+        <div className={css.modalFoot}>
+          <button type="button" className={css.secondaryButton} onClick={props.onClose}>取消</button>
+          <button type="button" className={css.primaryButton} disabled={saving || files.length === 0} onClick={() => void save()}>
+            {saving ? '保存中…' : '保存到资源库'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}