rewrite creating-nodes

docs/advanced-development/creating custom node.mdx

@@ -0,0 +1,195 @@
+---
+sidebar_position: 1
+---
+
+# Создание кастомной ноды
+
+Создание кастомных нод позволяет обойти ограничения, которые связаны со стандартной библиотекой нод Piper, или же даже просто улучшить функционал текущих нод.
+Давайте создадим кастомную ноду **Merge text to JSON**, которая принимает несколько текстовых строк и объединяет их в один JSON массив.
+
+## **1. Загрузка ноды из библиотеки нод**
+
+Для создания кастомной ноды начните с загрузки существующей ноды, которая наиболее близка к вашим требованиям. Перейдите в библиотеку нод, используя значок **плюс (+)** в верхнем левом углу рабочего пространства пайплайны и выберите ноду **Input Text** для модификации, поскольку в ней минимум кода и она работает со строками.
+
+После добавления ноды откройте её настройки.
+
+![Панель настроек ноды](../img/create-node-1.png)
+
+Панель настроек включает несколько вкладок:
+
+- **Inputs** - Определение входных параметров и источников данных
+- **Design** - Настройка входных и выходных параметров
+- **Script** - Редактирование JavaScript кода логики ноды
+- **Environment** - Настройка переменных окружения
+- **Catalog** - Просмотр метаданных ноды и её публикация
+- **YAML** - Доступ к YAML ноды
+
+## **2. Настройка дизайна ноды**
+
+Кастомизация начинается во вкладке **Design**, где определяется структура ноды.
+
+![Вкладка Design](../img/create-node-2.png)
+
+### Основные свойства
+- **ID** - Внутреннее имя, используемое в коде (строчные латинские символы, без пробелов)
+- **Title** - Отображаемое имя, видимое пользователям
+
+Для нашей ноды прежние значения необходимо заменить на:
+- ID: `merge_text_to_json`
+- Title: `Merge text to JSON`
+
+### Добавление входных параметров
+
+Нашей ноде нужно 4 строковых входа. Чтобы добавить новый вход:
+
+1. Раскройте меню **Inputs**
+2. Введите имя нового входа: `string1`
+3. Нажмите **Add**
+
+![Добавление нового входного параметра](../img/create-node-3.png)
+
+Настройте параметры входа:
+- **Type**: string (то есть текст)
+- **Title**: String 1 (отображается на ноде)
+
+![Настройка свойств входа](../img/create-node-4.png)
+
+Повторите этот процесс для создания входов `string2`, `string3` и `string4`.
+
+Чтобы удалить прежний входной параметр `input_text`, снимите галочку с него в меню Inputs.
+
+![Удаление оригинального входа](../img/create-node-5.png)
+
+### Расширенные настройки входных параметров
+
+Доступ к детальным настройкам открывается через меню-гамбургер. 
+
+![Выпадающее меню настроек входных параметров](../img/create-node-6.png)
+
+Доступные опции включают:
+
+- **Order** (число) - Задаёт порядок расположения входов в ноде
+- **Description** (текст) - Текст всплывающей подсказки для параметра
+- **Required** (boolean) - Делает параметр обязательным
+- **Group** (текст) - Группирует связанные настройки
+- **Enum** (текст) - Создает выпадающие списки с предопределенными значениями
+- **Multiline** (boolean) - Расширяет поля String для длинного текста
+- **Min, Max** (число) - Устанавливает ограничения для полей Integer
+- **Step** (число) - Преобразует поле Integer в ползунок с шагом, равным значению Step
+- **Default** - Устанавливает значения по умолчанию
+- **Placeholder** (текст) - Показывает подсказку в пустых полях String
+- **Schema** - Техническое поле для скриптов
+- **Extensions** (текст) - Добавляет специальную функциональность (например, draw-mask для редактирования изображений)
+
+![Пример конфигурации расширений](../img/create-node-7.png)
+
+### Настройка выходных параметров
+
+Измените выходной параметр с `output_text` на `json_output`:
+- **Type**: JSON
+- **Title**: JSON
+
+![Отредлактированная вкладка Design](../img/create-node-8.png)
+
+:::tip Tip
+Отслеживайте ваши изменения во вкладке **Inputs**, чтобы видеть, как модификации влияют на структуру ноды.
+:::
+
+Следующий шаг - написание логики скрипта ноды, рассматриваемое в разделе Node Script.
+
+--- eng ---
+
+# Creating Custom Nodes
+
+Creating custom nodes allows you to bypass limitations associated with Piper's standard node library, or even simply improve the functionality of current nodes.
+Let's create a custom **Merge text to JSON** node that takes multiple text strings and combines them into a single JSON array.
+
+## **1. Loading a Node from the Node Library**
+
+To create a custom node, start by loading an existing node that's closest to your requirements. Navigate to the node library using the **plus (+)** icon in the top left corner of the pipeline workspace and select the **Input Text** node for modification, since it has minimal code and works with strings.
+
+After adding the node, open its settings.
+
+![Node Settings Panel](../img/create-node-1.png)
+
+The settings panel includes several tabs:
+
+- **Inputs** - Define input parameters and data sources
+- **Design** - Configure input and output parameters
+- **Script** - Edit JavaScript code for node logic
+- **Environment** - Configure environment variables
+- **Catalog** - View node metadata and publish it
+- **YAML** - Access the node's YAML
+
+## **2. Configuring Node Design**
+
+Customization begins in the **Design** tab, where the node structure is defined.
+
+![Design Tab](../img/create-node-2.png)
+
+### Basic Properties
+- **ID** - Internal name used in code (lowercase Latin characters, no spaces)
+- **Title** - Display name visible to users
+
+For our node, the previous values need to be replaced with:
+- ID: `merge_text_to_json`
+- Title: `Merge text to JSON`
+
+### Adding Input Parameters
+
+Our node needs 4 string inputs. To add a new input:
+
+1. Expand the **Inputs** menu
+2. Enter the new input name: `string1`
+3. Click **Add**
+
+![Adding New Input Parameter](../img/create-node-3.png)
+
+Configure the input parameters:
+- **Type**: string (i.e., text)
+- **Title**: String 1 (displayed on the node)
+
+![Configuring Input Properties](../img/create-node-4.png)
+
+Repeat this process to create inputs `string2`, `string3`, and `string4`.
+
+To remove the previous input parameter `input_text`, uncheck it in the Inputs menu.
+
+![Removing Original Input](../img/create-node-5.png)
+
+### Advanced Input Parameter Settings
+
+Access to detailed settings is opened through the hamburger menu.
+
+![Input Parameter Settings Dropdown Menu](../img/create-node-6.png)
+
+Available options include:
+
+- **Order** (number) - Sets the order of inputs in the node
+- **Description** (text) - Tooltip text for the parameter
+- **Required** (boolean) - Makes the parameter mandatory
+- **Group** (text) - Groups related settings
+- **Enum** (text) - Creates dropdown lists with predefined values
+- **Multiline** (boolean) - Expands String fields for long text
+- **Min, Max** (number) - Sets constraints for Integer fields
+- **Step** (number) - Converts Integer field to slider with step equal to Step value
+- **Default** - Sets default values
+- **Placeholder** (text) - Shows hints in empty String fields
+- **Schema** - Technical field for scripts
+- **Extensions** (text) - Adds special functionality (e.g., draw-mask for image editing)
+
+![Example Extension Configuration](../img/create-node-7.png)
+
+### Configuring Output Parameters
+
+Change the output parameter from `output_text` to `json_output`:
+- **Type**: JSON
+- **Title**: JSON
+
+![Edited Design Tab](../img/create-node-8.png)
+
+:::tip Tip
+Monitor your changes in the **Inputs** tab to see how modifications affect the node structure.
+:::
+
+The next step is writing the node's script logic, covered in the Node Script section.

