Move request to backend

This commit is contained in:
Cohee 2024-08-13 20:29:33 +03:00
parent ab42d6ff82
commit 1883095e39
5 changed files with 105 additions and 20 deletions

View File

@ -83,21 +83,21 @@ export function getPreviewString(lang) {
}
const ttsProviders = {
ElevenLabs: ElevenLabsTtsProvider,
Silero: SileroTtsProvider,
XTTSv2: XTTSTtsProvider,
VITS: VITSTtsProvider,
GSVI: GSVITtsProvider,
SBVits2: SBVits2TtsProvider,
System: SystemTtsProvider,
AllTalk: AllTalkTtsProvider,
Azure: AzureTtsProvider,
Coqui: CoquiTtsProvider,
Edge: EdgeTtsProvider,
ElevenLabs: ElevenLabsTtsProvider,
GSVI: GSVITtsProvider,
Novel: NovelTtsProvider,
OpenAI: OpenAITtsProvider,
AllTalk: AllTalkTtsProvider,
'OpenAI Compatible': OpenAICompatibleTtsProvider,
SBVits2: SBVits2TtsProvider,
Silero: SileroTtsProvider,
SpeechT5: SpeechT5TtsProvider,
Azure: AzureTtsProvider,
OpenAICompatible: OpenAICompatibleTtsProvider,
System: SystemTtsProvider,
VITS: VITSTtsProvider,
XTTSv2: XTTSTtsProvider,
};
let ttsProvider;
let ttsProviderName;

View File

