Code-Inc/supertonic
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

supertonic 3

Browse Source
This commit is contained in:
haeon
2026-05-06 23:09:06 +02:00
parent 6fc89ea89e
commit 0a98c9f127
47 changed files with 530 additions and 411 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web/README.md
View File

@@ -4,7 +4,7 @@ This example demonstrates how to use Supertonic in a web browser using ONNX Runt
## 📰 Update News
**2026.01.06** - 🎉 **Supertonic 2** released with multilingual support! Now supports English (`en`), Korean (`ko`), Spanish (`es`), Portuguese (`pt`), and French (`fr`). [Demo](https://huggingface.co/spaces/Supertone/supertonic-2) | [Models](https://huggingface.co/Supertone/supertonic-2)
**2026.04.29** - 🎉 **Supertonic 3** released with 31-language support, improved reading accuracy, and v2-compatible public ONNX assets. [Demo](https://huggingface.co/spaces/Supertone/supertonic-3) | [Models](https://huggingface.co/Supertone/supertonic-3)
**2025.12.10** - Added [6 new voice styles](https://huggingface.co/Supertone/supertonic/tree/b10dbaf18b316159be75b34d24f740008fddd381) (M3, M4, M5, F3, F4, F5). See [Voices](https://supertone-inc.github.io/supertonic-py/voices/) for details
@@ -20,7 +20,7 @@ This example demonstrates how to use Supertonic in a web browser using ONNX Runt
- 🌐 Runs entirely in the browser (no server required for inference)
- 🚀 WebGPU support with automatic fallback to WebAssembly
- 🌍 Multilingual support: English (en), Korean (ko), Spanish (es), Portuguese (pt), French (fr)
- 🌍 Multilingual support: 31 languages
- ⚡ Pre-extracted voice styles for instant generation
- 🎨 Modern, responsive UI
- 🎭 Multiple voice style presets (5 Male, 5 Female)
@@ -58,14 +58,10 @@ This will start a local development server (usually at http://localhost:3000) an
- **Male 1-5 (M1-M5)**: Male voice styles
- **Female 1-5 (F1-F5)**: Female voice styles
3. **Select Language**: Choose the language that matches your input text
- **English (en)**: Default language
- **한국어 (ko)**: Korean
- **Español (es)**: Spanish
- **Português (pt)**: Portuguese
- **Français (fr)**: French
- Supertonic 3 supports 31 language codes; see the main README for the full list.
4. **Enter Text**: Type or paste the text you want to convert to speech
5. **Adjust Settings** (optional):
- **Total Steps**: More steps = better quality but slower (default: 5)
- **Total Steps**: More steps = better quality but slower (default: 8)
6. **Generate Speech**: Click the "Generate Speech" button
7. **View Results**:
- See the full input text
@@ -75,7 +71,7 @@ This will start a local development server (usually at http://localhost:3000) an
## Multilingual Support
Supertonic 2 supports multiple languages. Make sure to select the correct language for your input text to get the best results. The model will automatically handle text preprocessing and pronunciation for the selected language.
Supertonic 3 supports 31 languages. Make sure to select the correct language for your input text to get the best results. The model will automatically handle text preprocessing and pronunciation for the selected language.
## Technical Details
@@ -118,4 +114,4 @@ This demo uses:
### Slow generation
- If using WebAssembly, try a browser that supports WebGPU
- Ensure no other heavy processes are running
- Consider using fewer denoising steps for faster (but lower quality) results
- Consider using fewer denoising steps for faster (but lower quality) results

4
web/helper.js
View File

@@ -1,7 +1,7 @@
import * as ort from 'onnxruntime-web';
// Available languages for multilingual TTS
export const AVAILABLE_LANGS = ['en', 'ko', 'es', 'pt', 'fr'];
export const AVAILABLE_LANGS = ['en', 'ko', 'ja', 'ar', 'bg', 'cs', 'da', 'de', 'el', 'es', 'et', 'fi', 'fr', 'hi', 'hr', 'hu', 'id', 'it', 'lt', 'lv', 'nl', 'pl', 'pt', 'ro', 'ru', 'sk', 'sl', 'sv', 'tr', 'uk', 'vi'];
export function isValidLang(lang) {
return AVAILABLE_LANGS.includes(lang);
@@ -272,7 +272,7 @@ export class TextToSpeech {
if (style.ttl.dims[0] !== 1) {
throw new Error('Single speaker text to speech only supports single style');
}
const maxLen = lang === 'ko' ? 120 : 300;
const maxLen = (lang === 'ko' || lang === 'ja') ? 120 : 300;
const textList = chunkText(text, maxLen);
const langList = new Array(textList.length).fill(lang);
let wavCat = [];

36
web/index.html
View File

@@ -3,13 +3,13 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Supertonic - Web Demo</title>
<title>Supertonic 3 - Web Demo</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="container">
<h1>🎤 Supertonic 2</h1>
<p class="subtitle">Multilingual Text-to-Speech with ONNX Runtime Web</p>
<h1>🎤 Supertonic 3</h1>
<p class="subtitle">31-language Text-to-Speech with ONNX Runtime Web</p>
<div id="statusBox" class="status-box">
<div class="status-text-wrapper">
@@ -46,9 +46,35 @@
<select id="langSelect">
<option value="en" selected>English (en)</option>
<option value="ko">한국어 (ko)</option>
<option value="ja">日本語 (ja)</option>
<option value="ar">العربية (ar)</option>
<option value="bg">Bulgarian (bg)</option>
<option value="cs">Czech (cs)</option>
<option value="da">Danish (da)</option>
<option value="de">Deutsch (de)</option>
<option value="el">Greek (el)</option>
<option value="es">Español (es)</option>
<option value="pt">Português (pt)</option>
<option value="et">Estonian (et)</option>
<option value="fi">Finnish (fi)</option>
<option value="fr">Français (fr)</option>
<option value="hi">Hindi (hi)</option>
<option value="hr">Croatian (hr)</option>
<option value="hu">Hungarian (hu)</option>
<option value="id">Indonesian (id)</option>
<option value="it">Italian (it)</option>
<option value="lt">Lithuanian (lt)</option>
<option value="lv">Latvian (lv)</option>
<option value="nl">Dutch (nl)</option>
<option value="pl">Polish (pl)</option>
<option value="pt">Português (pt)</option>
<option value="ro">Romanian (ro)</option>
<option value="ru">Russian (ru)</option>
<option value="sk">Slovak (sk)</option>
<option value="sl">Slovenian (sl)</option>
<option value="sv">Swedish (sv)</option>
<option value="tr">Turkish (tr)</option>
<option value="uk">Ukrainian (uk)</option>
<option value="vi">Vietnamese (vi)</option>
</select>
</div>
@@ -62,7 +88,7 @@
<div class="section">
<label for="totalStep">Total Steps (higher = better
quality):</label>
<input type="number" id="totalStep" value="5"
<input type="number" id="totalStep" value="8"
min="1" max="50">
</div>

32
web/vite.config.js
View File

@@ -1,6 +1,38 @@
import { createReadStream, existsSync, statSync } from 'node:fs';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { defineConfig } from 'vite';
const __dirname = path.dirname(fileURLToPath(import.meta.url));
const rootAssetsDir = path.resolve(__dirname, '../assets');
function serveRootAssets() {
return {
name: 'serve-root-assets',
configureServer(server) {
server.middlewares.use('/assets', (req, res, next) => {
const urlPath = decodeURIComponent((req.url || '').split('?')[0]);
const filePath = path.resolve(rootAssetsDir, `.${urlPath}`);
if (!filePath.startsWith(rootAssetsDir) || !existsSync(filePath)) {
next();
return;
}
const stat = statSync(filePath);
if (!stat.isFile()) {
next();
return;
}
createReadStream(filePath).pipe(res);
});
}
};
}
export default defineConfig({
plugins: [serveRootAssets()],
server: {
port: 3000,
open: true