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

combine-flows-doc-into-canvas

Browse source
This commit is contained in:
Mendon Kissling 2024-05-28 11:22:49 -04:00
commit e38123c951
3 changed files with 70 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

75
docs/docs/getting-started/canvas.mdx
View file

@ -4,7 +4,6 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
import ReactPlayer from "react-player"; import ReactPlayer from "react-player";
import Admonition from "@theme/Admonition"; import Admonition from "@theme/Admonition";
# 🎨 Langflow canvas # 🎨 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. 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" }} 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" }}> <div style={{ marginBottom: "20px" }}>
During the flow creation process, you will notice handles (colored circles) 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" }}> <div style={{ marginBottom: "20px" }}>
In the top right corner of the component, you'll find the component status icon (![Status icon](/logos/playbutton.svg)). In the top right corner of the component, you'll find the component status icon (![Status icon](/logos/playbutton.svg)).
Run the flow by clicking the **![Playground icon](/logos/botmessage.svg)Playground** button at the bottom right of the canvas. Build the flow by clicking the **![Playground icon](/logos/botmessage.svg)Playground** at the bottom right of the canvas.
Once the validation is complete, the status of each validated component should turn green (![Status icon](/logos/greencheck.svg)). Once the validation is complete, the status of each validated component should turn green (![Status icon](/logos/greencheck.svg)).
To debug, hover over the component status to see the outputs. 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 ### Component menu
Each component is a little unique, but they will all have a menu bar on top that looks something like this. 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" }} style={{ width: "30%", margin: "20px auto" }}
/> />
#### Code ### Code menu
The **Code** button displays your component's Python code. The **Code** button displays your component's Python code.
You can modify the code and save it. 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" /> <ReactPlayer playing controls url="/videos/langflow_api.mp4" />
</div> </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 icon](/logos/botmessage.svg) 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 ## Project options menu
To see options for your project, in the upper left corner of the canvas, select the dropdown menu. To see options for your project, in the upper left corner of the canvas, select the dropdown menu.

87
docs/docs/getting-started/flows-components-collections.mdx
View file

@ -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**. 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 ## 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 (![Status icon](/logos/playbutton.svg)).
Build the flow by clicking the **![Playground icon](/logos/botmessage.svg)Playground** at the bottom right of the canvas.
Once the validation is complete, the status of each validated component should turn green (![Status icon](/logos/greencheck.svg)).
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 icon](/logos/botmessage.svg) 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.

7
docs/sidebars.js
View file

@ -14,14 +14,7 @@ module.exports = {
"index", "index",
"getting-started/install-langflow", "getting-started/install-langflow",
"getting-started/quickstart", "getting-started/quickstart",
{
type: "category",
label: "Langflow Functionality",
items: [
"getting-started/canvas", "getting-started/canvas",
"getting-started/flows-components-collections",
],
},
"migration/possible-installation-issues", "migration/possible-installation-issues",
"getting-started/new-to-llms", "getting-started/new-to-llms",
], ],