simbiot-harness/out/meeting143_leonid_slides.html

436 lines
25 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Встреча 143 · Алекс × Леонид — выжимка и договорённости</title>
<style>
:root{
--bg:#0a0c12;
--bg2:#0e1120;
--ink:#f0eeff;
--mut:#9a97b8;
--dim:#6f6c8f;
--vio:#8b5cf6;
--vio2:#7c6cf5;
--cyan:#5eead4;
--amber:#fbbf24;
--card:rgba(255,255,255,.035);
--line:rgba(139,92,246,.28);
--serif:Georgia,"Times New Roman",serif;
--sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
background:var(--bg);
color:var(--ink);
font-family:var(--sans);
overflow:hidden;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
/* ---------- ambient backdrop ---------- */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none}
.bg::before{
content:"";position:absolute;inset:0;
background:
radial-gradient(60vw 60vw at 12% -10%, rgba(124,108,245,.20), transparent 62%),
radial-gradient(55vw 55vw at 105% 112%, rgba(94,234,212,.09), transparent 60%),
radial-gradient(70vw 40vw at 50% 120%, rgba(139,92,246,.10), transparent 65%),
linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);
}
.bg::after{ /* film grain */
content:"";position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.6'/></svg>");
}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
background:radial-gradient(120vw 90vh at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%)}
/* ---------- deck ---------- */
.deck{position:relative;z-index:2;height:100%}
.slide{
position:absolute;inset:0;
display:flex;flex-direction:column;justify-content:center;
padding:9vh 8vw 12vh;
opacity:0;transform:translateY(26px) scale(.985);
transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1);
pointer-events:none;visibility:hidden;
}
.slide.active{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.slide.prev{transform:translateY(-26px) scale(.985)}
.accent{position:absolute;top:0;left:0;right:0;height:6px;
background:linear-gradient(90deg,var(--vio) 0%,#a78bfa 38%,var(--cyan) 100%);
box-shadow:0 0 24px rgba(139,92,246,.55)}
.ghost{
position:absolute;right:4vw;bottom:2vh;z-index:-1;
font-weight:900;font-size:clamp(160px,30vw,420px);line-height:1;
color:transparent;-webkit-text-stroke:1.5px rgba(139,92,246,.13);
letter-spacing:-.04em;user-select:none}
.kicker{
display:inline-flex;align-items:center;gap:.6em;
font-size:clamp(11px,1.15vw,14px);font-weight:700;letter-spacing:.24em;
text-transform:uppercase;color:var(--vio2);margin-bottom:2.4vh;
}
.kicker::before{content:"";width:34px;height:2px;background:var(--vio);box-shadow:0 0 12px var(--vio)}
h1{font-size:clamp(38px,6.6vw,86px);font-weight:900;letter-spacing:-.03em;line-height:1.04}
h1 em{font-style:normal;background:linear-gradient(92deg,#a78bfa,var(--vio2) 55%,var(--cyan));
-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:clamp(28px,4vw,52px);font-weight:800;letter-spacing:-.025em;line-height:1.08;margin-bottom:3.6vh}
h2 .alt{color:var(--vio2)}
.sub{font-size:clamp(15px,1.6vw,21px);color:var(--mut);max-width:34em;line-height:1.55;margin-top:3vh}
.chips{display:flex;flex-wrap:wrap;gap:.7em;margin-top:4.5vh}
.chip{
font-family:var(--mono);font-size:clamp(11px,1.05vw,13px);color:var(--mut);
padding:.55em 1.1em;border:1px solid var(--line);border-radius:999px;
background:rgba(139,92,246,.07)}
.chip b{color:var(--ink);font-weight:600}
/* ---------- content blocks ---------- */
.grid{display:grid;gap:1.5vh 1.6vw}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.g2,.g3{grid-template-columns:1fr}}
.card{
background:var(--card);border:1px solid rgba(255,255,255,.07);
border-radius:18px;padding:2.6vh 1.6vw;position:relative;overflow:hidden;
backdrop-filter:blur(6px);
transition:border-color .3s,transform .3s;
}
.card:hover{border-color:var(--line);transform:translateY(-2px)}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
background:linear-gradient(180deg,var(--vio),transparent 85%);opacity:.85}
.card h3{font-size:clamp(15px,1.45vw,19px);font-weight:700;margin-bottom:1vh;letter-spacing:-.01em}
.card p,.card li{font-size:clamp(13px,1.28vw,17px);color:var(--mut);line-height:1.62}
.card p b,.card li b{color:var(--ink);font-weight:600}
.tag{display:inline-block;font-family:var(--mono);font-size:clamp(10px,.95vw,12px);
color:var(--cyan);border:1px solid rgba(94,234,212,.3);border-radius:6px;
padding:.15em .6em;margin-bottom:1.2vh;letter-spacing:.06em}
.tag.v{color:#c4b5fd;border-color:rgba(139,92,246,.4)}
.tag.a{color:var(--amber);border-color:rgba(251,191,36,.35)}
ul.list{list-style:none;display:grid;gap:1.7vh}
ul.list li{
display:flex;gap:1em;align-items:flex-start;
font-size:clamp(14px,1.5vw,19px);color:var(--mut);line-height:1.6;
}
ul.list li::before{
content:"▸";color:var(--vio);font-size:1.05em;line-height:1.5;
text-shadow:0 0 14px rgba(139,92,246,.8);flex:0 0 auto}
ul.list b{color:var(--ink);font-weight:650}
ul.list .hl{color:var(--cyan)}
.quote{
margin-top:3.2vh;padding:2.4vh 2vw;border-left:3px solid var(--vio);
background:linear-gradient(90deg,rgba(139,92,246,.12),transparent 72%);
border-radius:0 14px 14px 0;
}
.quote p{font-family:var(--serif);font-style:italic;
font-size:clamp(17px,2.1vw,27px);line-height:1.45;color:#e4e0ff}
.quote cite{display:block;margin-top:1.2vh;font-style:normal;font-family:var(--mono);
font-size:clamp(10px,1vw,13px);color:var(--dim);letter-spacing:.12em;text-transform:uppercase}
.num{display:flex;gap:1.1em;align-items:flex-start;padding:1.9vh 0;
border-bottom:1px dashed rgba(255,255,255,.09)}
.num:last-child{border-bottom:none}
.num i{
font-style:normal;font-family:var(--mono);flex:0 0 auto;
width:2.1em;height:2.1em;display:grid;place-items:center;border-radius:10px;
background:rgba(139,92,246,.16);border:1px solid var(--line);
color:#c4b5fd;font-size:clamp(12px,1.15vw,15px);font-weight:700}
.num h3{font-size:clamp(15px,1.5vw,19px);font-weight:700;margin-bottom:.5vh}
.num p{font-size:clamp(13px,1.3vw,16px);color:var(--mut);line-height:1.6}
.num b{color:var(--ink);font-weight:600}
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:1.2vw;align-items:stretch}
@media(max-width:860px){.vs{grid-template-columns:1fr}.vs .vsx{display:none}}
.vs .card{height:100%}
.vs .who{font-family:var(--mono);font-size:clamp(10px,.95vw,12px);letter-spacing:.14em;
text-transform:uppercase;color:var(--vio2);margin-bottom:1.2vh}
.vsx{display:grid;place-items:center;color:var(--dim);font-size:clamp(18px,2vw,26px)}
.big{font-size:clamp(30px,4.6vw,64px);font-weight:900;letter-spacing:-.03em;line-height:1.1}
.big em{font-style:normal;color:var(--vio2)}
/* ---------- chrome ---------- */
.progress{position:fixed;left:0;bottom:0;height:3px;z-index:10;width:0;
background:linear-gradient(90deg,var(--vio),#a78bfa,var(--cyan));
box-shadow:0 0 14px rgba(139,92,246,.8);transition:width .45s ease}
.hud{position:fixed;right:2.2vw;bottom:3vh;z-index:10;display:flex;gap:.6em;align-items:center}
.hud .count{font-family:var(--mono);font-size:12px;color:var(--dim);letter-spacing:.1em;margin-right:.8em}
.hud .count b{color:var(--mut);font-weight:600}
.hud button{
width:40px;height:40px;border-radius:12px;cursor:pointer;
border:1px solid var(--line);background:rgba(139,92,246,.1);color:#c4b5fd;
font-size:16px;display:grid;place-items:center;transition:.25s}
.hud button:hover{background:rgba(139,92,246,.25);color:#fff;transform:translateY(-1px)}
.hint{position:fixed;left:2.2vw;bottom:3vh;z-index:10;
font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.08em;opacity:.8}
.brand{position:fixed;top:2.6vh;right:2.2vw;z-index:10;
font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--dim);text-transform:uppercase}
.brand b{color:var(--vio2)}
.dots{position:fixed;right:1.4vw;top:50%;transform:translateY(-50%);z-index:10;
display:flex;flex-direction:column;gap:.55em}
.dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.16);cursor:pointer;transition:.3s}
.dots i.on{background:var(--vio);box-shadow:0 0 10px var(--vio);transform:scale(1.35)}
@media(max-width:700px){.dots{display:none}.hint{display:none}}
.end .sig{font-family:var(--mono);font-size:clamp(10px,1vw,13px);color:var(--dim);
letter-spacing:.18em;text-transform:uppercase;margin-top:5vh}
/* ---------- print ---------- */
@media print{
body{overflow:visible;background:#0a0c12}
.bg,.vignette,.hud,.hint,.dots,.progress,.brand{display:none!important}
.deck{height:auto}
.slide{position:relative;inset:auto;opacity:1!important;transform:none!important;
visibility:visible!important;pointer-events:auto;height:100vh;page-break-after:always}
}
</style>
</head>
<body>
<div class="bg"></div><div class="vignette"></div>
<div class="brand">Simbiot · <b>Кооператив 42</b></div>
<div class="deck" id="deck">
<!-- 01 · TITLE -->
<section class="slide">
<div class="accent"></div><div class="ghost">143</div>
<div class="kicker">Встреча 143 · 08.10.2026 · Jitsi + агент-визуализатор Simbiot</div>
<h1>Разговор<br>Алекса <em>× Леонида</em></h1>
<p class="sub">Выжимка двухсполовинойчасовой встречи: инфраструктура студии, пилот «мультик по рассказу», экономика локального инференса — и договорённости, которые фиксируем.</p>
<div class="chips">
<span class="chip"><b>~2.5</b> часа разговора</span>
<span class="chip"><b>8</b> тем</span>
<span class="chip"><b>4</b> договорённости</span>
<span class="chip">слайды рисовал агент <b>live</b></span>
</div>
</section>
<!-- 02 · WHO -->
<section class="slide">
<div class="accent"></div><div class="ghost">01</div>
<div class="kicker">Кто есть кто</div>
<h2>Два мира на одном звонке</h2>
<div class="grid g2">
<div class="card">
<div class="who tag v">Леонид</div>
<h3>Писатель · инвестор в deep-tech</h3>
<p>Давний знакомый студии. Инвестирует в deep-tech, в том числе <b>Anti-Aging Hero</b> с физиком Петром Федичевым. Дома — <b>DGX Spark 128GB</b> (€5000), на которой он гоняет CUDA-моделирование графов надёжности.</p>
</div>
<div class="card">
<div class="tag">Алекс · студия</div>
<h3>Живая AI-инфраструктура</h3>
<p>Показал, чем студия отличается от классической: <b>агент-визуализатор звонков</b> (демо в реальном времени), собственный <b>роутер LM-провайдеров</b> и <b>RAG</b> по всем знаниям кооператива.</p>
</div>
</div>
<div class="quote">
<p>«Первый раз такое в моей практике… польза очевидна»</p>
<cite>Леонид — после демо агент-визуализатора</cite>
</div>
</section>
<!-- 03 · DEMO -->
<section class="slide">
<div class="accent"></div><div class="ghost">02</div>
<div class="kicker">Демо инфраструктуры</div>
<h2>Что увидел Леонид <span class="alt">в прямом эфире</span></h2>
<ul class="list">
<li><span><b>Агент подключается к любому звонку</b> и рисует слайды по ходу разговора — задержка ~45 секунд (лимит генерации)</span></li>
<li><span><b>Роутер сам выбирает модель под контекст</b> — визуализация идёт на GLM 5.3 Flash</span></li>
<li><span><b>RAG по базе кооператива:</b> «он знает всё, что мы делаем» — агент отвечает со знанием всей истории студии</span></li>
<li><span>Инсайт Леонида из демо: <span class="hl">на его домашней коробочке можно крутить быструю генерацию</span> — музыку, картинки, мини-видео. Трек за минуту</span></li>
</ul>
</section>
<!-- 04 · PILOT -->
<section class="slide">
<div class="accent"></div><div class="ghost">03</div>
<div class="kicker">Главный контакт встречи</div>
<h2>Пилот: <span class="alt">мультик по рассказу Леонида</span></h2>
<div class="grid g2">
<div class="card">
<div class="tag a">Что хочет Леонид</div>
<p><b>Мульт-адаптация своих рассказов</b> (10–15 минут). Готов финансово поддержать пилот: <b>токены — точно</b>, человеческий труд — обсудить. Ориентир бюджета — <b>«в пределах 1000»</b> на эксперимент.</p>
</div>
<div class="card">
<div class="tag v">Что входит студия</div>
<p>Рассказ Леонида + <b>свобода интерпретации</b> («никаких пожеланий-ограничений»). Со стороны студии — партнёр уже строит <b>harness генерации мультиков</b>, видео-часть ведёт <b>Влад</b> (профессиональный видеомейкер + озвучка). Матч идеальный.</p>
</div>
</div>
<div class="quote">
<p>Первый шаг — аудиоспектакль: дешевле и предсказуемее. Затем видео.</p>
<cite>Дорожная карта пилота</cite>
</div>
</section>
<!-- 05 · METHOD -->
<section class="slide">
<div class="accent"></div><div class="ghost">04</div>
<div class="kicker">Творческий метод Леонида</div>
<h2>Поучительно для <span class="alt">продуктовой линзы</span></h2>
<ul class="list">
<li><span><b>Хакатон ~2018:</b> обучали нейросеть на сольных песнях Леннона и Маккартни, затем классифицировали битловские — «десяток песен правильно заклассифицировали»</span></li>
<li><span><b>Пишет с ИИ:</b> по собственной оценке ~80% — его творчество, ~20% — ИИ. Честно маркирует <span class="hl">«made with AI»</span> на after.today</span></li>
<li><span><b>Бэкграунд-тезис:</b> «литературные негры» и мастерская Микеланджело — ИИ-ассистированное творчество не ново. <b>Нова честность.</b></span></li>
</ul>
<div class="quote">
<p>ИИ-ассистированное творчество не ново — нова честность.</p>
<cite>Леонид</cite>
</div>
</section>
<!-- 06 · HARDWARE -->
<section class="slide">
<div class="accent"></div><div class="ghost">05</div>
<div class="kicker">Экономика локального инференса</div>
<h2>Спор о железе: <span class="alt">дом против облака</span></h2>
<div class="vs">
<div class="card">
<div class="who">Позиция Леонида</div>
<p><b>DGX Spark за ~1% стоимости дома</b> — нормальная цена за «домашний интеллект». Тренд: коробки станут достоянием домов.</p>
</div>
<div class="vsx">⚡</div>
<div class="card">
<div class="who">Позиция Алекса</div>
<p><b>Облачный always-on</b> — ок для большинства задач. Топовые модели для разработки софта всё равно выигрывают у локальных.</p>
</div>
</div>
<div class="quote">
<p>Сошлись на гибриде: локально — быстрая генерация (эскизы, музыка), облако — тяжёлые продуктовые задачи. У студии в планах собственный inference-сервер — в ~6 раз быстрее.</p>
<cite>Консенсус встречи</cite>
</div>
</section>
<!-- 07 · AI COMPANY -->
<section class="slide">
<div class="accent"></div><div class="ghost">06</div>
<div class="kicker">Обмен тезисами</div>
<h2>Как строить <span class="alt">AI-компанию</span></h2>
<div class="grid g2">
<div class="card">
<div class="tag">Тезис Леонида</div>
<p><b>«Vision — говно, execution — всё»</b> (шутка из EPAM). Из короткого промпта не вырастает сложная система: 10 людей с одним промптом построят 10 одинаковых Uber'ов — вариабельность требует дополнительной информации.</p>
</div>
<div class="card">
<div class="tag v">Тезис Алекса</div>
<p>Ядро студии — <b>AI-ядро, постоянно перестраивающее паттерны</b> (64 сейчас) при смене контекста. «Долгосрочно — самый большой актив». Строить бизнес на нейро-инфраструктуре с самого начала → затем автопилот. Незаменим только <b>«CEO-решатель»</b>.</p>
</div>
</div>
<div class="quote">
<p>«Я теперь понимаю, чем твоя студия отличается от классической — изюминка в AI-ядре»</p>
<cite>Леонид · метод deep-tech: продавать ценность сразу, не влюбляясь в R&D</cite>
</div>
</section>
<!-- 08 · DEALS -->
<section class="slide">
<div class="accent"></div><div class="ghost">07</div>
<div class="kicker">Итоги встречи</div>
<h2>Договорённости — <span class="alt">что фиксируем</span></h2>
<div class="num"><i>1</i><div>
<h3>Пилот анимации по рассказу Леонида</h3>
<p>Леонид покрывает токены (ориентир до <b>1000</b>), студия делает: аудио → видео, ведёт Влад. Алекс вернётся с <b>конкретным предложением</b>.</p>
</div></div>
<div class="num"><i>2</i><div>
<h3>Формат разговора продолжается</h3>
<p>Леонид открыт к следующим сессиям со студией.</p>
</div></div>
<div class="num"><i>3</i><div>
<h3>Голоса и доли за прошлые инвестиции — вопрос закрыт</h3>
<p>Леонид отказался: «это была шутка», «инвестирую из философских соображений, не создавайте ожиданий». Давления нет.</p>
</div></div>
<div class="num"><i>4</i><div>
<h3>Следующий шаг Леонида</h3>
<p>Посмотрит 35-минутную презентацию студии и вернётся с фидбэком.</p>
</div></div>
</section>
<!-- 09 · NEXT -->
<section class="slide">
<div class="accent"></div><div class="ghost">08</div>
<div class="kicker">Action items</div>
<h2>Что студии делать <span class="alt">дальше</span></h2>
<ul class="list">
<li><span><b>Подготовить оффер по мульт-пилоту</b> — объём, этап аудиоспектакля, смета токенов. Алекс озвучит Леониду предметно.</span></li>
<li><span><b>Подключить партнёрский harness генерации мультиков</b> к задаче Леонида — как первый клиентский кейс.</span></li>
<li><span><b>Зафиксировать кейс «агент-визуализатор на реальном внешнем звонке»</b> — первое демо на живом стороннем человеке, положительный фидбэк.</span></li>
</ul>
<div class="quote">
<p>От живого демо на звонке — к первому платному пилоту по генерации контента.</p>
<cite>Смысл встречи 143</cite>
</div>
</section>
<!-- 10 · END -->
<section class="slide end">
<div class="accent"></div><div class="ghost">42</div>
<div class="kicker">Встреча 143 · 08.10.2026</div>
<div class="big">«Изюминка — <em>в AI-ядре»</em></div>
<p class="sub">Simbiot · Кооператив 42 · агент-визуализатор, LM-роутер, RAG по знаниям студии. Презентация собрана из выжимки разговора — тем же агентом, что рисовал слайды live.</p>
<div class="sig">← → навигация · F — во весь экран · P — печать/PDF</div>
</section>
</div>
<div class="dots" id="dots"></div>
<div class="progress" id="prog"></div>
<div class="hud">
<span class="count" id="count"></span>
<button id="prev" title="Назад (←)">←</button>
<button id="next" title="Вперёд (→)">→</button>
</div>
<div class="hint">← → · свайп · F — фулскрин</div>
<script>
(function(){
var slides=[].slice.call(document.querySelectorAll('.slide'));
var dots=document.getElementById('dots'),prog=document.getElementById('prog'),cnt=document.getElementById('count');
var i=0,n=slides.length;
slides.forEach(function(_,k){var d=document.createElement('i');d.onclick=function(){go(k)};dots.appendChild(d);});
function pad(x){return (x<10?'0':'')+x}
function go(k){
k=Math.max(0,Math.min(n-1,k));
if(k===i&&slides[i].classList.contains('active'))return;
slides.forEach(function(s,j){
s.classList.toggle('active',j===k);
s.classList.toggle('prev',j<k);
});
i=k;
prog.style.width=((i+1)/n*100)+'%';
cnt.innerHTML='<b>'+pad(i+1)+'</b> / '+pad(n);
[].forEach.call(dots.children,function(d,j){d.classList.toggle('on',j===i)});
if(history.replaceState)history.replaceState(null,'','#'+(i+1));
}
document.getElementById('next').onclick=function(){go(i+1)};
document.getElementById('prev').onclick=function(){go(i-1)};
addEventListener('keydown',function(e){
if(e.key==='ArrowRight'||e.key==='PageDown'||e.key===' '){e.preventDefault();go(i+1)}
else if(e.key==='ArrowLeft'||e.key==='PageUp'){e.preventDefault();go(i-1)}
else if(e.key==='Home'){go(0)}
else if(e.key==='End'){go(n-1)}
else if(e.key==='f'||e.key==='F'||e.key==='а'||e.key==='А'){
if(document.fullscreenElement){document.exitFullscreen&&document.exitFullscreen()}
else{document.documentElement.requestFullscreen&&document.documentElement.requestFullscreen()}
}
});
var tx=null,ty=null;
addEventListener('touchstart',function(e){tx=e.touches[0].clientX;ty=e.touches[0].clientY},{passive:true});
addEventListener('touchend',function(e){
if(tx===null)return;
var dx=e.changedTouches[0].clientX-tx,dy=e.changedTouches[0].clientY-ty;
if(Math.abs(dx)>60&&Math.abs(dx)>Math.abs(dy)){go(dx<0?i+1:i-1)}
tx=null;
},{passive:true});
var h=parseInt((location.hash||'').replace('#',''),10);
go(isNaN(h)?0:h-1);
})();
</script>
</body>
</html>