Compare commits
No commits in common. "76351e365e3a2bf18649447ca15810610e956e6e" and "96691e5fa659545d2fb8162e84877b54c01d286b" have entirely different histories.
76351e365e
...
96691e5fa6
@ -1,102 +0,0 @@
|
||||
# Системный промт для технического писателя (Habr.com & VC.com)
|
||||
|
||||
Ты — экспертный технический писатель, специализирующийся на создании высококачественного контента для российских IT-платформ Habr.com и VC.com.
|
||||
|
||||
## Твоя роль и экспертиза:
|
||||
- Senior технический писатель с глубоким пониманием IT-индустрии
|
||||
- Эксперт в области программирования, DevOps, архитектуры, стартапов и технологического предпринимательства
|
||||
- Специалист по адаптации сложного технического контента для разных аудиторий
|
||||
- Знаешь специфику и требования Habr и VC
|
||||
|
||||
## Специфика платформ:
|
||||
|
||||
### Habr.com:
|
||||
- Техническая аудитория: разработчики, DevOps, архитекторы, тестировщики
|
||||
- Фокус: практические решения, туториалы, обзоры технологий, личный опыт
|
||||
- Стиль: детальный, с примерами кода, схемами, профессиональный
|
||||
- Длина: 1500-5000 слов для полноценных статей
|
||||
|
||||
### VC.com:
|
||||
- Бизнес-аудитория: предприниматели, инвесторы, менеджеры продуктов
|
||||
- Фокус: стратегии, кейсы, аналитика рынка, инвестиции, управление
|
||||
- Стиль: бизнес-ориентированный, с метриками, графиками, выводами
|
||||
- Длина: 800-2500 слов
|
||||
|
||||
## Принципы написания:
|
||||
|
||||
### Структура статьи:
|
||||
1. **Цепляющий заголовок** — конкретный, с пользой или интригой
|
||||
2. **Лид** — суть проблемы/решения в 2-3 предложениях
|
||||
3. **Содержание с подзаголовками** — логичная структура
|
||||
4. **Практические примеры** — код, кейсы, скриншоты
|
||||
5. **Выводы** — ключевые тейкэвеи для читателя
|
||||
|
||||
### Стиль письма:
|
||||
- **Ясность**: избегай жаргона без объяснений
|
||||
- **Конкретность**: факты, цифры, примеры
|
||||
- **Практичность**: что может применить читатель
|
||||
- **Личный опыт**: добавляй реальные кейсы и ошибки
|
||||
- **Визуализация**: схемы, диаграммы, примеры кода
|
||||
|
||||
### Технические требования:
|
||||
- Используй синтаксис Markdown для форматирования
|
||||
- Выделяй код в блоках с указанием языка
|
||||
- Добавляй альт-тексты к изображениям
|
||||
- Создавай списки для лучшей читабельности
|
||||
- Используй таблицы для сравнений
|
||||
|
||||
## Процесс создания контента:
|
||||
|
||||
### 1. Анализ темы:
|
||||
- Определи целевую платформу (Habr/VC)
|
||||
- Изучи целевую аудиторию статьи
|
||||
- Найди уникальный угол или инсайт
|
||||
- Проверь актуальность и новизну
|
||||
|
||||
### 2. Планирование:
|
||||
- Создай детальный план статьи
|
||||
- Подготовь примеры, код, диаграммы
|
||||
- Определи ключевые сообщения
|
||||
- Спланируй визуальное оформление
|
||||
|
||||
### 3. Написание:
|
||||
- Начни с привлекающего внимание лида
|
||||
- Используй активный залог
|
||||
- Пиши короткими абзацами (3-4 предложения)
|
||||
- Добавляй переходы между разделами
|
||||
- Завершай конкретными выводами
|
||||
|
||||
### 4. Редактура:
|
||||
- Проверь фактическую точность
|
||||
- Убери воду и повторы
|
||||
- Оптимизируй для чтения с мобильных
|
||||
- Добавь внутренние ссылки
|
||||
- Проверь SEO-оптимизацию
|
||||
|
||||
## Типы контента для платформ:
|
||||
|
||||
### Для Habr:
|
||||
- Туториалы и гайды
|
||||
- Разбор архитектурных решений
|
||||
- Обзоры инструментов и технологий
|
||||
- Личный опыт разработки
|
||||
- Аналитика трендов в IT
|
||||
|
||||
### Для VC:
|
||||
- Кейсы масштабирования продуктов
|
||||
- Анализ IT-рынка и инвестиций
|
||||
- Стратегии развития стартапов
|
||||
- Интервью с основателями
|
||||
- Исследования пользовательского поведения
|
||||
|
||||
## Критерии качества:
|
||||
- ✅ Статья решает конкретную проблему читателя
|
||||
- ✅ Контент подкреплен фактами и примерами
|
||||
- ✅ Структура логична и легко читается
|
||||
- ✅ Есть практические рекомендации
|
||||
- ✅ Уникальная экспертная точка зрения
|
||||
- ✅ Оптимизация для SEO и читабельности
|
||||
|
||||
Всегда помни: твоя цель — создавать контент, который читатели сохранят в закладки и будут рекомендовать коллегам.
|
||||
alwaysApply: true
|
||||
---
|
1
.gitignore
vendored
@ -1 +0,0 @@
|
||||
замечания.txt
|
Before Width: | Height: | Size: 1.8 MiB |
@ -1,24 +1,12 @@
|
||||
# От техсетки до «Татар сан»: как мы изобрели новый формат ИТ-конференций
|
||||
|
||||
*Личный опыт для тех, кто хочет делать сильные ИТ-мероприятия в регионах*
|
||||
|
||||
> **Для кого статья:**
|
||||
> Для организаторов, лидеров ИТ-сообществ, HR, и всех, кто верит, что в регионах можно делать крутые события.
|
||||
> **Миссия:** Показать, что региональные ИТ-мероприятия могут быть не хуже столичных, если делать их с душой, амбициями и вниманием к деталям.
|
||||
*Туториал*
|
||||
|
||||

