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

Merge remote-tracking branch 'origin/dev' into fix/minor_bugs

Browse source
This commit is contained in:
Lucas Oliveira 2024-05-31 20:55:38 -03:00
commit 81f61201be
435 changed files with 9714 additions and 13063 deletions
Download patch file Download diff file Expand all files Collapse all files

282
docs/docs/getting-started/canvas.mdx Normal file
View file

@ -0,0 +1,282 @@
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.
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/basic-prompting.png",
dark: "img/basic-prompting.png",
}}
style={{ width: "30%", margin: "20px auto" }}
/>
## 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.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)
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>
### 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: "30%", 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 re-use.
#### 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 re-use.
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 re-used from the **Saved** components folder.
## Playground
Run your flow by clicking the **![Playground icon](/logos/botmessage.svg)Playground** button.
For more, see [Playground](../administration/playground.mdx).
## 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: "50%", 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.
```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.mdx).
### 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 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
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.

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

@ -0,0 +1,20 @@
import ThemedImage from "@theme/ThemedImage";
import useBaseUrl from "@docusaurus/useBaseUrl";
import ZoomableImage from "/src/theme/ZoomableImage.js";
import ReactPlayer from "react-player";
# 🖥️ Flows, components, collections, and projects
## TL;DR
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**.
## Component

38
docs/docs/getting-started/huggingface-spaces.mdx
View file

@ -1,38 +0,0 @@
import ThemedImage from "@theme/ThemedImage";
import useBaseUrl from "@docusaurus/useBaseUrl";
import ZoomableImage from "/src/theme/ZoomableImage.js";
import Admonition from "@theme/Admonition";
# 🤗 HuggingFace Spaces
HuggingFace provides a great alternative for running Langflow in their Spaces environment. This means you can run Langflow without any local installation required.
In a Chromium-based browser, go to the [Langflow Space](https://huggingface.co/spaces/Langflow/Langflow?duplicate=true) or [Langflow v1.0 alpha Preview Space](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true).
You'll be presented with the following screen:
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/duplicate-space.png",
dark: "img/duplicate-space.png",
}}
style={{ width: "100%", margin: "20px auto" }}
/>
Name your Space, define the visibility (Public or Private), and click on **Duplicate Space** to start the installation process. When installation is finished, you'll be redirected to the Space's main page to start using Langflow right away!
## Run a starter project
Langflow provides a range of example flows to help you get started.
Once you get Langflow running in your Space, click on **New Project** in the top right corner of the screen.
Select a starter project from the list, set up your API keys, and click ⚡ Run. This will open up Langflow's Interaction Panel with the chat console, text inputs, and outputs ready to go.
For more information on the starter projects, see the guides below:
* [Basic prompting](/starter-projects/basic-prompting.mdx)
* [Memory chatbot](/starter-projects/memory-chatbot.mdx)
* [Blog writer](/starter-projects/blog-writer.mdx)
* [Document QA](/starter-projects/document-qa.mdx)

38
docs/docs/getting-started/install-langflow.mdx
View file

@ -6,35 +6,40 @@ import Admonition from "@theme/Admonition";
# 📦 Install Langflow
<Admonition type="info">
Langflow v1.0 alpha is also available in [HuggingFace Spaces](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true). Try it out or follow the instructions [here](./huggingface-spaces) to install it locally.
Langflow v1.0 alpha is also available in HuggingFace Spaces. [Clone the space
using this
link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true),
to create your own Langflow workspace in minutes.
</Admonition>
Langflow requires [Python 3.10](https://www.python.org/downloads/release/python-3100/) and [pip](https://pypi.org/project/pip/) or [pipx](https://pipx.pypa.io/stable/installation/) to be installed on your system.
Langflow requires [Python >=3.10](https://www.python.org/downloads/release/python-3100/) and [pip](https://pypi.org/project/pip/) or [pipx](https://pipx.pypa.io/stable/installation/) to be installed on your system.
Install Langflow with pip:
```bash
python -m pip install langflow -U
```
Install Langflow with pipx:
```bash
pipx install langflow --python python3.10 --fetch-missing-python
```
Pipx can fetch the missing Python version for you with `--fetch-missing-python`, but you can also install the Python version manually.
Pipx can fetch the missing Python version for you with `--fetch-missing-python`, but you can also install the Python version manually.
## Install Langflow pre-release
To install a pre-release version of Langflow:
pip:
```bash
python -m pip install langflow --pre --force-reinstall
```
pipx:
```bash
pipx install langflow --python python3.10 --fetch-missing-python --pip-args="--pre --force-reinstall"
```
@ -54,11 +59,13 @@ python -m langflow --help
## ⛓️ Run Langflow
1. To run Langflow, enter the following command.
```bash
python -m langflow run
```
2. Confirm that a local Langflow instance starts by visiting `http://127.0.0.1:7860` in a Chromium-based browser.
```bash
│ Welcome to ⛓ Langflow │
│ │
@ -66,4 +73,23 @@ python -m langflow run
│ Collaborate, and contribute at our GitHub Repo 🚀 │
```
3. Continue on to the [Quickstart](./quickstart.mdx).
3. Continue on to the [Quickstart](./quickstart.mdx).
## HuggingFace Spaces
HuggingFace provides a great alternative for running Langflow in their Spaces environment. This means you can run Langflow without any local installation required.
In a Chromium-based browser, go to the [Langflow Space](https://huggingface.co/spaces/Langflow/Langflow?duplicate=true) or [Langflow v1.0 alpha Preview Space](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true).
You'll be presented with the following screen:
<ZoomableImage
alt="Docusaurus themed image"
sources={{
light: "img/duplicate-space.png",
dark: "img/duplicate-space.png",
}}
style={{ width: "100%", margin: "20px auto" }}
/>
Name your Space, define the visibility (Public or Private), and click on **Duplicate Space** to start the installation process. When installation is finished, you'll be redirected to the Space's main page to start using Langflow right away!

33
docs/docs/getting-started/quickstart.mdx
View file

@ -10,12 +10,15 @@ This guide demonstrates how to build a basic prompt flow and modify that prompt
## Prerequisites
* [Langflow installed](./install-langflow.mdx)
- [Langflow installed and running](./install-langflow.mdx)
* [OpenAI API key](https://platform.openai.com)
- [OpenAI API key](https://platform.openai.com)
<Admonition type="info">
Langflow v1.0 alpha is also available in [HuggingFace Spaces](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true). Try it out or follow the instructions [here](./huggingface-spaces) to install it locally.
Langflow v1.0 alpha is also available in HuggingFace Spaces. [Clone the space
using this
link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true)
to create your own Langflow workspace in minutes.
</Admonition>
## Hello World - Basic Prompting
@ -44,25 +47,25 @@ Examine the **Prompt** component. The **Template** field instructs the LLM to `A
This should be interesting...
4. To create an environment variable for the **OpenAI** component, in the **OpenAI API Key** field, click the **Globe** button, and then click **Add New Variable**.
1. In the **Variable Name** field, enter `openai_api_key`.
2. In the **Value** field, paste your OpenAI API Key (`sk-...`).
3. Click **Save Variable**.
1. In the **Variable Name** field, enter `openai_api_key`.
2. In the **Value** field, paste your OpenAI API Key (`sk-...`).
3. Click **Save Variable**.
## Run the basic prompting flow
1. Click the **Run** button.
The **Interaction Panel** opens, where you can chat with your bot.
The **Interaction Panel** opens, where you can chat with your bot.
2. Type a message and press Enter.
And... Ahoy! 🏴‍☠️
The bot responds in a piratical manner!
And... Ahoy! 🏴‍☠️
The bot responds in a piratical manner!
## Modify the prompt for a different result
1. To modify your prompt results, in the **Prompt** template, click the **Template** field.
The **Edit Prompt** window opens.
The **Edit Prompt** window opens.
2. Change `Answer the user as if you were a pirate` to a different character, perhaps `Answer the user as if you were Harold Abelson.`
3. Run the basic prompting flow again.
The response will be markedly different.
The response will be markedly different.
## Next steps
@ -72,8 +75,6 @@ By adding Langflow components to your flow, you can create all sorts of interest
Here are a couple of examples:
* [Memory chatbot](/starter-projects/memory-chatbot.mdx)
* [Blog writer](/starter-projects/blog-writer.mdx)
* [Document QA](/starter-projects/document-qa.mdx)
- [Memory chatbot](/starter-projects/memory-chatbot.mdx)
- [Blog writer](/starter-projects/blog-writer.mdx)
- [Document QA](/starter-projects/document-qa.mdx)