Skip to content

add deepwiki link and home wechat modal #226

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
kkkky123 wants to merge 7 commits into from
Closed

add deepwiki link and home wechat modal #226

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a9cf727
feat: add new docs home and searchbar
kkkky123 Nov 7, 2025
ed79174
Merge branch 'alibaba:main' into main
kkkky123 Nov 7, 2025
4687ea0
Merge branch 'alibaba:main' into main
kkkky123 Nov 7, 2025
aee1f7d
fix: ignore docs png
kkkky123 Nov 7, 2025
98c63cf
Merge branch 'alibaba:main' into main
kkkky123 Nov 7, 2025
665306b
feat: add deepwiki link and wechat modal
kkkky123 Nov 7, 2025
3c5e8e5
Trigger GitHub recheck
kkkky123 Nov 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
279 changes: 147 additions & 132 deletions docs_roll/src/components/HomeContent/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,165 +1,180 @@
import React from 'react';
import { Button, Image, Divider, Col, Row, Collapse } from 'antd';
import React, { useState } from 'react';
import { Button, Image, Divider, Col, Row, Collapse, Modal, ConfigProvider, theme } from 'antd';
import { GithubOutlined, WechatOutlined } from '@ant-design/icons';
import clsx from 'clsx';
import useBaseUrl from '@docusaurus/useBaseUrl';
import { useColorMode } from '@docusaurus/theme-common';
import Statistic from '../Statistic';

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

