Spaces:

99i
/

voices

Running

App Files Files Community

99i commited on Jan 2, 2025

Commit

de64bd3

verified ·

1 Parent(s): a33e934

Upload 3 files

Browse files

Files changed (3) hide show

index.html +48 -18
script.js +71 -0
styles.css +66 -0

index.html CHANGED Viewed

@@ -1,19 +1,49 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>角色信息表</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <h1>角色信息表</h1>
+    <div id="filters">
+        <label for="gender">性别:</label>
+        <select id="gender">
+            <option value="">不限</option>
+            <option value="Male">男</option>
+            <option value="Female">女</option>
+        </select>
+        <label for="locale">语言:</label>
+        <select id="locale">
+            <option value="">不限</option>
+            <option value="zh-CN">中文</option>
+            <!-- 其他语言选项 -->
+        </select>
+        <!-- 其他筛选选项 -->
+    </div>
+    <table id="voicesTable">
+        <thead>
+            <tr>
+                <th>显示名称</th>
+                <th>性别</th>
+                <th>本地名称</th>
+                <th>语言</th>
+                <th>状态</th>
+                <th>采样率</th>
+                <th>风格列表</th>
+                <th>角色扮演列表</th>
+                <th>语音类型</th>
+                <th>每分钟单词数</th>
+                <th>试听音频</th>
+                <!-- 其他表头 -->
+            </tr>
+        </thead>
+        <tbody>
+            <!-- 角色信息将在这里动态插入 -->
+        </tbody>
+    </table>
+    <script src="script.js"></script>
+</body>
 </html>

script.js ADDED Viewed

	@@ -0,0 +1,71 @@

+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.ShortName;
+            row.insertCell(1).innerText = voice.Gender;
+            row.insertCell(2).innerText = voice.LocalName;
+            row.insertCell(3).innerText = voice.LocaleName;
+            row.insertCell(4).innerText = voice.Status;
+            row.insertCell(5).innerText = voice.SampleRateHertz;
+            row.insertCell(6).innerText = voice.StyleList ? voice.StyleList.join(', ') : '';
+            row.insertCell(7).innerText = voice.RolePlayList ? voice.RolePlayList.join(', ') : '';
+            row.insertCell(8).innerText = voice.VoiceType;
+            row.insertCell(9).innerText = voice.WordsPerMinute;
+            // 插入其他单元格
+            // 添加试听音频列
+            const audioCell = row.insertCell(10);
+            if (voice.StyleList && voice.StyleList.length > 0) {
+                voice.StyleList.forEach(style => {
+                    const styleName = document.createElement('span');
+                    styleName.innerText = `${style}: `;
+                    audioCell.appendChild(styleName);
+                    const audioUrl = `https://99i-tts.hf.space/tts?v=${voice.ShortName}&t=很高兴见到你&s=${style}`;
+                    const audio = document.createElement('audio');
+                    audio.src = audioUrl;
+                    audio.controls = true;
+                    audioCell.appendChild(audio);
+                });
+            } else {
+                // 如果没有风格，提供一个默认的试听音频
+                const audioUrl = `https://99i-tts.hf.space/tts?v=${voice.ShortName}&t=很高兴见到你`;
+                const audio = document.createElement('audio');
+                audio.src = audioUrl;
+                audio.controls = true;
+                audioCell.appendChild(audio);
+            }
+        });
+    }
+    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);
+        }
+    }
+});

styles.css ADDED Viewed

	@@ -0,0 +1,66 @@

+document.addEventListener('DOMContentLoaded', function() {
+    fetch('https://99i-tts.hf.space/voices?l=zh&amp;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;
+}