LollmsFlow Documentation

LollmsFlow is a JavaScript library for creating and visualizing workflows. It allows you to build, connect, and execute nodes in a workflow, as well as visualize the workflow in an interactive SVG-based interface.

Key Components

WorkflowNode: Represents a single node in the workflow.
Workflow: Manages the entire workflow, including nodes and their connections.
WorkflowVisualizer: Handles the visual representation and interaction of the workflow.

Supported Data Types

LollmsFlow supports the following data types for node inputs and outputs:

number: Represents numeric values (integers or floating-point numbers).
string: Represents text data.
boolean: Represents true/false values.
object: Represents complex data structures or custom objects.

Each data type is associated with a specific color in the workflow visualization:

number: blue
string: green
boolean: red
object: purple

Any other type not explicitly defined will be represented with a gray color.

Basic Usage

0. Import the LollmsFlow Library

First, include the LollmsFlow library in your HTML file:

<script src="/lollms_assets/js/lollms_flow"></script>

1. Create a Workflow Visualizer

const visualizer = new WorkflowVisualizer("workflow-container");

2. Define Node Operations

const nodeOperations = {
    "Add": (inputs) => ({ sum: inputs.a + inputs.b }),
    "Multiply": (inputs) => ({ product: inputs.x * inputs.y }),
    "Output": (inputs) => console.log("Result:", inputs.result)
};

3. Create and Add Nodes

const addNode = new WorkflowNode(0, "Add", 
    [{ name: "a", type: "number" }, { name: "b", type: "number" }],
    [{ name: "sum", type: "number" }],
    nodeOperations["Add"], 50, 50
);
visualizer.addNode(addNode);

4. Connect Nodes

visualizer.connectNodes(sourceId, sourceOutput, targetId, targetInput);

5. Execute the Workflow

const results = visualizer.execute();

Advanced Features

Save/Load Workflow: Use saveToJSON() and loadFromJSON() methods.
Local Storage: Save/load workflows using saveToLocalStorage() and loadFromLocalStorage().
Drag and Drop: Nodes can be moved around in the visualizer.

Key Methods for AI Usage

addNode(node): Add a new node to the workflow.
connectNodes(sourceId, sourceOutput, targetId, targetInput): Connect two nodes.
execute(): Run the workflow and get results.
saveToJSON(): Convert the workflow to a JSON string.
loadFromJSON(json, nodeOperations): Load a workflow from a JSON string.

Tips for AI Implementation

Define a set of node types and their operations, using the supported data types.
Create nodes dynamically based on user input or predefined templates.
Use the visualization features to display the workflow to users, leveraging the color-coding for different data types.
Implement save/load functionality to persist workflows.
Utilize the execution feature to process data through the workflow.
When creating custom nodes, ensure that the input and output types match one of the supported data types for proper visualization and connection validation.

This library provides a flexible framework for creating visual, interactive workflows in web applications. It can be particularly useful for data processing, algorithm visualization, or any application requiring a flow-based interface. The support for various data types allows for diverse and complex workflows to be created and managed effectively.

3.6 KiB Raw Blame History