export default () => {
return <div className={clsx('container', styles.container)}>
<div>
<div className={styles.subTitle}>Open Source Framework · Powerful & Easy</div>
<div className={styles.title}>
<div className={styles.names}>
Reinforcement Learning
</div>&nbsp;
<div className={styles.names}>Optimization</div>&nbsp;
for&nbsp;
<div className={styles.names}>Large-scale</div>&nbsp;
<div className={styles.names}>Learning</div>
</div>
<div className={styles.desc}>
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.
</div>
<div className={styles.buttons}>
<Button className={styles.btn}>{"Get Started >"}</Button>
<Button className={styles.github} variant="outlined" icon={<GithubOutlined />}>{"Github >"}</Button>
</div>

<div className={styles.mainImg}>
<Image className={styles.img} src={useBaseUrl('/img/home_main.png')} preview={false}></Image>
</div>
const [open, setOpen] = useState(false);
const { colorMode } = useColorMode();

<div className={styles.overview}>
<div className={styles.left}>
<Image className={styles.img} src={useBaseUrl('/img/icon1.svg')} preview={false}></Image>
<div>ROLL</div>
<div>Framework Overview</div>
return <ConfigProvider theme={{ algorithm: colorMode === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm }}>
<div className={clsx('container', styles.container)} id="home">
<div>
<div className={styles.subTitle}>Open Source Framework · Powerful & Easy</div>
<div className={styles.title}>
<div className={styles.names}>
Reinforcement Learning
</div>&nbsp;
<div className={styles.names}>Optimization</div>&nbsp;
for&nbsp;
<div className={styles.names}>Large-scale</div>&nbsp;
<div className={styles.names}>Learning</div>
</div>
<div className={styles.right}>
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.
<div className={styles.desc}>
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.
</div>
<div className={styles.buttons}>
<Button href="/ROLL/docs/English/start/" target='_blank' className={styles.btn}>{"Get Started >"}</Button>
<Button className={styles.github} target='_blank' href="https://github.com/alibaba/ROLL" variant="outlined" icon={<GithubOutlined />}>{"Github >"}</Button>
<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>
</div>
</div>

<Divider style={{ borderColor: 'var(--home-divider-color)' }}></Divider>

<div>
<Row gutter={16}>
<Col span={8}>
<Statistic count="1.9k" content="Github Stars" />
</Col>
<Col span={8}>
<Statistic count="30+" content="Contributors" />
</Col>
<Col span={8}>
<Statistic count="200+" content="Commits" />
</Col>
</Row>
</div>
<div className={styles.mainImg}>
<Image className={styles.img} src={useBaseUrl('/img/home_main.png')} preview={false}></Image>
</div>

<div className={styles.choose}>
<Image className={styles.img} src={useBaseUrl('/img/icon2.svg')} preview={false}></Image>
<div className={styles.wrap}>
<div className={styles.overview}>
<div className={styles.left}>
<div>Why</div>
<div>Choose ROLL</div>
<div className={styles.collapse}>
<Collapse
ghost
defaultActiveKey={['1']}
expandIcon={({ isActive }) => {
return (<div className={isActive ? styles.isActive : styles.default}></div>)
}}
items={[
{
key: '1',
label: <div className={styles.label}>Distributed Architecture</div>,
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>,
},
{
key: '2',
label: <div className={styles.label}>Multi-task Learning</div>,
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>,
},
{
key: '3',
label: <div className={styles.label}>Extremely Easy to Use</div>,
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>,
},
]}></Collapse>
</div>
<Image className={styles.img} src={useBaseUrl('/img/icon1.svg')} preview={false}></Image>
<div>ROLL</div>
<div>Framework Overview</div>
</div>
<div className={styles.right}>
<Image className={styles.img} src={useBaseUrl('/img/choose.png')} preview={false}></Image>
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.
</div>
</div>
</div>

<div className={styles.core} id="core">
<Image className={styles.img} src={useBaseUrl('/img/icon3.svg')} preview={false}></Image>
<Divider style={{ borderColor: 'var(--home-divider-color)' }}></Divider>

<div>
<div className={styles.title}>Core Advantages</div>
<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>
</div>
<div className={styles.wrap}>
<Divider style={{ borderColor: 'var(--home-divider-color)', marginBottom: 0 }}></Divider>
<Row gutter={[0, 0]} align="bottom">
<Col span={12}>
<div className={styles.items}>
<div className={styles.label}>Born for Scale</div>
<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>
</div>
<Row gutter={16}>
<Col span={8}>
<Statistic count="1.9k" content="Github Stars" />
</Col>
<Col span={12}>
<div className={styles.items} style={{ paddingLeft: 30, borderRight: 'none' }}>
<div className={styles.label}>Extreme Training Efficiency</div>
<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>
</div>
<Col span={8}>
<Statistic count="30+" content="Contributors" />
</Col>
</Row>
<Row gutter={[0, 0]} align="bottom">
<Col span={12}>
<div className={styles.items} style={{ borderBottom: 'none' }}>
<div className={styles.label}>Rich Algorithms & Scenarios</div>
<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>
</div>
</Col>
<Col span={12}>
<div className={styles.items} style={{ paddingLeft: 30, borderRight: 'none', borderBottom: 'none' }}>
<div className={styles.label}>Open Source and Accessible</div>
<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>
</div>
<Col span={8}>
<Statistic count="200+" content="Commits" />
</Col>
</Row>
</div>
</div>

<div className={styles.research} id="research">
<Image className={styles.img} src={useBaseUrl('/img/icon4.svg')} preview={false}></Image>
<div>
<div className={styles.title}>Open Source Community</div>
<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>
</div>
<div className={styles.cards}>
<div className={styles.card}>
<div className={styles.label}>How to Contribute</div>
<div>
<p>Contribute algorithm implementations and performance optimizations</p>
<p>Share experimental results and best practices</p>
<p>Improve tutorials and learning resources</p>
<div className={styles.choose}>
<Image className={styles.img} src={useBaseUrl('/img/icon2.svg')} preview={false}></Image>
<div className={styles.wrap}>
<div className={styles.left}>
<div>Why</div>
<div>Choose ROLL</div>
<div className={styles.collapse}>
<Collapse
ghost
defaultActiveKey={['1']}
expandIcon={({ isActive }) => {
return (<div className={isActive ? styles.isActive : styles.default}></div>)
}}
items={[
{
key: '1',
label: <div className={styles.label}>Distributed Architecture</div>,
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>,
},
{
key: '2',
label: <div className={styles.label}>Multi-task Learning</div>,
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>,
},
{
key: '3',
label: <div className={styles.label}>Extremely Easy to Use</div>,
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>,
},
]}></Collapse>
</div>
</div>
<div className={styles.right}>
<Image className={styles.img} src={useBaseUrl('/img/choose.png')} preview={false}></Image>
</div>
</div>
</div>

<div className={styles.core} id="core">
<Image className={styles.img} src={useBaseUrl('/img/icon3.svg')} preview={false}></Image>
<div>
<div className={styles.title}>Core Advantages</div>
<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>
</div>
<div className={styles.wrap}>
<Divider style={{ borderColor: 'var(--home-divider-color)', marginBottom: 0 }}></Divider>
<Row gutter={[0, 0]} align="bottom">
<Col span={12}>
<div className={styles.items}>
<div className={styles.label}>Born for Scale</div>
<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>
</div>
</Col>
<Col span={12}>
<div className={styles.items} style={{ paddingLeft: 30, borderRight: 'none' }}>
<div className={styles.label}>Extreme Training Efficiency</div>
<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>
</div>
</Col>
</Row>
<Row gutter={[0, 0]} align="bottom">
<Col span={12}>
<div className={styles.items} style={{ borderBottom: 'none' }}>
<div className={styles.label}>Rich Algorithms & Scenarios</div>
<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>
</div>
</Col>
<Col span={12}>
<div className={styles.items} style={{ paddingLeft: 30, borderRight: 'none', borderBottom: 'none' }}>
<div className={styles.label}>Open Source and Accessible</div>
<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>
</div>
</Col>
</Row>
</div>
<div className={styles.card2} style={{ width: 300 }}>
<div className={styles.label}>Join Discussion</div>
<div className={styles.buttons}>
<Button className={styles.btn} href="https://img.alicdn.com/imgextra/i4/O1CN01MICK0T28fHMzy5P84_!!6000000007959-2-tps-756-850.png" icon={<WechatOutlined />}>WeChat</Button>
<Button className={styles.github} href="https://github.com/alibaba/ROLL" variant="outlined" icon={<GithubOutlined />}>Follow GitHub Repository</Button>
</div>

<div className={styles.research} id="research">
<Image className={styles.img} src={useBaseUrl('/img/icon4.svg')} preview={false}></Image>
<div>
<div className={styles.title}>Open Source Community</div>
<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>
</div>
<div className={styles.cards}>
<div className={styles.card}>
<div className={styles.label}>How to Contribute</div>
<div>
<p>Contribute algorithm implementations and performance optimizations</p>
<p>Share experimental results and best practices</p>
<p>Improve tutorials and learning resources</p>
</div>
</div>
<div className={styles.card2} style={{ width: 300 }}>
<div className={styles.label}>Join Discussion</div>
<div className={styles.buttons}>
<Button className={styles.btn} onClick={() => setOpen(true)} icon={<WechatOutlined />}>WeChat</Button>
<Button className={styles.github} href="https://github.com/alibaba/ROLL" variant="outlined" icon={<GithubOutlined />}>Follow GitHub Repository</Button>
</div>
</div>
</div>
</div>
</div>
</div >
</div >
<Modal
open={open}
onCancel={() => setOpen(false)}
footer={null}
getContainer={() => document.getElementById('home') || document.body}
>
<Image className={styles.whiteImg} src="https://img.alicdn.com/imgextra/i4/O1CN01MICK0T28fHMzy5P84_!!6000000007959-2-tps-756-850.png" preview={false} />
</Modal>
</div>
</ConfigProvider>
}
7 changes: 7 additions & 0 deletions docs_roll/src/components/HomeContent/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@
.img {
filter: var(--dark-image-reverse-filter);
}
.whiteImg {
filter: var(--white-image-reverse-filter);
}
.subTitle {
font-size: 14px;
line-height: 22px;
Expand Down Expand Up @@ -37,6 +40,10 @@
.btn, .github {
border-radius: 20px;
}
.btn {
background-color: #fff;
color: rgba(0, 0, 0, 0.88);
}
.github {
background-color: transparent;
color: var(--home-title-primary);
Expand Down
Loading