Ra / docs /presentation.src.html
recoilme's picture
Ra fp16 (step 212000)
b4f5f26 verified
Raw History Blame Contribute Delete
43.6 kB
<!DOCTYPE html>
<html lang="ru" data-register="technical">
<head>
<meta charset="utf-8">
<title>UDiT — пирамидальный U-трансформер</title>
<style>
@page { size: 1280px 720px; margin: 0; }
:root {
--paper: #f6f2ea; --ink: #14120f; --muted: #6d675c; --rule: #d9d2c3;
--copper: #a8551f; --teal: #1f6b66; --sand: #efe8da; --white: #fffdf8;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--paper); }
body { font-family: "DejaVu Sans", sans-serif; color: var(--ink); font-size: 15px; line-height: 1.45; }
.slide {
width: 1280px; height: 720px; padding: 54px 64px 44px; position: relative;
background: var(--paper); page-break-after: always; overflow: hidden;
}
.slide:last-child { page-break-after: auto; }
.eyebrow { font-family: "DejaVu Sans Mono", monospace; font-size: 11px; letter-spacing: .16em;
text-transform: uppercase; color: var(--copper); margin: 0 0 10px; }
h1 { font-family: 'P052', 'URW Bookman', serif; font-size: 46px; line-height: 1.08; margin: 0 0 14px; font-weight: 600; }
h2 { font-family: 'P052', 'URW Bookman', serif; font-size: 28px; line-height: 1.18; margin: 2px 0 8px; font-weight: 500; }
h3 { font-size: 14px; margin: 0 0 4px; letter-spacing: .02em; }
p { margin: 0 0 8px; }
.lede { font-size: 17px; color: #2c2822; max-width: 62ch; }
.muted { color: var(--muted); }
.mono { font-family: "DejaVu Sans Mono", monospace; font-variant-numeric: tabular-nums; }
.num { font-family: "DejaVu Sans Mono", monospace; font-weight: 700; }
.rule { height: 1px; background: var(--rule); margin: 18px 0 22px; }
.foot { position: absolute; left: 64px; right: 64px; bottom: 20px; display: flex;
justify-content: space-between; font-family: "DejaVu Sans Mono", monospace; font-size: 10.5px; color: var(--muted); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.card { background: var(--white); border: 1px solid var(--rule); padding: 16px 18px; }
.kpi { display: flex; gap: 26px; flex-wrap: wrap; }
.kpi div { border-left: 2px solid var(--copper); padding-left: 12px; }
.kpi b { display: block; font-family: "DejaVu Sans Mono", monospace; font-size: 23px; font-weight: 700; }
.kpi span { font-size: 12.5px; color: var(--muted); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--rule); }
th { font-family: "DejaVu Sans Mono", monospace; font-size: 10.5px; letter-spacing: .1em;
text-transform: uppercase; color: var(--muted); font-weight: 400; }
td.n, th.n { text-align: right; font-family: "DejaVu Sans Mono", monospace; font-variant-numeric: tabular-nums; }
.tag { display: inline-block; font-family: "DejaVu Sans Mono", monospace; font-size: 11px;
padding: 1px 7px; border: 1px solid var(--rule); color: var(--muted); background: var(--sand); }
img.strip { width: 100%; display: block; border: 1px solid var(--rule); }
.caption { font-size: 12.5px; color: var(--muted); margin-top: 7px; }
.big { font-family: 'P052', serif; font-size: 21px; line-height: 1.3; }
ul { margin: 0; padding-left: 18px; }
li { margin-bottom: 5px; }
.accent { color: var(--copper); }
.teal { color: var(--teal); }
svg text { font-family: "DejaVu Sans", sans-serif; }
.mono-label { font-family: "DejaVu Sans Mono", monospace; font-size: 12px; }
</style>
</head>
<body>
<!-- 1 ---------------------------------------------------------------- -->
<section class="slide">
<p class="eyebrow">text-to-image · 177.3M параметров · одна RTX 4080</p>
<h1>UDiT — пирамидальный U-трансформер</h1>
<p class="lede" style="max-width:88ch">Ширина растёт к низу: 192 → 512 → 1024 → 1536. Свёртки на мелком уровне,
внимание на грубом, текст на всех уровнях. Декодер готового автоэнкодера работает хвостом-рендерером,
поэтому тело считает 32 числа на клетку 8×8, а не пиксели.</p>
<div class="rule" style="margin:16px 0 14px"></div>
<div class="kpi">
<div><b>177.3M</b><span>параметров всего</span></div>
<div><b>97 мс</b><span>шаг обучения · bs8 · 256²</span></div>
<div><b>20.4</b><span>GFLOP forward у тела</span></div>
<div><b>0.647</b><span>детали (hf) против AE 0.859</span></div>
<div><b>8.1 ГБ</b><span>пик памяти из 16</span></div>
</div>
<img class="strip" src="img/strip.png" alt="оригинал, реконструкция AE и две генерации" style="margin-top:22px">
<p class="caption">слева направо: оригинал · реконструкция AE (потолок 0.859 hf) · две генерации модели на 30k шагов с разными сидами</p>
<div class="rule" style="margin:16px 0 10px"></div>
<div class="grid3">
<div><h3>тело · 143.3M</h3><p class="muted">пирамида 192/512/1024/1536, поток в латентном пространстве</p></div>
<div><h3>текст · 10.0M</h3><p class="muted">Ettin-150M заморожен, обучается только выбор слоёв</p></div>
<div><h3>хвост · 23.9M</h3><p class="muted">декодер AE, дообучается как flow по пикселям</p></div>
</div>
<div class="foot"><span>UDiT · архитектура</span><span>1 / 12</span></div>
</section>
<!-- 2 ---------------------------------------------------------------- -->
<section class="slide">
<p class="eyebrow">три части</p>
<h2>Модель не считает пиксели — только 32 числа на клетку 8×8</h2>
<svg width="1150" height="250" viewBox="0 0 1150 250" style="margin-top:16px">
<defs>
<marker id="a1" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto">
<path d="M0,0 L10,5 L0,10 z" fill="#14120f"/></marker>
<marker id="a2" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto">
<path d="M0,0 L10,5 L0,10 z" fill="#1f6b66"/></marker>
</defs>
<rect x="0" y="60" width="140" height="92" fill="#fffdf8" stroke="#d9d2c3"/>
<text x="14" y="90" font-size="15">шум</text>
<text x="14" y="114" class="mono-label" fill="#6d675c">32 × h/8 × w/8</text>
<text x="14" y="134" class="mono-label" fill="#6d675c">при 256²: 32×32</text>
<rect x="196" y="24" width="330" height="164" fill="#f2ece0" stroke="#a8551f"/>
<text x="212" y="54" font-size="16" font-weight="bold">ТЕЛО · пирамида</text>
<text x="212" y="80" class="mono-label" fill="#6d675c">143.3M · 20.4 GFLOP</text>
<text x="212" y="102" class="mono-label" fill="#6d675c">4–8 шагов Эйлера · CFG 1.5</text>
<rect x="212" y="116" width="298" height="12" fill="#c98a5f"/><text x="212" y="146" class="mono-label" fill="#7c3d14">÷1 · 192</text>
<rect x="212" y="150" width="220" height="12" fill="#a8551f"/><text x="440" y="161" class="mono-label" fill="#7c3d14">÷2 · 512</text>
<rect x="212" y="168" width="140" height="12" fill="#7c3d14"/><text x="360" y="179" class="mono-label" fill="#7c3d14">÷4 · 1024 · ÷8 · 1536</text>
<rect x="582" y="60" width="150" height="92" fill="#fffdf8" stroke="#d9d2c3"/>
<text x="596" y="90" font-size="15">латент</text>
<text x="596" y="114" class="mono-label" fill="#6d675c">32 × h/8 × w/8</text>
<text x="596" y="134" class="mono-label" fill="#6d675c">x0-предсказание</text>
<rect x="788" y="24" width="230" height="164" fill="#e8f0ee" stroke="#1f6b66"/>
<text x="802" y="54" font-size="16" font-weight="bold">ХВОСТ · декодер AE</text>
<text x="802" y="80" class="mono-label" fill="#6d675c">23.9M · 4 шага flow</text>
<text x="802" y="102" class="mono-label" fill="#6d675c">PixelShuffle ×3 → 3 канала</text>
<text x="802" y="124" class="mono-label" fill="#6d675c">условие: z0 + ошибка тела</text>
<text x="802" y="146" class="mono-label" fill="#6d675c">обучен заранее, как декодер AE</text>
<text x="802" y="168" class="mono-label" fill="#6d675c">дообучается вместе с телом</text>
<rect x="1074" y="60" width="76" height="92" fill="#fffdf8" stroke="#d9d2c3"/>
<text x="1084" y="90" font-size="15">px</text>
<text x="1084" y="114" class="mono-label" fill="#6d675c">3×H×W</text>
<line x1="144" y1="106" x2="192" y2="106" stroke="#14120f" stroke-width="1.8" marker-end="url(#a1)"/>
<line x1="530" y1="106" x2="578" y2="106" stroke="#14120f" stroke-width="1.8" marker-end="url(#a1)"/>
<line x1="736" y1="106" x2="784" y2="106" stroke="#14120f" stroke-width="1.8" marker-end="url(#a1)"/>
<line x1="1022" y1="106" x2="1070" y2="106" stroke="#14120f" stroke-width="1.8" marker-end="url(#a1)"/>
<rect x="196" y="210" width="822" height="38" fill="#fffdf8" stroke="#1f6b66"/>
<text x="210" y="234" font-size="13.5">ТЕКСТ · Ettin-150M (768, заморожен) + SliceMixer 10.04M · кросс-внимание в теле на всех четырёх уровнях</text>
<line x1="300" y1="208" x2="300" y2="192" stroke="#1f6b66" stroke-width="1.8" marker-end="url(#a2)"/>
</svg>
<div class="grid3" style="margin-top:14px">
<div><h3>Латент вместо пикселей</h3><p class="muted">Один токен = 32 числа на клетку 8×8. При 256² это 1024 токена против 196 608 пикселей.</p></div>
<div><h3>Декодер уже обучен</h3><p class="muted">Хвост наследует декодер AE: телу не нужно учиться рисовать текстуру с нуля.</p></div>
<div><h3>Текст не экономим</h3><p class="muted">Кросс-внимание в каждом блоке до самого мелкого уровня: +2.5M, «switch» 0.43 → 0.78.</p></div>
</div>
<div class="foot"><span>UDiT · три части</span><span>2 / 12</span></div>
</section>
<!-- 3 ---------------------------------------------------------------- -->
<section class="slide">
<p class="eyebrow">почему пирамида</p>
<h2>Плоский стек ширины 1024 платит за каждый токен по полной</h2>
<div class="grid2" style="margin-top:18px; gap:44px">
<div>
<svg width="530" height="212" viewBox="0 0 530 212">
<text x="0" y="12" font-size="13.5" font-weight="bold" fill="#a8551f">было: 12 блоков × ширина 1024</text>
<g fill="#e0b39a">
<rect x="0" y="26" width="360" height="9"/><rect x="0" y="39" width="360" height="9"/>
<rect x="0" y="52" width="360" height="9"/><rect x="0" y="65" width="360" height="9"/>
<rect x="0" y="78" width="360" height="9"/><rect x="0" y="91" width="360" height="9"/>
<rect x="0" y="104" width="360" height="9"/><rect x="0" y="117" width="360" height="9"/>
<rect x="0" y="130" width="360" height="9"/><rect x="0" y="143" width="360" height="9"/>
</g>
<line x1="372" y1="26" x2="372" y2="152" stroke="#a8551f"/>
<text x="380" y="70" class="mono-label" fill="#7c3d14">все блоки</text>
<text x="380" y="88" class="mono-label" fill="#7c3d14">на одном</text>
<text x="380" y="106" class="mono-label" fill="#7c3d14">разрешении</text>
<text x="0" y="176" class="mono-label" fill="#6d675c">токенов на блоке: 1024 · ширина: 1024 · уровней: 1</text>
<text x="0" y="196" class="mono-label" fill="#a8551f">232 GFLOP · 196 мс/шаг · hf 0.18</text>
<text x="0" y="212" class="mono-label" fill="#6d675c">нет уровня, где вся картинка — это 16 токенов</text>
</svg>
</div>
<div>
<svg width="530" height="212" viewBox="0 0 530 212">
<text x="0" y="12" font-size="13.5" font-weight="bold" fill="#1f6b66">стало: 192 → 512 → 1024 → 1536</text>
<rect x="0" y="26" width="400" height="26" fill="#c98a5f"/>
<text x="10" y="43" class="mono-label" fill="#fffdf8">÷1 · 1024 токена · ширина 192 · свёртки</text>
<rect x="60" y="58" width="310" height="26" fill="#b06f3f"/>
<text x="70" y="75" class="mono-label" fill="#fffdf8">÷2 · 256 токенов · 512</text>
<rect x="120" y="90" width="220" height="26" fill="#a8551f"/>
<text x="130" y="107" class="mono-label" fill="#fffdf8">÷4 · 64 · 1024</text>
<rect x="180" y="122" width="130" height="26" fill="#7c3d14"/>
<text x="190" y="139" class="mono-label" fill="#fffdf8">÷8 · 16 · 1536</text>
<text x="0" y="176" class="mono-label" fill="#6d675c">энкодер вверх, декодер вниз, аддитивный скип на каждом уровне</text>
<text x="0" y="196" class="mono-label" fill="#1f6b66">20.4 GFLOP · 97 мс/шаг · hf 0.54 → 0.65</text>
<text x="0" y="212" class="mono-label" fill="#6d675c">широкий низ: 16 токенов видят всю картинку целиком</text>
</svg>
</div>
</div>
<div class="rule" style="margin:6px 0 10px"></div>
<table>
<tr><th style="width:32%">метрика</th><th class="n" style="width:13%">плоский 1024</th><th class="n" style="width:12%">пирамида</th><th>что это значит</th></tr>
<tr><td>GFLOP на forward (тело)</td><td class="n">232</td><td class="n">20.4</td><td>в 11 раз меньше арифметики при том же числе параметров</td></tr>
<tr><td>шаг обучения, bs8 · 256²</td><td class="n">196 мс</td><td class="n">97 мс</td><td>вдвое больше шагов за то же время</td></tr>
<tr><td>детали: hf(gen)/hf(AE)</td><td class="n">21%</td><td class="n">51–75%</td><td>и это при 3–6 кратном меньшем числе шагов обучения</td></tr>
</table>
<div class="rule" style="margin:10px 0 12px"></div>
<p class="big">Стоимость слоя ≈ токены × ширина². Мы держим ширину там, где токенов мало, и снимаем
с мелкого уровня 28-кратный перерасход — эти же деньги уходят в глубину и разрешение.</p>
<div class="foot"><span>UDiT · сравнение</span><span>3 / 12</span></div>
</section>
<!-- 4 ---------------------------------------------------------------- -->
<section class="slide">
<p class="eyebrow">лестница</p>
<h2>Ширина растёт там, где токенов мало — стоимость уровней сбалансирована</h2>
<div class="grid2" style="margin-top:12px; grid-template-columns: 1.25fr 1fr;">
<div>
<table>
<tr><th>уровень</th><th class="n">токенов 256²</th><th class="n">токенов 512²</th><th class="n">ширина</th><th>блоки</th><th>механика</th></tr>
<tr><td>L0 ÷1</td><td class="n">1024</td><td class="n">4096</td><td class="n">192</td><td>6 enc / 4 dec + self-attn</td><td>свёртки + текст</td></tr>
<tr><td>L1 ÷2</td><td class="n">256</td><td class="n">1024</td><td class="n">512</td><td>4 / 3</td><td>трансформер</td></tr>
<tr><td>L2 ÷4</td><td class="n">64</td><td class="n">256</td><td class="n">1024</td><td>3 / 2</td><td>трансформер</td></tr>
<tr><td>L3 ÷8</td><td class="n">16</td><td class="n">64</td><td class="n">1536</td><td>2 (боттлнек)</td><td>трансформер</td></tr>
</table>
<p class="caption">энкодер поднимается по лестнице, декодер спускается; на каждом уровне прибавляется скип</p>
</div>
<div>
<svg width="470" height="290" viewBox="0 0 470 290">
<text x="0" y="14" font-size="12" fill="#6d675c">стоимость уровня ≈ токены × ширина²</text>
<g>
<rect x="0" y="30" width="240" height="26" fill="#c98a5f"/><text x="250" y="48" class="mono-label">37.7 · L0</text>
<rect x="0" y="66" width="427" height="26" fill="#b06f3f"/><text x="437" y="84" class="mono-label">67.1 · L1</text>
<rect x="0" y="102" width="427" height="26" fill="#a8551f"/><text x="437" y="120" class="mono-label">67.1 · L2</text>
<rect x="0" y="138" width="240" height="26" fill="#7c3d14"/><text x="250" y="156" class="mono-label">37.7 · L3</text>
</g>
<line x1="0" y1="182" x2="430" y2="182" stroke="#d9d2c3"/>
<text x="0" y="204" font-size="12" fill="#a8551f">для сравнения: 1024 на всех уровнях</text>
<rect x="0" y="214" width="470" height="26" fill="#e7c8b2"/>
<text x="8" y="232" class="mono-label" fill="#7c3d14">1073 · L0 при ширине 1024 (в 28 раз дороже)</text>
<text x="0" y="272" class="mono-label" fill="#6d675c">параметры уезжают вниз, где токенов 16, а не 1024</text>
</svg>
</div>
</div>
<div class="foot"><span>UDiT · бюджет уровней</span><span>4 / 12</span></div>
</section>
<!-- 5 ---------------------------------------------------------------- -->
<section class="slide">
<p class="eyebrow">роли уровней</p>
<h2>Каждый уровень отвечает за свой масштаб — как у художника</h2>
<div class="grid4" style="margin-top:18px">
<div class="card">
<svg width="100%" height="96" viewBox="0 0 220 96">
<rect x="18" y="14" width="184" height="68" fill="none" stroke="#d9d2c3"/>
<circle cx="110" cy="48" r="26" fill="#a8551f" opacity="0.22"/>
<circle cx="110" cy="48" r="12" fill="#a8551f" opacity="0.55"/>
<text x="70" y="92" class="mono-label" fill="#6d675c">16 токенов</text>
</svg>
<h3>L3 · «прищур»</h3>
<p class="muted">Вся картинка — 16 токенов. Полное внимание: все видят всех. Здесь решается композиция и симметрия.</p>
</div>
<div class="card">
<svg width="100%" height="96" viewBox="0 0 220 96">
<rect x="18" y="14" width="184" height="68" fill="none" stroke="#d9d2c3"/>
<path d="M60,70 Q110,10 160,70" fill="none" stroke="#1f6b66" stroke-width="3"/>
<text x="60" y="92" class="mono-label" fill="#6d675c">64 токена</text>
</svg>
<h3>L2 · крупные формы</h3>
<p class="muted">Тело, крылья, общая раскраска. Ширина 1024 — запас «смысла» на грубое описание.</p>
</div>
<div class="card">
<svg width="100%" height="96" viewBox="0 0 220 96">
<rect x="18" y="14" width="184" height="68" fill="none" stroke="#d9d2c3"/>
<path d="M40,60 C70,20 150,20 180,60" fill="none" stroke="#1f6b66" stroke-width="2"/>
<path d="M40,70 C70,34 150,34 180,70" fill="none" stroke="#1f6b66" stroke-width="2" opacity="0.6"/>
<text x="60" y="92" class="mono-label" fill="#6d675c">256 токенов</text>
</svg>
<h3>L1 · средние детали</h3>
<p class="muted">Форма крыла, крупный рисунок, где тёмное и где светлое. Ширина 512.</p>
</div>
<div class="card">
<svg width="100%" height="96" viewBox="0 0 220 96">
<rect x="18" y="14" width="184" height="68" fill="none" stroke="#d9d2c3"/>
<g stroke="#a8551f" stroke-width="1" opacity="0.8">
<line x1="30" y1="30" x2="46" y2="46"/><line x1="70" y1="26" x2="86" y2="42"/>
<line x1="110" y1="30" x2="126" y2="46"/><line x1="150" y1="26" x2="166" y2="42"/>
<line x1="40" y1="60" x2="56" y2="76"/><line x1="90" y1="58" x2="106" y2="74"/>
<line x1="140" y1="60" x2="156" y2="76"/>
</g>
<text x="56" y="92" class="mono-label" fill="#6d675c">1024 токена</text>
</svg>
<h3>L0 · текстура</h3>
<p class="muted">Жилки, кромки, крапинки. Здесь свёртка 3×3, а не внимание: текстура локальна, а свёртка в 20 раз дешевле.</p>
</div>
</div>
<div class="rule"></div>
<p class="big">Внимание на грубом уровне стоит копейки: 16 токенов × 16 = 256 пар. Внимание на мелком — 1024 × 1024 = миллион пар. Поэтому «прищур» мы делаем вниманием, а текстуру — свёрткой.</p>
<div class="foot"><span>UDiT · роли уровней</span><span>5 / 12</span></div>
</section>
<!-- 6 ---------------------------------------------------------------- -->
<section class="slide">
<p class="eyebrow">путь и скипы</p>
<h2>Энкодер поднимается к смыслу, декодер возвращается к деталям — помня эскиз</h2>
<svg width="1150" height="300" viewBox="0 0 1150 300" style="margin-top:14px">
<defs>
<marker id="up" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto">
<path d="M0,0 L10,5 L0,10 z" fill="#a8551f"/></marker>
<marker id="dn" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto">
<path d="M0,0 L10,5 L0,10 z" fill="#1f6b66"/></marker>
</defs>
<g>
<rect x="0" y="196" width="210" height="66" fill="#fffdf8" stroke="#d9d2c3"/>
<text x="14" y="222" font-size="13.5">L0 · 1024 токена · 192</text>
<text x="14" y="244" class="mono-label" fill="#6d675c">6 блоков enc · 4 dec</text>
<rect x="272" y="140" width="210" height="66" fill="#fffdf8" stroke="#d9d2c3"/>
<text x="286" y="166" font-size="13.5">L1 · 256 · 512</text>
<text x="286" y="188" class="mono-label" fill="#6d675c">4 enc · 3 dec</text>
<rect x="544" y="84" width="210" height="66" fill="#fffdf8" stroke="#d9d2c3"/>
<text x="558" y="110" font-size="13.5">L2 · 64 · 1024</text>
<text x="558" y="132" class="mono-label" fill="#6d675c">3 enc · 2 dec</text>
<rect x="816" y="28" width="210" height="66" fill="#fffdf8" stroke="#d9d2c3"/>
<text x="830" y="54" font-size="13.5">L3 · 16 · 1536</text>
<text x="830" y="76" class="mono-label" fill="#6d675c">2 блока · полное внимание</text>
</g>
<g stroke="#a8551f" stroke-width="2" fill="none">
<line x1="212" y1="228" x2="266" y2="180" marker-end="url(#up)"/>
<line x1="484" y1="172" x2="538" y2="124" marker-end="url(#up)"/>
<line x1="756" y1="116" x2="810" y2="68" marker-end="url(#up)"/>
</g>
<text x="206" y="212" class="mono-label" fill="#a8551f">pool 2×</text>
<text x="478" y="156" class="mono-label" fill="#a8551f">pool 2×</text>
<text x="750" y="100" class="mono-label" fill="#a8551f">pool 2×</text>
<g stroke="#1f6b66" stroke-width="2" fill="none">
<line x1="866" y1="98" x2="792" y2="146" marker-end="url(#dn)"/>
<line x1="594" y1="154" x2="520" y2="202" marker-end="url(#dn)"/>
<line x1="322" y1="210" x2="248" y2="258" marker-end="url(#dn)"/>
</g>
<text x="880" y="120" class="mono-label" fill="#1f6b66">up 2×</text>
<text x="608" y="176" class="mono-label" fill="#1f6b66">up 2×</text>
<text x="336" y="232" class="mono-label" fill="#1f6b66">up 2×</text>
<rect x="0" y="286" width="1026" height="0" fill="none"/>
<text x="0" y="292" class="mono-label" fill="#a8551f">скип: на каждом уровне выход энкодера прибавляется ко входу декодера того же уровня (аддитивно, без проекций)</text>
</svg>
<div class="grid3" style="margin-top:10px">
<div><h3>Почему аддитивные</h3><p class="muted">Ширина входа и выхода уровня совпадает, проекции не нужны — так делают U-Net’ы SD.</p></div>
<div><h3>Почему pool, а не stride</h3><p class="muted">Среднее 2×2 плюс линейный слой: сжатие учится и не ломает фазу позиционного кодирования.</p></div>
<div><h3>Что это даёт</h3><p class="muted">Тонкая структура строится на своём уровне, а не вытягивается вниманием с одного масштаба.</p></div>
</div>
<div class="foot"><span>UDiT · путь и скипы</span><span>6 / 12</span></div>
</section>
<!-- 7 ---------------------------------------------------------------- -->
<section class="slide">
<p class="eyebrow">текст</p>
<h2>Подпись не «берётся из последнего слоя» — модель сама выбирает, какие слои читать</h2>
<div class="grid2" style="margin-top:14px; grid-template-columns: 1.15fr 1fr;">
<div>
<svg width="560" height="252" viewBox="0 0 560 252">
<text x="0" y="12" font-size="11.5" fill="#6d675c">норма растёт с глубиной в 10 раз — без пер-слойной нормировки ранние слои не влияют</text>
<g class="mono-label" fill="#6d675c">
<text x="0" y="42">слой 2</text><text x="0" y="66">слой 5</text><text x="0" y="90">слой 8</text>
<text x="0" y="114">слой 11</text><text x="0" y="138">слой 14</text><text x="0" y="162">слой 17</text>
<text x="0" y="186">слой 20</text>
</g>
<g fill="#c98a5f">
<rect x="70" y="30" width="44" height="12"/><rect x="70" y="54" width="47" height="12"/>
<rect x="70" y="78" width="58" height="12"/><rect x="70" y="102" width="84" height="12"/>
<rect x="70" y="126" width="187" height="12"/><rect x="70" y="150" width="346" height="12"/>
</g>
<rect x="70" y="174" width="403" height="12" fill="#a8551f"/>
<text x="120" y="26" class="mono-label" fill="#7c3d14">52</text>
<text x="480" y="170" class="mono-label" fill="#7c3d14">548</text>
<rect x="0" y="206" width="560" height="24" fill="#e8f0ee" stroke="#1f6b66"/>
<text x="10" y="223" class="mono-label" fill="#1f6b66">7 срезов → LN на каждый → внимание по срезам → Linear(7→1) → + среднее</text>
<text x="0" y="248" class="mono-label" fill="#6d675c">«проектор слоёв»: какие слои читать, решает обучение, а не догадка</text>
</svg>
<p class="caption">SliceMixer · 10.04M обучаемых · идея из moss/adapter (0.8B + 158M голова вместо 9B-энкодера)</p>
</div>
<div>
<div class="card" style="margin-bottom:14px">
<h3>Два входа текста в каждый блок</h3>
<ul class="muted">
<li>кросс-внимание: каждый токен-клетка спрашивает «что в подписи про моё место?»</li>
<li>модуляция: общий вектор «t + усреднённый текст» настраивает shift/scale/gate фильтров</li>
</ul>
</div>
<table>
<tr><th>что сделали</th><th class="n">цена</th><th class="n">эффект</th></tr>
<tr><td>кросс-внимание и на L0</td><td class="n">+2.5M</td><td class="n">+9 мс</td></tr>
<tr><td>«switch» (один шум, два капшена)</td><td class="n">—</td><td class="n">0.43 → 0.78</td></tr>
<tr><td>детали (hf) не пострадали</td><td class="n">—</td><td class="n">0.44 → 0.65</td></tr>
</table>
<p class="caption">«switch» — насколько латент меняется от смены подписи при том же шуме</p>
</div>
</div>
<div class="foot"><span>UDiT · текст</span><span>7 / 12</span></div>
</section>
<!-- 8 ---------------------------------------------------------------- -->
<section class="slide">
<p class="eyebrow">хвост и сэмплинг</p>
<h2>Тело ведёт латент, готовый декодер рисует пиксели</h2>
<svg width="1140" height="240" viewBox="0 0 1140 240" style="margin-top:12px">
<defs>
<marker id="a3" markerWidth="9" markerHeight="9" refX="7" refY="4.5" orient="auto">
<path d="M0,0 L9,4.5 L0,9 z" fill="#14120f"/></marker>
</defs>
<g>
<circle cx="40" cy="70" r="18" fill="#fffdf8" stroke="#d9d2c3"/><text x="34" y="75" class="mono-label">шум</text>
<line x1="60" y1="70" x2="120" y2="70" stroke="#14120f" marker-end="url(#a3)"/>
<rect x="126" y="44" width="180" height="52" fill="#f2ece0" stroke="#a8551f"/>
<text x="138" y="66" font-size="12">тело: x0-предсказание</text>
<text x="138" y="84" class="mono-label" fill="#6d675c">8 шагов · CFG 1.5</text>
<line x1="310" y1="70" x2="370" y2="70" stroke="#14120f" marker-end="url(#a3)"/>
<rect x="376" y="44" width="150" height="52" fill="#fffdf8" stroke="#d9d2c3"/>
<text x="388" y="66" font-size="12">латент z</text>
<text x="388" y="84" class="mono-label" fill="#6d675c">32 × h/8 × w/8</text>
<line x1="530" y1="70" x2="590" y2="70" stroke="#14120f" marker-end="url(#a3)"/>
<rect x="596" y="44" width="190" height="52" fill="#e8f0ee" stroke="#1f6b66"/>
<text x="608" y="66" font-size="12">хвост: декодер AE</text>
<text x="608" y="84" class="mono-label" fill="#6d675c">4 шага flow</text>
<line x1="790" y1="70" x2="850" y2="70" stroke="#14120f" marker-end="url(#a3)"/>
<rect x="856" y="44" width="130" height="52" fill="#fffdf8" stroke="#d9d2c3"/>
<text x="868" y="66" font-size="12">пиксели</text>
<text x="868" y="84" class="mono-label" fill="#6d675c">3 × H × W</text>
</g>
</svg>
<div class="rule" style="margin:6px 0 10px"></div>
<table style="table-layout:fixed">
<tr><th style="width:30%">на каком латенте учить хвост</th><th style="width:18%">что видит рендерер</th><th style="width:52%">что происходит</th></tr>
<tr><td>только z0 (чистый латент)</td><td>идеальный латент</td><td>на сэмплинге встречает ошибку тела, к которой не привык</td></tr>
<tr><td>только предсказание тела</td><td>мусор в начале обучения</td><td>учится «исправлять мусор» и разучивается рисовать: 29.6 → 21.3 дБ</td></tr>
<tr><td><b>z0 + (ошибка тела).detach()</b></td><td>реальную ошибку</td><td>видит промах, но градиент через него не идёт; 24.7–25.9 дБ стабильно</td></tr>
</table>
<p class="caption">Сэмпл: 8 шагов тела + 4 шага декодера ≈ 35 мс на 4080 при 256². CFG 1.5 — выше 2 при недоученной
безусловной ветви ухудшает латент (замерено 0.19 → 0.28). Метрика tail(z0) в каждом логе ловит деградацию рендерера.</p>
<div class="foot"><span>UDiT · хвост</span><span>8 / 12</span></div>
</section>
<!-- 9 ---------------------------------------------------------------- -->
<section class="slide">
<p class="eyebrow">результат на узком домене</p>
<h2>Бабочки: детали растут с шагами и не насыщаются</h2>
<div class="grid2" style="margin-top:10px; grid-template-columns: 1fr 1.1fr;">
<div>
<table>
<tr><th>шаги</th><th class="n">hf / AE</th><th class="n">mse_lat</th><th class="n">high</th><th class="n">switch</th></tr>
<tr><td>4 000</td><td class="n">0.446 · 52%</td><td class="n">0.21</td><td class="n">0.42</td><td class="n">0.43</td></tr>
<tr><td>10 000</td><td class="n">0.436 · 51%</td><td class="n">0.164</td><td class="n">0.32</td><td class="n">0.68</td></tr>
<tr><td>20 000</td><td class="n">0.540 · 63%</td><td class="n">0.107</td><td class="n">0.19</td><td class="n">0.78</td></tr>
<tr><td><b>30 000</b></td><td class="n"><b>0.647 · 75%</b></td><td class="n"><b>0.072</b></td><td class="n"><b>0.114</b></td><td class="n">0.78</td></tr>
</table>
<p class="caption">hf — энергия высоких частот (лапласиан). AE-реконструкция того же вида: 0.859, оригинал 0.913.
«high» — ошибка на высоком шуме, то есть «какую особь рисовать»; она упала в 3.7 раза.</p>
<p class="big" style="margin-top:10px">Три сида дают три разные особи: 0.642 / 0.646 / 0.654 — модель не сколлапсировала в один мод.</p>
</div>
<div>
<img class="strip" src="img/samples.png" alt="Четыре вида бабочек, сгенерированные моделью">
<p class="caption">генерации на 30k шагов: Delias, Cepora, Troides, Catasticta — вид задаётся подписью из 16 токенов</p>
</div>
</div>
<div class="foot"><span>UDiT · результат</span><span>9 / 12</span></div>
</section>
<!-- 10 --------------------------------------------------------------- -->
<section class="slide">
<p class="eyebrow">цена</p>
<h2>177.3M параметров, 97 мс на шаг, 8.1 ГБ — обучение на одной карте</h2>
<div class="grid3" style="margin-top:16px">
<div>
<h3>Параметры по частям</h3>
<svg width="330" height="170" viewBox="0 0 330 170">
<rect x="0" y="20" width="240" height="24" fill="#a8551f"/><text x="248" y="37" class="mono-label">143.3 M · тело</text>
<rect x="0" y="54" width="17" height="24" fill="#1f6b66"/><text x="25" y="71" class="mono-label">10.0 M · текст</text>
<rect x="0" y="88" width="40" height="24" fill="#6d675c"/><text x="48" y="105" class="mono-label">23.9 M · хвост</text>
<line x1="0" y1="132" x2="300" y2="132" stroke="#d9d2c3"/>
<text x="0" y="152" class="mono-label" fill="#6d675c">всего 177.3M · чекпойнт 709 МБ</text>
</svg>
</div>
<div>
<h3>Арифметика на forward</h3>
<svg width="330" height="170" viewBox="0 0 330 170">
<rect x="0" y="20" width="20" height="24" fill="#1f6b66"/><text x="28" y="37" class="mono-label">20.4 · пирамида</text>
<rect x="0" y="54" width="230" height="24" fill="#e7c8b2"/><text x="238" y="71" class="mono-label" fill="#7c3d14">232 · плоский 1024</text>
<text x="0" y="106" class="mono-label" fill="#6d675c">+ хвост ≈ 29 GFLOP</text>
<text x="0" y="126" class="mono-label" fill="#6d675c">итого ≈ 50 против ≈ 262</text>
<text x="0" y="152" class="mono-label" fill="#6d675c">та же карта, в 5 раз больше шагов</text>
</svg>
</div>
<div>
<h3>Скорость и память</h3>
<svg width="330" height="170" viewBox="0 0 330 170">
<rect x="0" y="20" width="110" height="24" fill="#a8551f"/><text x="118" y="37" class="mono-label">97 мс · пирамида</text>
<rect x="0" y="54" width="222" height="24" fill="#e7c8b2"/><text x="230" y="71" class="mono-label" fill="#7c3d14">196 мс · плоский</text>
<text x="0" y="106" class="mono-label" fill="#6d675c">8.1 ГБ из 16 (bs8, 256²)</text>
<text x="0" y="126" class="mono-label" fill="#6d675c">8-битный AdamW: −1 ГБ состояний</text>
<text x="0" y="152" class="mono-label" fill="#6d675c">эффективность ~1.6 TFLOPS — упор в память</text>
</svg>
</div>
</div>
<div class="rule"></div>
<div class="grid2">
<div class="card">
<h3>Почему хватает 16 ГБ</h3>
<p class="muted">Память ест не модель (2.5 ГБ весов и состояний), а активации: они ~ токены × ширина × блоки.
Пирамида держит широкие слои на 16–64 токенах, поэтому активации маленькие.</p>
</div>
<div class="card">
<h3>Где запас</h3>
<p class="muted">Шаг упирается в память, а не в счёт. Запас есть на батч 16 (14.8 ГБ с хвостом) и на 512²
с батчем 1–2 — то есть на разрешение, где деталь физически возможна.</p>
</div>
</div>
<div class="foot"><span>UDiT · цена</span><span>10 / 12</span></div>
</section>
<!-- 11 --------------------------------------------------------------- -->
<section class="slide">
<p class="eyebrow">следующий прогон</p>
<h2>FLUX-Reason: 2 эпохи по 1.5M картинок, поток без кэша</h2>
<div class="grid2" style="margin-top:14px">
<div>
<table>
<tr><th>параметр</th><th>значение</th></tr>
<tr><td>датасет</td><td>LucasFang/FLUX-Reason-6M, часть Aesthetics-Part01 (415 шардов, ~250 ГБ)</td></tr>
<tr><td>разрешение / батч</td><td>256² · bs16</td></tr>
<tr><td>подпись</td><td>caption_entity → caption_composition (40–400 симв.), иначе caption_detail</td></tr>
<tr><td>бюджет</td><td>2 эпохи = 187 500 шагов ≈ 12.5 ч</td></tr>
<tr><td>оптимизатор</td><td>AdamW8bit, прогрев 500, cosine до 10%</td></tr>
<tr><td>дропауты</td><td>подпись 10% (CFG) · слова 5%</td></tr>
<tr><td>старт</td><td>веса бабочек (30k шагов)</td></tr>
</table>
</div>
<div>
<h3>Что уже видно (шаг 800)</h3>
<svg width="480" height="150" viewBox="0 0 480 150">
<text x="0" y="18" class="mono-label" fill="#6d675c">mse_lat общий и по зонам шума</text>
<line x1="0" y1="120" x2="470" y2="120" stroke="#d9d2c3"/>
<rect x="10" y="60" width="60" height="60" fill="#a8551f"/><text x="18" y="140" class="mono-label">0.33</text>
<rect x="110" y="113" width="60" height="7" fill="#1f6b66"/><text x="120" y="140" class="mono-label">0.037</text>
<rect x="210" y="120" width="60" height="0.5" fill="#6d675c"/>
<text x="330" y="70" class="mono-label" fill="#6d675c">low (t&lt;0.3): 0.037</text>
<text x="330" y="90" class="mono-label" fill="#6d675c">high (t&gt;0.7): 0.70</text>
<text x="330" y="110" class="mono-label" fill="#6d675c">241 мс/шаг · 66 картинок/с</text>
<text x="330" y="130" class="mono-label" fill="#6d675c">9.5 ГБ · skip 0</text>
</svg>
<p class="caption">«high» здесь в 6 раз выше, чем на бабочках: 1.5M разных сцен, «какую именно рисовать»
по подписи не угадать — это нормальный старт, а не поломка.</p>
</div>
</div>
<div class="rule"></div>
<div class="grid3">
<div><h3>Смотреть</h3><p class="muted">tmp/flux/log.csv · tmp/flux/samples/latest.png (лиса, стеклянный город, неон, импрессионист)</p></div>
<div><h3>Остановить / продолжить</h3><p class="muted">kill процесса · тот же запуск с --resume --out tmp/flux</p></div>
<div><h3>Честно про «2 эпохи»</h3><p class="muted">эпоха по Part01 = 1.5M картинок; все 4 части ≈ 1 ТБ, а на диске 352 ГБ</p></div>
</div>
<div class="foot"><span>UDiT · FLUX-Reason</span><span>11 / 12</span></div>
</section>
<!-- 12 --------------------------------------------------------------- -->
<section class="slide">
<p class="eyebrow">правила</p>
<h2>Всё, что ниже — вывод из замеров, а не из вкуса</h2>
<div class="grid2" style="margin-top:16px; gap:26px 40px">
<div>
<p><span class="tag">1</span> <b>Ширина растёт к низу.</b> <span class="muted">Плоский 1024 на всех уровнях: 196 мс и hf 0.18. Пирамида: 97 мс и 0.54.</span></p>
<p><span class="tag">2</span> <b>Текст не экономим.</b> <span class="muted">Кросс-внимание на самом мелком уровне: +2.5M и +9 мс, «switch» 0.43 → 0.78.</span></p>
<p><span class="tag">3</span> <b>Хвост учится на z0 + ошибка тела.</b> <span class="muted">Только z0 — не видит реальных ошибок; только предсказания тела — деградация 29.6 → 21.3 дБ.</span></p>
</div>
<div>
<p><span class="tag">4</span> <b>Бакеты кратны 64.</b> <span class="muted">Три даунсэмпла требуют латента, кратного 8. Аспект — центр-кроп, не растяжение.</span></p>
<p><span class="tag">5</span> <b>Метрики вместо впечатлений.</b> <span class="muted">mse_lat (общий, low, high), mse_pix, switch, tail(z0), hf(gen)/hf(AE), skip.</span></p>
<p><span class="tag">6</span> <b>Никаких костылей.</b> <span class="muted">Фиксированный шум, клип латента, «mix» латентов — выброшены: они прячут то, что мы измеряем.</span></p>
</div>
</div>
<div class="rule"></div>
<div class="grid4">
<div><h3>Дальше</h3><p class="muted">дожать FLUX-Reason до 2 эпох по Part01</p></div>
<div><h3>Потом</h3><p class="muted">люди: 5749 фото, 256² — лица и кисти</p></div>
<div><h3>Затем</h3><p class="muted">512² на людях: деталь физически разрешима</p></div>
<div><h3>Только потом</h3><p class="muted">ёмкость: ширина боттлнека и число блоков L0</p></div>
</div>
<div class="foot"><span>UDiT · правила</span><span>12 / 12</span></div>
</section>
</body>
</html>