ape2e/tests/zipvoice-cloning-ui.spec.ts

import type { Page, Route } from '@playwright/test'

import { captureScreenshot, expect, test } from './fixtures'
import { loginAsAdmin } from './helpers'

type JsonRecord = Record<string, unknown>

const envelope = (data: unknown) => ({
  code: 0,
  message: '成功',
  data,
  timestamp: Date.now(),
  requestId: 'ape2e-zipvoice-controlled',
})

const fulfillJson = (route: Route, data: unknown, status = 200) => route.fulfill({
  status,
  contentType: 'application/json',
  body: JSON.stringify(envelope(data)),
})

const voiceRow = (page: Page, name: string) => page
  .locator('.voice-clone-table .el-table__row')
  .filter({ hasText: name })
  .first()

const baseCapability = {
  dataVersion: 1,
  capabilityType: 'VOICE_CLONE',
  type: 'SHERPA_ZIPVOICE',
  description: '受控测试音色',
  reference: '参考录音.wav',
  referenceText: '进入检修区域前，请确认设备已停机、断电、卸压。',
  gender: 'MALE',
  enabled: true,
  builtIn: false,
  updatedAt: '2026-08-22T10:00:00+08:00',
}

test('ZipVoice 受控 UI：克隆契约、异步状态、重试与数字形象默认音色', async ({ page }, testInfo) => {
  test.setTimeout(120_000)
  await loginAsAdmin(page)

  const requests: { create?: JsonRecord; retry?: JsonRecord; speech?: JsonRecord; avatarUpdate?: JsonRecord; builtIn?: string | null } = {}
  let capabilities = [
    {
      ...baseCapability,
      id: 'builtin-voice-male-gentle',
      name: '温和男声',
      type: '平台内置音色',
      builtIn: true,
      voiceRuntimeMode: 'TTS_SPEAKER',
      validationStatus: 'AVAILABLE',
      status: 'ENABLED',
      mediaUrl: '',
      referenceText: null,
    },
    {
      ...baseCapability,
      id: 'clone-sample-only',
      name: '历史参考样音',
      voiceRuntimeMode: 'SAMPLE_ONLY',
      validationStatus: 'UNTESTED',
      status: 'ENABLED',
      mediaUrl: 'data:audio/wav;base64,UklGRgAAAABXQVZF',
      referenceText: null,
      gender: 'UNSPECIFIED',
    },
    {
      ...baseCapability,
      id: 'clone-processing',
      name: '排队中的男教员',
      voiceRuntimeMode: 'ZIPVOICE_PROCESSING',
      cloneStatus: 'PROCESSING',
      cloneProgress: 42,
      currentJobId: 'JOB-ZIPVOICE-42',
      validationStatus: 'UNTESTED',
      status: 'PROCESSING',
    },
    {
      ...baseCapability,
      id: 'clone-failed',
      name: '待重试音色',
      voiceRuntimeMode: 'ZIPVOICE_FAILED',
      cloneStatus: 'FAILED',
      currentJobId: 'JOB-ZIPVOICE-FAILED',
      validationStatus: 'UNAVAILABLE',
      status: 'FAILED',
      errorMessage: '参考音频有效人声时长不足',
    },
    {
      ...baseCapability,
      id: 'clone-ready',
      name: '可用克隆男声',
      voiceRuntimeMode: 'ZIPVOICE_READY',
      cloneStatus: 'READY',
      cloneProgress: 100,
      validationStatus: 'AVAILABLE',
      status: 'ENABLED',
      previewUrl: 'data:audio/wav;base64,UklGRgAAAABXQVZF',
      mediaUrl: 'data:audio/wav;base64,UklGRgAAAABXQVZF',
    },
  ]

  const ttsVoices = [
    { id: 'male-gentle', capabilityId: 'builtin-voice-male-gentle', name: '温和男声', speaker: 1, gender: 'male', language: 'zh-CN', runtimeMode: 'VITS' },
    { id: 'clone-ready', capabilityId: 'clone-ready', name: '可用克隆男声', speaker: null, gender: 'male', language: 'zh-CN', runtimeMode: 'ZIPVOICE' },
  ]

  const avatar = {
    id: 'avatar-controlled',
    dataVersion: 3,
    name: '受控维修教员',
    status: 'ready',
    bundleReady: true,
    owner: '系统管理员',
    ownerId: '1',
    ownerName: '系统管理员',
    sourceType: 'user',
    role: '维修教员',
    specialty: '装备检修',
    gender: '男',
    visibility: 'private',
    voiceCapabilityId: 'builtin-voice-male-gentle',
    voice: { capabilityId: 'builtin-voice-male-gentle', speaker: 1, name: '温和男声', speed: 0.8 },
    coverUrl: '/avatar-previews/mechanical-male.png',
    previewUrl: '/avatar-previews/mechanical-male.mp4',
    viewerUrl: '/human/viewer/avatar-controlled',
    updatedAt: '2026-08-22T10:00:00+08:00',
  }

  await page.route(/\/api\/v1\/tts(?:\/|\?|$)/, async (route) => {
    const url = new URL(route.request().url())
    if (route.request().method() === 'GET' && url.pathname.endsWith('/tts/voices')) {
      return fulfillJson(route, { ready: true, engine: 'sherpa-onnx', device: 'cpu', items: ttsVoices, error: null, missing: [] })
    }
    if (route.request().method() === 'POST' && url.pathname.endsWith('/tts')) {
      requests.speech = route.request().postDataJSON() as JsonRecord
      return fulfillJson(route, {
        status: 'succeeded', id: 'speech-controlled', audioUrl: 'data:audio/wav;base64,UklGRgAAAABXQVZF',
        mimeType: 'audio/wav', sampleRate: 24000, duration: 1, speaker: null,
        voiceCapabilityId: requests.speech.voiceCapabilityId, runtimeMode: 'ZIPVOICE', speed: 0.9,
      })
    }
    return route.fallback()
  })

  await page.route(/\/api\/v1\/files(?:\/|\?|$)/, async (route) => {
    const url = new URL(route.request().url())
    if (route.request().method() === 'POST' && url.pathname.endsWith('/files/signed-urls')) {
      return fulfillJson(route, { items: [{ id: 'file-controlled', fileCode: 'file-controlled', url: '/api/v1/files/file-controlled/content?expires=1999999999&signature=controlled', expiresAt: 1999999999, mediaType: 'audio/wav' }] })
    }
    if (route.request().method() === 'POST' && url.pathname.endsWith('/files')) {
      return fulfillJson(route, { id: 'file-controlled', databaseId: '91', originalName: 'reference.wav', mediaType: 'audio/wav', purposeCode: 'CAPABILITY_SOURCE', size: 1024, sha256: 'controlled', status: 'READY', downloadUrl: '' }, 201)
    }
    return route.fallback()
  })

  await page.route(/\/api\/v1\/capabilities(?:\/|\?|$)/, async (route) => {
    const request = route.request()
    const url = new URL(request.url())
    const retryMatch = url.pathname.match(/\/capabilities\/([^/]+)\/voice-clone\/retry$/)
    if (retryMatch && request.method() === 'POST') {
      requests.retry = request.postDataJSON() as JsonRecord
      await new Promise((resolve) => setTimeout(resolve, 350))
      capabilities = capabilities.map((item) => item.id === retryMatch[1]
        ? { ...item, dataVersion: 2, voiceRuntimeMode: 'ZIPVOICE_PROCESSING', cloneStatus: 'QUEUED', cloneProgress: 0, status: 'PROCESSING', errorMessage: '' }
        : item)
      return fulfillJson(route, capabilities.find((item) => item.id === retryMatch[1]))
    }
    const detailMatch = url.pathname.match(/\/capabilities\/([^/]+)$/)
    if (detailMatch && request.method() === 'GET') {
      return fulfillJson(route, capabilities.find((item) => item.id === detailMatch[1]))
    }
    if (url.pathname.endsWith('/capabilities') && request.method() === 'POST') {
      requests.create = request.postDataJSON() as JsonRecord
      const created = {
        ...baseCapability,
        ...requests.create,
        id: 'clone-new-processing',
        dataVersion: 1,
        name: String(requests.create.name || ''),
        mediaFileCode: 'file-controlled',
        mediaUrl: '',
        voiceRuntimeMode: 'ZIPVOICE_PROCESSING',
        cloneStatus: 'QUEUED',
        cloneProgress: 0,
        currentJobId: 'JOB-ZIPVOICE-NEW',
        validationStatus: 'UNTESTED',
        status: 'PROCESSING',
      }
      capabilities = [created, ...capabilities]
      return fulfillJson(route, created, 201)
    }
    if (url.pathname.endsWith('/capabilities') && request.method() === 'GET') {
      requests.builtIn = url.searchParams.get('builtIn')
      const visible = requests.builtIn == null
        ? capabilities
        : capabilities.filter((item) => item.builtIn === (requests.builtIn === 'true'))
      return fulfillJson(route, { items: visible, total: visible.length, page: 1, pageSize: 10, pages: 1 })
    }
    return route.fallback()
  })

  await page.route(/\/api\/v1\/avatars(?:\/|\?|$)/, async (route) => {
    const request = route.request()
    const url = new URL(request.url())
    if (request.method() === 'GET' && url.pathname.endsWith('/avatars')) {
      return fulfillJson(route, { items: [avatar], total: 1, page: 1, pageSize: 9, pages: 1 })
    }
    if (request.method() === 'PUT' && url.pathname.endsWith(`/avatars/${avatar.id}`)) {
      requests.avatarUpdate = request.postDataJSON() as JsonRecord
      Object.assign(avatar, {
        ...requests.avatarUpdate,
        dataVersion: 4,
        voiceCapabilityId: requests.avatarUpdate.voiceCapabilityId,
        voice: { capabilityId: requests.avatarUpdate.voiceCapabilityId, speaker: null, name: '可用克隆男声', speed: 0.8 },
      })
      return fulfillJson(route, avatar)
    }
    return route.fallback()
  })

  await page.route(/\/api\/v1\/avatar-preferences(?:\?|$)/, (route) => fulfillJson(route, {
    defaultAvatarId: '', builtInVisible: true, dataVersion: 1,
  }))

  await page.goto('/assets/voice-clones')
  await expect(page.getByRole('heading', { name: '声音克隆' })).toBeVisible()
  await expect(voiceRow(page, '历史参考样音')).toContainText('待开始克隆')
  await expect(voiceRow(page, '排队中的男教员')).toContainText('42%')
  const failedInitialRow = voiceRow(page, '待重试音色')
  await expect(failedInitialRow).not.toContainText('参考音频有效人声时长不足')
  await expect(voiceRow(page, '可用克隆男声')).toContainText('克隆音色可用')
  const builtinRow = voiceRow(page, '温和男声')
  await expect(builtinRow).toContainText('平台内置')
  await expect(builtinRow).toContainText('VITS')
  await expect(builtinRow.getByRole('button', { name: '试听', exact: true })).toBeVisible()
  await expect(builtinRow.getByRole('button', { name: '编辑', exact: true })).toHaveCount(0)
  await expect(builtinRow.getByRole('button', { name: '停用', exact: true })).toHaveCount(0)
  await expect(builtinRow.getByRole('button', { name: '删除', exact: true })).toHaveCount(0)
  await failedInitialRow.getByRole('button', { name: '详情', exact: true }).click()
  const failedDetailDialog = page.locator('.model-detail-dialog:visible').last()
  await expect(failedDetailDialog).toContainText('参考音频有效人声时长不足')
  await failedDetailDialog.getByRole('button', { name: '关闭', exact: true }).click()
  const readyDetailRow = voiceRow(page, '可用克隆男声')
  await readyDetailRow.getByRole('button', { name: '详情', exact: true }).click()
  const detailDialog = page.locator('.model-detail-dialog:visible').last()
  await expect(detailDialog.locator('.el-dialog__title')).toHaveText('音色详情')
  await expect(detailDialog).toContainText('可用克隆男声')
  await expect(detailDialog).toContainText('ZipVoice')
  await detailDialog.getByRole('button', { name: '关闭', exact: true }).click()
  await captureScreenshot(page, testInfo, '01-zipvoice-async-states')

  await page.locator('.voice-ownership-filter').click()
  await page.locator('.el-select-dropdown:visible .el-select-dropdown__item').filter({ hasText: '自定义音色' }).click()
  await page.getByRole('button', { name: '搜索', exact: true }).click()
  await expect.poll(() => requests.builtIn).toBe('false')
  await expect(voiceRow(page, '温和男声')).toHaveCount(0)

  const failedRow = voiceRow(page, '待重试音色')
  await failedRow.getByRole('button', { name: '重新克隆' }).click()
  await expect(failedRow.locator('.el-button.is-loading')).toBeVisible()
  await expect.poll(() => requests.retry?.dataVersion).toBe(1)
  await expect(voiceRow(page, '待重试音色')).toContainText('排队中')

  const readyRow = voiceRow(page, '可用克隆男声')
  await readyRow.getByRole('button', { name: '试听', exact: true }).click()
  await expect.poll(() => requests.speech?.voiceCapabilityId).toBe('clone-ready')
  await expect(readyRow.locator('.voice-table-preview audio')).toBeVisible()

  await page.getByRole('button', { name: /新建克隆音色/ }).click()
  const dialog = page.locator('.admin-form-dialog:visible').last()
  const genderField = dialog.locator('.voice-gender-field')
  const engineField = dialog.locator('.voice-engine-field')
  await expect(engineField).toContainText('Sherpa-ONNX ZipVoice')
  await expect(engineField).toContainText('CPU')
  const [genderBox, engineBox] = await Promise.all([genderField.boundingBox(), engineField.boundingBox()])
  expect(genderBox).not.toBeNull()
  expect(engineBox).not.toBeNull()
  expect(engineBox!.x).toBeGreaterThan(genderBox!.x)
  expect(genderBox!.x + genderBox!.width).toBeLessThanOrEqual(engineBox!.x)
  await dialog.locator('.capability-form > label').filter({ hasText: '名称' }).locator('input').fill('受控 ZipVoice 男教员')
  await dialog.locator('.capability-form > label').filter({ hasText: '性别' }).locator('.el-select').click()
  await page.locator('.el-select-dropdown:visible .el-select-dropdown__item').filter({ hasText: '男声' }).click()
  await dialog.locator('.capability-form > label').filter({ hasText: '说明' }).locator('textarea').fill('用于装备维修逐步讲解')
  await dialog.locator('.reference-transcript textarea').fill('进入检修区域前，请确认设备已停机、断电、卸压。')
  await dialog.locator('.el-dialog__body').evaluate((element) => { element.scrollTop = 0 })
  await captureScreenshot(page, testInfo, '02-zipvoice-required-fields')
  await dialog.locator('.voice-capture-panel input[type="file"]').setInputFiles({
    name: 'reference.wav',
    mimeType: 'audio/wav',
    buffer: Buffer.from('RIFF-controlled-wave'),
  })
  await expect(dialog.locator('.voice-consent .el-checkbox__label')).toHaveCSS('white-space', 'nowrap')
  await dialog.locator('.voice-consent').click()
  await captureScreenshot(page, testInfo, '03-zipvoice-source-and-consent')
  await dialog.getByRole('button', { name: '提交克隆任务' }).click()
  await expect(dialog.getByRole('button', { name: '提交克隆任务' })).toHaveClass(/is-loading/)
  await expect(dialog).toBeHidden()
  expect(requests.create).toMatchObject({
    capabilityType: 'VOICE_CLONE',
    type: 'SHERPA_ZIPVOICE',
    name: '受控 ZipVoice 男教员',
    gender: 'MALE',
    referenceText: '进入检修区域前，请确认设备已停机、断电、卸压。',
    mediaFileCode: 'file-controlled',
    consentConfirmed: true,
  })
  await expect(voiceRow(page, '受控 ZipVoice 男教员')).toContainText('排队中')

  await page.goto('/assets/avatars')
  await expect(page.getByRole('heading', { name: '数字形象' })).toBeVisible()
  const avatarCard = page.locator('.avatar-card').filter({ hasText: avatar.name })
  await avatarCard.getByRole('button', { name: '编辑' }).click()
  const avatarDialog = page.locator('.admin-form-dialog:visible').last()
  const voiceSelect = avatarDialog.locator('.el-form-item').filter({ hasText: '默认音色' }).locator('.el-select')
  await voiceSelect.click()
  const dropdown = page.locator('.el-select-dropdown:visible').last()
  await expect(dropdown).toContainText('温和男声（内置）')
  await expect(dropdown).toContainText('可用克隆男声（克隆）')
  await expect(dropdown).not.toContainText('排队中的男教员')
  await dropdown.locator('.el-select-dropdown__item').filter({ hasText: '可用克隆男声' }).click()
  await captureScreenshot(page, testInfo, '04-avatar-default-ready-voice-only')
  await avatarDialog.getByRole('button', { name: '保存修改' }).click()
  await expect.poll(() => requests.avatarUpdate?.voiceCapabilityId).toBe('clone-ready')
  expect(requests.avatarUpdate?.voiceSpeed).toBe(0.8)
})