understanding-prime-env 0.1.6 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/skills/understand-prime-env/SKILL.md +213 -216
package/package.json
CHANGED
|
@@ -1,328 +1,325 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: understand-prime-env
|
|
3
|
-
description: Generate a rich, self-contained HTML report that fully explains a Prime Intellect verifiers environment. Use this skill any time the user asks to understand, explain, document, visualize, or explore a verifiers environment — even if they just say "what does this environment do?", "explain this env", "give me an overview", or "generate an HTML for this environment". The skill reads the Python source files in the current directory, extracts the
|
|
3
|
+
description: Generate a rich, self-contained HTML report that fully explains a Prime Intellect verifiers environment. Use this skill any time the user asks to understand, explain, document, visualize, or explore a verifiers environment — even if they just say "what does this environment do?", "explain this env", "give me an overview", or "generate an HTML for this environment". The skill reads the Python source files in the current directory, extracts the dataset, reward functions, and rollout logic, and writes a visually stunning infographic-style HTML file to the environment folder.
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
# Understand Prime Environment
|
|
7
7
|
|
|
8
8
|
## Goal
|
|
9
9
|
|
|
10
|
-
Produce a single self-contained
|
|
10
|
+
Produce a single self-contained `environment_overview.html`. An ML researcher opens it and **gets the full picture in under 10 seconds** — no reading required. The design is infographic-first: diagrams, flow charts, and big numbers dominate. Text exists only to label what the visuals show. Tapping any section slides open a detail drawer with the full technical depth.
|
|
11
11
|
|
|
12
|
-
The
|
|
12
|
+
The experience has two layers:
|
|
13
|
+
1. **Scan layer** — the full page, visible immediately. Every section is a visual unit: a flow diagram, a metric cluster, a reward breakdown chart. Labels are short. Numbers are big. The researcher understands the environment without reading a word.
|
|
14
|
+
2. **Drill layer** — tap any section → a smooth panel slides in from the right with complete technical detail: exact field names, regex patterns, formula, full example row.
|
|
13
15
|
|
|
14
16
|
---
|
|
15
17
|
|
|
16
18
|
## Step 1 — Read the source
|
|
17
19
|
|
|
18
|
-
Read **every `.py` file** in the current directory. Also read `pyproject.toml` and `README.md` if
|
|
20
|
+
Read **every `.py` file** in the current directory. Also read `pyproject.toml` and `README.md` if present. Do not skip helper files — reward logic is often split across modules (`*_checks.py`, `*_prompts.py`, etc.). Read everything before writing a single line of HTML.
|
|
19
21
|
|
|
20
|
-
Extract
|
|
22
|
+
Extract the following. Be precise — do not invent values:
|
|
21
23
|
|
|
22
|
-
### A
|
|
23
|
-
-
|
|
24
|
-
-
|
|
25
|
-
-
|
|
24
|
+
### A — Identity
|
|
25
|
+
- Environment name
|
|
26
|
+
- One-line task description (what skill does this train?)
|
|
27
|
+
- GitHub URL only if found verbatim in source or README — otherwise omit entirely
|
|
28
|
+
- 3–5 key stats: dataset size, number of rewards, number of turns, task type, etc.
|
|
26
29
|
|
|
27
|
-
### B
|
|
28
|
-
-
|
|
29
|
-
-
|
|
30
|
-
-
|
|
30
|
+
### B — Dataset
|
|
31
|
+
- Source: HuggingFace dataset + split, hardcoded list, or generator — one line
|
|
32
|
+
- Every field: name, type, purpose
|
|
33
|
+
- One complete real example row — all fields, real values, nothing truncated
|
|
31
34
|
|
|
32
|
-
### C
|
|
33
|
-
|
|
34
|
-
-
|
|
35
|
-
- What it is actually checking — not a summary, the real logic: what string patterns, what conditions, what regex, what comparisons
|
|
36
|
-
- Exactly what makes it return **0** (failure) vs **1** (full score) — and any partial scores in between
|
|
37
|
-
- Any thresholds, edge cases, or gotchas a model writer would need to know
|
|
38
|
-
- If a judge LLM is used: the model name, what the judge prompt asks, and what it returns
|
|
35
|
+
### C — Rewards
|
|
36
|
+
- Every reward function: name, what it checks, what earns 0 vs 1 (and any partials), any thresholds or regex
|
|
37
|
+
- If rewards combine: the exact formula
|
|
39
38
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
3. If there are tools or a sandbox: what tools, how they'd be called
|
|
47
|
-
4. How each reward function gets called on the model output — in what order, with what inputs
|
|
48
|
-
5. How the final score is computed from the individual reward outputs
|
|
49
|
-
6. What a **perfect response** looks like vs a **zero-score response**
|
|
50
|
-
|
|
51
|
-
Be specific. Trace through the actual code logic. This is theoretical (not executed) but must be grounded in what the code actually does.
|
|
39
|
+
### D — Rollout
|
|
40
|
+
- How raw row → prompt (exact template if present)
|
|
41
|
+
- What the model is expected to output
|
|
42
|
+
- How each reward fires on a sample output
|
|
43
|
+
- How final score is computed
|
|
44
|
+
- What a perfect response looks like vs a zero-score response
|
|
52
45
|
|
|
53
46
|
---
|
|
54
47
|
|
|
55
48
|
## Step 2 — Generate the HTML
|
|
56
49
|
|
|
57
|
-
Write a single **self-contained** HTML file
|
|
50
|
+
Write a single **self-contained** HTML file. Zero external dependencies — all CSS and JS inline. No framework. No CDN.
|
|
58
51
|
|
|
59
52
|
---
|
|
60
53
|
|
|
61
|
-
###
|
|
54
|
+
### Layout
|
|
62
55
|
|
|
63
|
-
|
|
56
|
+
Full-page dark canvas. A single centered column, `max-width: 760px`, generous vertical padding. No sidebar. No nav. No tabs.
|
|
57
|
+
|
|
58
|
+
The page has exactly **four visual sections**, stacked vertically, each separated by `60px` of breathing room:
|
|
64
59
|
|
|
65
|
-
**Color palette:**
|
|
66
60
|
```
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
Card 1 accent — purple: #a855f7 glow: rgba(168,85,247,0.25)
|
|
72
|
-
Card 2 accent — cyan: #22d3ee glow: rgba(34,211,238,0.25)
|
|
73
|
-
Card 3 accent — amber: #f59e0b glow: rgba(245,158,11,0.25)
|
|
74
|
-
Card 4 accent — rose: #f43f5e glow: rgba(244,63,94,0.25)
|
|
75
|
-
|
|
76
|
-
Text primary: #f1f5f9
|
|
77
|
-
Text secondary: #94a3b8
|
|
78
|
-
Text muted: #475569
|
|
79
|
-
Code text: #e2e8f0
|
|
61
|
+
[HEADER] — name, one-line description, stat chips, GitHub pill
|
|
62
|
+
[DATASET] — schema diagram + tap to see full example row
|
|
63
|
+
[REWARDS] — horizontal bar chart of reward functions + tap for detail
|
|
64
|
+
[ROLLOUT] — horizontal flow diagram → tap any node for step detail
|
|
80
65
|
```
|
|
81
66
|
|
|
82
|
-
**
|
|
67
|
+
Each section is a self-contained card. Each card has a **tap target** — the whole card or a labeled "See details →" affordance — that opens a detail drawer.
|
|
68
|
+
|
|
69
|
+
---
|
|
70
|
+
|
|
71
|
+
### Visual Design
|
|
72
|
+
|
|
73
|
+
**Background:**
|
|
83
74
|
```css
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
background:
|
|
87
|
-
|
|
75
|
+
body {
|
|
76
|
+
background: #080b12;
|
|
77
|
+
background-image:
|
|
78
|
+
radial-gradient(ellipse at 15% 0%, rgba(99,102,241,0.07) 0%, transparent 45%),
|
|
79
|
+
radial-gradient(ellipse at 85% 100%, rgba(20,184,166,0.05) 0%, transparent 45%);
|
|
80
|
+
min-height: 100vh;
|
|
81
|
+
font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace;
|
|
82
|
+
color: #e2e8f0;
|
|
88
83
|
}
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
background:
|
|
95
|
-
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
**Card base:**
|
|
87
|
+
```css
|
|
88
|
+
.section-card {
|
|
89
|
+
background: #0d1117;
|
|
90
|
+
border: 1px solid rgba(255,255,255,0.07);
|
|
91
|
+
border-radius: 16px;
|
|
92
|
+
padding: 28px 32px;
|
|
93
|
+
cursor: pointer;
|
|
94
|
+
transition: border-color 0.2s ease;
|
|
96
95
|
}
|
|
96
|
+
.section-card:hover { border-color: rgba(255,255,255,0.15); }
|
|
97
97
|
```
|
|
98
98
|
|
|
99
|
-
|
|
99
|
+
**Section accent colors** — used for borders, labels, highlights, chart fills:
|
|
100
|
+
```
|
|
101
|
+
Header / Identity: #6366f1 (indigo)
|
|
102
|
+
Dataset: #14b8a6 (teal)
|
|
103
|
+
Rewards: #f59e0b (amber)
|
|
104
|
+
Rollout: #f43f5e (rose)
|
|
105
|
+
```
|
|
100
106
|
|
|
101
107
|
**Typography:**
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
108
|
+
- Section label: `0.65rem`, accent color, `letter-spacing: 0.12em`, uppercase, `font-weight: 500`
|
|
109
|
+
- Section title: `1.1rem`, white, `font-weight: 700`
|
|
110
|
+
- Body / labels: `0.8rem`, `#64748b`
|
|
111
|
+
- Big numbers / diagram nodes: `1.6–2.4rem`, white or accent, `font-weight: 800`
|
|
106
112
|
|
|
107
113
|
---
|
|
108
114
|
|
|
109
|
-
###
|
|
115
|
+
### Section 1 — Header
|
|
110
116
|
|
|
111
117
|
```
|
|
112
|
-
|
|
113
|
-
│
|
|
114
|
-
|
|
115
|
-
│
|
|
116
|
-
│
|
|
117
|
-
│
|
|
118
|
-
|
|
119
|
-
│ FOOTER: generated timestamp · PI branding │
|
|
120
|
-
└─────────────────────────────────────────────────────────────┘
|
|
118
|
+
┌─────────────────────────────────────────────────────┐
|
|
119
|
+
│ PRIME INTELLECT ENVIRONMENT │
|
|
120
|
+
│ EnvironmentName [↗ GitHub] │
|
|
121
|
+
│ One-line task description │
|
|
122
|
+
│ ───────────────────────────────────────────────── │
|
|
123
|
+
│ [42k rows] [3 rewards] [2 turns] [Math QA] │
|
|
124
|
+
└─────────────────────────────────────────────────────┘
|
|
121
125
|
```
|
|
122
126
|
|
|
123
|
-
|
|
127
|
+
- Env name: `2rem`, `font-weight: 800`, white. Monospace.
|
|
128
|
+
- Description: `0.85rem`, `#94a3b8`, `line-height: 1.5`. Below the name.
|
|
129
|
+
- GitHub pill: only if URL was found. `background: rgba(99,102,241,0.1)`, `border: 1px solid rgba(99,102,241,0.3)`, `color: #a5b4fc`, `border-radius: 99px`, `padding: 4px 12px`, `font-size: 0.73rem`. Hover: border and color shift to solid indigo.
|
|
130
|
+
- Stat chips: row of 3–5 pills. `background: rgba(99,102,241,0.08)`, `border: 1px solid rgba(99,102,241,0.18)`, `color: #a5b4fc`, `border-radius: 6px`, `padding: 5px 12px`, `font-size: 0.75rem`, `font-weight: 600`. Label on top in `0.6rem` muted caps, value below in `0.85rem` white.
|
|
124
131
|
|
|
125
|
-
|
|
132
|
+
No drawer for this section. Static.
|
|
126
133
|
|
|
127
134
|
---
|
|
128
135
|
|
|
129
|
-
###
|
|
136
|
+
### Section 2 — Dataset (tappable)
|
|
130
137
|
|
|
131
|
-
|
|
132
|
-
- Large environment name: `font-size: clamp(2rem, 5vw, 4rem)`, `font-weight: 800`, white with a subtle purple text-shadow glow: `text-shadow: 0 0 40px rgba(168,85,247,0.4)`
|
|
133
|
-
- Below: one sentence tagline in `#94a3b8`
|
|
134
|
-
- Top-right: a `⬡ PRIME INTELLECT` badge — `background: rgba(168,85,247,0.1)`, `border: 1px solid rgba(168,85,247,0.3)`, `color: #a855f7`, `border-radius: 6px`, `padding: 4px 12px`, `font-size: 0.7rem`, `letter-spacing: 0.12em`
|
|
135
|
-
- Background: `radial-gradient(ellipse at 30% 0%, rgba(168,85,247,0.12) 0%, transparent 60%), radial-gradient(ellipse at 80% 100%, rgba(34,211,238,0.06) 0%, transparent 50%)`
|
|
136
|
-
- A thin `border-bottom: 1px solid #1e293b` separates the hero from the cards
|
|
138
|
+
**Scan face** — a visual schema diagram:
|
|
137
139
|
|
|
138
|
-
|
|
140
|
+
```
|
|
141
|
+
SOURCE ──────────────────────────────────────────────
|
|
142
|
+
HuggingFace · openai/gsm8k · train split
|
|
139
143
|
|
|
140
|
-
|
|
144
|
+
FIELDS ──────────────────────────────────────────────
|
|
145
|
+
[question]──str──────────[answer]──str
|
|
146
|
+
[level]──int
|
|
147
|
+
[subject]──str
|
|
148
|
+
```
|
|
141
149
|
|
|
142
|
-
|
|
150
|
+
Render fields as connected pills in a small horizontal/vertical node graph. Each pill: `background: rgba(20,184,166,0.08)`, `border: 1px solid rgba(20,184,166,0.2)`, `border-radius: 6px`, `padding: 4px 10px`. Field name in teal monospace `0.75rem`, type in muted `0.65rem`. Connect them with SVG lines (stroke `rgba(20,184,166,0.2)`, stroke-width 1).
|
|
143
151
|
|
|
144
|
-
|
|
152
|
+
At the bottom of the card, a muted "See example row →" in `0.72rem` teal.
|
|
145
153
|
|
|
146
|
-
**
|
|
147
|
-
|
|
148
|
-
-
|
|
149
|
-
-
|
|
154
|
+
**Detail drawer content** (slides in on tap — see Drawer spec below):
|
|
155
|
+
|
|
156
|
+
- `EXAMPLE ROW` label
|
|
157
|
+
- Every field displayed as: field name (teal monospace) + value (white). Long text in a soft box — `background: rgba(255,255,255,0.03)`, `border-radius: 6px`, `padding: 8px 12px`. Nothing truncated.
|
|
158
|
+
- `FIELD GUIDE` label, then each field one per line: name · type · purpose sentence.
|
|
150
159
|
|
|
151
160
|
---
|
|
152
161
|
|
|
153
|
-
###
|
|
162
|
+
### Section 3 — Rewards (tappable)
|
|
154
163
|
|
|
155
|
-
**
|
|
164
|
+
**Scan face** — a horizontal stacked bar chart:
|
|
156
165
|
|
|
157
|
-
|
|
166
|
+
Each reward function gets one horizontal bar. The bar represents its contribution to the final score (equal weight if not specified). Left side: reward name in amber monospace `0.8rem`. Right side: bar — `height: 8px`, `border-radius: 4px`, `background: linear-gradient(90deg, #f59e0b, #fbbf24)`. Below the bar: one-phrase description in `0.65rem` muted text.
|
|
158
167
|
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
or
|
|
164
|
-
```
|
|
165
|
-
Hardcoded · PROMPTS list · 64 examples
|
|
166
|
-
```
|
|
167
|
-
Style: `background: rgba(34,211,238,0.05)`, `border-left: 3px solid #22d3ee`, `padding: 8px 14px`, `border-radius: 0 6px 6px 0`, monospace, cyan text.
|
|
168
|
+
If there's a final score formula, show it below the bars in a formula chip:
|
|
169
|
+
`background: rgba(245,158,11,0.08)`, `border: 1px solid rgba(245,158,11,0.2)`, `border-radius: 8px`, `padding: 8px 14px`, amber monospace `0.82rem`.
|
|
170
|
+
|
|
171
|
+
At the bottom: "See reward logic →" in `0.72rem` amber.
|
|
168
172
|
|
|
169
|
-
|
|
173
|
+
**Detail drawer content:**
|
|
170
174
|
|
|
171
|
-
|
|
172
|
-
|
|
175
|
+
For each reward, a block:
|
|
176
|
+
```
|
|
177
|
+
format_reward [float 0–1]
|
|
178
|
+
─────────────────────────────────────────────────
|
|
179
|
+
Checks response contains <answer>…</answer>
|
|
173
180
|
|
|
174
|
-
|
|
181
|
+
✗ 0 Tags absent, or inner content non-numeric
|
|
182
|
+
✓ 1 Tags present, inner content is valid integer
|
|
175
183
|
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
-
|
|
184
|
+
Pattern: <answer>(\d+)</answer>
|
|
185
|
+
```
|
|
186
|
+
- Name: amber monospace, `font-weight: 700`, `0.88rem`
|
|
187
|
+
- `[float 0–1]` badge: `0.65rem`, `#6b7280`, right-aligned via flex
|
|
188
|
+
- Description: `0.8rem`, `#94a3b8`
|
|
189
|
+
- ✗ / ✓ lines: `0.78rem`. ✗ in `#f87171`, ✓ in `#4ade80`, text in `#94a3b8`
|
|
190
|
+
- Pattern/threshold: monospace, `0.75rem`, `#64748b`
|
|
191
|
+
- Block: `background: rgba(245,158,11,0.04)`, `border: 1px solid rgba(245,158,11,0.1)`, `border-radius: 10px`, `padding: 12px 14px`, `margin-bottom: 10px`
|
|
179
192
|
|
|
180
193
|
---
|
|
181
194
|
|
|
182
|
-
###
|
|
195
|
+
### Section 4 — Rollout (tappable)
|
|
183
196
|
|
|
184
|
-
**
|
|
185
|
-
|
|
186
|
-
**Body:** For each reward function, a reward block:
|
|
197
|
+
**Scan face** — a horizontal pipeline flow diagram:
|
|
187
198
|
|
|
188
199
|
```
|
|
189
|
-
|
|
190
|
-
│ format_reward [float] │
|
|
191
|
-
│ ───────────────────────────────────────────── │
|
|
192
|
-
│ CHECKS │
|
|
193
|
-
│ Checks that response contains <answer>...</ │
|
|
194
|
-
│ answer> tags and inner content is numeric │
|
|
195
|
-
│ │
|
|
196
|
-
│ SCORES 0 if tags missing or content non-num │
|
|
197
|
-
│ SCORES 1 if tags present and content is int │
|
|
198
|
-
└─────────────────────────────────────────────────┘
|
|
200
|
+
[DATA ROW] ──▶ [PROMPT] ──▶ [MODEL] ──▶ [REWARDS] ──▶ [SCORE]
|
|
199
201
|
```
|
|
200
202
|
|
|
201
|
-
|
|
202
|
-
- `[float]` / `[int]` / `[bool]` type badge: small, muted, right-aligned
|
|
203
|
-
- `CHECKS` / `SCORES 0` / `SCORES 1` labels: `0.65rem`, letter-spacing `0.1em`, amber at 60% opacity
|
|
204
|
-
- Actual descriptions: white text, `0.83rem`, leading `1.5`
|
|
205
|
-
- Block background: `rgba(245,158,11,0.04)`, `border: 1px solid rgba(245,158,11,0.15)`, `border-radius: 10px`, `padding: 14px 16px`
|
|
206
|
-
- Blocks separated by `12px` gap
|
|
203
|
+
Each node: rounded rect, `background: rgba(244,63,94,0.08)`, `border: 1px solid rgba(244,63,94,0.2)`, `border-radius: 10px`, `padding: 10px 16px`. Node label: rose monospace `0.8rem` bold. Below each node: 1 short phrase (≤6 words) in `0.65rem` muted. Arrows: SVG `▶` in `rgba(244,63,94,0.4)`.
|
|
207
204
|
|
|
208
|
-
|
|
209
|
-
```
|
|
210
|
-
background: rgba(245,158,11,0.08)
|
|
211
|
-
border: 1px solid rgba(245,158,11,0.3)
|
|
212
|
-
border-radius: 8px
|
|
213
|
-
padding: 14px 18px
|
|
214
|
-
font-family: monospace
|
|
215
|
-
color: #fcd34d
|
|
216
|
-
font-size: 0.9rem
|
|
217
|
-
```
|
|
205
|
+
On narrow viewports, collapse to vertical with connecting arrows below each node.
|
|
218
206
|
|
|
219
|
-
|
|
207
|
+
At the bottom: "Trace an example →" in `0.72rem` rose.
|
|
220
208
|
|
|
221
|
-
|
|
209
|
+
**Detail drawer content:**
|
|
222
210
|
|
|
223
|
-
|
|
211
|
+
5 numbered steps. Each:
|
|
212
|
+
- Step number: `2rem`, `font-weight: 800`, rose, `opacity: 0.2`
|
|
213
|
+
- Step title: `0.9rem`, white, `font-weight: 700`
|
|
214
|
+
- Description: `0.82rem`, `#94a3b8`, `line-height: 1.6`
|
|
215
|
+
- Left border: `border-left: 2px solid rgba(244,63,94,0.15)`, `padding-left: 16px`, `margin-left: 10px` (omit on last step)
|
|
216
|
+
- `margin-bottom: 20px`
|
|
224
217
|
|
|
225
|
-
|
|
218
|
+
Steps are always:
|
|
219
|
+
1. **Data → Prompt** — how the raw row becomes the exact prompt the model sees (include template if found)
|
|
220
|
+
2. **Model Response** — what the model is expected to produce (format, tags, structure)
|
|
221
|
+
3. **Reward Evaluation** — how each reward fires on a sample output; show scores for a real example
|
|
222
|
+
4. **Score Computation** — the exact formula and resulting score
|
|
223
|
+
5. **Perfect vs Zero** — what earns a full score vs what earns zero; concrete contrasting examples
|
|
226
224
|
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
225
|
+
---
|
|
226
|
+
|
|
227
|
+
### Detail Drawer
|
|
228
|
+
|
|
229
|
+
A panel that slides in from the **right edge** of the viewport, overlaying the page.
|
|
230
|
+
|
|
231
|
+
```css
|
|
232
|
+
.drawer {
|
|
233
|
+
position: fixed;
|
|
234
|
+
top: 0; right: 0;
|
|
235
|
+
width: min(480px, 95vw);
|
|
236
|
+
height: 100vh;
|
|
237
|
+
background: #0d1117;
|
|
238
|
+
border-left: 1px solid rgba(255,255,255,0.1);
|
|
239
|
+
padding: 32px 28px;
|
|
240
|
+
overflow-y: auto;
|
|
241
|
+
transform: translateX(100%);
|
|
242
|
+
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
|
243
|
+
z-index: 100;
|
|
244
|
+
}
|
|
245
|
+
.drawer.open { transform: translateX(0); }
|
|
234
246
|
```
|
|
235
247
|
|
|
236
|
-
|
|
237
|
-
- Step title: `font-weight: 700`, white, `font-size: 0.9rem`
|
|
238
|
-
- A `1px solid rgba(244,63,94,0.15)` rule below the title
|
|
239
|
-
- Description: `0.83rem`, `#94a3b8`, `line-height: 1.6`
|
|
240
|
-
- Between steps: a rose-tinted connector line on the left side (`border-left: 2px solid rgba(244,63,94,0.15)`, `margin-left: 10px`, `padding-left: 20px`)
|
|
248
|
+
**Backdrop:** `position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99` — fades in with `opacity 0.3s`. Clicking it closes the drawer.
|
|
241
249
|
|
|
242
|
-
|
|
243
|
-
1. **Data → Prompt** — how the raw row becomes the model's input
|
|
244
|
-
2. **Model response** — what the model is expected to produce (format, structure)
|
|
245
|
-
3. **Reward evaluation** — how each reward function is called and what it receives
|
|
246
|
-
4. **Score computation** — how the final score is derived
|
|
247
|
-
5. **Perfect vs zero** — what a max-score response looks like vs a zero-score response (concrete examples if possible)
|
|
250
|
+
**Close button:** `×` in the top-right of the drawer. `font-size: 1.1rem`, `color: #475569`, hover rose. Keyboard: `Escape` closes.
|
|
248
251
|
|
|
249
|
-
|
|
252
|
+
**Drawer header:**
|
|
253
|
+
- Section label (e.g., `DATASET DETAIL`) in accent color, `0.65rem` caps
|
|
254
|
+
- Section name in white `1.1rem` bold
|
|
255
|
+
- Thin `border-bottom: 1px solid rgba(255,255,255,0.07)`, `padding-bottom: 16px`, `margin-bottom: 20px`
|
|
256
|
+
|
|
257
|
+
Scroll within the drawer. The rest of the page does not scroll while drawer is open (`body { overflow: hidden }`).
|
|
250
258
|
|
|
251
|
-
|
|
259
|
+
---
|
|
252
260
|
|
|
253
|
-
|
|
261
|
+
### Motion
|
|
254
262
|
|
|
255
263
|
```css
|
|
256
|
-
@keyframes
|
|
257
|
-
from { opacity: 0; transform: translateY(
|
|
264
|
+
@keyframes fadeSlideIn {
|
|
265
|
+
from { opacity: 0; transform: translateY(12px); }
|
|
258
266
|
to { opacity: 1; transform: translateY(0); }
|
|
259
267
|
}
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
268
|
+
.section-card {
|
|
269
|
+
animation: fadeSlideIn 0.4s ease both;
|
|
263
270
|
}
|
|
271
|
+
/* Stagger via animation-delay: 0s, 0.08s, 0.16s, 0.24s on the four sections */
|
|
264
272
|
```
|
|
265
273
|
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
### JavaScript (inline, vanilla)
|
|
271
|
-
|
|
272
|
-
```js
|
|
273
|
-
// Card hover glow
|
|
274
|
-
document.querySelectorAll('.card').forEach(card => {
|
|
275
|
-
card.addEventListener('mousemove', (e) => {
|
|
276
|
-
const rect = card.getBoundingClientRect();
|
|
277
|
-
const x = ((e.clientX - rect.left) / rect.width) * 100;
|
|
278
|
-
const y = ((e.clientY - rect.top) / rect.height) * 100;
|
|
279
|
-
card.style.setProperty('--mouse-x', x + '%');
|
|
280
|
-
card.style.setProperty('--mouse-y', y + '%');
|
|
281
|
-
});
|
|
282
|
-
});
|
|
274
|
+
Drawer slide uses CSS transition only (no keyframes). Section cards lift slightly on hover:
|
|
275
|
+
```css
|
|
276
|
+
.section-card:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
|
|
283
277
|
```
|
|
284
278
|
|
|
285
|
-
|
|
279
|
+
Reduced motion guard:
|
|
286
280
|
```css
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
position: absolute;
|
|
290
|
-
inset: 0;
|
|
291
|
-
border-radius: 16px;
|
|
292
|
-
background: radial-gradient(
|
|
293
|
-
circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
|
|
294
|
-
rgba(255,255,255,0.03) 0%,
|
|
295
|
-
transparent 60%
|
|
296
|
-
);
|
|
297
|
-
pointer-events: none;
|
|
281
|
+
@media (prefers-reduced-motion: reduce) {
|
|
282
|
+
*, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
|
|
298
283
|
}
|
|
299
284
|
```
|
|
300
285
|
|
|
301
286
|
---
|
|
302
287
|
|
|
303
|
-
###
|
|
288
|
+
### Page Chrome
|
|
289
|
+
|
|
290
|
+
**Top of page** — above the first card:
|
|
291
|
+
```
|
|
292
|
+
PRIME INTELLECT · ENVIRONMENT OVERVIEW [environment-name]
|
|
293
|
+
```
|
|
294
|
+
`font-size: 0.68rem`, `color: #1e293b`, `letter-spacing: 0.1em`, `margin-bottom: 40px`. Nothing else at the top.
|
|
304
295
|
|
|
296
|
+
**Bottom of page** — below the last card:
|
|
305
297
|
```
|
|
306
|
-
Generated by Claude
|
|
298
|
+
Generated by Claude · <timestamp>
|
|
307
299
|
```
|
|
300
|
+
`font-size: 0.65rem`, `color: #1e293b`, `margin-top: 48px`, centered.
|
|
308
301
|
|
|
309
|
-
|
|
302
|
+
Nothing else. No nav, no header, no sidebar.
|
|
310
303
|
|
|
311
304
|
---
|
|
312
305
|
|
|
313
306
|
## Step 3 — Confirm and report
|
|
314
307
|
|
|
315
|
-
After writing the file,
|
|
316
|
-
-
|
|
317
|
-
-
|
|
308
|
+
After writing the file, share the full path and say:
|
|
309
|
+
- What the environment trains (one sentence)
|
|
310
|
+
- How it scores (one sentence)
|
|
318
311
|
|
|
319
|
-
|
|
312
|
+
---
|
|
320
313
|
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
- Do not
|
|
324
|
-
- Do not truncate the example row
|
|
325
|
-
- Do not
|
|
326
|
-
- Do not
|
|
327
|
-
- Do not
|
|
328
|
-
-
|
|
314
|
+
## Anti-patterns — never do these
|
|
315
|
+
|
|
316
|
+
- **Do not write walls of text on the scan face.** Every section face is a diagram or a chart. Text labels only.
|
|
317
|
+
- **Do not truncate the example row.** Full values, all fields, in the drawer.
|
|
318
|
+
- **Do not invent a GitHub URL.** Only include it if found verbatim in source.
|
|
319
|
+
- **Do not hallucinate field names, reward weights, or dataset content.** Extract exactly.
|
|
320
|
+
- **Do not skip helper modules.** Core reward logic is often there.
|
|
321
|
+
- **Do not use a light theme.**
|
|
322
|
+
- **Do not use Inter, Roboto, or any Google Font.**
|
|
323
|
+
- **Do not add tabs, nav, or scroll-within-cards.** The drawer is the only overlay.
|
|
324
|
+
- **Do not add more than four sections.** Header + Dataset + Rewards + Rollout. That's it.
|
|
325
|
+
- **Do not use a card-stack / deck reveal mechanic.** This is a scrollable single-column page.
|