fix: LangFlow -> Langflow
This commit is contained in:
Gabriel Luiz Freitas Almeida
parent
5bf79a5b4a
commit
049ba108bb
20 changed files with 196 additions and 177 deletions
|
|
@ -1,44 +1,59 @@
|
|||
import ThemedImage from '@theme/ThemedImage';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
import ZoomableImage from '/src/theme/ZoomableImage.js';
|
||||
import ReactPlayer from 'react-player';
|
||||
import ThemedImage from "@theme/ThemedImage";
|
||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||
import ZoomableImage from "/src/theme/ZoomableImage.js";
|
||||
import ReactPlayer from "react-player";
|
||||
|
||||
# Component
|
||||
|
||||
Components are the building blocks of the flows. They are made of inputs, outputs, and parameters that define their functionality, providing a convenient and straightforward way to compose LLM-based applications. Learn more about components and how they work in the LangChain [documentation](https://docs.langchain.com/docs/category/components) section.
|
||||
|
||||
|
||||
### Component's Features
|
||||
|
||||
<div style={{ marginBottom: '20px' }}>
|
||||
During the flow creation process, you will notice handles (colored circles) attached to one or both sides of a component. These handles represent the availability to connect to other components, while their colors are type hints (hover over a handle to see connection details).</div>
|
||||
|
||||
<div style={{ marginBottom: '20px' }}>
|
||||
For example, if you select a <code>ConversationChain</code> component, you will see orange <span style={{ color: 'orange' }}>o</span> and purple <span style={{ color: 'purple' }}>o</span> input handles. They indicate that this component accepts an LLM and a Memory component as inputs. The red asterisk <span style={{ color: 'red' }}>*</span> means that at least one input of that type is required.
|
||||
<div style={{ marginBottom: "20px" }}>
|
||||
During the flow creation process, you will notice handles (colored circles)
|
||||
attached to one or both sides of a component. These handles represent the
|
||||
availability to connect to other components, while their colors are type hints
|
||||
(hover over a handle to see connection details).
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'center' }}>
|
||||
<div style={{ marginBottom: "20px" }}>
|
||||
For example, if you select a <code>ConversationChain</code> component, you
|
||||
will see orange <span style={{ color: "orange" }}>o</span> and purple{" "}
|
||||
<span style={{ color: "purple" }}>o</span> input handles. They indicate that
|
||||
this component accepts an LLM and a Memory component as inputs. The red
|
||||
asterisk <span style={{ color: "red" }}>*</span> means that at least one input
|
||||
of that type is required.
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
|
||||
>
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: useBaseUrl('img/single-compenent.png'),
|
||||
light: useBaseUrl("img/single-compenent.png"),
|
||||
}}
|
||||
style={{ width: '100%', maxWidth: '800px', margin: '0 auto' }}
|
||||
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
<div style={{ marginBottom: '20px' }}>
|
||||
On the top right corner, you will find the component status icon 🔴. Make the necessary connections, build the flow (⚡ zap icon on the bottom right of the canvas) and once the validation is completed, the status of each validated component should light green 🟢. Hover over the component status to reveal the outputs going through it in case of success, or the detected error in case of failure.
|
||||
<div style={{ marginBottom: "20px" }}>
|
||||
On the top right corner, you will find the component status icon 🔴. Make the
|
||||
necessary connections, build the flow (⚡ zap icon on the bottom right of the
|
||||
canvas) and once the validation is completed, the status of each validated
|
||||
component should light green 🟢. Hover over the component status to reveal the
|
||||
outputs going through it in case of success, or the detected error in case of
|
||||
failure.
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
### Component's Parameters
|
||||
|
||||
LangFlow components can be edited in the component settings button. Hide parameters to reduce complexity and keep the canvas clean and intuitive for experimentation.
|
||||
Langflow components can be edited in the component settings button. Hide parameters to reduce complexity and keep the canvas clean and intuitive for experimentation.
|
||||
|
||||
<div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'center' }}>
|
||||
<ReactPlayer playing controls url='/videos/langflow_parameters.mp4'
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
|
||||
>
|
||||
<ReactPlayer playing controls url="/videos/langflow_parameters.mp4" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,27 +1,31 @@
|
|||
import ThemedImage from '@theme/ThemedImage';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
import ZoomableImage from '/src/theme/ZoomableImage.js';
|
||||
import ReactPlayer from 'react-player';
|
||||
import ThemedImage from "@theme/ThemedImage";
|
||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||
import ZoomableImage from "/src/theme/ZoomableImage.js";
|
||||
import ReactPlayer from "react-player";
|
||||
|
||||
# Features
|
||||
|
||||
<div style={{ marginBottom: '20px' }}>
|
||||
When you click for New Project, you will see on the top left corner of the screen, some options such as <strong>Import</strong>, <strong>Export</strong>, <strong>Code</strong> and <strong>Save</strong>, as displayed in the image below:
|
||||
<div style={{ marginBottom: "20px" }}>
|
||||
When you click for New Project, you will see on the top left corner of the
|
||||
screen, some options such as <strong>Import</strong>, <strong>Export</strong>,{" "}
|
||||
<strong>Code</strong> and <strong>Save</strong>, as displayed in the image
|
||||
below:
|
||||
</div>
|
||||
|
||||
|
||||
<div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'center' }}>
|
||||
<div
|
||||
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
|
||||
>
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: useBaseUrl('img/features.png'),
|
||||
light: useBaseUrl("img/features.png"),
|
||||
}}
|
||||
style={{ width: '100%', maxWidth: '800px', margin: '0 auto' }}
|
||||
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '20px' }}>
|
||||
Further down, we will explain each of these options.
|
||||
<div style={{ marginBottom: "20px" }}>
|
||||
Further down, we will explain each of these options.
|
||||
</div>
|
||||
|
||||
---
|
||||
|
|
@ -42,14 +46,14 @@ The Code button shows snippets to use your flow as a Python object or an API.
|
|||
|
||||
**Python Code**
|
||||
|
||||
Through the LangFlow package, you can load a flow from a JSON file and use it as a LangChain object.
|
||||
Through the Langflow package, you can load a flow from a JSON file and use it as a LangChain object.
|
||||
|
||||
```py
|
||||
from langflow import load_flow_from_json
|
||||
|
||||
flow = load_flow_from_json("path/to/flow.json")
|
||||
# Now you can use it like any chain
|
||||
flow("Hey, have you heard of LangFlow?")
|
||||
flow("Hey, have you heard of Langflow?")
|
||||
```
|
||||
|
||||
**API**
|
||||
|
|
@ -58,7 +62,8 @@ Once you save a flow, the API endpoint is created with your latest changes. Clic
|
|||
|
||||
The example below shows a Python script making a POST request to a local API endpoint, which gets a prediction based on the message input.
|
||||
|
||||
<div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'center' }}>
|
||||
<ReactPlayer playing controls url='/videos/langflow_api.mp4'
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
|
||||
>
|
||||
<ReactPlayer playing controls url="/videos/langflow_api.mp4" />
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue