mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2025-01-04 19:44:09 +00:00
68 lines
1.8 KiB
Markdown
68 lines
1.8 KiB
Markdown
|
|
# Lollms Flow Library - Quick Reference
|
|
|
|
## Core Classes
|
|
|
|
1. `WorkflowNode`: Represents a single node in the workflow.
|
|
- Constructor: `new WorkflowNode(id, name, inputs, outputs, operation, options, x, y)`
|
|
- Key methods: `connect()`, `execute()`, `toJSON()`, `fromJSON()`
|
|
|
|
2. `Workflow`: Manages the entire workflow.
|
|
- Key methods: `addNode()`, `connectNodes()`, `execute()`, `toJSON()`, `fromJSON()`
|
|
|
|
3. `WorkflowVisualizer`: Handles visualization using SVG.
|
|
- Constructor: `new WorkflowVisualizer(containerId)`
|
|
- Key methods: `addNode()`, `connectNodes()`, `execute()`, `saveToJSON()`, `loadFromJSON()`
|
|
|
|
## Basic Usage
|
|
|
|
1. Create a visualizer:
|
|
```javascript
|
|
const visualizer = new WorkflowVisualizer('container-id');
|
|
```
|
|
|
|
2. Define node operations:
|
|
```javascript
|
|
const nodeOperations = {
|
|
'OperationName': (inputs, options) => ({ output: result })
|
|
};
|
|
```
|
|
|
|
3. Create and add nodes:
|
|
```javascript
|
|
const node = new WorkflowNode(id, name, inputs, outputs, operation, options);
|
|
visualizer.addNode(node);
|
|
```
|
|
|
|
4. Connect nodes:
|
|
```javascript
|
|
visualizer.connectNodes(sourceId, sourceOutput, targetId, targetInput);
|
|
```
|
|
|
|
5. Execute workflow:
|
|
```javascript
|
|
const results = visualizer.execute();
|
|
```
|
|
|
|
6. Save/Load workflow:
|
|
```javascript
|
|
const json = visualizer.saveToJSON();
|
|
visualizer.loadFromJSON(json, nodeOperations);
|
|
```
|
|
|
|
## Key Features
|
|
|
|
- SVG-based visualization with drag-and-drop
|
|
- Interactive socket connections
|
|
- Node options (checkbox, radio, select, file, textarea)
|
|
- JSON serialization and local storage integration
|
|
- Custom node and socket colors
|
|
- Event handling for interactivity
|
|
|
|
## Best Practices
|
|
|
|
- Use unique node IDs
|
|
- Define clear input/output types
|
|
- Implement error handling in operations
|
|
- Use descriptive names for nodes and sockets
|