Skip to content

Commit cc42210

Browse files
gyt1145028706gyt1145028706
committed
add
1 parent 1569adb commit cc42210

20 files changed

Lines changed: 1566 additions & 3594 deletions

‎.github/workflows/deploy.yml‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -24,21 +24,16 @@ jobs:
2424
- name: Checkout
2525
uses: actions/checkout@v4
2626

27-
- name: Setup Node
28-
uses: actions/setup-node@v4
29-
with:
30-
node-version: 20
31-
cache: "npm"
32-
33-
- name: Install dependencies
34-
run: npm ci
35-
36-
- name: Build
37-
run: npm run build
38-
3927
- name: Setup Pages
4028
uses: actions/configure-pages@v5
4129

30+
- name: Prepare static site
31+
run: |
32+
mkdir -p dist
33+
cp index.html styles.css script.js dist/
34+
cp -R assets dist/assets
35+
touch dist/.nojekyll
36+
4237
- name: Upload artifact
4338
uses: actions/upload-pages-artifact@v3
4439
with:

‎index.html‎

Lines changed: 342 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,349 @@
77
name="description"
88
content="MOSS-TTS-Nano is a multilingual tiny speech generation model for realtime voice cloning, CPU-friendly deployment, and lightweight product integration."
99
/>
10+
<meta
11+
name="theme-color"
12+
content="#fbf7f1"
13+
/>
1014
<title>MOSS-TTS-Nano | Multilingual Speech Generation Demo</title>
15+
<link rel="stylesheet" href="./styles.css" />
1116
</head>
12-
<body class="site-bg">
13-
<div id="app"></div>
14-
<script type="module" src="/src/main.ts"></script>
17+
<body>
18+
<div class="page-shell">
19+
<div class="hero-orb hero-orb--warm"></div>
20+
<div class="hero-orb hero-orb--cool"></div>
21+
22+
<header class="site-header">
23+
<div class="container header-inner">
24+
<a class="brand" href="#overview" aria-label="Jump to overview">
25+
<span class="brand-mark">TTS</span>
26+
<span class="brand-copy">
27+
<strong>MOSS-TTS-Nano</strong>
28+
<span>Multilingual Speech Generation</span>
29+
</span>
30+
</a>
31+
32+
<nav class="site-nav" aria-label="Primary">
33+
<a class="nav-pill" href="#overview">Overview</a>
34+
<a class="nav-pill" href="#capabilities">Capabilities</a>
35+
<a class="nav-pill" href="#samples">Demos</a>
36+
</nav>
37+
38+
<div class="header-actions">
39+
<a class="nav-pill nav-pill--mobile" href="#samples">Demo</a>
40+
<a
41+
class="button button-primary button-compact"
42+
href="https://github.com/OpenMOSS/MOSS-TTS-Nano"
43+
target="_blank"
44+
rel="noopener"
45+
>
46+
GitHub
47+
</a>
48+
</div>
49+
</div>
50+
</header>
51+
52+
<main>
53+
<section id="overview" class="hero section-anchor">
54+
<div class="container hero-grid">
55+
<div class="hero-copy reveal">
56+
<div class="wave-pill">
57+
<span>Released Apr 10, 2026</span>
58+
<span class="pill-dot" aria-hidden="true"></span>
59+
<span>Realtime voice cloning</span>
60+
</div>
61+
62+
<div class="partner-row">
63+
<span class="partner-chip">OpenMOSS Team</span>
64+
<span class="partner-chip">MOSI.AI</span>
65+
<span class="partner-chip">Fudan NLP Lab</span>
66+
</div>
67+
68+
<p class="eyebrow">Multilingual Tiny Speech Generation Model</p>
69+
<h1>
70+
Build faster voice products with
71+
<span class="text-gradient">MOSS-TTS-Nano</span>.
72+
</h1>
73+
<p class="lead">
74+
A deployment-first TTS model designed for realtime speech
75+
generation, voice cloning, and lightweight integration. It
76+
stays compact enough for practical CPU use while still covering
77+
Chinese, English, and a broad multilingual set.
78+
</p>
79+
<p class="sublead">
80+
这个页面现在聚焦 <strong>MOSS-TTS-Nano</strong> 的宣传与试听展示，
81+
不再依赖 Vue 路由或组件系统。下面的样例按中文、英文和多语种拆开，
82+
方便直接听对比，也更适合静态部署到 GitHub Pages。
83+
</p>
84+
85+
<div class="hero-actions">
86+
<a class="button button-primary" href="#samples">
87+
Listen to the Demos
88+
</a>
89+
<a
90+
class="button button-secondary"
91+
href="https://github.com/OpenMOSS/MOSS-TTS-Nano"
92+
target="_blank"
93+
rel="noopener"
94+
>
95+
GitHub Repository
96+
</a>
97+
<a
98+
class="button button-accent"
99+
href="https://huggingface.co/spaces/OpenMOSS-Team/MOSS-TTS-Nano"
100+
target="_blank"
101+
rel="noopener"
102+
>
103+
Hugging Face Demo
104+
</a>
105+
</div>
106+
107+
<div class="metric-grid">
108+
<article class="metric-card">
109+
<p>parameter footprint</p>
110+
<strong>0.1B</strong>
111+
</article>
112+
<article class="metric-card">
113+
<p>stereo audio output</p>
114+
<strong>48 kHz</strong>
115+
</article>
116+
<article class="metric-card">
117+
<p>languages shown here</p>
118+
<strong id="languageCount">--</strong>
119+
</article>
120+
<article class="metric-card">
121+
<p>demo clips on this page</p>
122+
<strong id="demoCount">--</strong>
123+
</article>
124+
</div>
125+
</div>
126+
127+
<aside class="hero-panel glass-panel reveal">
128+
<div class="panel-header">
129+
<div>
130+
<p class="eyebrow eyebrow-soft">Architecture Snapshot</p>
131+
<h2>Audio Tokenizer + LLM</h2>
132+
</div>
133+
<span class="panel-tag">designed for realtime synthesis</span>
134+
</div>
135+
136+
<div class="architecture-stack">
137+
<article class="architecture-card">
138+
<p>Input</p>
139+
<h3>Prompt speech</h3>
140+
<span>MOSS-TTS-Nano</span>
141+
<div>
142+
Use a short reference clip to capture speaker identity,
143+
style, and pacing.
144+
</div>
145+
</article>
146+
<article class="architecture-card">
147+
<p>Control</p>
148+
<h3>Text to be spoken</h3>
149+
<span>MOSS-TTS-Nano</span>
150+
<div>
151+
Feed plain text in Chinese, English, or additional
152+
supported languages.
153+
</div>
154+
</article>
155+
<article class="architecture-card">
156+
<p>Output</p>
157+
<h3>Generated speech</h3>
158+
<span>MOSS-TTS-Nano</span>
159+
<div>
160+
Produce lightweight multilingual audio suitable for demos
161+
and product integration.
162+
</div>
163+
</article>
164+
</div>
165+
166+
<div class="quick-facts">
167+
<div>Audio Tokenizer + LLM autoregressive pipeline</div>
168+
<div>CPU-friendly streaming inference</div>
169+
<div>Long-form text with chunked generation support</div>
170+
<div>Simple local setup for CLI, Python, and web demos</div>
171+
</div>
172+
</aside>
173+
</div>
174+
</section>
175+
176+
<section id="capabilities" class="section-anchor">
177+
<div class="container">
178+
<div class="section-shell reveal">
179+
<div class="section-header">
180+
<div>
181+
<p class="eyebrow">Why This Page Looks Different</p>
182+
<h2>
183+
A landing page tuned for MOSS-TTS-Nano, not video
184+
understanding.
185+
</h2>
186+
<p class="section-text">
187+
Visual direction is warmer, lighter, and more audio-centric.
188+
The emphasis moves from Q&amp;A and video grids to model
189+
positioning, deployment value, and direct side-by-side
190+
listening for prompt and generated speech.
191+
</p>
192+
</div>
193+
194+
<div class="capability-grid">
195+
<article class="feature-card">
196+
<span>•</span>
197+
<h3>Tiny enough for practical deployment</h3>
198+
<p>
199+
MOSS-TTS-Nano keeps the stack intentionally small so local
200+
demos, server-side generation, and embedded product
201+
experiments stay lightweight.
202+
</p>
203+
</article>
204+
<article class="feature-card">
205+
<span>•</span>
206+
<h3>Voice cloning with prompt speech</h3>
207+
<p>
208+
Each sample on this page pairs a prompt clip with
209+
synthesized output, making it easy to hear how style,
210+
speaker identity, and language transfer behave.
211+
</p>
212+
</article>
213+
<article class="feature-card">
214+
<span>•</span>
215+
<h3>Multilingual from the start</h3>
216+
<p>
217+
This showcase separates Chinese, English, and additional
218+
languages so the multilingual coverage is visible at a
219+
glance instead of buried in a single list.
220+
</p>
221+
</article>
222+
</div>
223+
</div>
224+
225+
<div class="signal-divider"></div>
226+
227+
<section id="languages" class="language-section">
228+
<div class="language-copy">
229+
<div>
230+
<p class="eyebrow">Multilingual Coverage</p>
231+
<h2>
232+
Chinese and English lead the page, with the rest grouped
233+
into a dedicated multilingual gallery.
234+
</h2>
235+
</div>
236+
<p class="section-text">
237+
国旗已经直接体现在样例名里，所以这里也保留了旗帜语言标签，方便一眼看出覆盖范围。
238+
</p>
239+
</div>
240+
<div id="languageBadges" class="badge-row" aria-live="polite"></div>
241+
</section>
242+
</div>
243+
</div>
244+
</section>
245+
246+
<section id="samples" class="samples section-anchor">
247+
<div class="container reveal">
248+
<div class="samples-header">
249+
<div>
250+
<p class="eyebrow">Listen First</p>
251+
<h2>Multilingual demo showcase</h2>
252+
</div>
253+
<p class="section-text">
254+
每张卡片都统一展示 <code>name</code>、<code>prompt speech</code>、
255+
<code>text</code> 和 <code>generated speech</code>。中文和英文单独成栏，
256+
其他语言放在最后一个多语种区块里。
257+
</p>
258+
</div>
259+
260+
<div class="section-shell sample-shell">
261+
<div class="sample-head">
262+
<div>
263+
<p class="eyebrow eyebrow-accent">Chinese Showcase</p>
264+
<h3>中文样例</h3>
265+
</div>
266+
<p class="section-text">
267+
包含常规播报、长文本晚安、台湾腔和京味胡同闲聊，比较适合突出 voice
268+
cloning 的风格保持能力。
269+
</p>
270+
</div>
271+
<div id="chineseSamples" class="sample-grid sample-grid-wide"></div>
272+
</div>
273+
274+
<div class="section-shell sample-shell">
275+
<div class="sample-head">
276+
<div>
277+
<p class="eyebrow eyebrow-green">English Showcase</p>
278+
<h3>English samples</h3>
279+
</div>
280+
<p class="section-text">
281+
English cards cover institutional introduction, long-form
282+
reading, news-style delivery, and a softer reminder tone.
283+
</p>
284+
</div>
285+
<div id="englishSamples" class="sample-grid sample-grid-wide"></div>
286+
</div>
287+
288+
<div class="section-shell sample-shell">
289+
<div class="sample-head">
290+
<div>
291+
<p class="eyebrow eyebrow-purple">Multilingual Gallery</p>
292+
<h3>更多语种</h3>
293+
</div>
294+
<p class="section-text">
295+
Japanese, Korean, Spanish, French, German, Italian,
296+
Hungarian, Russian, Persian, Arabic, Polish, Portuguese,
297+
Czech, Danish, Swedish, Greek, and Turkish are grouped
298+
together for quick scanning.
299+
</p>
300+
</div>
301+
<div
302+
id="multilingualSamples"
303+
class="sample-grid sample-grid-compact"
304+
></div>
305+
</div>
306+
307+
<div class="section-shell callout-shell">
308+
<div>
309+
<p class="eyebrow">Continue Exploring</p>
310+
<p class="section-text">
311+
需要模型权重、论文、或者在线体验，可以直接从这里跳转。
312+
</p>
313+
</div>
314+
<div class="callout-actions">
315+
<a
316+
class="button button-primary button-compact"
317+
href="https://github.com/OpenMOSS/MOSS-TTS-Nano"
318+
target="_blank"
319+
rel="noopener"
320+
>
321+
GitHub
322+
</a>
323+
<a
324+
class="button button-accent button-compact"
325+
href="https://huggingface.co/OpenMOSS-Team/MOSS-TTS-Nano"
326+
target="_blank"
327+
rel="noopener"
328+
>
329+
Model
330+
</a>
331+
<a
332+
class="button button-secondary button-compact"
333+
href="https://arxiv.org/abs/2603.18090"
334+
target="_blank"
335+
rel="noopener"
336+
>
337+
Paper
338+
</a>
339+
</div>
340+
</div>
341+
</div>
342+
</section>
343+
</main>
344+
</div>
345+
346+
<noscript>
347+
<div class="noscript-banner">
348+
This page uses a small JavaScript file to load the demo metadata and
349+
audio cards. Please enable JavaScript to browse the samples.
350+
</div>
351+
</noscript>
352+
353+
<script type="module" src="./script.js"></script>
15354
</body>
16355
</html>

0 commit comments

Comments
 (0)