Skip to content

Commit 665306b

Browse files
committed
feat: add deepwiki link and wechat modal
1 parent 98c63cf commit 665306b

3 files changed

Lines changed: 155 additions & 132 deletions

File tree

Lines changed: 147 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -1,165 +1,180 @@
1-
import React from 'react';
2-
import { Button, Image, Divider, Col, Row, Collapse } from 'antd';
1+
import React, { useState } from 'react';
2+
import { Button, Image, Divider, Col, Row, Collapse, Modal, ConfigProvider, theme } from 'antd';
33
import { GithubOutlined, WechatOutlined } from '@ant-design/icons';
44
import clsx from 'clsx';
55
import useBaseUrl from '@docusaurus/useBaseUrl';
6+
import { useColorMode } from '@docusaurus/theme-common';
67
import Statistic from '../Statistic';
78

89
import styles from './styles.module.css';
910

1011
export default () => {
11-
return <div className={clsx('container', styles.container)}>
12-
<div>
13-
<div className={styles.subTitle}>Open Source Framework · Powerful & Easy</div>
14-
<div className={styles.title}>
15-
<div className={styles.names}>
16-
Reinforcement Learning
17-
</div>&nbsp;
18-
<div className={styles.names}>Optimization</div>&nbsp;
19-
for&nbsp;
20-
<div className={styles.names}>Large-scale</div>&nbsp;
21-
<div className={styles.names}>Learning</div>
22-
</div>
23-
<div className={styles.desc}>
24-
An open-source reinforcement learning library by Alibaba, optimized for large-scale language models. Supporting distributed training, multi-task learning, and agent interaction for simpler and more efficient AI model training.
25-
</div>
26-
<div className={styles.buttons}>
27-
<Button className={styles.btn}>{"Get Started >"}</Button>
28-
<Button className={styles.github} variant="outlined" icon={<GithubOutlined />}>{"Github >"}</Button>
29-
</div>
30-
31-
<div className={styles.mainImg}>
32-
<Image className={styles.img} src={useBaseUrl('/img/home_main.png')} preview={false}></Image>
33-
</div>
12+
const [open, setOpen] = useState(false);
13+
const { colorMode } = useColorMode();
3414

35-
<div className={styles.overview}>
36-
<div className={styles.left}>
37-
<Image className={styles.img} src={useBaseUrl('/img/icon1.svg')} preview={false}></Image>
38-
<div>ROLL</div>
39-
<div>Framework Overview</div>
15+
return <ConfigProvider theme={{ algorithm: colorMode === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm }}>
16+
<div className={clsx('container', styles.container)} id="home">
17+
<div>
18+
<div className={styles.subTitle}>Open Source Framework · Powerful & Easy</div>
19+
<div className={styles.title}>
20+
<div className={styles.names}>
21+
Reinforcement Learning
22+
</div>&nbsp;
23+
<div className={styles.names}>Optimization</div>&nbsp;
24+
for&nbsp;
25+
<div className={styles.names}>Large-scale</div>&nbsp;
26+
<div className={styles.names}>Learning</div>
4027
</div>
41-
<div className={styles.right}>
42-
ROLL (Reinforcement Learning Optimization for Large-scale Learning) is an open-source reinforcement learning framework by Alibaba, designed for large-scale language models. Built on Ray distributed architecture, supporting mainstream algorithms like PPO and GRPO, providing complete solutions from research to production.
28+
<div className={styles.desc}>
29+
An open-source reinforcement learning library by Alibaba, optimized for large-scale language models. Supporting distributed training, multi-task learning, and agent interaction for simpler and more efficient AI model training.
30+
</div>
31+
<div className={styles.buttons}>
32+
<Button href="/ROLL/docs/English/start/" target='_blank' className={styles.btn}>{"Get Started >"}</Button>
33+
<Button className={styles.github} target='_blank' href="https://github.com/alibaba/ROLL" variant="outlined" icon={<GithubOutlined />}>{"Github >"}</Button>
34+
<Button className={styles.github} target='_blank' href="https://deepwiki.com/alibaba/ROLL" variant="outlined" icon={<Image width={14} src={useBaseUrl('/img/deepwiki.svg')} preview={false}></Image>}>{"DeepWiki >"}</Button>
4335
</div>
44-
</div>
45-
46-
<Divider style={{ borderColor: 'var(--home-divider-color)' }}></Divider>
4736

48-
<div>
49-
<Row gutter={16}>
50-
<Col span={8}>
51-
<Statistic count="1.9k" content="Github Stars" />
52-
</Col>
53-
<Col span={8}>
54-
<Statistic count="30+" content="Contributors" />
55-
</Col>
56-
<Col span={8}>
57-
<Statistic count="200+" content="Commits" />
58-
</Col>
59-
</Row>
60-
</div>
37+
<div className={styles.mainImg}>
38+
<Image className={styles.img} src={useBaseUrl('/img/home_main.png')} preview={false}></Image>
39+
</div>
6140

62-
<div className={styles.choose}>
63-
<Image className={styles.img} src={useBaseUrl('/img/icon2.svg')} preview={false}></Image>
64-
<div className={styles.wrap}>
41+
<div className={styles.overview}>
6542
<div className={styles.left}>
66-
<div>Why</div>
67-
<div>Choose ROLL</div>
68-
<div className={styles.collapse}>
69-
<Collapse
70-
ghost
71-
defaultActiveKey={['1']}
72-
expandIcon={({ isActive }) => {
73-
return (<div className={isActive ? styles.isActive : styles.default}></div>)
74-
}}
75-
items={[
76-
{
77-
key: '1',
78-
label: <div className={styles.label}>Distributed Architecture</div>,
79-
children: <div className={styles.content}>Ray-based distributed architecture supporting mainstream engines like vLLM, SGLang, Megatron-Core, seamlessly scaling from single machine to large GPU clusters</div>,
80-
},
81-
{
82-
key: '2',
83-
label: <div className={styles.label}>Multi-task Learning</div>,
84-
children: <div className={styles.content}>Support for multi-task joint training including math reasoning, code generation, and dialogue, with dynamic sampling rate and data weight adjustment</div>,
85-
},
86-
{
87-
key: '3',
88-
label: <div className={styles.label}>Extremely Easy to Use</div>,
89-
children: <div className={styles.content}>Gym-style clean API design with modular architecture for flexible extension, one-click switching between different backend engines and algorithm configurations</div>,
90-
},
91-
]}></Collapse>
92-
</div>
43+
<Image className={styles.img} src={useBaseUrl('/img/icon1.svg')} preview={false}></Image>
44+
<div>ROLL</div>
45+
<div>Framework Overview</div>
9346
</div>
9447
<div className={styles.right}>
95-
<Image className={styles.img} src={useBaseUrl('/img/choose.png')} preview={false}></Image>
48+
ROLL (Reinforcement Learning Optimization for Large-scale Learning) is an open-source reinforcement learning framework by Alibaba, designed for large-scale language models. Built on Ray distributed architecture, supporting mainstream algorithms like PPO and GRPO, providing complete solutions from research to production.
9649
</div>
9750
</div>
98-
</div>
9951

100-
<div className={styles.core} id="core">
101-
<Image className={styles.img} src={useBaseUrl('/img/icon3.svg')} preview={false}></Image>
52+
<Divider style={{ borderColor: 'var(--home-divider-color)' }}></Divider>
53+
10254
<div>
103-
<div className={styles.title}>Core Advantages</div>
104-
<div className={styles.content}>ROLL framework provides comprehensive reinforcement learning support, from model training to agent deployment, every aspect is carefully optimized to make AI training more efficient</div>
105-
</div>
106-
<div className={styles.wrap}>
107-
<Divider style={{ borderColor: 'var(--home-divider-color)', marginBottom: 0 }}></Divider>
108-
<Row gutter={[0, 0]} align="bottom">
109-
<Col span={12}>
110-
<div className={styles.items}>
111-
<div className={styles.label}>Born for Scale</div>
112-
<div className={styles.content}>Built on a Ray-based distributed architecture, it supports large-scale cluster training at the thousand-GPU level. Its innovative Rollout scheduler and AutoDeviceMapping module dramatically improve GPU resource utilization .</div>
113-
</div>
55+
<Row gutter={16}>
56+
<Col span={8}>
57+
<Statistic count="1.9k" content="Github Stars" />
11458
</Col>
115-
<Col span={12}>
116-
<div className={styles.items} style={{ paddingLeft: 30, borderRight: 'none' }}>
117-
<div className={styles.label}>Extreme Training Efficiency</div>
118-
<div className={styles.content}>Integrates cutting-edge technologies like Megatron-Core, SGLang, and vLLM to significantly accelerate the model training and inference sampling processes .</div>
119-
</div>
59+
<Col span={8}>
60+
<Statistic count="30+" content="Contributors" />
12061
</Col>
121-
</Row>
122-
<Row gutter={[0, 0]} align="bottom">
123-
<Col span={12}>
124-
<div className={styles.items} style={{ borderBottom: 'none' }}>
125-
<div className={styles.label}>Rich Algorithms & Scenarios</div>
126-
<div className={styles.content}>Comes with built-in mainstream RL algorithms like PPO and GRPO, and supports multi-task RL and agent interaction scenarios. Its effectiveness has been validated in numerous real-world business applications .</div>
127-
</div>
128-
</Col>
129-
<Col span={12}>
130-
<div className={styles.items} style={{ paddingLeft: 30, borderRight: 'none', borderBottom: 'none' }}>
131-
<div className={styles.label}>Open Source and Accessible</div>
132-
<div className={styles.content}>ROLL is open-sourced on GitHub (https://github.com/alibaba/ROLL) under the Apache License 2.0, backed by an active community and comprehensive documentation .</div>
133-
</div>
62+
<Col span={8}>
63+
<Statistic count="200+" content="Commits" />
13464
</Col>
13565
</Row>
13666
</div>
137-
</div>
13867

139-
<div className={styles.research} id="research">
140-
<Image className={styles.img} src={useBaseUrl('/img/icon4.svg')} preview={false}></Image>
141-
<div>
142-
<div className={styles.title}>Open Source Community</div>
143-
<div className={styles.content}>Join our vibrant open source community, explore cutting-edge reinforcement learning technologies with global AI researchers, and jointly promote the future of LLM and RL</div>
144-
</div>
145-
<div className={styles.cards}>
146-
<div className={styles.card}>
147-
<div className={styles.label}>How to Contribute</div>
148-
<div>
149-
<p>Contribute algorithm implementations and performance optimizations</p>
150-
<p>Share experimental results and best practices</p>
151-
<p>Improve tutorials and learning resources</p>
68+
<div className={styles.choose}>
69+
<Image className={styles.img} src={useBaseUrl('/img/icon2.svg')} preview={false}></Image>
70+
<div className={styles.wrap}>
71+
<div className={styles.left}>
72+
<div>Why</div>
73+
<div>Choose ROLL</div>
74+
<div className={styles.collapse}>
75+
<Collapse
76+
ghost
77+
defaultActiveKey={['1']}
78+
expandIcon={({ isActive }) => {
79+
return (<div className={isActive ? styles.isActive : styles.default}></div>)
80+
}}
81+
items={[
82+
{
83+
key: '1',
84+
label: <div className={styles.label}>Distributed Architecture</div>,
85+
children: <div className={styles.content}>Ray-based distributed architecture supporting mainstream engines like vLLM, SGLang, Megatron-Core, seamlessly scaling from single machine to large GPU clusters</div>,
86+
},
87+
{
88+
key: '2',
89+
label: <div className={styles.label}>Multi-task Learning</div>,
90+
children: <div className={styles.content}>Support for multi-task joint training including math reasoning, code generation, and dialogue, with dynamic sampling rate and data weight adjustment</div>,
91+
},
92+
{
93+
key: '3',
94+
label: <div className={styles.label}>Extremely Easy to Use</div>,
95+
children: <div className={styles.content}>Gym-style clean API design with modular architecture for flexible extension, one-click switching between different backend engines and algorithm configurations</div>,
96+
},
97+
]}></Collapse>
98+
</div>
15299
</div>
100+
<div className={styles.right}>
101+
<Image className={styles.img} src={useBaseUrl('/img/choose.png')} preview={false}></Image>
102+
</div>
103+
</div>
104+
</div>
105+
106+
<div className={styles.core} id="core">
107+
<Image className={styles.img} src={useBaseUrl('/img/icon3.svg')} preview={false}></Image>
108+
<div>
109+
<div className={styles.title}>Core Advantages</div>
110+
<div className={styles.content}>ROLL framework provides comprehensive reinforcement learning support, from model training to agent deployment, every aspect is carefully optimized to make AI training more efficient</div>
111+
</div>
112+
<div className={styles.wrap}>
113+
<Divider style={{ borderColor: 'var(--home-divider-color)', marginBottom: 0 }}></Divider>
114+
<Row gutter={[0, 0]} align="bottom">
115+
<Col span={12}>
116+
<div className={styles.items}>
117+
<div className={styles.label}>Born for Scale</div>
118+
<div className={styles.content}>Built on a Ray-based distributed architecture, it supports large-scale cluster training at the thousand-GPU level. Its innovative Rollout scheduler and AutoDeviceMapping module dramatically improve GPU resource utilization .</div>
119+
</div>
120+
</Col>
121+
<Col span={12}>
122+
<div className={styles.items} style={{ paddingLeft: 30, borderRight: 'none' }}>
123+
<div className={styles.label}>Extreme Training Efficiency</div>
124+
<div className={styles.content}>Integrates cutting-edge technologies like Megatron-Core, SGLang, and vLLM to significantly accelerate the model training and inference sampling processes .</div>
125+
</div>
126+
</Col>
127+
</Row>
128+
<Row gutter={[0, 0]} align="bottom">
129+
<Col span={12}>
130+
<div className={styles.items} style={{ borderBottom: 'none' }}>
131+
<div className={styles.label}>Rich Algorithms & Scenarios</div>
132+
<div className={styles.content}>Comes with built-in mainstream RL algorithms like PPO and GRPO, and supports multi-task RL and agent interaction scenarios. Its effectiveness has been validated in numerous real-world business applications .</div>
133+
</div>
134+
</Col>
135+
<Col span={12}>
136+
<div className={styles.items} style={{ paddingLeft: 30, borderRight: 'none', borderBottom: 'none' }}>
137+
<div className={styles.label}>Open Source and Accessible</div>
138+
<div className={styles.content}>ROLL is open-sourced on GitHub (https://github.com/alibaba/ROLL) under the Apache License 2.0, backed by an active community and comprehensive documentation .</div>
139+
</div>
140+
</Col>
141+
</Row>
153142
</div>
154-
<div className={styles.card2} style={{ width: 300 }}>
155-
<div className={styles.label}>Join Discussion</div>
156-
<div className={styles.buttons}>
157-
<Button className={styles.btn} href="https://img.alicdn.com/imgextra/i4/O1CN01MICK0T28fHMzy5P84_!!6000000007959-2-tps-756-850.png" icon={<WechatOutlined />}>WeChat</Button>
158-
<Button className={styles.github} href="https://github.com/alibaba/ROLL" variant="outlined" icon={<GithubOutlined />}>Follow GitHub Repository</Button>
143+
</div>
144+
145+
<div className={styles.research} id="research">
146+
<Image className={styles.img} src={useBaseUrl('/img/icon4.svg')} preview={false}></Image>
147+
<div>
148+
<div className={styles.title}>Open Source Community</div>
149+
<div className={styles.content}>Join our vibrant open source community, explore cutting-edge reinforcement learning technologies with global AI researchers, and jointly promote the future of LLM and RL</div>
150+
</div>
151+
<div className={styles.cards}>
152+
<div className={styles.card}>
153+
<div className={styles.label}>How to Contribute</div>
154+
<div>
155+
<p>Contribute algorithm implementations and performance optimizations</p>
156+
<p>Share experimental results and best practices</p>
157+
<p>Improve tutorials and learning resources</p>
158+
</div>
159+
</div>
160+
<div className={styles.card2} style={{ width: 300 }}>
161+
<div className={styles.label}>Join Discussion</div>
162+
<div className={styles.buttons}>
163+
<Button className={styles.btn} onClick={() => setOpen(true)} icon={<WechatOutlined />}>WeChat</Button>
164+
<Button className={styles.github} href="https://github.com/alibaba/ROLL" variant="outlined" icon={<GithubOutlined />}>Follow GitHub Repository</Button>
165+
</div>
159166
</div>
160167
</div>
161168
</div>
162169
</div>
163-
</div >
164-
</div >
170+
<Modal
171+
open={open}
172+
onCancel={() => setOpen(false)}
173+
footer={null}
174+
getContainer={() => document.getElementById('home') || document.body}
175+
>
176+
<Image className={styles.whiteImg} src="https://img.alicdn.com/imgextra/i4/O1CN01MICK0T28fHMzy5P84_!!6000000007959-2-tps-756-850.png" preview={false} />
177+
</Modal>
178+
</div>
179+
</ConfigProvider>
165180
}

docs_roll/src/components/HomeContent/styles.module.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
.img {
33
filter: var(--dark-image-reverse-filter);
44
}
5+
.whiteImg {
6+
filter: var(--white-image-reverse-filter);
7+
}
58
.subTitle {
69
font-size: 14px;
710
line-height: 22px;
@@ -37,6 +40,10 @@
3740
.btn, .github {
3841
border-radius: 20px;
3942
}
43+
.btn {
44+
background-color: #fff;
45+
color: rgba(0, 0, 0, 0.88);
46+
}
4047
.github {
4148
background-color: transparent;
4249
color: var(--home-title-primary);

0 commit comments

Comments
 (0)