diff --git a/public/artifacts.css b/public/artifacts.css new file mode 100644 index 0000000..5cc649b --- /dev/null +++ b/public/artifacts.css @@ -0,0 +1,1039 @@ +/* Hidden artifact index and field guides */ + +.artifacts-page, +.tinker-page { + --artifact-ink: var(--site-text); + --artifact-paper: var(--site-bg); + --artifact-rule: var(--site-border); + --artifact-muted: var(--site-text-muted); + --artifact-purple: #b497bf; + width: 100%; +} + +.tinker-shell { + max-width: 880px; + margin: 0 auto; + padding: 0 1.25rem; +} + +.artifact-topline, +.tinker-nav { + display: flex; + justify-content: space-between; + align-items: center; + gap: 1.5rem; + border-bottom: 1px solid var(--artifact-rule); + padding: 1.25rem 0; + color: var(--artifact-muted); + font-size: 0.68rem; + font-weight: 600; + letter-spacing: 0.12em; +} + +.artifact-topline a, +.tinker-nav a { + color: var(--artifact-ink); + text-decoration: none; +} + +.artifact-home { + font-family: var(--site-font-display); + font-size: 0.92rem; + font-weight: 400; +} + +.artifacts-header { + padding: clamp(5rem, 14vw, 9rem) 0 clamp(3rem, 8vw, 5rem); +} + +.artifact-kicker, +.tinker-mini-label { + margin: 0 0 1rem; + color: var(--artifact-muted); + font-size: 0.68rem; + font-weight: 700; + letter-spacing: 0.16em; +} + +.artifacts-header h1 { + margin: 0; + font-size: clamp(2.1rem, 10vw, 8rem); + letter-spacing: 0.05em; +} + +.artifacts-header > p:last-child { + max-width: 31rem; + margin: 1.8rem 0 0 auto; + color: var(--site-text-secondary); + font-size: clamp(1rem, 2.5vw, 1.22rem); + line-height: 1.65; +} + +.artifact-index { + border-top: 1px solid var(--artifact-ink); +} + +.artifact-row { + display: grid; + grid-template-columns: 3.5rem 1fr 2rem; + gap: 1rem; + align-items: start; + border-bottom: 1px solid var(--artifact-rule); + padding: 1.8rem 0; + color: var(--artifact-ink); + text-decoration: none; + transition: padding 160ms ease, color 160ms ease; +} + +.artifact-row:hover { + padding-left: 0.5rem; + color: var(--artifact-purple); +} + +.artifact-number, +.artifact-row-meta { + color: var(--artifact-muted); + font-size: 0.68rem; + font-weight: 600; + letter-spacing: 0.12em; +} + +.artifact-row-body { + display: flex; + flex-direction: column; + gap: 0.3rem; +} + +.artifact-row-body strong { + font-family: var(--site-font-display); + font-size: clamp(1.7rem, 5vw, 2.7rem); + font-weight: 400; + letter-spacing: 0.04em; +} + +.artifact-row-body > span:last-child { + max-width: 35rem; + color: var(--site-text-secondary); + font-size: 0.88rem; + line-height: 1.5; +} + +.artifact-arrow { + font-size: 1.5rem; +} + +.artifact-index-footer { + display: flex; + justify-content: space-between; + gap: 1rem; + padding: 1.5rem 0 4rem; + color: var(--artifact-muted); + font-size: 0.62rem; + font-weight: 600; + letter-spacing: 0.1em; +} + +/* Tinker field guide */ + +.tinker-nav > div { + display: flex; + gap: 1.4rem; +} + +.tinker-hero { + position: relative; + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.72fr); + align-items: center; + min-height: min(50rem, 86vh); + border-bottom: 1px solid var(--artifact-ink); + padding: 4rem 0 2rem; + overflow: hidden; +} + +.tinker-hero h1 { + margin: 0; + font-size: clamp(5rem, 17vw, 11rem); + letter-spacing: 0.05em; + line-height: 0.8; +} + +.tinker-hero-copy, +.tinker-hero-copy > * { + min-width: 0; +} + +.tinker-deck { + max-width: 33rem; + margin: 2rem 0 0; + font-size: clamp(1.15rem, 3vw, 1.7rem); + line-height: 1.35; +} + +.tinker-hero-meta { + grid-column: 1 / -1; + display: flex; + justify-content: space-between; + align-self: end; + gap: 1rem; + margin-top: 3rem; + color: var(--artifact-muted); + font-size: 0.62rem; + font-weight: 700; + letter-spacing: 0.12em; +} + +.tinker-orbit { + position: relative; + width: min(32vw, 24rem); + aspect-ratio: 1; + justify-self: end; +} + +.tinker-orbit-ring, +.tinker-orbit-core, +.tinker-orbit-node { + position: absolute; +} + +.tinker-orbit-ring { + inset: 0; + border: 1px solid var(--artifact-rule); + border-radius: 50%; +} + +.tinker-orbit-ring-inner { + inset: 28%; + border-color: var(--artifact-purple); +} + +.tinker-orbit-core { + top: 50%; + left: 50%; + transform: translate(-50%, -52%); + color: var(--artifact-purple); + font-family: Georgia, serif; + font-size: clamp(3rem, 7vw, 5.4rem); +} + +.tinker-orbit-node { + border: 1px solid var(--artifact-rule); + border-radius: 999px; + padding: 0.35rem 0.55rem; + background: var(--artifact-paper); + color: var(--artifact-muted); + font-size: 0.56rem; + font-weight: 700; + letter-spacing: 0.1em; +} + +.tinker-orbit-data { top: 8%; left: 8%; } +.tinker-orbit-loss { top: 18%; right: -2%; } +.tinker-orbit-sample { bottom: 5%; left: 20%; } + +.tinker-section { + border-bottom: 1px solid var(--artifact-rule); + padding: clamp(3.5rem, 8vw, 6.5rem) 0; +} + +.tinker-section-label { + display: grid; + grid-template-columns: 3rem 1fr; + gap: 1rem; + margin-bottom: clamp(2.5rem, 6vw, 4.5rem); + color: var(--artifact-muted); + font-size: 0.64rem; + font-weight: 700; + letter-spacing: 0.14em; +} + +.tinker-opening-grid, +.tinker-explainer-head, +.tinker-eval-intro { + display: grid; + grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); + gap: clamp(2rem, 7vw, 6rem); +} + +.tinker-opening-grid h2, +.tinker-explainer-head h2, +.tinker-eval-intro h2 { + margin: 0; + font-family: var(--site-font-body); + font-size: clamp(1.8rem, 4vw, 3rem); + font-weight: 600; + letter-spacing: -0.045em; + line-height: 1.05; +} + +.tinker-opening-grid p, +.tinker-explainer-head p, +.tinker-eval-intro p { + margin: 0 0 1rem; + color: var(--site-text-secondary); + font-size: 1rem; + line-height: 1.75; +} + +.tinker-boundary { + display: grid; + grid-template-columns: 1fr 7.5rem 1fr; + border: 1px solid var(--artifact-rule); +} + +.tinker-boundary-side { + padding: clamp(1.5rem, 4vw, 2.7rem); +} + +.tinker-boundary-side h2 { + margin: 0 0 1.5rem; + font-family: var(--site-font-body); + font-size: 1.4rem; + font-weight: 650; + letter-spacing: -0.025em; +} + +.tinker-boundary-side ul { + margin: 0; + padding: 0; + list-style: none; +} + +.tinker-boundary-side li { + border-top: 1px solid var(--artifact-rule); + padding: 0.62rem 0; + color: var(--site-text-secondary); + font-size: 0.82rem; +} + +.tinker-api-spine { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 1.4rem; + border-right: 1px solid var(--artifact-rule); + border-left: 1px solid var(--artifact-rule); + padding: 1.2rem 0; + background: color-mix(in srgb, var(--artifact-purple) 16%, var(--artifact-paper)); + writing-mode: vertical-rl; +} + +.tinker-api-spine span { + font-size: 0.52rem; + font-weight: 700; + letter-spacing: 0.1em; +} + +.tinker-api-spine strong { + color: var(--artifact-purple); + font-family: var(--site-font-display); + font-size: 1.2rem; + font-weight: 400; +} + +.tinker-caption { + max-width: 40rem; + margin: 1rem 0 0 auto; + color: var(--artifact-muted); + font-size: 0.78rem; + line-height: 1.55; +} + +.tinker-verbs { + display: grid; + grid-template-columns: repeat(5, minmax(0, 1fr)); + border-top: 1px solid var(--artifact-ink); + border-bottom: 1px solid var(--artifact-ink); +} + +.tinker-verbs article { + min-width: 0; + padding: 1.4rem 1rem 1.7rem; +} + +.tinker-verbs article + article { + border-left: 1px solid var(--artifact-rule); +} + +.tinker-verbs article > span, +.tinker-agent-notes article > span, +.tinker-eval-grid article > span { + color: var(--artifact-muted); + font-size: 0.62rem; + font-weight: 700; +} + +.tinker-verbs h3 { + margin: 2.7rem 0 0.7rem; + overflow-wrap: anywhere; + font-family: "SF Mono", "Menlo", monospace; + font-size: 0.92rem; + font-weight: 500; +} + +.tinker-verbs p { + margin: 0; + color: var(--site-text-secondary); + font-size: 0.76rem; + line-height: 1.5; +} + +.tinker-large-note { + max-width: 48rem; + margin: 4rem 0 0 auto; + font-family: var(--site-font-display); + font-size: clamp(2rem, 6vw, 4rem); + letter-spacing: 0.025em; + line-height: 1.04; +} + +.tinker-flow, +.tinker-trace { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.8rem; + margin: 3.5rem 0; + border-top: 1px solid var(--artifact-rule); + border-bottom: 1px solid var(--artifact-rule); + padding: 1rem 0; + color: var(--artifact-muted); + font-size: 0.59rem; + font-weight: 700; + letter-spacing: 0.08em; +} + +.tinker-flow-arrow { + color: var(--artifact-purple); + font-size: 1rem; +} + +.tinker-code-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 1rem; +} + +.tinker-code-grid article, +.tinker-code-card-wide { + min-width: 0; + border: 1px solid var(--artifact-rule); + background: var(--site-code-bg); + overflow: hidden; +} + +.tinker-code-header { + display: flex; + justify-content: space-between; + border-bottom: 1px solid var(--artifact-rule); + padding: 0.65rem 0.9rem; + color: var(--artifact-muted); + font-size: 0.57rem; + font-weight: 700; + letter-spacing: 0.1em; +} + +.tinker-code-grid pre, +.tinker-code-card-wide pre { + max-width: 100%; + margin: 0; + padding: 1.1rem; + overflow-x: auto; + color: var(--artifact-ink); + font-family: "SF Mono", "Menlo", monospace; + font-size: 0.7rem; + line-height: 1.65; +} + +.tinker-concept-card { + display: grid; + grid-template-columns: 0.55fr 1fr 1.15fr; + gap: 1.5rem; + margin-top: 1rem; + border: 1px solid var(--artifact-purple); + padding: 1.5rem; +} + +.tinker-concept-card h3 { + margin: 0; + font-size: 1.08rem; + line-height: 1.3; +} + +.tinker-concept-card > p:last-child { + margin: 0; + color: var(--site-text-secondary); + font-size: 0.84rem; + line-height: 1.6; +} + +.tinker-lora-section, +.tinker-first-run { + margin-right: calc(50% - 50vw); + margin-left: calc(50% - 50vw); + padding-right: max(1.25rem, calc((100vw - 880px) / 2)); + padding-left: max(1.25rem, calc((100vw - 880px) / 2)); + color: #f0edf1; + background: #121113; +} + +.tinker-section-label-dark { + color: #8f8992; +} + +.tinker-lora-grid { + display: grid; + grid-template-columns: 0.9fr 1.1fr; + gap: clamp(2rem, 7vw, 6rem); +} + +.tinker-equation { + margin: 0; + color: #c9aecf; + font-family: Georgia, serif; + font-size: clamp(2.5rem, 7vw, 5.3rem); + line-height: 1; + white-space: nowrap; +} + +.tinker-equation-key { + margin: 1.1rem 0 0; + color: #8f8992; + font-size: 0.57rem; + font-weight: 700; + letter-spacing: 0.11em; +} + +.tinker-lora-copy h2 { + margin: 0 0 1.5rem; + font-family: var(--site-font-body); + font-size: clamp(1.65rem, 4vw, 2.6rem); + font-weight: 600; + letter-spacing: -0.04em; + line-height: 1.08; +} + +.tinker-lora-copy p { + color: #b9b3bc; + font-size: 0.94rem; + line-height: 1.7; +} + +.tinker-lora-facts { + display: grid; + grid-template-columns: repeat(3, 1fr); + margin-top: 4rem; + border-top: 1px solid #353137; + border-bottom: 1px solid #353137; +} + +.tinker-lora-facts div { + padding: 1.25rem; +} + +.tinker-lora-facts div + div { + border-left: 1px solid #353137; +} + +.tinker-lora-facts strong, +.tinker-lora-facts span { + display: block; +} + +.tinker-lora-facts strong { + color: #c9aecf; + font-family: var(--site-font-display); + font-size: 1.2rem; + font-weight: 400; + letter-spacing: 0.06em; +} + +.tinker-lora-facts span { + margin-top: 0.4rem; + color: #8f8992; + font-size: 0.72rem; +} + +.tinker-rl-loop { + display: grid; + grid-template-columns: repeat(9, auto); + align-items: center; + justify-content: space-between; + gap: 0.65rem; + margin: 3.5rem 0; +} + +.tinker-rl-loop div { + display: flex; + flex-direction: column; + gap: 0.12rem; +} + +.tinker-rl-loop div > span { + color: var(--artifact-purple); + font-size: 0.58rem; + font-weight: 700; +} + +.tinker-rl-loop strong { + font-size: 0.66rem; + letter-spacing: 0.08em; +} + +.tinker-rl-loop small { + color: var(--artifact-muted); + font-size: 0.62rem; +} + +.tinker-rl-detail { + display: grid; + grid-template-columns: 1.2fr 0.8fr; + gap: 1rem; +} + +.tinker-rl-detail, +.tinker-rl-detail > * { + min-width: 0; +} + +.tinker-rl-detail aside { + border: 1px solid var(--artifact-rule); + padding: 1.25rem; +} + +.tinker-rl-detail aside > p:last-child { + color: var(--site-text-secondary); + font-size: 0.8rem; + line-height: 1.6; +} + +.tinker-ratio { + margin: 2.5rem 0; + font-family: Georgia, serif; + font-size: clamp(1.3rem, 2.5vw, 1.75rem); + white-space: nowrap; +} + +.tinker-agents-grid > h2 { + max-width: 45rem; + margin: 0; + font-family: var(--site-font-display); + font-size: clamp(2.6rem, 8vw, 5.5rem); + font-weight: 400; + letter-spacing: 0.03em; + line-height: 1; +} + +.tinker-trace { + margin-top: 4rem; +} + +.tinker-agent-notes, +.tinker-eval-grid, +.tinker-map { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + border-top: 1px solid var(--artifact-rule); +} + +.tinker-agent-notes article, +.tinker-eval-grid article, +.tinker-map article { + padding: 1.4rem 1.2rem; +} + +.tinker-agent-notes article + article, +.tinker-eval-grid article + article, +.tinker-map article + article { + border-left: 1px solid var(--artifact-rule); +} + +.tinker-agent-notes h3, +.tinker-eval-grid h3, +.tinker-map h3 { + margin: 2.5rem 0 0.7rem; + font-size: 1rem; +} + +.tinker-agent-notes p, +.tinker-eval-grid p, +.tinker-map p { + margin: 0; + color: var(--site-text-secondary); + font-size: 0.78rem; + line-height: 1.55; +} + +.tinker-eval-grid { + grid-template-columns: repeat(4, minmax(0, 1fr)); + margin-top: 3.5rem; + border-bottom: 1px solid var(--artifact-rule); +} + +.tinker-first-run-head { + max-width: 47rem; +} + +.tinker-first-run-head h2 { + margin: 0; + font-family: var(--site-font-display); + font-size: clamp(2.5rem, 7vw, 5rem); + font-weight: 400; + letter-spacing: 0.035em; + line-height: 1; +} + +.tinker-first-run-head > p:last-child { + max-width: 36rem; + margin: 1.5rem 0 0 auto; + color: #b9b3bc; + line-height: 1.7; +} + +.tinker-protocol { + margin: 4rem 0 0; + padding: 0; + border-top: 1px solid #353137; + list-style: none; +} + +.tinker-protocol li { + display: grid; + grid-template-columns: 4rem 1fr; + border-bottom: 1px solid #353137; + padding: 1.15rem 0; +} + +.tinker-protocol li > span { + color: #8f8992; + font-size: 0.62rem; + font-weight: 700; +} + +.tinker-protocol strong { + display: block; + font-size: 0.95rem; +} + +.tinker-protocol p { + margin: 0.3rem 0 0; + color: #8f8992; + font-size: 0.78rem; + line-height: 1.5; +} + +.tinker-hypothesis { + display: grid; + grid-template-columns: 0.35fr 1fr; + gap: 2rem; + margin-top: 3rem; + border: 1px solid #c9aecf; + padding: 1.5rem; +} + +.tinker-hypothesis span { + color: #c9aecf; + font-size: 0.62rem; + font-weight: 700; + letter-spacing: 0.12em; +} + +.tinker-hypothesis p { + margin: 0; + font-size: 1.05rem; + line-height: 1.55; +} + +.tinker-map { + grid-template-columns: repeat(4, minmax(0, 1fr)); + border-bottom: 1px solid var(--artifact-rule); +} + +.tinker-map article > span { + color: var(--artifact-purple); + font-size: 0.58rem; + font-weight: 700; + letter-spacing: 0.1em; +} + +.tinker-glossary dl { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + margin: 0; + border-top: 1px solid var(--artifact-rule); +} + +.tinker-glossary dl > div { + display: grid; + grid-template-columns: 0.55fr 1fr; + gap: 1rem; + border-bottom: 1px solid var(--artifact-rule); + padding: 1rem 0; +} + +.tinker-glossary dl > div:nth-child(odd) { + padding-right: 1.2rem; +} + +.tinker-glossary dl > div:nth-child(even) { + border-left: 1px solid var(--artifact-rule); + padding-left: 1.2rem; +} + +.tinker-glossary dt { + font-size: 0.78rem; + font-weight: 700; +} + +.tinker-glossary dd { + margin: 0; + color: var(--site-text-secondary); + font-size: 0.75rem; + line-height: 1.5; +} + +.tinker-footer { + display: grid; + grid-template-columns: 1fr auto; + gap: 2rem; + padding: 4rem 0 5rem; +} + +.tinker-footer > div:first-child { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.6rem; +} + +.tinker-footer > div:first-child > span { + margin-bottom: 0.6rem; + color: var(--artifact-muted); + font-size: 0.58rem; + font-weight: 700; + letter-spacing: 0.12em; +} + +.tinker-footer a { + color: var(--artifact-ink); + font-size: 0.72rem; + font-weight: 600; + text-decoration: none; +} + +.tinker-footer a:hover { + color: var(--artifact-purple); +} + +.tinker-footer-mark { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 0.7rem; + width: 9rem; + aspect-ratio: 1; + border: 1px solid var(--artifact-rule); + border-radius: 50%; + color: var(--artifact-purple); +} + +.tinker-footer-mark strong { + font-family: Georgia, serif; + font-size: 2.5rem; + font-weight: 400; +} + +.tinker-footer-mark span { + font-size: 0.5rem; + font-weight: 700; + letter-spacing: 0.1em; +} + +@media (max-width: 760px) { + .tinker-hero { + grid-template-columns: 1fr; + min-height: auto; + padding-top: 6rem; + } + + .tinker-orbit { + width: min(72vw, 20rem); + margin: 4rem auto 1rem; + justify-self: center; + } + + .tinker-hero-meta { + flex-direction: column; + } + + .tinker-opening-grid, + .tinker-explainer-head, + .tinker-eval-intro, + .tinker-lora-grid, + .tinker-rl-detail { + grid-template-columns: minmax(0, 1fr); + } + + .tinker-boundary { + grid-template-columns: 1fr; + } + + .tinker-api-spine { + flex-direction: row; + justify-content: space-around; + border: 0; + border-top: 1px solid var(--artifact-rule); + border-bottom: 1px solid var(--artifact-rule); + writing-mode: horizontal-tb; + } + + .tinker-api-spine span:nth-of-type(2), + .tinker-api-spine span:nth-of-type(3) { + display: none; + } + + .tinker-verbs { + grid-template-columns: 1fr; + } + + .tinker-verbs article { + display: grid; + grid-template-columns: 2.2rem minmax(7rem, 0.65fr) 1fr; + gap: 1rem; + align-items: start; + } + + .tinker-verbs article + article { + border-top: 1px solid var(--artifact-rule); + border-left: 0; + } + + .tinker-verbs h3 { + margin: 0; + } + + .tinker-code-grid, + .tinker-concept-card { + grid-template-columns: 1fr; + } + + .tinker-lora-facts, + .tinker-agent-notes, + .tinker-eval-grid, + .tinker-map { + grid-template-columns: 1fr; + } + + .tinker-lora-facts div + div, + .tinker-agent-notes article + article, + .tinker-eval-grid article + article, + .tinker-map article + article { + border-top: 1px solid var(--artifact-rule); + border-left: 0; + } + + .tinker-lora-facts div + div { + border-top-color: #353137; + } + + .tinker-rl-loop { + grid-template-columns: 1fr; + justify-items: start; + border-left: 1px solid var(--artifact-rule); + padding-left: 1rem; + } + + .tinker-rl-loop .tinker-flow-arrow { + transform: rotate(90deg); + } + + .tinker-glossary dl { + grid-template-columns: 1fr; + } + + .tinker-glossary dl > div:nth-child(odd), + .tinker-glossary dl > div:nth-child(even) { + border-left: 0; + padding-right: 0; + padding-left: 0; + } +} + +@media (max-width: 480px) { + .artifact-topline, + .tinker-nav { + align-items: flex-start; + } + + .tinker-nav > div { + flex-direction: column; + align-items: flex-end; + gap: 0.35rem; + } + + .artifact-row { + grid-template-columns: 2.4rem 1fr; + } + + .artifact-arrow { + display: none; + } + + .artifact-index-footer { + flex-direction: column; + } + + .tinker-hero h1 { + font-size: min(18vw, 6rem); + } + + .tinker-section-label { + grid-template-columns: 2rem 1fr; + } + + .tinker-flow, + .tinker-trace { + align-items: flex-start; + flex-direction: column; + border-left: 1px solid var(--artifact-rule); + padding-left: 1rem; + } + + .tinker-flow .tinker-flow-arrow, + .tinker-trace .tinker-flow-arrow { + transform: rotate(90deg); + } + + .tinker-equation { + font-size: 2.25rem; + } + + .tinker-large-note { + font-size: 1.65rem; + } + + .tinker-first-run-head h2 { + font-size: 2rem; + } + + .tinker-hypothesis, + .tinker-glossary dl > div { + grid-template-columns: 1fr; + } + + .tinker-footer { + grid-template-columns: 1fr; + } + + .tinker-footer-mark { + margin-top: 2rem; + } +} + +@media (prefers-reduced-motion: reduce) { + .artifact-row { + transition: none; + } +} diff --git a/src/components/artifacts.tsx b/src/components/artifacts.tsx new file mode 100644 index 0000000..af76235 --- /dev/null +++ b/src/components/artifacts.tsx @@ -0,0 +1,53 @@ +const artifacts = [ + { + number: "001", + href: "/artifacts/tinker", + title: "Tinker", + kind: "FIELD GUIDE", + description: + "A working model of post-training, from token-weighted examples to reinforcement learning over agent trajectories.", + status: "ACTIVE", + }, +]; + +export function Artifacts() { + return ( +
+ + +
+

WORKING OBJECTS

+

ARTIFACTS

+

+ Things built to think with. Notes become instruments here: small, + specific, and usable before they are finished. +

+
+ +
+ {artifacts.map((artifact) => ( + + {artifact.number} + + + {artifact.kind} / {artifact.status} + + {artifact.title} + {artifact.description} + + + + ))} +
+ + +
+ ); +} diff --git a/src/components/tinker-guide.tsx b/src/components/tinker-guide.tsx new file mode 100644 index 0000000..006d90b --- /dev/null +++ b/src/components/tinker-guide.tsx @@ -0,0 +1,496 @@ +function FlowArrow() { + return ; +} + +const sftCode = `service = tinker.ServiceClient() +trainer = service.create_lora_training_client( + base_model="Qwen/Qwen3-8B", + rank=32, +) + +for batch in dataset: + future = await trainer.forward_backward_async( + data=batch, + loss_fn="cross_entropy", + ) + metrics = await future.result_async() + + step = await trainer.optim_step_async( + types.AdamParams(learning_rate=1e-4) + ) + await step.result_async()`; + +const datumCode = `tokens = [prompt tokens..., answer tokens...] +targets = tokens[1:] +weights = [0, 0, 0, ..., 1, 1, 1, ...] + +datum = types.Datum( + model_input=types.ModelInput.from_ints(tokens[:-1]), + loss_fn_inputs={ + "target_tokens": targets, + "weights": weights, + }, +)`; + +const rlCode = `while training: + policy = trainer.save_weights_and_get_sampling_client() + result = await policy.sample_async( + prompt=problem, + num_samples=8, + sampling_params=params, + ) + + rollouts = result.sequences + rewards = [environment.score(x) for x in rollouts] + baseline = sum(rewards) / len(rewards) + advantages = [reward - baseline for reward in rewards] + + await trainer.forward_backward_async( + data=make_rl_data(rollouts, advantages), + loss_fn="importance_sampling", + ) + await trainer.optim_step_async(optimizer)`; + +export function TinkerGuide() { + return ( +
+ + +
+
+

THINKING MACHINES LAB

+

TINKER

+

+ You write the learning experiment. Tinker makes the large model + actually move. +

+
+ +
+ PYTHON OUTSIDE + ACCELERATORS INSIDE + JUDGMENT THROUGHOUT +
+
+ +
+ +
+

Tinker is an API boundary around distributed post-training.

+
+

+ It is lower-level than “upload a dataset and receive a model,” + and higher-level than assembling a GPU cluster. Your Python code + owns the data, loss, rewards, rollout environment, and experimental + logic. Thinking Machines owns placement, parallelism, scheduling, + failure recovery, and moving giant tensors through hardware. +

+

+ That boundary is the product. It keeps the part where research + judgment lives and removes the part where NCCL develops opinions + about your evening. +

+
+
+
+ +
+ +
+
+

YOUR PROCESS

+

The experiment

+
    +
  • Examples and renderers
  • +
  • Loss functions
  • +
  • Reward and grading logic
  • +
  • Rollout environments
  • +
  • Evaluation and interpretation
  • +
+
+
+ SAMPLE + FORWARD_BACKWARD + API + OPTIM_STEP + SAVE_WEIGHTS +
+
+

TINKER SERVICE

+

The machinery

+
    +
  • Model sharding
  • +
  • GPU allocation
  • +
  • Distributed execution
  • +
  • Checkpoint storage
  • +
  • Failure recovery
  • +
+
+
+

+ Switching from an 8B dense model to a much larger mixture-of-experts + model can be one string change because the hardware layout stays behind + the boundary. +

+
+ +
+ +
+
+ 01 +

sample

+

Generate candidate tokens from a base model or your current adapter.

+
+
+ 02 +

compute_logprobs

+

Ask how probable tokens were under a particular policy.

+
+
+ 03 +

forward_backward

+

Evaluate a loss on data and accumulate gradients.

+
+
+ 04 +

optim_step

+

Use those gradients to update the trainable adapter.

+
+
+ 05 +

save_weights

+

Freeze a named checkpoint or turn it into a sampling client.

+
+
+

+ Every method is a composition of these verbs. +

+
+ +
+ +
+

Show it the behavior you want.

+

+ SFT is next-token prediction over examples you chose. The model sees + a prompt and completion; cross-entropy pushes probability toward the + completion tokens. The intellectual work is mostly upstream: what + counts as a good example, what context is included, and which tokens + are allowed to teach. +

+
+
+ EXAMPLE + TOKENS + MASK + CROSS-ENTROPY + GRADIENT + UPDATE +
+ +
+
+
+ THE LOOP + PYTHON +
+
{sftCode}
+
+
+
+ THE DATUM + TOKENS +
+
{datumCode}
+
+
+ + +
+ +
+ +
+
+

W′ = W + γBA

+

+ ORIGINAL WEIGHTS + SMALL LEARNED UPDATE +

+
+
+

Do not rewrite the whole model. Learn a compact change.

+

+ A model layer contains a large weight matrix W. LoRA keeps + it fixed and learns two skinny matrices, B and A. + Their product is low-rank: it can express a structured change using + far fewer trainable parameters. +

+

+ Rank controls the dimensionality of that change, not the model’s + intelligence. Too little rank can become a capacity bottleneck. + More rank costs storage and training memory. Thinking Machines’ + experiments found a broad low-regret regime for ordinary + post-training, especially when LoRA is applied across all weight + matrices rather than attention alone. +

+
+
+
+
CHEAPERTrain and store a small adapter.
+
SWAPPABLEMany adapters can share one base.
+
ENOUGHUsually, when the dataset fits its capacity.
+
+
+ +
+ +
+

Let the model act, then teach from consequences.

+

+ RL closes a loop. The current policy samples several attempts. An + environment or grader scores them. Advantages express which attempts + were better than their local baseline. Training increases the + probability of better trajectories and decreases the probability of + worse ones. +

+
+
+
1POLICYcurrent adapter
+ +
2ROLLOUTSmultiple attempts
+ +
3REWARDenvironment judgment
+ +
4ADVANTAGErelative signal
+ +
5UPDATEnew policy
+
+
+
+
+ THE LOOP + SCHEMATIC +
+
{rlCode}
+
+ +
+
+ +
+ +
+

An agent already emits the raw material for post-training.

+
+ STATE + THOUGHT + TOOL + OBSERVATION + ANSWER +
+
+
+ A +

Trajectory as data

+

A whole attempt can become an example, a comparison, or a rollout.

+
+
+ B +

Human correction as signal

+

Edits, approvals, reversals, and “that is the wrong frame” can become labels.

+
+
+ C +

Environment as grader

+

Tests, receipts, task state, and user judgment can supply rewards.

+
+
+
+

+ The scarce thing is not text. It is trustworthy judgment attached to text. +

+
+ +
+ +
+

Training loss tells you that learning happened. It does not tell you what was learned.

+

+ A run without held-out evaluation is an expensive anecdote. Decide + what improvement means before the first optimizer step, then preserve + examples the model never trains on. +

+
+
+
01

Loss

Did optimization move in the expected direction?

+
02

Task metric

Did held-out accuracy, reward, or preference rate improve?

+
03

Behavior

Did the model acquire the intended habit rather than a shortcut?

+
04

Regression

What unrelated ability or style got worse?

+
+
+ +
+ +
+

TRAJECTORY JUDGMENT / SFT FIRST

+

Can a small model learn to recognize the better agent run?

+

+ This is narrow enough to finish and close enough to real agent work + to be diagnostic. It tests the entire Tinker surface without requiring + a synthetic math environment or pretending that reward design is solved. +

+
+
    +
  1. + 01 +
    Collect pairs

    Two attempts at the same task, plus a human choice and one-sentence reason.

    +
  2. +
  3. + 02 +
    Render carefully

    Include the task, compact traces, outputs, and receipts. Remove irrelevant noise.

    +
  4. +
  5. + 03 +
    Train a judge

    Start with SFT: predict A or B, then explain the decisive evidence.

    +
  6. +
  7. + 04 +
    Hold out hard cases

    Especially cases where polish conflicts with correctness or claimed success lacks a receipt.

    +
  8. +
  9. + 05 +
    Interrogate errors

    The useful output is not one score. It is a taxonomy of judgment the model failed to acquire.

    +
  10. +
+
+ HYPOTHESIS +

+ Expert judgment will transfer where it is visible in concrete labels + and reasons. It will fail where the “expertise” only exists as tacit + context withheld from the training example. +

+
+
+ +
+ +
+
+ NOW +

Build one SFT run

+

Tokenization, masks, batches, loss curves, checkpoints, held-out samples.

+
+
+ NEXT +

Compare objectives

+

SFT versus preference training on the same underlying judgments.

+
+
+ THEN +

Close the RL loop

+

Generate fresh trajectories, grade them, and train on-policy.

+
+
+ FINALLY +

Change the question

+

Use observed failures to decide what data and reward should exist next.

+
+
+
+ +
+ +
+
Base model
The frozen pretrained or instruction-tuned network an adapter modifies.
+
Renderer
Code that turns structured examples or messages into the exact tokens a model sees.
+
Logprob
The log of a model’s assigned probability to a token. Conveniently additive across a sequence.
+
Gradient
The local direction in parameter space that changes the loss.
+
Checkpoint
A named saved state: adapter weights, and sometimes optimizer state for resuming.
+
On-policy
Training from trajectories generated by the current or very recent policy.
+
Advantage
How much better an action or trajectory was than an expected baseline.
+
Distillation
Training one model to reproduce information carried by another model’s outputs or probabilities.
+
+
+ + +
+ ); +} diff --git a/src/index.tsx b/src/index.tsx index 4056161..295a001 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -14,6 +14,8 @@ import { Semble } from "./components/semble.tsx"; import { Bluesky } from "./components/bluesky.tsx"; import { Travel } from "./components/travel.tsx"; import { TypeSpecimen } from "./components/type-specimen.tsx"; +import { Artifacts } from "./components/artifacts.tsx"; +import { TinkerGuide } from "./components/tinker-guide.tsx"; import "./types.ts"; import { getBlogPost } from "./data.ts"; @@ -34,10 +36,12 @@ function Shell({ children, title, wide = false, + noIndex = false, }: { children: JSXElement; title?: string; wide?: boolean; + noIndex?: boolean; }) { const pageTitle = title ? `${title} — cameron.stream` : "cameron.stream"; return ( @@ -45,6 +49,7 @@ function Shell({ + {noIndex && } {pageTitle} @@ -53,6 +58,7 @@ function Shell({ + {raw(``)} {raw(`