engineering/uncloseai.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make voice dropdown dynamic in Hermes modal

Browse source
This commit is contained in:
Russell Ballestrini 2025-11-10 03:43:11 -05:00
parent 12b10b01cd
commit 6bd6a12f83
1 changed files with 64 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

75
public/src/uncloseai-embed-modal.js
View file

@ -346,18 +346,68 @@ async function openUncloseaiEmbeddedModalNew() {
voiceSelect.id = "hermes-voice-select";
voiceSelect.className = "uncloseai-modal-select";
const voices = ["alloy", "echo", "fable", "onyx", "nova", "shimmer"];
voices.forEach((voice, index) => {
const option = document.createElement("option");
option.value = voice;
option.textContent = voice.charAt(0).toUpperCase() + voice.slice(1);
voiceSelect.appendChild(option);
});
// Load voices dynamically from API
const loadVoices = async () => {
try {
const { VOICES_API_URL } = await import("./config.js");
const response = await fetch(VOICES_API_URL);
// Load saved voice from localStorage or default to alloy
const savedVoice = localStorage.getItem("selectedVoice") || "alloy";
voiceSelect.value = savedVoice;
console.log("Voices loaded:", voices.length, "voices, selected:", savedVoice);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
const voices = data.voices || [];
voiceSelect.innerHTML = ''; // Clear existing options
if (voices.length > 0) {
// Group voices by model
const groupedVoices = {};
voices.forEach(v => {
if (!groupedVoices[v.model]) {
groupedVoices[v.model] = [];
}
groupedVoices[v.model].push(v.voice);
});
// Add options grouped by model
Object.keys(groupedVoices).sort().forEach(model => {
const optgroup = document.createElement("optgroup");
optgroup.label = model;
groupedVoices[model].forEach(voice => {
const option = document.createElement("option");
option.value = voice;
option.textContent = voice.charAt(0).toUpperCase() + voice.slice(1);
optgroup.appendChild(option);
});
voiceSelect.appendChild(optgroup);
});
console.log("Voices loaded:", voices.length, "voices from API");
} else {
// No voices from API, use fallback
throw new Error("No voices in API response");
}
} catch (error) {
console.warn("Failed to load voices from API, using fallback:", error);
// Fallback to default voices
const fallbackVoices = ["alloy", "echo", "fable", "onyx", "nova", "shimmer"];
voiceSelect.innerHTML = '';
fallbackVoices.forEach((voice) => {
const option = document.createElement("option");
option.value = voice;
option.textContent = voice.charAt(0).toUpperCase() + voice.slice(1);
voiceSelect.appendChild(option);
});
console.log("Voices loaded:", fallbackVoices.length, "fallback voices");
}
// Load saved voice from localStorage or default to alloy
const savedVoice = localStorage.getItem("selectedVoice") || "alloy";
voiceSelect.value = savedVoice;
console.log("Selected voice:", savedVoice);
};
// Save voice selection to localStorage when changed
voiceSelect.onchange = () => {
@ -367,6 +417,9 @@ async function openUncloseaiEmbeddedModalNew() {
voiceSection.appendChild(voiceSelect);
// Load voices asynchronously
loadVoices();
// Language preference section
const languageSection = document.createElement("div");
languageSection.className = "uncloseai-section";