@ -1,4 +1,6 @@
import { getRequestHeaders } from '../../../script.js';
import { callGenericPopup, POPUP_RESULT, POPUP_TYPE } from '../../popup.js';
import { findSecret, SECRET_KEYS, secret_state, writeSecret } from '../../secrets.js';
import { getPreviewString, saveTtsProviderSettings } from './index.js';
export { OpenAICompatibleTtsProvider };
@ -21,7 +23,15 @@ class OpenAICompatibleTtsProvider {
get settingsHtml() {
let html = `
<label for="openai_compatible_tts_endpoint">Provider Endpoint:</label>
<input id="openai_compatible_tts_endpoint" type="text" class="text_pole" maxlength="250" value="${this.defaultSettings.provider_endpoint}"/>
<div class="flex-container alignItemsCenter">
<div class="flex1">
<input id="openai_compatible_tts_endpoint" type="text" class="text_pole" maxlength="250" value="${this.defaultSettings.provider_endpoint}"/>
</div>
<div id="openai_compatible_tts_key" class="menu_button menu_button_icon">
<i class="fa-solid fa-key"></i>
<span>API Key</span>
</div>
</div>
<label for="openai_compatible_model">Model:</label>
<input id="openai_compatible_model" type="text" class="text_pole" maxlength="250" value="${this.defaultSettings.model}"/>
<label for="openai_compatible_tts_voices">Available Voices (comma separated):</label>
@ -64,7 +74,35 @@ class OpenAICompatibleTtsProvider {
$('#openai_compatible_tts_speed_output').text(this.settings.speed);
this.refreshSession();
$('#openai_compatible_tts_key').toggleClass('success', secret_state[SECRET_KEYS.CUSTOM_OPENAI_TTS]);
$('#openai_compatible_tts_key').on('click', async () => {
const popupText = 'OpenAI-compatible TTS API Key';
const savedKey = secret_state[SECRET_KEYS.CUSTOM_OPENAI_TTS] ? await findSecret(SECRET_KEYS.CUSTOM_OPENAI_TTS) : '';
const key = await callGenericPopup(popupText, POPUP_TYPE.INPUT, savedKey, {
customButtons: [{
text: 'Remove Key',
appendAtEnd: true,
result: POPUP_RESULT.CANCELLED,
action: async () => {
await writeSecret(SECRET_KEYS.CUSTOM_OPENAI_TTS, '');
$('#openai_compatible_tts_key').toggleClass('success', secret_state[SECRET_KEYS.CUSTOM_OPENAI_TTS]);
toastr.success('API Key removed');
await this.onRefreshClick();
},
}],
});
if (key == false || key == '' || key == null) {
return;
}
await writeSecret(SECRET_KEYS.CUSTOM_OPENAI_TTS, String(key));
toastr.success('API Key saved');
$('#openai_compatible_tts_key').toggleClass('success', secret_state[SECRET_KEYS.CUSTOM_OPENAI_TTS]);
await this.onRefreshClick();
});
await this.checkReady();
@ -75,7 +113,7 @@ class OpenAICompatibleTtsProvider {
// Update dynamically
this.settings.provider_endpoint = String($('#openai_compatible_tts_endpoint').val());
this.settings.model = String($('#openai_compatible_model').val());
this.settings.available_voices = $('#openai_compatible_tts_voices').val().split(',');
this.settings.available_voices = String($('#openai_compatible_tts_voices').val()).split(',');
this.settings.speed = Number($('#openai_compatible_tts_speed').val());
$('#openai_compatible_tts_speed_output').text(this.settings.speed);
saveTtsProviderSettings();
@ -132,15 +170,16 @@ class OpenAICompatibleTtsProvider {
async fetchTtsGeneration(inputText, voiceId) {
console.info(`Generating new TTS for voice_id ${voiceId}`);
const response = await fetch(this.settings.provider_endpoint, {
const response = await fetch('/api/openai/custom/generate-voice', {
method: 'POST',
headers: getRequestHeaders(),
body: JSON.stringify({
'model': this.settings.model,
'input': inputText,
'voice': voiceId,
'response_format': 'mp3',
'speed': this.settings.speed,
provider_endpoint: this.settings.provider_endpoint,
model: this.settings.model,
input: inputText,
voice: voiceId,
response_format: 'mp3',
speed: this.settings.speed,
}),
});

View File

@ -33,6 +33,7 @@ export const SECRET_KEYS = {
HUGGINGFACE: 'api_key_huggingface',
STABILITY: 'api_key_stability',
BLOCKENTROPY: 'api_key_blockentropy',
CUSTOM_OPENAI_TTS: 'api_key_custom_openai_tts',
};
const INPUT_MAP = {
@ -127,7 +128,7 @@ export async function writeSecret(key, value) {
const text = await response.text();
if (text == 'ok') {
secret_state[key] = true;
secret_state[key] = !!value;
updateSecretDisplay();
}
}

View File

@ -282,4 +282,48 @@ router.post('/generate-image', jsonParser, async (request, response) => {
}
});
const custom = express.Router();
custom.post('/generate-voice', jsonParser, async (request, response) => {
try {
const key = readSecret(request.user.directories, SECRET_KEYS.CUSTOM_OPENAI_TTS);
const { input, provider_endpoint, response_format, voice, speed, model } = request.body;
if (!provider_endpoint) {
console.log('No OpenAI-compatible TTS provider endpoint provided');
return response.sendStatus(400);
}
const result = await fetch(provider_endpoint, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${key ?? ''}`,
},
body: JSON.stringify({
input: input ?? '',
response_format: response_format ?? 'mp3',
voice: voice ?? 'alloy',
speed: speed ?? 1,
model: model ?? 'tts-1',
}),
});
if (!result.ok) {
const text = await result.text();
console.log('OpenAI request failed', result.statusText, text);
return response.status(500).send(text);
}
const buffer = await result.arrayBuffer();
response.setHeader('Content-Type', 'audio/mpeg');
return response.send(Buffer.from(buffer));
} catch (error) {
console.error('OpenAI TTS generation failed', error);
response.status(500).send('Internal server error');
}
});
router.use('/custom', custom);
module.exports = { router };

View File

@ -45,6 +45,7 @@ const SECRET_KEYS = {
HUGGINGFACE: 'api_key_huggingface',
STABILITY: 'api_key_stability',
BLOCKENTROPY: 'api_key_blockentropy',
CUSTOM_OPENAI_TTS: 'api_key_custom_openai_tts',
};
// These are the keys that are safe to expose, even if allowKeysExposure is false