Skip to content

Commit b3edf2e

Browse files
sanbuphysanbuphy
committed
feat: add online training links to chapters
1 parent 5811c30 commit b3edf2e

14 files changed

Lines changed: 420 additions & 2 deletions

File tree

‎docs/.vitepress/theme/components/OnlineTraining.vue‎

Lines changed: 393 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,393 @@
1+
<script setup>
2+
import { computed } from 'vue'
3+
import { useRoute } from 'vitepress'
4+
5+
const props = defineProps({
6+
studios: {
7+
type: String,
8+
required: true
9+
},
10+
lang: {
11+
type: String,
12+
default: ''
13+
}
14+
})
15+
16+
const route = useRoute()
17+
18+
const catalog = {
19+
cartpole: {
20+
badge: '01',
21+
title: 'CartPole',
22+
hardware: 'CPU',
23+
duration: { zh: '30–60 秒', en: '30–60 sec' },
24+
description: {
25+
zh: '用 PPO 从零训练倒立摆，实时查看奖励曲线、训练日志和策略回放。',
26+
en: 'Train CartPole with PPO and inspect the reward curve, live console, and policy replay.'
27+
},
28+
href: 'https://modelscope.cn/studios/walkinglab/hands-on-modern-rl-experiment01-cartpole'
29+
},
30+
gymnasium: {
31+
badge: 'LAB',
32+
title: 'Gymnasium Playground',
33+
hardware: 'CPU',
34+
duration: { zh: '数秒到数分钟', en: 'seconds to minutes' },
35+
description: {
36+
zh: '从教学文本、经典控制到游戏环境，切换任务并调整训练参数。',
37+
en: 'Switch among teaching, classic-control, and game environments, then adjust the training recipe.'
38+
},
39+
href: 'https://modelscope.cn/studios/walkinglab/hands-on-modern-rl-experiment-gymnasium'
40+
},
41+
vizdoom: {
42+
badge: '02',
43+
title: 'ViZDoom',
44+
hardware: 'CPU',
45+
duration: { zh: '1–4 分钟', en: '1–4 min' },
46+
description: {
47+
zh: '让 DQN 从第一人称画面学习瞄准、移动、生存和战斗。',
48+
en: 'Train DQN from first-person pixels on aiming, navigation, survival, and combat tasks.'
49+
},
50+
href: 'https://modelscope.cn/studios/walkinglab/hands-on-modern-rl-experiment02-vizdoom'
51+
},
52+
atari: {
53+
badge: '03',
54+
title: 'Atari / ALE',
55+
hardware: 'CPU',
56+
duration: { zh: '1–5 分钟', en: '1–5 min' },
57+
description: {
58+
zh: '在 Pong 等像素游戏上运行短预算 DQN，观察策略怎样开始学习。',
59+
en: 'Run short-budget DQN experiments on Pong and other pixel games to observe early learning.'
60+
},
61+
href: 'https://modelscope.cn/studios/walkinglab/hands-on-modern-rl-experiment03-atari'
62+
},
63+
board: {
64+
badge: '04',
65+
title: 'Board Games & Self-Play',
66+
hardware: 'CPU',
67+
duration: { zh: '10–90 秒', en: '10–90 sec' },
68+
description: {
69+
zh: '在小型棋盘游戏中尝试 CFR、自博弈和策略迭代，并查看完整对局。',
70+
en: 'Try CFR, self-play, and policy iteration on compact board games, then inspect complete matches.'
71+
},
72+
href: 'https://modelscope.cn/studios/walkinglab/hands-on-modern-rl-experiment04-board-selfplay'
73+
},
74+
multiagent: {
75+
badge: '05',
76+
title: 'Multi-Agent Games',
77+
hardware: 'CPU',
78+
duration: { zh: '30 秒到 3 分钟', en: '30 sec–3 min' },
79+
description: {
80+
zh: '在合作与竞争游戏中训练共享参数策略，观察多个智能体如何相互影响。',
81+
en: 'Train parameter-sharing policies in cooperative and competitive games and inspect agent interactions.'
82+
},
83+
href: 'https://modelscope.cn/studios/walkinglab/hands-on-modern-rl-experiment05-multiagent-games'
84+
},
85+
minigrid: {
86+
badge: '06',
87+
title: 'MiniGrid Adventures',
88+
hardware: 'CPU',
89+
duration: { zh: '20 秒到 2 分钟', en: '20 sec–2 min' },
90+
description: {
91+
zh: '在房间、钥匙、门和障碍任务中训练探索策略，直接查看路线回放。',
92+
en: 'Train exploration policies on rooms, keys, doors, and obstacles, then inspect route replays.'
93+
},
94+
href: 'https://modelscope.cn/studios/walkinglab/hands-on-modern-rl-experiment06-minigrid-adventure'
95+
},
96+
jax: {
97+
badge: '07',
98+
title: 'JAX MinAtar',
99+
hardware: 'CPU',
100+
duration: { zh: '首次 30 秒到 2 分钟', en: 'first run 30 sec–2 min' },
101+
description: {
102+
zh: '用 JAX 编译和批量化小型街机环境，对比预热前后的训练速度。',
103+
en: 'Use JAX compilation and batching on compact arcade tasks and compare cold and warm runs.'
104+
},
105+
href: 'https://modelscope.cn/studios/walkinglab/hands-on-modern-rl-experiment07-jax-games'
106+
},
107+
maniskill: {
108+
badge: '08',
109+
title: 'ManiSkill Robot Lab',
110+
hardware: 'xGPU',
111+
duration: { zh: '2–8 分钟', en: '2–8 min' },
112+
description: {
113+
zh: '训练机械臂完成推、抓、堆叠和插接任务，查看真实物理仿真回放。',
114+
en: 'Train robot arms to push, pick, stack, and insert objects, with rendered physics replays.'
115+
},
116+
href: 'https://modelscope.cn/studios/walkinglab/hands-on-modern-rl-experiment08-maniskill'
117+
},
118+
minestudio: {
119+
badge: '10',
120+
title: 'MineStudio Minecraft',
121+
hardware: 'xGPU',
122+
duration: { zh: '预热后 3–10 分钟', en: 'warm run 3–10 min' },
123+
description: {
124+
zh: '在 Minecraft 视觉环境中尝试导航、收集和长时序任务。',
125+
en: 'Try navigation, collection, and long-horizon tasks in a visual Minecraft environment.'
126+
},
127+
href: 'https://modelscope.cn/studios/walkinglab/hands-on-modern-rl-experiment10-minestudio'
128+
},
129+
unity: {
130+
badge: '11',
131+
title: 'Unity ML-Agents',
132+
hardware: 'xGPU',
133+
duration: { zh: 'Huggy 约 4–6 分钟', en: 'Huggy about 4–6 min' },
134+
description: {
135+
zh: '运行 Huggy 捡树枝等 Unity 场景，训练中查看实时画面，结束后查看本次 GIF。',
136+
en: 'Run Unity scenes such as Huggy fetch, watch sampled live frames, and inspect the final replay GIF.'
137+
},
138+
href: 'https://modelscope.cn/studios/walkinglab/hands-on-modern-rl-experiment11-unity-mlagents'
139+
},
140+
ai2thor: {
141+
badge: '12',
142+
title: 'AI2-THOR Embodied Home',
143+
hardware: 'xGPU',
144+
duration: { zh: '预热后 2–8 分钟', en: 'warm run 2–8 min' },
145+
description: {
146+
zh: '在家庭场景中训练视觉导航与目标寻找策略，查看智能体实际走过的路线。',
147+
en: 'Train visual navigation and object-finding policies in homes, then inspect the route taken.'
148+
},
149+
href: 'https://modelscope.cn/studios/walkinglab/hands-on-modern-rl-experiment12-ai2thor-embodied'
150+
}
151+
}
152+
153+
const isEnglish = computed(() => {
154+
if (props.lang) return props.lang.toLowerCase().startsWith('en')
155+
return /(^|\/)en(\/|$)/.test(route.path)
156+
})
157+
158+
const copy = computed(() =>
159+
isEnglish.value
160+
? {
161+
eyebrow: 'WALKINGLAB · ONLINE LAB',
162+
title: 'Want to see the training loop first?',
163+
description:
164+
'Open a ready-to-run ModelScope Studio to train in the browser. Watch the curve, live log, and learned-policy preview, then return to the chapter to explain what changed.',
165+
action: 'Open online training'
166+
}
167+
: {
168+
eyebrow: 'WALKINGLAB · 在线实验',
169+
title: '想先快速看到训练过程？',
170+
description:
171+
'打开已配置好的 ModelScope 创空间，直接在浏览器中训练。先观察曲线、实时日志和策略回放，再回到本节解释策略发生了什么变化。',
172+
action: '打开在线训练'
173+
}
174+
)
175+
176+
const selectedStudios = computed(() =>
177+
props.studios
178+
.split(',')
179+
.map((key) => key.trim())
180+
.filter((key) => catalog[key])
181+
.map((key) => ({ key, ...catalog[key] }))
182+
)
183+
</script>
184+
185+
<template>
186+
<aside class="online-training" aria-label="Online training resources">
187+
<div class="online-training__intro">
188+
<span class="online-training__eyebrow">
189+
<i aria-hidden="true"></i>
190+
{{ copy.eyebrow }}
191+
</span>
192+
<strong>{{ copy.title }}</strong>
193+
<p>{{ copy.description }}</p>
194+
</div>
195+
196+
<div class="online-training__grid">
197+
<a
198+
v-for="studio in selectedStudios"
199+
:key="studio.key"
200+
class="online-training__card"
201+
:href="studio.href"
202+
target="_blank"
203+
rel="noopener noreferrer"
204+
>
205+
<span class="online-training__badge">{{ studio.badge }}</span>
206+
<span class="online-training__body">
207+
<span class="online-training__title">{{ studio.title }}</span>
208+
<span class="online-training__meta">
209+
<b>{{ studio.hardware }}</b>
210+
<span aria-hidden="true">·</span>
211+
{{ isEnglish ? studio.duration.en : studio.duration.zh }}
212+
</span>
213+
<span class="online-training__description">
214+
{{ isEnglish ? studio.description.en : studio.description.zh }}
215+
</span>
216+
<span class="online-training__action">
217+
{{ copy.action }}
218+
<i aria-hidden="true">↗</i>
219+
</span>
220+
</span>
221+
</a>
222+
</div>
223+
</aside>
224+
</template>
225+
226+
<style scoped>
227+
.online-training {
228+
position: relative;
229+
overflow: hidden;
230+
margin: 24px 0 30px;
231+
padding: 22px;
232+
border: 1px solid
233+
color-mix(in srgb, var(--vp-c-brand-1) 24%, var(--vp-c-divider));
234+
border-radius: 22px;
235+
background:
236+
radial-gradient(
237+
circle at 96% 0%,
238+
color-mix(in srgb, var(--vp-c-brand-1) 16%, transparent) 0,
239+
transparent 34%
240+
),
241+
linear-gradient(145deg, var(--vp-c-bg-soft) 0%, var(--vp-c-bg) 100%);
242+
box-shadow: 0 18px 44px rgba(15, 23, 42, 0.07);
243+
}
244+
245+
.online-training__intro {
246+
position: relative;
247+
max-width: 760px;
248+
}
249+
250+
.online-training__eyebrow {
251+
display: inline-flex;
252+
align-items: center;
253+
gap: 8px;
254+
margin-bottom: 7px;
255+
color: var(--vp-c-brand-1);
256+
font-size: 11px;
257+
font-weight: 800;
258+
letter-spacing: 0.13em;
259+
}
260+
261+
.online-training__eyebrow i {
262+
width: 8px;
263+
height: 8px;
264+
border-radius: 999px;
265+
background: #22c55e;
266+
box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.12);
267+
}
268+
269+
.online-training__intro strong {
270+
display: block;
271+
color: var(--vp-c-text-1);
272+
font-size: 19px;
273+
line-height: 1.4;
274+
}
275+
276+
.online-training__intro p {
277+
margin: 7px 0 0;
278+
color: var(--vp-c-text-2);
279+
font-size: 14px;
280+
line-height: 1.7;
281+
}
282+
283+
.online-training__grid {
284+
display: grid;
285+
grid-template-columns: repeat(2, minmax(0, 1fr));
286+
gap: 12px;
287+
margin-top: 18px;
288+
}
289+
290+
.online-training__card {
291+
display: grid;
292+
grid-template-columns: 38px minmax(0, 1fr);
293+
gap: 13px;
294+
padding: 16px;
295+
border: 1px solid var(--vp-c-divider);
296+
border-radius: 16px;
297+
color: inherit !important;
298+
text-decoration: none !important;
299+
background: color-mix(in srgb, var(--vp-c-bg) 92%, transparent);
300+
transition:
301+
transform 0.2s ease,
302+
border-color 0.2s ease,
303+
box-shadow 0.2s ease;
304+
}
305+
306+
.online-training__card:hover {
307+
transform: translateY(-2px);
308+
border-color: color-mix(
309+
in srgb,
310+
var(--vp-c-brand-1) 46%,
311+
var(--vp-c-divider)
312+
);
313+
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.09);
314+
}
315+
316+
.online-training__badge {
317+
display: grid;
318+
place-items: center;
319+
width: 38px;
320+
height: 38px;
321+
border-radius: 11px;
322+
color: #fff;
323+
font-size: 11px;
324+
font-weight: 850;
325+
letter-spacing: 0.04em;
326+
background: linear-gradient(145deg, var(--vp-c-brand-1), var(--vp-c-brand-2));
327+
}
328+
329+
.online-training__body,
330+
.online-training__title,
331+
.online-training__meta,
332+
.online-training__description,
333+
.online-training__action {
334+
display: block;
335+
}
336+
337+
.online-training__title {
338+
color: var(--vp-c-text-1);
339+
font-size: 15px;
340+
font-weight: 750;
341+
line-height: 1.4;
342+
}
343+
344+
.online-training__meta {
345+
margin-top: 3px;
346+
color: var(--vp-c-text-3);
347+
font-size: 12px;
348+
}
349+
350+
.online-training__meta b {
351+
color: var(--vp-c-brand-1);
352+
font-weight: 750;
353+
}
354+
355+
.online-training__description {
356+
margin-top: 8px;
357+
color: var(--vp-c-text-2);
358+
font-size: 13px;
359+
line-height: 1.55;
360+
}
361+
362+
.online-training__action {
363+
margin-top: 10px;
364+
color: var(--vp-c-brand-1);
365+
font-size: 12px;
366+
font-weight: 750;
367+
}
368+
369+
.online-training__action i {
370+
display: inline-block;
371+
font-style: normal;
372+
transition: transform 0.2s ease;
373+
}
374+
375+
.online-training__card:hover .online-training__action i {
376+
transform: translate(2px, -2px);
377+
}
378+
379+
.dark .online-training {
380+
box-shadow: none;
381+
}
382+
383+
@media (max-width: 760px) {
384+
.online-training {
385+
padding: 18px;
386+
border-radius: 18px;
387+
}
388+
389+
.online-training__grid {
390+
grid-template-columns: 1fr;
391+
}
392+
}
393+
</style>

0 commit comments

Comments
 (0)