282 lines
10 KiB
Text
282 lines
10 KiB
Text
import ThemedImage from "@theme/ThemedImage";
|
|
import useBaseUrl from "@docusaurus/useBaseUrl";
|
|
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.
|
|
|
|
To get a feel for the canvas, we'll examine a basic prompting flow.
|
|
You can either build this flow yourself, or select **New Project** > **Basic prompting** to open a canvas with the flow pre-built.
|
|
|
|
## Flows, components, collections, and projects
|
|
|
|
A [flow](#flow) is a pipeline of components connected together in the Langflow canvas.
|
|
|
|
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) 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: "100%", maxWidth: "800px", margin: "0 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)
|
|
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: "40%", 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.
|
|
|
|
<div
|
|
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
|
|
>
|
|
<ReactPlayer playing controls url="/videos/langflow_parameters.mp4" />
|
|
</div>
|
|
|
|
Hide parameters with the **SHOW** button to reduce complexity and keep the canvas clean and intuitive for experimentation.
|
|
|
|
Double-click the component name to rename it.
|
|
|
|
### Component menu
|
|
|
|
Each component is a little unique, but they will all have a menu bar on top that looks something like this.
|
|
The menu options are **Code**, **Save**, **Duplicate**, and **More**.
|
|
|
|
<ZoomableImage
|
|
alt="Docusaurus themed image"
|
|
sources={{
|
|
light: "img/chat-input-with-menu.png",
|
|
dark: "img/chat-input-with-menu.png",
|
|
}}
|
|
style={{ width: "40%", margin: "20px auto" }}
|
|
/>
|
|
|
|
### Code menu
|
|
|
|
The **Code** button displays your component's Python code.
|
|
You can modify the code and save it.
|
|
|
|
#### Save
|
|
|
|
Save your component to the **Saved** components folder for reuse.
|
|
|
|
#### Duplicate
|
|
|
|
Duplicate your component in the canvas.
|
|
|
|
#### More
|
|
|
|
**Advanced** - modify the parameters of your component.
|
|
|
|
<div
|
|
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
|
|
>
|
|
<ReactPlayer playing controls url="/videos/langflow_parameters.mp4" />
|
|
</div>
|
|
|
|
**Copy** - copy your component.
|
|
|
|
**Share** - share your component to the Langflow store.
|
|
|
|
**Docs** - view documentation for your component.
|
|
|
|
**Delete** - delete your component.
|
|
|
|
### Group multiple components
|
|
|
|
Components without input or output nodes can be grouped into a single component for reuse.
|
|
This is useful for combining large flows into single components (like RAG with a vector database, for example) and saves space in the canvas.
|
|
|
|
1. Hold **Shift** and drag to select the **Prompt** and **OpenAI** components.
|
|
2. Select **Group**.
|
|
3. The components merge into a single component.
|
|
4. To save the new component, select **Save**. It can now be reused from the **Saved** components folder.
|
|
|
|
## Playground
|
|
|
|
Run your flow by clicking the **Playground** button.
|
|
|
|
For more, see [Playground](../administration/playground).
|
|
|
|
## API
|
|
|
|
The **API** button opens the API window, where Langflow presents code for integrating your flow into external applications.
|
|
|
|
Modify the call's parameters in the **Tweaks** window, click the **Copy Code** or **Download** buttons, and paste your code where you want to use it.
|
|
|
|
<ZoomableImage
|
|
alt="Docusaurus themed image"
|
|
sources={{
|
|
light: "img/api-window.png",
|
|
dark: "img/api-window.png",
|
|
}}
|
|
style={{ width: "60%", margin: "20px auto" }}
|
|
/>
|
|
|
|
### curl
|
|
|
|
The **curl** tab displays sample code for posting a query to your flow.
|
|
Modify the `input_value` to change your input message.
|
|
Copy the code and run it to post a query to your flow and get the result.
|
|
|
|
```curl
|
|
curl -X POST \
|
|
http://127.0.0.1:7863/api/v1/run/f2eefd80-bb91-4190-9279-0d6ffafeaac4\?stream\=false \
|
|
-H 'Content-Type: application/json'\
|
|
-d '{"input_value": "is anybody there?",
|
|
"output_type": "chat",
|
|
"input_type": "chat",
|
|
"tweaks": {
|
|
"Prompt-uxBqP": {},
|
|
"OpenAIModel-k39HS": {},
|
|
"ChatOutput-njtka": {},
|
|
"ChatInput-P3fgL": {}
|
|
}}'
|
|
```
|
|
|
|
Result:
|
|
|
|
```
|
|
{"session_id":"f2eefd80-bb91-4190-9279-0d6ffafeaac4:53856a772b8e1cfcb3dd2e71576b5215399e95bae318d3c02101c81b7c252da3","outputs":[{"inputs":{"input_value":"is anybody there?"},"outputs":[{"results":{"result":"Arrr, me hearties! Aye, this be Captain [Your Name] speakin'. What be ye needin', matey?"},"artifacts":{"message":"Arrr, me hearties! Aye, this be Captain [Your Name] speakin'. What be ye needin', matey?","sender":"Machine","sender_name":"AI"},"messages":[{"message":"Arrr, me hearties! Aye, this be Captain [Your Name] speakin'. What be ye needin', matey?","sender":"Machine","sender_name":"AI","component_id":"ChatOutput-njtka"}],"component_display_name":"Chat Output","component_id":"ChatOutput-njtka"}]}]}%
|
|
```
|
|
|
|
### Python API
|
|
|
|
The **Python API** tab displays code to interact with your flow using the Python HTTP requests library.
|
|
|
|
### Python Code
|
|
|
|
The **Python Code** tab displays code to interact with your flow's `.json` file using the Langflow runtime.
|
|
|
|
### Chat Widget HTML
|
|
|
|
The **Chat Widget HTML** tab displays code that can be inserted in the `<body>` of your HTML to interact with your flow.
|
|
For more, see the [Chat widget documentation](../administration/chat-widget).
|
|
|
|
### Tweaks
|
|
|
|
The **Tweaks** tab displays the available parameters for your flow.
|
|
Modifying the parameters changes the code parameters across all windows.
|
|
For example, changing the **Chat Input** component's `input_value` will change that value across all API calls.
|
|
|
|
<div
|
|
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
|
|
>
|
|
<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) are also available.
|
|
|
|
## Project options menu
|
|
|
|
To see options for your project, in the upper left corner of the canvas, select the dropdown menu.
|
|
|
|
<ZoomableImage
|
|
alt="Docusaurus themed image"
|
|
sources={{
|
|
light: "img/project-options-menu.png",
|
|
dark: "img/project-options-menu.png",
|
|
}}
|
|
style={{ width: "30%", margin: "20px auto" }}
|
|
/>
|
|
|
|
**New** - Start a new project.
|
|
|
|
**Duplicate** - Duplicate the current flow as a new project.
|
|
|
|
**Settings** - Modify the project's **Name** or **Description**.
|
|
|
|
**Import** - Upload a flow `.json` file from your local machine.
|
|
|
|
**Export** - Download your current project to your local machine as a `.json` file.
|
|
|
|
**Undo** or **Redo** - Undo or redo your last action.import ThemedImage from "@theme/ThemedImage";
|
|
import useBaseUrl from "@docusaurus/useBaseUrl";
|
|
import ZoomableImage from "/src/theme/ZoomableImage.js";
|
|
import ReactPlayer from "react-player";
|
|
import Admonition from "@theme/Admonition";
|