MOSS-TTS-Nano-Demo/index.html at main · OpenMOSS/MOSS-TTS-Nano-Demo · GitHub

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
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="https://mosi.cn/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="MOSS-TTS-Nano is a multilingual tiny speech generation model for realtime voice cloning, CPU-friendly deployment, and lightweight product integration."
    />
    <meta name="theme-color" content="#f7f5f0" />
    <title>MOSS-TTS-Nano | Multilingual Speech Generation</title>
    <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=Sora:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <!-- Desktop left sidebar -->
    <nav class="sidebar" aria-label="Page navigation">
      <div class="sidebar-inner">
        <a class="sidebar-brand" href="#overview" aria-label="MOSS-TTS-Nano">
          <span class="sidebar-mark">TTS</span>
          <span class="sidebar-name">Nano</span>
        </a>
        <div class="sidebar-links">
          <a class="sidebar-link" href="#overview">Overview</a>
          <a class="sidebar-link" href="#features">Features</a>
          <a class="sidebar-link" href="#architecture">Architecture</a>
          <a class="sidebar-link" href="#demo">Demo</a>
          <a class="sidebar-link" href="#languages">Languages</a>
        </div>
      </div>
    </nav>

    <!-- Mobile top bar -->
    <header class="mobile-header">
      <span class="mobile-brand">MOSS-TTS-Nano</span>
      <div class="mobile-actions">
        <a class="btn btn-dark btn-sm" href="#demo">Demo ↗</a>
      </div>
    </header>

    <main class="content-main">
      <!-- Paper header -->
      <header class="paper-header reveal" id="overview">
        <div class="paper-tags">
          <span class="tag">Text-to-Speech</span>
          <span class="tag">Voice Cloning</span>
          <span class="tag">Multilingual</span>
          <span class="tag">Apr 10, 2026</span>
        </div>

        <h1>MOSS-TTS-Nano</h1>

        <p class="paper-subtitle">
          A multilingual tiny speech generation model for realtime voice
          cloning, CPU-friendly deployment, and lightweight product integration.
        </p>

        <div class="paper-actions">
          <a
            class="btn btn-dark"
            href="https://github.com/OpenMOSS/MOSS-TTS-Nano"
            target="_blank"
            rel="noopener"
          >GitHub ↗</a>
          <a
            class="btn btn-dark"
            href="https://huggingface.co/OpenMOSS-Team/MOSS-TTS-Nano"
            target="_blank"
            rel="noopener"
          >Hugging Face ↗</a>
          <a
            class="btn btn-dark"
            href="https://arxiv.org/abs/2603.18090"
            target="_blank"
            rel="noopener"
          >Paper ↗</a>
          <a
            class="btn btn-outline"
            href="https://huggingface.co/spaces/OpenMOSS-Team/MOSS-TTS-Nano"
            target="_blank"
            rel="noopener"
          >Try Now ↗</a>
        </div>

        <div class="meta-grid">
          <div class="meta-item">
            <p class="meta-label">Parameters</p>
            <p class="meta-value">~100 M</p>
          </div>
          <div class="meta-item">
            <p class="meta-label">Audio Supported</p>
            <p class="meta-value">48 kHz Stereo</p>
          </div>
          <div class="meta-item">
            <p class="meta-label">Authors</p>
            <p class="meta-value">OpenMOSS Team</p>
          </div>
          <div class="meta-item">
            <p class="meta-label">Affiliations</p>
            <p class="meta-value">Fudan NLP Lab · MOSI.AI</p>
          </div>
        </div>
      </header>

      <!-- Introduction -->
      <section class="paper-section reveal" id="introduction">

        <div class="body-text">
          <img
            src="./assets/moss-tts-nano-bg.png"
            alt="MOSS-TTS-Nano — Open Source 100M TTS Model"
            class="banner-img"
          />
        </div>

        <br>

        <p class="body-text">
          MOSS-TTS-Nano is a deployment-first TTS model designed for realtime
          speech generation, voice cloning, and lightweight integration. Built
          on an Audio Tokenizer + LLM autoregressive pipeline, it stays compact
          enough for practical CPU use while covering Chinese, English, and a
          broad multilingual set.
        </p>
        <p class="body-text" style="margin-top: 1rem;">
          The model pairs a ~20M-parameter <strong>MOSS-Audio-Tokenizer-Nano</strong>
          with a small LLM for autoregressive token prediction. The tokenizer uses
          a CNN-free, causal Transformer design with RVQ 16 codebooks operating at
          a 12.5 Hz token stream — achieving 0.125–2 kbps variable bitrate while
          preserving 48 kHz stereo output quality. Voice cloning is driven entirely
          by a short reference clip, with no additional fine-tuning required.
        </p>
      </section>

      <!-- Features -->
      <section class="paper-section reveal" id="features">
        <h2>Key Features</h2>
        <div class="feature-grid">
          <div class="feature-item">
            <p class="feature-label">Model Size</p>
            <p class="feature-value">0.1 B</p>
            <p class="feature-desc">Compact enough for practical CPU inference — no GPU required.</p>
          </div>
          <div class="feature-item">
            <p class="feature-label">Audio Quality</p>
            <p class="feature-value">48 kHz Stereo</p>
            <p class="feature-desc">Native 2-channel input and output at full 48 kHz sample rate.</p>
          </div>
          <div class="feature-item">
            <p class="feature-label">Languages</p>
            <p class="feature-value">20</p>
            <p class="feature-desc">Mandarin, English, Japanese, Korean, Spanish, French, and more.</p>
          </div>
          <div class="feature-item">
            <p class="feature-label">Tiny Tokenizer</p>
            <p class="feature-value">~20 M params</p>
            <p class="feature-desc">CNN-free, causal Transformer with RVQ 16 codebooks at 12.5 Hz.</p>
          </div>
          <div class="feature-item">
            <p class="feature-label">Bitrate</p>
            <p class="feature-value">0.125–2 kbps</p>
            <p class="feature-desc">Variable bitrate via configurable codebook count.</p>
          </div>
          <div class="feature-item">
            <p class="feature-label">Inference</p>
            <p class="feature-value">Realtime</p>
            <p class="feature-desc">Streaming with low first-token latency. Long text auto-chunked.</p>
          </div>
        </div>
      </section>

      <!-- Architecture -->
      <section class="paper-section reveal" id="architecture">
        <h2>Architecture</h2>

        <p class="section-note arch-intro">
          Following the
          <a href="https://arxiv.org/abs/2603.18090" target="_blank" rel="noopener">MOSS-TTS technical report</a>,
          the family-level design is organized as <strong>discrete audio tokens + autoregressive modeling + large-scale pretraining</strong>.
          This Nano demo keeps the same recipe in a smaller, deployment-first configuration.
        </p>

        <div class="body-text">
          <img
            src="./assets/architecture.png"
            alt="MOSS-TTS-Nano Audio Tokenizer architecture: 48 kHz stereo input through Causal Transformers, RVQ 16 bottleneck, decoder, and Discriminator"
            class="arch-img"
          />
          <p class="fig-caption">
            The architecture of MOSS-Audio-Tokenizer-Nano
          </p>
        </div>

        <br>

        <div class="body-text">
          <h3>MOSS-Audio-Tokenizer</h3>
          <p class="arch-copy">
            The tokenizer is a causal Transformer audio codec that compresses
            <strong>48 kHz stereo</strong> audio into a <strong>12.5 fps</strong>
            RVQ token stream for scalable autoregressive modeling. In the
            report, the encoder and decoder each contain 12 causal
            Transformer blocks with sliding-window attention, and
            the quantizer uses 16 RVQ layers so the token sequence remains
            compact enough for long-context generation.
          </p>
          <div class="arch-chip-row">
            <span class="arch-chip">20M params</span>
            <span class="arch-chip">48kHz stereo</span>
            <span class="arch-chip">16-layer RVQ</span>
          </div>
        </div>

        <br>

        <div class="body-text">
          <img
            src="./assets/moss-tts-nano.png"
            alt="MOSS-TTS-Nano Architecture"
            class="arch-img"
          />
          <p class="fig-caption">
            The architecture of MOSS-TTS-Nano
          </p>
        </div>

        <div class="body-text">

          <h3>MOSS TTS Nano</h3>
          <p class="arch-copy">
            On top of the tokenizer, MOSS-TTS-Nano can adopt a hierarchical
            token modeling design built around a Local Transformer. Instead of
            using RVQ-aware temporal delays, the model sums the embeddings from
            all RVQ layers at each aligned time step and feeds that hidden
            state into a single Transformer backbone. The backbone then
            produces one global latent per step, which a lightweight
            autoregressive <strong>Local Transformer</strong> expands into the
            within-step token block, sequentially predicting one text-or-pad
            token and 16 RVQ audio tokens.
          </p>
          <div class="arch-chip-row">
            <span class="arch-chip">100 M params</span>
            <span class="arch-chip">Local Transformer</span>
            <span class="arch-chip">Tiny, Fast and Powerful</span>
          </div>
        </div>

      </section>

      <!-- Demo -->
      <section class="paper-section" id="demo">
        <h2>Demo</h2>

        <!-- Tab bar -->
        <div class="demo-tabs" role="tablist" aria-label="Language category">
          <button
            type="button"
            class="demo-tab active"
            data-tab="chinese"
            role="tab"
            aria-selected="true"
            aria-controls="chineseSamples"
          >🇨🇳 Chinese</button>
          <button
            type="button"
            class="demo-tab"
            data-tab="english"
            role="tab"
            aria-selected="false"
            aria-controls="englishSamples"
          >🇺🇸 English</button>
          <button
            type="button"
            class="demo-tab"
            data-tab="multilingual"
            role="tab"
            aria-selected="false"
            aria-controls="multilingualSamples"
          >🌐 Multilingual</button>
        </div>

        <div id="chineseSamples" class="sample-grid" role="tabpanel"></div>
        <div id="englishSamples" class="sample-grid" role="tabpanel"></div>
        <div id="multilingualSamples" class="sample-grid" role="tabpanel"></div>
      </section>

      <!-- Language coverage -->
      <section class="paper-section reveal" id="languages">
        <h2>Language Coverage</h2>
        <p class="section-note">
          Japanese, Korean, Spanish, French, German, Italian, Hungarian,
          Russian, Persian, Arabic, Polish, Portuguese, Czech, Danish, Swedish,
          Greek, and Turkish — grouped with Chinese and English.
        </p>
        <div id="languageBadges" class="lang-badges" aria-live="polite"></div>
      </section>
    </main>

    <!-- Footer -->
    <footer class="site-footer">
      <div class="footer-inner">
        <p>© 2026 OpenMOSS Team · Fudan NLP Lab · MOSI.AI</p>
        <nav class="footer-links" aria-label="Footer">
          <a href="https://github.com/OpenMOSS/MOSS-TTS-Nano" target="_blank" rel="noopener">GitHub</a>
          <a href="https://huggingface.co/OpenMOSS-Team/MOSS-TTS-Nano" target="_blank" rel="noopener">Hugging Face</a>
          <a href="https://arxiv.org/abs/2603.18090" target="_blank" rel="noopener">Paper</a>
        </nav>
      </div>
    </footer>

    <noscript>
      <div class="noscript-banner">
        This page uses JavaScript to load the demo audio cards. Please enable
        JavaScript to browse the samples.
      </div>
    </noscript>

    <script type="module" src="./script.js"></script>
  </body>
</html>