|
||||
|
||||
В 2020 году мир ИТ-конференций кардинально изменился. Онлайн убил нетворкинг, а традиционные форматы перестали работать. За 6 лет (2019-2025) мы прошли путь от ежедневных техсеток в Сбере до серии успешных конференций «Татар сан» с уникальными механиками и планами создания собственной платформы оценки спикеров.
|
||||
В 2020 году мир ИТ-конференций сломался. Онлайн убил нетворкинг, а традиционные форматы перестали работать. Рассказываю, как за 5 лет мы прошли путь от ежедневных техсеток в Сбере до флагманской конференции «Татар сан» с призовым фондом 250 тысяч рублей, собственной платформой оценки спикеров и уникальными механиками борьбы со стереотипами.
|
||||
|
||||
Меня зовут Андрей Власов, я работаю в Сбере, разрабатываю сайт СберБанк Онлайн и лидирую технологический хаб Сбера в Казани. С 2019 года организовал более 10 мероприятий — от внутренних митапов до конференций на 1000+ участников.
|
||||
|
||||
---
|
||||
|
||||
## Как техсетка стала фундаментом для конференций
|
||||
|
||||
Всё началось с простой идеи — делиться знаниями внутри команды. Ежедневные техсетки помогли выстроить культуру обмена опытом и менторства. Именно этот опыт стал основой для будущих митапов и конференций: мы увидели, как важно создавать площадки для открытого диалога и роста, и решили масштабировать этот подход на всё ИТ-сообщество Казани.
|
||||
|
||||
---
|
||||
Меня зовут Андрей Власов, я работаю в Сбере, разрабатываю сайт СберБанк Онлайн и лидирую технологический хаб Сбера в Казани. За пять лет организовал более 10 мероприятий — от внутренних митапов до конференций на 1000+ участников.
|
||||
|
||||
## Проблема: что сломалось в мире ИТ-конференций
|
||||
|
||||
@ -29,28 +17,26 @@
|
||||
- Нетворкинг практически умер
|
||||
- Появились новые потребности в интерактиве
|
||||
|
||||
**Что получилось в результате перехода в онлайн:**
|
||||
- **Актуальность** — качественные доклады в комфортных условиях, но потеря живого взаимодействия
|
||||
- **Интерактив** — попытки компенсировать через Mentimeter и QR-коды, но ощущение искусственности
|
||||
- **Нетворкинг** — практически умер, стал формальным
|
||||
- **Организация** — гонка технологических решений в ущерб человеческому фактору
|
||||
**Базовые метрики конференций в 2020:**
|
||||
- **Актуальность** — наконец-то качественные доклады в комфортных условиях
|
||||
- **Интерактив** — рост популярности Mentimeter и QR-интерактивов
|
||||
- **Нетворкинг** — RIP
|
||||
- **Организация** — гонка собственных платформ и армий техподдержки
|
||||
|
||||
Я очень люблю конференции и обмен знаниями, но когда что-то начало не устраивать в существующих форматах, решил делать свои.
|
||||
|
||||
## Региональный потенциал и личная мотивация
|
||||
## Региональный барьер и личная мотивация
|
||||
|
||||
В ИТ-индустрии существует распространённое заблуждение, что качественные технологические мероприятия можно организовать только в столице. Многие считают, что в регионах недостаточно экспертизы и ресурсов для создания событий мирового уровня.
|
||||
Существует негласное правило в ИТ: **"в регионах специалисты в два раза хуже, чем в Москве"**. Когда я рассказывал о планах конференции в столице, услышал фразу: *"Если бы ты к нам обратился, то можно было сделать конференцию лучше"*.
|
||||
|
||||
### Миссия — раскрыть потенциал регионов
|
||||
### Миссия — разрушить стереотипы
|
||||
|
||||
Эта ситуация стала **личной мотивацией**. Я твёрдо верю, что в каждом регионе есть выдающиеся специалисты, уникальный опыт и невероятные истории, которые достойны большой сцены.
|
||||
Эта фраза стала **личной мотивацией**. Хотелось показать, что качественная конференция или митап создает импульс для всего сообщества.
|
||||
|
||||
**Небольшие инсайты**
|
||||
Качественная конференция или митап создаёт импульс для всего сообщества и раскрывает скрытый потенциал региона.
|
||||
**Ключевой принцип:** Человека поменять нельзя, но можно показать пример, на который люди пойдут, который будет привлекать их внимание.
|
||||
|
||||
Показать, что география не определяет качество. Региональные ИТ-специалисты обладают не меньшей экспертизой, а иногда даже более практическим опытом благодаря решению нестандартных задач в условиях ограниченных ресурсов.
|
||||
|
||||
Когда создаёшь качественную площадку, талантливые люди сами выходят из тени и начинают делиться своими знаниями. Регионы не отстают от столицы — им просто нужна правильная мотивация и возможности для самовыражения.
|
||||
**Доказательство работает:**
|
||||
После наших первых митапов количество спикеров **кратно увеличилось**, и в принципе ИТ в Казани ожило. Сообщество стало активнее, появились новые инициативы, люди начали делиться экспертизой.
|
||||
|
||||
## Методология: Challenge Based
|
||||
|
||||
@ -59,7 +45,7 @@
|
||||
В основе нашего подхода лежит методика **Challenge Based**. Главный принцип: постоянно начинать с какого-то вызова, с высокой цели, которая имеет реальное значение для людей.
|
||||
|
||||
**Как это работает:**
|
||||
Мы каждую конференцию ставим на максималках, на уровне *"Это на столько крутая и амбициозная цель, что даже от участие в реализации цели я получу незабываемые впечатления"*.
|
||||
Мы каждую конференцию ставим на максималках, на уровне *"я не знаю, как это реализовать, это безумие"*.
|
||||
|
||||
Это очень сложно, но когда мы достигаем цели, понимаем — **потолок наших возможностей гораздо выше**.
|
||||
|
||||
@ -129,7 +115,7 @@
|
||||
|
||||
**14 ноября 2022 — запуск BroJS:**
|
||||
|
||||
Название взято от проекта Brokerage (Брокерский бизнес) в котором мы разрабатываем на сайте СберБанк онлайн раздел инвестиции.
|
||||
Название от проекта Brokerage (раздел "Инвестиции" в СберБанк Онлайн).
|
||||
|
||||
### Философия "суперсил" и личных историй
|
||||
|
||||
@ -174,7 +160,6 @@
|
||||
- 5 спикеров
|
||||
|
||||
**Результаты:**
|
||||
- 180 регистраций
|
||||
- 1-й день: 90 участников
|
||||
- 2-й день: 70 участников
|
||||
|
||||
@ -211,7 +196,7 @@ IT Community Day был **огромным экспериментом**. Реш
|
||||
- Создали **"жаркую тусовку на крыше"** в прямом и переносном смысле
|
||||
|
||||
**Кастомный мерч в реальном времени:**
|
||||
- Дизайнеры из Брокерского бизнеса помогли организовать **арт-зону**
|
||||
- Лидер компетенции дизайна **Катя Панова** организовала **арт-зону**
|
||||
- Дизайнеры делали **кастомный уникальный мерч** прямо на крыше
|
||||
- Участники могли получить персонализированные сувениры
|
||||
|
||||
@ -225,6 +210,7 @@ IT Community Day был **огромным экспериментом**. Реш
|
||||
|
||||
**Инфраструктура:**
|
||||
- Полноценный **catering** прямо на крыше
|
||||
- Крытая зона в Технохабе как запасной вариант
|
||||
- **Прекрасные виды** с крыши ИТ-парка
|
||||
|
||||
### Уникальная атмосфера
|
||||
@ -279,12 +265,11 @@ IT Community Day был **огромным экспериментом**. Реш
|
||||
- Сотрудничество со школой 21
|
||||
- Синхронизация мероприятий Технохаба и школы 21
|
||||
- Общий бюджет на пересекающиеся мероприятия
|
||||
- Core-команда: выросла с 7 человек до 20 организаторов
|
||||
- Core-команда: 20 организаторов
|
||||
|
||||
### Построение команды организаторов
|
||||
|
||||

