combine-flows-doc-into-canvas
This commit is contained in:
Mendon Kissling
parent
b916ef0ebc
commit
e38123c951
3 changed files with 70 additions and 101 deletions
|
|
@ -4,7 +4,6 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
|
|||
import ReactPlayer from "react-player";
|
||||
import Admonition from "@theme/Admonition";
|
||||
|
||||
|
||||
# 🎨 Langflow canvas
|
||||
|
||||
The **Langflow canvas** is the central hub of Langflow, where you'll assemble new flows from components, run them, and see the results.
|
||||
|
|
@ -21,11 +20,38 @@ You can either build this flow yourself, or select **New Project** > **Basic pro
|
|||
style={{ width: "30%", margin: "20px auto" }}
|
||||
/>
|
||||
|
||||
For more on the difference between flows, components, collections, and projects, see [Flows, collections, components, and projects](./flows-components-collections.mdx).
|
||||
## Flows, components, collections, and projects
|
||||
|
||||
## Components
|
||||
A [flow](#flow) is a pipeline of components connected together in the Langflow canvas.
|
||||
|
||||
A component is a building block of a flow.
|
||||
A [component](#component) is a single building block within a flow. A component has inputs, outputs, and parameters that define its functionality.
|
||||
|
||||
A [collection](#collection) is a snapshot of the flows available in your database. Collections can be downloaded to local storage and uploaded for future use.
|
||||
|
||||
A [project](#project) can be a component or a flow. Projects are saved as part of your collection.
|
||||
|
||||
For example, the **OpenAI LLM** is a **component** of the **Basic prompting** flow, and the **flow** is stored in a **collection**.
|
||||
|
||||
## Flow
|
||||
|
||||
A **flow** is a pipeline of components connected together in the Langflow canvas.
|
||||
|
||||
For example, the [Basic prompting](../starter-projects/basic-prompting.mdx) flow is a pipeline of four components:
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: "img/basic-prompting.png",
|
||||
dark: "img/basic-prompting.png",
|
||||
}}
|
||||
style={{ width: "80%", margin: "20px auto" }}
|
||||
/>
|
||||
|
||||
In this flow, the **OpenAI LLM component** receives input (left side) and produces output (right side) - in this case, receiving input from the **Chat Input** and **Prompt** components and producing output to the **Chat Output** component.
|
||||
|
||||
## Component
|
||||
|
||||
Components are the building blocks of flows. They consist of inputs, outputs, and parameters that define their functionality. These elements provide a convenient and straightforward way to compose LLM-based applications. Learn more about components and how they work in the LangChain [documentation](https://python.langchain.com/docs/integrations/components).
|
||||
|
||||
<div style={{ marginBottom: "20px" }}>
|
||||
During the flow creation process, you will notice handles (colored circles)
|
||||
|
|
@ -55,7 +81,7 @@ A component is a building block of a flow.
|
|||
|
||||
<div style={{ marginBottom: "20px" }}>
|
||||
In the top right corner of the component, you'll find the component status icon ().
|
||||
Run the flow by clicking the **Playground** button at the bottom right of the canvas.
|
||||
Build the flow by clicking the **Playground** at the bottom right of the canvas.
|
||||
|
||||
Once the validation is complete, the status of each validated component should turn green ().
|
||||
To debug, hover over the component status to see the outputs.
|
||||
|
|
@ -63,6 +89,16 @@ To debug, hover over the component status to see the outputs.
|
|||
|
||||
---
|
||||
|
||||
### Component Parameters
|
||||
|
||||
Langflow components can be edited by clicking 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>
|
||||
|
||||
### Component menu
|
||||
|
||||
Each component is a little unique, but they will all have a menu bar on top that looks something like this.
|
||||
|
|
@ -77,7 +113,7 @@ The menu options are **Code**, **Save**, **Duplicate**, and **More**.
|
|||
style={{ width: "30%", margin: "20px auto" }}
|
||||
/>
|
||||
|
||||
#### Code
|
||||
### Code menu
|
||||
|
||||
The **Code** button displays your component's Python code.
|
||||
You can modify the code and save it.
|
||||
|
|
@ -189,6 +225,33 @@ For example, changing the **Chat Input** component's `input_value` will change t
|
|||
<ReactPlayer playing controls url="/videos/langflow_api.mp4" />
|
||||
</div>
|
||||
|
||||
## Collection
|
||||
|
||||
A collection is a snapshot of flows available in a database.
|
||||
|
||||
Collections can be downloaded to local storage and uploaded for future use.
|
||||
|
||||
<div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'center' }}>
|
||||
<ReactPlayer playing controls url='/videos/langflow_collection.mp4'
|
||||
/>
|
||||
</div>
|
||||
|
||||
## Project
|
||||
|
||||
A **Project** can be a flow or a component. To view your saved projects, select **My Collection**.
|
||||
|
||||
Your **Projects** are displayed.
|
||||
|
||||
Click the ** Playground** button to run a flow from the **My Collection** screen.
|
||||
|
||||
In the top left corner of the screen are options for **Download Collection**, **Upload Collection**, and **New Project**.
|
||||
|
||||
Select **Download Collection** to save your project to your local machine. This downloads all flows and components as a `.json` file.
|
||||
|
||||
Select **Upload Collection** to upload a flow or component `.json` file from your local machine.
|
||||
|
||||
Select **New Project** to create a new project. In addition to a blank canvas, [starter projects](../starter-projects/basic-prompting.mdx) are also available.
|
||||
|
||||
## Project options menu
|
||||
|
||||
To see options for your project, in the upper left corner of the canvas, select the dropdown menu.
|
||||
|
|
|
|||
|
|
@ -17,97 +17,10 @@ A [project](#project) can be a component or a flow. Projects are saved as part o
|
|||
|
||||
For example, the **OpenAI LLM** is a **component** of the **Basic prompting** flow, and the **flow** is stored in a **collection**.
|
||||
|
||||
## Flow
|
||||
|
||||
A **flow** is a pipeline of components connected together in the Langflow canvas.
|
||||
|
||||
For example, the [Basic prompting](../starter-projects/basic-prompting.mdx) flow is a pipeline of four components:
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: "img/basic-prompting.png",
|
||||
dark: "img/basic-prompting.png",
|
||||
}}
|
||||
style={{ width: "80%", margin: "20px auto" }}
|
||||
/>
|
||||
|
||||
For example, the **OpenAI LLM component** receives input (left side) and produces output (right side) - in this case, receiving input from the **Chat Input** and **Prompt** components and producing output to the **Chat Output** component.
|
||||
|
||||
## Component
|
||||
|
||||
Components are the building blocks of flows. They consist of inputs, outputs, and parameters that define their functionality. These elements provide a convenient and straightforward way to compose LLM-based applications. Learn more about components and how they work in the LangChain [documentation](https://python.langchain.com/docs/integrations/components).
|
||||
|
||||
<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. 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>
|
||||
|
||||
{" "}
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: useBaseUrl("img/single-component.png"),
|
||||
dark: useBaseUrl("img/single-component.png"),
|
||||
}}
|
||||
style={{ width: "50%", maxWidth: "800px", margin: "20px auto" }}
|
||||
/>
|
||||
|
||||
<div style={{ marginBottom: "20px" }}>
|
||||
In the top right corner of the component, you'll find the component status icon ().
|
||||
Build the flow by clicking the **Playground** at the bottom right of the canvas.
|
||||
|
||||
Once the validation is complete, the status of each validated component should turn green ().
|
||||
To debug, hover over the component status to see the outputs.
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
### Component Parameters
|
||||
|
||||
Langflow components can be edited by clicking 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>
|
||||
|
||||
|
||||
## Collection
|
||||
|
||||
A collection is a snapshot of flows available in a database.
|
||||
|
||||
Collections can be downloaded to local storage and uploaded for future use.
|
||||
|
||||
<div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'center' }}>
|
||||
<ReactPlayer playing controls url='/videos/langflow_collection.mp4'
|
||||
/>
|
||||
</div>
|
||||
|
||||
## Project
|
||||
|
||||
A **Project** can be a flow or a component. To view your saved projects, select **My Collection**.
|
||||
|
||||
Your **Projects** are displayed.
|
||||
|
||||
Click the ** Playground** button to run a flow from the **My Collection** screen.
|
||||
|
||||
In the top left corner of the screen are options for **Download Collection**, **Upload Collection**, and **New Project**.
|
||||
|
||||
Select **Download Collection** to save your project to your local machine. This downloads all flows and components as a `.json` file.
|
||||
|
||||
Select **Upload Collection** to upload a flow or component `.json` file from your local machine.
|
||||
|
||||
Select **New Project** to create a new project. In addition to a blank canvas, [starter projects](../starter-projects/basic-prompting.mdx) are also available.
|
||||
|
|
|
|||
|
|
@ -14,14 +14,7 @@ module.exports = {
|
|||
"index",
|
||||
"getting-started/install-langflow",
|
||||
"getting-started/quickstart",
|
||||
{
|
||||
type: "category",
|
||||
label: "Langflow Functionality",
|
||||
items: [
|
||||
"getting-started/canvas",
|
||||
"getting-started/flows-components-collections",
|
||||
],
|
||||
},
|
||||
"getting-started/canvas",
|
||||
"migration/possible-installation-issues",
|
||||
"getting-started/new-to-llms",
|
||||
],
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue