From 6d077d05e9faa4976d55fceaaf3fd6f0a3ba3921 Mon Sep 17 00:00:00 2001 From: innoavvlasov Date: Mon, 7 Jul 2025 16:27:01 +0300 Subject: [PATCH] add article --- article.md | 428 +++++++++++ article.txt | 106 +++ primakov.md | 353 +++++++++ primakov.txt | 2035 ++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 2922 insertions(+) create mode 100644 article.md create mode 100644 article.txt create mode 100644 primakov.md create mode 100644 primakov.txt diff --git a/article.md b/article.md new file mode 100644 index 0000000..5524947 --- /dev/null +++ b/article.md @@ -0,0 +1,428 @@ +# От техсетки до «Татар сан»: как мы изобрели новый формат ИТ-конференций + +*Туториал* + +![Главное фото с конференции Татар сан] + +В 2020 году мир ИТ-конференций сломался. Онлайн убил нетворкинг, а традиционные форматы перестали работать. Рассказываю, как за 5 лет мы прошли путь от ежедневных техсеток в Сбере до флагманской конференции «Татар сан» с призовым фондом 250 тысяч рублей, собственной платформой оценки спикеров и уникальными механиками борьбы со стереотипами. + +Меня зовут Андрей Власов, я работаю в Сбере, разрабатываю сайт СберБанк Онлайн и лидирую технологический хаб Сбера в Казани. За пять лет организовал более 10 мероприятий — от внутренних митапов до конференций на 1000+ участников. + +## Проблема: что сломалось в мире ИТ-конференций + +Давайте честно признаем — мир ИТ сильно изменился, а технологические митапы и конференции не меняли механики уже много лет. + +**Что произошло в 2020 году:** +- Офлайн-мероприятия ушли в онлайн +- Нетворкинг практически умер +- Появились новые потребности в интерактиве + +**Базовые метрики конференций в 2020:** +- ✅ **Актуальность** — наконец-то качественные доклады в комфортных условиях +- ✅ **Интерактив** — рост популярности Mentimeter и QR-интерактивов +- ❌ **Нетворкинг** — RIP +- ⚠️ **Организация** — гонка собственных платформ и армий техподдержки + +Я очень люблю конференции и обмен знаниями, но когда что-то начало не устраивать в существующих форматах, решил делать свои. + +## Этап 1: Техсетка — решение проблемы масштабирования экспертизы + +![Фото с техсетки] + +Всё началось в 2019 году на проекте СберБанк Онлайн. Я был своеобразным справочным бюро — люблю помогать коллегам. Правильно организовав базу знаний и систематизировав знания по JavaScript, мог решить любой вопрос в кратчайшие сроки. + +**Проблема масштабирования:** +- Проект СберБанк Онлайн — огромный +- Ко мне ежедневно обращались десятки разработчиков +- Катастрофически не хватало времени на собственные задачи +- Дилемма: либо отказывать, либо изобретать + +**Решение — техсетка:** +- Ежедневная онлайн-встреча ровно на 1 час +- Все фронтенд-разработчики могли прийти с вопросами +- Вопросы, поступавшие в течение дня, разбирались на техсетке +- Неотвеченные вопросы переносились на следующий день + +### Эволюция формата + +Через несколько месяцев вопросы начали повторяться. Объяснять одно и то же каждый день не хотелось. Тогда я начал просить тех, кому уже что-то объяснял, повторить материал своими словами. + +**Результат:** +- Децентрализация экспертизы +- Формирование культуры шеринга знаний +- Участники становились менторами для других + +## Этап 2: Web Sbol Application meetup — первый внутренний митап + +![Фото с первого митапа] + +Спустя полгода, видя, как хорошо ребята менторят на техсетке, появилась идея сделать внутренний митап для всех фронтенд-разработчиков СберБанк Онлайн. + +**Концепция:** +- Все темы внутренние +- Фокус на частые боли разработчиков +- Доклады о том, чему инструкции уделяют недостаточно внимания +- Народный митап "от разработчиков для разработчиков" + +**Обратная связь от техлидов:** +- ❌ Недостаточно хардовости +- ❌ Низкое качество презентаций +- ❌ Неподготовленные спикеры + +Критика была конструктивной и помогла найти вектор развития. + +## Этап 3: BroJS — первый публичный митап + +![Фото с BroJS] + +Изучив форматы крупных конференций, я начал составлять свою формулу технологического митапа. Дополнительная сложность — проводить в Казани, где собрать большую аудиторию на no-name митап задача со звездочкой. + +**14 ноября 2022 — запуск BroJS:** + +Название от проекта Brokerage (раздел "Инвестиции" в СберБанк Онлайн). + +**Формула успеха:** +- 👥 Спикеры из топ-экспертов техсетки +- 📅 2 дня программы +- 📈 1-й доклад — максимально хардовый +- 🛠️ Воркшоп — короткий, хардовый, из серии "оказывается, вы код писали неправильно" +- 📊 2-й доклад — средней хардовости +- 🎯 5 спикеров + +**Результаты:** +- 1-й день: 90 участников +- 2-й день: 70 участников + +**Трудозатраты:** +- Деловая программа +- Поиск конференц-зала +- Организация кейтеринга +- Фотозоны, бейджи, мерч +- Продвижение мероприятия +- Поиск бюджета +- Лендинг с регистрацией + +## Этап 4: IT Community day — масштабирование + +![Фото с крыши ИТ-Парка] + +Как говорится, ставишь цель — ставь её высоко. Через пару месяцев я начал собирать не митап, а полноценную конференцию. + +**29 июля 2023 — IT Community day:** + +**Масштаб:** +- 20 спикеров +- 3 сцены (2 на крыше ИТ-Парка Башира Рамеева) +- Отдельная дискуссионная зона +- Арт-зоны с уникальным мерчем от дизайнеров +- Афтепати +- Команда организаторов: 40+ человек + +**Метрики:** +- 1000+ регистраций +- 500 очных участников + +### Урок о форс-мажорах + +![Фото шторма на конференции] + +**Незапланированный спецэффект:** мощнейший шторм во время мероприятия на крыше. + +Волонтёры, охрана и организаторы отработали блестяще — все остались живы и здоровы. После этого крышесносного (в прямом смысле) опыта к погодным рискам отношусь супер-серьёзно. + +**Инфраструктура:** +- Собственный Telegram-канал с контент-планом +- Детальный роадмап с ответственными +- Визуальный стиль +- Партнёрство с СберПрофи для поиска спикеров + +## Этап 5: Новый формат — стабильность и качество + +**12 октября 2024 — урок стабильности:** + +После погодного форс-мажора решили максимально снизить риски: +- Все мероприятия под крышей +- Конференц-зал школы 21 + Технохаб +- Уменьшили количество спикеров +- Добавили HR-зону с докладами о рынке и найме + +**Результаты:** +- 860 регистраций +- 470 очных участников +- Выросла конверсия при меньшем количестве спикеров + +**Новые партнёрства:** +- Сотрудничество со школой 21 +- Синхронизация мероприятий Технохаба и школы 21 +- Общий бюджет на пересекающиеся мероприятия +- Core-команда: 20 организаторов + +### Построение команды организаторов + +![Фото команды организаторов] + +К этому моменту сформировалась четкая структура команды с ключевыми ролями: + +**Основные роли:** +- 🛒 **Закупочные процедуры** — работа с поставщиками, контроль бюджета +- 🎨 **Визуальный стиль** — айдентика, оформление, мерч +- 👥 **Работа с участниками и спикерами** — коммуникации, поддержка +- 📋 **Деловая программа** — моя зона ответственности + +**Моя роль как организатора:** +- Составление деловой программы +- Работа над докладами со спикерами +- Кураторство контента +- Общая координация + +### Работа со спикерами: проверенные практики + +За годы организации выработался чёткий процесс подготовки спикеров. Самый важный этап — первый прогон доклада, где мы проверяем готовность выступления. + +Основу нашего подхода составляет чек-лист, который я позаимствовал у программного комитета HolyJS, когда сам проходил чекап доклада. Это отличный пример того, как можно учиться у крупных конференций и адаптировать их лучшие практики. + +**Чек-лист доклада спикера перед первым прогоном (адаптирован из HolyJS):** + +1. **Про что ты хочешь рассказать?** + - Основные тезисы/идея доклада + - Ключевое сообщение в одном предложении + - 3-5 главных точек, которые должна запомнить аудитория + +2. **Кому ты это хочешь рассказать?** + - Кто целевая аудитория (джуны, мидлы, сеньоры?) + - Какой опыт нужен для понимания + - На каком уровне подавать технические детали + +3. **Почему ты думаешь, что им это интересно/полезно?** + - Какую проблему решает твой доклад + - Почему люди должны слушать именно тебя + - Твоя экспертность и уникальный опыт + +4. **Что бы ты хотел, чтобы человек рассказал коллегам после доклада?** + - Главный инсайт в одном предложении + - Что должно мотивировать поделиться с командой + - Конкретные действия, которые можно предпринять + +5. **Чем послушать тебя лучше, чем 10 минут погуглить эту тему?** + - Личный опыт и кейсы + - Неочевидные решения и подводные камни + - Практические советы, которых нет в документации + +**Дополнительные критерии качества:** +- [ ] Есть ли живые демо или примеры кода? +- [ ] Можно ли применить знания сразу после доклада? +- [ ] Есть ли интерактив с аудиторией? +- [ ] Укладывается ли в тайминг (20/30/45 минут)? +- [ ] Подготовлены ли ответы на очевидные вопросы? + +Этот чек-лист помогает отсеять слабые доклады ещё на этапе подготовки и значительно повышает качество программы. + +## Этап 6: «Татар сан» — революция в механиках + +![Фото конкурса "Королева кода"] + +Параллельно прорабатывался совместный проект с ИТ-парком под названием «Татар сан» (по-татарски "сан" — цифра). + +**25 декабря 2024 — первая «Татар сан»:** + +### Новые механики против стереотипов + +**Ядро мероприятия — конкурс "Королева кода":** +- Соревнование девушек-инженеров в решении задач +- Жюри во время конкурса выступало с техдокладами +- Участники получали "два в одном" + +**Цель — битва со стереотипами:** +За счёт поднятия важных тем мы выровняли гендерное присутствие на мероприятиях и улучшили восприятие того, что мероприятие не узкоспециализированное, а предназначено для нетворкинга и развития сплочённого ИТ-сообщества в Татарстане. + +**Особенности:** +- Крутая айдентика и стиль +- Эффектное афтепати в формате шоу +- Красочное, не затянутое мероприятие +- Народ не хотел расходиться до 23:00 + +**Результаты:** +- 840 регистраций +- 470 очных участников +- В последнюю неделю перед Новым годом, в среду! + +## Этап 7: Флагманская «Татар сан» — технологический прорыв + +![Фото с воздушным шаром] + +**21 июня 2025 — флагманская версия:** + +### Маркетинговый ход +За день до мероприятия запустили брендированный воздушный шар, который произвёл неизгладимое впечатление на жителей республики и хорошо завирусился в соцсетях. + +### Технологический стек + +К этому моменту мы создали собственную технологическую экосистему: + +**Собственные разработки:** +- 🏆 **Платформа оценки спикеров** — автоматизированная система голосования и фидбека +- 🤖 **Агент общения с пользователями** — чат-бот для решения типовых вопросов +- 📊 **Агент обработки обратной связи** — автоматический анализ отзывов и предложений + +### Революционные механики + +**Мотивация для спикеров:** +- 250 000 рублей за лучший доклад +- Все доклады писались/модифицировались под мероприятие +- Единая тематика: практическое применение LLM в работе + +**Зоны и активности:** +- 🧓 **Зона ИТ-дедов** — на фоне AI-тематики контрастный посыл "раньше было лучше" +- 👩‍💻 **Женская дискуссионная зона** — обсуждение карьеры в мире мужчин и AI +- 🎨 **Татар-панк стилистика** — уникальная айдентика в оформлении и афтепати +- 💻 **Vibe coding time** — секция о том, как AI-трансформация откроет новые возможности + +![Фото зоны ИТ-дедов] +![Фото женской дискуссионной зоны] +![Фото в стиле Татар-панк] + +**Итоговые метрики:** +- 1700+ регистраций +- 1000+ очных участников + +## Анализ успеха: метрики и результаты + +### Система отслеживания эффективности + +**Основные KPI:** +- 📊 **Упоминания в соцсетях** — виральность и охват +- 📝 **Количество регистраций** — интерес к мероприятию +- 📱 **Подписчики в Telegram-канале** — формирование сообщества +- 🏢 **Улучшение качества найма** — долгосрочный эффект для региона +- ⚡ **Скорость закрытия вакансий** — влияние на ИТ-рынок Татарстана + +### Влияние на региональный ИТ-рынок + +**Конкретные результаты:** +- Увеличение скорости закрытия вакансий в регионе +- Повышение качества найма ИТ-специалистов +- Формирование сильного локального сообщества +- Улучшение репутации Казани как ИТ-центра + +### Метрики роста + +| Мероприятие | Год | Регистрации | Очные участники | +|-------------|-----|-------------|----------------| +| BroJS | 2022 | ~100 | 90/70 | +| IT Community day | 2023 | 1000+ | 500 | +| IT Community day v2 | 2024 | 860 | 470 | +| Татар сан v1 | 2024 | 840 | 470 | +| Татар сан v2 | 2025 | 1700+ | 1000+ | + +### Ключевые принципы успеха + +1. **Решение реальных проблем** — каждый формат отвечал на конкретную боль сообщества +2. **Итеративное развитие** — от техсетки к флагманской конференции за 5 лет +3. **Уникальные механики** — конкурсы, дискуссии, нестандартные зоны +4. **Локальная специфика** — татарская айдентика, региональные особенности +5. **Технологические решения** — собственные платформы и агенты +6. **Борьба со стереотипами** — гендерное равенство и инклюзивность + +### Социальное влияние + +**Достижения в области инклюзивности:** +- Выравнивание гендерного баланса участников +- Создание безопасного пространства для женщин в ИТ +- Формирование позитивного образа ИТ-сообщества +- Популяризация технологий среди широкой аудитории + +## Что изменилось в индустрии + +**Традиционные форматы:** +- Статичные доклады +- Пассивная аудитория +- Слабый нетворкинг в онлайне + +**Новые подходы:** +- Интерактивные механики +- Геймификация +- Мотивация через призы и конкурсы +- Микс онлайн/офлайн активностей +- Технологическая автоматизация процессов + +## Планы развития + +В дальнейших планах: +- Доработка текущих механик +- Добавление новых интерактивных форматов +- Расширение технологической платформы +- Цель: придать «Татар сан» культовый статус среди ИТ-специалистов + +## Топ-5 ошибок начинающих организаторов + +### 1. Переоценка аудитории +**Ошибка:** Первый митап сразу на 200-300 мест +**Решение:** Начните с 50-70 участников, лучше переполненный зал +**Личный опыт:** BroJS начинали со 100 регистраций, пришло 90 — идеально + +### 2. Слабая подготовка спикеров +**Ошибка:** Доверились "экспертам" без прогонов и проверки материала +**Решение:** Обязательный прогон + чек-лист из 5 вопросов выше +**Результат:** Качество докладов выросло с 6/10 до 8.5/10 по отзывам + +### 3. Игнорирование обратной связи +**Ошибка:** Не собирали фидбек первый год +**Решение:** Автоматизированный сбор через ботов и платформу +**Данные:** NPS вырос с 6 до 8.5 за счёт работы с отзывами + +### 4. Отсутствие запасных планов +**Ошибка:** Один сценарий развития событий +**Решение:** План А, Б, В для каждого критичного процесса +**Пример:** Запасные спикеры, дублирование оборудования, погодные риски + +### 5. Неправильное ценообразование спонсорства +**Ошибка:** Занижение стоимости пакетов на старте +**Решение:** Исследование рынка + добавленная стоимость для партнёров +**Рост:** Средний чек спонсора вырос в 3 раза за 2 года + + +## Рекомендации для организаторов + +### Чек-лист создания успешного ИТ-мероприятия + +**Этап планирования:** +- [ ] Определите реальную проблему, которую решает мероприятие +- [ ] Изучите целевую аудиторию и её потребности +- [ ] Сформируйте уникальное ценностное предложение + +**Команда:** +- [ ] Назначьте ответственных за ключевые роли +- [ ] Обеспечьте экспертизу в закупках +- [ ] Привлеките профессионалов по визуальному стилю +- [ ] Организуйте качественную работу со спикерами + +**Технологии:** +- [ ] Автоматизируйте рутинные процессы +- [ ] Внедрите системы сбора фидбека +- [ ] Создайте каналы коммуникации с участниками +- [ ] Настройте аналитику и метрики + +**Контент:** +- [ ] Итерируйтесь — каждое мероприятие должно быть лучше предыдущего +- [ ] Не бойтесь экспериментов — новые механики могут выстрелить +- [ ] Боритесь со стереотипами — иногда надо погладить против шерсти устояшуюсю культуру, чтобы привлечь аудиторию + +![Фото команды организаторов] + +## Заключение + +За 5 лет мы прошли путь от ежедневных техсеток до флагманской конференции на 1000+ участников. Главный урок: традиционные форматы ИТ-мероприятий нуждаются в кардинальном обновлении. + +**Что работает:** +- Собственные технологические решения +- Борьба со стереотипами и инклюзивность +- Уникальные механики и геймификация +- Влияние на региональный ИТ-рынок +- Системный подход к метрикам + +**Измеримые результаты:** +- Увеличение аудитории в 10 раз +- Улучшение скорости закрытия вакансий в регионе +- Формирование сильного локального сообщества + +Мир ИТ-конференций меняется. Те, кто не адаптируется к новым реалиям, рискуют остаться в прошлом. А те, кто готов экспериментировать, внедрять технологии и решать реальные проблемы сообщества, могут создать по-настоящему культовые мероприятия. \ No newline at end of file diff --git a/article.txt b/article.txt new file mode 100644 index 0000000..c001dee --- /dev/null +++ b/article.txt @@ -0,0 +1,106 @@ +Тема статьи: от маленького внутреннего JS митапчика для своих до большой конференции по gen ai тематике. + + +Приветствую. + +Меня зовут Андрей Власов, я работаю в Сбере, разрабатываю сайт СберБанк онлайн и паралельно с этим лидирую технологический хаб Сбера в Казани. + +Давайте признаемся сами себе, мир ит сильно поменялся за последнее время, а технологические митапы и конференции не меняли свои механики уже много лет. + +Начнем с того что 2020 год поломал офлайн и ит конференции перешли в онлайн, а в онлайне нетворкинг мертв. + +посмотрим на базовые метрики конференции в 2020 +Актуальность - наконецто хардовые доклады, которые можно смотреть в комфортных для себя условиях +Интерактив - рост популярности таких инструментов как минтиметр и похожих интерактивов по QR коду +Нетворкинг - RIP +Организация - развитие собственных платформ и армии тех поддержки. + +Я очень люблю конференции и обмен знаниями, но из за того что начало что то не устраивать в других конференциях, начал делать свои. + +Про свой путь организатора конференций начну из далека, за время организации получил огромное количество точек роста, но как говорится дорогу осилит идущий и руки опускать нельзя. +началось все в 2019 году, на проекте я был своего рода справочным бюро, я впринципе люблю помогать людям. +Правильно организовав базу знаний по проекту и за счет преподавания упорядочив знания по js. решал любой вопрос в очень короткий срок. Но так как проект СберБанк онлайн очень большой и ко мне с вопросами заходили 10ки разработчиков, у меня катострафически нехватало времени на свои задачи. Был выбор либо начинать отказывать, либо что то изобретать. +И так появилось такое создание как онлайн встреча техническая сессия далее техсетка, это мероприятие было ровно 1 час, каждый день куда приходили все фронтенд разработчики чтобы задать вопрос. Все поступающие ко мне вопросы в течении дня я отправлял на техсетку. если вопрос не успевали ответить он переносился на следующий день. + +в какой то момент вопросы на техсетке стали повторяться и обьяснять каждый день одно и тоже не хотелось, начал пробовать чтобы тем кому я уже что то обьяснил, пытались повторить своими словами и тем самым я отвязывал ребят от фокуса только моей компетенции в сторону децентрализации и формирования шаринга знаний внутри сообщества техсетки. + +где то через полгода, видя как хорошо менторят ребята на техсетке, появилась идея сделать внутренний митап на всех фронтенд разработчиков СберБанк онлайн. +Назвали его Web Sbol Application meetup. Темы все были внутренние, говорили в основном про частые боли, доклады от инструкций до технологий уделяют недостаточно внимания. Получился народный митап, который разработчики поддержали на ура, но вот техлиды дали развивающую обратную связь, что не хватило хардовости, качество презентаций было удручающее и спикеры не подготовленные. + +ну чтож я пошел искать референсы как надо у крупных конференций, посетив несколько +начал составлять свою формулу технологического митапчика + +нужно еще добавить что митап планировал провести в Казани, в регионах собрать большое количество человек на ноунейм митап, задача со звездочкой + +назвали митап BroJS в честь проекта на котором были Brokerage - Брокерский бизнес, в нашем ведении раздел Инвестиции в СберБанк онлайн. Стартанул он 14 ноября 2022. +Ключевые особенности: +- спикеры взяты с топ экспертов техсетки +- 2 дня +- доклад короткий воркшоп доклад +- 1й доклад хардовый +- воркшоп максимально короткий и максимально хардовый но из серии, зацени оказывается вы код писали неправильно +- 2й доклад средней хардовости +- 5 спикеров + +пришло тогда человек 90 первый день и 70 второй день +из трудозатрат: +деловая программа +поиск конф зала +организация кейтеринга +фотозоны, бейджи, подарочный мерч +рекламма мероприятия +поиск бюджета на мероприятие +лендинг мероприятия с возможностью регистрации + +Как говорится, ставишь цель ставь ее высоко. +через пару месяцев я стал собирать уже не митап а конференцию. +29 июля 2023 года случился IT Community day +20 спикеров, отдельная дискуссия, арт зоны, где тебе дизайнеры делали уникальный мерч, 3 сцены, афтепати. +2 сцены распологались на крыше ИТ Парка Башира Рамеева, техники смогли побороть какафонию, так как сцены распологались рядом. +1000+ регистраций 500 очных участников, цифры прекрасные, конфа с точки зрения уровня организации удалась. +команда организаторов выросла до 40+ человек. +Если бы не одно, но, произошел не запланированый спец эффект в виде мощнейшего шторма. Волонтеры, охраники и организаторы отработали блестяще и люди остались все живы. После этой крышесносной в прямом смысле этого слова, к погодным рискам я теперь отношусь супер серьездно. +в этой конференции уже добавился свой отдельный ТГ канал с контент планом и визуальным стилем +появился детальный роадмап что когда и кем делается. +со сборкой деловой программы помогало СберПрофи, внутри каждого профиля есть свои звездочки и так гораздо легче, так как лидеры проф сообществ берут на себя поиск спикера, подготовку и прогон доклада. Отдельный низкий поклон Арине Штерн, очень сильно помогла на той конференции со спикерами, да и сейчас прекрасно помогает с этим. Спасибо ей огромное! + + +следующую конференцию провели спустя почти полтора года 12 октября 2024 +всех разместили под крышей, взяли конф зал школы 21 и конф зал Технохаба количество спикеров уменьшили, добавили HR зону с докладами про ит рынок и подбор кандидатов. Доклады про найм и развитие сотрудников считаю не менее важными темами на проф конференциях, чем слушать доклад про опыт использования технологии. +860 регистрации +470 очных участников +конверсия поднялась, при том что количество спикеров и сцен стало меньше. +все прошло штатно и без внезапных спец эффектов. + +из нововедений мы стали делать конференцию в партнерстве со школой 21 и в этом году мы синхронизировали сетку мероприятий технохаба и школы 21, а так же сделали общий бюджет на пересекающихся мероприятиях. Попутно наши команды научились слаженно работать вместе. Core команда организаторов выросла до 20 + +Паралельно с этой конференций прорабатывался совместный проект с ИТ парком, под названием Татар сан (Татарская цифра), сан это цифра по Татарски + +Это мероприятие стало про битву со стереотипами, в конференции были заложенный яркие темы для дисскуссий. +25 декабря 2024 состоялась конференция Татар сан с новыми механиками и формулой +В ядре эвенто было соревнование между девушками инженерами в решение задач и написание кода, конкурс назывался Королева кода. А пока в режиме реального времени девушки решали задачу, те кто был заявлен в жюри, должен был показать свою проф пригодность, выступить с техническим докладом на сцене. У конкурса получилась обвязка в виде конфы. То есть очные участники получили два в одном прийдя на мероприятие. Конференцию выделял круто проработаная идентика и стиль, а так же очень крутое афтепати в виде шоу. Мероприятие получилось красочное, не затянутое деловой программой и народ не хотел расходиться до 23:00. +По цифрам было 840 регистраций +очно пришло 470 человек и это в последнюю неделю перед новым годом и еще и в среду + + +Сделал выводы на основе голосования в тг и опросов в соц сетях, поняли что новые механики народу понравились. в следующей конференции решили добавить новые механики. + +21 июня 2025 года состоялась флагманская версия Татар сан. +за день до мероприятия мы запустили воздушный шар брендированый под конференцию, что произвело неизгладимое впечатление на жителей республики и хорошо завирусилось в соцсетях. + +из новых механикам +- за лучший доклад спикер получал награду в 250к +- доклады писались или модифицировались под эвент, тематика конференции была про практическое применения LLM в работе +- зона с ит дедами, на фоне тематики про AI хорошо контрастировала с посылом раньше было лучше +- женская дискуссионая зона, где девушки обсуждали как строить карьеру в мире мужчин и AI, вызвала оченьь положительный резонанс +- разработана уникальная стилистика Татар панк, которая была ярко выраженна в интерактивных зонах, оформлении конференции и афтепати +- секция vibe coding time показала что тревожные темы про замену программистов нужно обсуждать именно в таком формате, чтобы показать что у разработчиков которые пройдут ai трансформацию ждет светлое будущее +по цифрам у нас 1700+ регистраций и 1000+ очных участников + +В дальнейших планах доработать текущий механики и добавить новые чтобы Татар сан приобрел культовый статус среди ит специалистов + + + + + + diff --git a/primakov.md b/primakov.md new file mode 100644 index 0000000..2215b95 --- /dev/null +++ b/primakov.md @@ -0,0 +1,353 @@ +# Создаём клон Gamma.app: от промпта до AI-агента на LangGraph + +*Как фронт-энд разработчик из Сбера создал аналог популярного сервиса для генерации презентаций с помощью LangChain и LangGraph* + +![Слайд с информацией о спикере](https://via.placeholder.com/800x450/2D3748/FFFFFF?text=Александр+Примаков%0A10+лет+в+IT%0A6+лет+в+Сбере) +*[0:00:02 → 0:00:50]* + +## Кто создаёт AI-сервисы сегодня? + +В списке Forbes топ-50 AI-компаний есть множество знакомых названий: OpenAI, Cursor, Bolt New. Особенно интересна компания Speak — они с 2016 года разрабатывают приложение для изучения языков с AI-помощником и попали в топ-50. + +![Слайд с компаниями, использующими AI](https://via.placeholder.com/800x450/2D3748/FFFFFF?text=Forbes+Top+50+AI+Companies%0AOpenAI%2C+Cursor%2C+Bolt+New%2C+Speak) +*[0:00:50 → 0:02:10]* + +Но главное открытие: **сейчас создавать AI-приложения можно довольно быстро**. Наши студенты делают продукты не хуже тех, что попадают в топ-рейтинги. + +## Gamma.app: что внутри магии? + +Gamma.app — это сервис для создания презентаций. Вы вводите тему, он создаёт план презентации с заголовками и буллетами для каждого слайда, а затем генерирует полную презентацию с изображениями и оформлением. + +![Демонстрация работы сервиса gamma.app](https://via.placeholder.com/800x450/4A5568/FFFFFF?text=Gamma.app+Demo%0AВводим+тему+→+План+→+Презентация) +*[0:02:10 → 0:03:12]* + +Выглядит как волшебство, но давайте разберём, как это работает изнутри. + +## Декомпозиция задачи + +Чтобы создать аналог Gamma.app, нужно решить две основные задачи: + +![Слайд с задачами для решения](https://via.placeholder.com/800x450/2B6CB0/FFFFFF?text=Задачи%0A1.+Генерация+плана+презентации%0A2.+Создание+презентации+по+плану) +*[0:03:12 → 0:04:15]* + +1. **Генерировать план презентации** — структуру с заголовками и основными пунктами +2. **Создавать презентацию** — контент, изображения и оформление на основе плана + +## Часть 1: Генерация плана с LangChain + +### Промпт-инжиниринг в реальности + +Простой промпт в ChatGPT может создать план презентации, но для продакшена нужен более сложный подход: + +![Слайд с промптом для генерации презентации](https://via.placeholder.com/800x450/2B6CB0/FFFFFF?text=Промпт+для+генерации%0A•+Уговариваем+создать+план%0A•+Описываем+типы+слайдов%0A•+Форматирование+в+JSON%0A•+Текущая+дата) +*[0:05:40 → 0:06:23]* + +Мой промпт включает: +- Инструкции по созданию плана +- Описание доступных типов слайдов (титульный, контентный и т.д.) +- Требования к формату JSON +- Текущую дату (важно для актуальных тем) + +### Шаблоны в LangChain + +LangChain предоставляет механизм шаблонов для удобной работы с промптами: + +```typescript +const template = ` +Создай план презентации на тему {topic}. +Учти следующие требования: {requirements} +Текущая дата: {current_date} +{format_instructions} +`; +``` + +Переменные в фигурных скобках заменяются на реальные значения при выполнении. + +### Структурированный вывод с Zod + +Для надёжной работы с JSON-ответами использую Zod для описания схемы: + +![Слайд с описанием JSON схемы](https://via.placeholder.com/800x450/2B6CB0/FFFFFF?text=JSON+Schema+с+Zod%0Apresentation%3A+%7B%0A++title%3A+string%0A++slides%3A+array%0A++imageStyle%3A+string%0A%7D) +*[0:06:23 → 0:08:00]* + +```typescript +const presentationSchema = z.object({ + title: z.string().describe("Заголовок презентации"), + description: z.string().describe("Описание презентации"), + imageStyle: z.string().describe("Общий стиль изображений"), + slides: z.array(z.object({ + title: z.string().describe("Заголовок слайда"), + bullets: z.array(z.string()).describe("Основные пункты"), + imagePrompt: z.string().describe("Промпт для генерации изображения"), + webSearchQuery: z.string().optional().describe("Запрос для поиска в интернете") + })) +}); +``` + +### Создание цепочки LangChain + +![Слайд с описанием работы парсера ответа от LLM](https://via.placeholder.com/800x450/2B6CB0/FFFFFF?text=LangChain+Pipeline%0ATemplate+→+Model+→+Parser+→+JSON) +*[0:08:00 → 0:09:25]* + +```typescript +const parser = StructuredOutputParser.fromZodSchema(presentationSchema); +const chain = template.pipe(model).pipe(parser); + +const result = await chain.invoke({ + topic: "Фотографирование котят", + format_instructions: parser.getFormatInstructions(), + current_date: new Date().toISOString() +}); +``` + +![Демонстрация распарсенного JSON](https://via.placeholder.com/800x450/2B6CB0/FFFFFF?text=Результат+парсинга%0A%7B%0A++title%3A+%22Фотографирование+котят%22%0A++slides%3A+%5B...%5D%0A%7D) +*[0:09:25 → 0:09:55]* + +## Часть 2: Создание презентации с LangGraph + +Для генерации самой презентации простого LangChain недостаточно. Нужны: +- Поиск в интернете для актуальной информации +- Генерация изображений для каждого слайда +- Создание контента с учётом контекста +- Условная логика и роутинг + +![Демонстрация аналога сервиса gamma.app](https://via.placeholder.com/800x450/4A5568/FFFFFF?text=Клон+Gamma.app%0AГенерация+презентации%0Aпо+готовому+плану) +*[0:09:55 → 0:10:57]* + +Здесь на помощь приходит **LangGraph**. + +## Архитектура LangGraph: от нод к агентам + +![Слайд с объяснением работы LangGraph](https://via.placeholder.com/800x450/2B6CB0/FFFFFF?text=LangGraph+Architecture%0ANodes+→+Edges+→+State+→+Graph) +*[0:10:57 → 0:26:20]* + +### Основные концепции + +LangGraph работает с **нодами** (nodes) — функциями, которые выполняют конкретные задачи: +- Каждая нода получает состояние и обновляет его +- Между нодами есть рёбра (edges) для управления потоком +- Возможен условный роутинг и циклы +- Единое состояние передаётся между всеми нодами + +### Архитектура моего клона + +Я создал компактный и эффективный граф из нескольких нод: + +1. **Prepare** — подготовка данных и присвоение ID слайдам +2. **Router** — решение, нужен ли веб-поиск +3. **WebSearch** — поиск актуальной информации +4. **Generate Images** — генерация изображений +5. **Generate Content** — создание контента слайдов +6. **Final** — финализация результата + +### Нода подготовки данных + +```typescript +async function prepareNode(state: GraphState): Promise> { + const presentation = state.presentation; + + // Присваиваем ID каждому слайду + presentation.slides.forEach((slide, index) => { + slide.id = `slide-${index}`; + }); + + return { presentation }; +} +``` + +### Условный роутинг + +Для принятия решений использую **Conditional Edge**: + +```typescript +function routeToWebSearch(state: GraphState): string[] { + const sends = []; + + state.presentation.slides.forEach(slide => { + if (slide.webSearchQuery) { + sends.push( + new Send("webresearch", { slide }) + ); + } + }); + + return sends.length > 0 ? sends : ["generate"]; +} +``` + +### Веб-поиск с Tavily + +Для поиска актуальной информации использую Tavily API: + +```typescript +async function webSearchNode(data: { slide: Slide }): Promise> { + const tavily = new TavilySearchResults({ + maxResults: 5, + searchDepth: "advanced" + }); + + const results = await tavily.search(data.slide.webSearchQuery); + + // Экранируем фигурные скобки в коде + const cleanResults = results.replace(/\{/g, '{{').replace(/\}/g, '}}'); + + return { + webSearchResults: { + [data.slide.id]: cleanResults + } + }; +} +``` + +**Важный момент**: LangChain воспринимает фигурные скобки как переменные шаблона, поэтому код нужно экранировать двойными скобками. + +### Генерация изображений с Kandinsky + +Для генерации изображений использую российскую нейросеть Kandinsky через API: + +```typescript +async function generateImageNode(data: { + slide: Slide, + imageStyle: string +}): Promise> { + const kandinsky = new KandinskyAPI(); + + const imagePrompt = `${data.slide.imagePrompt}, ${data.imageStyle}`; + const image = await kandinsky.generateImage({ + prompt: imagePrompt, + negativePrompt: data.slide.negativeImagePrompt, + width: data.slide.type === 'title' ? 512 : 768, + height: data.slide.type === 'title' ? 512 : 432 + }); + + return { + generatedImages: { + [data.slide.id]: image.url + } + }; +} +``` + +### Генерация контента с сохранением контекста + +Самая интересная часть — создание контента с учётом предыдущих слайдов: + +```typescript +async function generateContentNode(state: GraphState): Promise> { + const messages = [ + { role: 'system', content: 'Ты создаёшь контент для слайдов презентации...' } + ]; + + for (const slide of state.presentation.slides) { + // Добавляем запрос на генерацию контента + messages.push({ + role: 'user', + content: `Создай контент для слайда "${slide.title}". + Используй найденную информацию: ${state.webSearchResults[slide.id] || ''} + Основные пункты: ${slide.bullets.join(', ')}` + }); + + // Получаем ответ от LLM + const response = await model.invoke(messages); + messages.push({ role: 'assistant', content: response }); + + // Запрашиваем комментарий для спикера + messages.push({ + role: 'user', + content: 'Добавь комментарий для спикера: что рассказывать по этому слайду?' + }); + + const speakerNotes = await model.invoke(messages); + messages.push({ role: 'assistant', content: speakerNotes }); + + // Сохраняем результат + slide.content = response; + slide.speakerNotes = speakerNotes; + } + + return { presentation: state.presentation }; +} +``` + +Такой подход **сохраняет контекст** между слайдами, позволяя создавать логически связанные презентации. + +### Сборка графа воедино + +```typescript +const graph = new StateGraph(GraphState) + .addNode("prepare", prepareNode) + .addNode("webresearch", webSearchNode) + .addNode("generateImages", generateImageNode) + .addNode("generateContent", generateContentNode) + .addNode("final", finalNode) + .setEntryPoint("prepare") + .addConditionalEdges("prepare", routeToWebSearch) + .addEdge("webresearch", "generateImages") + .addEdge("generateImages", "generateContent") + .addEdge("generateContent", "final") + .setFinishPoint("final"); + +const app = graph.compile(); + +// Запуск генерации +const result = await app.invoke({ + presentation: planFromLangChain +}); +``` + +## Технологический стек + +- **LangChain** — для простых цепочек обработки +- **LangGraph** — для сложных сценариев с условными переходами +- **Zod** — для структурированного вывода +- **Tavily** — для веб-поиска +- **Kandinsky API** — для генерации изображений +- **TypeScript** — для типизации и надёжности + +## Оптимизация и экономика + +### Параллельное выполнение + +LangGraph позволяет запускать ноды параллельно. Например, генерация изображений для разных слайдов происходит одновременно, что значительно ускоряет процесс. + +### Стоимость генерации + +Примерная стоимость создания презентации из 8 слайдов: +- Планирование: ~$0.02 +- Веб-поиск: ~$0.01 +- Генерация изображений: ~$0.06 +- Создание контента: ~$0.02 + +**Итого: ~$0.11** себестоимость при продажной цене $2-5. + +## Практические советы + +1. **Экранируйте фигурные скобки** в коде, иначе LangChain будет пытаться их интерпретировать +2. **Используйте Zod** для гарантированной структуры ответов +3. **Сохраняйте контекст** между запросами для связности контента +4. **Тестируйте промпты** на разных темах и языках +5. **Добавляйте текущую дату** для актуальных тем + +## Заключение + +Создание AI-агентов — это **не rocket science**. Фронт-энд разработчик может создать полноценный аналог коммерческого сервиса, используя современные инструменты. + +Главное — **пробовать и экспериментировать**. Это направление развивается очень быстро, и скоро каждый разработчик будет работать с AI-агентами. + +![QR-код для доступа к приложению](https://via.placeholder.com/200x200/2D3748/FFFFFF?text=QR+Code%0AГенератор+презентаций) + +*QR-код для доступа к демо-версии клона Gamma.app* + +--- + +*Статья основана на докладе Александра Примакова, фронт-энд разработчика Сбера с 10-летним опытом в IT. Александр также преподаёт в университетах и успешно запустил курс по созданию AI-агентов для магистрантов КФУ.* + +### Полезные ссылки + +- [LangChain Documentation](https://langchain.com/docs) +- [LangGraph Tutorial](https://langchain.com/langgraph) +- [Zod Schema Validation](https://zod.dev/) +- [Tavily Search API](https://tavily.com/) +- [Kandinsky API](https://fusionbrain.ai/) + +**Хэштеги:** #AI #LangChain #LangGraph #TypeScript #Презентации #Kandinsky #MachineLearning \ No newline at end of file diff --git a/primakov.txt b/primakov.txt new file mode 100644 index 0000000..26746f0 --- /dev/null +++ b/primakov.txt @@ -0,0 +1,2035 @@ +Тайм коды со слайдами +**слайд** обо мне [0:00:02 → 0:00:50] +**слайд** компании использующие AI [0:00:50 → 0:02:10] +**слайд** демонстрация работы сервиса gamma.app [0:02:10 → 0:03:12] +**слайд** задачи которые нужно решить чтобы сделать аналог [0:03:12 → 0:04:15] +**слайд** план создания презентации в видео строки [0:04:15 → 0:05:14] +**слайд** о langChain и langGraph [0:05:15 → 0:05:40] +**слайд** промт для генерации презентации [0:05:40 → 0:06:23] +**слайд** описание json схемы [0:06:23 → 0:08:00] +**слайд** описание работы парсера ответа от LLM [0:08:00 → 0:09:25] +**слайд** демонстрация распарсеного json [0:09:25 → 0:09:55] +**слайд** демонстрация аналога сервиса gamma.app [0:09:55 → 0:10:57] +**слайд** объяснение работы langGraph [0:10:57 → 0:26:20] + +[0:00:00 → 0:00:01] +Смотрим, как они устроены. + +[0:00:02 → 0:00:03] +Пару слов о себе. + +[0:00:03 → 0:00:09] +Меня зовут Александр, около 10 лет опыта в IT и 6 из них это работа в Сбере, уже больше половины получается. + +[0:00:10 → 0:00:14] +В Сбере я фронт-энд разработчик и мой основной инструмент это TypeScript. + +[0:00:16 → 0:00:20] +Но кроме того, что я работаю в Сбере, я еще преподаю в университетах. + +[0:00:21 → 0:00:28] +С коллегами моими используем учебную платформу самописную, на которой я как бы full-stack разработчик получается. + +[0:00:28 → 0:00:31] +Там и фронт-энд, и бэк-энд, и ICD, база данных, в общем, все на мне. + +[0:00:32 → 0:00:35] +И в этом году мы запустили курс по созданию AI-агентов. + +[0:00:35 → 0:00:45] +И успешно с магистрами Казанского федерального университета прошли этот курс, они создали приложение с AI-агентами. + +[0:00:46 → 0:00:48] +Вот, но о чем я хотел поговорить. + +[0:00:48 → 0:00:52] +Хайповые AI-сервисы у Forbes, даже есть список на этот счет. + +[0:00:52 → 0:00:58] +Топ 50 компаний, которые на AI-сервисах основаны. + +[0:00:58 → 0:01:01] +Здесь не очень удобно, потому что они отсортированы по алфавиту. + +[0:01:01 → 0:01:05] +Наверное, интереснее посмотреть по деньгам, если их пересортировать. + +[0:01:05 → 0:01:09] +Вот видно, что OpenAI на первом месте, понятно. + +[0:01:10 → 0:01:15] +Но здесь очень много компаний, которые вы наверняка слышали или пользовались их сервисами. + +[0:01:22 → 0:01:25] +Создатели Bolt New, Cursor, все здесь. + +[0:01:26 → 0:01:28] +Ну, меня заинтересовало. + +[0:01:28 → 0:01:33] +Приложение, которое, точнее, компания, вот чуть ниже, Speak называется тоже. + +[0:01:34 → 0:01:36] +Топ 50 входит. + +[0:01:36 → 0:01:41] +Они разработали приложение для изучения иностранных языков с помощью искусственного интеллекта. + +[0:01:41 → 0:01:43] +С помощью AI-агента, помощника. + +[0:01:44 → 0:01:47] +Я его скачал, попробовал, в принципе, неплохо. + +[0:01:47 → 0:01:52] +Но я вам так скажу, что наши студенты, в принципе, делают не хуже, уж точно, не хуже приложения. + +[0:01:52 → 0:01:56] +Хотя здесь они, например, с 2016 года давно работали над ним. + +[0:01:57 → 0:01:58] +Но вот сейчас. + +[0:01:58 → 0:02:01] +Уже можно довольно быстро создавать такие вещи. + +[0:02:01 → 0:02:04] +Давайте разбираться, как они делаются. + +[0:02:04 → 0:02:07] +Как разрабатываются приложения с AI-агентами. + +[0:02:07 → 0:02:11] +В качестве подобного я решил выбрать GumUp. + +[0:02:12 → 0:02:13] +Вспомним, что такое GumUp. + +[0:02:13 → 0:02:16] +Это приложение для создания презентаций. + +[0:02:17 → 0:02:20] +Вот, вводим, что мы хотим, на какую тему мы хотим презентацию. + +[0:02:20 → 0:02:26] +Она нам создает план презентации, где расписывает про каждый слайд, заголовок. + +[0:02:26 → 0:02:27] +Ну и буллеты, коротко там. + +[0:02:27 → 0:02:28] +Один, два, три просто. + +[0:02:28 → 0:02:30] +О чем слайд должен быть. + +[0:02:30 → 0:02:34] +После создания плана нажимаем создать презентацию и она создается. + +[0:02:35 → 0:02:37] +Просто волшебство какое-то. + +[0:02:37 → 0:02:39] +Каждый слайд появляется последовательно. + +[0:02:39 → 0:02:42] +Для каждого слайда там почти для каждого. + +[0:02:42 → 0:02:43] +Генерируется изображение. + +[0:02:43 → 0:02:45] +Буллеты как-то оформляются. + +[0:02:47 → 0:02:51] +Текст тоже как-то все красиво компонуется. + +[0:02:52 → 0:02:55] +И вуаля, просто вот презентация готова. + +[0:02:56 → 0:02:56] +Сгенерирована. + +[0:02:56 → 0:02:59] +Причем довольно красиво получается. + +[0:02:59 → 0:03:01] +В общем-то он все логично расписал. + +[0:03:01 → 0:03:09] +То, что если хотим учиться фотографировать котят, нам нужно подумать об свете, о настройках камеры, выбор ракурса, в общем, такого. + +[0:03:09 → 0:03:11] +Ну давайте декомпозировать. + +[0:03:11 → 0:03:12] +Как такие вещи делать? + +[0:03:12 → 0:03:13] +Значит, первое и второе. + +[0:03:13 → 0:03:16] +Нам глобально надо решить две задачи. + +[0:03:16 → 0:03:20] +Это генерировать план презентации. + +[0:03:20 → 0:03:22] +Ну и саму презентацию на основе этого плана. + +[0:03:23 → 0:03:24] +Вот такие две части. + +[0:03:24 → 0:03:26] +Как разрабатывать план презентации? + +[0:03:26 → 0:03:28] +Ну самый простой путь просто. + +[0:03:28 → 0:03:34] +Берем, открываем любой чатик с искусственным интеллектом, просим его создать нам план презентации. + +[0:03:34 → 0:03:36] +Довольно несложный промпт. + +[0:03:36 → 0:03:38] +Вот я открыл гигачат, посмотрел. + +[0:03:38 → 0:03:41] +Он мне генерирует, в принципе, примерно то же самое. + +[0:03:42 → 0:03:46] +То есть какие-то слайды, темы для каждого слайда и буллеты. + +[0:03:47 → 0:03:48] +О чем должен быть этот слайд? + +[0:03:48 → 0:03:51] +И здесь, в принципе-то, и план такой же. + +[0:03:51 → 0:03:53] +Может быть, чуть другая последовательность. + +[0:03:53 → 0:03:55] +Подумать о композиции, ракурсе. + +[0:03:56 → 0:03:57] +Настроить камеру, настроить свет. + +[0:03:57 → 0:04:01] +Как-то договориться с котенком о том, что мы его будем фотографировать. + +[0:04:01 → 0:04:02] +Ну, в таком плане. + +[0:04:04 → 0:04:07] +Я разработал приложение, которое похоже на Gama App. + +[0:04:07 → 0:04:11] +Можно сказать, клон Gama App, на основе которого я это все буду рассказывать. + +[0:04:11 → 0:04:14] +И у меня в приложении промпт выглядит чуть больше. + +[0:04:14 → 0:04:16] +Вообще, он выглядит вот так. + +[0:04:16 → 0:04:17] +Это огромная-огромная строка. + +[0:04:18 → 0:04:21] +Не пугайтесь, я сейчас разберу, из чего она состоит. + +[0:04:21 → 0:04:25] +В общем-то, тут есть первая такая часть, где я уговариваю его. + +[0:04:26 → 0:04:27] +Создать план. + +[0:04:27 → 0:04:28] +Объясняю, что мы будем создавать план. + +[0:04:31 → 0:04:34] +И расписываю, какие виды слайдов существуют. + +[0:04:34 → 0:04:37] +Какие бывают, которые моя система готова. + +[0:04:37 → 0:04:40] +Потом воспроизводить титульный слайд, там, контентный и так далее. + +[0:04:41 → 0:04:45] +Потом довольно большая часть, которая относится к форматированию ответа. + +[0:04:45 → 0:04:49] +Я хочу получить ответ, ну, не в формате текста или Markdown. + +[0:04:49 → 0:04:51] +Мне будет удобнее работать с форматом JSON. + +[0:04:53 → 0:04:55] +И здесь описывается этот формат. + +[0:04:56 → 0:04:59] +Ну, и в конце я добавляю еще текущую дату. + +[0:04:59 → 0:05:04] +Нейросетям неплохо бы в промптах добавлять информацию о текущей дате. + +[0:05:04 → 0:05:08] +Чтобы он учитывал и понимал, что если просят что-то новенькое, + +[0:05:08 → 0:05:10] +то нужно сходить в интернет и поискать. + +[0:05:13 → 0:05:17] +Делаются такие вещи, в общем-то, не руками, а с помощью фреймворков. + +[0:05:17 → 0:05:21] +Хотя, безусловно, все это и руками можно создать и отправить, но это неудобно. + +[0:05:21 → 0:05:24] +При масштабировании уже становится понятно. + +[0:05:25 → 0:05:26] +Сложно расти. + +[0:05:26 → 0:05:30] +Нужно пользоваться фреймворками, которые как раз позволяют свое решение масштабировать. + +[0:05:31 → 0:05:32] +Лонгчейн и лонгграф, в общем. + +[0:05:34 → 0:05:37] +Для создания плана презентации нам будет достаточно лонгчейна. + +[0:05:37 → 0:05:39] +А вот для самой презентации уже будем использовать лонгграф. + +[0:05:40 → 0:05:46] +Как с помощью лонгчейна создать вот этот большой-большой промпт для генерации плана? + +[0:05:46 → 0:05:49] +В общем-то, используется для этого шаблоны. + +[0:05:49 → 0:05:52] +В лонгчейне есть такой механизм, как вот шаблоны. + +[0:05:53 → 0:05:55] +Мы тут здесь описываем то, + +[0:05:55 → 0:05:57] +что хотим описать, то, что статично, + +[0:05:57 → 0:06:01] +а все вещи, которые будут потом должны быть заполнены, + +[0:06:01 → 0:06:04] +мы обрамляем вот так, фигурные скобки, и название включаем. + +[0:06:04 → 0:06:07] +То есть потом пользователь к нам придет с названием презентации, + +[0:06:07 → 0:06:10] +и мы вот топик подменим на тему, которую он нам прислал. + +[0:06:11 → 0:06:13] +И так далее, все в шаблоне заменим. + +[0:06:13 → 0:06:14] +Это самое простое. + +[0:06:14 → 0:06:17] +А вот насчет инструкций по форматированию, вот можно видеть, + +[0:06:17 → 0:06:20] +что внизу есть вот такая вещь, формат instructions. + +[0:06:21 → 0:06:24] +Вот ее нужно заполнить этими инструкциями для форматирования. + +[0:06:24 → 0:06:25] +Как они делаются? + +[0:06:26 → 0:06:30] +В общем-то, можно JSON-схему, конечно, положить туда руками, + +[0:06:30 → 0:06:33] +но на разных языках это делается чуть по-разному. + +[0:06:34 → 0:06:36] +Примерно всегда есть какая-то обертка. + +[0:06:37 → 0:06:40] +На TypeScript у нас это Zot библиотечка, + +[0:06:40 → 0:06:44] +которая очень популярна стала для описания форм объектов. + +[0:06:45 → 0:06:47] +И вот здесь я как раз описываю, что у нас есть презентация. + +[0:06:48 → 0:06:51] +Глобального презентации в целом есть какое-то заголовок, + +[0:06:51 → 0:06:52] +какое-то описание. + +[0:06:52 → 0:06:54] +Я это делаю, потому что, ну, по-моему, + +[0:06:54 → 0:06:58] +пользователь может опечататься или как-то несуразно сформулировать тему, + +[0:06:58 → 0:07:00] +которую, может быть, нейросеть решит переформулировать, + +[0:07:01 → 0:07:02] +ну, плюс добавить описание. + +[0:07:02 → 0:07:04] +Ну и когда мы генерируем план презентации, + +[0:07:04 → 0:07:06] +в этот момент неплохо бы добавить что-то общее, + +[0:07:06 → 0:07:09] +что будет актуально для всей презентации. + +[0:07:09 → 0:07:11] +Например, общий стиль изображений. + +[0:07:11 → 0:07:14] +Что гамап вы видели, что у меня, посмотрите, + +[0:07:14 → 0:07:16] +что картинки генерируются в едином стиле, + +[0:07:16 → 0:07:19] +едином и для всей презентации. + +[0:07:19 → 0:07:22] +Вот здесь формируется этот стиль глобальный. + +[0:07:22 → 0:07:23] +Ну, а потом каждый слайд. + +[0:07:24 → 0:07:25] +У слайда должен быть заголовок, + +[0:07:25 → 0:07:27] +у него может быть контентная часть, + +[0:07:27 → 0:07:30] +но на этапе планирования, в общем-то, она не заполняется. + +[0:07:31 → 0:07:34] +Буллеты — это как раз вот массив строк про то, + +[0:07:34 → 0:07:36] +о чем слайд, первый, второй, третий, + +[0:07:36 → 0:07:38] +ну и какие-то еще дополнительные вещи, + +[0:07:38 → 0:07:40] +которые мы можем захотеть. + +[0:07:40 → 0:07:43] +Естественно, мы это описываем не просто набором ключей, + +[0:07:43 → 0:07:46] +а для каждого ключа описываем тип этого ключа + +[0:07:46 → 0:07:51] +и через describe описываем, о чем этот ключ. + +[0:07:51 → 0:07:53] +То есть если title — это строка, понятно, + +[0:07:54 → 0:07:56] +то что это за строка описывается уже через describe, + +[0:07:56 → 0:07:57] +как ее заполнять. + +[0:07:58 → 0:07:59] +Вот. + +[0:08:00 → 0:08:03] +После того, как мы эти вещи применим, + +[0:08:03 → 0:08:05] +мы сможем получить финальный промт. + +[0:08:05 → 0:08:06] +Как это делается? + +[0:08:06 → 0:08:09] +Мы берем, тут пример из документации, + +[0:08:10 → 0:08:13] +мы берем Structured Output Parser, + +[0:08:14 → 0:08:17] +который инициализируем из этой ZOT-схемы. + +[0:08:17 → 0:08:19] +Потом нам нужен промт, + +[0:08:19 → 0:08:23] +в котором мы пометим какое-то место, + +[0:08:23 → 0:08:27] +в которое попадет инструкция по форматированию в конечном итоге. + +[0:08:27 → 0:08:29] +Вот такой формат instructions + +[0:08:29 → 0:08:32] +где-то нужно разместить внутри нашего промта. + +[0:08:33 → 0:08:35] +Затем туда добавляются модели parser, + +[0:08:35 → 0:08:39] +то есть мы формируем chain для long chain. + +[0:08:39 → 0:08:42] +Первым в этой цепочке получается template, + +[0:08:42 → 0:08:44] +потом модель, потом parser, + +[0:08:44 → 0:08:46] +который нам на выходе выдаст как раз JSON. + +[0:08:47 → 0:08:48] +Вот. + +[0:08:49 → 0:08:51] +Инструкции по форматированию получаются, ну, + +[0:08:51 → 0:08:53] +вызовом метода getFormatInstructions. + +[0:08:53 → 0:08:55] +Тут, в общем-то, тоже как бы магии нету. + +[0:08:55 → 0:08:57] +В момент, когда мы запускаем цепочку, + +[0:08:57 → 0:09:01] +мы этот ключ формат instructions заполняем вызовом этого метода + +[0:09:02 → 0:09:02] +getFormatInstructions. + +[0:09:03 → 0:09:07] +То есть getFormatInstructions просто выдает нам конкретное сообщение, + +[0:09:07 → 0:09:11] +что там, пожалуйста, следуй вот такой JSON-схеме, + +[0:09:11 → 0:09:16] +отдай мне ответ, строго соблюдая этот контракт. + +[0:09:18 → 0:09:20] +Ну и, кроме того, можем заполнить дополнительные вещи, + +[0:09:20 → 0:09:24] +то есть в моем случае пользователь приходит с темой презентации, + +[0:09:24 → 0:09:26] +может быть, с каким-то дополнительным описанием, + +[0:09:26 → 0:09:27] +я все это прокидываю в prompt. + +[0:09:28 → 0:09:29] +Выглядит это вот таким образом. + +[0:09:29 → 0:09:33] +Если это вызвать, то искусственный интеллект начинает нам возвращать + +[0:09:33 → 0:09:36] +большую-большую строку, которая внутри содержит JSON. + +[0:09:38 → 0:09:42] +В этом JSON просто вот заполнены те ключи, которые я описывал. + +[0:09:42 → 0:09:44] +Ну, где-то он даже контент заполняет, + +[0:09:44 → 0:09:46] +но потом я в любом случае контент формирую уже отдельно, + +[0:09:46 → 0:09:49] +когда презентация целиком генерируется. + +[0:09:50 → 0:09:53] +Вот. Значит, ну тут примерно то же самое. + +[0:09:53 → 0:09:54] +Профотографирование котят. + +[0:09:55 → 0:09:57] +Посмотрим, как это выглядит у меня. + +[0:09:59 → 0:10:02] +Я закидываю тему презентации, прошу сгенерировать план, + +[0:10:02 → 0:10:06] +и вот начинает прилетать этот JSON, который я показывал, + +[0:10:06 → 0:10:08] +он разбирается, и мы генерируем план. + +[0:10:09 → 0:10:11] +Ну, интересно, что в моем случае я решил, + +[0:10:12 → 0:10:15] +что было бы неплохо ходить в интернет для некоторых тем, + +[0:10:15 → 0:10:17] +а для некоторых слайдов, + +[0:10:17 → 0:10:20] +если искусственный интеллект так решит, + +[0:10:20 → 0:10:23] +если мой AI-агент захочет что-то поискать в интернете. + +[0:10:23 → 0:10:26] +Ну и здесь я генерирую промпт для изображения + +[0:10:26 → 0:10:28] +и негативный промпт для изображения, + +[0:10:28 → 0:10:30] +чтобы потом диффузионной моделькой, собственно, + +[0:10:30 → 0:10:33] +сгенерировать изображение с промптом и негативным промптом. + +[0:10:34 → 0:10:37] +Вот. Затем нажимаем «Создать презентацию». + +[0:10:37 → 0:10:39] +В принципе, с планом мы разобрались. + +[0:10:39 → 0:10:43] +И вот как выглядит создание презентации. + +[0:10:44 → 0:10:44] +Нажимаем. + +[0:10:46 → 0:10:47] +Немножко подвисло. + +[0:10:51 → 0:10:53] +Видео немножко подвисло, к сожалению. + +[0:10:53 → 0:10:56] +Но можно сходить на сайт и посмотреть, + +[0:10:56 → 0:10:57] +как оно там генерируется. + +[0:10:58 → 0:11:02] +Как же генерировать вот такие более сложные вещи, + +[0:11:02 → 0:11:03] +как слайды? + +[0:11:03 → 0:11:05] +Это уже не просто план, где, в принципе, + +[0:11:05 → 0:11:08] +одной текстовкой можно одним запросом обойтись. + +[0:11:08 → 0:11:10] +А здесь вот, когда мы генерируем слайды, + +[0:11:10 → 0:11:11] +каждый слайд — это какой-то контент, + +[0:11:11 → 0:11:14] +тоже заголовок, изображение. + +[0:11:14 → 0:11:16] +Может, надо сходить в интернет, чего-то поискать, + +[0:11:16 → 0:11:18] +и всё это собрать в кучу. + +[0:11:18 → 0:11:20] +В общем, здесь уже более сложные вещи. + +[0:11:20 → 0:11:21] +Здесь нам поможет ланграф. + +[0:11:22 → 0:11:25] +Как раз этот фреймворк позволяет уже более сложные вещи делать. + +[0:11:27 → 0:11:30] +Когда мы пользуемся ланграфом, + +[0:11:30 → 0:11:32] +мы описываем логику в форме нод, + +[0:11:32 → 0:11:34] +в форме узлов логики, + +[0:11:34 → 0:11:37] +каждый из которых является функцией + +[0:11:37 → 0:11:38] +и делает что-то своё. + +[0:11:39 → 0:11:41] +У такого графа будет какая-то входная нода + +[0:11:41 → 0:11:42] +и какая-то выходная нода. + +[0:11:43 → 0:11:44] +И между ними будет, конечно, + +[0:11:44 → 0:11:46] +как-то распределяться логика. + +[0:11:46 → 0:11:48] +То есть мы можем делать что-то последовательно. + +[0:11:49 → 0:11:50] +Каждая нода делает что-то своё. + +[0:11:51 → 0:11:53] +Может быть, генерирует изображение, + +[0:11:53 → 0:11:54] +может быть, входит в интернет, + +[0:11:54 → 0:11:55] +может быть, что-то ещё. + +[0:11:55 → 0:11:59] +Не обязательно, чтобы путь, + +[0:11:59 → 0:12:00] +по которому перемещается логика, + +[0:12:00 → 0:12:02] +был именно таким последовательным. + +[0:12:03 → 0:12:05] +Потому что это, в принципе, делает лангчейн. + +[0:12:05 → 0:12:07] +А для более сложных вещей + +[0:12:07 → 0:12:09] +у нас есть возможность описать роутинг + +[0:12:09 → 0:12:13] +и по каким-то условиям ходить в одни ноды, + +[0:12:13 → 0:12:14] +не ходить в другие. + +[0:12:14 → 0:12:15] +В общем-то, менять путь. + +[0:12:16 → 0:12:19] +При этом мы можем написать логику так, + +[0:12:19 → 0:12:20] +что в конце у нас будет вариант + +[0:12:21 → 0:12:23] +вернуться в самое начало. + +[0:12:23 → 0:12:24] +У нас может быть какой-то + +[0:12:24 → 0:12:26] +дополнительный агент-критик, + +[0:12:26 → 0:12:28] +который посмотрит, что мы сделали, + +[0:12:28 → 0:12:30] +то есть что сделал AI-агент наш. + +[0:12:30 → 0:12:32] +Если ему что-то не понравится, + +[0:12:32 → 0:12:33] +он скажет «переделай» и вернётся + +[0:12:33 → 0:12:35] +на какой-то этап начала, + +[0:12:36 → 0:12:38] +чтобы сделать заново, учитывая правки. + +[0:12:39 → 0:12:42] +Весь этот граф, он работает + +[0:12:42 → 0:12:44] +с единым состоянием. + +[0:12:44 → 0:12:47] +Мы определяем изначальное состояние + +[0:12:47 → 0:12:48] +и потом передаём его между нодами, + +[0:12:48 → 0:12:50] +и каждая нода работает с этим состоянием, + +[0:12:50 → 0:12:51] +что-то там обновляет. + +[0:12:52 → 0:12:54] +По итогу работа AI-агента является + +[0:12:55 → 0:12:56] +заполненное состояние, + +[0:12:56 → 0:12:58] +которое мы потом снаружи считываем + +[0:12:58 → 0:12:59] +и что-то с ним делаем. + +[0:12:59 → 0:13:00] +Например, рисуем презентацию. + +[0:13:02 → 0:13:03] +Когда я разрабатывал... + +[0:13:03 → 0:13:05] +А, бывают более сложные схемы, + +[0:13:05 → 0:13:06] +более интересные даже. + +[0:13:07 → 0:13:09] +Когда у нас есть агент-супервайзер, + +[0:13:09 → 0:13:12] +который сам принимает решение, + +[0:13:12 → 0:13:13] +нужно ли ему воспользоваться + +[0:13:13 → 0:13:15] +другим каким-то агентом, + +[0:13:15 → 0:13:17] +и сам принимает решение, + +[0:13:17 → 0:13:18] +когда ему закончить, + +[0:13:18 → 0:13:21] +например, ему дали задачу нарисовать презентацию, + +[0:13:21 → 0:13:22] +он может подумать так, + +[0:13:22 → 0:13:24] +мне сейчас нужно пойти в агента + +[0:13:24 → 0:13:25] +для поиска в интернете, + +[0:13:25 → 0:13:26] +поискать информацию, + +[0:13:26 → 0:13:28] +потом сходить к художнику нарисовать, + +[0:13:28 → 0:13:31] +потом сходить там и контент нагенерировать. + +[0:13:31 → 0:13:34] +Но при этом он сам принимает все эти решения + +[0:13:34 → 0:13:35] +и самостоятельно решает, + +[0:13:35 → 0:13:39] +куда пойти и какого агента сейчас задействовать. + +[0:13:39 → 0:13:41] +Получается такая мультиагентная система. + +[0:13:42 → 0:13:44] +В моем случае + +[0:13:44 → 0:13:46] +настолько сложная вещь не понадобилась. + +[0:13:47 → 0:13:49] +Я пошел по более простому пути. + +[0:13:49 → 0:13:50] +Я рисовал графы. + +[0:13:51 → 0:13:52] +У меня получилось несколько вариантов + +[0:13:52 → 0:13:54] +в ходе разработки этого клона. + +[0:13:56 → 0:13:59] +И сейчас я вам покажу финальный вариант. + +[0:13:59 → 0:14:00] +Он получился довольно компактным, + +[0:14:01 → 0:14:03] +довольно дешевым в использовании + +[0:14:03 → 0:14:04] +и довольно быстрым. + +[0:14:05 → 0:14:06] +Дело в том, что некоторые ноды + +[0:14:06 → 0:14:08] +можно запускать параллельно, + +[0:14:08 → 0:14:11] +одновременно работая над несколькими задачами. + +[0:14:11 → 0:14:13] +Посмотрим поочередно. + +[0:14:13 → 0:14:15] +Сначала шаг подготовка. + +[0:14:15 → 0:14:18] +В моем случае, что такое подготовка? + +[0:14:18 → 0:14:19] +Я просто прохожусь по слайдам, + +[0:14:19 → 0:14:21] +сгенерированным на этапе планирования + +[0:14:21 → 0:14:23] +и назначаю им ID. + +[0:14:23 → 0:14:26] +Здесь будет неплохо показать, + +[0:14:26 → 0:14:28] +как выглядит нода графа. + +[0:14:28 → 0:14:29] +В общем-то, + +[0:14:29 → 0:14:31] +это функция, + +[0:14:31 → 0:14:33] +которая принимает состояние + +[0:14:33 → 0:14:35] +и она должна обещать вернуть нам + +[0:14:35 → 0:14:38] +какую-то часть состояния на апдейт. + +[0:14:38 → 0:14:39] +Может целиком состояние обновить, + +[0:14:39 → 0:14:41] +может какие-то конкретные ключи. + +[0:14:42 → 0:14:43] +Поэтому, по итогу, + +[0:14:43 → 0:14:45] +мы должны вернуть объект, + +[0:14:45 → 0:14:47] +у которого будут заполнены ключи + +[0:14:47 → 0:14:49] +состояния, в данном случае один ключ + +[0:14:49 → 0:14:51] +Presentation, в котором уже лежит план + +[0:14:51 → 0:14:53] +на этапе генерации. + +[0:14:54 → 0:14:56] +Это планирование мы его создали + +[0:14:56 → 0:14:57] +и когда приходим к генерации, + +[0:14:57 → 0:14:59] +состояние заполняется этим планом. + +[0:15:00 → 0:15:02] +Я прохожусь внутри плана + +[0:15:02 → 0:15:03] +по всем слайдам и просто + +[0:15:03 → 0:15:04] +генерирую ID. + +[0:15:05 → 0:15:06] +Давайте дальше. + +[0:15:06 → 0:15:09] +Нам нужно принять решение, куда пойти. + +[0:15:09 → 0:15:10] +Либо на веб-ресерч, + +[0:15:10 → 0:15:12] +либо на генерацию. + +[0:15:13 → 0:15:15] +То есть нам нужно пройтись + +[0:15:15 → 0:15:17] +по плану, по всем слайдам + +[0:15:17 → 0:15:19] +и найти, есть ли такие слайды, + +[0:15:19 → 0:15:21] +для которых есть промт поиска в интернете. + +[0:15:21 → 0:15:22] +Для этого используется + +[0:15:23 → 0:15:25] +Conditional Edge, так называемый. + +[0:15:25 → 0:15:27] +Что это такое + +[0:15:27 → 0:15:28] +Conditional Edge? + +[0:15:29 → 0:15:31] +Тоже функция, она тоже принимает состояние, + +[0:15:31 → 0:15:32] +но у нее задача вернуть + +[0:15:32 → 0:15:34] +не апдейт состояния, + +[0:15:34 → 0:15:35] +а куда пойти дальше. + +[0:15:36 → 0:15:38] +И здесь я создаю + +[0:15:40 → 0:15:42] +массив, куда можно пойти + +[0:15:42 → 0:15:44] +после работы этой + +[0:15:44 → 0:15:45] +предыдущей ноды. + +[0:15:46 → 0:15:47] +И либо его заполняю, + +[0:15:48 → 0:15:49] +либо, если он не заполнен, мы идем на exit. + +[0:15:50 → 0:15:51] +Exit в данном случае имеется ввиду + +[0:15:51 → 0:15:53] +пойти на to generate, то есть + +[0:15:53 → 0:15:54] +презентацию генерировать, + +[0:15:54 → 0:15:57] +как будто в поиск не потребовался. + +[0:15:59 → 0:16:00] +Массив send-off я создаю + +[0:16:00 → 0:16:01] +пустым, + +[0:16:01 → 0:16:02] +а потом пытаюсь его заполнить. + +[0:16:02 → 0:16:04] +Я пробегаюсь по всем слайдам, + +[0:16:04 → 0:16:06] +ищу слайды, у которых заполнен + +[0:16:06 → 0:16:07] +ключ websearch query. + +[0:16:08 → 0:16:10] +На этапе планирования, + +[0:16:10 → 0:16:11] +напомню, это происходит. + +[0:16:11 → 0:16:13] +И если такой слайд нашелся, + +[0:16:13 → 0:16:15] +то я его помещаю в push, + +[0:16:16 → 0:16:18] +в sends, массив send-off, + +[0:16:18 → 0:16:19] +ну и заполняю + +[0:16:19 → 0:16:22] +с помощью специального класса send. + +[0:16:23 → 0:16:26] +Send передается, какую ноду надо запустить, + +[0:16:26 → 0:16:28] +в данном случае webresearch называется нода, + +[0:16:28 → 0:16:29] +и какие данные в него прокинуть. + +[0:16:30 → 0:16:31] +Можно прокидывать + +[0:16:31 → 0:16:32] +хоть все состояние, + +[0:16:32 → 0:16:34] +но довольно удобно + +[0:16:34 → 0:16:36] +прокидывать только то, что нужно. + +[0:16:36 → 0:16:38] +Например, один слайд, с которым + +[0:16:38 → 0:16:40] +эта нода для research + +[0:16:40 → 0:16:42] +будет работать. Ей, в общем-то, нужен + +[0:16:42 → 0:16:44] +только websearch query, но чтобы сохранить + +[0:16:44 → 0:16:46] +в состоянии информацию, понадобится + +[0:16:46 → 0:16:48] +id-шник слайда, ну, в общем, проще + +[0:16:48 → 0:16:50] +передать туда целиком слайд. + +[0:16:50 → 0:16:52] +Внутри она считает id-шник и + +[0:16:52 → 0:16:54] +websearch query. Как будет + +[0:16:54 → 0:16:56] +websearch query работать? В общем-то, + +[0:16:56 → 0:16:58] +есть разные способы, как + +[0:16:58 → 0:17:00] +поискать в интернете, можно даже + +[0:17:00 → 0:17:02] +самостоятельно написать краулер, + +[0:17:02 → 0:17:04] +какой-нибудь, но я воспользовался + +[0:17:04 → 0:17:06] +удобной утилитой Tavili, + +[0:17:06 → 0:17:08] +которая позволяет искать + +[0:17:08 → 0:17:09] +в интернете. + +[0:17:10 → 0:17:12] +Вот напомню, что в Send мы отправляли + +[0:17:12 → 0:17:14] +один слайд, поэтому + +[0:17:14 → 0:17:16] +здесь функция принимает тоже + +[0:17:16 → 0:17:17] +один слайд. + +[0:17:18 → 0:17:20] +Внутри я инициирую этот + +[0:17:20 → 0:17:22] +инструмент Tavili, + +[0:17:22 → 0:17:24] +ну, а затем просто из слайда + +[0:17:24 → 0:17:26] +беру websearch query и, в общем, + +[0:17:26 → 0:17:28] +иду искать и жду, пока этот + +[0:17:28 → 0:17:30] +инструмент мне найдет то, что нужно. + +[0:17:31 → 0:17:32] +Затем я обновляю + +[0:17:32 → 0:17:34] +состояние, специально + +[0:17:34 → 0:17:36] +созданный для этого ключик + +[0:17:36 → 0:17:38] +websearch-result, и по id-шнику слайда + +[0:17:38 → 0:17:40] +сохраняю информацию, которую нашел в интернете. + +[0:17:41 → 0:17:42] +Интересный моментик, вот с фигурными + +[0:17:42 → 0:17:44] +скобками, если создавать презентации + +[0:17:44 → 0:17:46] +на какие-то темы для программистов, + +[0:17:46 → 0:17:48] +там наверняка будут блоки кода, блоки кода + +[0:17:48 → 0:17:50] +содержат фигурные скобки, а лонгчейн + +[0:17:50 → 0:17:52] +воспринимает фигурные скобки как + +[0:17:52 → 0:17:54] +часть темплейта, которую надо заполнить + +[0:17:54 → 0:17:56] +какими-то данными, и + +[0:17:56 → 0:17:57] +будет ругаться, что + +[0:17:58 → 0:18:00] +вы не предоставили мне данные + +[0:18:00 → 0:18:02] +для заполнения этого ключа. + +[0:18:03 → 0:18:04] +Поэтому я их + +[0:18:05 → 0:18:06] +экранирую, я нахожу фигурные + +[0:18:06 → 0:18:08] +скобки и + +[0:18:08 → 0:18:10] +делаю двойными фигурными скобками, + +[0:18:10 → 0:18:13] +в общем-то это способ заэкранировать + +[0:18:13 → 0:18:13] +их. + +[0:18:14 → 0:18:16] +Вот и все, то есть точно так же, + +[0:18:17 → 0:18:18] +как и в prepare, в общем + +[0:18:18 → 0:18:20] +я что-то делаю и кладу это + +[0:18:20 → 0:18:22] +в состояние. Далее нам + +[0:18:22 → 0:18:24] +надо принять решение, то есть мы, понятно, + +[0:18:24 → 0:18:26] +уже идем на generate, и далее + +[0:18:26 → 0:18:28] +надо понять, хотим ли мы сгенерировать + +[0:18:28 → 0:18:31] +картинки или начинаем контент генерировать. + +[0:18:32 → 0:18:34] +Что здесь происходит? Это тоже + +[0:18:34 → 0:18:37] +роутер, он тоже принимает состояние + +[0:18:37 → 0:18:38] +и должен вернуть, куда идем дальше. + +[0:18:39 → 0:18:41] +Точно так же работает с массивом + +[0:18:41 → 0:18:42] +sendов. Здесь есть + +[0:18:42 → 0:18:44] +вот такой цикл, + +[0:18:44 → 0:18:46] +я пробегаюсь по слайдам, + +[0:18:47 → 0:18:48] +по каждому из них, потом + +[0:18:48 → 0:18:50] +смотрю, есть ли там prompt на генерацию + +[0:18:50 → 0:18:53] +изображения, и массив sendов заполняю + +[0:18:53 → 0:18:54] +опять экземпляром класса + +[0:18:54 → 0:18:56] +send, название нода, куда + +[0:18:56 → 0:18:58] +нужно пойти, и информация, которая + +[0:18:58 → 0:19:01] +нужна для генерации. Это слайд + +[0:19:01 → 0:19:02] +с его image prompt и negative + +[0:19:02 → 0:19:05] +image prompt, и также глобальный + +[0:19:05 → 0:19:07] +стиль изображения, который тоже надо учесть, + +[0:19:07 → 0:19:09] +чтобы во всей презентации + +[0:19:09 → 0:19:11] +и во всех слайдах стили изображения + +[0:19:11 → 0:19:12] +были в едином стиле. + +[0:19:13 → 0:19:14] +Вот. Ну, + +[0:19:14 → 0:19:16] +как генерировать картинки? + +[0:19:16 → 0:19:18] +Я думаю, вы знаете, что есть + +[0:19:18 → 0:19:20] +такая у нас нероссеть Кандинский, + +[0:19:20 → 0:19:22] +которая умеет изображения генерировать, + +[0:19:22 → 0:19:24] +и у нее недавно появилась такая кнопочка API + +[0:19:24 → 0:19:25] +позволяющая + +[0:19:27 → 0:19:29] +взаимодействовать программным способом + +[0:19:29 → 0:19:31] +с Кандинским и генерировать изображения + +[0:19:31 → 0:19:31] +изображения. + +[0:19:33 → 0:19:34] +Ну, не стану + +[0:19:35 → 0:19:36] +врать, в общем, кода получилось много, + +[0:19:36 → 0:19:38] +здесь он вроде бы + +[0:19:38 → 0:19:40] +даже весь. Я написал + +[0:19:40 → 0:19:42] +обертку для работы с API + +[0:19:44 → 0:19:44] +Кандинского, + +[0:19:44 → 0:19:45] +назвал его собачка-броджия + +[0:19:45 → 0:19:48] +это чисто обертка + +[0:19:48 → 0:19:50] +над API, + +[0:19:50 → 0:19:52] +позволяющая чуть более удобно с ней работать, + +[0:19:52 → 0:19:54] +но даже с учетом такой обертки + +[0:19:55 → 0:19:56] +кода получилось много. + +[0:19:56 → 0:19:58] +Моя обертка над API + +[0:19:59 → 0:19:59] +Кандинский + +[0:20:01 → 0:20:02] +насосная, в общем, ее можно найти + +[0:20:02 → 0:20:03] +на Gitverse, + +[0:20:04 → 0:20:06] +если интересно, можете попробовать. + +[0:20:08 → 0:20:08] +Внутри я просто + +[0:20:08 → 0:20:10] +смотрю, что некоторые слайды + +[0:20:10 → 0:20:11] +я хочу квадратные, + +[0:20:12 → 0:20:14] +один к одному, иногда 16 к 9, + +[0:20:14 → 0:20:16] +в зависимости от того, какой слайд. + +[0:20:16 → 0:20:18] +В общем, сохраняю изображение в файловой + +[0:20:18 → 0:20:20] +системе и сохраняю в состоянии + +[0:20:20 → 0:20:22] +ссылку на это изображение. + +[0:20:23 → 0:20:24] +В общем-то и все. + +[0:20:25 → 0:20:26] +Идем дальше. + +[0:20:26 → 0:20:29] +Ну, наконец-то, генерация контента. + +[0:20:29 → 0:20:30] +Как же сгенерировать контент? + +[0:20:31 → 0:20:32] +В общем-то, контент мне нужен, в принципе, + +[0:20:32 → 0:20:35] +в Markdown, который я на UI + +[0:20:35 → 0:20:36] +потом смогу красиво + +[0:20:37 → 0:20:37] +отображать. + +[0:20:38 → 0:20:40] +Я принял такое решение. + +[0:20:40 → 0:20:42] +Но тут есть интересный момент. + +[0:20:42 → 0:20:44] +Когда мы идем генерировать такие уже + +[0:20:44 → 0:20:46] +более сложные вещи, мы будем + +[0:20:46 → 0:20:48] +пользоваться блокчейном, и для начала + +[0:20:48 → 0:20:50] +нам понадобится системный промт, + +[0:20:50 → 0:20:51] +где мы описываем, + +[0:20:52 → 0:20:53] +что мы сейчас будем генерировать. + +[0:20:53 → 0:20:56] +Значит, слайды, контент для слайдов, + +[0:20:56 → 0:20:58] +там внутри, + +[0:20:59 → 0:21:00] +имея в виду, что на слайде + +[0:21:01 → 0:21:02] +очень много текста влезает, + +[0:21:02 → 0:21:03] +нам нужны какие-то буллеты, + +[0:21:03 → 0:21:05] +ну, в общем, какое-то описание, как мы видим + +[0:21:06 → 0:21:08] +генерацию этих контента для слайда. + +[0:21:09 → 0:21:10] +Это системный промт. + +[0:21:10 → 0:21:12] +Потом мы досылаем туда + +[0:21:13 → 0:21:14] +запрос. Вот данные, сгенерируй + +[0:21:14 → 0:21:15] +контент для слайда. + +[0:21:16 → 0:21:18] +То есть, вот результат поиска в интернете + +[0:21:18 → 0:21:20] +мы туда дописываем, + +[0:21:20 → 0:21:23] +о чем у нас был этот слайд + +[0:21:23 → 0:21:25] +на этапе планирования + +[0:21:25 → 0:21:26] +названия, там буллеты, + +[0:21:26 → 0:21:28] +в общем, все, что надо уже для слайда, + +[0:21:28 → 0:21:30] +готовое мы туда складываем, + +[0:21:30 → 0:21:31] +вот, сгенерируй нам, пожалуйста, слайд. + +[0:21:32 → 0:21:33] +Нейросеть нам отвечает. + +[0:21:33 → 0:21:35] +Хорошо, вот контент. И в Markdown, значит, + +[0:21:35 → 0:21:36] +отдает контент. + +[0:21:38 → 0:21:39] +После чего + +[0:21:39 → 0:21:41] +мне хочется пойти немножко дальше + +[0:21:41 → 0:21:43] +и сгенерировать не только контент, + +[0:21:43 → 0:21:46] +но и описание, о чем этот слайд, + +[0:21:46 → 0:21:47] +о чем думала нейросеть, + +[0:21:48 → 0:21:49] +создавая этот слайд, + +[0:21:49 → 0:21:51] +и о чем надо, собственно, рассказывать + +[0:21:52 → 0:21:54] +тому, кто будет + +[0:21:55 → 0:21:56] +презентацию показывать + +[0:21:56 → 0:21:58] +и рассказывать что-то по ней. + +[0:21:58 → 0:21:59] +Поэтому я решил + +[0:21:59 → 0:22:01] +сделать так, что мне нужно пойти + +[0:22:01 → 0:22:04] +в нейросеть и попросить ее сгенерировать. + +[0:22:04 → 0:22:04] +Пожалуйста, теперь + +[0:22:06 → 0:22:08] +комментарий для этого слайда, + +[0:22:08 → 0:22:10] +где опиши, что рассказывать. + +[0:22:10 → 0:22:12] +Я мог бы отдельно + +[0:22:12 → 0:22:13] +создать для этого системный промт, + +[0:22:13 → 0:22:16] +отдельно там запрос сделать, + +[0:22:16 → 0:22:16] +но я делаю так. + +[0:22:17 → 0:22:19] +В массив сообщений, которые + +[0:22:20 → 0:22:21] +мне получился, + +[0:22:21 → 0:22:23] +там системный промт изначальный, + +[0:22:23 → 0:22:25] +первый запрос на генерацию + +[0:22:26 → 0:22:28] +контента я тоже туда дописываю, + +[0:22:28 → 0:22:29] +ответ нейросети хорошо, + +[0:22:30 → 0:22:32] +контент я тоже в этот массив сообщений + +[0:22:32 → 0:22:34] +складываю и далее добавляю + +[0:22:34 → 0:22:35] +еще один запрос. + +[0:22:35 → 0:22:37] +Теперь, пожалуйста, добавь комментарий для спикера. + +[0:22:39 → 0:22:41] +Потом нейросеть не отвечает + +[0:22:41 → 0:22:43] +и это получается уже + +[0:22:43 → 0:22:46] +пятый элемент массива сообщений. + +[0:22:46 → 0:22:48] +То есть я сохраняю себе + +[0:22:48 → 0:22:49] +этот комментарий и далее + +[0:22:49 → 0:22:52] +для следующих слайдов я поступаю точно так же. + +[0:22:52 → 0:22:53] +Я донаращиваю + +[0:22:54 → 0:22:55] +общий массив сообщений + +[0:22:56 → 0:22:57] +при генерации контента + +[0:22:57 → 0:22:59] +для всех слайдов всей презентации. + +[0:23:00 → 0:23:02] +Получается, что у меня как бы + +[0:23:02 → 0:23:04] +есть история общения с нейросетью, + +[0:23:04 → 0:23:06] +где дописываются новые сообщения + +[0:23:06 → 0:23:07] +и ее новые ответы + +[0:23:07 → 0:23:08] +на мои сообщения. + +[0:23:09 → 0:23:11] +Таким образом, если для + +[0:23:11 → 0:23:13] +презентации нужно, чтобы мысль + +[0:23:13 → 0:23:15] +как-то последовательно развивалась, + +[0:23:15 → 0:23:17] +я сохраняю контекст предыдущих слайдов, + +[0:23:17 → 0:23:19] +чтобы следующие при генерации + +[0:23:19 → 0:23:20] +учитывали этот контекст. + +[0:23:21 → 0:23:23] +При общении с нейросетью + +[0:23:23 → 0:23:24] +у нас есть такая возможность + +[0:23:24 → 0:23:27] +отправлять туда массив сообщений. + +[0:23:27 → 0:23:29] +Надо просто помечать, + +[0:23:29 → 0:23:30] +какой из них системный, + +[0:23:30 → 0:23:31] +какой от пользователя, + +[0:23:31 → 0:23:33] +а какой ответ от AI. + +[0:23:34 → 0:23:36] +В общем-то, это и все. + +[0:23:36 → 0:23:38] +И потом у нас остается только + +[0:23:38 → 0:23:41] +собрать все эти ноды воедино. + +[0:23:41 → 0:23:42] +Как это делается? + +[0:23:43 → 0:23:45] +Каждая нода это функция. + +[0:23:45 → 0:23:47] +Мы должны просто добавить + +[0:23:47 → 0:23:48] +в наш State Graph. + +[0:23:48 → 0:23:50] +State Graph прокидывается изначально + +[0:23:50 → 0:23:52] +состояние, с которым мы хотим начать. + +[0:23:53 → 0:23:55] +В этом состоянии можно еще и описать, + +[0:23:55 → 0:23:56] +как именно обновляется каждый ключ. + +[0:23:57 → 0:23:58] +Редюсеры добавить. + +[0:23:59 → 0:24:00] +После чего, + +[0:24:01 → 0:24:02] +получившемуся State Graph, + +[0:24:02 → 0:24:04] +мы добавляем ноды. + +[0:24:04 → 0:24:06] +Мы их как-то должны назвать, + +[0:24:06 → 0:24:08] +как вы видели на графе, + +[0:24:08 → 0:24:10] +и прокинуть функцию. + +[0:24:12 → 0:24:13] +Затем + +[0:24:13 → 0:24:15] +нам нужно добавить + +[0:24:15 → 0:24:16] +описание, как мы будем + +[0:24:16 → 0:24:18] +перемещаться между этими нодами. + +[0:24:18 → 0:24:20] +От какой в какую можно пойти, + +[0:24:20 → 0:24:22] +где начало и где конец. + +[0:24:23 → 0:24:24] +Start это Prepare, + +[0:24:24 → 0:24:26] +а Final это End. + +[0:24:26 → 0:24:28] +Это означает, что работа + +[0:24:29 → 0:24:30] +агента после выполнения + +[0:24:30 → 0:24:33] +ноды Final будет завершена, + +[0:24:33 → 0:24:34] +и он отдаст нам результат + +[0:24:35 → 0:24:37] +генерации презентации. + +[0:24:37 → 0:24:39] +Все, потом это дело компилируем. + +[0:24:39 → 0:24:40] +В общем, работаем + +[0:24:41 → 0:24:41] +с этим. + +[0:24:43 → 0:24:45] +Там уже ничего сложного. + +[0:24:45 → 0:24:47] +Можно посмотреть, + +[0:24:47 → 0:24:49] +вот такая презентация + +[0:24:49 → 0:24:51] +получилась на моем сервисе. + +[0:24:51 → 0:24:53] +Можно тоже сходить + +[0:24:53 → 0:24:55] +и попробовать посмотреть, + +[0:24:55 → 0:24:56] +как они генерируются. + +[0:24:57 → 0:24:59] +Вот такую презентацию + +[0:24:59 → 0:25:01] +я сгенерировал. + +[0:25:01 → 0:25:03] +Как видно, тут примерно + +[0:25:03 → 0:25:05] +о том же. + +[0:25:05 → 0:25:06] +В общем, тоже изображение + +[0:25:06 → 0:25:07] +в едином стиле, + +[0:25:07 → 0:25:10] +и на моем сайте можно + +[0:25:11 → 0:25:12] +проиграть презентацию. + +[0:25:13 → 0:25:14] +В общем, + +[0:25:15 → 0:25:16] +это и все. + +[0:25:17 → 0:25:18] +Основной вывод + +[0:25:18 → 0:25:20] +это нужно пробовать, + +[0:25:20 → 0:25:22] +делать это не какой-то + +[0:25:22 → 0:25:23] +rocket science, + +[0:25:24 → 0:25:26] +не только для ML + +[0:25:26 → 0:25:28] +инженеров, + +[0:25:28 → 0:25:29] +специалистов. + +[0:25:29 → 0:25:31] +Сейчас я фронт-энд разработчик + +[0:25:31 → 0:25:32] +в основном, + +[0:25:32 → 0:25:34] +сделал вот такую вещь. + +[0:25:35 → 0:25:37] +Соответственно, когда объединяются команды, + +[0:25:37 → 0:25:39] +можно делать вещи более сложные + +[0:25:39 → 0:25:40] +и интересные. + +[0:25:40 → 0:25:43] +Это дело развивается очень интенсивно, + +[0:25:44 → 0:25:46] +и всем стоит попробовать + +[0:25:46 → 0:25:47] +залезть, посмотреть, + +[0:25:47 → 0:25:49] +как эти вещи создаются, + +[0:25:50 → 0:25:51] +может быть, создать что-то + +[0:25:52 → 0:25:53] +крутое и интересное. + +[0:25:53 → 0:25:56] +В любом случае, вы все, + +[0:25:56 → 0:25:58] +кто это смотрит, слушает, читает, + +[0:25:58 → 0:25:59] +будете + +[0:26:00 → 0:26:02] +участвовать в разработке + +[0:26:02 → 0:26:04] +чего-то, что связано и агентами. + +[0:26:04 → 0:26:05] +Это уже неизбежно. + +[0:26:06 → 0:26:08] +И я думаю, всем стоит + +[0:26:08 → 0:26:10] +попробовать самостоятельно + +[0:26:10 → 0:26:11] +эту историю поговорить, + +[0:26:12 → 0:26:14] +чтобы, по крайней мере, + +[0:26:14 → 0:26:15] +если даже вам эта идея не нравится, + +[0:26:16 → 0:26:17] +просто быть знакомым + +[0:26:17 → 0:26:19] +с тем, как такие вещи создаются. + +[0:26:20 → 0:26:21] +Вот. + +[0:26:21 → 0:26:23] +По QR-коду доступно + +[0:26:23 → 0:26:25] +собственно мое приложение, + +[0:26:25 → 0:26:27] +которое генерирует презентации, + +[0:26:27 → 0:26:29] +но понятно, что генерация завязана + +[0:26:29 → 0:26:32] +на потребление токенов, + +[0:26:32 → 0:26:33] +которые стоят денег, + +[0:26:33 → 0:26:35] +поэтому какое-то время + +[0:26:35 → 0:26:36] +оно может быть доступно, + +[0:26:36 → 0:26:38] +но потом я отключу. + +[0:26:39 → 0:26:41] +На этом спасибо + +[0:26:42 → 0:26:43] +и всем пока.