|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Supertonic 2 - Lightning-Fast, On-Device Multilingual TTS</title> |
|
|
<meta name="description" |
|
|
content="Supertonic 2 - A lightweight, super-fast text-to-speech synthesis system with on-device capabilities. Multi-language support with ONNX Runtime."> |
|
|
<link rel="stylesheet" href="styles.css"> |
|
|
<link rel="preconnect" href="https://fonts.googleapis.com"> |
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
|
|
<link |
|
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" |
|
|
rel="stylesheet"> |
|
|
<link |
|
|
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" |
|
|
rel="stylesheet"> |
|
|
<link rel="stylesheet" |
|
|
href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css"> |
|
|
|
|
|
|
|
|
<script type="importmap"> |
|
|
{ |
|
|
"imports": { |
|
|
"onnxruntime-web": "https://cdn.jsdelivr.net/npm/onnxruntime-web@1.23.0/dist/ort.webgpu.min.mjs", |
|
|
"fft.js": "https://esm.sh/fft.js@4.0.4" |
|
|
} |
|
|
} |
|
|
</script> |
|
|
|
|
|
|
|
|
<script async src="https://plausible.io/js/pa-GHmWt-afyVp4WuenlUJZX.js"></script> |
|
|
<script> |
|
|
window.plausible=window.plausible||function(){(plausible.q=plausible.q||[]).push(arguments)},plausible.init=plausible.init||function(i){plausible.o=i||{}}; |
|
|
plausible.init() |
|
|
</script> |
|
|
|
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<section class="interactive-demo" id="interactive-demo"> |
|
|
<div class="container"> |
|
|
<div class="demo-container"> |
|
|
<div class="demo-content"> |
|
|
<div class="demo-header-wrapper"> |
|
|
<img src="img/supertonic_lighteninggraphic.svg" alt="Lightning" class="demo-header-icon" /> |
|
|
<h2 class="demo-header"> |
|
|
<span class="demo-header-text"><span class="demo-header-bold">Supertonic 2</span> | Lightning Fast, On-Device, Multilingual TTS</span> |
|
|
<span class="demo-header-links"> |
|
|
<a href="https://github.com/supertone-inc/supertonic/" class="demo-header-link" target="_blank" rel="noopener noreferrer"><svg class="demo-header-link-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>Github</a><a href="https://huggingface.co/Supertone/supertonic-2" class="demo-header-link" target="_blank" rel="noopener noreferrer"><svg class="demo-header-link-icon" viewBox="0 0 95 88" fill="none" width="16" height="16"><path fill="#FFD21E" d="M47.21 76.5a34.75 34.75 0 1 0 0-69.5 34.75 34.75 0 0 0 0 69.5Z" /><path fill="#FF9D0B" d="M81.96 41.75a34.75 34.75 0 1 0-69.5 0 34.75 34.75 0 0 0 69.5 0Zm-73.5 0a38.75 38.75 0 1 1 77.5 0 38.75 38.75 0 0 1-77.5 0Z" /><path fill="#3A3B45" d="M58.5 32.3c1.28.44 1.78 3.06 3.07 2.38a5 5 0 1 0-6.76-2.07c.61 1.15 2.55-.72 3.7-.32ZM34.95 32.3c-1.28.44-1.79 3.06-3.07 2.38a5 5 0 1 1 6.76-2.07c-.61 1.15-2.56-.72-3.7-.32Z" /><path fill="#FF323D" d="M46.96 56.29c9.83 0 13-8.76 13-13.26 0-2.34-1.57-1.6-4.09-.36-2.33 1.15-5.46 2.74-8.9 2.74-7.19 0-13-6.88-13-2.38s3.16 13.26 13 13.26Z" /><path fill="#3A3B45" fillRule="evenodd" d="M39.43 54a8.7 8.7 0 0 1 5.3-4.49c.4-.12.81.57 1.24 1.28.4.68.82 1.37 1.24 1.37.45 0 .9-.68 1.33-1.35.45-.7.89-1.38 1.32-1.25a8.61 8.61 0 0 1 5 4.17c3.73-2.94 5.1-7.74 5.1-10.7 0-2.34-1.57-1.6-4.09-.36l-.14.07c-2.31 1.15-5.39 2.67-8.77 2.67s-6.45-1.52-8.77-2.67c-2.6-1.29-4.23-2.1-4.23.29 0 3.05 1.46 8.06 5.47 10.97Z" clipRule="evenodd" /><path fill="#FF9D0B" d="M70.71 37a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5ZM24.21 37a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5ZM17.52 48c-1.62 0-3.06.66-4.07 1.87a5.97 5.97 0 0 0-1.33 3.76 7.1 7.1 0 0 0-1.94-.3c-1.55 0-2.95.59-3.94 1.66a5.8 5.8 0 0 0-.8 7 5.3 5.3 0 0 0-1.79 2.82c-.24.9-.48 2.8.8 4.74a5.22 5.22 0 0 0-.37 5.02c1.02 2.32 3.57 4.14 8.52 6.1 3.07 1.22 5.89 2 5.91 2.01a44.33 44.33 0 0 0 10.93 1.6c5.86 0 10.05-1.8 12.46-5.34 3.88-5.69 3.33-10.9-1.7-15.92-2.77-2.78-4.62-6.87-5-7.77-.78-2.66-2.84-5.62-6.25-5.62a5.7 5.7 0 0 0-4.6 2.46c-1-1.26-1.98-2.25-2.86-2.82A7.4 7.4 0 0 0 17.52 48Zm0 4c.51 0 1.14.22 1.82.65 2.14 1.36 6.25 8.43 7.76 11.18.5.92 1.37 1.31 2.14 1.31 1.55 0 2.75-1.53.15-3.48-3.92-2.93-2.55-7.72-.68-8.01.08-.02.17-.02.24-.02 1.7 0 2.45 2.93 2.45 2.93s2.2 5.52 5.98 9.3c3.77 3.77 3.97 6.8 1.22 10.83-1.88 2.75-5.47 3.58-9.16 3.58-3.81 0-7.73-.9-9.92-1.46-.11-.03-13.45-3.8-11.76-7 .28-.54.75-.76 1.34-.76 2.38 0 6.7 3.54 8.57 3.54.41 0 .7-.17.83-.6.79-2.85-12.06-4.05-10.98-8.17.2-.73.71-1.02 1.44-1.02 3.14 0 10.2 5.53 11.68 5.53.11 0 .2-.03.24-.1.74-1.2.33-2.04-4.9-5.2-5.21-3.16-8.88-5.06-6.8-7.33.24-.26.58-.38 1-.38 3.17 0 10.66 6.82 10.66 6.82s2.02 2.1 3.25 2.1c.28 0 .52-.1.68-.38.86-1.46-8.06-8.22-8.56-11.01-.34-1.9.24-2.85 1.31-2.85Z" /><path fill="#FFD21E" d="M38.6 76.69c2.75-4.04 2.55-7.07-1.22-10.84-3.78-3.77-5.98-9.3-5.98-9.3s-.82-3.2-2.69-2.9c-1.87.3-3.24 5.08.68 8.01 3.91 2.93-.78 4.92-2.29 2.17-1.5-2.75-5.62-9.82-7.76-11.18-2.13-1.35-3.63-.6-3.13 2.2.5 2.79 9.43 9.55 8.56 11-.87 1.47-3.93-1.71-3.93-1.71s-9.57-8.71-11.66-6.44c-2.08 2.27 1.59 4.17 6.8 7.33 5.23 3.16 5.64 4 4.9 5.2-.75 1.2-12.28-8.53-13.36-4.4-1.08 4.11 11.77 5.3 10.98 8.15-.8 2.85-9.06-5.38-10.74-2.18-1.7 3.21 11.65 6.98 11.76 7.01 4.3 1.12 15.25 3.49 19.08-2.12Z" /><path fill="#FF9D0B" d="M77.4 48c1.62 0 3.07.66 4.07 1.87a5.97 5.97 0 0 1 1.33 3.76 7.1 7.1 0 0 1 1.95-.3c1.55 0 2.95.59 3.94 1.66a5.8 5.8 0 0 1 .8 7 5.3 5.3 0 0 1 1.78 2.82c.24.9.48 2.8-.8 4.74a5.22 5.22 0 0 1 .37 5.02c-1.02 2.32-3.57 4.14-8.51 6.1-3.08 1.22-5.9 2-5.92 2.01a44.33 44.33 0 0 1-10.93 1.6c-5.86 0-10.05-1.8-12.46-5.34-3.88-5.69-3.33-10.9 1.7-15.92 2.78-2.78 4.63-6.87 5.01-7.77.78-2.66 2.83-5.62 6.24-5.62a5.7 5.7 0 0 1 4.6 2.46c1-1.26 1.98-2.25 2.87-2.82A7.4 7.4 0 0 1 77.4 48Zm0 4c-.51 0-1.13.22-1.82.65-2.13 1.36-6.25 8.43-7.76 11.18a2.43 2.43 0 0 1-2.14 1.31c-1.54 0-2.75-1.53-.14-3.48 3.91-2.93 2.54-7.72.67-8.01a1.54 1.54 0 0 0-.24-.02c-1.7 0-2.45 2.93-2.45 2.93s-2.2 5.52-5.97 9.3c-3.78 3.77-3.98 6.8-1.22 10.83 1.87 2.75 5.47 3.58 9.15 3.58 3.82 0 7.73-.9 9.93-1.46.1-.03 13.45-3.8 11.76-7-.29-.54-.75-.76-1.34-.76-2.38 0-6.71 3.54-8.57 3.54-.42 0-.71-.17-.83-.6-.8-2.85 12.05-4.05 10.97-8.17-.19-.73-.7-1.02-1.44-1.02-3.14 0-10.2 5.53-11.68 5.53-.1 0-.19-.03-.23-.1-.74-1.2-.34-2.04 4.88-5.2 5.23-3.16 8.9-5.06 6.8-7.33-.23-.26-.57-.38-.98-.38-3.18 0-10.67 6.82-10.67 6.82s-2.02 2.1-3.24 2.1a.74.74 0 0 1-.68-.38c-.87-1.46 8.05-8.22 8.55-11.01.34-1.9-.24-2.85-1.31-2.85Z" /><path fill="#FFD21E" d="M56.33 76.69c-2.75-4.04-2.56-7.07 1.22-10.84 3.77-3.77 5.97-9.3 5.97-9.3s.82-3.2 2.7-2.9c1.86.3 3.23 5.08-.68 8.01-3.92 2.93.78 4.92 2.28 2.17 1.51-2.75 5.63-9.82 7.76-11.18 2.13-1.35 3.64-.6 3.13 2.2-.5 2.79-9.42 9.55-8.55 11 .86 1.47 3.92-1.71 3.92-1.71s9.58-8.71 11.66-6.44c2.08 2.27-1.58 4.17-6.8 7.33-5.23 3.16-5.63 4-4.9 5.2.75 1.2 12.28-8.53 13.36-4.4 1.08 4.11-11.76 5.3-10.97 8.15.8 2.85 9.05-5.38 10.74-2.18 1.69 3.21-11.65 6.98-11.76 7.01-4.31 1.12-15.26 3.49-19.08-2.12Z" /></svg>Models</a><a href="https://chromewebstore.google.com/detail/mdbiaajonlkomihpcaffhkagodbcgbme?utm_source=item-share-cb" class="demo-header-link" target="_blank" rel="noopener noreferrer"><img src="img/chrome.svg" class="demo-header-link-icon" width="16" height="16" alt="Chrome" />Extension</a> |
|
|
</span> |
|
|
</h2> |
|
|
</div> |
|
|
<div class="demo-controls"> |
|
|
<div class="demo-param"> |
|
|
<div class="speaker-container"> |
|
|
<label class="speaker-label">Speaker: </label> |
|
|
<div class="speaker-list" id="speakerList"> |
|
|
<span class="speaker-item" data-voice="M1">Alex</span><span class="speaker-separator">, </span> |
|
|
<span class="speaker-item" data-voice="M2">James</span><span class="speaker-separator">, </span> |
|
|
<span class="speaker-item" data-voice="M3">Robert</span><span class="speaker-separator">, </span> |
|
|
<span class="speaker-item" data-voice="M4">Sam</span><span class="speaker-separator">, </span> |
|
|
<span class="speaker-item" data-voice="M5">Daniel</span><span class="speaker-separator">, </span> |
|
|
<span class="speaker-item" data-voice="F1">Sarah</span><span class="speaker-separator">, </span> |
|
|
<span class="speaker-item" data-voice="F2">Lily</span><span class="speaker-separator">, </span> |
|
|
<span class="speaker-item" data-voice="F3">Jessica</span><span class="speaker-separator">, </span> |
|
|
<span class="speaker-item" data-voice="F4">Olivia</span><span class="speaker-separator">, </span> |
|
|
<span class="speaker-item" data-voice="F5">Emily</span> |
|
|
<span class="speaker-item speaker-item-create" id="createVoiceBtn" style="display: none;">+Create your own voice</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="language-info"> |
|
|
<label class="speaker-label">Language: </label> |
|
|
<div class="speaker-list" id="languageList"> |
|
|
<span class="speaker-item" data-language="en">English</span><span class="speaker-separator">, </span> |
|
|
<span class="speaker-item" data-language="es">Spanish</span><span class="speaker-separator">, </span> |
|
|
<span class="speaker-item" data-language="pt">Portuguese</span><span class="speaker-separator">, </span> |
|
|
<span class="speaker-item" data-language="fr">French</span><span class="speaker-separator">, </span> |
|
|
<span class="speaker-item" data-language="ko">Korean</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="demo-input-section"> |
|
|
<div class="demo-input-label"> |
|
|
<label for="demoTextInput">Enter text to synthesize:</label> |
|
|
</div> |
|
|
<div |
|
|
id="demoTextInput" |
|
|
contenteditable="true" |
|
|
spellcheck="false" |
|
|
class="demo-text-input-editable" |
|
|
data-placeholder="Type any text here to convert it into speech... (minimum 10 characters)">This text-to-speech system runs entirely in your browser, providing fast and private operation without sending any data to external servers.</div> |
|
|
<div id="presetControlsRow"> |
|
|
<div id="presetButtonGroup"> |
|
|
<span class="preset-icon" aria-hidden="true"> |
|
|
<svg viewBox="0 0 24 24" width="18" height="18" focusable="false"> |
|
|
<rect x="4" y="6" width="14" height="2" fill="#000"/> |
|
|
<rect x="4" y="10" width="10" height="2" fill="#000"/> |
|
|
<rect x="4" y="14" width="14" height="2" fill="#000"/> |
|
|
<rect x="4" y="18" width="10" height="2" fill="#000"/> |
|
|
</svg> |
|
|
</span> |
|
|
<span class="preset-item" data-preset="freeform" id="freeformBtn">Freeform</span> |
|
|
<span class="preset-item" data-preset="quote" id="presetQuoteBtn">Quote</span> |
|
|
<span class="preset-item" data-preset="paragraph" id="presetParagraphBtn">Paragraph</span> |
|
|
<span class="preset-item" data-preset="script" id="presetScriptBtn">Script</span> |
|
|
<span class="preset-item" data-preset="book" id="presetBookBtn" style="display: none;">Book</span> |
|
|
</div> |
|
|
<span class="demo-char-counter" id="demoCharCounter"> |
|
|
<span class="demo-char-warning" id="demoCharWarning"></span> |
|
|
<span id="demoCharCount">126</span> characters |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="demo-output-section"> |
|
|
|
|
|
<div id="comingSoonModal" class="coming-soon-modal"> |
|
|
<div class="coming-soon-modal-overlay"></div> |
|
|
<div class="coming-soon-modal-content"> |
|
|
<div class="coming-soon-modal-header"> |
|
|
<h3>Coming Soon</h3> |
|
|
</div> |
|
|
<div class="coming-soon-modal-body"> |
|
|
<p>Custom voice creation feature will be available soon.</p> |
|
|
</div> |
|
|
<div class="coming-soon-modal-footer"> |
|
|
<button class="coming-soon-modal-btn" id="comingSoonCloseBtn">OK</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="demo-params-row"> |
|
|
<div class="demo-param"> |
|
|
<div class="demo-param-header"> |
|
|
<label for="demoTotalSteps"> |
|
|
Quality: <span class="param-value" id="demoTotalStepsValue">5 Steps</span> |
|
|
</label> |
|
|
</div> |
|
|
<input type="range" id="demoTotalSteps" value="5" min="2" max="16" step="1"> |
|
|
</div> |
|
|
<div class="demo-param"> |
|
|
<div class="demo-param-header"> |
|
|
<label for="demoSpeed"> |
|
|
Speech Speed: <span class="param-value" id="demoSpeedValue">1.0x</span> |
|
|
</label> |
|
|
</div> |
|
|
<input type="range" id="demoSpeed" value="1.0" min="0.8" max="1.3" step="0.05"> |
|
|
</div> |
|
|
<button id="demoGenerateBtn" class="demo-generate-btn" disabled> |
|
|
<img src="img/supertonic_lighteninggraphic.svg" alt="Generate" width="20" height="20" /> |
|
|
<span class="text">Generate Speech</span> |
|
|
<span class="shimmer" aria-hidden="true"></span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div id="demoResults" class="demo-results"> |
|
|
<div class="demo-placeholder"> |
|
|
<div class="demo-placeholder-icon">🎙️</div> |
|
|
<p>Your generated speech will appear here</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="demo-status-box" id="demoStatusBox"> |
|
|
<div class="demo-status-content"> |
|
|
<div class="demo-status-text" id="demoStatusText"> |
|
|
<strong>Initializing...</strong> Loading models... |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="wasmWarningBanner" class="wasm-warning-banner" style="display: none;"> |
|
|
Currently using WASM backend. For optimal performance, we recommend using a browser with WebGPU support (Chrome 113+ or Edge 113+). |
|
|
</div> |
|
|
|
|
|
<div id="demoError" class="demo-error"></div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<script src="preset-texts.js"></script> |
|
|
|
|
|
<div id="speakerTooltip" class="speaker-tooltip"></div> |
|
|
|
|
|
|
|
|
<div id="languageToast" class="language-toast"> |
|
|
<span class="language-toast-icon">⚠️</span> |
|
|
<span class="language-toast-message" id="languageToastMessage"></span> |
|
|
</div> |
|
|
|
|
|
<script type="module" src="script.js"></script> |
|
|
|
|
|
</body> |
|
|
</html> |
|
|
|
