1250 lines
51 KiB
TypeScript
1250 lines
51 KiB
TypeScript
import React, { useState, useEffect, useMemo, useCallback, useRef } from "react";
|
|
import {
|
|
Box,
|
|
Typography,
|
|
Select,
|
|
MenuItem,
|
|
FormControl,
|
|
InputLabel,
|
|
Stack,
|
|
Button,
|
|
Chip,
|
|
CircularProgress,
|
|
Tooltip,
|
|
alpha,
|
|
IconButton,
|
|
ListItemIcon,
|
|
ListItemText,
|
|
Collapse,
|
|
FormControlLabel,
|
|
Checkbox,
|
|
Divider,
|
|
Dialog,
|
|
DialogTitle,
|
|
DialogContent,
|
|
DialogActions,
|
|
Slider,
|
|
} from "@mui/material";
|
|
import {
|
|
Mic,
|
|
PlayArrow,
|
|
Pause,
|
|
HelpOutline,
|
|
AutoAwesome,
|
|
CheckCircle,
|
|
ExpandLess,
|
|
ExpandMore,
|
|
RestartAlt,
|
|
VolumeUp,
|
|
Tune,
|
|
Close,
|
|
Male,
|
|
Female,
|
|
Category,
|
|
} from "@mui/icons-material";
|
|
import { getLatestVoiceClone, VoiceCloneResponse } from "../../api/brandAssets";
|
|
import { VoiceAvatarPlaceholder } from "../OnboardingWizard/PersonalizationStep/components/VoiceAvatarPlaceholder";
|
|
|
|
export type VoiceOption = {
|
|
id: string;
|
|
name: string;
|
|
personality?: string;
|
|
isCustom?: boolean;
|
|
previewUrl?: string;
|
|
gender?: "male" | "female";
|
|
category?: string;
|
|
};
|
|
|
|
export type VoiceAudioSettings = {
|
|
speed: number;
|
|
volume: number;
|
|
pitch: number;
|
|
emotion: string;
|
|
};
|
|
|
|
const DEFAULT_AUDIO_SETTINGS: VoiceAudioSettings = {
|
|
speed: 1.0,
|
|
volume: 1.0,
|
|
pitch: 0,
|
|
emotion: "neutral",
|
|
};
|
|
|
|
const EMOTION_OPTIONS = ["neutral", "happy", "sad", "angry", "fearful", "disgusted", "surprised"];
|
|
|
|
type GenderFilter = "all" | "male" | "female";
|
|
type CategoryFilter = string;
|
|
|
|
interface VoiceSelectorProps {
|
|
value: string;
|
|
onChange: (voiceId: string) => void;
|
|
disabled?: boolean;
|
|
showVoiceClone?: boolean;
|
|
compact?: boolean;
|
|
audioSettings?: VoiceAudioSettings;
|
|
onAudioSettingsChange?: (settings: VoiceAudioSettings) => void;
|
|
}
|
|
|
|
const VOICE_SAMPLE_BASE = "/assets/voice-samples";
|
|
|
|
const VOICE_PREVIEW_MAP: Record<string, string> = {
|
|
Wise_Woman: `${VOICE_SAMPLE_BASE}/wise_woman.mp3`,
|
|
Friendly_Person: `${VOICE_SAMPLE_BASE}/friendly_person.mp3`,
|
|
Inspirational_girl: `${VOICE_SAMPLE_BASE}/inspirational_girl.mp3`,
|
|
Deep_Voice_Man: `${VOICE_SAMPLE_BASE}/deep_voice_man.mp3`,
|
|
Calm_Woman: `${VOICE_SAMPLE_BASE}/calm_woman.mp3`,
|
|
Casual_Guy: `${VOICE_SAMPLE_BASE}/casual_guy.mp3`,
|
|
Lively_Girl: `${VOICE_SAMPLE_BASE}/lively_girl.mp3`,
|
|
Patient_Man: `${VOICE_SAMPLE_BASE}/patient_man.mp3`,
|
|
Young_Knight: `${VOICE_SAMPLE_BASE}/young_knight.mp3`,
|
|
Determined_Man: `${VOICE_SAMPLE_BASE}/determined_man.mp3`,
|
|
Lovely_Girl: `${VOICE_SAMPLE_BASE}/lovely_girl.mp3`,
|
|
Decent_Boy: `${VOICE_SAMPLE_BASE}/decent_boy.mp3`,
|
|
Imposing_Manner: `${VOICE_SAMPLE_BASE}/imposing_manner.mp3`,
|
|
Elegant_Man: `${VOICE_SAMPLE_BASE}/elegant_man.mp3`,
|
|
Abbess: `${VOICE_SAMPLE_BASE}/abbess.mp3`,
|
|
Sweet_Girl_2: `${VOICE_SAMPLE_BASE}/sweet_girl.mp3`,
|
|
Exuberant_Girl: `${VOICE_SAMPLE_BASE}/exuberant_girl.mp3`,
|
|
};
|
|
|
|
const CATEGORY_OPTIONS: { value: CategoryFilter; label: string }[] = [
|
|
{ value: "all", label: "All" },
|
|
{ value: "educational", label: "Educational" },
|
|
{ value: "marketing", label: "Marketing" },
|
|
{ value: "professional", label: "Professional" },
|
|
{ value: "creative", label: "Creative" },
|
|
{ value: "calming", label: "Calming" },
|
|
{ value: "motivational", label: "Motivational" },
|
|
];
|
|
|
|
const PREDEFINED_VOICES: VoiceOption[] = [
|
|
{ id: "Wise_Woman", name: "Wise Woman", personality: "Authoritative, trustworthy female voice - perfect for educational content", previewUrl: VOICE_PREVIEW_MAP.Wise_Woman, gender: "female", category: "educational" },
|
|
{ id: "Friendly_Person", name: "Friendly Person", personality: "Warm, approachable voice - great for welcoming introductions", previewUrl: VOICE_PREVIEW_MAP.Friendly_Person, category: "marketing" },
|
|
{ id: "Inspirational_girl", name: "Inspirational Girl", personality: "Motivational, uplifting female voice - ideal for inspiration", previewUrl: VOICE_PREVIEW_MAP.Inspirational_girl, gender: "female", category: "motivational" },
|
|
{ id: "Deep_Voice_Man", name: "Deep Voice Man", personality: "Powerful, commanding male voice - excellent for serious topics", previewUrl: VOICE_PREVIEW_MAP.Deep_Voice_Man, gender: "male", category: "professional" },
|
|
{ id: "Calm_Woman", name: "Calm Woman", personality: "Soothing, composed female voice - perfect for meditation or sensitive topics", previewUrl: VOICE_PREVIEW_MAP.Calm_Woman, gender: "female", category: "calming" },
|
|
{ id: "Casual_Guy", name: "Casual Guy", personality: "Relaxed, conversational male voice - great for vlogs and tutorials", previewUrl: VOICE_PREVIEW_MAP.Casual_Guy, gender: "male", category: "marketing" },
|
|
{ id: "Lively_Girl", name: "Lively Girl", personality: "Energetic, enthusiastic female voice - ideal for exciting announcements", previewUrl: VOICE_PREVIEW_MAP.Lively_Girl, gender: "female", category: "marketing" },
|
|
{ id: "Patient_Man", name: "Patient Man", personality: "Gentle, understanding male voice - perfect for explanations", previewUrl: VOICE_PREVIEW_MAP.Patient_Man, gender: "male", category: "educational" },
|
|
{ id: "Young_Knight", name: "Young Knight", personality: "Brave, confident male voice - great for adventure and gaming", previewUrl: VOICE_PREVIEW_MAP.Young_Knight, gender: "male", category: "creative" },
|
|
{ id: "Determined_Man", name: "Determined Man", personality: "Strong, resolute male voice - excellent for motivational speeches", previewUrl: VOICE_PREVIEW_MAP.Determined_Man, gender: "male", category: "motivational" },
|
|
{ id: "Lovely_Girl", name: "Lovely Girl", personality: "Sweet, charming female voice - ideal for storytelling", previewUrl: VOICE_PREVIEW_MAP.Lovely_Girl, gender: "female", category: "creative" },
|
|
{ id: "Decent_Boy", name: "Decent Boy", personality: "Honest, sincere male voice - perfect for testimonials", previewUrl: VOICE_PREVIEW_MAP.Decent_Boy, gender: "male", category: "marketing" },
|
|
{ id: "Imposing_Manner", name: "Imposing Manner", personality: "Formal, dignified male voice - great for corporate content", previewUrl: VOICE_PREVIEW_MAP.Imposing_Manner, gender: "male", category: "professional" },
|
|
{ id: "Elegant_Man", name: "Elegant Man", personality: "Refined, sophisticated male voice - ideal for luxury content", previewUrl: VOICE_PREVIEW_MAP.Elegant_Man, gender: "male", category: "professional" },
|
|
{ id: "Abbess", name: "Abbess", personality: "Spiritual, serene female voice - perfect for meditation", previewUrl: VOICE_PREVIEW_MAP.Abbess, gender: "female", category: "calming" },
|
|
{ id: "Sweet_Girl_2", name: "Sweet Girl 2", personality: "Gentle, melodic female voice - excellent for children's content", previewUrl: VOICE_PREVIEW_MAP.Sweet_Girl_2, gender: "female", category: "creative" },
|
|
{ id: "Exuberant_Girl", name: "Exuberant Girl", personality: "Joyful, expressive female voice - ideal for celebrations", previewUrl: VOICE_PREVIEW_MAP.Exuberant_Girl, gender: "female", category: "creative" },
|
|
];
|
|
|
|
const VOICE_CLONE_ID = "MY_VOICE_CLONE";
|
|
|
|
export const VoiceSelector: React.FC<VoiceSelectorProps> = ({
|
|
value,
|
|
onChange,
|
|
disabled = false,
|
|
showVoiceClone = true,
|
|
compact = false,
|
|
audioSettings: externalAudioSettings,
|
|
onAudioSettingsChange,
|
|
}) => {
|
|
const [voiceClone, setVoiceClone] = useState<VoiceCloneResponse | null>(null);
|
|
const [loadingVoiceClone, setLoadingVoiceClone] = useState(false);
|
|
const [playingPreview, setPlayingPreview] = useState<string | null>(null);
|
|
const [showVoiceClonePanel, setShowVoiceClonePanel] = useState(false);
|
|
const [voiceCreated, setVoiceCreated] = useState(false);
|
|
const [useCreatedVoice, setUseCreatedVoice] = useState(true);
|
|
const [redoingClone, setRedoingClone] = useState(false);
|
|
const [selectOpen, setSelectOpen] = useState(false);
|
|
const [tuneModalOpen, setTuneModalOpen] = useState(false);
|
|
const [tuneForVoice, setTuneForVoice] = useState<string | null>(null);
|
|
const [localAudioSettings, setLocalAudioSettings] = useState<VoiceAudioSettings>(
|
|
externalAudioSettings || { ...DEFAULT_AUDIO_SETTINGS }
|
|
);
|
|
const [genderFilter, setGenderFilter] = useState<GenderFilter>("all");
|
|
const [categoryFilter, setCategoryFilter] = useState<CategoryFilter>("all");
|
|
const audioRef = useRef<HTMLAudioElement | null>(null);
|
|
const prevVoiceCloneIdRef = useRef<string | null>(null);
|
|
|
|
const fetchVoiceClone = async () => {
|
|
try {
|
|
setLoadingVoiceClone(true);
|
|
const result = await getLatestVoiceClone();
|
|
setVoiceClone(result);
|
|
return result;
|
|
} catch (error) {
|
|
console.error("Failed to fetch voice clone:", error);
|
|
return null;
|
|
} finally {
|
|
setLoadingVoiceClone(false);
|
|
}
|
|
};
|
|
|
|
const voiceOptions = useMemo(() => {
|
|
const options: VoiceOption[] = [...PREDEFINED_VOICES];
|
|
|
|
if (showVoiceClone && voiceClone?.success && voiceClone.custom_voice_id) {
|
|
options.unshift({
|
|
id: VOICE_CLONE_ID,
|
|
name: voiceClone.voice_name || voiceClone.custom_voice_id || "My Voice Clone",
|
|
personality: "Your own voice - cloned from audio sample",
|
|
isCustom: true,
|
|
previewUrl: voiceClone.preview_audio_url,
|
|
});
|
|
}
|
|
|
|
return options;
|
|
}, [showVoiceClone, voiceClone]);
|
|
|
|
const filteredVoices = useMemo(() => {
|
|
const filtered = PREDEFINED_VOICES.filter(v => {
|
|
if (genderFilter !== "all" && v.gender !== genderFilter) return false;
|
|
if (categoryFilter !== "all" && v.category !== categoryFilter) return false;
|
|
return true;
|
|
});
|
|
if (value && value !== VOICE_CLONE_ID && !filtered.some(v => v.id === value)) {
|
|
const selected = PREDEFINED_VOICES.find(v => v.id === value);
|
|
if (selected) filtered.unshift(selected);
|
|
}
|
|
return filtered;
|
|
}, [genderFilter, categoryFilter, value]);
|
|
|
|
useEffect(() => {
|
|
if (!showVoiceClone) return;
|
|
fetchVoiceClone();
|
|
}, [showVoiceClone]);
|
|
|
|
useEffect(() => {
|
|
if (voiceClone?.success && voiceClone.custom_voice_id) {
|
|
const cloneId = voiceClone.custom_voice_id;
|
|
if (prevVoiceCloneIdRef.current !== cloneId) {
|
|
prevVoiceCloneIdRef.current = cloneId;
|
|
if (!value || value === "Wise_Woman") {
|
|
onChange(cloneId);
|
|
}
|
|
}
|
|
}
|
|
}, [voiceClone]);
|
|
|
|
const stopCurrentAudio = useCallback(() => {
|
|
if (audioRef.current) {
|
|
audioRef.current.pause();
|
|
audioRef.current.currentTime = 0;
|
|
audioRef.current.onended = null;
|
|
audioRef.current.onerror = null;
|
|
audioRef.current = null;
|
|
}
|
|
}, []);
|
|
|
|
const handlePreview = useCallback((voice: VoiceOption) => {
|
|
if (!voice.previewUrl) return;
|
|
|
|
if (playingPreview === voice.id) {
|
|
stopCurrentAudio();
|
|
setPlayingPreview(null);
|
|
return;
|
|
}
|
|
|
|
stopCurrentAudio();
|
|
setPlayingPreview(voice.id);
|
|
|
|
const audio = new Audio(voice.previewUrl);
|
|
audioRef.current = audio;
|
|
|
|
audio.onerror = () => {
|
|
console.error("Failed to load voice preview audio:", voice.previewUrl);
|
|
if (audioRef.current === audio) {
|
|
audioRef.current = null;
|
|
}
|
|
setPlayingPreview(null);
|
|
};
|
|
|
|
audio.onended = () => {
|
|
if (audioRef.current === audio) {
|
|
audioRef.current = null;
|
|
}
|
|
setPlayingPreview(null);
|
|
};
|
|
|
|
audio.play().catch((err) => {
|
|
console.error("Failed to play voice preview:", err);
|
|
if (audioRef.current === audio) {
|
|
audioRef.current = null;
|
|
}
|
|
setPlayingPreview(null);
|
|
});
|
|
}, [playingPreview, stopCurrentAudio]);
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
stopCurrentAudio();
|
|
};
|
|
}, [stopCurrentAudio]);
|
|
|
|
const handleChange = (newValue: string) => {
|
|
if (newValue === VOICE_CLONE_ID && voiceClone?.success) {
|
|
onChange(voiceClone.custom_voice_id || VOICE_CLONE_ID);
|
|
} else {
|
|
onChange(newValue);
|
|
}
|
|
};
|
|
|
|
const isVoiceCloneSelected = value === VOICE_CLONE_ID ||
|
|
(voiceClone?.success && voiceClone.custom_voice_id && value === voiceClone.custom_voice_id);
|
|
|
|
const selectValue = useMemo(() => {
|
|
if (isVoiceCloneSelected) return VOICE_CLONE_ID;
|
|
if (value && voiceOptions.some(v => v.id === value)) return value;
|
|
return voiceOptions.length > 0 ? voiceOptions[0].id : "";
|
|
}, [value, isVoiceCloneSelected, voiceOptions]);
|
|
|
|
const selectedVoice = useMemo(() => {
|
|
if (isVoiceCloneSelected) {
|
|
return voiceOptions.find(v => v.id === VOICE_CLONE_ID);
|
|
}
|
|
return voiceOptions.find(v => v.id === value) || voiceOptions[0];
|
|
}, [value, isVoiceCloneSelected, voiceOptions]);
|
|
|
|
const handleVoiceSet = useCallback(() => {
|
|
setVoiceCreated(true);
|
|
setUseCreatedVoice(true);
|
|
}, []);
|
|
|
|
const handleRedoClone = useCallback(() => {
|
|
setSelectOpen(false);
|
|
setTimeout(() => {
|
|
setRedoingClone(true);
|
|
setShowVoiceClonePanel(true);
|
|
setVoiceCreated(false);
|
|
setUseCreatedVoice(true);
|
|
}, 150);
|
|
}, []);
|
|
|
|
const handleDoneWithVoice = useCallback(() => {
|
|
if (useCreatedVoice) {
|
|
fetchVoiceClone();
|
|
}
|
|
setShowVoiceClonePanel(false);
|
|
setVoiceCreated(false);
|
|
setRedoingClone(false);
|
|
}, [useCreatedVoice]);
|
|
|
|
const handleCancelRedo = useCallback(() => {
|
|
setShowVoiceClonePanel(false);
|
|
setRedoingClone(false);
|
|
setVoiceCreated(false);
|
|
}, []);
|
|
|
|
const handleTogglePanel = useCallback(() => {
|
|
if (showVoiceClonePanel) {
|
|
setShowVoiceClonePanel(false);
|
|
setVoiceCreated(false);
|
|
setRedoingClone(false);
|
|
} else {
|
|
setShowVoiceClonePanel(true);
|
|
setVoiceCreated(false);
|
|
setUseCreatedVoice(true);
|
|
setRedoingClone(false);
|
|
}
|
|
}, [showVoiceClonePanel]);
|
|
|
|
const isPreviewing = playingPreview !== null;
|
|
|
|
useEffect(() => {
|
|
if (externalAudioSettings) {
|
|
setLocalAudioSettings(externalAudioSettings);
|
|
}
|
|
}, [externalAudioSettings]);
|
|
|
|
const hasCustomSettings = externalAudioSettings && (
|
|
externalAudioSettings.speed !== 1.0 ||
|
|
externalAudioSettings.volume !== 1.0 ||
|
|
externalAudioSettings.pitch !== 0 ||
|
|
externalAudioSettings.emotion !== "neutral"
|
|
);
|
|
|
|
const handleApplyTune = useCallback(() => {
|
|
if (onAudioSettingsChange) {
|
|
onAudioSettingsChange(localAudioSettings);
|
|
}
|
|
setTuneModalOpen(false);
|
|
}, [localAudioSettings, onAudioSettingsChange]);
|
|
|
|
const handleOpenTune = useCallback((voiceId: string) => {
|
|
setTuneForVoice(voiceId);
|
|
setLocalAudioSettings(externalAudioSettings || { ...DEFAULT_AUDIO_SETTINGS });
|
|
setTuneModalOpen(true);
|
|
}, [externalAudioSettings]);
|
|
|
|
// Gradient style for Tune icon button
|
|
const tuneButtonSx = useMemo(() => ({
|
|
textTransform: 'none' as const,
|
|
fontSize: "0.68rem",
|
|
fontWeight: 600,
|
|
minWidth: 60,
|
|
py: 0.3,
|
|
borderRadius: 1.5,
|
|
background: "linear-gradient(135deg, rgba(249, 115, 22, 0.08) 0%, rgba(236, 72, 153, 0.08) 100%)",
|
|
color: "#e17055",
|
|
borderColor: "rgba(249, 115, 22, 0.3)",
|
|
"&:hover": {
|
|
background: "linear-gradient(135deg, rgba(249, 115, 22, 0.18) 0%, rgba(236, 72, 153, 0.18) 100%)",
|
|
borderColor: "#f97316",
|
|
},
|
|
}), []);
|
|
|
|
if (compact) {
|
|
return (
|
|
<FormControl fullWidth size="small">
|
|
<InputLabel>Voice</InputLabel>
|
|
<Select
|
|
value={selectValue}
|
|
onChange={(e) => handleChange(e.target.value)}
|
|
label="Voice"
|
|
disabled={disabled}
|
|
startAdornment={
|
|
<ListItemIcon sx={{ minWidth: 32 }}>
|
|
<Mic fontSize="small" sx={{ color: isVoiceCloneSelected ? "#667eea" : "inherit" }} />
|
|
</ListItemIcon>
|
|
}
|
|
>
|
|
{voiceOptions.map((voice) => (
|
|
<MenuItem key={voice.id} value={voice.id}>
|
|
<ListItemText
|
|
primary={voice.name}
|
|
secondary={voice.isCustom ? "Custom voice clone" : voice.personality?.split(' - ')[0]}
|
|
/>
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
p: 3,
|
|
borderRadius: 3,
|
|
background: "#ffffff",
|
|
border: "1px solid rgba(102, 126, 234, 0.15)",
|
|
boxShadow: "0 4px 20px rgba(102, 126, 234, 0.08)",
|
|
position: "relative",
|
|
overflow: "hidden",
|
|
"&::before": {
|
|
content: '""',
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
height: "3px",
|
|
background: "linear-gradient(90deg, #667eea 0%, #764ba2 100%)",
|
|
},
|
|
}}
|
|
>
|
|
<Stack direction="row" spacing={1} alignItems="center" sx={{ mb: 2 }}>
|
|
<Box
|
|
sx={{
|
|
width: 24,
|
|
height: 24,
|
|
borderRadius: "50%",
|
|
background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
boxShadow: "0 2px 8px rgba(102, 126, 234, 0.25)",
|
|
}}
|
|
>
|
|
<Typography sx={{ color: "#fff", fontSize: "0.75rem", fontWeight: 700 }}>4</Typography>
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
width: 32,
|
|
height: 32,
|
|
borderRadius: 1.5,
|
|
background: "linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.12) 100%)",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
boxShadow: "0 2px 8px rgba(102, 126, 234, 0.15)",
|
|
}}
|
|
>
|
|
<Mic fontSize="small" sx={{ color: "#667eea" }} />
|
|
</Box>
|
|
<Typography variant="subtitle1" sx={{ fontWeight: 700, color: "#0f172a", fontSize: "1rem" }}>
|
|
Voice Selection
|
|
</Typography>
|
|
{selectedVoice && (
|
|
<Chip
|
|
icon={<Mic sx={{ fontSize: "12px !important" }} />}
|
|
label={`Active: ${selectedVoice.isCustom ? "My Voice Clone" : selectedVoice.name}`}
|
|
size="small"
|
|
sx={{
|
|
background: selectedVoice.isCustom
|
|
? "linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(5, 150, 105, 0.12) 100%)"
|
|
: "linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.12) 100%)",
|
|
color: selectedVoice.isCustom ? "#10b981" : "#6366f1",
|
|
border: `1px solid ${selectedVoice.isCustom ? "rgba(16, 185, 129, 0.25)" : "rgba(99, 102, 241, 0.2)"}`,
|
|
fontWeight: 600,
|
|
fontSize: "0.7rem",
|
|
height: 22,
|
|
"& .MuiChip-icon": { color: selectedVoice.isCustom ? "#10b981" : "#6366f1" },
|
|
}}
|
|
/>
|
|
)}
|
|
<Tooltip title="Fine-tune voice speed, pitch, volume & emotion" arrow>
|
|
<IconButton
|
|
size="small"
|
|
onClick={() => {
|
|
setLocalAudioSettings(externalAudioSettings || { ...DEFAULT_AUDIO_SETTINGS });
|
|
setTuneForVoice(null);
|
|
setTuneModalOpen(true);
|
|
}}
|
|
sx={{
|
|
color: hasCustomSettings ? "#667eea" : "#94a3b8",
|
|
background: hasCustomSettings ? "rgba(102, 126, 234, 0.1)" : "transparent",
|
|
"&:hover": { color: "#667eea", background: "rgba(102, 126, 234, 0.08)" },
|
|
}}
|
|
>
|
|
<Tune fontSize="small" />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Tooltip title="Choose a system voice or your custom cloned voice. Click the play button to hear a preview." arrow>
|
|
<IconButton size="small" sx={{ color: "#94a3b8", "&:hover": { color: "#667eea" } }}>
|
|
<HelpOutline fontSize="small" />
|
|
</IconButton>
|
|
</Tooltip>
|
|
{showVoiceClone && loadingVoiceClone && (
|
|
<CircularProgress size={16} sx={{ ml: 1, color: "#667eea" }} />
|
|
)}
|
|
</Stack>
|
|
|
|
<FormControl fullWidth>
|
|
<Select
|
|
open={selectOpen}
|
|
onOpen={() => setSelectOpen(true)}
|
|
onClose={() => setSelectOpen(false)}
|
|
value={selectValue}
|
|
onChange={(e) => {
|
|
handleChange(e.target.value);
|
|
setSelectOpen(false);
|
|
}}
|
|
disabled={disabled}
|
|
renderValue={(selected) => {
|
|
const voice = voiceOptions.find(v =>
|
|
v.id === selected ||
|
|
(selected === VOICE_CLONE_ID && v.isCustom)
|
|
);
|
|
return (
|
|
<Stack direction="row" spacing={1} alignItems="center">
|
|
<VolumeUp fontSize="small" sx={{ color: voice?.isCustom ? "#667eea" : "#64748b" }} />
|
|
<Typography sx={{ fontWeight: 600, color: "#1e293b" }}>{voice?.name}</Typography>
|
|
{voice?.isCustom && (
|
|
<Chip
|
|
label="Cloned"
|
|
size="small"
|
|
sx={{
|
|
bgcolor: alpha("#667eea", 0.1),
|
|
color: "#667eea",
|
|
height: 20,
|
|
fontSize: "0.7rem",
|
|
fontWeight: 600,
|
|
}}
|
|
/>
|
|
)}
|
|
</Stack>
|
|
);
|
|
}}
|
|
sx={{
|
|
color: "#1e293b",
|
|
"& .MuiOutlinedInput-notchedOutline": {
|
|
border: "2px solid rgba(102, 126, 234, 0.2)",
|
|
},
|
|
"&:hover .MuiOutlinedInput-notchedOutline": {
|
|
borderColor: "rgba(102, 126, 234, 0.4)",
|
|
},
|
|
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
|
|
borderColor: "#667eea",
|
|
},
|
|
}}
|
|
MenuProps={{
|
|
PaperProps: {
|
|
sx: {
|
|
maxHeight: 500,
|
|
bgcolor: "#ffffff",
|
|
boxShadow: "0 8px 32px rgba(15, 23, 42, 0.12)",
|
|
border: "2px solid rgba(102, 126, 234, 0.35)",
|
|
borderRadius: 2.5,
|
|
"& .MuiMenuItem-root": {
|
|
bgcolor: "#ffffff",
|
|
color: "#1e293b",
|
|
"&:hover": {
|
|
bgcolor: "rgba(102, 126, 234, 0.06)",
|
|
},
|
|
"&.Mui-selected": {
|
|
bgcolor: "rgba(102, 126, 234, 0.1)",
|
|
"&:hover": {
|
|
bgcolor: "rgba(102, 126, 234, 0.16)",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
MenuListProps: {
|
|
sx: {
|
|
bgcolor: "#ffffff",
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
{showVoiceClone && voiceClone?.success && voiceClone.custom_voice_id && (
|
|
<MenuItem value={VOICE_CLONE_ID} sx={{
|
|
borderBottom: '1px solid rgba(102, 126, 234, 0.1)',
|
|
py: 1.5,
|
|
bgcolor: isVoiceCloneSelected ? "rgba(102, 126, 234, 0.06)" : "#ffffff",
|
|
}}>
|
|
<ListItemIcon sx={{ minWidth: 40 }}>
|
|
<AutoAwesome sx={{ color: "#667eea", fontSize: "1.1rem" }} />
|
|
</ListItemIcon>
|
|
<ListItemText
|
|
primary={
|
|
<Stack direction="row" spacing={1} alignItems="center" justifyContent="space-between" sx={{ width: "100%" }}>
|
|
<Stack direction="row" spacing={1} alignItems="center">
|
|
<Typography fontWeight={600} sx={{ color: "#667eea" }}>
|
|
My Voice Clone
|
|
</Typography>
|
|
<Chip
|
|
icon={<CheckCircle sx={{ fontSize: "14px !important" }} />}
|
|
label="Active"
|
|
size="small"
|
|
sx={{
|
|
bgcolor: alpha("#10b981", 0.1),
|
|
color: "#10b981",
|
|
height: 20,
|
|
fontSize: "0.65rem",
|
|
fontWeight: 600,
|
|
'& .MuiChip-icon': { color: "#10b981" }
|
|
}}
|
|
/>
|
|
</Stack>
|
|
<Stack direction="row" spacing={0.75}>
|
|
{voiceClone.preview_audio_url && (
|
|
<Button
|
|
size="small"
|
|
variant={playingPreview === VOICE_CLONE_ID ? "contained" : "outlined"}
|
|
startIcon={playingPreview === VOICE_CLONE_ID ? <Pause /> : <PlayArrow />}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handlePreview({
|
|
id: VOICE_CLONE_ID,
|
|
name: voiceClone.voice_name || "My Voice Clone",
|
|
previewUrl: voiceClone.preview_audio_url
|
|
});
|
|
}}
|
|
disabled={isPreviewing && playingPreview !== VOICE_CLONE_ID}
|
|
sx={{
|
|
textTransform: 'none',
|
|
fontSize: "0.7rem",
|
|
fontWeight: 600,
|
|
minWidth: 82,
|
|
py: 0.3,
|
|
borderRadius: 1.5,
|
|
...(playingPreview === VOICE_CLONE_ID ? {
|
|
background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
|
|
color: "#fff",
|
|
boxShadow: "0 2px 8px rgba(102, 126, 234, 0.35)",
|
|
"&:hover": {
|
|
background: "linear-gradient(135deg, #5a6fd6 0%, #6a4195 100%)",
|
|
},
|
|
} : {
|
|
background: "linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%)",
|
|
color: "#667eea",
|
|
borderColor: "rgba(102, 126, 234, 0.35)",
|
|
"&:hover": {
|
|
background: "linear-gradient(135deg, rgba(102, 126, 234, 0.16) 0%, rgba(118, 75, 162, 0.16) 100%)",
|
|
borderColor: "#667eea",
|
|
},
|
|
}),
|
|
}}
|
|
>
|
|
{playingPreview === VOICE_CLONE_ID ? "Stop" : "Preview"}
|
|
</Button>
|
|
)}
|
|
<Button
|
|
size="small"
|
|
variant="outlined"
|
|
startIcon={<RestartAlt sx={{ fontSize: "0.85rem" }} />}
|
|
onClick={handleRedoClone}
|
|
sx={{
|
|
textTransform: 'none',
|
|
fontSize: "0.68rem",
|
|
fontWeight: 600,
|
|
minWidth: 70,
|
|
py: 0.3,
|
|
borderRadius: 1.5,
|
|
background: "linear-gradient(135deg, rgba(249, 115, 22, 0.06) 0%, rgba(234, 88, 12, 0.06) 100%)",
|
|
color: "#f97316",
|
|
borderColor: "rgba(249, 115, 22, 0.3)",
|
|
"&:hover": {
|
|
background: "linear-gradient(135deg, rgba(249, 115, 22, 0.14) 0%, rgba(234, 88, 12, 0.14) 100%)",
|
|
borderColor: "#f97316",
|
|
},
|
|
}}
|
|
>
|
|
Redo
|
|
</Button>
|
|
</Stack>
|
|
</Stack>
|
|
}
|
|
secondary={
|
|
<Typography variant="caption" sx={{ color: "#64748b", fontSize: "0.72rem", lineHeight: 1.4 }}>
|
|
Your own voice - cloned from audio sample
|
|
</Typography>
|
|
}
|
|
/>
|
|
</MenuItem>
|
|
)}
|
|
|
|
{/* Filter row inside dropdown */}
|
|
<Box
|
|
onClick={(e) => e.stopPropagation()}
|
|
sx={{
|
|
px: 1.5,
|
|
pt: 1.5,
|
|
pb: 0.5,
|
|
borderBottom: "1px solid rgba(102, 126, 234, 0.1)",
|
|
position: "sticky",
|
|
top: 0,
|
|
bgcolor: "#ffffff",
|
|
zIndex: 2,
|
|
}}
|
|
>
|
|
<Stack direction="row" spacing={0.5} alignItems="center" useFlexGap flexWrap="wrap" sx={{ mb: 0.75 }}>
|
|
<Typography variant="caption" sx={{ fontWeight: 700, color: "#94a3b8", fontSize: "0.6rem", textTransform: "uppercase", letterSpacing: "0.08em", mr: 0.25 }}>
|
|
Gender
|
|
</Typography>
|
|
{([["all", "All"], ["male", "♂ M"], ["female", "♀ F"]] as const).map(([val, label]) => (
|
|
<Chip
|
|
key={val}
|
|
label={label}
|
|
size="small"
|
|
onClick={() => setGenderFilter(val as GenderFilter)}
|
|
variant={genderFilter === val ? "filled" : "outlined"}
|
|
sx={{
|
|
height: 22,
|
|
fontSize: "0.65rem",
|
|
fontWeight: genderFilter === val ? 700 : 500,
|
|
background: genderFilter === val
|
|
? "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
|
|
: "rgba(248, 250, 252, 1)",
|
|
color: genderFilter === val ? "#ffffff" : "#64748b",
|
|
border: genderFilter === val
|
|
? "1px solid rgba(102, 126, 234, 0.5)"
|
|
: "1px solid rgba(148, 163, 184, 0.3)",
|
|
boxShadow: genderFilter === val ? "0 2px 8px rgba(102, 126, 234, 0.3)" : "none",
|
|
cursor: "pointer",
|
|
"& .MuiChip-label": {
|
|
color: "inherit",
|
|
},
|
|
"&:hover": {
|
|
background: genderFilter === val
|
|
? "linear-gradient(135deg, #5a6fd6 0%, #6a4195 100%)"
|
|
: "rgba(102, 126, 234, 0.08)",
|
|
border: genderFilter === val ? "1px solid rgba(102, 126, 234, 0.6)" : "1px solid rgba(102, 126, 234, 0.3)",
|
|
},
|
|
transition: "all 0.15s ease",
|
|
}}
|
|
/>
|
|
))}
|
|
</Stack>
|
|
<Stack direction="row" spacing={0.5} alignItems="center" useFlexGap flexWrap="wrap">
|
|
<Typography variant="caption" sx={{ fontWeight: 700, color: "#94a3b8", fontSize: "0.6rem", textTransform: "uppercase", letterSpacing: "0.08em", mr: 0.25 }}>
|
|
Use Case
|
|
</Typography>
|
|
{CATEGORY_OPTIONS.map((cat) => (
|
|
<Chip
|
|
key={cat.value}
|
|
label={cat.label}
|
|
size="small"
|
|
onClick={() => setCategoryFilter(cat.value)}
|
|
variant={categoryFilter === cat.value ? "filled" : "outlined"}
|
|
sx={{
|
|
height: 22,
|
|
fontSize: "0.65rem",
|
|
fontWeight: categoryFilter === cat.value ? 700 : 500,
|
|
background: categoryFilter === cat.value
|
|
? "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
|
|
: "rgba(248, 250, 252, 1)",
|
|
color: categoryFilter === cat.value ? "#ffffff" : "#64748b",
|
|
border: categoryFilter === cat.value
|
|
? "1px solid rgba(102, 126, 234, 0.5)"
|
|
: "1px solid rgba(148, 163, 184, 0.3)",
|
|
boxShadow: categoryFilter === cat.value ? "0 2px 8px rgba(102, 126, 234, 0.3)" : "none",
|
|
cursor: "pointer",
|
|
"& .MuiChip-label": {
|
|
color: "inherit",
|
|
},
|
|
"&:hover": {
|
|
background: categoryFilter === cat.value
|
|
? "linear-gradient(135deg, #5a6fd6 0%, #6a4195 100%)"
|
|
: "rgba(102, 126, 234, 0.08)",
|
|
border: categoryFilter === cat.value ? "1px solid rgba(102, 126, 234, 0.6)" : "1px solid rgba(102, 126, 234, 0.3)",
|
|
},
|
|
transition: "all 0.15s ease",
|
|
}}
|
|
/>
|
|
))}
|
|
</Stack>
|
|
</Box>
|
|
|
|
<MenuItem disabled sx={{
|
|
py: 0.25,
|
|
bgcolor: "#f8fafc !important",
|
|
"&.MuiMenuItem-root": { bgcolor: "#f8fafc !important" },
|
|
}}>
|
|
<Typography variant="caption" sx={{ fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.08em", color: "#94a3b8", fontSize: "0.65rem" }}>
|
|
{filteredVoices.length} voice{filteredVoices.length !== 1 ? "s" : ""}
|
|
</Typography>
|
|
</MenuItem>
|
|
|
|
{filteredVoices.map((voice) => {
|
|
const isPlaying = playingPreview === voice.id;
|
|
const isDisabled = isPreviewing && !isPlaying;
|
|
const personalityShort = voice.personality?.split(' - ')[0] || '';
|
|
const personalityBest = voice.personality?.split(' - ')[1] || '';
|
|
|
|
return (
|
|
<MenuItem
|
|
key={voice.id}
|
|
value={voice.id}
|
|
sx={{
|
|
py: 1,
|
|
opacity: isDisabled ? 0.45 : 1,
|
|
transition: "opacity 0.2s ease",
|
|
pointerEvents: isDisabled ? "none" : "auto",
|
|
}}
|
|
>
|
|
<ListItemText
|
|
primary={
|
|
<Box sx={{ width: "100%" }}>
|
|
<Stack direction="row" spacing={0.5} alignItems="center" sx={{ mb: 0.25 }}>
|
|
<Typography sx={{ fontWeight: 500, fontSize: "0.85rem", lineHeight: 1.3 }}>{voice.name}</Typography>
|
|
{voice.gender && (
|
|
<Box
|
|
component="span"
|
|
sx={{
|
|
display: "inline-flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
minWidth: 16,
|
|
height: 16,
|
|
px: 0.5,
|
|
borderRadius: "3px",
|
|
fontSize: "0.55rem",
|
|
fontWeight: 700,
|
|
lineHeight: 1,
|
|
bgcolor: voice.gender === "male" ? "rgba(59, 130, 246, 0.12)" : "rgba(236, 72, 153, 0.12)",
|
|
color: voice.gender === "male" ? "#3b82f6" : "#ec4899",
|
|
border: `1px solid ${voice.gender === "male" ? "rgba(59, 130, 246, 0.25)" : "rgba(236, 72, 153, 0.25)"}`,
|
|
}}
|
|
>
|
|
{voice.gender === "male" ? "M" : "F"}
|
|
</Box>
|
|
)}
|
|
{voice.category && (
|
|
<Typography component="span" variant="caption" sx={{ color: "#94a3b8", fontSize: "0.6rem" }}>
|
|
· {voice.category}
|
|
</Typography>
|
|
)}
|
|
</Stack>
|
|
{personalityBest ? (
|
|
<Typography variant="caption" sx={{ color: "#667eea", fontSize: "0.65rem", fontWeight: 500, lineHeight: 1.3, display: "block" }}>
|
|
{personalityBest.toLowerCase()}
|
|
</Typography>
|
|
) : personalityShort ? (
|
|
<Typography variant="caption" sx={{ color: "#94a3b8", fontSize: "0.65rem", lineHeight: 1.3, display: "block" }}>
|
|
{personalityShort}
|
|
</Typography>
|
|
) : null}
|
|
</Box>
|
|
}
|
|
/>
|
|
<Stack direction="row" spacing={0.5} sx={{ ml: 1, flexShrink: 0 }}>
|
|
{voice.previewUrl && (
|
|
<IconButton
|
|
size="small"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handlePreview(voice);
|
|
}}
|
|
disabled={isDisabled}
|
|
sx={{
|
|
width: 28,
|
|
height: 28,
|
|
borderRadius: "6px",
|
|
...(isPlaying ? {
|
|
background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
|
|
color: "#fff",
|
|
boxShadow: "0 2px 6px rgba(102, 126, 234, 0.35)",
|
|
} : {
|
|
background: "linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%)",
|
|
color: "#667eea",
|
|
border: "1px solid rgba(102, 126, 234, 0.25)",
|
|
}),
|
|
}}
|
|
>
|
|
{isPlaying ? <Pause sx={{ fontSize: "0.85rem" }} /> : <PlayArrow sx={{ fontSize: "0.85rem" }} />}
|
|
</IconButton>
|
|
)}
|
|
<IconButton
|
|
size="small"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleOpenTune(voice.id);
|
|
}}
|
|
sx={{
|
|
width: 28,
|
|
height: 28,
|
|
borderRadius: "6px",
|
|
background: "linear-gradient(135deg, rgba(249, 115, 22, 0.08) 0%, rgba(236, 72, 153, 0.08) 100%)",
|
|
color: "#e17055",
|
|
border: "1px solid rgba(249, 115, 22, 0.2)",
|
|
"&:hover": {
|
|
background: "linear-gradient(135deg, rgba(249, 115, 22, 0.18) 0%, rgba(236, 72, 153, 0.18) 100%)",
|
|
borderColor: "rgba(249, 115, 22, 0.5)",
|
|
},
|
|
}}
|
|
>
|
|
<Tune sx={{ fontSize: "0.85rem" }} />
|
|
</IconButton>
|
|
</Stack>
|
|
</MenuItem>
|
|
);
|
|
})}
|
|
|
|
{filteredVoices.length === 0 && (
|
|
<MenuItem disabled sx={{ py: 2 }}>
|
|
<ListItemText>
|
|
<Typography variant="body2" sx={{ color: "#94a3b8", textAlign: "center" }}>
|
|
No voices match the selected filters
|
|
</Typography>
|
|
</ListItemText>
|
|
</MenuItem>
|
|
)}
|
|
</Select>
|
|
</FormControl>
|
|
|
|
{selectedVoice?.personality && (
|
|
<Box sx={{
|
|
mt: 1.5,
|
|
p: 1.5,
|
|
borderRadius: 2,
|
|
background: playingPreview
|
|
? "linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%)"
|
|
: "rgba(248, 250, 252, 0.8)",
|
|
border: playingPreview
|
|
? "1px solid rgba(102, 126, 234, 0.2)"
|
|
: "1px solid rgba(102, 126, 234, 0.1)",
|
|
transition: "all 0.3s ease",
|
|
}}>
|
|
<Stack direction="row" spacing={1} alignItems="center">
|
|
{playingPreview && (
|
|
<Box sx={{
|
|
width: 8, height: 8, borderRadius: "50%", bgcolor: "#667eea",
|
|
animation: "pulse 1.5s ease-in-out infinite",
|
|
"@keyframes pulse": {
|
|
"0%": { opacity: 1, transform: "scale(1)" },
|
|
"50%": { opacity: 0.5, transform: "scale(1.2)" },
|
|
"100%": { opacity: 1, transform: "scale(1)" },
|
|
},
|
|
}} />
|
|
)}
|
|
<Box sx={{ flex: 1 }}>
|
|
<Typography variant="body2" sx={{ color: "#0f172a", fontSize: "0.8125rem", fontWeight: 600, lineHeight: 1.4 }}>
|
|
{selectedVoice.isCustom ? "My Voice Clone" : selectedVoice.name}
|
|
</Typography>
|
|
<Typography variant="caption" sx={{ color: playingPreview ? "#4f46e5" : "#64748b", fontSize: "0.75rem", lineHeight: 1.4, fontWeight: playingPreview ? 500 : 400, display: "block" }}>
|
|
{selectedVoice.personality}
|
|
</Typography>
|
|
</Box>
|
|
{playingPreview && (
|
|
<Typography variant="caption" sx={{ color: "#667eea", fontWeight: 600, fontSize: "0.7rem", whiteSpace: "nowrap" }}>
|
|
Playing...
|
|
</Typography>
|
|
)}
|
|
</Stack>
|
|
</Box>
|
|
)}
|
|
|
|
{(showVoiceClone && !voiceClone?.success) || redoingClone ? (
|
|
<Box sx={{ mt: 2 }}>
|
|
<Button
|
|
onClick={handleTogglePanel}
|
|
startIcon={showVoiceClonePanel ? <ExpandLess /> : redoingClone ? <RestartAlt /> : <AutoAwesome />}
|
|
endIcon={showVoiceClonePanel ? <ExpandLess /> : <ExpandMore />}
|
|
sx={{
|
|
py: 1.5,
|
|
px: 2,
|
|
width: "100%",
|
|
background: showVoiceClonePanel
|
|
? "linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.12) 100%)"
|
|
: "linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%)",
|
|
border: showVoiceClonePanel
|
|
? "1px solid rgba(102, 126, 234, 0.3)"
|
|
: "1px dashed rgba(102, 126, 234, 0.4)",
|
|
borderRadius: 2,
|
|
color: "#667eea",
|
|
fontWeight: 600,
|
|
textTransform: "none",
|
|
fontSize: "0.875rem",
|
|
"&:hover": {
|
|
background: "linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%)",
|
|
borderColor: "#667eea",
|
|
boxShadow: "0 2px 8px rgba(102, 126, 234, 0.15)",
|
|
},
|
|
}}
|
|
>
|
|
{redoingClone ? "Redo Voice Clone" : showVoiceClonePanel ? "Hide Voice Cloning" : "Create Your Voice Clone"}
|
|
</Button>
|
|
|
|
<Collapse in={showVoiceClonePanel}>
|
|
<Box
|
|
sx={{
|
|
mt: 2,
|
|
p: 2,
|
|
borderRadius: 2,
|
|
background: "linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)",
|
|
border: "1px solid rgba(102, 126, 234, 0.2)",
|
|
boxShadow: "inset 0 1px 3px rgba(0,0,0,0.05)",
|
|
}}
|
|
>
|
|
<VoiceAvatarPlaceholder
|
|
domainName="Podcast"
|
|
onVoiceSet={handleVoiceSet}
|
|
/>
|
|
|
|
{voiceCreated && (
|
|
<Box
|
|
sx={{
|
|
mt: 2,
|
|
p: 2,
|
|
borderRadius: 2,
|
|
background: "linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%)",
|
|
border: "1px solid rgba(16, 185, 129, 0.3)",
|
|
}}
|
|
>
|
|
<Stack direction="row" alignItems="center" spacing={1} sx={{ mb: 1.5 }}>
|
|
<CheckCircle sx={{ color: "#10b981", fontSize: "1.25rem" }} />
|
|
<Typography variant="subtitle2" sx={{ color: "#10b981", fontWeight: 700 }}>
|
|
{redoingClone ? "Voice Clone Updated!" : "Voice Clone Created Successfully!"}
|
|
</Typography>
|
|
</Stack>
|
|
|
|
<Typography variant="body2" sx={{ color: "#475569", mb: 1.5, fontSize: "0.875rem" }}>
|
|
{redoingClone ? "Your voice clone has been updated." : "Your custom voice clone is ready. Would you like to use this voice for your podcast?"}
|
|
</Typography>
|
|
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox
|
|
checked={useCreatedVoice}
|
|
onChange={(e) => setUseCreatedVoice(e.target.checked)}
|
|
sx={{
|
|
color: "#10b981",
|
|
"&.Mui-checked": { color: "#10b981" },
|
|
}}
|
|
/>
|
|
}
|
|
label={
|
|
<Typography sx={{ color: "#1e293b", fontWeight: 500, fontSize: "0.9375rem" }}>
|
|
Use this voice for my podcast
|
|
</Typography>
|
|
}
|
|
/>
|
|
|
|
<Divider sx={{ my: 2, borderColor: "rgba(0,0,0,0.08)" }} />
|
|
|
|
<Stack direction="row" spacing={1.5} justifyContent="flex-end">
|
|
<Button
|
|
onClick={handleCancelRedo}
|
|
sx={{
|
|
color: "#64748b",
|
|
"&:hover": { color: "#1e293b", background: "rgba(0,0,0,0.04)" },
|
|
}}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
onClick={handleDoneWithVoice}
|
|
sx={{
|
|
background: useCreatedVoice
|
|
? "linear-gradient(135deg, #10b981 0%, #059669 100%)"
|
|
: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
|
|
color: "#fff",
|
|
fontWeight: 600,
|
|
textTransform: "none",
|
|
px: 3,
|
|
boxShadow: useCreatedVoice
|
|
? "0 4px 12px rgba(16, 185, 129, 0.3)"
|
|
: "0 4px 12px rgba(102, 126, 234, 0.3)",
|
|
"&:hover": {
|
|
background: useCreatedVoice
|
|
? "linear-gradient(135deg, #059669 0%, #047857 100%)"
|
|
: "linear-gradient(135deg, #764ba2 0%, #667eea 100%)",
|
|
},
|
|
}}
|
|
>
|
|
{useCreatedVoice ? "Use This Voice" : "Done"}
|
|
</Button>
|
|
</Stack>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
</Collapse>
|
|
</Box>
|
|
) : null}
|
|
|
|
{/* Voice Fine-tune Modal */}
|
|
<Dialog
|
|
open={tuneModalOpen}
|
|
onClose={() => setTuneModalOpen(false)}
|
|
maxWidth="sm"
|
|
fullWidth
|
|
PaperProps={{
|
|
sx: {
|
|
borderRadius: 3,
|
|
background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
|
|
color: "white",
|
|
},
|
|
}}
|
|
>
|
|
<DialogTitle>
|
|
<Stack direction="row" justifyContent="space-between" alignItems="center">
|
|
<Stack direction="row" spacing={1} alignItems="center">
|
|
<Tune sx={{ fontSize: "1.25rem" }} />
|
|
<Typography variant="h6" sx={{ fontWeight: 700 }}>
|
|
Fine-tune Voice
|
|
</Typography>
|
|
</Stack>
|
|
<IconButton onClick={() => setTuneModalOpen(false)} size="small" sx={{ color: "rgba(255,255,255,0.7)" }}>
|
|
<Close />
|
|
</IconButton>
|
|
</Stack>
|
|
{tuneForVoice && (
|
|
<Typography variant="body2" sx={{ opacity: 0.8, mt: 0.5 }}>
|
|
Adjusting settings for: <strong>{voiceOptions.find(v => v.id === tuneForVoice)?.name || "selected voice"}</strong>
|
|
</Typography>
|
|
)}
|
|
{!tuneForVoice && (
|
|
<Typography variant="body2" sx={{ opacity: 0.7, mt: 0.5 }}>
|
|
Adjust speed, pitch, volume and emotion for your selected voice.
|
|
</Typography>
|
|
)}
|
|
</DialogTitle>
|
|
<DialogContent>
|
|
<Stack spacing={3} sx={{ mt: 1 }}>
|
|
<Box>
|
|
<Stack direction="row" spacing={1} alignItems="center" sx={{ mb: 1 }}>
|
|
<Typography variant="subtitle2" sx={{ fontWeight: 600 }}>Speaking Speed</Typography>
|
|
<Chip label={localAudioSettings.speed.toFixed(2)} size="small" sx={{ bgcolor: "rgba(255,255,255,0.15)", color: "white", fontWeight: 600, fontSize: "0.7rem", height: 20 }} />
|
|
</Stack>
|
|
<Slider
|
|
value={localAudioSettings.speed}
|
|
min={0.5}
|
|
max={2.0}
|
|
step={0.05}
|
|
onChange={(_, v) => setLocalAudioSettings(s => ({ ...s, speed: v as number }))}
|
|
sx={{ color: "#4ade80" }}
|
|
/>
|
|
<Typography variant="caption" sx={{ opacity: 0.7 }}>0.5 = Slow • 1.0 = Normal • 2.0 = Fast</Typography>
|
|
</Box>
|
|
<Box>
|
|
<Stack direction="row" spacing={1} alignItems="center" sx={{ mb: 1 }}>
|
|
<Typography variant="subtitle2" sx={{ fontWeight: 600 }}>Volume</Typography>
|
|
<Chip label={localAudioSettings.volume.toFixed(1)} size="small" sx={{ bgcolor: "rgba(255,255,255,0.15)", color: "white", fontWeight: 600, fontSize: "0.7rem", height: 20 }} />
|
|
</Stack>
|
|
<Slider
|
|
value={localAudioSettings.volume}
|
|
min={0.1}
|
|
max={10.0}
|
|
step={0.1}
|
|
onChange={(_, v) => setLocalAudioSettings(s => ({ ...s, volume: v as number }))}
|
|
sx={{ color: "#fbbf24" }}
|
|
/>
|
|
<Typography variant="caption" sx={{ opacity: 0.7 }}>0.1 = Very soft • 1.0 = Normal • 10.0 = Very loud</Typography>
|
|
</Box>
|
|
<Box>
|
|
<Stack direction="row" spacing={1} alignItems="center" sx={{ mb: 1 }}>
|
|
<Typography variant="subtitle2" sx={{ fontWeight: 600 }}>Pitch</Typography>
|
|
<Chip label={localAudioSettings.pitch > 0 ? `+${localAudioSettings.pitch}` : localAudioSettings.pitch} size="small" sx={{ bgcolor: "rgba(255,255,255,0.15)", color: "white", fontWeight: 600, fontSize: "0.7rem", height: 20 }} />
|
|
</Stack>
|
|
<Slider
|
|
value={localAudioSettings.pitch}
|
|
min={-12}
|
|
max={12}
|
|
step={0.5}
|
|
onChange={(_, v) => setLocalAudioSettings(s => ({ ...s, pitch: v as number }))}
|
|
sx={{ color: "#f87171" }}
|
|
/>
|
|
<Typography variant="caption" sx={{ opacity: 0.7 }}>-12 = Very deep • 0 = Normal • +12 = Very high</Typography>
|
|
</Box>
|
|
<Box>
|
|
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>Emotion</Typography>
|
|
<Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap>
|
|
{EMOTION_OPTIONS.map((em) => (
|
|
<Chip
|
|
key={em}
|
|
label={em.charAt(0).toUpperCase() + em.slice(1)}
|
|
size="small"
|
|
onClick={() => setLocalAudioSettings(s => ({ ...s, emotion: em }))}
|
|
sx={{
|
|
bgcolor: localAudioSettings.emotion === em ? "rgba(255,255,255,0.25)" : "rgba(255,255,255,0.08)",
|
|
color: "white",
|
|
fontWeight: localAudioSettings.emotion === em ? 700 : 400,
|
|
border: localAudioSettings.emotion === em ? "1px solid rgba(255,255,255,0.5)" : "1px solid rgba(255,255,255,0.1)",
|
|
cursor: "pointer",
|
|
"&:hover": { bgcolor: "rgba(255,255,255,0.2)" },
|
|
}}
|
|
/>
|
|
))}
|
|
</Stack>
|
|
</Box>
|
|
</Stack>
|
|
</DialogContent>
|
|
<DialogActions sx={{ px: 3, pb: 2 }}>
|
|
<Button
|
|
onClick={() => {
|
|
setLocalAudioSettings({ ...DEFAULT_AUDIO_SETTINGS });
|
|
if (onAudioSettingsChange) onAudioSettingsChange({ ...DEFAULT_AUDIO_SETTINGS });
|
|
setTuneModalOpen(false);
|
|
}}
|
|
sx={{ color: "rgba(255,255,255,0.7)" }}
|
|
>
|
|
Reset to Defaults
|
|
</Button>
|
|
<Button
|
|
onClick={() => setTuneModalOpen(false)}
|
|
sx={{ color: "rgba(255,255,255,0.7)" }}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
onClick={handleApplyTune}
|
|
startIcon={<Tune sx={{ fontSize: "1rem" }} />}
|
|
sx={{
|
|
bgcolor: "#4ade80",
|
|
color: "#0f172a",
|
|
fontWeight: 700,
|
|
"&:hover": { bgcolor: "#22c55e" },
|
|
}}
|
|
>
|
|
Apply Settings
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default VoiceSelector; |