Skip to content

Commit a1323cf

Browse files
EssozEssoz
committed
add: refined webpage css
1 parent e7256bc commit a1323cf

File tree

3 files changed

+148
-32
lines changed

3 files changed

+148
-32
lines changed

‎docs/index.md‎

Lines changed: 33 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,49 @@
1-
<div align="center">
2-
<picture>
3-
<img alt="TrainCheck logo" width="55%" src="assets/images/traincheck_logo.png">
4-
</picture>
5-
</div>
6-
7-
# TrainCheck: Invariant Checking & Observability for AI Training
8-
9-
[![format and types](https://github.com/OrderLab/traincheck/actions/workflows/pre-commit-checks.yml/badge.svg)](https://github.com/OrderLab/traincheck/actions/workflows/pre-commit-checks.yml)
10-
[![format and types](https://github.com/OrderLab/traincheck/actions/workflows/correctness_checks.yml/badge.svg)](https://github.com/OrderLab/traincheck/actions/workflows/correctness_checks.yml)
11-
[![Chat on Discord](https://img.shields.io/badge/Discord-Join%20us-5865F2?logo=discord&logoColor=white)](https://discord.gg/ZvYewjsQ9D)
12-
[![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/OrderLab/TrainCheck)
13-
14-
**Stop flying blind.** TrainCheck gives you deep visibility into your training dynamics, continuously validating correctness and stability where standard metrics fail.
15-
1+
---
2+
hide:
3+
- navigation
4+
- toc
165
---
176

18-
### Why TrainCheck?
19-
20-
✅ **Continuous Invariant Checking**
21-
22-
TrainCheck validates the "physics" of your training process in real-time. It ensures your model adheres to learned invariants—such as gradient norms, tensor shapes, and update magnitudes—effectively catching silent corruption before it wastes GPU hours.
7+
<div class="hero" markdown="1">
8+
<img alt="TrainCheck logo" width="180" src="assets/images/traincheck_logo.png">
9+
<h1>TrainCheck</h1>
10+
<p><strong>Invariant Checking & Observability for AI Training</strong></p>
11+
<p>Stop flying blind. Validate training dynamics, catch silent errors, and debug with confidence automatically.</p>
12+
13+
[Get Started](installation-guide.md){ .md-button .md-button--primary }
14+
[5-Min Tutorial](5-min-tutorial.md){ .md-button }
15+
[View on GitHub](https://github.com/OrderLab/traincheck){ .md-button }
16+
</div>
2317

24-
🚀 **Holistic Observability**
18+
<div class="feature-grid">
2519

26-
Traditional tools only show you *if* your model crashed. TrainCheck shows you *why* it's degrading, analyzing internal state dynamics that loss curves miss.
20+
<div class="feature-item">
21+
<h3>✅ Continuous Invariant Checking</h3>
22+
<p>TrainCheck validates the "physics" of your training process in real-time. It ensures your model adheres to learned invariants (such as gradient norms, tensor shapes, and update magnitudes) effectively catching silent corruption before it wastes GPU hours.</p>
23+
</div>
2724

28-
🧠 **Zero-Config Validation**
25+
<div class="feature-item">
26+
<h3>🚀 Holistic Observability</h3>
27+
<p>Traditional tools only show you <em>if</em> your model crashed. TrainCheck shows you <em>why</em> it's degrading, analyzing internal state dynamics that loss curves miss.</p>
28+
</div>
2929

30-
No manual tests required. TrainCheck automatically learns the invariants of your specific model from healthy runs and flags deviations instantly.
30+
<div class="feature-item">
31+
<h3>🧠 Zero-Config Validation</h3>
32+
<p>No manual tests required. TrainCheck automatically learns the invariants of your specific model from healthy runs and flags deviations instantly.</p>
33+
</div>
3134

32-
⚡ **Universal Compatibility**
35+
<div class="feature-item">
36+
<h3>⚡ Universal Compatibility</h3>
37+
<p>Drop-in support for PyTorch, Hugging Face, and industry-class workloads using DeepSpeed/Megatron and more.</p>
38+
</div>
3339

34-
Drop-in support for PyTorch, Hugging Face, and industry-class workloads using DeepSpeed/Megatron and more.
40+
</div>
3541

3642
---
3743

3844
### How It Works
3945

40-
1. **Instrument**: We wrap your training loop with lightweight probes—no code changes needed.
46+
1. **Instrument**: We wrap your training loop with lightweight probes. No code changes needed.
4147
2. **Learn**: We analyze correct runs to infer *invariants* (mathematical rules of healthy training).
4248
3. **Check**: We monitor new runs in real-time, verifying every step against learned invariants to catch silent logic bugs and hardware faults.
4349

‎docs/stylesheets/extra.css‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
:root {
2+
--md-primary-fg-color: #3f51b5; /* Indigo 500 */
3+
--md-primary-fg-color--light: #7986cb; /* Indigo 300 */
4+
--md-primary-fg-color--dark: #303f9f; /* Indigo 700 */
5+
}
6+
7+
/* Landing Page Hero Section */
8+
.md-content__inner.md-typeset {
9+
margin-top: 0;
10+
padding-top: 0;
11+
}
12+
13+
.hero {
14+
text-align: center;
15+
padding: 3rem 1rem;
16+
margin-bottom: 2rem;
17+
color: var(--md-default-fg-color);
18+
}
19+
20+
.hero h1 {
21+
font-size: 2.5rem;
22+
font-weight: 700;
23+
margin-bottom: 1rem;
24+
color: var(--md-primary-fg-color);
25+
line-height: 1.2;
26+
}
27+
28+
.hero p {
29+
font-size: 1.2rem;
30+
color: var(--md-default-fg-color--light);
31+
max-width: 800px;
32+
margin: 0 auto 2rem;
33+
line-height: 1.6;
34+
}
35+
36+
.hero .md-button {
37+
font-size: 1.1rem;
38+
padding: 0.8rem 1.5rem;
39+
margin: 0.5rem;
40+
border-radius: 4px; /* Slightly rounded */
41+
font-weight: 600;
42+
}
43+
44+
.hero .md-button--primary {
45+
background-color: var(--md-primary-fg-color);
46+
color: white;
47+
border: none;
48+
}
49+
50+
.hero .md-button--primary:hover {
51+
background-color: var(--md-primary-fg-color--dark);
52+
}
53+
54+
/* Feature Grid (Simple Flexbox for "Why TrainCheck") */
55+
.feature-grid {
56+
display: flex;
57+
flex-wrap: wrap;
58+
gap: 2rem;
59+
justify-content: center;
60+
margin-top: 2rem;
61+
}
62+
63+
.feature-item {
64+
flex: 1 1 300px; /* Min width 300px, grow/shrink */
65+
max-width: 400px;
66+
padding: 1.5rem;
67+
background: var(--md-default-bg-color); /* Match theme bg */
68+
border: 1px solid var(--md-default-fg-color--lighter);
69+
border-radius: 8px;
70+
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
71+
transition: transform 0.2s, box-shadow 0.2s;
72+
}
73+
74+
.feature-item:hover {
75+
transform: translateY(-5px);
76+
box-shadow: 0 8px 12px rgba(0,0,0,0.1);
77+
}
78+
79+
.feature-item h3 {
80+
margin-top: 0;
81+
color: var(--md-primary-fg-color);
82+
display: flex;
83+
align-items: center;
84+
gap: 0.5rem;
85+
}
86+
87+
/* Hide Sidebar on Home Page (controlled by .home-page class on body/main if possible,
88+
but mkdocs-material handles 'hide: navigation' frontmatter natively.
89+
This styling handles content width centering when sidebar is hidden) */
90+
91+
@media screen and (min-width: 76.25em) {
92+
.md-content {
93+
max-width: 100%; /* Use full width for hero */
94+
}
95+
}

‎mkdocs.yml‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,25 +7,36 @@ theme:
77
name: material
88
features:
99
- navigation.tabs
10-
- navigation.indexes
10+
- navigation.sections
11+
- navigation.instant
12+
- navigation.tracking
13+
- navigation.expand
14+
- navigation.top
15+
- toc.integrate
16+
- search.suggest
17+
- search.highlight
18+
- content.tabs.link
1119
- content.code.copy
1220
palette:
1321
# Palette toggle for light mode
1422
- scheme: default
15-
primary: teal
16-
accent: purple
23+
primary: indigo
24+
accent: indigo
1725
toggle:
1826
icon: material/brightness-7
1927
name: Switch to dark mode
2028

2129
# Palette toggle for dark mode
2230
- scheme: slate
23-
primary: teal
24-
accent: lime
31+
primary: indigo
32+
accent: indigo
2533
toggle:
2634
icon: material/brightness-4
2735
name: Switch to light mode
2836

37+
extra_css:
38+
- stylesheets/extra.css
39+
2940
nav:
3041
- Home: index.md
3142
- Paper: https://www.usenix.org/conference/osdi25/presentation/jiang
@@ -38,6 +49,10 @@ nav:
3849
- "Performance Benchmarks": benchmarks.md
3950

4051
markdown_extensions:
52+
- attr_list
53+
- admonition
54+
- md_in_html
55+
- pymdownx.details
4156
- pymdownx.highlight:
4257
anchor_linenums: true
4358
- pymdownx.inlinehilite

0 commit comments

Comments
 (0)