michael/merlyn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Patch 11Labs selection UI bug (#2284)

Browse Source 
* Patch 11Labs selection UI bug

* remove log
This commit is contained in:
Timothy Carambat 2024-09-13 18:00:28 -07:00 committed by GitHub
parent 644a35a32a
commit 0deb0a01c6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/components/TextToSpeech/ElevenLabsOptions/index.jsx
View File

@ -3,7 +3,9 @@ import System from "@/models/system";
export default function ElevenLabsOptions({ settings }) { export default function ElevenLabsOptions({ settings }) {
const [inputValue, setInputValue] = useState(settings?.TTSElevenLabsKey); const [inputValue, setInputValue] = useState(settings?.TTSElevenLabsKey);
const [openAIKey, setOpenAIKey] = useState(settings?.TTSElevenLabsKey); const [elevenLabsKey, setElevenLabsKey] = useState(
settings?.TTSElevenLabsKey
);
return ( return (
<div className="flex gap-x-4"> <div className="flex gap-x-4">
@ -21,11 +23,11 @@ export default function ElevenLabsOptions({ settings }) {
autoComplete="off" autoComplete="off"
spellCheck={false} spellCheck={false}
onChange={(e) => setInputValue(e.target.value)} onChange={(e) => setInputValue(e.target.value)}
onBlur={() => setOpenAIKey(inputValue)} onBlur={() => setElevenLabsKey(inputValue)}
/> />
</div> </div>
{!settings?.credentialsOnly && ( {!settings?.credentialsOnly && (
<ElevenLabsModelSelection settings={settings} apiKey={openAIKey} /> <ElevenLabsModelSelection settings={settings} apiKey={elevenLabsKey} />
)} )}
</div> </div>
); );
@ -84,7 +86,6 @@ function ElevenLabsModelSelection({ apiKey, settings }) {
<select <select
name="TTSElevenLabsVoiceModel" name="TTSElevenLabsVoiceModel"
required={true} required={true}
defaultValue={settings?.TTSElevenLabsVoiceModel}
className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5" className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
> >
{Object.keys(groupedModels) {Object.keys(groupedModels)
@ -92,7 +93,11 @@ function ElevenLabsModelSelection({ apiKey, settings }) {
.map((organization) => ( .map((organization) => (
<optgroup key={organization} label={organization}> <optgroup key={organization} label={organization}>
{groupedModels[organization].map((model) => ( {groupedModels[organization].map((model) => (
<option key={model.id} value={model.id}> <option
key={model.id}
value={model.id}
selected={model.id === settings?.TTSElevenLabsVoiceModel}
>
{model.name} {model.name}
</option> </option>
))} ))}