diff --git a/app/src/components/Generation/FloatingGenerateBox.tsx b/app/src/components/Generation/FloatingGenerateBox.tsx index 956c6547..d977cc1a 100644 --- a/app/src/components/Generation/FloatingGenerateBox.tsx +++ b/app/src/components/Generation/FloatingGenerateBox.tsx @@ -1,7 +1,7 @@ import { useQuery } from '@tanstack/react-query'; import { useMatchRoute } from '@tanstack/react-router'; import { AnimatePresence, motion } from 'framer-motion'; -import { Loader2, Sparkles } from 'lucide-react'; +import { Loader2, SlidersHorizontal, Sparkles } from 'lucide-react'; import { useEffect, useRef, useState } from 'react'; import { Button } from '@/components/ui/button'; import { Form, FormControl, FormField, FormItem, FormMessage } from '@/components/ui/form'; @@ -40,6 +40,7 @@ export function FloatingGenerateBox({ const { data: selectedProfile } = useProfile(selectedProfileId || ''); const { data: profiles } = useProfiles(); const [isExpanded, setIsExpanded] = useState(false); + const [isInstructExpanded, setIsInstructExpanded] = useState(false); const [selectedPresetId, setSelectedPresetId] = useState(null); const containerRef = useRef(null); const textareaRef = useRef(null); @@ -125,7 +126,14 @@ export function FloatingGenerateBox({ }, [watchedEngine, setSelectedEngine]); // Sync generation form language, engine, and effects with selected profile - type EngineValue = 'qwen' | 'luxtts' | 'chatterbox' | 'chatterbox_turbo' | 'tada' | 'kokoro' | 'qwen_custom_voice'; + type EngineValue = + | 'qwen' + | 'luxtts' + | 'chatterbox' + | 'chatterbox_turbo' + | 'tada' + | 'kokoro' + | 'qwen_custom_voice'; useEffect(() => { if (selectedProfile?.language) { form.setValue('language', selectedProfile.language as LanguageCode); @@ -346,9 +354,80 @@ export function FloatingGenerateBox({ : 'Generate speech'} + + {/* Instruct toggle — only for Qwen CustomVoice, which actually honors the kwarg */} + + {isExpanded && form.watch('engine') === 'qwen_custom_voice' && ( + +
+ + + Delivery instructions (tone, emotion, pace) + +
+
+ )} +
+ {/* Additive instruct textarea — shown below main text when toggle is on and engine supports it */} + + {isInstructExpanded && form.watch('engine') === 'qwen_custom_voice' && ( + + ( + + +