Hugging Face's logo

IsGarrido
/
supertonic-2

Text-to-Speech
ONNX
speech-synthesis
audio
voice
Model card Files
xet
Community
supertonic-2
File size: 18,731 Bytes 
f3130f1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
 
<!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">

        <!-- Import map for ES modules -->
        <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>

        <!-- Privacy-friendly analytics by Plausible -->
        <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>
        <!-- Interactive TTS Demo Section -->
        <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">
                            <!-- Coming Soon Modal -->
                            <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>

                            <!-- Parameters in horizontal layout -->
                            <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>

                    <!-- Moved below content: status box and info banner -->
                    <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>
        <!-- Speaker Tooltip -->
        <div id="speakerTooltip" class="speaker-tooltip"></div>
        
        <!-- Language Auto-Detection Toast -->
        <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>