|
||||
На фото к сведению не вся команда организаторов.
|
||||
|
||||
К этому моменту сформировалась четкая структура команды с ключевыми ролями:
|
||||
|
||||
@ -364,14 +349,14 @@ IT Community Day был **огромным экспериментом**. Реш
|
||||
- Крутая айдентика и стиль
|
||||
- Эффектное афтепати в формате шоу
|
||||
- Красочное, не затянутое мероприятие
|
||||
- Народ не хотел расходиться, хотя на часах уже было почти полночь и в планах небыло вечеринки на всю ночь
|
||||
- Народ не хотел расходиться до 23:00
|
||||
|
||||
**Результаты:**
|
||||
- 840 регистраций
|
||||
- 470 очных участников
|
||||
- В последнюю неделю перед Новым годом, в среду!
|
||||
|
||||
## Флагманская «Татар сан» — технологический прорыв
|
||||
## Этап 7: Флагманская «Татар сан» — технологический прорыв
|
||||
|
||||

|
||||
|
||||
@ -389,7 +374,7 @@ IT Community Day был **огромным экспериментом**. Реш
|
||||
- **Агент общения с пользователями** — чат-бот для решения типовых вопросов
|
||||
- **Агент обработки обратной связи** — автоматический анализ отзывов и предложений
|
||||
|
||||
### Инновационные механики
|
||||
### Революционные механики
|
||||
|
||||
**Мотивация для спикеров:**
|
||||
- 250 000 рублей за лучший доклад
|
||||
@ -433,10 +418,10 @@ IT Community Day был **огромным экспериментом**. Реш
|
||||
|
||||
| Мероприятие | Год | Регистрации | Очные участники |
|
||||
|-------------|-----|-------------|----------------|
|
||||
| BroJS | 2022 | ~180 | 90/70 |
|
||||
| IT Community day v1 | 2023 | 1000+ | 500 |
|
||||
| BroJS | 2022 | ~100 | 90/70 |
|
||||
| IT Community day | 2023 | 1000+ | 500 |
|
||||
| IT Community day v2 | 2024 | 860 | 470 |
|
||||
| Татар сан v1 | 2024 | 840 | 490 |
|
||||
| Татар сан v1 | 2024 | 840 | 470 |
|
||||
| Татар сан v2 | 2025 | 1700+ | 1000+ |
|
||||
|
||||
### Ключевые принципы успеха
|
||||
@ -456,14 +441,55 @@ IT Community Day был **огромным экспериментом**. Реш
|
||||
- Формирование позитивного образа ИТ-сообщества
|
||||
- Популяризация технологий среди широкой аудитории
|
||||
|
||||
## Что изменилось в индустрии
|
||||
|
||||
**Традиционные форматы:**
|
||||
- Статичные доклады
|
||||
- Пассивная аудитория
|
||||
- Слабый нетворкинг в онлайне
|
||||
|
||||
**Новые подходы:**
|
||||
- Интерактивные механики
|
||||
- Геймификация
|
||||
- Мотивация через призы и конкурсы
|
||||
- Микс онлайн/офлайн активностей
|
||||
- Технологическая автоматизация процессов
|
||||
|
||||
## Планы развития
|
||||
|
||||
В дальнейших планах:
|
||||
- Доработка текущих механик на основе обратной связи
|
||||
- Доработка текущих механик
|
||||
- Добавление новых интерактивных форматов
|
||||
- Расширение технологической платформы
|
||||
- Масштабирование опыта на другие регионы
|
||||
- Развитие «Татар сан» как знакового мероприятия ИТ-сообщества Татарстана
|
||||
- Цель: придать «Татар сан» культовый статус среди ИТ-специалистов
|
||||
|
||||
## Топ-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 года
|
||||
|
||||
|
||||
## Рекомендации для организаторов
|
||||
|
||||
@ -489,12 +515,24 @@ IT Community Day был **огромным экспериментом**. Реш
|
||||
**Контент:**
|
||||
- Итерируйтесь — каждое мероприятие должно быть лучше предыдущего
|
||||
- Не бойтесь экспериментов — новые механики могут выстрелить
|
||||
- Боритесь со стереотипами — иногда надо действовать против устоявшейся культуры, чтобы привлечь новую аудиторию
|
||||
- Боритесь со стереотипами — иногда надо погладить против шерсти устояшуюсю культуру, чтобы привлечь аудиторию
|
||||
|
||||

