ai-eli5/recursive-self-improvement.html at main · EveGoodEvening/ai-eli5 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Recursive self-improvement, in pictures</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,700;12..96,800&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
<style>
:root{
  --paper:#E9EBF2;
  --ink:#0F1A3C;
  --blue:#2340C8;
  --pink:#FF4D93;
  --dim:#6A7291;
  --display:"Bricolage Grotesque","Space Grotesk",system-ui,sans-serif;
  --body:"Space Grotesk",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* paper grain */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.wrap{max-width:960px;margin:0 auto;padding:0 24px}

/* ---------- hero ---------- */
header{padding:14vh 0 8vh;position:relative}
.eyebrow{
  font-family:var(--body);font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--blue);font-weight:700;margin:0 0 22px;
}
h1{
  font-family:var(--display);font-weight:800;line-height:.92;letter-spacing:-.035em;
  font-size:clamp(2.9rem,10.5vw,7.2rem);margin:0;max-width:14ch;
}
h1 em{font-style:normal;color:var(--pink);position:relative}
.sub{font-size:clamp(1.05rem,2.6vw,1.5rem);color:var(--dim);margin:28px 0 0;max-width:24ch}
.scrollcue{margin-top:56px;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}
.scrollcue span{display:inline-block;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* ---------- panels ---------- */
section{padding:9vh 0;border-top:2px solid var(--ink)}
.num{
  font-family:var(--body);font-weight:700;font-size:.75rem;letter-spacing:.28em;
  color:var(--blue);margin:0 0 18px;
}
h2{
  font-family:var(--display);font-weight:700;letter-spacing:-.025em;line-height:1.02;
  font-size:clamp(1.9rem,5.6vw,3.4rem);margin:0 0 8px;max-width:17ch;
}
.note{color:var(--dim);font-size:clamp(.95rem,2.2vw,1.1rem);margin:14px 0 0;max-width:34ch}
.art{margin-top:44px}
svg{display:block;width:100%;height:auto;overflow:visible}

/* reveal */
.rise{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.rise.in{opacity:1;transform:none}

/* riso off-register shadow */
.reg{transform:translate(5px,5px);opacity:.85}

.gear{transform-origin:center;animation:spin 6s linear infinite}
.gear.fast{animation-duration:2.4s}
.gear.faster{animation-duration:1s}
.gear.rev{animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}

.lbl{font-family:var(--body);font-size:13px;font-weight:700;fill:var(--ink)}
.lbl.q{fill:var(--dim);font-weight:500}
.big{font-family:var(--display);font-weight:800;font-size:26px;fill:var(--ink)}

/* curve draw-on */
.curve{stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 2.6s cubic-bezier(.85,0,.9,.35) .2s}
.in .curve{stroke-dashoffset:0}

/* cards */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
.card{border:2px solid var(--ink);padding:26px 22px;background:transparent}
.card.hope{box-shadow:6px 6px 0 var(--blue)}
.card.worry{box-shadow:6px 6px 0 var(--pink)}
.card h3{font-family:var(--display);font-size:1.15rem;margin:0 0 10px;letter-spacing:-.01em}
.card p{margin:0;color:var(--dim);font-size:.98rem;line-height:1.5}
@media(max-width:620px){.cards{grid-template-columns:1fr}}

.define{
  border:2px solid var(--ink);background:var(--ink);color:var(--paper);
  padding:clamp(28px,6vw,54px);margin-top:10px;
}
.define p{
  font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.12;
  font-size:clamp(1.5rem,4.4vw,2.5rem);margin:0;
}
.define span{color:var(--pink)}

footer{border-top:2px solid var(--ink);padding:7vh 0 12vh;color:var(--dim);font-size:.9rem}
footer b{color:var(--ink);font-weight:700}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rise{opacity:1;transform:none}
  .curve{stroke-dashoffset:0}
  html{scroll-behavior:auto}
}
</style>
</head>
<body>

<!-- reusable robot -->
<svg style="position:absolute;width:0;height:0" aria-hidden="true">
  <symbol id="bot" viewBox="0 0 100 124">
    <g fill="none" stroke="currentColor" stroke-width="3.4" stroke-linejoin="round">
      <circle cx="50" cy="7" r="4.5" fill="currentColor" stroke="none"/>
      <path d="M50 11 V21"/>
      <rect x="29" y="21" width="42" height="29" rx="7" fill="var(--paper)"/>
      <circle cx="41" cy="35" r="3.6" fill="currentColor" stroke="none"/>
      <circle cx="59" cy="35" r="3.6" fill="currentColor" stroke="none"/>
      <path d="M46 50 h8 v5 h-8z" fill="var(--paper)"/>
      <rect x="21" y="55" width="58" height="48" rx="9" fill="var(--paper)"/>
      <rect x="6" y="59" width="13" height="34" rx="6.5" fill="var(--paper)"/>
      <rect x="81" y="59" width="13" height="34" rx="6.5" fill="var(--paper)"/>
      <rect x="30" y="103" width="13" height="18" rx="5" fill="var(--paper)"/>
      <rect x="57" y="103" width="13" height="18" rx="5" fill="var(--paper)"/>
    </g>
  </symbol>
  <symbol id="gear" viewBox="-20 -20 40 40">
    <g fill="currentColor">
      <rect x="-15" y="-3.2" width="30" height="6.4" rx="2"/>
      <rect x="-15" y="-3.2" width="30" height="6.4" rx="2" transform="rotate(45)"/>
      <rect x="-15" y="-3.2" width="30" height="6.4" rx="2" transform="rotate(90)"/>
      <rect x="-15" y="-3.2" width="30" height="6.4" rx="2" transform="rotate(135)"/>
      <circle r="10.5"/>
    </g>
    <circle r="4" fill="var(--paper)"/>
  </symbol>
</svg>

<div class="wrap">

<header>
  <p class="eyebrow">Recursive self-improvement</p>
  <h1>A machine that builds a <em>better</em> machine.</h1>
  <p class="sub">Then that machine does the same thing.</p>
  <p class="scrollcue"><span>Scroll ↓</span></p>
</header>

<!-- 01 -->
<section class="rise">
  <p class="num">01</p>
  <h2>Start with a machine that's good at one job: making machines.</h2>
  <div class="art">
    <svg viewBox="0 0 700 260" role="img" aria-label="One robot standing beside gears, holding a wrench">
      <g class="reg" style="color:var(--pink)"><use href="#bot" x="60" y="30" width="130" height="161"/></g>
      <g style="color:var(--ink)"><use href="#bot" x="60" y="30" width="130" height="161"/></g>
      <g style="color:var(--blue)" transform="translate(330,110)"><g class="gear"><use href="#gear" x="-20" y="-20" width="40" height="40"/></g></g>
      <g style="color:var(--blue)" transform="translate(374,138)"><g class="gear rev"><use href="#gear" x="-20" y="-20" width="40" height="40"/></g></g>
      <text class="lbl" x="440" y="118" font-size="20">it can build things</text>
      <text class="lbl q" x="440" y="146" font-size="18">…including machines</text>
    </svg>
  </div>
</section>

<!-- 02 -->
<section class="rise">
  <p class="num">02</p>
  <h2>So point it at itself.</h2>
  <p class="note">Version 1 designs version 2. Version 2 is a little better.</p>
  <div class="art">
    <svg viewBox="0 0 700 300" role="img" aria-label="Robot version one building a slightly larger robot version two">
      <g class="reg" style="color:var(--pink)"><use href="#bot" x="40" y="90" width="120" height="149"/></g>
      <g style="color:var(--ink)"><use href="#bot" x="40" y="90" width="120" height="149"/></g>
      <text class="lbl" x="72" y="270" font-size="18">v1</text>

      <path d="M195 175 H305" stroke="var(--blue)" stroke-width="5" fill="none"/>
      <path d="M290 162 l18 13 -18 13" stroke="var(--blue)" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
      <text class="lbl" x="205" y="155" fill="var(--blue)">builds</text>

      <g class="reg" style="color:var(--pink)"><use href="#bot" x="340" y="55" width="155" height="192"/></g>
      <g style="color:var(--ink)"><use href="#bot" x="340" y="55" width="155" height="192"/></g>
      <text class="lbl" x="382" y="270" font-size="18">v2</text>
      <g style="color:var(--blue)" transform="translate(575,150)"><g class="gear fast"><use href="#gear" x="-20" y="-20" width="40" height="40"/></g></g>
      <text class="lbl q" x="545" y="205" font-size="16">a bit better</text>
    </svg>
  </div>
</section>

<!-- 03 -->
<section class="rise">
  <p class="num">03</p>
  <h2>Here's the twist: the thing it improved was its own building skill.</h2>
  <p class="note">Version 2 doesn't just work better. It builds better. So version 3 arrives sooner, and is a bigger jump.</p>
  <div class="art">
    <svg viewBox="0 0 700 300" role="img" aria-label="Three robots, each larger than the last, each building the next">
      <g style="color:var(--ink)"><use href="#bot" x="20" y="140" width="86" height="107"/></g>
      <text class="lbl" x="48" y="270" font-size="16">v1</text>
      <path d="M120 195 H175" stroke="var(--blue)" stroke-width="4" fill="none"/>
      <path d="M164 186 l13 9 -13 9" stroke="var(--blue)" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>

      <g style="color:var(--ink)"><use href="#bot" x="190" y="110" width="112" height="139"/></g>
      <text class="lbl" x="230" y="272" font-size="16">v2</text>
      <path d="M316 195 H371" stroke="var(--blue)" stroke-width="4" fill="none"/>
      <path d="M360 186 l13 9 -13 9" stroke="var(--blue)" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>

      <g class="reg" style="color:var(--pink)"><use href="#bot" x="386" y="58" width="152" height="189"/></g>
      <g style="color:var(--ink)"><use href="#bot" x="386" y="58" width="152" height="189"/></g>
      <text class="lbl" x="448" y="272" font-size="16">v3</text>

      <path d="M552 195 H607" stroke="var(--pink)" stroke-width="4" fill="none" stroke-dasharray="9 8"/>
      <path d="M596 186 l13 9 -13 9" stroke="var(--pink)" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
      <text class="big" x="622" y="205" fill="var(--pink)">v4</text>
    </svg>
  </div>
</section>

<!-- 04 loop : signature -->
<section class="rise">
  <p class="num">04</p>
  <h2>And now it's a loop that feeds itself.</h2>
  <p class="note">Watch the lap get quicker each time around.</p>
  <div class="art">
    <svg viewBox="0 0 700 400" role="img" aria-label="A circular loop: builds a better version, which is better at building, so the next one comes sooner">
      <g transform="translate(350,200)">
        <circle r="128" fill="none" stroke="var(--ink)" stroke-width="2" stroke-dasharray="4 9" opacity=".45"/>
        <circle r="128" fill="none" stroke="var(--blue)" stroke-width="6" stroke-linecap="round"
                stroke-dasharray="150 654" opacity=".25"/>

        <g style="color:var(--ink)"><use href="#bot" x="-42" y="-52" width="84" height="104"/></g>

        <!-- travelling spark: laps speed up -->
        <circle r="11" fill="var(--pink)">
          <animateMotion dur="7s" repeatCount="indefinite"
            keyPoints="0;1;0;1;0;1;0;1" keyTimes="0;0.42;0.42;0.71;0.71;0.9;0.9;1" calcMode="linear"
            path="M0,-128 A128,128 0 1,1 -0.1,-128"/>
        </circle>

        <!-- arrowheads on the ring -->
        <path d="M0,-128 l-11,-9 l0,18 z" fill="var(--ink)" transform="rotate(90) translate(0,0)"/>
      </g>

      <text class="lbl" x="350" y="34" text-anchor="middle" font-size="18">builds a better version</text>
      <text class="lbl" x="648" y="300" text-anchor="end" font-size="18">which builds better still</text>
      <text class="lbl" x="52" y="300" font-size="18">so the next one</text>
      <text class="lbl" x="52" y="324" font-size="18">comes sooner</text>
    </svg>
  </div>
</section>

<!-- 05 curve -->
<section class="rise">
  <p class="num">05</p>
  <h2>Nothing, nothing, nothing — then everything at once.</h2>
  <p class="note">Each step is a bit bigger than the last. That shape stays boring for a long time, then goes almost straight up.</p>
  <div class="art">
    <svg viewBox="0 0 700 340" role="img" aria-label="A line that stays flat for a long time and then rises almost vertically">
      <path d="M60 290 H660" stroke="var(--ink)" stroke-width="2.5"/>
      <path d="M60 290 V30" stroke="var(--ink)" stroke-width="2.5"/>
      <text class="lbl q" x="660" y="318" text-anchor="end" font-size="15">time →</text>
      <text class="lbl q" x="46" y="40" text-anchor="end" font-size="15" transform="rotate(-90 46 40)">how capable</text>

      <path class="curve" d="M62 288 C 240 286, 380 278, 470 250 S 570 150, 585 34"
            fill="none" stroke="var(--pink)" stroke-width="8" stroke-linecap="round"/>
      <g style="color:var(--ink)"><use href="#bot" x="120" y="228" width="42" height="52"/></g>
      <g style="color:var(--ink)"><use href="#bot" x="430" y="196" width="56" height="70"/></g>
      <g class="reg" style="color:var(--blue)"><use href="#bot" x="586" y="14" width="92" height="114"/></g>
      <g style="color:var(--ink)"><use href="#bot" x="586" y="14" width="92" height="114"/></g>
    </svg>
  </div>
</section>

<!-- 06 definition -->
<section class="rise">
  <p class="num">06</p>
  <h2>That's the whole idea.</h2>
  <div class="define">
    <p>Improvement that <span>improves</span> the thing doing the improving.</p>
  </div>
</section>

<!-- 07 -->
<section class="rise">
  <p class="num">07</p>
  <h2>Which is why people argue about it.</h2>
  <div class="cards">
    <div class="card hope">
      <h3>The hope</h3>
      <p>Problems that would take humans centuries — diseases, materials, energy — get solved in a hurry.</p>
    </div>
    <div class="card worry">
      <h3>The worry</h3>
      <p>If it speeds up faster than people can check it, nobody gets time to notice a mistake, or to stop it.</p>
    </div>
  </div>
</section>

<!-- 08 -->
<section class="rise">
  <p class="num">08</p>
  <h2>Does it actually happen?</h2>
  <p class="note">Tiny versions, yes: a chess program that trains by playing itself, or a compiler used to build a better compiler. The dramatic version — a machine racing away on its own — has never been observed. It's a prediction, and experts disagree hard about whether it's coming, and how fast.</p>
  <div class="art">
    <svg viewBox="0 0 700 170" role="img" aria-label="Two gears turning, one small and real, one large and uncertain">
      <g style="color:var(--blue)" transform="translate(120,85)"><g class="gear"><use href="#gear" x="-20" y="-20" width="40" height="40"/></g></g>
      <text class="lbl" x="120" y="150" text-anchor="middle">happens today</text>
      <g style="color:var(--dim)" transform="translate(430,85)">
        <g class="gear faster" opacity=".45"><use href="#gear" x="-70" y="-70" width="140" height="140"/></g>
      </g>
      <text class="lbl q" x="430" y="168" text-anchor="middle">still hypothetical</text>
      <text class="big" x="430" y="96" text-anchor="middle" fill="var(--pink)">?</text>
    </svg>
  </div>
</section>

<footer>
  <p><b>In one line:</b> recursive self-improvement is what happens when a system gets better at getting better — so progress compounds instead of adding up.</p>
</footer>

</div>

<script>
const io = new IntersectionObserver((es)=>{
  es.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target);} });
},{threshold:.18});
document.querySelectorAll('.rise').forEach(el=>io.observe(el));
</script>
</body>
</html>