mirror of
https://github.com/jambonz/jambonz-webapp.git
synced 2026-01-25 02:08:19 +00:00
Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
4fc6b1ae40 |
@@ -432,6 +432,13 @@ export const DEEPGRAM_STT_ENPOINT = [
|
||||
{ name: "EU-hosted", value: "api.eu.deepgram.com" },
|
||||
];
|
||||
|
||||
// ElevenLabs API URI options
|
||||
export const ELEVENLABS_API_URI_OPTIONS = [
|
||||
{ name: "US", value: "api.elevenlabs.io" },
|
||||
{ name: "EU", value: "api.eu.residency.elevenlabs.io" },
|
||||
{ name: "IN", value: "api.in.residency.elevenlabs.io" },
|
||||
];
|
||||
|
||||
/** User scope values values */
|
||||
export const USER_ADMIN = "admin";
|
||||
export const USER_SP = "service_provider";
|
||||
|
||||
@@ -97,6 +97,7 @@ import {
|
||||
DEFAULT_VERBIO_MODEL,
|
||||
DISABLE_ADDITIONAL_SPEECH_VENDORS,
|
||||
DISABLE_CUSTOM_SPEECH,
|
||||
ELEVENLABS_API_URI_OPTIONS,
|
||||
GOOGLE_CUSTOM_VOICES_REPORTED_USAGE,
|
||||
VERBIO_STT_MODELS,
|
||||
} from "src/api/constants";
|
||||
@@ -110,13 +111,6 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
|
||||
const { toastError, toastSuccess } = useToast();
|
||||
const navigate = useNavigate();
|
||||
const user = useSelectState("user");
|
||||
|
||||
// ElevenLabs API URI options
|
||||
const ELEVENLABS_API_URI_OPTIONS = [
|
||||
{ name: "US", value: "api.elevenlabs.io" },
|
||||
{ name: "EU", value: "api.eu.residency.elevenlabs.io" },
|
||||
{ name: "IN", value: "api.in.residency.elevenlabs.io" },
|
||||
];
|
||||
const currentServiceProvider = useSelectState("currentServiceProvider");
|
||||
const regions = useRegionVendors();
|
||||
const [accounts] = useServiceProviderData<Account[]>("Accounts");
|
||||
@@ -418,6 +412,9 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
|
||||
...(vendor === VENDOR_AWS && {
|
||||
aws_region: region || null,
|
||||
}),
|
||||
...(vendor === VENDOR_GOOGLE && {
|
||||
model_id: ttsModelId || null,
|
||||
}),
|
||||
...(vendor === VENDOR_MICROSOFT && {
|
||||
region: region || null,
|
||||
use_custom_tts:
|
||||
@@ -852,6 +849,10 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
|
||||
setOptionsInitialChecked(true);
|
||||
}
|
||||
if (credential?.data?.vendor === VENDOR_GOOGLE) {
|
||||
// Load model_id for Gemini TTS
|
||||
if (credential.data.model_id) {
|
||||
setTtsModelId(credential.data.model_id);
|
||||
}
|
||||
// let try to check if there is custom voices
|
||||
getGoogleCustomVoices({
|
||||
speech_credential_sid: credential.data.speech_credential_sid,
|
||||
@@ -1236,218 +1237,245 @@ export const SpeechServiceForm = ({ credential }: SpeechServiceFormProps) => {
|
||||
</fieldset>
|
||||
)}
|
||||
{ttsCheck && vendor === VENDOR_GOOGLE && (
|
||||
<fieldset>
|
||||
<label htmlFor="use_custom_voice" className="chk">
|
||||
<>
|
||||
<fieldset>
|
||||
<label htmlFor="google_tts_model_id">
|
||||
Model ID
|
||||
<Tooltip text="Provide a model ID to enable Gemini TTS (e.g., gemini-2.5-flash-tts). Leave empty to use standard Google TTS.">
|
||||
{" "}
|
||||
</Tooltip>
|
||||
</label>
|
||||
<input
|
||||
id="use_custom_voice"
|
||||
name="use_custom_voice"
|
||||
type="checkbox"
|
||||
onChange={(e) => {
|
||||
if (e.target.checked && customVoices.length === 0) {
|
||||
setCustomVoices([DEFAULT_GOOGLE_CUSTOM_VOICE]);
|
||||
}
|
||||
setUseCustomVoicesCheck(e.target.checked);
|
||||
}}
|
||||
checked={useCustomVoicesCheck}
|
||||
id="google_tts_model_id"
|
||||
name="google_tts_model_id"
|
||||
type="text"
|
||||
placeholder="e.g., gemini-2.5-flash-tts"
|
||||
value={ttsModelId}
|
||||
onChange={(e) => setTtsModelId(e.target.value)}
|
||||
/>
|
||||
<div>Use custom voices</div>
|
||||
</label>
|
||||
{useCustomVoicesCheck && (
|
||||
<fieldset>
|
||||
<label htmlFor="sip_gateways">Custom Voices</label>
|
||||
<MXS>
|
||||
<em>At least one Custom voice is required.</em>
|
||||
</MXS>
|
||||
{customVoicesMessage && (
|
||||
<Message message={customVoicesMessage} />
|
||||
)}
|
||||
{hasLength(customVoices) &&
|
||||
customVoices.map((v, i) => (
|
||||
<div key={`custom_voice_${i}`} className="customVoice">
|
||||
<div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label htmlFor="use_custom_voice" className="chk">
|
||||
<input
|
||||
id="use_custom_voice"
|
||||
name="use_custom_voice"
|
||||
type="checkbox"
|
||||
onChange={(e) => {
|
||||
if (e.target.checked && customVoices.length === 0) {
|
||||
setCustomVoices([DEFAULT_GOOGLE_CUSTOM_VOICE]);
|
||||
}
|
||||
setUseCustomVoicesCheck(e.target.checked);
|
||||
}}
|
||||
checked={useCustomVoicesCheck}
|
||||
/>
|
||||
<div>Use custom voices</div>
|
||||
</label>
|
||||
{useCustomVoicesCheck && (
|
||||
<fieldset>
|
||||
<label htmlFor="sip_gateways">Custom Voices</label>
|
||||
<MXS>
|
||||
<em>At least one Custom voice is required.</em>
|
||||
</MXS>
|
||||
{customVoicesMessage && (
|
||||
<Message message={customVoicesMessage} />
|
||||
)}
|
||||
{hasLength(customVoices) &&
|
||||
customVoices.map((v, i) => (
|
||||
<div
|
||||
key={`custom_voice_${i}`}
|
||||
className="customVoice"
|
||||
>
|
||||
<div>
|
||||
<label htmlFor="custom_voice_name">
|
||||
Name
|
||||
{!v.use_voice_cloning_key
|
||||
? " / Reported Usage"
|
||||
: ""}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<input
|
||||
id={`sip_ip_${i}`}
|
||||
name={`sip_ip_${i}`}
|
||||
type="text"
|
||||
placeholder="Assigned Name"
|
||||
required
|
||||
value={v.name}
|
||||
onChange={(e) => {
|
||||
updateCustomVoices(i, "name", e.target.value);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{!v.use_voice_cloning_key && (
|
||||
<div>
|
||||
<Selector
|
||||
id={"google_custom_voices_reported_usage"}
|
||||
name={"google_custom_voices_reported_usage"}
|
||||
value={v.reported_usage}
|
||||
options={GOOGLE_CUSTOM_VOICES_REPORTED_USAGE}
|
||||
<label htmlFor="custom_voice_name">
|
||||
Name
|
||||
{!v.use_voice_cloning_key
|
||||
? " / Reported Usage"
|
||||
: ""}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<input
|
||||
id={`sip_ip_${i}`}
|
||||
name={`sip_ip_${i}`}
|
||||
type="text"
|
||||
placeholder="Assigned Name"
|
||||
required
|
||||
value={v.name}
|
||||
onChange={(e) => {
|
||||
updateCustomVoices(
|
||||
i,
|
||||
"reported_usage",
|
||||
"name",
|
||||
e.target.value,
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<label
|
||||
htmlFor={`use_voice_cloning_key_${i}`}
|
||||
className="chk"
|
||||
>
|
||||
<input
|
||||
id={`use_voice_cloning_key_${i}`}
|
||||
name={`use_voice_cloning_key_${i}`}
|
||||
type="checkbox"
|
||||
onChange={(e) => {
|
||||
updateCustomVoices(
|
||||
i,
|
||||
"use_voice_cloning_key",
|
||||
e.target.checked ? 1 : 0,
|
||||
);
|
||||
}}
|
||||
checked={v.use_voice_cloning_key ? true : false}
|
||||
/>
|
||||
<div>Use voice cloning key</div>
|
||||
</label>
|
||||
|
||||
{!v.use_voice_cloning_key && (
|
||||
<>
|
||||
<div>
|
||||
{!v.use_voice_cloning_key && (
|
||||
<div>
|
||||
<label htmlFor="custom_voice_name">
|
||||
Model
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<input
|
||||
id={`sip_ip_${i}`}
|
||||
name={`sip_ip_${i}`}
|
||||
type="text"
|
||||
placeholder="Model"
|
||||
required
|
||||
value={v.model}
|
||||
style={{ maxWidth: "100%" }}
|
||||
<Selector
|
||||
id={"google_custom_voices_reported_usage"}
|
||||
name={"google_custom_voices_reported_usage"}
|
||||
value={v.reported_usage}
|
||||
options={
|
||||
GOOGLE_CUSTOM_VOICES_REPORTED_USAGE
|
||||
}
|
||||
onChange={(e) => {
|
||||
updateCustomVoices(
|
||||
i,
|
||||
"model",
|
||||
"reported_usage",
|
||||
e.target.value,
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
|
||||
{v.use_voice_cloning_key === 1 && (
|
||||
<>
|
||||
<div>
|
||||
<label
|
||||
htmlFor={`use_voice_cloning_key_${i}`}
|
||||
className="chk"
|
||||
>
|
||||
<input
|
||||
id={`use_voice_cloning_key_${i}`}
|
||||
name={`use_voice_cloning_key_${i}`}
|
||||
type="checkbox"
|
||||
onChange={(e) => {
|
||||
updateCustomVoices(
|
||||
i,
|
||||
"use_voice_cloning_key",
|
||||
e.target.checked ? 1 : 0,
|
||||
);
|
||||
}}
|
||||
checked={v.use_voice_cloning_key ? true : false}
|
||||
/>
|
||||
<div>Use voice cloning key</div>
|
||||
</label>
|
||||
|
||||
{!v.use_voice_cloning_key && (
|
||||
<>
|
||||
<div>
|
||||
{hasValue(v.voice_cloning_key) && (
|
||||
<pre>
|
||||
<code>{v.voice_cloning_key}</code>
|
||||
</pre>
|
||||
)}
|
||||
<div>
|
||||
<label htmlFor="custom_voice_name">
|
||||
Model
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<FileUpload
|
||||
id={`google_voice_cloning_key_${i}`}
|
||||
name={`google_voice_cloning_key_${i}`}
|
||||
handleFile={(file) => {
|
||||
updateCustomVoices(
|
||||
i,
|
||||
"voice_cloning_key_file",
|
||||
file,
|
||||
);
|
||||
file.text().then((text) => {
|
||||
<div>
|
||||
<input
|
||||
id={`sip_ip_${i}`}
|
||||
name={`sip_ip_${i}`}
|
||||
type="text"
|
||||
placeholder="Model"
|
||||
required
|
||||
value={v.model}
|
||||
style={{ maxWidth: "100%" }}
|
||||
onChange={(e) => {
|
||||
updateCustomVoices(
|
||||
i,
|
||||
"voice_cloning_key",
|
||||
text.substring(0, 100) + "...",
|
||||
"model",
|
||||
e.target.value,
|
||||
);
|
||||
});
|
||||
}}
|
||||
required={!v.voice_cloning_key}
|
||||
/>
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
<button
|
||||
className="btnty"
|
||||
title="Delete custom voice"
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setCustomVoicesMessage("");
|
||||
if (customVoices.length === 1) {
|
||||
setCustomVoicesMessage(
|
||||
"You must provide at least one custom voice.",
|
||||
{v.use_voice_cloning_key === 1 && (
|
||||
<>
|
||||
<div>
|
||||
<div>
|
||||
{hasValue(v.voice_cloning_key) && (
|
||||
<pre>
|
||||
<code>{v.voice_cloning_key}</code>
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<FileUpload
|
||||
id={`google_voice_cloning_key_${i}`}
|
||||
name={`google_voice_cloning_key_${i}`}
|
||||
handleFile={(file) => {
|
||||
updateCustomVoices(
|
||||
i,
|
||||
"voice_cloning_key_file",
|
||||
file,
|
||||
);
|
||||
file.text().then((text) => {
|
||||
updateCustomVoices(
|
||||
i,
|
||||
"voice_cloning_key",
|
||||
text.substring(0, 100) + "...",
|
||||
);
|
||||
});
|
||||
}}
|
||||
required={!v.voice_cloning_key}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<button
|
||||
className="btnty"
|
||||
title="Delete custom voice"
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setCustomVoicesMessage("");
|
||||
if (customVoices.length === 1) {
|
||||
setCustomVoicesMessage(
|
||||
"You must provide at least one custom voice.",
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (v.google_custom_voice_sid) {
|
||||
deleteGoogleCustomVoice(
|
||||
v.google_custom_voice_sid,
|
||||
).finally(() => {
|
||||
credential?.refetch();
|
||||
});
|
||||
}
|
||||
setCustomVoices((prev) =>
|
||||
prev.filter((_, idx) => idx !== i),
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (v.google_custom_voice_sid) {
|
||||
deleteGoogleCustomVoice(
|
||||
v.google_custom_voice_sid,
|
||||
).finally(() => {
|
||||
credential?.refetch();
|
||||
});
|
||||
}
|
||||
setCustomVoices((prev) =>
|
||||
prev.filter((_, idx) => idx !== i),
|
||||
);
|
||||
}}
|
||||
>
|
||||
<Icon>
|
||||
<Icons.Trash2 />
|
||||
</Icon>
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<ButtonGroup left>
|
||||
<button
|
||||
className="btnty"
|
||||
type="button"
|
||||
title="Add Voice"
|
||||
onClick={() => {
|
||||
setCustomVoicesMessage("");
|
||||
setCustomVoices((prev) => [
|
||||
...prev,
|
||||
DEFAULT_GOOGLE_CUSTOM_VOICE,
|
||||
]);
|
||||
}}
|
||||
>
|
||||
<Icon subStyle="teal">
|
||||
<Icons.Plus />
|
||||
</Icon>
|
||||
</button>
|
||||
</ButtonGroup>
|
||||
</fieldset>
|
||||
)}
|
||||
</fieldset>
|
||||
}}
|
||||
>
|
||||
<Icon>
|
||||
<Icons.Trash2 />
|
||||
</Icon>
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<ButtonGroup left>
|
||||
<button
|
||||
className="btnty"
|
||||
type="button"
|
||||
title="Add Voice"
|
||||
onClick={() => {
|
||||
setCustomVoicesMessage("");
|
||||
setCustomVoices((prev) => [
|
||||
...prev,
|
||||
DEFAULT_GOOGLE_CUSTOM_VOICE,
|
||||
]);
|
||||
}}
|
||||
>
|
||||
<Icon subStyle="teal">
|
||||
<Icons.Plus />
|
||||
</Icon>
|
||||
</button>
|
||||
</ButtonGroup>
|
||||
</fieldset>
|
||||
)}
|
||||
</fieldset>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user