|
||||

|
||||
|
||||
## Заключение
|
||||
|
||||
Мы прошли путь от ежедневных техсеток до флагманской конференции на 1000+ участников. Главный урок: традиционные форматы ИТ-мероприятий нуждаются в кардинальном обновлении.
|
||||
За 5 лет мы прошли путь от ежедневных техсеток до флагманской конференции на 1000+ участников. Главный урок: традиционные форматы ИТ-мероприятий нуждаются в кардинальном обновлении.
|
||||
|
||||
**Что работает:**
|
||||
- Собственные технологические решения
|
||||
- Борьба со стереотипами и инклюзивность
|
||||
- Уникальные механики и геймификация
|
||||
- Влияние на региональный ИТ-рынок
|
||||
- Системный подход к метрикам
|
||||
|
||||
**Измеримые результаты:**
|
||||
- Увеличение аудитории в 10 раз
|
||||
- Улучшение скорости закрытия вакансий в регионе
|
||||
- Формирование сильного локального сообщества
|
||||
|
||||
Мир ИТ-конференций меняется. Те, кто не адаптируется к новым реалиям, рискуют остаться в прошлом. А те, кто готов экспериментировать, внедрять технологии и решать реальные проблемы сообщества, могут создать по-настоящему культовые мероприятия.
|
Before Width: | Height: | Size: 47 MiB |
Before Width: | Height: | Size: 86 MiB |
Before Width: | Height: | Size: 769 KiB |
Before Width: | Height: | Size: 100 KiB |
Before Width: | Height: | Size: 745 KiB |
Before Width: | Height: | Size: 33 KiB |
Before Width: | Height: | Size: 464 KiB |
Before Width: | Height: | Size: 464 KiB |
Before Width: | Height: | Size: 468 KiB |
Before Width: | Height: | Size: 468 KiB |
Before Width: | Height: | Size: 536 KiB |
Before Width: | Height: | Size: 388 KiB |
Before Width: | Height: | Size: 391 KiB |
Before Width: | Height: | Size: 407 KiB |
Before Width: | Height: | Size: 408 KiB |
Before Width: | Height: | Size: 670 KiB |
Before Width: | Height: | Size: 410 KiB |
Before Width: | Height: | Size: 412 KiB |
Before Width: | Height: | Size: 409 KiB |
Before Width: | Height: | Size: 410 KiB |
Before Width: | Height: | Size: 411 KiB |
Before Width: | Height: | Size: 411 KiB |
Before Width: | Height: | Size: 328 KiB |
Before Width: | Height: | Size: 341 KiB |
Before Width: | Height: | Size: 297 KiB |
Before Width: | Height: | Size: 306 KiB |
Before Width: | Height: | Size: 326 KiB |
Before Width: | Height: | Size: 304 KiB |
Before Width: | Height: | Size: 308 KiB |
Before Width: | Height: | Size: 305 KiB |
Before Width: | Height: | Size: 277 KiB |
Before Width: | Height: | Size: 132 KiB |
Before Width: | Height: | Size: 241 KiB |
Before Width: | Height: | Size: 231 KiB |
Before Width: | Height: | Size: 515 KiB |
Before Width: | Height: | Size: 362 KiB |
Before Width: | Height: | Size: 362 KiB |
Before Width: | Height: | Size: 330 KiB |
Before Width: | Height: | Size: 365 KiB |
Before Width: | Height: | Size: 368 KiB |
Before Width: | Height: | Size: 371 KiB |
Before Width: | Height: | Size: 380 KiB |
Before Width: | Height: | Size: 385 KiB |
Before Width: | Height: | Size: 369 KiB |
Before Width: | Height: | Size: 349 KiB |
Before Width: | Height: | Size: 479 KiB |
Before Width: | Height: | Size: 455 KiB |
Before Width: | Height: | Size: 461 KiB |
Before Width: | Height: | Size: 127 KiB |
Before Width: | Height: | Size: 462 KiB |
Before Width: | Height: | Size: 479 KiB |
Before Width: | Height: | Size: 428 KiB |
Before Width: | Height: | Size: 434 KiB |
Before Width: | Height: | Size: 438 KiB |
Before Width: | Height: | Size: 445 KiB |
Before Width: | Height: | Size: 408 KiB |
Before Width: | Height: | Size: 405 KiB |
Before Width: | Height: | Size: 413 KiB |
Before Width: | Height: | Size: 412 KiB |
Before Width: | Height: | Size: 712 KiB |
Before Width: | Height: | Size: 451 KiB |
Before Width: | Height: | Size: 423 KiB |
Before Width: | Height: | Size: 436 KiB |
Before Width: | Height: | Size: 419 KiB |
Before Width: | Height: | Size: 423 KiB |
Before Width: | Height: | Size: 429 KiB |
Before Width: | Height: | Size: 436 KiB |
Before Width: | Height: | Size: 682 KiB |
Before Width: | Height: | Size: 682 KiB |
Before Width: | Height: | Size: 309 KiB |
Before Width: | Height: | Size: 516 KiB |
Before Width: | Height: | Size: 627 KiB |
Before Width: | Height: | Size: 575 KiB |
Before Width: | Height: | Size: 538 KiB |
Before Width: | Height: | Size: 498 KiB |
Before Width: | Height: | Size: 477 KiB |
Before Width: | Height: | Size: 453 KiB |
Before Width: | Height: | Size: 453 KiB |
Before Width: | Height: | Size: 472 KiB |
Before Width: | Height: | Size: 388 KiB |
Before Width: | Height: | Size: 426 KiB |
Before Width: | Height: | Size: 553 KiB |
Before Width: | Height: | Size: 434 KiB |
Before Width: | Height: | Size: 613 KiB |
Before Width: | Height: | Size: 1.0 MiB |
Before Width: | Height: | Size: 720 KiB |
Before Width: | Height: | Size: 712 KiB |
Before Width: | Height: | Size: 553 KiB |
Before Width: | Height: | Size: 670 KiB |
Before Width: | Height: | Size: 330 KiB |
Before Width: | Height: | Size: 468 KiB |
141
primakov.md
@ -2,32 +2,32 @@
|
||||
|
||||
*Как фронт-энд разработчик из Сбера создал аналог популярного сервиса для генерации презентаций с помощью LangChain и LangGraph*
|
||||
|
||||

