θΏ™ζ˜―indexlocζδΎ›ηš„ζœεŠ‘οΌŒδΈθ¦θΎ“ε…₯任何密码
Skip to content

Patch 11Labs selection UI bug #2284

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 14, 2024
Merged

Patch 11Labs selection UI bug #2284

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
98e681c
Patch 11Labs selection UI bug
timothycarambat Sep 14, 2024
a61d1bc
remove log
timothycarambat Sep 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 10 additions & 5 deletions frontend/src/components/TextToSpeech/ElevenLabsOptions/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@ import System from "@/models/system";

export default function ElevenLabsOptions({ settings }) {
const [inputValue, setInputValue] = useState(settings?.TTSElevenLabsKey);
const [openAIKey, setOpenAIKey] = useState(settings?.TTSElevenLabsKey);
const [elevenLabsKey, setElevenLabsKey] = useState(
settings?.TTSElevenLabsKey
);

return (
<div className="flex gap-x-4">
Expand All @@ -21,11 +23,11 @@ export default function ElevenLabsOptions({ settings }) {
autoComplete="off"
spellCheck={false}
onChange={(e) => setInputValue(e.target.value)}
onBlur={() => setOpenAIKey(inputValue)}
onBlur={() => setElevenLabsKey(inputValue)}
/>
</div>
{!settings?.credentialsOnly && (
<ElevenLabsModelSelection settings={settings} apiKey={openAIKey} />
<ElevenLabsModelSelection settings={settings} apiKey={elevenLabsKey} />
)}
</div>
);
Expand Down Expand Up @@ -84,15 +86,18 @@ function ElevenLabsModelSelection({ apiKey, settings }) {
<select
name="TTSElevenLabsVoiceModel"
required={true}
defaultValue={settings?.TTSElevenLabsVoiceModel}
className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
>
{Object.keys(groupedModels)
.sort()
.map((organization) => (
<optgroup key={organization} label={organization}>
{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}
</option>
))}
Expand Down