jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

📝 docs(flow-runner.mdx): update FlowRunner example to improve readability and add field customization in build_config method

Browse source
This commit is contained in:
Gabriel Luiz Freitas Almeida 2023-07-28 11:56:34 -03:00
commit 784f813dc5
1 changed files with 59 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

84
docs/docs/examples/flow-runner.mdx
View file

@ -6,7 +6,7 @@ hide_table_of_contents: true
import ZoomableImage from "/src/theme/ZoomableImage.js";
import Admonition from "@theme/Admonition";
## FlowRunner Example
# FlowRunner Component
Now let's see how to create a component that runs other flows.
@ -21,7 +21,7 @@ What we will see in this example:
<CH.Scrollycoding rows={20} className={""}>
```python
from langflow.interface.custom.custom_component import CustomComponent
from langflow import CustomComponent
class MyComponent(CustomComponent):
display_name = "Custom Component"
@ -40,7 +40,7 @@ This is the basic structure of a custom component.
---
```python
from langflow.interface.custom.custom_component import CustomComponent
from langflow import CustomComponent
# focus
class FlowRunner(CustomComponent):
@ -62,16 +62,14 @@ So, let's start by adding the _`display_name`_ and a _`description`_.
---
```python
from langflow.interface.custom.custom_component import CustomComponent
from langflow import CustomComponent
# focus
from langchain.schema import Document
class FlowRunner(CustomComponent):
display_name = "Flow Runner"
description = "Run other flows"
description = "Run other flows using a document as input."
def build_config(self):
...
@ -86,7 +84,7 @@ Now let's import _`Document`_ from the _`langchain.schema`_ module, which will b
---
```python
from langflow.interface.custom.custom_component import CustomComponent
from langflow import CustomComponent
# focus
from langchain.schema import Document
@ -114,14 +112,12 @@ The parameters we added are:
---
```python
from langflow.interface.custom.custom_component import CustomComponent
from langflow 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):
@ -142,14 +138,12 @@ We will start by listing the flows in the collection using the _`list_flows`_ me
---
```python
from langflow.interface.custom.custom_component import CustomComponent
from langflow 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):
@ -175,14 +169,12 @@ We can then get the flow that matches the selected name.
---
```python
from langflow.interface.custom.custom_component import CustomComponent
from langflow 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):
@ -210,14 +202,12 @@ You can find more information about it in the [features guidelines](../guideline
---
```python
from langflow.interface.custom.custom_component import CustomComponent
from langflow 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):
@ -248,17 +238,16 @@ then we'll have to process the page_content depending on what is the input of th
One other approach would be to create another CustomComponent that builds a
dictionary and then we use that as the input for the FlowRunner.
</Admonition>
---
```python
from langflow.interface.custom.custom_component import CustomComponent
from langflow 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):
@ -283,6 +272,51 @@ Finally, we can use the _`page_content`_ in the flow and return the result.
---
```python focus=9:16
from langflow 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: Optional[Document] = None) -> Document:
# List the flows
flows = self.list_flows()
# Get the flow that matches the selected name
flow = next(filter(lambda f: f.name == flow_name, flows))
# Load the flow
tweaks = {}
flow = self.load_flow(flow.id, tweaks)
# Get the page_content from the document
page_content = document.page_content
# Use it in the flow
result = flow(page_content)
return Document(page_content=str(result))
```
Now we can add the field customization to the _`build_config`_ method.
We are using the _`options`_ parameter to make the _`flow_name`_ field a dropdown menu.
<Admonition type="caution">
Make sure the type of the field is _`str`_ and the values of the _`options`_
are strings.
</Admonition>
---
</CH.Scrollycoding>
In Langflow, this is how our script looks like:
@ -292,7 +326,7 @@ In Langflow, this is how our script looks like:
<ZoomableImage
alt="Document Processor code"
sources={{
light: "img/document_processor_code.png",
light: "img/flow_runner_code.png",
}}
style={{
maxWidth: "70%",
@ -309,7 +343,7 @@ And here is our brand new custom component:
<ZoomableImage
alt="Document Processor component"
sources={{
light: "img/document_processor.png",
light: "img/flow_runner.png",
}}
style={{
width: "50%",