From 649a52c07bbf66752491ad1ee5e6b179f41696a2 Mon Sep 17 00:00:00 2001
From: bdim404 <i@bdim.moe>
Date: Thu, 12 Mar 2026 14:10:17 +0800
Subject: [PATCH] feat: Add emotion control feature with presets and intensity
 adjustment in CustomVoiceForm

---
 .../src/components/tts/CustomVoiceForm.tsx    | 79 ++++++++++++++-----
 .../src/components/ui/select.tsx              |  2 +-
 2 files changed, 59 insertions(+), 22 deletions(-)

diff --git a/qwen3-tts-frontend/src/components/tts/CustomVoiceForm.tsx b/qwen3-tts-frontend/src/components/tts/CustomVoiceForm.tsx
index 93320f4..f3fe653 100644
--- a/qwen3-tts-frontend/src/components/tts/CustomVoiceForm.tsx
+++ b/qwen3-tts-frontend/src/components/tts/CustomVoiceForm.tsx
@@ -63,8 +63,21 @@ const CustomVoiceForm = forwardRef<CustomVoiceFormHandle>((_props, ref) => {
   const [isLoading, setIsLoading] = useState(false)
   const [advancedOpen, setAdvancedOpen] = useState(false)
   const [indexTTS2Open, setIndexTTS2Open] = useState(false)
+  const [selectedEmotion, setSelectedEmotion] = useState('none')
   const [emoText, setEmoText] = useState('')
   const [emoAlpha, setEmoAlpha] = useState(0.6)
+
+  const EMOTION_PRESETS = [
+    { value: 'none', label: '不使用情感控制', emo_text: '', emo_alpha: 0.5 },
+    { value: 'happy', label: '开心', emo_text: '开心', emo_alpha: 0.6 },
+    { value: 'angry', label: '愤怒', emo_text: '愤怒', emo_alpha: 0.15 },
+    { value: 'sad', label: '悲伤', emo_text: '悲伤', emo_alpha: 0.6 },
+    { value: 'fear', label: '恐惧', emo_text: '恐惧', emo_alpha: 0.6 },
+    { value: 'hate', label: '厌恶', emo_text: '厌恶', emo_alpha: 0.6 },
+    { value: 'low', label: '低沉', emo_text: '低沉', emo_alpha: 0.6 },
+    { value: 'surprise', label: '惊讶', emo_text: '惊讶', emo_alpha: 0.3 },
+    { value: 'neutral', label: '中性', emo_text: '中性', emo_alpha: 0.5 },
+  ]
   const [isIndexTTS2Loading, setIsIndexTTS2Loading] = useState(false)
   const [tempAdvancedParams, setTempAdvancedParams] = useState({
     max_new_tokens: 2048,
@@ -555,35 +568,59 @@ const CustomVoiceForm = forwardRef<CustomVoiceFormHandle>((_props, ref) => {
           <DialogTrigger asChild>
             <Button type="button" variant="outline" className="w-full">
               <Zap className="mr-2 h-4 w-4" />
-              IndexTTS2
+              情感控制
             </Button>
           </DialogTrigger>
           <DialogContent className="sm:max-w-[480px]">
             <DialogHeader>
-              <DialogTitle>IndexTTS2</DialogTitle>
-              <DialogDescription>使用 IndexTTS2 合成，支持情感控制</DialogDescription>
+              <DialogTitle>情感控制</DialogTitle>
+              <DialogDescription>使用 IndexTTS2 合成，选择情感预设</DialogDescription>
             </DialogHeader>
             <div className="space-y-4 py-4">
               <div className="space-y-2">
-                <Label>情感参考文本（emo_text）</Label>
-                <Textarea
-                  placeholder="输入情感参考句，如：你吓死我了！（留空则不使用情感控制）"
-                  value={emoText}
-                  onChange={e => setEmoText(e.target.value)}
-                  className="min-h-[60px]"
-                />
-              </div>
-              <div className="space-y-2">
-                <Label>情感强度（emo_alpha）：{emoAlpha.toFixed(2)}</Label>
-                <Input
-                  type="range"
-                  min={0}
-                  max={1}
-                  step={0.05}
-                  value={emoAlpha}
-                  onChange={e => setEmoAlpha(parseFloat(e.target.value))}
-                />
+                <Label>情感</Label>
+                <Select
+                  value={selectedEmotion}
+                  onValueChange={(value) => {
+                    const preset = EMOTION_PRESETS.find(p => p.value === value)
+                    if (preset) {
+                      setSelectedEmotion(value)
+                      setEmoText(preset.emo_text)
+                      setEmoAlpha(preset.emo_alpha)
+                    }
+                  }}
+                >
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {EMOTION_PRESETS.map(p => (
+                      <SelectItem key={p.value} value={p.value}>
+                        {p.label}
+                        {p.value !== 'none' && (
+                          <span className="ml-2 text-xs text-muted-foreground">强度 {p.emo_alpha}</span>
+                        )}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
               </div>
+              {selectedEmotion !== 'none' && (
+                <div className="space-y-2">
+                  <Label>情感强度：{emoAlpha.toFixed(2)}</Label>
+                  <Input
+                    type="range"
+                    min={0}
+                    max={1}
+                    step={0.05}
+                    value={emoAlpha}
+                    onChange={e => setEmoAlpha(parseFloat(e.target.value))}
+                  />
+                  {(selectedEmotion === 'angry') && (
+                    <p className="text-xs text-muted-foreground">愤怒情感建议强度低于 0.2，过高会失真</p>
+                  )}
+                </div>
+              )}
             </div>
             <DialogFooter>
               <Button type="button" variant="outline" onClick={() => setIndexTTS2Open(false)}>取消</Button>
diff --git a/qwen3-tts-frontend/src/components/ui/select.tsx b/qwen3-tts-frontend/src/components/ui/select.tsx
index d826bdb..12793b4 100644
--- a/qwen3-tts-frontend/src/components/ui/select.tsx
+++ b/qwen3-tts-frontend/src/components/ui/select.tsx
@@ -73,7 +73,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+        "relative z-[200] max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className