Compare commits

...

10 Commits

Author SHA1 Message Date
Primakov Alexandr Alexandrovich
76351e365e восстановил часть 2025-07-10 19:14:50 +03:00
Primakov Alexandr Alexandrovich
351a1fc134 поправил ссылку на прототип 2025-07-09 22:38:09 +03:00
Primakov Alexandr Alexandrovich
17d52d4941 gif лучше 2025-07-09 21:17:10 +03:00
Primakov Alexandr Alexandrovich
43fb5d19d6 а сработает ли видео 2025-07-09 21:03:05 +03:00
Primakov Alexandr Alexandrovich
f15a0a2be3 поправил пару слайдов 2025-07-09 20:19:39 +03:00
f65d1fdec5 rename 2025-07-09 19:33:27 +03:00
bfeb7106ad фикс 2025-07-09 19:31:52 +03:00
774a20f2c5 пофиксил статью 2025-07-09 19:29:02 +03:00
058d152351 исправление после курсора 2025-07-07 21:05:35 +03:00
403ed47e4b фикс противоречий 2025-07-07 20:40:23 +03:00
97 changed files with 223 additions and 153 deletions

View File

@ -0,0 +1,102 @@
# Системный промт для технического писателя (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 Normal file
View File

@ -0,0 +1 @@
замечания.txt

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 86 MiB

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 769 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 745 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 464 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 464 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 468 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 468 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 536 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 388 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 391 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 407 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 408 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 670 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 410 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 412 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 409 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 410 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 411 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 411 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 328 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 341 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 297 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 306 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 326 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 304 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 308 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 305 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 277 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 132 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 241 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 231 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 515 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 362 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 362 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 330 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 365 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 368 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 371 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 380 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 385 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 369 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 349 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 479 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 455 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 461 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 127 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 462 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 479 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 428 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 434 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 438 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 445 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 408 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 405 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 413 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 412 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 712 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 451 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 423 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 436 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 419 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 423 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 429 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 436 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 682 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 682 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 309 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 516 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 627 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 575 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 538 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 498 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 477 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 453 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 453 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 472 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 388 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 426 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 553 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 434 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 613 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 720 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 712 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 553 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 670 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 330 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 468 KiB

View File

