bdim/Canto
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

init commit

Browse Source 
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
bdim404
2026-01-26 15:34:31 +08:00
commit 80513a3258
141 changed files with 24966 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

230
qwen3-tts-frontend/src/components/JobDetailDialog.tsx Normal file
View File

@@ -0,0 +1,230 @@
import { memo } from 'react'
import type { Job } from '@/types/job'
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog'
import { Badge } from '@/components/ui/badge'
import { Separator } from '@/components/ui/separator'
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from '@/components/ui/collapsible'
import { ScrollArea } from '@/components/ui/scroll-area'
import { AudioPlayer } from '@/components/AudioPlayer'
import { ChevronDown, AlertCircle } from 'lucide-react'
import { jobApi } from '@/lib/api'
interface JobDetailDialogProps {
job: Job | null
open: boolean
onOpenChange: (open: boolean) => void
}
const jobTypeBadgeVariant = {
custom_voice: 'default' as const,
voice_design: 'secondary' as const,
voice_clone: 'outline' as const,
}
const jobTypeLabel = {
custom_voice: '自定义音色',
voice_design: '音色设计',
voice_clone: '声音克隆',
}
const formatTimestamp = (timestamp: string) => {
return new Date(timestamp).toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
})
}
const getLanguageDisplay = (lang: string | undefined) => {
if (!lang || lang === 'Auto') return '自动检测'
return lang
}
const formatBooleanDisplay = (value: boolean | undefined) => {
return value ? '是' : '否'
}
const JobDetailDialog = memo(({ job, open, onOpenChange }: JobDetailDialogProps) => {
if (!job) return null
const canPlay = job.status === 'completed'
const audioUrl = canPlay ? jobApi.getAudioUrl(job.id, job.audio_url) : ''
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-2xl max-h-[90vh] bg-background">
<DialogHeader>
<div className="flex items-center justify-between gap-3">
<DialogTitle className="flex items-center gap-2">
<Badge variant={jobTypeBadgeVariant[job.type]}>
{jobTypeLabel[job.type]}
</Badge>
<span className="text-sm text-muted-foreground">#{job.id}</span>
</DialogTitle>
<span className="text-sm text-muted-foreground">
{formatTimestamp(job.created_at)}
</span>
</div>
</DialogHeader>
<ScrollArea className="max-h-[calc(90vh-120px)] pr-4">
<div className="space-y-4">
<div className="space-y-2">
<h3 className="font-semibold text-sm">基本信息</h3>
<div className="space-y-1.5 text-sm bg-muted/30 p-3 rounded-lg">
{job.type === 'custom_voice' && job.parameters?.speaker && (
<div>
<span className="text-muted-foreground">发音人: </span>
<span>{job.parameters.speaker}</span>
</div>
)}
<div>
<span className="text-muted-foreground">语言: </span>
<span>{getLanguageDisplay(job.parameters?.language)}</span>
</div>
{job.type === 'voice_clone' && (
<>
<div>
<span className="text-muted-foreground">快速模式: </span>
<span>{formatBooleanDisplay(job.parameters?.x_vector_only_mode)}</span>
</div>
<div>
<span className="text-muted-foreground">使用缓存: </span>
<span>{formatBooleanDisplay(job.parameters?.use_cache)}</span>
</div>
</>
)}
</div>
</div>
<Separator />
<div className="space-y-2">
<h3 className="font-semibold text-sm">合成文本</h3>
<div className="text-sm bg-muted/30 p-3 rounded-lg border">
{job.parameters?.text || <span className="text-muted-foreground">未设置</span>}
</div>
</div>
{job.type === 'voice_design' && job.parameters?.instruct && (
<>
<Separator />
<div className="space-y-2">
<h3 className="font-semibold text-sm">音色描述</h3>
<div className="text-sm bg-blue-50 dark:bg-blue-950/30 p-3 rounded-lg border border-blue-200 dark:border-blue-800">
{job.parameters.instruct}
</div>
</div>
</>
)}
{job.type === 'custom_voice' && job.parameters?.instruct && (
<>
<Separator />
<div className="space-y-2">
<h3 className="font-semibold text-sm">情绪指导</h3>
<div className="text-sm bg-muted/30 p-3 rounded-lg border">
{job.parameters.instruct}
</div>
</div>
</>
)}
{job.type === 'voice_clone' && (
<>
<Separator />
<div className="space-y-2">
<h3 className="font-semibold text-sm">参考文本</h3>
<div className="text-sm bg-muted/30 p-3 rounded-lg border">
{job.parameters?.ref_text || <span className="text-muted-foreground">未提供</span>}
</div>
</div>
</>
)}
<Separator />
<Collapsible>
<CollapsibleTrigger className="flex items-center gap-2 text-sm font-semibold hover:text-foreground transition-colors w-full">
高级参数
<ChevronDown className="w-4 h-4 transition-transform ui-expanded:rotate-180" />
</CollapsibleTrigger>
<CollapsibleContent className="pt-3">
<div className="space-y-1.5 text-sm bg-muted/30 p-3 rounded-lg border">
{job.parameters?.max_new_tokens !== undefined && (
<div>
<span className="text-muted-foreground">最大生成长度: </span>
<span>{job.parameters.max_new_tokens}</span>
</div>
)}
{job.parameters?.temperature !== undefined && (
<div>
<span className="text-muted-foreground">温度: </span>
<span>{job.parameters.temperature}</span>
</div>
)}
{job.parameters?.top_k !== undefined && (
<div>
<span className="text-muted-foreground">Top K: </span>
<span>{job.parameters.top_k}</span>
</div>
)}
{job.parameters?.top_p !== undefined && (
<div>
<span className="text-muted-foreground">Top P: </span>
<span>{job.parameters.top_p}</span>
</div>
)}
{job.parameters?.repetition_penalty !== undefined && (
<div>
<span className="text-muted-foreground">重复惩罚: </span>
<span>{job.parameters.repetition_penalty}</span>
</div>
)}
</div>
</CollapsibleContent>
</Collapsible>
{job.status === 'failed' && job.error_message && (
<>
<Separator />
<div className="flex items-start gap-2 p-3 bg-red-50 dark:bg-red-950/30 rounded-lg border border-red-200 dark:border-red-800">
<AlertCircle className="w-4 h-4 text-destructive mt-0.5 shrink-0" />
<div>
<h3 className="font-semibold text-sm text-destructive mb-1">错误信息</h3>
<p className="text-sm text-destructive">{job.error_message}</p>
</div>
</div>
</>
)}
{canPlay && (
<>
<Separator />
<div className="space-y-2">
<h3 className="font-semibold text-sm">音频播放</h3>
<AudioPlayer audioUrl={audioUrl} jobId={job.id} />
</div>
</>
)}
</div>
</ScrollArea>
</DialogContent>
</Dialog>
)
})
JobDetailDialog.displayName = 'JobDetailDialog'
export { JobDetailDialog }