> ## Documentation Index
> Fetch the complete documentation index at: https://docs.comfy.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Objetos de Comfy

> Guía de referencia de los objetos centrales del frontend de ComfyUI: LiteGraph, ComfyApp, LGraph, LLink y ComfyNode, con sus propiedades y funciones.

## LiteGraph

La interfaz de Comfy UI se construye sobre [LiteGraph](https://github.com/jagenjo/litegraph.js).
Gran parte de la funcionalidad de Comfy la proporciona LiteGraph, así que si desarrollas nodos
más complejos, probablemente te resulte útil clonar ese repositorio y explorar la documentación,
que se encuentra en `doc/index.html`.

## ComfyApp

El objeto `app` (siempre accesible mediante `import { app } from "../../scripts/app.js";`) representa la aplicación de Comfy que se ejecuta en el navegador
y contiene varias propiedades y funciones útiles, algunas de las cuales se enumeran a continuación.

> [!NOTE]
>
> **Obsoleto:** Secuestrar o parchear funciones de forma manual (monkey-patching) en `app` o en sus prototipos está obsoleto y puede cambiar en cualquier momento en un futuro cercano. En su lugar, usa los [ganchos de extensión](https://docs.comfy.org/es/custom-nodes/js/javascript_hooks.md) y la [API del Menú Contextual](https://docs.comfy.org/es/custom-nodes/js/context-menu-migration.md) oficiales.

> [!WARNING]
>
> No se recomienda secuestrar funciones en `app`, ya que Comfy está en constante desarrollo y el comportamiento del núcleo puede cambiar.

### Propiedades

Entre las propiedades importantes de `app` se incluyen (esta no es una lista exhaustiva):

| propiedad | contenido |
| - | - |
| `canvas` | Un objeto LGraphCanvas que representa la interfaz de usuario actual. Contiene algunas propiedades potencialmente interesantes, como `node_over` y `selected_nodes`. |
| `canvasEl` | El elemento DOM `<canvas>` |
| `graph` | Una referencia al objeto LGraph que describe el gráfico actual |
| `runningNodeId` | Durante la ejecución, el nodo que se está ejecutando en ese momento |
| `ui` | Proporciona acceso a algunos elementos de la interfaz de usuario, como la cola, el menú y los diálogos |

`canvas` (para los elementos gráficos) y `graph` (para las conexiones lógicas) son probablemente los que más querrás consultar.

### Funciones

De nuevo, hay muchas. Algunas de las más importantes son:

| función | notas |
| - | - |
| graphToPrompt | Convierte el gráfico en un prompt que se puede enviar al servidor de Python |
| loadGraphData | Carga un gráfico |
| queuePrompt | Envía un prompt a la cola |
| registerExtension | Ya lo has visto: se usa para agregar una extensión |

## LGraph

El objeto `LGraph` forma parte del framework LiteGraph y representa el estado lógico actual del gráfico (nodos y conexiones).
Si quieres manipular el gráfico, la documentación de LiteGraph (en `doc/index.html` si clonas `https://github.com/jagenjo/litegraph.js`)
describe las funciones que necesitarás.

Puedes usar `graph` para obtener los detalles de nodos y conexiones, por ejemplo:

```Javascript theme={null}
const ComfyNode_object_for_my_node = app.graph._nodes_by_id(my_node_id) 
ComfyNode_object_for_my_node.inputs.forEach(input => {
    const link_id = input.link;
    if (link_id) {
        const LLink_object = app.graph.links[link_id]
        const id_of_upstream_node = LLink_object.origin_id
        // etc
    }
});
```

## LLink

El objeto `LLink`, accesible a través de `graph.links`, representa una conexión individual en el gráfico, desde el nodo `link.origin_id` en la ranura de salida `link.origin_slot` hasta el nodo `link.target_id` en la ranura `link.target_slot`. También tiene una cadena que representa el tipo de datos, en `link.type`, y `link.id`.

Los `LLink` se crean en el método `connect` de un `LGraphNode` (del cual `ComfyNode` es una subclase).

> [!TIP]
>
> Evita crear tus propios objetos LLink; usa las funciones de LiteGraph en su lugar.

## ComfyNode

`ComfyNode` es una subclase de `LGraphNode`, por lo que la documentación de LiteGraph resulta útil para operaciones más genéricas. Sin embargo, Comfy ha ampliado significativamente el comportamiento del núcleo de LiteGraph y tampoco hace uso de toda la funcionalidad de LiteGraph.

> [!TIP]
>
> La descripción que sigue se aplica a un nodo normal.
> Los nodos de grupo, los nodos primitivos, las notas y los nodos de redirección tienen propiedades diferentes.

Un objeto `ComfyNode` representa un nodo del flujo de trabajo actual. Tiene varias propiedades importantes que quizás quieras aprovechar, y una gran cantidad de funciones que puedes usar o sobrescribir para modificar su comportamiento.

> [!NOTE]
>
> **Obsoleto:** Sobrescribir los métodos del prototipo en `ComfyNode` o `LGraphNode` está obsoleto y puede cambiar en cualquier momento en un futuro próximo. Usa los [ganchos de extensión](https://docs.comfy.org/es/custom-nodes/js/javascript_hooks.md) oficiales cuando estén disponibles, como `getNodeMenuItems` para los menús contextuales. Consulta la [guía de migración del menú contextual](https://docs.comfy.org/es/custom-nodes/js/context-menu-migration.md) para ver ejemplos.

Para hacerte una idea más completa del objeto nodo, quizás te resulte útil insertar el siguiente código en tu extensión y colocar un punto de interrupción en el comando `console.log`. Cuando después crees un nodo nuevo, podrás usar tu depurador favorito para inspeccionar el nodo.

```Javascript theme={null}
async nodeCreated(node) {
    console.log("nodeCreated")
}
```

### Propiedades

| Propiedad | Contenido |
| - | - |
| `bgcolor` | El color de fondo del nodo, o undefined para el valor predeterminado |
| `comfyClass` | La clase de Python que representa el nodo |
| `flags` | Un diccionario que puede contener indicadores relacionados con el estado del nodo. En particular, `flags.collapsed` es verdadero para los nodos contraídos. |
| `graph` | Una referencia al objeto LGraph |
| `id` | Un id único |
| `input_type` | Una lista de los tipos de entrada (p. ej., "STRING", "MODEL", "CLIP", etc.). Por lo general, coincide con los INPUT\_TYPES de Python |
| `inputs` | Una lista de entradas (que se describen a continuación) |
| `mode` | Normalmente 0; se establece en 2 si el nodo está silenciado y en 4 si está en bypass. Comfy no usa los valores 1 y 3 |
| `order` | La posición del nodo en el orden de ejecución. La establece `LGraph.computeExecutionOrder()` cuando se envía el prompt |
| `pos` | La posición \[x,y] del nodo en el lienzo |
| `properties` | Un diccionario que contiene `"Node name for S&R"`, que usa LiteGraph |
| `properties_info` | El tipo y el valor predeterminado de las entradas de `properties` |
| `size` | El ancho y el alto del nodo en el lienzo |
| `title` | Título visible |
| `type` | El nombre único (de Python) de la clase del nodo |
| `widgets` | Una lista de widgets (que se describen a continuación) |
| `widgets_values` | Una lista de los valores actuales de los widgets |

### Funciones

Hay una cantidad muy grande de funciones (85, la última vez que las conté). A continuación se muestra una selección.
La mayoría de estas funciones no tienen modificaciones respecto al código central de LiteGraph.

#### Entradas, salidas, widgets

| función | notas |
| - | - |
| Entradas / Salidas | La mayoría tiene métodos de salida con nombres equivalentes: s/In/Out/ |
| `addInput` | Crea una nueva entrada, definida por nombre y tipo |
| `addInputs` | Versión de array de `addInput` |
| `findInputSlot` | Encuentra el índice de la ranura a partir del nombre de la entrada |
| `findInputSlotByType` | Encuentra una entrada que coincida con el tipo. Opciones para preferir, o usar solo, ranuras libres |
| `removeInput` | Por índice de ranura |
| `getInputNode` | Obtén el nodo conectado a esta entrada. El equivalente de salida es `getOutputNodes` y devuelve una lista |
| `getInputLink` | Obtén el LLink conectado a esta entrada. Sin equivalente de salida |
| Widgets | |
| `addWidget` | Agrega un widget estándar de Comfy |
| `addCustomWidget` | Agrega un widget personalizado (definido en el hook `getComfyWidgets`) |
| `addDOMWidget` | Agrega un widget definido por un elemento DOM |
| `convertWidgetToInput` | Convierte un widget en una entrada si `isConvertableWidget` lo permite (en `widgetInputs.js`) |

#### Conexiones

| función | notas |
| - | - |
| `connect` | Conecta la salida de este nodo a la entrada de otro nodo |
| `connectByType` | Conecta la salida a otro nodo especificando el tipo; se conecta a la primera ranura coincidente disponible |
| `connectByTypeOutput` | Conecta la entrada a la salida de otro nodo por tipo |
| `disconnectInput` | Elimina cualquier conexión hacia la entrada (especificada por nombre o índice) |
| `disconnectOutput` | Desconecta una salida de la entrada de un nodo especificado |
| `onConnectionChange` | Se llama en cada nodo. `side==1` si es una entrada en este nodo |
| `onConnectInput` | Se llama *antes* de que se realice una conexión. Si devuelve `false`, se rechaza la conexión |

#### Visualización

| función | notas |
| - | - |
| `setDirtyCanvas` | Indica que el primer plano (nodos) y/o el fondo (conexiones e imágenes) deben volver a dibujarse |
| `onDrawBackground` | Se llama con un objeto `CanvasRenderingContext2D` para dibujar el fondo. Comfy lo usa para renderizar imágenes |
| `onDrawForeground` | Se llama con un objeto `CanvasRenderingContext2D` para dibujar el nodo. |
| `getTitle` | El título que se mostrará. |
| `collapse` | Alterna el estado contraído del nodo. |

> [!WARNING]
>
> El nombre de `collapse` es poco adecuado; *alterna* el estado contraído.
> Recibe un parámetro booleano que se puede usar para anular
> `node.collapsable === false`.

#### Otros

| función | notas |
| - | - |
| `changeMode` | Se usa para establecer el nodo en modo bypass (`mode == 4`) o no (`mode == 0`) |

## Entradas y widgets

Las entradas y los widgets representan las dos formas en que se pueden introducir datos en un nodo. En general, un widget se puede convertir en entrada, pero no todas las entradas se pueden convertir en widget (ya que muchos tipos de datos no se pueden introducir mediante un elemento de la UI).

`node.inputs` es una lista de las entradas actuales (los puntos de color en el lado izquierdo del nodo), que especifica su `.name`, `.type` y `.link` (una referencia al `LLink` conectado en `app.graph.links`).

Si una entrada es un widget que se ha convertido, también contiene una referencia al widget, ahora inactivo, en `.widget`.

`node.widgets` es una lista de todos los widgets, se hayan convertido o no en entrada. Un widget tiene:

| propiedad/función | notas |
| - | - |
| `callback` | Una función que se llama cuando cambia el valor del widget |
| `last_y` | La posición vertical del widget en el nodo |
| `name` | El nombre del widget (único dentro de un nodo) |
| `options` | Según lo especificado en el código de Python (como default, mín y máx) |
| `type` | El nombre del tipo de widget (ver abajo) en minúsculas |
| `value` | El valor actual del widget. Es una propiedad con métodos `get` y `set` |

### Tipos de widget

`app.widgets` es un diccionario de los tipos de widget registrados actualmente, indexado por la versión en MAYÚSCULAS del nombre del tipo.
Los tipos de widget integrados de Comfy incluyen los autoexplicativos `BOOLEAN`, `INT` y `FLOAT`,
además de `STRING` (que viene en dos variantes, de una línea y multilínea),
`COMBO` para la selección desplegable de una lista, e `IMAGEUPLOAD`, usado en los nodos Load Image.

Puedes agregar tipos de widget personalizados proporcionando un método `getCustomWidgets` en tu extensión.

### Widgets vinculados

También puedes vincular widgets, como ocurre con el comportamiento integrado de `seed` y `control_after_generate`, por ejemplo.
Un widget vinculado tiene `.type = 'base_widget_type:base_widget_name'`; así, `control_after_generate` puede tener el tipo `int:seed`.

## Prompt

Cuando pulsas el botón `Queue Prompt` en Comfy, se llama al método `app.graphToPrompt()` para convertir el
gráfico actual en un prompt que se puede enviar al servidor.

`app.graphToPrompt` devuelve un objeto (al que aquí llamamos `prompt`) con dos propiedades, `output` y `workflow`.

### output

`prompt.output` asigna el `node_id` de cada nodo del gráfico a un objeto con dos propiedades.

* `prompt.output[node_id].class_type`, el nombre único de la clase del nodo personalizado, tal como se define en el código de Python
* `prompt.output[node_id].inputs`, que contiene el valor de cada entrada (o widget) como un mapa del nombre de la entrada a:
  * el valor seleccionado, si es un widget, o
  * un array que contiene (`upstream_node_id`, `upstream_node_output_slot`) si hay una conexión en la entrada, o
  * undefined, si es un widget que se ha convertido en entrada y no está conectado
  * las demás entradas no conectadas no se incluyen en `.inputs`

> [!TIP]
>
> Ten en cuenta que el `upstream_node_id` del array que describe una entrada conectada se representa como una cadena, no como un entero.

### workflow

`prompt.workflow` contiene las siguientes propiedades:

* `config`: un diccionario de opciones de configuración adicionales (vacío de forma predeterminada)
* `extra`: un diccionario con información adicional sobre el flujo de trabajo. De forma predeterminada contiene:
  * `extra.ds`: describe la vista actual del gráfico (`scale` y `offset`)
* `groups`: todos los grupos del flujo de trabajo
* `last_link_id`: el id de la última conexión agregada
* `last_node_id`: el id del último nodo agregado
* `links`: una lista de todas las conexiones del gráfico. Cada entrada es un array de cinco enteros y una cadena:
  * (`link_id`, `upstream_node_id`, `upstream_node_output_slot`, `downstream_node_id`, `downstream_node_input_slot`, `tipo de datos`)
* `nodes`: una lista de todos los nodos del gráfico. Cada entrada es un mapa con un subconjunto de las propiedades del nodo descritas [arriba](#comfynode)
  * Se incluyen las siguientes propiedades: `flags`, `id`, `inputs`, `mode`, `order`, `pos`, `properties`, `size`, `type`, `widgets_values`
  * Además, salvo que un nodo no tenga salidas, hay una propiedad `outputs`, que es una lista de las salidas del nodo, cada una con:
    * `name`: el nombre de la salida
    * `type`: el tipo de datos de la salida
    * `links`: una lista con el `link_id` de todas las conexiones desde esta salida (si no hay conexiones, puede ser una lista vacía o null)
    * `shape`: la forma usada para dibujar la salida (3 por defecto para un punto)
    * `slot_index`: el número de ranura de la salida
* `version`: el número de versión de LiteGraph (al momento de escribir, `0.4`)

> [!TIP]
>
> La propiedad `nodes.output` no existe en los nodos sin salidas; no es una lista vacía.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.