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

Add IconLabel component and integrate it into forms for improved accessibility and UI consistency

Browse Source
This commit is contained in:
bdim404
2026-01-26 17:11:03 +08:00
parent 23e72f80e5
commit 8f7b6ec773
6 changed files with 506 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
qwen3-tts-frontend/src/components/IconLabel.tsx Normal file
View File

@@ -0,0 +1,26 @@
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import type { ElementType } from 'react'
interface IconLabelProps {
icon: ElementType
tooltip: string
required?: boolean
}
export function IconLabel({ icon: Icon, tooltip, required = false }: IconLabelProps) {
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center gap-1 cursor-help">
<Icon className="h-4 w-4 text-muted-foreground" />
{required && <span className="text-destructive">*</span>}
</div>
</TooltipTrigger>
<TooltipContent>
<p>{tooltip}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
)
}

10
qwen3-tts-frontend/src/components/PresetSelector.tsx
View File

@@ -21,7 +21,7 @@ const PresetSelectorInner = <T extends Preset>({ presets, onSelect }: PresetSele
variant="outline"
size="sm"
onClick={() => onSelect(preset)}
className="text-xs md:text-sm px-2 h-6 md:h-7"
className="text-xs md:text-sm px-2 py-0.5 h-5"
>
{preset.label}
</Button>
@@ -34,19 +34,19 @@ const PresetSelectorInner = <T extends Preset>({ presets, onSelect }: PresetSele
}
return (
<div className="flex items-center gap-2 mt-1">
<div className="flex items-center gap-1.5 mt-1">
<div className="flex flex-wrap gap-1 flex-1">
{presetButtons}
</div>
<Button
type="button"
variant="ghost"
size="sm"
size="icon"
onClick={handleRandomSelect}
className="h-6 md:h-7 px-2 flex-shrink-0"
className="h-6 w-6 flex-shrink-0"
title="随机选择"
>
<Shuffle className="h-3.5 w-3.5" />
<Shuffle className="h-3 w-3" />
</Button>
</div>
)

256
qwen3-tts-frontend/src/components/tts/CustomVoiceForm.tsx
View File

@@ -6,10 +6,12 @@ import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from '@/components/ui/dialog'
import { Label } from '@/components/ui/label'
import { ChevronDown } from 'lucide-react'
import { Globe2, User, Type, Sparkles, Play, Settings } from 'lucide-react'
import { toast } from 'sonner'
import { IconLabel } from '@/components/IconLabel'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { ttsApi, jobApi } from '@/lib/api'
import { useJobPolling } from '@/hooks/useJobPolling'
import { LoadingState } from '@/components/LoadingState'
@@ -42,6 +44,13 @@ const CustomVoiceForm = forwardRef<CustomVoiceFormHandle>((_props, ref) => {
const [speakers, setSpeakers] = useState<Speaker[]>([])
const [isLoading, setIsLoading] = useState(false)
const [advancedOpen, setAdvancedOpen] = useState(false)
const [tempAdvancedParams, setTempAdvancedParams] = useState({
max_new_tokens: 2048,
temperature: 0.3,
top_k: 20,
top_p: 0.7,
repetition_penalty: 1.05
})
const { currentJob, isPolling, isCompleted, startPolling, elapsedTime } = useJobPolling()
@@ -116,9 +125,9 @@ const CustomVoiceForm = forwardRef<CustomVoiceFormHandle>((_props, ref) => {
}, [currentJob?.id, currentJob?.audio_url])
return (
<form onSubmit={handleSubmit(onSubmit)} className="space-y-3">
<div className="space-y-1">
<Label htmlFor="language">语言</Label>
<form onSubmit={handleSubmit(onSubmit)} className="space-y-2">
<div className="space-y-0.5">
<IconLabel icon={Globe2} tooltip="语言" required />
<Select
value={watch('language')}
onValueChange={(value: string) => setValue('language', value)}
@@ -139,8 +148,8 @@ const CustomVoiceForm = forwardRef<CustomVoiceFormHandle>((_props, ref) => {
)}
</div>
<div className="space-y-1">
<Label htmlFor="speaker">发音人</Label>
<div className="space-y-0.5">
<IconLabel icon={User} tooltip="发音人" required />
<Select
value={watch('speaker')}
onValueChange={(value: string) => setValue('speaker', value)}
@@ -161,8 +170,8 @@ const CustomVoiceForm = forwardRef<CustomVoiceFormHandle>((_props, ref) => {
)}
</div>
<div className="space-y-1">
<Label htmlFor="text">合成文本</Label>
<div className="space-y-0.5">
<IconLabel icon={Type} tooltip="合成文本" required />
<Textarea
{...register('text')}
placeholder="输入要合成的文本..."
@@ -173,8 +182,8 @@ const CustomVoiceForm = forwardRef<CustomVoiceFormHandle>((_props, ref) => {
)}
</div>
<div className="space-y-1">
<Label htmlFor="instruct">情绪指导（可选）</Label>
<div className="space-y-0.5">
<IconLabel icon={Sparkles} tooltip="情绪指导（可选）" />
<Textarea
{...register('instruct')}
placeholder="例如：温柔体贴，语速平缓，充满关怀"
@@ -194,68 +203,175 @@ const CustomVoiceForm = forwardRef<CustomVoiceFormHandle>((_props, ref) => {
)}
</div>
<Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
<CollapsibleTrigger asChild>
<Button type="button" variant="ghost" className="w-full py-1.5">
<Dialog open={advancedOpen} onOpenChange={(open) => {
if (open) {
setTempAdvancedParams({
max_new_tokens: watch('max_new_tokens'),
temperature: watch('temperature'),
top_k: watch('top_k'),
top_p: watch('top_p'),
repetition_penalty: watch('repetition_penalty')
})
}
setAdvancedOpen(open)
}}>
<DialogTrigger asChild>
<Button type="button" variant="outline" className="w-full">
<Settings className="mr-2 h-4 w-4" />
高级选项
<ChevronDown className="ml-2 h-4 w-4" />
</Button>
</CollapsibleTrigger>
<CollapsibleContent className="space-y-2 pt-2">
<ParamInput
name="max_new_tokens"
label={ADVANCED_PARAMS_INFO.max_new_tokens.label}
description={ADVANCED_PARAMS_INFO.max_new_tokens.description}
tooltip={ADVANCED_PARAMS_INFO.max_new_tokens.tooltip}
register={register}
min={1}
max={10000}
/>
<ParamInput
name="temperature"
label={ADVANCED_PARAMS_INFO.temperature.label}
description={ADVANCED_PARAMS_INFO.temperature.description}
tooltip={ADVANCED_PARAMS_INFO.temperature.tooltip}
register={register}
step={0.1}
min={0}
max={2}
/>
<ParamInput
name="top_k"
label={ADVANCED_PARAMS_INFO.top_k.label}
description={ADVANCED_PARAMS_INFO.top_k.description}
tooltip={ADVANCED_PARAMS_INFO.top_k.tooltip}
register={register}
min={1}
max={100}
/>
<ParamInput
name="top_p"
label={ADVANCED_PARAMS_INFO.top_p.label}
description={ADVANCED_PARAMS_INFO.top_p.description}
tooltip={ADVANCED_PARAMS_INFO.top_p.tooltip}
register={register}
step={0.1}
min={0}
max={1}
/>
<ParamInput
name="repetition_penalty"
label={ADVANCED_PARAMS_INFO.repetition_penalty.label}
description={ADVANCED_PARAMS_INFO.repetition_penalty.description}
tooltip={ADVANCED_PARAMS_INFO.repetition_penalty.tooltip}
register={register}
step={0.01}
min={0}
max={2}
/>
</CollapsibleContent>
</Collapsible>
</DialogTrigger>
<DialogContent className="sm:max-w-[500px]">
<DialogHeader>
<DialogTitle>高级参数设置</DialogTitle>
</DialogHeader>
<div className="space-y-4 py-4">
<div className="space-y-2">
<Label htmlFor="dialog-max_new_tokens">
{ADVANCED_PARAMS_INFO.max_new_tokens.label}
</Label>
<Input
id="dialog-max_new_tokens"
type="number"
min={1}
max={10000}
value={tempAdvancedParams.max_new_tokens}
onChange={(e) => setTempAdvancedParams({
...tempAdvancedParams,
max_new_tokens: parseInt(e.target.value) || 2048
})}
/>
<p className="text-sm text-muted-foreground">
{ADVANCED_PARAMS_INFO.max_new_tokens.description}
</p>
</div>
<div className="space-y-2">
<Label htmlFor="dialog-temperature">
{ADVANCED_PARAMS_INFO.temperature.label}
</Label>
<Input
id="dialog-temperature"
type="number"
min={0}
max={2}
step={0.1}
value={tempAdvancedParams.temperature}
onChange={(e) => setTempAdvancedParams({
...tempAdvancedParams,
temperature: parseFloat(e.target.value) || 0.3
})}
/>
<p className="text-sm text-muted-foreground">
{ADVANCED_PARAMS_INFO.temperature.description}
</p>
</div>
<div className="space-y-2">
<Label htmlFor="dialog-top_k">
{ADVANCED_PARAMS_INFO.top_k.label}
</Label>
<Input
id="dialog-top_k"
type="number"
min={1}
max={100}
value={tempAdvancedParams.top_k}
onChange={(e) => setTempAdvancedParams({
...tempAdvancedParams,
top_k: parseInt(e.target.value) || 20
})}
/>
<p className="text-sm text-muted-foreground">
{ADVANCED_PARAMS_INFO.top_k.description}
</p>
</div>
<div className="space-y-2">
<Label htmlFor="dialog-top_p">
{ADVANCED_PARAMS_INFO.top_p.label}
</Label>
<Input
id="dialog-top_p"
type="number"
min={0}
max={1}
step={0.1}
value={tempAdvancedParams.top_p}
onChange={(e) => setTempAdvancedParams({
...tempAdvancedParams,
top_p: parseFloat(e.target.value) || 0.7
})}
/>
<p className="text-sm text-muted-foreground">
{ADVANCED_PARAMS_INFO.top_p.description}
</p>
</div>
<div className="space-y-2">
<Label htmlFor="dialog-repetition_penalty">
{ADVANCED_PARAMS_INFO.repetition_penalty.label}
</Label>
<Input
id="dialog-repetition_penalty"
type="number"
min={0}
max={2}
step={0.01}
value={tempAdvancedParams.repetition_penalty}
onChange={(e) => setTempAdvancedParams({
...tempAdvancedParams,
repetition_penalty: parseFloat(e.target.value) || 1.05
})}
/>
<p className="text-sm text-muted-foreground">
{ADVANCED_PARAMS_INFO.repetition_penalty.description}
</p>
</div>
</div>
<DialogFooter>
<Button
type="button"
variant="outline"
onClick={() => {
setTempAdvancedParams({
max_new_tokens: watch('max_new_tokens'),
temperature: watch('temperature'),
top_k: watch('top_k'),
top_p: watch('top_p'),
repetition_penalty: watch('repetition_penalty')
})
setAdvancedOpen(false)
}}
>
取消
</Button>
<Button
type="button"
onClick={() => {
setValue('max_new_tokens', tempAdvancedParams.max_new_tokens)
setValue('temperature', tempAdvancedParams.temperature)
setValue('top_k', tempAdvancedParams.top_k)
setValue('top_p', tempAdvancedParams.top_p)
setValue('repetition_penalty', tempAdvancedParams.repetition_penalty)
setAdvancedOpen(false)
}}
>
确定
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
<Button type="submit" className="w-full" disabled={isLoading || isPolling}>
{isLoading ? '创建中...' : '生成语音'}
</Button>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button type="submit" className="w-full" disabled={isLoading || isPolling}>
<Play className="mr-2 h-4 w-4" />
{isLoading ? '创建中...' : '生成语音'}
</Button>
</TooltipTrigger>
<TooltipContent>
<p>生成语音</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
{isPolling && <LoadingState elapsedTime={elapsedTime} />}

122
qwen3-tts-frontend/src/components/tts/VoiceCloneForm.tsx
View File

@@ -6,11 +6,13 @@ import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from '@/components/ui/dialog'
import { Checkbox } from '@/components/ui/checkbox'
import { Label } from '@/components/ui/label'
import { ChevronDown } from 'lucide-react'
import { Settings, Globe2, Type, Play, FileText, Mic, Zap, Database } from 'lucide-react'
import { toast } from 'sonner'
import { IconLabel } from '@/components/IconLabel'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { ttsApi, jobApi } from '@/lib/api'
import { useJobPolling } from '@/hooks/useJobPolling'
import { LoadingState } from '@/components/LoadingState'
@@ -41,6 +43,9 @@ function VoiceCloneForm() {
const [languages, setLanguages] = useState<Language[]>([])
const [isLoading, setIsLoading] = useState(false)
const [advancedOpen, setAdvancedOpen] = useState(false)
const [tempAdvancedParams, setTempAdvancedParams] = useState({
max_new_tokens: 2048
})
const { currentJob, isPolling, isCompleted, startPolling, elapsedTime } = useJobPolling()
@@ -101,9 +106,9 @@ function VoiceCloneForm() {
}, [currentJob?.id, currentJob?.audio_url])
return (
<form onSubmit={handleSubmit(onSubmit)} className="space-y-3">
<div className="space-y-1">
<Label htmlFor="ref_text">参考文稿（可选）</Label>
<form onSubmit={handleSubmit(onSubmit)} className="space-y-2">
<div className="space-y-0.5">
<IconLabel icon={FileText} tooltip="参考文稿（可选）" />
<Textarea
{...register('ref_text')}
placeholder="参考音频对应的文本..."
@@ -118,8 +123,8 @@ function VoiceCloneForm() {
)}
</div>
<div className="space-y-1">
<Label htmlFor="ref_audio">参考音频</Label>
<div className="space-y-0.5">
<IconLabel icon={Mic} tooltip="参考音频" required />
<Controller
name="ref_audio"
control={control}
@@ -133,8 +138,8 @@ function VoiceCloneForm() {
/>
</div>
<div className="space-y-1">
<Label htmlFor="language">语言（可选）</Label>
<div className="space-y-0.5">
<IconLabel icon={Globe2} tooltip="语言（可选）" />
<Select
value={watch('language')}
onValueChange={(value: string) => setValue('language', value)}
@@ -152,8 +157,8 @@ function VoiceCloneForm() {
</Select>
</div>
<div className="space-y-1">
<Label htmlFor="text">合成文本</Label>
<div className="space-y-0.5">
<IconLabel icon={Type} tooltip="合成文本" required />
<Textarea
{...register('text')}
placeholder="输入要合成的文本..."
@@ -170,6 +175,7 @@ function VoiceCloneForm() {
<div className="flex items-center space-x-3">
<div className="flex items-center space-x-2">
<Zap className="h-4 w-4 text-muted-foreground" />
<Controller
name="x_vector_only_mode"
control={control}
@@ -187,6 +193,7 @@ function VoiceCloneForm() {
</div>
<div className="flex items-center space-x-2">
<Database className="h-4 w-4 text-muted-foreground" />
<Controller
name="use_cache"
control={control}
@@ -204,29 +211,82 @@ function VoiceCloneForm() {
</div>
</div>
<Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
<CollapsibleTrigger asChild>
<Button type="button" variant="ghost" className="w-full py-1.5">
<Dialog open={advancedOpen} onOpenChange={(open) => {
if (open) {
setTempAdvancedParams({
max_new_tokens: watch('max_new_tokens')
})
}
setAdvancedOpen(open)
}}>
<DialogTrigger asChild>
<Button type="button" variant="outline" className="w-full">
<Settings className="mr-2 h-4 w-4" />
高级选项
<ChevronDown className="ml-2 h-4 w-4" />
</Button>
</CollapsibleTrigger>
<CollapsibleContent className="space-y-2 pt-2">
<ParamInput
name="max_new_tokens"
label={ADVANCED_PARAMS_INFO.max_new_tokens.label}
description={ADVANCED_PARAMS_INFO.max_new_tokens.description}
tooltip={ADVANCED_PARAMS_INFO.max_new_tokens.tooltip}
register={register}
min={1}
max={10000}
/>
</CollapsibleContent>
</Collapsible>
</DialogTrigger>
<DialogContent className="sm:max-w-[500px]">
<DialogHeader>
<DialogTitle>高级参数设置</DialogTitle>
</DialogHeader>
<div className="space-y-4 py-4">
<div className="space-y-2">
<Label htmlFor="dialog-max_new_tokens">
{ADVANCED_PARAMS_INFO.max_new_tokens.label}
</Label>
<Input
id="dialog-max_new_tokens"
type="number"
min={1}
max={10000}
value={tempAdvancedParams.max_new_tokens}
onChange={(e) => setTempAdvancedParams({
...tempAdvancedParams,
max_new_tokens: parseInt(e.target.value) || 2048
})}
/>
<p className="text-sm text-muted-foreground">
{ADVANCED_PARAMS_INFO.max_new_tokens.description}
</p>
</div>
</div>
<DialogFooter>
<Button
type="button"
variant="outline"
onClick={() => {
setTempAdvancedParams({ max_new_tokens: watch('max_new_tokens') })
setAdvancedOpen(false)
}}
>
取消
</Button>
<Button
type="button"
onClick={() => {
setValue('max_new_tokens', tempAdvancedParams.max_new_tokens)
setAdvancedOpen(false)
}}
>
确定
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
<Button type="submit" className="w-full" disabled={isLoading || isPolling}>
{isLoading ? '创建中...' : '生成语音'}
</Button>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button type="submit" className="w-full" disabled={isLoading || isPolling}>
<Play className="mr-2 h-4 w-4" />
{isLoading ? '创建中...' : '生成语音'}
</Button>
</TooltipTrigger>
<TooltipContent>
<p>生成语音</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
{isPolling && <LoadingState elapsedTime={elapsedTime} />}

252
qwen3-tts-frontend/src/components/tts/VoiceDesignForm.tsx
View File

@@ -6,10 +6,12 @@ import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from '@/components/ui/dialog'
import { Label } from '@/components/ui/label'
import { ChevronDown } from 'lucide-react'
import { Settings, Globe2, Type, Play, Palette } from 'lucide-react'
import { toast } from 'sonner'
import { IconLabel } from '@/components/IconLabel'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { ttsApi, jobApi } from '@/lib/api'
import { useJobPolling } from '@/hooks/useJobPolling'
import { LoadingState } from '@/components/LoadingState'
@@ -40,6 +42,13 @@ const VoiceDesignForm = forwardRef<VoiceDesignFormHandle>((_props, ref) => {
const [languages, setLanguages] = useState<Language[]>([])
const [isLoading, setIsLoading] = useState(false)
const [advancedOpen, setAdvancedOpen] = useState(false)
const [tempAdvancedParams, setTempAdvancedParams] = useState({
max_new_tokens: 2048,
temperature: 0.3,
top_k: 20,
top_p: 0.7,
repetition_penalty: 1.05
})
const { currentJob, isPolling, isCompleted, startPolling, elapsedTime } = useJobPolling()
@@ -107,9 +116,9 @@ const VoiceDesignForm = forwardRef<VoiceDesignFormHandle>((_props, ref) => {
}, [currentJob?.id, currentJob?.audio_url])
return (
<form onSubmit={handleSubmit(onSubmit)} className="space-y-3">
<div className="space-y-1">
<Label htmlFor="language">语言</Label>
<form onSubmit={handleSubmit(onSubmit)} className="space-y-2">
<div className="space-y-0.5">
<IconLabel icon={Globe2} tooltip="语言" required />
<Select
value={watch('language')}
onValueChange={(value: string) => setValue('language', value)}
@@ -130,8 +139,8 @@ const VoiceDesignForm = forwardRef<VoiceDesignFormHandle>((_props, ref) => {
)}
</div>
<div className="space-y-1">
<Label htmlFor="text">合成文本</Label>
<div className="space-y-0.5">
<IconLabel icon={Type} tooltip="合成文本" required />
<Textarea
{...register('text')}
placeholder="输入要合成的文本..."
@@ -142,8 +151,8 @@ const VoiceDesignForm = forwardRef<VoiceDesignFormHandle>((_props, ref) => {
)}
</div>
<div className="space-y-1">
<Label htmlFor="instruct">音色描述</Label>
<div className="space-y-0.5">
<IconLabel icon={Palette} tooltip="音色描述" required />
<Textarea
{...register('instruct')}
placeholder="例如：成熟男性,低沉磁性,充满权威感"
@@ -163,68 +172,175 @@ const VoiceDesignForm = forwardRef<VoiceDesignFormHandle>((_props, ref) => {
)}
</div>
<Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
<CollapsibleTrigger asChild>
<Button type="button" variant="ghost" className="w-full py-1.5">
<Dialog open={advancedOpen} onOpenChange={(open) => {
if (open) {
setTempAdvancedParams({
max_new_tokens: watch('max_new_tokens'),
temperature: watch('temperature'),
top_k: watch('top_k'),
top_p: watch('top_p'),
repetition_penalty: watch('repetition_penalty')
})
}
setAdvancedOpen(open)
}}>
<DialogTrigger asChild>
<Button type="button" variant="outline" className="w-full">
<Settings className="mr-2 h-4 w-4" />
高级选项
<ChevronDown className="ml-2 h-4 w-4" />
</Button>
</CollapsibleTrigger>
<CollapsibleContent className="space-y-2 pt-2">
<ParamInput
name="max_new_tokens"
label={ADVANCED_PARAMS_INFO.max_new_tokens.label}
description={ADVANCED_PARAMS_INFO.max_new_tokens.description}
tooltip={ADVANCED_PARAMS_INFO.max_new_tokens.tooltip}
register={register}
min={1}
max={10000}
/>
<ParamInput
name="temperature"
label={ADVANCED_PARAMS_INFO.temperature.label}
description={ADVANCED_PARAMS_INFO.temperature.description}
tooltip={ADVANCED_PARAMS_INFO.temperature.tooltip}
register={register}
step={0.1}
min={0}
max={2}
/>
<ParamInput
name="top_k"
label={ADVANCED_PARAMS_INFO.top_k.label}
description={ADVANCED_PARAMS_INFO.top_k.description}
tooltip={ADVANCED_PARAMS_INFO.top_k.tooltip}
register={register}
min={1}
max={100}
/>
<ParamInput
name="top_p"
label={ADVANCED_PARAMS_INFO.top_p.label}
description={ADVANCED_PARAMS_INFO.top_p.description}
tooltip={ADVANCED_PARAMS_INFO.top_p.tooltip}
register={register}
step={0.1}
min={0}
max={1}
/>
<ParamInput
name="repetition_penalty"
label={ADVANCED_PARAMS_INFO.repetition_penalty.label}
description={ADVANCED_PARAMS_INFO.repetition_penalty.description}
tooltip={ADVANCED_PARAMS_INFO.repetition_penalty.tooltip}
register={register}
step={0.01}
min={0}
max={2}
/>
</CollapsibleContent>
</Collapsible>
</DialogTrigger>
<DialogContent className="sm:max-w-[500px]">
<DialogHeader>
<DialogTitle>高级参数设置</DialogTitle>
</DialogHeader>
<div className="space-y-4 py-4">
<div className="space-y-2">
<Label htmlFor="dialog-max_new_tokens">
{ADVANCED_PARAMS_INFO.max_new_tokens.label}
</Label>
<Input
id="dialog-max_new_tokens"
type="number"
min={1}
max={10000}
value={tempAdvancedParams.max_new_tokens}
onChange={(e) => setTempAdvancedParams({
...tempAdvancedParams,
max_new_tokens: parseInt(e.target.value) || 2048
})}
/>
<p className="text-sm text-muted-foreground">
{ADVANCED_PARAMS_INFO.max_new_tokens.description}
</p>
</div>
<div className="space-y-2">
<Label htmlFor="dialog-temperature">
{ADVANCED_PARAMS_INFO.temperature.label}
</Label>
<Input
id="dialog-temperature"
type="number"
min={0}
max={2}
step={0.1}
value={tempAdvancedParams.temperature}
onChange={(e) => setTempAdvancedParams({
...tempAdvancedParams,
temperature: parseFloat(e.target.value) || 0.3
})}
/>
<p className="text-sm text-muted-foreground">
{ADVANCED_PARAMS_INFO.temperature.description}
</p>
</div>
<div className="space-y-2">
<Label htmlFor="dialog-top_k">
{ADVANCED_PARAMS_INFO.top_k.label}
</Label>
<Input
id="dialog-top_k"
type="number"
min={1}
max={100}
value={tempAdvancedParams.top_k}
onChange={(e) => setTempAdvancedParams({
...tempAdvancedParams,
top_k: parseInt(e.target.value) || 20
})}
/>
<p className="text-sm text-muted-foreground">
{ADVANCED_PARAMS_INFO.top_k.description}
</p>
</div>
<div className="space-y-2">
<Label htmlFor="dialog-top_p">
{ADVANCED_PARAMS_INFO.top_p.label}
</Label>
<Input
id="dialog-top_p"
type="number"
min={0}
max={1}
step={0.1}
value={tempAdvancedParams.top_p}
onChange={(e) => setTempAdvancedParams({
...tempAdvancedParams,
top_p: parseFloat(e.target.value) || 0.7
})}
/>
<p className="text-sm text-muted-foreground">
{ADVANCED_PARAMS_INFO.top_p.description}
</p>
</div>
<div className="space-y-2">
<Label htmlFor="dialog-repetition_penalty">
{ADVANCED_PARAMS_INFO.repetition_penalty.label}
</Label>
<Input
id="dialog-repetition_penalty"
type="number"
min={0}
max={2}
step={0.01}
value={tempAdvancedParams.repetition_penalty}
onChange={(e) => setTempAdvancedParams({
...tempAdvancedParams,
repetition_penalty: parseFloat(e.target.value) || 1.05
})}
/>
<p className="text-sm text-muted-foreground">
{ADVANCED_PARAMS_INFO.repetition_penalty.description}
</p>
</div>
</div>
<DialogFooter>
<Button
type="button"
variant="outline"
onClick={() => {
setTempAdvancedParams({
max_new_tokens: watch('max_new_tokens'),
temperature: watch('temperature'),
top_k: watch('top_k'),
top_p: watch('top_p'),
repetition_penalty: watch('repetition_penalty')
})
setAdvancedOpen(false)
}}
>
取消
</Button>
<Button
type="button"
onClick={() => {
setValue('max_new_tokens', tempAdvancedParams.max_new_tokens)
setValue('temperature', tempAdvancedParams.temperature)
setValue('top_k', tempAdvancedParams.top_k)
setValue('top_p', tempAdvancedParams.top_p)
setValue('repetition_penalty', tempAdvancedParams.repetition_penalty)
setAdvancedOpen(false)
}}
>
确定
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
<Button type="submit" className="w-full" disabled={isLoading || isPolling}>
{isLoading ? '创建中...' : '生成语音'}
</Button>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button type="submit" className="w-full" disabled={isLoading || isPolling}>
<Play className="mr-2 h-4 w-4" />
{isLoading ? '创建中...' : '生成语音'}
</Button>
</TooltipTrigger>
<TooltipContent>
<p>生成语音</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
{isPolling && <LoadingState elapsedTime={elapsedTime} />}

18
qwen3-tts-frontend/src/pages/Home.tsx
View File

@@ -2,6 +2,7 @@ import { useState, useRef, lazy, Suspense } from 'react'
import { Navbar } from '@/components/Navbar'
import { Card, CardContent, CardHeader } from '@/components/ui/card'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { User, Palette, Copy } from 'lucide-react'
import type { CustomVoiceFormHandle } from '@/components/tts/CustomVoiceForm'
import type { VoiceDesignFormHandle } from '@/components/tts/VoiceDesignForm'
import { HistorySidebar } from '@/components/HistorySidebar'
@@ -63,10 +64,19 @@ function Home() {
<Card>
<CardHeader>
<Tabs value={currentTab} onValueChange={setCurrentTab}>
<TabsList className="grid w-full grid-cols-3">
<TabsTrigger value="custom-voice">自定义音色</TabsTrigger>
<TabsTrigger value="voice-design">音色设计</TabsTrigger>
<TabsTrigger value="voice-clone">声音克隆</TabsTrigger>
<TabsList className="grid w-full grid-cols-3 h-9">
<TabsTrigger value="custom-voice">
<User className="h-4 w-4 md:mr-2" />
<span className="hidden md:inline">自定义</span>
</TabsTrigger>
<TabsTrigger value="voice-design">
<Palette className="h-4 w-4 md:mr-2" />
<span className="hidden md:inline">设计</span>
</TabsTrigger>
<TabsTrigger value="voice-clone">
<Copy className="h-4 w-4 md:mr-2" />
<span className="hidden md:inline">克隆</span>
</TabsTrigger>
</TabsList>
</Tabs>
</CardHeader>