@ -2,32 +2,32 @@
*Как фронт-энд разработчик из Сбера создал аналог популярного сервиса для генерации презентаций с помощью LangChain и LangGraph* *Как фронт-энд разработчик из Сбера создал аналог популярного сервиса для генерации презентаций с помощью LangChain и LangGraph*
![Слайд с информацией о спикере](https://via.placeholder.com/800x450/2D3748/FFFFFF?text=Александр+Примаков%0A10+лет+в+IT%0A6+лет+в+Сбере) ![Слайд с информацией о спикере](./primakov-article-images/Слайд%20с%20информацией%20о%20спикере.PNG)
*[0:00:02 → 0:00:50]* *[0:00:02 → 0:00:50]*
## Кто создаёт AI-сервисы сегодня? ## Кто создаёт AI-сервисы сегодня?
В списке Forbes топ-50 AI-компаний есть множество знакомых названий: OpenAI, Cursor, Bolt New. Особенно интересна компания Speak — они с 2016 года разрабатывают приложение для изучения языков с AI-помощником и попали в топ-50. В списке Forbes [топ-50 AI-компаний](https://www.forbes.com/lists/ai50) есть множество знакомых названий: 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) ![Слайд с компаниями, использующими AI](./primakov-article-images/Слайд%20с%20компаниями,%20использующими%20AI.PNG)
*[0:00:50 → 0:02:10]* *[0:00:50 → 0:02:10]*
Но главное открытие: **сейчас создавать AI-приложения можно довольно быстро**. Наши студенты делают продукты не хуже тех, что попадают в топ-рейтинги. Но главное открытие: **сейчас создавать AI-приложения можно довольно быстро**. Наши студенты делают продукты не хуже тех, что попадают в топ-рейтинги.
## Gamma.app: что внутри магии? ## Gamma.app: что внутри магии?
Gamma.app — это сервис для создания презентаций. Вы вводите тему, он создаёт план презентации с заголовками и буллетами для каждого слайда, а затем генерирует полную презентацию с изображениями и оформлением. [Gamma.app](https://gamma.app/) — это сервис для создания презентаций. Вы вводите тему, он создаёт план презентации с заголовками и буллетами для каждого слайда, а затем генерирует полную презентацию с изображениями и оформлением.
![Демонстрация работы сервиса gamma.app](https://via.placeholder.com/800x450/4A5568/FFFFFF?text=Gamma.app+Demo%0AВводим+тему+→+План+→+Презентация) ![Демонстрация работы сервиса gamma.app](./primakov-article-images/Демонстрация%20работы%20сервиса%20gamma.app.PNG)
*[0:02:10 → 0:03:12]* *[0:02:10 → 0:03:12]*
Выглядит как волшебство, но давайте разберём, как это работает изнутри. Выглядит как волшебство, но давайте разберём, как создаются подобные проекты.
## Декомпозиция задачи ## Декомпозиция задачи
Чтобы создать аналог Gamma.app, нужно решить две основные задачи: Чтобы создать аналог Gamma.app, нужно решить две основные задачи:
![Слайд с задачами для решения](https://via.placeholder.com/800x450/2B6CB0/FFFFFF?text=Задачи%0A1.+Генерация+плана+презентации%0A2.+Создание+презентации+по+плану) ![Слайд с задачами для решения](./primakov-article-images/Слайд%20с%20задачами%20для%20решения.PNG)
*[0:03:12 → 0:04:15]* *[0:03:12 → 0:04:15]*
1. **Генерировать план презентации** — структуру с заголовками и основными пунктами 1. **Генерировать план презентации** — структуру с заголовками и основными пунктами
@ -37,9 +37,9 @@ Gamma.app — это сервис для создания презентаций
### Промпт-инжиниринг в реальности ### Промпт-инжиниринг в реальности
Простой промпт в ChatGPT может создать план презентации, но для продакшена нужен более сложный подход: Простой промпт в GigaChat может создать план презентации, но для продакшена нужен более сложный подход:
![Слайд с промптом для генерации презентации](https://via.placeholder.com/800x450/2B6CB0/FFFFFF?text=Промпт+для+генерации%0A•+Уговариваем+создать+план%0A•+Описываем+типы+слайдов%0A•+Форматирование+в+JSON%0A•+Текущая+дата) ![Слайд с промптом для генерации презентации](./primakov-article-images/Слайд%20с%20промптом%20для%20генерации%20презентации.PNG)
*[0:05:40 → 0:06:23]* *[0:05:40 → 0:06:23]*
Мой промпт включает: Мой промпт включает:
@ -53,12 +53,22 @@ Gamma.app — это сервис для создания презентаций
LangChain предоставляет механизм шаблонов для удобной работы с промптами: LangChain предоставляет механизм шаблонов для удобной работы с промптами:
```typescript ```typescript
const template = ` import { PromptTemplate } from "@langchain/core/prompts";
Создай план презентации на тему {topic}.
const promptTemplate = PromptTemplate.fromTemplate(
`Создай план презентации на тему {topic}.
Учти следующие требования: {requirements} Учти следующие требования: {requirements}
Текущая дата: {current_date} Текущая дата: {current_date}
{format_instructions} {format_instructions}`
`; );
await promptTemplate.invoke({
topic: "cats"
requirements: '...',
current_date: new Date().toISOString(),
format_instructions: '...'
});
``` ```
Переменные в фигурных скобках заменяются на реальные значения при выполнении. Переменные в фигурных скобках заменяются на реальные значения при выполнении.
@ -67,9 +77,6 @@ const template = `
Для надёжной работы с JSON-ответами использую 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 ```typescript
const presentationSchema = z.object({ const presentationSchema = z.object({
title: z.string().describe("Заголовок презентации"), title: z.string().describe("Заголовок презентации"),
@ -80,15 +87,12 @@ const presentationSchema = z.object({
bullets: z.array(z.string()).describe("Основные пункты"), bullets: z.array(z.string()).describe("Основные пункты"),
imagePrompt: z.string().describe("Промпт для генерации изображения"), imagePrompt: z.string().describe("Промпт для генерации изображения"),
webSearchQuery: z.string().optional().describe("Запрос для поиска в интернете") webSearchQuery: z.string().optional().describe("Запрос для поиска в интернете")
})) })).describe('Список слайдов презентации')
}); });
``` ```
### Создание цепочки LangChain ### Создание цепочки LangChain
![Слайд с описанием работы парсера ответа от LLM](https://via.placeholder.com/800x450/2B6CB0/FFFFFF?text=LangChain+Pipeline%0ATemplate+→+Model+→+Parser+→+JSON)
*[0:08:00 → 0:09:25]*
```typescript ```typescript
const parser = StructuredOutputParser.fromZodSchema(presentationSchema); const parser = StructuredOutputParser.fromZodSchema(presentationSchema);
const chain = template.pipe(model).pipe(parser); const chain = template.pipe(model).pipe(parser);
@ -100,7 +104,7 @@ const result = await chain.invoke({
}); });
``` ```
![Демонстрация распарсенного JSON](https://via.placeholder.com/800x450/2B6CB0/FFFFFF?text=Результат+парсинга%0A%7B%0A++title%3A+%22Фотографирование+котят%22%0A++slides%3A+%5B...%5D%0A%7D) ![Демонстрация генерации JSON](./primakov-article-images/json-generation.gif)
*[0:09:25 → 0:09:55]* *[0:09:25 → 0:09:55]*
## Часть 2: Создание презентации с LangGraph ## Часть 2: Создание презентации с LangGraph
@ -111,16 +115,13 @@ const result = await chain.invoke({
- Создание контента с учётом контекста - Создание контента с учётом контекста
- Условная логика и роутинг - Условная логика и роутинг
![Демонстрация аналога сервиса gamma.app](https://via.placeholder.com/800x450/4A5568/FFFFFF?text=Клон+Gamma.app%0AГенерация+презентации%0Aпо+готовому+плану) ![Демонстрация аналога сервиса gamma.app план](./primakov-article-images/bro-gamma-plan.gif)
*[0:09:55 → 0:10:57]* ![Демонстрация аналога сервиса gamma.app слайды](./primakov-article-images/bro-gamma-slides.gif)
Здесь на помощь приходит **LangGraph**. Здесь на помощь приходит **LangGraph**.
## Архитектура 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) — функциями, которые выполняют конкретные задачи: LangGraph работает с **нодами** (nodes) — функциями, которые выполняют конкретные задачи:
@ -131,6 +132,8 @@ LangGraph работает с **нодами** (nodes) — функциями,
### Архитектура моего клона ### Архитектура моего клона
![Слайд с графом клона gamma.app](./primakov-article-images/Слайд%20с%20графом%20клона%20gamma.app.PNG)
Я создал компактный и эффективный граф из нескольких нод: Я создал компактный и эффективный граф из нескольких нод:
1. **Prepare** — подготовка данных и присвоение ID слайдам 1. **Prepare** — подготовка данных и присвоение ID слайдам
@ -148,7 +151,7 @@ async function prepareNode(state: GraphState): Promise<Partial<GraphState>> {
// Присваиваем ID каждому слайду // Присваиваем ID каждому слайду
presentation.slides.forEach((slide, index) => { presentation.slides.forEach((slide, index) => {
slide.id = `slide-${index}`; slide.id = uuidv4();
}); });
return { presentation }; return { presentation };
@ -181,19 +184,17 @@ function routeToWebSearch(state: GraphState): string[] {
```typescript ```typescript
async function webSearchNode(data: { slide: Slide }): Promise<Partial<GraphState>> { async function webSearchNode(data: { slide: Slide }): Promise<Partial<GraphState>> {
const tavily = new TavilySearchResults({ const client = await tavily({ apiKey: process.env['TAVILY_API_KEY'] })
maxResults: 5,
searchDepth: "advanced"
});
const results = await tavily.search(data.slide.webSearchQuery); const researchResult = await client.search(slide.webResearchQuery, {
maxResults: 3,
// Экранируем фигурные скобки в коде })
const cleanResults = results.replace(/\{/g, '{{').replace(/\}/g, '}}');
return { return {
webSearchResults: { webResearchResult: {
[data.slide.id]: cleanResults [slide.id as string]: researchResult.results
.map(r => r.content?.replace(/\{/g, '{{').replace(/\}/g, '}}'))
.join('\n\n')
} }
}; };
} }
@ -205,20 +206,27 @@ async function webSearchNode(data: { slide: Slide }): Promise<Partial<GraphState
Для генерации изображений использую российскую нейросеть Kandinsky через API: Для генерации изображений использую российскую нейросеть Kandinsky через API:
Для работы с api я написал простенькую обёртку для упрощения работы [@brojs/kandinsky](https://gitverse.ru/primakov.a.a/kandinsky-js)
```typescript ```typescript
async function generateImageNode(data: { async function generateImageNode(data: {
slide: Slide, slide: Slide,
imageStyle: string imageStyle: string
}): Promise<Partial<GraphState>> { }): Promise<Partial<GraphState>> {
const kandinsky = new KandinskyAPI(); const kandinsky = new KandinskyAPI();
const { imagePrompt, imageNegativePrompt } = slide
const imagePrompt = `${data.slide.imagePrompt}, ${data.imageStyle}`; const imageSize = {
const image = await kandinsky.generateImage({
prompt: imagePrompt,
negativePrompt: data.slide.negativeImagePrompt,
width: data.slide.type === 'title' ? 512 : 768, width: data.slide.type === 'title' ? 512 : 768,
height: data.slide.type === 'title' ? 512 : 432 height: data.slide.type === 'title' ? 512 : 432
}); }
const images = await generateKandinskyImage({
imagePrompt,
imagesStyle,
...imageSize,
imageNegativePrompt,
})
return { return {
generatedImages: { generatedImages: {
@ -232,6 +240,8 @@ async function generateImageNode(data: {
Самая интересная часть — создание контента с учётом предыдущих слайдов: Самая интересная часть — создание контента с учётом предыдущих слайдов:
```typescript ```typescript
async function generateContentNode(state: GraphState): Promise<Partial<GraphState>> { async function generateContentNode(state: GraphState): Promise<Partial<GraphState>> {
const messages = [ const messages = [
@ -274,20 +284,23 @@ async function generateContentNode(state: GraphState): Promise<Partial<GraphStat
### Сборка графа воедино ### Сборка графа воедино
```typescript ```typescript
const graph = new StateGraph(GraphState) const builder = new StateGraph(agentState)
.addNode("prepare", prepareNode) .addNode("prepare", prepareData)
.addNode("webresearch", webSearchNode) .addNode('webResearch', webResearch)
.addNode("generateImages", generateImageNode) .addNode('toGenerate', () => ({}))
.addNode("generateContent", generateContentNode) .addNode('final', state => state)
.addNode("final", finalNode) .addNode('imageGenerator', imageGenerator)
.setEntryPoint("prepare") .addNode('generateSlideContent', generateSlideContent)
.addConditionalEdges("prepare", routeToWebSearch)
.addEdge("webresearch", "generateImages")
.addEdge("generateImages", "generateContent")
.addEdge("generateContent", "final")
.setFinishPoint("final");
const app = graph.compile(); builder
.addEdge(START, "prepare")
.addConditionalEdges("prepare", afterPrepareRouter)
.addConditionalEdges("toGenerate", generateImagesAndFirstContent)
.addConditionalEdges("generateSlideContent", toGenerateNextSlideContent)
.addEdge('webResearch', 'toGenerate')
.addEdge('final', END);
const app = builder.compile();
// Запуск генерации // Запуск генерации
const result = await app.invoke({ const result = await app.invoke({
@ -312,13 +325,7 @@ LangGraph позволяет запускать ноды параллельно.
### Стоимость генерации ### Стоимость генерации
Примерная стоимость создания презентации из 8 слайдов: Примерная стоимость создания презентации из 8 слайдов около 20-30 Р
- Планирование: ~$0.02
- Веб-поиск: ~$0.01
- Генерация изображений: ~$0.06
- Создание контента: ~$0.02
**Итого: ~$0.11** себестоимость при продажной цене $2-5.
## Практические советы ## Практические советы
@ -334,9 +341,7 @@ LangGraph позволяет запускать ноды параллельно.
Главное — **пробовать и экспериментировать**. Это направление развивается очень быстро, и скоро каждый разработчик будет работать с AI-агентами. Главное — **пробовать и экспериментировать**. Это направление развивается очень быстро, и скоро каждый разработчик будет работать с AI-агентами.
![QR-код для доступа к приложению](https://via.placeholder.com/200x200/2D3748/FFFFFF?text=QR+Code%0AГенератор+презентаций) [Ссыылка на рабочий прототип](https://platform.bro-js.ru/bro-gamma)
*QR-код для доступа к демо-версии клона Gamma.app*
--- ---

View File

@ -1,12 +1,24 @@
# От техсетки до «Татар сан»: как мы изобрели новый формат ИТ-конференций # От техсетки до «Татар сан»: как мы изобрели новый формат ИТ-конференций
*Туториал* *Личный опыт для тех, кто хочет делать сильные ИТ-мероприятия в регионах*
> **Для кого статья:**
> Для организаторов, лидеров ИТ-сообществ, HR, и всех, кто верит, что в регионах можно делать крутые события.
> **Миссия:** Показать, что региональные ИТ-мероприятия могут быть не хуже столичных, если делать их с душой, амбициями и вниманием к деталям.
![Главное фото с конференции Татар сан](article-images/Главное%20фото%20с%20конференции%20Татар%20сан.jpg) ![Главное фото с конференции Татар сан](article-images/Главное%20фото%20с%20конференции%20Татар%20сан.jpg)
В 2020 году мир ИТ-конференций сломался. Онлайн убил нетворкинг, а традиционные форматы перестали работать. Рассказываю, как за 5 лет мы прошли путь от ежедневных техсеток в Сбере до флагманской конференции «Татар сан» с призовым фондом 250 тысяч рублей, собственной платформой оценки спикеров и уникальными механиками борьбы со стереотипами. В 2020 году мир ИТ-конференций кардинально изменился. Онлайн убил нетворкинг, а традиционные форматы перестали работать. За 6 лет (2019-2025) мы прошли путь от ежедневных техсеток в Сбере до серии успешных конференций «Татар сан» с уникальными механиками и планами создания собственной платформы оценки спикеров.
Меня зовут Андрей Власов, я работаю в Сбере, разрабатываю сайт СберБанк Онлайн и лидирую технологический хаб Сбера в Казани. За пять лет организовал более 10 мероприятий — от внутренних митапов до конференций на 1000+ участников. Меня зовут Андрей Власов, я работаю в Сбере, разрабатываю сайт СберБанк Онлайн и лидирую технологический хаб Сбера в Казани. С 2019 года организовал более 10 мероприятий — от внутренних митапов до конференций на 1000+ участников.
---
## Как техсетка стала фундаментом для конференций
Всё началось с простой идеи — делиться знаниями внутри команды. Ежедневные техсетки помогли выстроить культуру обмена опытом и менторства. Именно этот опыт стал основой для будущих митапов и конференций: мы увидели, как важно создавать площадки для открытого диалога и роста, и решили масштабировать этот подход на всё ИТ-сообщество Казани.
---
## Проблема: что сломалось в мире ИТ-конференций ## Проблема: что сломалось в мире ИТ-конференций
@ -17,26 +29,28 @@
- Нетворкинг практически умер - Нетворкинг практически умер
- Появились новые потребности в интерактиве - Появились новые потребности в интерактиве
**Базовые метрики конференций в 2020:** **Что получилось в результате перехода в онлайн:**
- **Актуальность**наконец-то качественные доклады в комфортных условиях - **Актуальность** — качественные доклады в комфортных условиях, но потеря живого взаимодействия
- **Интерактив**рост популярности Mentimeter и QR-интерактивов - **Интерактив**попытки компенсировать через Mentimeter и QR-коды, но ощущение искусственности
- **Нетворкинг**RIP - **Нетворкинг**практически умер, стал формальным
- **Организация** — гонка собственных платформ и армий техподдержки - **Организация** — гонка технологических решений в ущерб человеческому фактору
Я очень люблю конференции и обмен знаниями, но когда что-то начало не устраивать в существующих форматах, решил делать свои. Я очень люблю конференции и обмен знаниями, но когда что-то начало не устраивать в существующих форматах, решил делать свои.
## Региональный барьер и личная мотивация ## Региональный потенциал и личная мотивация
Существует негласное правило в ИТ: **"в регионах специалисты в два раза хуже, чем в Москве"**. Когда я рассказывал о планах конференции в столице, услышал фразу: *"Если бы ты к нам обратился, то можно было сделать конференцию лучше"*. В ИТ-индустрии существует распространённое заблуждение, что качественные технологические мероприятия можно организовать только в столице. Многие считают, что в регионах недостаточно экспертизы и ресурсов для создания событий мирового уровня.
### Миссия — разрушить стереотипы ### Миссия — раскрыть потенциал регионов
Эта фраза стала **личной мотивацией**. Хотелось показать, что качественная конференция или митап создает импульс для всего сообщества. Эта ситуация стала **личной мотивацией**. Я твёрдо верю, что в каждом регионе есть выдающиеся специалисты, уникальный опыт и невероятные истории, которые достойны большой сцены.
**Ключевой принцип:** Человека поменять нельзя, но можно показать пример, на который люди пойдут, который будет привлекать их внимание. **Небольшие инсайты**
Качественная конференция или митап создаёт импульс для всего сообщества и раскрывает скрытый потенциал региона.
**Доказательство работает:** Показать, что география не определяет качество. Региональные ИТ-специалисты обладают не меньшей экспертизой, а иногда даже более практическим опытом благодаря решению нестандартных задач в условиях ограниченных ресурсов.
После наших первых митапов количество спикеров **кратно увеличилось**, и в принципе ИТ в Казани ожило. Сообщество стало активнее, появились новые инициативы, люди начали делиться экспертизой.
Когда создаёшь качественную площадку, талантливые люди сами выходят из тени и начинают делиться своими знаниями. Регионы не отстают от столицы — им просто нужна правильная мотивация и возможности для самовыражения.
## Методология: Challenge Based ## Методология: Challenge Based
@ -45,7 +59,7 @@
В основе нашего подхода лежит методика **Challenge Based**. Главный принцип: постоянно начинать с какого-то вызова, с высокой цели, которая имеет реальное значение для людей. В основе нашего подхода лежит методика **Challenge Based**. Главный принцип: постоянно начинать с какого-то вызова, с высокой цели, которая имеет реальное значение для людей.
**Как это работает:** **Как это работает:**
Мы каждую конференцию ставим на максималках, на уровне *"я не знаю, как это реализовать, это безумие"*. Мы каждую конференцию ставим на максималках, на уровне *"Это на столько крутая и амбициозная цель, что даже от участие в реализации цели я получу незабываемые впечатления"*.
Это очень сложно, но когда мы достигаем цели, понимаем — **потолок наших возможностей гораздо выше**. Это очень сложно, но когда мы достигаем цели, понимаем — **потолок наших возможностей гораздо выше**.
@ -115,7 +129,7 @@
**14 ноября 2022 — запуск BroJS:** **14 ноября 2022 — запуск BroJS:**
Название от проекта Brokerage (раздел "Инвестиции" в СберБанк Онлайн). Название взято от проекта Brokerage (Брокерский бизнес) в котором мы разрабатываем на сайте СберБанк онлайн раздел инвестиции.
### Философия "суперсил" и личных историй ### Философия "суперсил" и личных историй
@ -160,6 +174,7 @@
- 5 спикеров - 5 спикеров
**Результаты:** **Результаты:**
- 180 регистраций
- 1-й день: 90 участников - 1-й день: 90 участников
- 2-й день: 70 участников - 2-й день: 70 участников
@ -196,7 +211,7 @@ IT Community Day был **огромным экспериментом**. Реш
- Создали **"жаркую тусовку на крыше"** в прямом и переносном смысле - Создали **"жаркую тусовку на крыше"** в прямом и переносном смысле
**Кастомный мерч в реальном времени:** **Кастомный мерч в реальном времени:**
- Лидер компетенции дизайна **Катя Панова** организовала **арт-зону** - Дизайнеры из Брокерского бизнеса помогли организовать **арт-зону**
- Дизайнеры делали **кастомный уникальный мерч** прямо на крыше - Дизайнеры делали **кастомный уникальный мерч** прямо на крыше
- Участники могли получить персонализированные сувениры - Участники могли получить персонализированные сувениры
@ -210,7 +225,6 @@ IT Community Day был **огромным экспериментом**. Реш
**Инфраструктура:** **Инфраструктура:**
- Полноценный **catering** прямо на крыше - Полноценный **catering** прямо на крыше
- Крытая зона в Технохабе как запасной вариант
- **Прекрасные виды** с крыши ИТ-парка - **Прекрасные виды** с крыши ИТ-парка
### Уникальная атмосфера ### Уникальная атмосфера
@ -265,11 +279,12 @@ IT Community Day был **огромным экспериментом**. Реш
- Сотрудничество со школой 21 - Сотрудничество со школой 21
- Синхронизация мероприятий Технохаба и школы 21 - Синхронизация мероприятий Технохаба и школы 21
- Общий бюджет на пересекающиеся мероприятия - Общий бюджет на пересекающиеся мероприятия
- Core-команда: 20 организаторов - Core-команда: выросла с 7 человек до 20 организаторов
### Построение команды организаторов ### Построение команды организаторов
![Фото команды организаторов](article-images/Фото%20команды%20организаторов.jpg) ![Фото команды организаторов](article-images/Фото%20команды%20организаторов.jpg)
На фото к сведению не вся команда организаторов.
К этому моменту сформировалась четкая структура команды с ключевыми ролями: К этому моменту сформировалась четкая структура команды с ключевыми ролями:
@ -349,14 +364,14 @@ IT Community Day был **огромным экспериментом**. Реш
- Крутая айдентика и стиль - Крутая айдентика и стиль
- Эффектное афтепати в формате шоу - Эффектное афтепати в формате шоу
- Красочное, не затянутое мероприятие - Красочное, не затянутое мероприятие
- Народ не хотел расходиться до 23:00 - Народ не хотел расходиться, хотя на часах уже было почти полночь и в планах небыло вечеринки на всю ночь
**Результаты:** **Результаты:**
- 840 регистраций - 840 регистраций
- 470 очных участников - 470 очных участников
- В последнюю неделю перед Новым годом, в среду! - В последнюю неделю перед Новым годом, в среду!
## Этап 7: Флагманская «Татар сан» — технологический прорыв ## Флагманская «Татар сан» — технологический прорыв
![Фото с воздушным шаром](article-images/Фото%20с%20воздушным%20шаром.jpg) ![Фото с воздушным шаром](article-images/Фото%20с%20воздушным%20шаром.jpg)
@ -374,7 +389,7 @@ IT Community Day был **огромным экспериментом**. Реш
- **Агент общения с пользователями** — чат-бот для решения типовых вопросов - **Агент общения с пользователями** — чат-бот для решения типовых вопросов
- **Агент обработки обратной связи** — автоматический анализ отзывов и предложений - **Агент обработки обратной связи** — автоматический анализ отзывов и предложений
### Революционные механики ### Инновационные механики
**Мотивация для спикеров:** **Мотивация для спикеров:**
- 250 000 рублей за лучший доклад - 250 000 рублей за лучший доклад
@ -418,10 +433,10 @@ IT Community Day был **огромным экспериментом**. Реш
| Мероприятие | Год | Регистрации | Очные участники | | Мероприятие | Год | Регистрации | Очные участники |
|-------------|-----|-------------|----------------| |-------------|-----|-------------|----------------|
| BroJS | 2022 | ~100 | 90/70 | | BroJS | 2022 | ~180 | 90/70 |
| IT Community day | 2023 | 1000+ | 500 | | IT Community day v1 | 2023 | 1000+ | 500 |
| IT Community day v2 | 2024 | 860 | 470 | | IT Community day v2 | 2024 | 860 | 470 |
| Татар сан v1 | 2024 | 840 | 470 | | Татар сан v1 | 2024 | 840 | 490 |
| Татар сан v2 | 2025 | 1700+ | 1000+ | | Татар сан v2 | 2025 | 1700+ | 1000+ |
### Ключевые принципы успеха ### Ключевые принципы успеха
@ -441,55 +456,14 @@ 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 года
## Рекомендации для организаторов ## Рекомендации для организаторов
@ -515,24 +489,12 @@ IT Community Day был **огромным экспериментом**. Реш
**Контент:** **Контент:**
- Итерируйтесь — каждое мероприятие должно быть лучше предыдущего - Итерируйтесь — каждое мероприятие должно быть лучше предыдущего
- Не бойтесь экспериментов — новые механики могут выстрелить - Не бойтесь экспериментов — новые механики могут выстрелить
- Боритесь со стереотипами — иногда надо погладить против шерсти устояшуюсю культуру, чтобы привлечь аудиторию - Боритесь со стереотипами — иногда надо действовать против устоявшейся культуры, чтобы привлечь новую аудиторию
![Фото команды организаторов](article-images/Фото%20команды%20организаторов.jpg) ![Всем спасибо](article-images/финал.jpg)
## Заключение ## Заключение
За 5 лет мы прошли путь от ежедневных техсеток до флагманской конференции на 1000+ участников. Главный урок: традиционные форматы ИТ-мероприятий нуждаются в кардинальном обновлении. Мы прошли путь от ежедневных техсеток до флагманской конференции на 1000+ участников. Главный урок: традиционные форматы ИТ-мероприятий нуждаются в кардинальном обновлении.
**Что работает:**
- Собственные технологические решения
- Борьба со стереотипами и инклюзивность
- Уникальные механики и геймификация
- Влияние на региональный ИТ-рынок
- Системный подход к метрикам
**Измеримые результаты:**
- Увеличение аудитории в 10 раз
- Улучшение скорости закрытия вакансий в регионе
- Формирование сильного локального сообщества
Мир ИТ-конференций меняется. Те, кто не адаптируется к новым реалиям, рискуют остаться в прошлом. А те, кто готов экспериментировать, внедрять технологии и решать реальные проблемы сообщества, могут создать по-настоящему культовые мероприятия. Мир ИТ-конференций меняется. Те, кто не адаптируется к новым реалиям, рискуют остаться в прошлом. А те, кто готов экспериментировать, внедрять технологии и решать реальные проблемы сообщества, могут создать по-настоящему культовые мероприятия.