Skip to content

Commit d2f3db6

Browse files
xpqiuclaude
xpqiu
and
claude
committed
Homepage: slim hero, move Highlights to home with paper figures
- Remove hero action buttons, the on-home team-cards section, and the Open Resources section (all still reachable via top nav) - Add Latest Highlights to the homepage: 2-column cards with text on top and the paper's main figure below; date shown inline at the right of the title - New self-editable assets/highlights.md (fetched at runtime, overrides content-data fallback) with 6 entries and local figures in assets/img/highlights/ - Rename the homepage students card to 团队成员 - Cache-bust JS/CSS to v=20260604k Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1 parent 0d97593 commit d2f3db6

11 files changed

Lines changed: 186 additions & 78 deletions

File tree

‎assets/css/style.css‎

Lines changed: 39 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -597,51 +597,71 @@ html[lang="zh-CN"] .highlight-card h3 {
597597

598598
/* ========== Research Highlights ========== */
599599
.highlights-list {
600-
display: flex;
601-
flex-direction: column;
602-
gap: 20px;
600+
display: grid;
601+
grid-template-columns: repeat(2, 1fr);
602+
gap: 24px;
603603
}
604604

605605
.highlight-item {
606606
display: flex;
607-
gap: 24px;
608-
padding: 20px;
607+
flex-direction: column;
609608
background-color: var(--white);
610609
border: 1px solid var(--border);
611610
border-radius: 12px;
612611
box-shadow: 0 4px 12px var(--shadow-color);
613612
transition: all 0.3s ease;
613+
overflow: hidden;
614614
}
615615

616616
.highlight-item:hover {
617-
transform: translateX(4px);
618-
box-shadow: 0 6px 16px var(--shadow-color);
619-
}
620-
621-
.highlight-date {
622-
flex-shrink: 0;
623-
width: 80px;
624-
font-weight: 600;
625-
color: var(--fudan-blue);
626-
font-size: 14px;
617+
transform: translateY(-4px);
618+
box-shadow: 0 8px 20px var(--shadow-color);
627619
}
628620

629621
.highlight-content {
630622
flex: 1;
623+
display: flex;
624+
flex-direction: column;
625+
padding: 18px 20px 20px;
626+
}
627+
628+
.highlight-head {
629+
display: flex;
630+
justify-content: space-between;
631+
align-items: baseline;
632+
gap: 12px;
633+
margin-bottom: 8px;
631634
}
632635

633-
.highlight-content h3 {
634-
margin: 0 0 8px 0;
636+
.highlight-head h3 {
637+
margin: 0;
635638
font-size: 18px;
639+
line-height: 1.35;
636640
color: var(--text);
637641
}
638642

643+
.highlight-date {
644+
flex-shrink: 0;
645+
color: var(--fudan-blue);
646+
font-weight: 600;
647+
font-size: 14px;
648+
}
649+
639650
.highlight-content p {
640651
margin: 0;
641652
color: var(--text-light);
642653
line-height: 1.6;
643654
}
644655

656+
.highlight-img {
657+
width: 100%;
658+
height: 180px;
659+
object-fit: contain;
660+
display: block;
661+
border-top: 1px solid var(--border);
662+
background: var(--mist);
663+
}
664+
645665
/* ========== Publications ========== */
646666
.publication-section {
647667
margin-bottom: 48px;
@@ -746,13 +766,8 @@ html[lang="zh-CN"] .highlight-card h3 {
746766
}
747767

748768
@media (max-width: 768px) {
749-
.highlight-item {
750-
flex-direction: column;
751-
gap: 12px;
752-
}
753-
754-
.highlight-date {
755-
width: auto;
769+
.highlights-list {
770+
grid-template-columns: 1fr;
756771
}
757772
}
758773

‎assets/highlights.md‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!--
2+
最新亮点 / Highlights —— 首页「最新亮点」的内容，直接改这里即可。
3+
4+
规则：
5+
- 每条之间用一行「---」分隔。
6+
- 新增一条：复制任意一段（含上下的 ---），改内容即可；不要的整段删掉。
7+
- 字段（中英文都填最好；只填一种也会自动用同一份）：
8+
date 日期，只到年月，如 2026.3
9+
标题 中文标题 title 英文标题
10+
描述 中文描述 desc 英文描述
11+
图 配图地址（可不填）：建议用论文主图。可以是网址(https://…)，也可以是本地图片(assets/img/highlights/xxx.png)
12+
链接 点击跳转的链接（可不填）
13+
- 顺序：从上到下就是页面显示顺序（新的放最上面）。
14+
-->
15+
16+
date: 2026.6
17+
标题: Thinking with Video：用视频生成做多模态推理
18+
title: Thinking with Video: Video Generation as a Promising Multimodal Reasoning Paradigm
19+
描述: 提出“用视频思考”范式——让 Sora-2 等视频生成模型以视频帧为统一媒介进行多模态推理，弥补文字/图像难以刻画动态过程的不足；配套 VideoThinkBench 上视觉与文本推理均表现强劲，视觉谜题超越 GPT-5。
20+
desc: A “Thinking with Video” paradigm—video-generation models like Sora-2 reason over generated video frames as a unified medium, capturing the dynamic processes that text/image “thinking” cannot. On the new VideoThinkBench it rivals top VLMs and surpasses GPT-5 on visual puzzles.
21+
图: assets/img/highlights/thinking-with-video.png
22+
链接: https://openaccess.thecvf.com/content/CVPR2026/html/Tong_Thinking_with_Video_Video_Generation_as_a_Promising_Multimodal_Reasoning_CVPR_2026_paper.html
23+
24+
---
25+
26+
date: 2026.3
27+
标题: MOSS-TTS 技术报告
28+
title: MOSS-TTS Technical Report
29+
描述: 可扩展的语音生成基座模型，支持零样本音色克隆、时长与发音控制、流畅中英混说与长语音生成。
30+
desc: A scalable speech-generation foundation model supporting zero-shot voice cloning, duration and pronunciation control, smooth code-switching, and stable long-form generation.
31+
图: assets/img/highlights/moss-tts.png
32+
链接: https://arxiv.org/abs/2603.18090
33+
34+
---
35+
36+
date: 2026.3
37+
标题: AI 也能学会“科学品味”
38+
title: AI Can Learn Scientific Taste
39+
描述: 提出“社区反馈强化学习”(RLCF)：用大规模引用信号训练“科学评审”判断创意价值，并对齐出“科学思考者”提出高影响力研究构想，判断力超越 GPT-5.2、Gemini 3 Pro。
40+
desc: Introduces Reinforcement Learning from Community Feedback (RLCF): a "Scientific Judge" trained on large-scale citation signals to assess idea quality, and a "Scientific Thinker" aligned to propose high-impact research ideas—surpassing frontier models like GPT-5.2 and Gemini 3 Pro.
41+
图: assets/img/highlights/scientific-taste.png
42+
链接: https://arxiv.org/abs/2603.14473
43+
44+
---
45+
46+
date: 2026.2
47+
标题: MOVA：可扩展的同步视频-音频生成
48+
title: MOVA: Towards Scalable and Synchronized Video-Audio Generation
49+
描述: 开源视频-音频联合生成模型，可同步生成高质量画面与声音——唇形同步语音、环境音效与内容匹配的音乐；采用 MoE 架构（总参 32B，激活 18B）。
50+
desc: An open-source joint video-audio generation model producing high-quality, synchronized visuals and audio—lip-synced speech, environment-aware sound effects, and content-aligned music—built on a MoE architecture (32B total / 18B active).
51+
图: assets/img/highlights/mova.jpg
52+
链接: https://arxiv.org/abs/2602.08794
53+
54+
---
55+
56+
date: 2025.10
57+
标题: MOSS-Speech: 真语音到语音生成
58+
title: MOSS-Speech: True Speech-to-Speech Generation
59+
描述: 原生端到端语音交互，无需任何中间文本引导
60+
desc: Native end-to-end speech interaction without any intermediate text guidance
61+
图: assets/img/highlights/moss-speech.png
62+
链接: https://arxiv.org/abs/2510.00499
63+
64+
---
65+
66+
date: 2025.6
67+
标题: XY-Tokenizer: 低码率声学语义统一编码
68+
title: XY-Tokenizer: Low-Bitrate Unified Acoustic-Semantic Encoding
69+
描述: 1kbps最强声学语义统一编码及离散化工具
70+
desc: State-of-the-art 1kbps unified acoustic-semantic encoding and discretization tool
71+
图: assets/img/highlights/xy-tokenizer.png
72+
链接: https://arxiv.org/abs/2506.23325

‎assets/img/highlights/moss-speech.png‎

147 KB
Loading

‎assets/img/highlights/moss-tts.png‎

95.6 KB
Loading

‎assets/img/highlights/mova.jpg‎

116 KB
Loading

‎assets/img/highlights/scientific-taste.png‎

40.4 KB
Loading

‎assets/img/highlights/thinking-with-video.png‎

265 KB
Loading

‎assets/img/highlights/xy-tokenizer.png‎

266 KB
Loading

‎assets/js/i18n.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
'people.subtitle.undergrad': '本科生',
4646
'people.subtitle.visiting': '访问学生',
4747
'people.desc': '研究生通过复旦大学、上海创智学院进行招生，欢迎世界各地的本科生和访问学生加入。',
48-
'people.card.students.title': '学生与访问学者',
48+
'people.card.students.title': '团队成员',
4949
'people.card.students.desc': '研究生通过复旦大学、上海创智学院进行招生，欢迎世界各地的本科生和访问学生加入。',
5050
'people.card.students.link': '查看完整团队',
5151
'people.card.alumni.title': '校友网络',
@@ -187,7 +187,7 @@
187187
'people.subtitle.undergrad': 'Undergraduates',
188188
'people.subtitle.visiting': 'Visiting Students',
189189
'people.desc': 'Graduate students are recruited through Fudan University and Shanghai Innovation Institution. We welcome undergraduates and visiting students from diverse backgrounds.',
190-
'people.card.students.title': 'Students & Fellows',
190+
'people.card.students.title': 'Team Members',
191191
'people.card.students.desc': 'Graduate students are recruited through Fudan University and Shanghai Innovation Institution. We welcome undergraduates and visiting students from diverse backgrounds.',
192192
'people.card.students.link': 'Meet the Team',
193193
'people.card.alumni.title': 'Alumni',

‎assets/js/spa.js‎

Lines changed: 69 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,46 @@
5252
renderShell();
5353
window.addEventListener('hashchange', handleRoute);
5454
handleRoute();
55+
56+
// 最新亮点：优先读取可编辑的 assets/highlights.md；失败则用内置数据
57+
fetch('assets/highlights.md?_=' + Date.now())
58+
.then(function (r) { return r.ok ? r.text() : ''; })
59+
.then(function (txt) {
60+
var parsed = parseHighlights(txt);
61+
if (parsed.length) {
62+
SPA_DATA.highlights = parsed;
63+
if ((parseHash().route || 'home') === 'home') handleRoute();
64+
}
65+
})
66+
.catch(function () {});
67+
}
68+
69+
// 解析 highlights.md：用 "---" 分隔各条，每行 "键: 值"（中英文键均可）
70+
function parseHighlights(text) {
71+
if (!text) return [];
72+
text = text.replace(/<!--[\s\S]*?-->/g, '');
73+
return text.split(/\n\s*-{3,}\s*\n/).map(function (block) {
74+
var h = { title: {}, desc: {} };
75+
block.split('\n').forEach(function (line) {
76+
var i = line.search(/[:：]/);
77+
if (i < 0) return;
78+
var k = line.slice(0, i).trim();
79+
var v = line.slice(i + 1).trim();
80+
if (!v) return;
81+
if (k === 'date' || k === '日期') h.date = v;
82+
else if (k === '标题' || k === 'title-zh') h.title.zh = v;
83+
else if (k === 'title' || k === 'title-en') h.title.en = v;
84+
else if (k === '描述' || k === 'desc-zh') h.desc.zh = v;
85+
else if (k === 'desc' || k === 'desc-en') h.desc.en = v;
86+
else if (k === '图' || k === '图片' || k === 'image') h.image = v;
87+
else if (k === '链接' || k === 'url') h.url = v;
88+
});
89+
if (h.title.zh && !h.title.en) h.title.en = h.title.zh;
90+
if (h.title.en && !h.title.zh) h.title.zh = h.title.en;
91+
if (h.desc.zh && !h.desc.en) h.desc.en = h.desc.zh;
92+
if (h.desc.en && !h.desc.zh) h.desc.zh = h.desc.en;
93+
return h;
94+
}).filter(function (h) { return h.date || h.title.zh || h.title.en; });
5595
}
5696

5797
function renderShell() {
@@ -246,10 +286,6 @@
246286
<div class="page-hero-copy">
247287
<h1>${t('hero.title')}</h1>
248288
${paragraphs.map(p => `<p class="lead">${p}</p>`).join('')}
249-
<div class="page-hero-actions">
250-
<a class="btn btn-primary" href="#research?scroll=highlights">${t('hero.btn.highlights')}</a>
251-
<a class="btn btn-outline" href="#positions">${t('hero.btn.join')}</a>
252-
</div>
253289
</div>
254290
</div>
255291
</div>
@@ -270,53 +306,35 @@
270306
}
271307

272308
function renderHome() {
309+
const highlights = (SPA_DATA.highlights || []).map(h => ({
310+
title: typeof h.title === 'object' ? (h.title[currentLang] || h.title.zh) : h.title,
311+
desc: typeof h.desc === 'object' ? (h.desc[currentLang] || h.desc.zh) : h.desc,
312+
date: h.date, url: h.url, image: h.image
313+
}));
273314
return `
274315
${renderHero()}
275316
<section class="container sec">
276317
<h2>${t('research.title')}</h2>
277-
${renderPillarsGrid(true)}
278-
</section>
279-
<section class="container sec">
280-
<h2>${t('people.title')}</h2>
281-
282-
<h3 class="section-subtitle" style="margin-top: 0;">${t('people.subtitle.faculty')}</h3>
283-
<div class="team-members">
284-
${renderTeamGrid(teamData.coreMembers || [])}
285-
</div>
286-
287-
<div class="people-sections">
288-
<article class="people-card">
289-
<h3>${t('people.card.students.title')}</h3>
290-
<p>${t('people.card.students.desc')}</p>
291-
<a class="btn btn-outline" href="#people">${t('people.card.students.link')}</a>
292-
</article>
293-
<article class="people-card">
294-
<h3>${t('people.card.alumni.title')}</h3>
295-
<p>${t('people.card.alumni.desc')}</p>
296-
<a class="btn btn-outline" href="#alumni">${t('people.card.alumni.link')}</a>
297-
</article>
298-
</div>
318+
${renderPillarsGrid()}
299319
</section>
300-
<section class="container sec">
301-
<h2>${t('resources.title')}</h2>
302-
<div class="people-sections">
303-
<article class="people-card">
304-
<h3>${t('resources.highlight.tools.title')}</h3>
305-
<p>${t('resources.highlight.tools.desc')}</p>
306-
<div class="hero-actions" style="margin-top: auto; width: 100%;">
307-
<a class="btn btn-outline" href="https://github.com/OpenMOSS" target="_blank">${t('resources.highlight.tools.btn1')}</a>
308-
<a class="btn btn-outline" href="javascript:void(0)" onclick="navigateAndScroll('resources', 'projects', 100, 200)">${t('resources.highlight.tools.btn2')}</a>
309-
</div>
310-
</article>
311-
<article class="people-card">
312-
<h3>${t('resources.highlight.courses.title')}</h3>
313-
<p>${t('resources.highlight.courses.desc')}</p>
314-
<div class="hero-actions" style="margin-top: auto; width: 100%;">
315-
<a class="btn btn-outline" href="javascript:void(0)" onclick="navigateAndScroll('resources', 'courses', 100, 200)">${t('resources.highlight.courses.btn')}</a>
316-
</div>
317-
</article>
320+
${highlights.length ? `
321+
<section class="container sec" id="home-highlights">
322+
<h2>${t('research.highlights.title')}</h2>
323+
<div class="highlights-list">
324+
${highlights.map(h => `
325+
<article class="highlight-item${h.image ? ' has-img' : ''}" ${h.url ? `onclick="window.open('${h.url}', '_blank')" style="cursor: pointer;"` : ''}>
326+
<div class="highlight-content">
327+
<div class="highlight-head">
328+
<h3>${h.title}</h3>
329+
<span class="highlight-date">${h.date}</span>
330+
</div>
331+
<p>${h.desc}</p>
332+
</div>
333+
${h.image ? `<img class="highlight-img" src="${h.image}" alt="" loading="lazy">` : ''}
334+
</article>
335+
`).join('')}
318336
</div>
319-
</section>
337+
</section>` : ''}
320338
`;
321339
}
322340

@@ -476,12 +494,15 @@
476494
<h2>${t('research.highlights.title')}</h2>
477495
<div class="highlights-list">
478496
${highlights.map(h => `
479-
<article class="highlight-item" ${h.url ? `onclick="window.open('${h.url}', '_blank')" style="cursor: pointer;"` : ''}>
480-
<div class="highlight-date">${h.date}</div>
497+
<article class="highlight-item${h.image ? ' has-img' : ''}" ${h.url ? `onclick="window.open('${h.url}', '_blank')" style="cursor: pointer;"` : ''}>
481498
<div class="highlight-content">
482-
<h3>${h.title}</h3>
499+
<div class="highlight-head">
500+
<h3>${h.title}</h3>
501+
<span class="highlight-date">${h.date}</span>
502+
</div>
483503
<p>${h.desc}</p>
484504
</div>
505+
${h.image ? `<img class="highlight-img" src="${h.image}" alt="" loading="lazy">` : ''}
485506
</article>
486507
`).join('')}
487508
</div>

0 commit comments

Comments
 (0)