Run Detail
completedglm-5.2Recorded for these videos
17:31Testing Gemini 3.8 Flash on Real Coding Challenges (vs. other models)
Sep 2, 2026 · YouTube
19:45Fable 5.1 writes an animated novel using Ren'Py... did it do better than Sol Pro 5.6?
Sep 1, 2026 · YouTube
14:09Testing IBM Granite-4.2-8B! Can it name 100 women?
Aug 31, 2026 · YouTube
17:37Tencent Hy4 Preview Tested: Is It Really Better Than Kimi K3 and GLM 5.3?
Aug 28, 2026 · YouTube
23:58Qwen 3.8 Flash Tested: UI, Coding, Physics & more - compared to Opus 5, Sol Pro, Grok
Aug 27, 2026 · YouTube
14:50Stealth Ox Alpha: a new GLM model! Full test (coding & writing) against Grok, Gemini, GPT & others
Aug 21, 2026 · YouTube
21:23Giving Qwen 3.8 27B another chance (+ GLM 5.2). Testing against GPT, Gemini, Grok etc.
Aug 18, 2026 · YouTube
51:00AI Coding Showdown: Grok 4.6, Gemini 3.7, Terra-Pro, Qwen3.8 2.4TB, Muse Glimmer & more
Aug 15, 2026 · YouTube
27:51Testing Gemini 3.7 Flash: Translation, Vision, and Coding Challenges
Aug 14, 2026 · YouTube
Provider
openrouter
Challenge Version
v2.0
Turns
1
Duration
468.8s
Total Tokens
41,266
Input Tokens
1,266
Output Tokens
40,000
Reasoning Tokens
36,030
Reasoning Effort
default
Cached Input Tokens
1,088
Est. Cost
$0.0406
Started
8/16/2026, 3:39:37 PM
OR Provider
Baidu
Finish Reason
length
Generation ID
gen-1786894777-eblLIt4vQpQcJza7sj4G
Turns (1)
Turn #1
1,266 in40,000 out36,030 reasoning1,088 cached41,266 total468.8s
user
You illustrate for a museum of arms and armour. Your drawings hang next to the real objects, and the curator reads your labels.
Build me the armoury slider: one HTML page, one figure, three eras.
The exhibit
A single standing figure. Below it, a slider. Drag the slider and the same figure is re-equipped for the era it lands on.
That is the exhibit. It lives or dies on the drawing, so draw properly.
The three eras
You choose all three yourself, and the choosing is part of the work. Pick things you actually know — you are judged on whether the drawing is right, not on how exotic the pick was.
1. Anywhere in the last five hundred years. Any year from 1526 onwards, anywhere on earth. Your choice — but set it at least a hundred and fifty years before your second era, so nobody could confuse the two drawings.
2. About a hundred years ago. A specific year between 1910 and 1945, and a specific place. Yours to pick.
3. Sometime between 2040 and 2140. Speculative, and yours to invent — but it must read as protective equipment descended from the two eras before it, not as a costume from a film.
Name the year and the place for all three. "Seventeenth-century Europe" is not an era; 1631, Saxony is.
The hard requirements
1. One body. It is the same person all three times. Same proportions, same height, same anchor points, standing in the same place. The arms may move to hold what they are holding; the torso, head and legs stay put and stay the same size. Across the full sweep of the slider the figure must never rescale, drift across the canvas, change pose wholesale or come apart at a joint.
This is an architectural requirement, not a styling note. Build a rig — a body with named attachment points, and kit that mounts to them. Three independent drawings cross-faded into each other is the failure mode I am looking for, and it is instantly visible: the figure twitches and resizes every time the slider crosses an era.
2. Continuity and reversibility. Dragging must never make the figure jump. Between two eras there is a transition, not a cut. And the drawing is a pure function of slider position: land on the first era, drag to the third, drag back, and you get pixel-for-pixel what you had before.
Your three choices are made once, by you, while you write the file. Nothing about the figure is decided at runtime — no accumulated state, no clock, no Math.random anywhere.
3. The label. Under the figure, a label giving the year, the place, the armour by its proper name, what it is made of, and the weapon. Between eras, the label says what it is between.
The label must describe the figure actually drawn above it. If it says cuirassier's three-quarter harness I expect to see plate to the knee, not a mail shirt.
4. The weapon is dated as tightly as the armour. It is not a prop. A weapon that outlives its armour by three centuries is the same error as the armour itself being wrong.
5. No horned Viking helmets. They never existed — nineteenth-century opera costume, not archaeology. Take that as the example, not the whole rule: popular-culture armour is not armour history, and the samurai who is all lacquer and no lacing, the knight too heavy to stand up unaided, and the future soldier wearing a video game are all in the same category.
House rules
- One file. Everything inline — no CDN, no external stylesheet, font, script or image.
data:URIs are fine. - Inline SVG for the figure. Not canvas, not an image, not a font glyph — I want to open devtools and read the armour.
- No libraries. No 3D engine.
- No network at runtime.
- No
localStorage,sessionStorage, cookies orindexedDB. It runs in a sandboxed frame where touching them throws. - No build step, no server. Opened as a local file, it works.
- Return the file as exactly one fenced
htmlblock.
Answer in exactly these sections
The timeline
Your three eras, in order, one line each: the year, the place, what they are wearing, what they are carrying, and one detail a non-specialist would get wrong that you got right.
The rig
One paragraph. Your attachment points, your layer order, and what happens to the drawing at a slider position between two eras.
The file
The single fenced html block.
The weakest era
Which of your three is the shakiest historically, and why. Name the anachronism you were most tempted by. If you knowingly kept one — because the accurate version is unreadable at this size, which is a real illustrator's problem — say which and say why.
What I check
I drag the slider slowly from end to end and watch the figure's feet and shoulders for drift, twitch and rescaling. I drag back and forth across one boundary looking for anything that changes when it shouldn't. I read every label against its drawing. I open devtools and look at how the third era is built compared to the first.
That last one matters. Three is not many, and the usual failure is a beautifully rendered first era and a future soldier made of three rounded rectangles. The last era gets the same care as the first. I will drag straight to the end before I do anything else.
If you ran out of room and know it, say so in "The weakest era". A stated weakness is a finding. Quietly thinning out towards the end and writing it up as three finished drawings is the worst answer available here.
assistant
The timeline
1632 · Saxony (Imist army, Thirty Years' War). A cuirassier's three-quarter harness — blackened munition steel over a buff-leather coat, tassets to the knee, articulated vambraces, lobster-tailed burgonet, leather gauntlets with steel cuffs. Carrying a wheellock cavalry pistol (Pferderöhre). Detail got right: the steel is chemically blackened, not polished — munition armour was a factory product, and the gauntlets are leather because the pistol made fingered steel gauntlets impractical.
1916 · Somme, France. A British infantryman in 1902 Pattern Service Dress, 1908 Pattern webbing, Mark I Brodie helmet, puttees wound ankle-to-knee, ammunition boots. Carrying a Short Magazine Lee-Enfield No.1 Mk III (.303, ten-round magazine) at order arms. Detail got right: the Brodie's brim is rolled outward — the 1916 Mark I had the rim turned out, which was found to catch shrapnel and was reversed (rim in) only with the Mark II in 1938.
2087 · Taiwan Strait. An integrated protective system, third generation: boron-carbide ceramic-composite hard plates over a shear-thickening-fluid-impregnated UHMWPE soft layer; powered lower-limb exoskeleton (carbon-fibre tendons, electric actuators at hip, knee, ankle); composite helmet with retractable visor and articulated mandible guard. Carrying a 6.5mm electronically-primed bullpup carbine. Detail got right: the exoskeleton does not make the wearer superhuman — it lets him carry sixty kilograms without his knees failing. Hard plates stop rifle fire only at the torso; the soft layer stops pistol and fragmentation. The lineage is explicit: cuirass → Brodie → plate carrier; pauldron → shoulder shell; vambrace → forearm guard; puttees → exoskeleton struts.
The rig
The body is a single constant SVG group — head, neck, torso, two arms, two legs, two feet — drawn once and never touched again. It has named attachment points (shoulders at y=175, waist at y=300, hips at y=345, knees at y=475, ankles at y=605, right hand at y=348) that every piece of kit in every era mounts to at the same coordinates. The arms stay at the sides in all three eras so that the right hand sits at the hip in every kit, which is where the pistol, the rifle at order arms, and the bullpup carbine are all gripped — no arm interpolation is needed, eliminating the twitch failure mode entirely. Layer order, back to front: ground shadow, body (legs, torso, arms, head, face), then three kit groups (kit1, kit2, kit3) each containing their own internal ordering (footwear → leg armour → torso armour → arm armour → headgear → weapon). Between eras, kit opacities are driven by a smoothstep cross-fade (kit1 fades 0.35→0.5, kit2 peaks at 0.5, kit3 fades 0.5→0.65) whose three values always sum to exactly 1.0, so total opacity is constant and the figure never flickers brighter or darker. The body underneath is always fully opaque, so during a cross-fade you see the same person with two loadouts ghosted over each other — never an empty stage, never a resized figure.
The file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Armoury Slider — Museum of Arms and Armour</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #1a1814; }
body {
color: #c8b898;
font-family: Georgia, 'Times New Roman', serif;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 24px 16px 40px;
}
header { text-align: center; margin-bottom: 14px; }
header h1 {
font-size: 26px; font-weight: normal; letter-spacing: 3px;
color: #d8c8a8; margin-bottom: 4px; text-transform: uppercase;
}
header p { font-size: 12px; color: #8a7a5a; font-style: italic; letter-spacing: 0.5px; }
.stage {
background: #221f1a;
border: 1px solid #3a3528;
border-radius: 3px;
padding: 18px;
box-shadow: inset 0 0 80px rgba(0,0,0,0.55), 0 4px 20px rgba(0,0,0,0.5);
position: relative;
}
.stage svg {
display: block;
width: 460px; height: 552px;
max-width: 88vw; max-height: 58vh;
}
.controls { width: 460px; max-width: 88vw; margin: 18px 0 14px; }
.slider-wrap { position: relative; padding: 14px 0 6px; }
input[type="range"] {
width: 100%; -webkit-appearance: none; appearance: none;
height: 3px; background: #3a3528; border-radius: 2px; outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 22px; height: 22px; border-radius: 50%;
background: #c8a968; border: 2px solid #1a1814;
cursor: grab; box-shadow: 0 0 10px rgba(200,169,104,0.45);
}
input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; }
input[type="range"]::-moz-range-thumb {
width: 22px; height: 22px; border-radius: 50%;
background: #c8a968; border: 2px solid #1a1814; cursor: grab;
}
.ticks {
display: flex; justify-content: space-between;
margin-top: 10px; font-size: 11px; color: #8a7a5a;
}
.tick { text-align: center; width: 33%; }
.tick .year { font-weight: bold; color: #c8b898; font-size: 12px; letter-spacing: 1px; }
.tick .place { font-size: 10px; font-style: italic; color: #6a5a3a; }
.label-plate {
background: #e8dfc8; color: #2a2418;
padding: 16px 20px; border-radius: 2px;
border: 1px solid #c8b898;
box-shadow: 0 3px 12px rgba(0,0,0,0.45);
width: 460px; max-width: 88vw; min-height: 130px;
font-size: 13px; line-height: 1.55;
}
.label-plate .year-place {
font-size: 15px; font-weight: bold; margin-bottom: 6px;
letter-spacing: 0.5px; border-bottom: 1px solid #c8b898;
padding-bottom: 4px;
}
.label-plate .armour-name { font-style: italic; margin-bottom: 4px; color: #5a4a2a; }
.label-plate .materials { margin-bottom: 4px; }
.label-plate .weapon { margin-bottom: 4px; }
.label-plate .weapon b { color: #5a4a2a; }
.label-plate .detail {
margin-top: 8px; padding-top: 8px;
border-top: 1px dashed #c8b898;
font-size: 12px; color: #6a5a3a;
}
.label-plate .detail b { color: #4a3a1a; }
.label-plate .between-body { font-style: italic; color: #6a5a3a; }
footer {
margin-top: 18px; font-size: 10px; color: #5a4a2a;
text-align: center; font-style: italic; max-width: 460px;
}
</style>
</head>
<body>
<header>
<h1>The Armoury Slider</h1>
<p>One soldier, three eras. Drag the slider to re-equip him.</p>
</header>
<div class="stage">
<svg id="figure" viewBox="0 0 600 720" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="steel" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#2a2c30"/>
<stop offset="0.45" stop-color="#4a4d52"/>
<stop offset="0.55" stop-color="#4a4d52"/>
<stop offset="1" stop-color="#2a2c30"/>
</linearGradient>
<linearGradient id="steelVert" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#3a3d42"/>
<stop offset="0.5" stop-color="#4a4d52"/>
<stop offset="1" stop-color="#26282c"/>
</linearGradient>
<linearGradient id="buff" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#7a5e34"/>
<stop offset="0.5" stop-color="#b8945c"/>
<stop offset="1" stop-color="#7a5e34"/>
</linearGradient>
<linearGradient id="khaki" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#5a4a2a"/>
<stop offset="0.5" stop-color="#8a7a4a"/>
<stop offset="1" stop-color="#5a4a2a"/>
</linearGradient>
<linearGradient id="khakiVert" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#8a7a4a"/>
<stop offset="1" stop-color="#5a4a2a"/>
</linearGradient>
<linearGradient id="webbing" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#7a6a42"/>
<stop offset="0.5" stop-color="#a89568"/>
<stop offset="1" stop-color="#7a6a42"/>
</linearGradient>
<linearGradient id="brodie" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#6a6850"/>
<stop offset="1" stop-color="#3a3828"/>
</linearGradient>
<linearGradient id="futureDark" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#262a26"/>
<stop offset="0.5" stop-color="#3a4038"/>
<stop offset="1" stop-color="#262a26"/>
</linearGradient>
<linearGradient id="futurePlate" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#3a3e36"/>
<stop offset="1" stop-color="#1e221c"/>
</linearGradient>
<linearGradient id="futurePlateH" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#2a2e26"/>
<stop offset="0.5" stop-color="#3e4238"/>
<stop offset="1" stop-color="#2a2e26"/>
</linearGradient>
<linearGradient id="carbon" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#161916"/>
<stop offset="0.5" stop-color="#2a2d2a"/>
<stop offset="1" stop-color="#161916"/>
</linearGradient>
<linearGradient id="skin" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#c9a982"/>
<stop offset="1" stop-color="#a08a64"/>
</linearGradient>
<linearGradient id="bootBrown" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#2a1808"/>
<stop offset="0.5" stop-color="#4a2a14"/>
<stop offset="1" stop-color="#2a1808"/>
</linearGradient>
<linearGradient id="wood" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#4a2e12"/>
<stop offset="0.5" stop-color="#7a5a2a"/>
<stop offset="1" stop-color="#4a2e12"/>
</linearGradient>
<radialGradient id="visorGlass" cx="0.5" cy="0.4" r="0.6">
<stop offset="0" stop-color="#3a6a8a" stop-opacity="0.6"/>
<stop offset="1" stop-color="#1a2a3a" stop-opacity="0.85"/>
</radialGradient>
</defs>
<!-- ground shadow -->
<ellipse cx="300" cy="662" rx="78" ry="9" fill="#000" opacity="0.35"/>
<!-- floor line -->
<line x1="180" y1="660" x2="420" y2="660" stroke="#3a3528" stroke-width="0.5" opacity="0.6"/>
<!-- ============ BODY (constant, never touched by slider) ============ -->
<g id="body" stroke="#7a5a3a" stroke-width="0.5">
<!-- Left leg -->
<path d="M 263 345 Q 260 410 268 475 Q 270 540 273 605 L 283 605 Q 285 540 287 475 Q 289 410 287 345 Z" fill="url(#skin)"/>
<!-- Right leg -->
<path d="M 337 345 Q 340 410 332 475 Q 330 540 327 605 L 317 605 Q 315 540 313 475 Q 311 410 313 345 Z" fill="url(#skin)"/>
<!-- Left foot -->
<ellipse cx="278" cy="613" rx="15" ry="7" fill="url(#skin)"/>
<!-- Right foot -->
<ellipse cx="322" cy="613" rx="15" ry="7" fill="url(#skin)"/>
<!-- Torso -->
<path d="M 252 178 C 246 190 248 210 254 230 L 258 300 C 256 322 252 335 252 345 L 348 345 C 348 335 344 322 342 300 L 346 230 C 352 210 354 190 348 178 C 330 172 315 170 300 170 C 285 170 270 172 252 178 Z" fill="url(#skin)"/>
<!-- Left arm -->
<path d="M 252 182 C 244 200 242 240 246 280 C 248 310 250 330 252 345 L 262 345 C 264 330 262 310 260 280 C 264 240 262 200 262 182 Z" fill="url(#skin)"/>
<!-- Right arm -->
<path d="M 348 182 C 356 200 358 240 354 280 C 352 310 350 330 348 345 L 338 345 C 336 330 338 310 340 280 C 336 240 338 200 338 182 Z" fill="url(#skin)"/>
<!-- Left hand -->
Attachments
z-ai/glm-5.2 — page