docs/advanced-development/creating-nodes.mdx

@@ -1,134 +0,0 @@
----
-sidebar_position: 1
----
-
-# Create Node
-
-Creating nodes is the foundation of building pipelines in Piper. Each node provides access to a specific neural network or performs a programmed operation, and passes the results to the input of the next node in your workflow.
-
-## **1. Adding a New Node**
-
-To create a new node in your pipeline, locate the **plus (+)** icon in the upper left corner of the interface. This button opens the node library where you can browse and select from available nodes.
-
-![Empty pipeline workspace](../img/create-node-1.webp)
-
-## **2. Node Library**
-
-The node library displays all available nodes organized into logical categories to help you find the right functionality for your pipeline:
-
-![Node selection interface](../img/create-node-2.webp)
-
-### Common Node Categories:
-
-- **Generate images** - Nodes for generating and modifying images
-- **Work with images** - Image processing not related to generation
-- **Generate videos** - Nodes for video generation
-- **Process videos** - Video processing not related to generation
-- **Language agents** - Nodes for calling text LLM models
-- **Analyze images** - Group of nodes for image analysis, evaluation and detection
-- **Computer vision** - Image description nodes
-
-Browse through the categories and click on any node to add it to your pipeline workspace.
-
-## **3. Node Interaction**
-
-Once a node is added to your workspace, you can interact with it using the control icons that appear when you hover over the node:
-
-![Node with control icons](../img/create-node-3.webp)
-
-### Control Icons:
-
-- **Hand icon (🖐️)** - Click and drag to move the node around the workspace
-- **Notebook icon (📝)** - Opens the node configuration panel
-
-These icons provide quick access to essential node operations without cluttering the interface.
-
-## **4. Node Configuration**
-
-Clicking the notebook icon opens the node settings panel where you can customize the node's behavior:
-
-The configuration panel includes multiple tabs:
-
-- **Inputs** - Define input parameters and data sources
-- **Design** - Configure input and output parameters
-- **Script** - Edit the node's JavaScript code logic
-- **Environment** - Configure environment variables
-- **Catalog** - View node metadata and publish it
-- **YAML** - Access the node's YAML definition
-
-## **5. Deleting Nodes**
-
-To remove a node from your pipeline:
-
-1. Click the notebook icon to open the node settings
-2. Look for the red **Delete** button in the upper left corner of the settings panel
-3. Click Delete to permanently remove the node from your pipeline
-
-![Node settings panel](../img/create-node-4.webp)
-
-Be careful when deleting nodes, as this action cannot be undone and may break connections in your pipeline.
-
---- ru ---
-
-# Создание ноды
-
-Создание нод является основой построения пайплайнов в Piper. Каждая нода представляет определенную функцию или операцию, которая обрабатывает данные и передает их на следующий шаг в вашем рабочем процессе.
-
-## **1. Добавление новой ноды**
-
-Чтобы создать новую ноду в вашем пайплайне, найдите значок **плюс (+)** в верхнем левом углу интерфейса. Эта кнопка открывает библиотеку нод, где вы можете просматривать и выбирать из доступных нод.
-
-![Пустое рабочее пространство пайплайна](../img/create-node-1.webp)
-
-## **2. Библиотека нод**
-
-Библиотека нод отображает все доступные ноды, организованные в логические категории, чтобы помочь вам найти нужную функциональность для вашего пайплайна:
-
-![Интерфейс выбора нод](../img/create-node-2.webp)
-
-### Основные категории нод:
-
-- **Генерация изображений** - Ноды для генерации и изменения изображений
-- **Работа с изображениями** - Работа с изображениями, не связанная с генерацией
-- **Генерация видео** - Ноды для генерации видео
-- **Обработка видео** - Работа с видео, не связанная с генерацией
-- **Анализ изображений** - Группа нод по анализу, оценке и детектированию изображений
-- **Computer vision** - Описание изображений
-
-Просмотрите категории и нажмите на любую ноду, чтобы добавить её в рабочее пространство вашего пайплайна.
-
-## **3. Взаимодействие с нодой**
-
-После добавления ноды в рабочее пространство вы можете взаимодействовать с ней с помощью значков управления, которые появляются при наведении курсора на ноду:
-
-![Нода со значками управления](../img/create-node-3.webp)
-
-### Значки управления:
-
-- **Значок ладони (🖐️)** - Нажмите и перетащите для перемещения ноды по рабочему пространству
-- **Значок блокнота (📝)** - Открывает панель настроек ноды
-
-## **4. Настройка ноды**
-
-Нажатие на значок блокнота открывает панель настроек ноды, где вы можете настроить поведение ноды:
-
-Панель настроек включает несколько вкладок:
-
-- **Inputs** - Определение входных параметров и источников данных
-- **Design** - Настройка входных и выходных параметров
-- **Script** - Редактирование JavaScript кода логики ноды
-- **Environment** - Настройка переменных окружения
-- **Catalog** - Просмотр метаданных ноды и её публикация
-- **YAML** - Доступ к YAML ноды
-
-## **5. Удаление нод**
-
-Чтобы удалить ноду из вашего пайплайна:
-
-1. Нажмите на значок блокнота, чтобы открыть настройки ноды
-2. Найдите красную кнопку **Delete** в верхнем левом углу панели настроек
-3. Нажмите Delete, чтобы окончательно удалить ноду из вашего пайплайна
-
-![Node settings panel](../img/create-node-4.webp)
-
-Будьте осторожны при удалении нод, так как это действие нельзя отменить и оно может нарушить соединения в вашем пайплайн.