document.addEventListener('DOMContentLoaded', function() {
    fetch('https://99i-tts.hf.space/voices?l=zh&d')
        .then(response => response.json())
        .then(data => {
            const voices = data.voices;
            displayVoices(voices);
            setupFilters(voices);
        });

    function displayVoices(voices) {
        const tableBody = document.getElementById('voicesTable').getElementsByTagName('tbody')[0];
        tableBody.innerHTML = ''; // 清空表格

        voices.forEach(voice => {
            const row = tableBody.insertRow();
            row.insertCell(0).innerText = voice.DisplayName;
            row.insertCell(1).innerText = voice.Gender;
            row.insertCell(2).innerText = voice.LocalName;
            row.insertCell(3).innerText = voice.LocaleName;
            row.insertCell(4).innerText = voice.Status;
            // 插入其他单元格
        });
    }

    function setupFilters(voices) {
        const genderSelect = document.getElementById('gender');
        const localeSelect = document.getElementById('locale');

        genderSelect.addEventListener('change', () => filterVoices());
        localeSelect.addEventListener('change', () => filterVoices());

        function filterVoices() {
            const selectedGender = genderSelect.value;
            const selectedLocale = localeSelect.value;

            const filteredVoices = voices.filter(voice => {
                return (selectedGender === '' || voice.Gender === selectedGender) &&
                       (selectedLocale === '' || voice.Locale === selectedLocale);
            });

            displayVoices(filteredVoices);
        }
    }
});
body {
    font-family: Arial, sans-serif;
}

#filters {
    margin-bottom: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}