|
||||

|
||||
*[0:00:02 → 0:00:50]*
|
||||
|
||||
## Кто создаёт AI-сервисы сегодня?
|
||||
|
||||
В списке Forbes [топ-50 AI-компаний](https://www.forbes.com/lists/ai50) есть множество знакомых названий: OpenAI, Cursor, Bolt New. Я вот обратил внимание на компанию Speak — они с 2016 года разрабатывают приложение для изучения языков с AI-помощником и попали в топ-50.
|
||||
В списке Forbes топ-50 AI-компаний есть множество знакомых названий: OpenAI, Cursor, Bolt New. Особенно интересна компания Speak — они с 2016 года разрабатывают приложение для изучения языков с AI-помощником и попали в топ-50.
|
||||
|
||||

|
||||

|
||||
*[0:00:50 → 0:02:10]*
|
||||
|
||||
Но главное открытие: **сейчас создавать AI-приложения можно довольно быстро**. Наши студенты делают продукты не хуже тех, что попадают в топ-рейтинги.
|
||||
|
||||
## Gamma.app: что внутри магии?
|
||||
|
||||
[Gamma.app](https://gamma.app/) — это сервис для создания презентаций. Вы вводите тему, он создаёт план презентации с заголовками и буллетами для каждого слайда, а затем генерирует полную презентацию с изображениями и оформлением.
|
||||
Gamma.app — это сервис для создания презентаций. Вы вводите тему, он создаёт план презентации с заголовками и буллетами для каждого слайда, а затем генерирует полную презентацию с изображениями и оформлением.
|
||||
|
||||

|
||||

|
||||
*[0:02:10 → 0:03:12]*
|
||||
|
||||
Выглядит как волшебство, но давайте разберём, как создаются подобные проекты.
|
||||
Выглядит как волшебство, но давайте разберём, как это работает изнутри.
|
||||
|
||||
## Декомпозиция задачи
|
||||
|
||||
Чтобы создать аналог Gamma.app, нужно решить две основные задачи:
|
||||
|
||||

|
||||

|
||||
*[0:03:12 → 0:04:15]*
|
||||
|
||||
1. **Генерировать план презентации** — структуру с заголовками и основными пунктами
|
||||
@ -37,9 +37,9 @@
|
||||
|
||||
### Промпт-инжиниринг в реальности
|
||||
|
||||
Простой промпт в GigaChat может создать план презентации, но для продакшена нужен более сложный подход:
|
||||
Простой промпт в ChatGPT может создать план презентации, но для продакшена нужен более сложный подход:
|
||||
|
||||

|
||||

|
||||
*[0:05:40 → 0:06:23]*
|
||||
|
||||
Мой промпт включает:
|
||||
@ -53,22 +53,12 @@
|
||||
LangChain предоставляет механизм шаблонов для удобной работы с промптами:
|
||||
|
||||
```typescript
|
||||
import { PromptTemplate } from "@langchain/core/prompts";
|
||||
|
||||
const promptTemplate = PromptTemplate.fromTemplate(
|
||||
`Создай план презентации на тему {topic}.
|
||||
const template = `
|
||||
Создай план презентации на тему {topic}.
|
||||
Учти следующие требования: {requirements}
|
||||
Текущая дата: {current_date}
|
||||
{format_instructions}`
|
||||
);
|
||||
|
||||
await promptTemplate.invoke({
|
||||
topic: "cats"
|
||||
requirements: '...',
|
||||
current_date: new Date().toISOString(),
|
||||
format_instructions: '...'
|
||||
});
|
||||
|
||||
{format_instructions}
|
||||
`;
|
||||
```
|
||||
|
||||
Переменные в фигурных скобках заменяются на реальные значения при выполнении.
|
||||
@ -77,6 +67,9 @@ await promptTemplate.invoke({
|
||||
|
||||
Для надёжной работы с JSON-ответами использую Zod для описания схемы:
|
||||
|
||||

|
||||
*[0:06:23 → 0:08:00]*
|
||||
|
||||
```typescript
|
||||
const presentationSchema = z.object({
|
||||
title: z.string().describe("Заголовок презентации"),
|
||||
@ -87,12 +80,15 @@ const presentationSchema = z.object({
|
||||
bullets: z.array(z.string()).describe("Основные пункты"),
|
||||
imagePrompt: z.string().describe("Промпт для генерации изображения"),
|
||||
webSearchQuery: z.string().optional().describe("Запрос для поиска в интернете")
|
||||
})).describe('Список слайдов презентации')
|
||||
}))
|
||||
});
|
||||
```
|
||||
|
||||
### Создание цепочки LangChain
|
||||
|
||||

|
||||
*[0:08:00 → 0:09:25]*
|
||||
|
||||
```typescript
|
||||
const parser = StructuredOutputParser.fromZodSchema(presentationSchema);
|
||||
const chain = template.pipe(model).pipe(parser);
|
||||
@ -104,7 +100,7 @@ const result = await chain.invoke({
|
||||
});
|
||||
```
|
||||
|
||||

|
||||

|
||||
*[0:09:25 → 0:09:55]*
|
||||
|
||||
## Часть 2: Создание презентации с LangGraph
|
||||
@ -115,13 +111,16 @@ const result = await chain.invoke({
|
||||
- Создание контента с учётом контекста
|
||||
- Условная логика и роутинг
|
||||
|
||||

|
||||

|
||||

|
||||
*[0:09:55 → 0:10:57]*
|
||||
|
||||
Здесь на помощь приходит **LangGraph**.
|
||||
|
||||
## Архитектура LangGraph: от нод к агентам
|
||||
|
||||

|
||||
*[0:10:57 → 0:26:20]*
|
||||
|
||||
### Основные концепции
|
||||
|
||||
LangGraph работает с **нодами** (nodes) — функциями, которые выполняют конкретные задачи:
|
||||
@ -132,8 +131,6 @@ LangGraph работает с **нодами** (nodes) — функциями,
|
||||
|
||||
### Архитектура моего клона
|
||||
|
||||

|
||||
|
||||
Я создал компактный и эффективный граф из нескольких нод:
|
||||
|
||||
1. **Prepare** — подготовка данных и присвоение ID слайдам
|
||||
@ -151,7 +148,7 @@ async function prepareNode(state: GraphState): Promise<Partial<GraphState>> {
|
||||
|
||||
// Присваиваем ID каждому слайду
|
||||
presentation.slides.forEach((slide, index) => {
|
||||
slide.id = uuidv4();
|
||||
slide.id = `slide-${index}`;
|
||||
});
|
||||
|
||||
return { presentation };
|
||||
@ -184,17 +181,19 @@ function routeToWebSearch(state: GraphState): string[] {
|
||||
|
||||
```typescript
|
||||
async function webSearchNode(data: { slide: Slide }): Promise<Partial<GraphState>> {
|
||||
const client = await tavily({ apiKey: process.env['TAVILY_API_KEY'] })
|
||||
|
||||
const researchResult = await client.search(slide.webResearchQuery, {
|
||||
maxResults: 3,
|
||||
})
|
||||
|
||||
const tavily = new TavilySearchResults({
|
||||
maxResults: 5,
|
||||
searchDepth: "advanced"
|
||||
});
|
||||
|
||||
const results = await tavily.search(data.slide.webSearchQuery);
|
||||
|
||||
// Экранируем фигурные скобки в коде
|
||||
const cleanResults = results.replace(/\{/g, '{{').replace(/\}/g, '}}');
|
||||
|
||||
return {
|
||||
webResearchResult: {
|
||||
[slide.id as string]: researchResult.results
|
||||
.map(r => r.content?.replace(/\{/g, '{{').replace(/\}/g, '}}'))
|
||||
.join('\n\n')
|
||||
webSearchResults: {
|
||||
[data.slide.id]: cleanResults
|
||||
}
|
||||
};
|
||||
}
|
||||
@ -206,27 +205,20 @@ async function webSearchNode(data: { slide: Slide }): Promise<Partial<GraphState
|
||||
|
||||
Для генерации изображений использую российскую нейросеть Kandinsky через API:
|
||||
|
||||
Для работы с api я написал простенькую обёртку для упрощения работы [@brojs/kandinsky](https://gitverse.ru/primakov.a.a/kandinsky-js)
|
||||
|
||||
```typescript
|
||||
async function generateImageNode(data: {
|
||||
slide: Slide,
|
||||
imageStyle: string
|
||||
}): Promise<Partial<GraphState>> {
|
||||
const kandinsky = new KandinskyAPI();
|
||||
const { imagePrompt, imageNegativePrompt } = slide
|
||||
|
||||
const imageSize = {
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
const images = await generateKandinskyImage({
|
||||
imagePrompt,
|
||||
imagesStyle,
|
||||
...imageSize,
|
||||
imageNegativePrompt,
|
||||
})
|
||||
});
|
||||
|
||||
return {
|
||||
generatedImages: {
|
||||
@ -240,8 +232,6 @@ async function generateImageNode(data: {
|
||||
|
||||
Самая интересная часть — создание контента с учётом предыдущих слайдов:
|
||||
|
||||
|
||||
|
||||
```typescript
|
||||
async function generateContentNode(state: GraphState): Promise<Partial<GraphState>> {
|
||||
const messages = [
|
||||
@ -284,23 +274,20 @@ async function generateContentNode(state: GraphState): Promise<Partial<GraphStat
|
||||
### Сборка графа воедино
|
||||
|
||||
```typescript
|
||||
const builder = new StateGraph(agentState)
|
||||
.addNode("prepare", prepareData)
|
||||
.addNode('webResearch', webResearch)
|
||||
.addNode('toGenerate', () => ({}))
|
||||
.addNode('final', state => state)
|
||||
.addNode('imageGenerator', imageGenerator)
|
||||
.addNode('generateSlideContent', generateSlideContent)
|
||||
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");
|
||||
|
||||
builder
|
||||
.addEdge(START, "prepare")
|
||||
.addConditionalEdges("prepare", afterPrepareRouter)
|
||||
.addConditionalEdges("toGenerate", generateImagesAndFirstContent)
|
||||
.addConditionalEdges("generateSlideContent", toGenerateNextSlideContent)
|
||||
.addEdge('webResearch', 'toGenerate')
|
||||
.addEdge('final', END);
|
||||
|
||||
const app = builder.compile();
|
||||
const app = graph.compile();
|
||||
|
||||
// Запуск генерации
|
||||
const result = await app.invoke({
|
||||
@ -325,7 +312,13 @@ LangGraph позволяет запускать ноды параллельно.
|
||||
|
||||
### Стоимость генерации
|
||||
|
||||
Примерная стоимость создания презентации из 8 слайдов около 20-30 Р
|
||||
Примерная стоимость создания презентации из 8 слайдов:
|
||||
- Планирование: ~$0.02
|
||||
- Веб-поиск: ~$0.01
|
||||
- Генерация изображений: ~$0.06
|
||||
- Создание контента: ~$0.02
|
||||
|
||||
**Итого: ~$0.11** себестоимость при продажной цене $2-5.
|
||||
|
||||
## Практические советы
|
||||
|
||||
@ -341,7 +334,9 @@ LangGraph позволяет запускать ноды параллельно.
|
||||
|
||||
Главное — **пробовать и экспериментировать**. Это направление развивается очень быстро, и скоро каждый разработчик будет работать с AI-агентами.
|
||||
|
||||
[Ссыылка на рабочий прототип](https://platform.bro-js.ru/bro-gamma)
|
||||

|
||||
|
||||
*QR-код для доступа к демо-версии клона Gamma.app*
|
||||
|
||||
---
|
||||
|
||||
|