cc70a11572* refactor-leftnav * bump-whats-new * comment-out-some-tutorials * links * guidelines * comma * starter-projects * try-links * add-new-component-location
368 lines
10 KiB
Text
368 lines
10 KiB
Text
---
|
|
description: Custom Components
|
|
hide_table_of_contents: true
|
|
---
|
|
|
|
# FlowRunner Component
|
|
|
|
The CustomComponent class allows us to create components that interact with Langflow itself. In this example, we will make a component that runs other flows available in "My Collection".
|
|
|
|
<ZoomableImage
|
|
alt="Document Processor Component"
|
|
sources={{
|
|
light: "img/flow_runner.png",
|
|
dark: "img/flow_runner.png",
|
|
}}
|
|
style={{
|
|
width: "30%",
|
|
margin: "20px auto",
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
}}
|
|
/>
|
|
|
|
We will cover how to:
|
|
|
|
- List Collection flows using the _`list_flows`_ method.
|
|
- Load a flow using the _`load_flow`_ method.
|
|
- Configure a dropdown input field using the _`options`_ parameter.
|
|
|
|
<details open>
|
|
|
|
<summary>Example Code</summary>
|
|
|
|
```python
|
|
from langflow.custom import CustomComponent
|
|
from langchain.schema import Document
|
|
|
|
class FlowRunner(CustomComponent):
|
|
display_name = "Flow Runner"
|
|
description = "Run other flows using a document as input."
|
|
|
|
def build_config(self):
|
|
flows = self.list_flows()
|
|
flow_names = [f.name for f in flows]
|
|
return {"flow_name": {"options": flow_names,
|
|
"display_name": "Flow Name",
|
|
},
|
|
"document": {"display_name": "Document"}
|
|
}
|
|
|
|
|
|
def build(self, flow_name: str, document: Document) -> Document:
|
|
# List the flows
|
|
flows = self.list_flows()
|
|
# Get the flow that matches the selected name
|
|
# You can also get the flow by id
|
|
# using self.get_flow(flow_id=flow_id)
|
|
tweaks = {}
|
|
flow = self.get_flow(flow_name=flow_name, tweaks=tweaks)
|
|
# Get the page_content from the document
|
|
if document and isinstance(document, list):
|
|
document = document[0]
|
|
page_content = document.page_content
|
|
# Use it in the flow
|
|
result = flow(page_content)
|
|
return Document(page_content=str(result))
|
|
|
|
```
|
|
|
|
</details>
|
|
|
|
<CH.Scrollycoding rows={20} className={""}>
|
|
|
|
```python
|
|
from langflow.custom import CustomComponent
|
|
|
|
|
|
class MyComponent(CustomComponent):
|
|
display_name = "Custom Component"
|
|
description = "This is a custom component"
|
|
|
|
def build_config(self):
|
|
...
|
|
|
|
def build(self):
|
|
...
|
|
|
|
```
|
|
|
|
The typical structure of a Custom Component is composed of _`display_name`_ and _`description`_ attributes, _`build`_ and _`build_config`_ methods.
|
|
|
|
---
|
|
|
|
```python
|
|
from langflow.custom import CustomComponent
|
|
|
|
|
|
# focus
|
|
class FlowRunner(CustomComponent):
|
|
# focus
|
|
display_name = "Flow Runner"
|
|
# focus
|
|
description = "Run other flows"
|
|
|
|
def build_config(self):
|
|
...
|
|
|
|
def build(self):
|
|
...
|
|
|
|
```
|
|
|
|
Let's start by defining our component's _`display_name`_ and _`description`_.
|
|
|
|
---
|
|
|
|
```python
|
|
from langflow.custom import CustomComponent
|
|
# focus
|
|
from langchain.schema import Document
|
|
|
|
|
|
class FlowRunner(CustomComponent):
|
|
display_name = "Flow Runner"
|
|
description = "Run other flows using a document as input."
|
|
|
|
def build_config(self):
|
|
...
|
|
|
|
def build(self):
|
|
...
|
|
|
|
```
|
|
|
|
Second, we will import _`Document`_ from the [_langchain.schema_](https://docs.langchain.com/docs/components/schema/) module. This will be the return type of the _`build`_ method.
|
|
|
|
---
|
|
|
|
```python
|
|
from langflow.custom import CustomComponent
|
|
# focus
|
|
from langchain.schema import Document
|
|
|
|
|
|
class FlowRunner(CustomComponent):
|
|
display_name = "Flow Runner"
|
|
description = "Run other flows using a document as input."
|
|
|
|
def build_config(self):
|
|
...
|
|
|
|
# focus
|
|
def build(self, flow_name: str, document: Document) -> Document:
|
|
...
|
|
|
|
```
|
|
|
|
Now, let's add the [parameters](focus://11[20:55]) and the [return type](focus://11[60:69]) to the _`build`_ method. The parameters added are:
|
|
|
|
- _`flow_name`_ is the name of the flow we want to run.
|
|
- _`document`_ is the input document to be passed to that flow.
|
|
- Since _`Document`_ is a Langchain type, it will add an input [handle](../administration/components) to the component ([see more](../components/custom)).
|
|
|
|
---
|
|
|
|
```python focus=13:14
|
|
from langflow.custom import CustomComponent
|
|
from langchain.schema import Document
|
|
|
|
|
|
class FlowRunner(CustomComponent):
|
|
display_name = "Flow Runner"
|
|
description = "Run other flows using a document as input."
|
|
|
|
def build_config(self):
|
|
...
|
|
|
|
def build(self, flow_name: str, document: Document) -> Document:
|
|
# List the flows
|
|
flows = self.list_flows()
|
|
|
|
```
|
|
|
|
We can now start writing the _`build`_ method. Let's list available flows in "My Collection" using the _`list_flows`_ method.
|
|
|
|
---
|
|
|
|
```python focus=15:18
|
|
from langflow.custom import CustomComponent
|
|
from langchain.schema import Document
|
|
|
|
|
|
class FlowRunner(CustomComponent):
|
|
display_name = "Flow Runner"
|
|
description = "Run other flows using a document as input."
|
|
|
|
def build_config(self):
|
|
...
|
|
|
|
def build(self, flow_name: str, document: Document) -> Document:
|
|
# List the flows
|
|
flows = self.list_flows()
|
|
# Get the flow that matches the selected name
|
|
# You can also get the flow by id
|
|
# using self.get_flow(flow_id=flow_id)
|
|
tweaks = {}
|
|
flow = self.get_flow(flow_name=flow_name, tweaks=tweaks)
|
|
|
|
```
|
|
|
|
And retrieve a flow that matches the selected name (we'll make a dropdown input field for the user to choose among flow names).
|
|
|
|
<Admonition type="caution">
|
|
From version 0.4.0, names are unique, which was not the case in previous
|
|
versions. This might lead to unexpected results if using flows with the same
|
|
name.
|
|
</Admonition>
|
|
|
|
---
|
|
|
|
```python
|
|
from langflow.custom import CustomComponent
|
|
from langchain.schema import Document
|
|
|
|
|
|
class FlowRunner(CustomComponent):
|
|
display_name = "Flow Runner"
|
|
description = "Run other flows using a document as input."
|
|
|
|
def build_config(self):
|
|
...
|
|
|
|
def build(self, flow_name: str, document: Document) -> Document:
|
|
# List the flows
|
|
flows = self.list_flows()
|
|
# Get the flow that matches the selected name
|
|
# You can also get the flow by id
|
|
# using self.get_flow(flow_id=flow_id)
|
|
tweaks = {}
|
|
flow = self.get_flow(flow_name=flow_name, tweaks=tweaks)
|
|
|
|
|
|
```
|
|
|
|
You can load this flow using _`get_flow`_ and set a _`tweaks`_ dictionary to customize it. Find more about tweaks in our [features guidelines](../administration/features#code).
|
|
|
|
---
|
|
|
|
```python
|
|
from langflow.custom import CustomComponent
|
|
from langchain.schema import Document
|
|
|
|
|
|
class FlowRunner(CustomComponent):
|
|
display_name = "Flow Runner"
|
|
description = "Run other flows using a document as input."
|
|
|
|
def build_config(self):
|
|
...
|
|
|
|
def build(self, flow_name: str, document: Document) -> Document:
|
|
# List the flows
|
|
flows = self.list_flows()
|
|
# Get the flow that matches the selected name
|
|
# You can also get the flow by id
|
|
# using self.get_flow(flow_id=flow_id)
|
|
tweaks = {}
|
|
flow = self.get_flow(flow_name=flow_name, tweaks=tweaks)
|
|
# Get the page_content from the document
|
|
if document and isinstance(document, list):
|
|
document = document[0]
|
|
page_content = document.page_content
|
|
# Use it in the flow
|
|
result = flow(page_content)
|
|
return Document(page_content=str(result))
|
|
```
|
|
|
|
We are using a _`Document`_ as input because it is a straightforward way to pass text data in Langflow (specifically because you can connect it to many [loaders](../components/loaders)).
|
|
Generally, a flow will take a string or a dictionary as input because that's what LangChain components expect.
|
|
In case you are passing a dictionary, you need to build it according to the needs of the flow you are using.
|
|
|
|
The content of a document can be extracted using the _`page_content`_ attribute, which is a string, and passed as an argument to the selected flow.
|
|
|
|
---
|
|
|
|
```python focus=9:16
|
|
from langflow.custom import CustomComponent
|
|
from langchain.schema import Document
|
|
|
|
|
|
class FlowRunner(CustomComponent):
|
|
display_name = "Flow Runner"
|
|
description = "Run other flows using a document as input."
|
|
|
|
def build_config(self):
|
|
flows = self.list_flows()
|
|
flow_names = [f.name for f in flows]
|
|
return {"flow_name": {"options": flow_names,
|
|
"display_name": "Flow Name",
|
|
},
|
|
"document": {"display_name": "Document"}
|
|
}
|
|
|
|
def build(self, flow_name: str, document: Document) -> Document:
|
|
# List the flows
|
|
flows = self.list_flows()
|
|
# Get the flow that matches the selected name
|
|
# You can also get the flow by id
|
|
# using self.get_flow(flow_id=flow_id)
|
|
tweaks = {}
|
|
flow = self.get_flow(flow_name=flow_name, tweaks=tweaks)
|
|
# Get the page_content from the document
|
|
if document and isinstance(document, list):
|
|
document = document[0]
|
|
page_content = document.page_content
|
|
# Use it in the flow
|
|
result = flow(page_content)
|
|
return Document(page_content=str(result))
|
|
```
|
|
|
|
Finally, we can add field customizations through the _`build_config`_ method. Here we added the _`options`_ key to make the _`flow_name`_ field a dropdown menu. Check out the [custom component reference](../components/custom) for a list of available keys.
|
|
|
|
<Admonition type="caution">
|
|
Make sure that the field type is _`str`_ and _`options`_ values are strings.
|
|
</Admonition>
|
|
|
|
</CH.Scrollycoding>
|
|
|
|
Done! This is what our script and custom component looks like:
|
|
|
|
<div style={{
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
}}>
|
|
|
|
<ZoomableImage
|
|
alt="Document Processor Code"
|
|
sources={{
|
|
light: "img/flow_runner_code.png",
|
|
dark: "img/flow_runner_code.png",
|
|
}}
|
|
style={{
|
|
maxWidth: "100%",
|
|
margin: "0 auto",
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
}}
|
|
|
|
/>
|
|
|
|
<ZoomableImage
|
|
alt="Document Processor Component"
|
|
sources={{
|
|
light: "img/flow_runner.png",
|
|
dark: "img/flow_runner.png",
|
|
}}
|
|
style={{
|
|
width: "40%",
|
|
margin: "0 auto",
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
}}
|
|
/>
|
|
|
|
</div>
|
|
|
|
import ZoomableImage from "/src/theme/ZoomableImage.js";
|
|
import Admonition from "@theme/Admonition";
|