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,23 +1,23 @@
|
|||
# Community
|
||||
|
||||
## 🤖 Join **LangFlow** Discord server
|
||||
## 🤖 Join **Langflow** Discord server
|
||||
|
||||
Join us to ask questions and showcase your projects.
|
||||
|
||||
Let's bring together the building blocks of AI integration!
|
||||
|
||||
LangFlow [Discord](https://discord.gg/EqksyE2EX9) server.
|
||||
Langflow [Discord](https://discord.gg/EqksyE2EX9) server.
|
||||
|
||||
---
|
||||
|
||||
## 🐦 Stay tunned for **LangFlow** on Twitter
|
||||
## 🐦 Stay tunned for **Langflow** on Twitter
|
||||
|
||||
Follow [@logspace_ai](https://twitter.com/logspace_ai) on **Twitter** to get the latest news about **LangFlow**.
|
||||
Follow [@logspace_ai](https://twitter.com/logspace_ai) on **Twitter** to get the latest news about **Langflow**.
|
||||
|
||||
---
|
||||
## ⭐️ Star **LangFlow** on GitHub
|
||||
## ⭐️ Star **Langflow** on GitHub
|
||||
|
||||
You can "star" **LangFlow** in [GitHub](https://github.com/logspace-ai/langflow).
|
||||
You can "star" **Langflow** in [GitHub](https://github.com/logspace-ai/langflow).
|
||||
|
||||
By adding a star, other users will be able to find it more easily and see that it has been already useful for others.
|
||||
|
||||
|
|
@ -25,7 +25,7 @@ By adding a star, other users will be able to find it more easily and see that i
|
|||
|
||||
## 👀 Watch the GitHub repository for releases
|
||||
|
||||
You can "watch" **LangFlow** in [GitHub](https://github.com/logspace-ai/langflow).
|
||||
You can "watch" **Langflow** in [GitHub](https://github.com/logspace-ai/langflow).
|
||||
|
||||
|
||||
If you select "Watching" instead of "Releases only" you will receive notifications when someone creates a new issue or question. You can also specify that you only want to be notified about new issues, discussions, PRs, etc.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# How to contribute?
|
||||
|
||||
👋 Hello there! We welcome contributions from developers of all levels to our open-source project on [GitHub](https://github.com/logspace-ai/langflow). If you'd like to contribute, please check our contributing guidelines and help make LangFlow more accessible.
|
||||
👋 Hello there! We welcome contributions from developers of all levels to our open-source project on [GitHub](https://github.com/logspace-ai/langflow). If you'd like to contribute, please check our contributing guidelines and help make Langflow more accessible.
|
||||
|
||||
As an open-source project in a rapidly developing field, we are extremely open
|
||||
to contributions, whether in the form of a new feature, improved infra, or better documentation.
|
||||
|
|
@ -12,7 +12,7 @@ Please do not try to push directly to this repo unless you are a maintainer.
|
|||
---
|
||||
## Local development
|
||||
|
||||
You can develop LangFlow using docker compose, or locally.
|
||||
You can develop Langflow using docker compose, or locally.
|
||||
|
||||
We provide a .vscode/launch.json file for debugging the backend in VSCode, which is a lot faster than using docker compose.
|
||||
|
||||
|
|
@ -29,7 +29,7 @@ It is advised to run `make lint` before pushing to the repository.
|
|||
|
||||
## Run locally
|
||||
|
||||
LangFlow can run locally by cloning the repository and installing the dependencies. We recommend using a virtual environment to isolate the dependencies from your system.
|
||||
Langflow can run locally by cloning the repository and installing the dependencies. We recommend using a virtual environment to isolate the dependencies from your system.
|
||||
|
||||
Before you start, make sure you have the following installed:
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
# Deploy on Google Cloud Platform
|
||||
|
||||
## Run LangFlow from a New Google Cloud Project
|
||||
## Run Langflow from a New Google Cloud Project
|
||||
|
||||
This guide will help you set up a LangFlow development VM in a Google Cloud Platform project using Google Cloud Shell.
|
||||
This guide will help you set up a Langflow development VM in a Google Cloud Platform project using Google Cloud Shell.
|
||||
|
||||
:::note
|
||||
When Cloud Shell opens, be sure to select **Trust repo**. Some `gcloud` commands might not run in an ephemeral Cloud Shell environment.
|
||||
|
|
@ -12,7 +12,7 @@ When Cloud Shell opens, be sure to select **Trust repo**. Some `gcloud` commands
|
|||
## Standard VM
|
||||
[](https://console.cloud.google.com/cloudshell/open?git_repo=https://github.com/logspace-ai/langflow&working_dir=scripts&shellonly=true&tutorial=walkthroughtutorial.md)
|
||||
|
||||
This script sets up a Debian-based VM with the LangFlow package, Nginx, and the necessary configurations to run the LangFlow Dev environment.
|
||||
This script sets up a Debian-based VM with the Langflow package, Nginx, and the necessary configurations to run the Langflow Dev environment.
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -20,7 +20,7 @@ This script sets up a Debian-based VM with the LangFlow package, Nginx, and the
|
|||
|
||||
[](https://console.cloud.google.com/cloudshell/open?git_repo=https://github.com/genome21/langflow&working_dir=scripts&shellonly=true&tutorial=walkthroughtutorial_spot.md)
|
||||
|
||||
When running as a [spot (preemptible) instance](https://cloud.google.com/compute/docs/instances/preemptible), the code and VM will behave the same way as in a regular instance, executing the startup script to configure the environment, install necessary dependencies, and run the LangFlow application. However, **due to the nature of spot instances, the VM may be terminated at any time if Google Cloud needs to reclaim the resources**. This makes spot instances suitable for fault-tolerant, stateless, or interruptible workloads that can handle unexpected terminations and restarts.
|
||||
When running as a [spot (preemptible) instance](https://cloud.google.com/compute/docs/instances/preemptible), the code and VM will behave the same way as in a regular instance, executing the startup script to configure the environment, install necessary dependencies, and run the Langflow application. However, **due to the nature of spot instances, the VM may be terminated at any time if Google Cloud needs to reclaim the resources**. This makes spot instances suitable for fault-tolerant, stateless, or interruptible workloads that can handle unexpected terminations and restarts.
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Deploy on Jina AI Cloud
|
||||
|
||||
LangFlow integrates with langchain-serve to provide a one-command deployment to [Jina AI Cloud](https://github.com/jina-ai/langchain-serve).
|
||||
Langflow integrates with langchain-serve to provide a one-command deployment to [Jina AI Cloud](https://github.com/jina-ai/langchain-serve).
|
||||
|
||||
Start by installing `langchain-serve` with
|
||||
|
||||
|
|
@ -51,7 +51,7 @@ langflow --jcloud
|
|||
```
|
||||
## API Usage (with python)
|
||||
|
||||
You can use LangFlow directly on your browser or the API endpoints on Jina AI Cloud to interact with the server.
|
||||
You can use Langflow directly on your browser or the API endpoints on Jina AI Cloud to interact with the server.
|
||||
|
||||
```python
|
||||
import requests
|
||||
|
|
@ -96,6 +96,6 @@ print(run_flow("Your message", flow_id=FLOW_ID, tweaks=TWEAKS))
|
|||
|
||||
:::info
|
||||
|
||||
Read more about resource customization, cost, and management of LangFlow apps on Jina AI Cloud in the **[langchain-serve](https://github.com/jina-ai/langchain-serve)** repository.
|
||||
Read more about resource customization, cost, and management of Langflow apps on Jina AI Cloud in the **[langchain-serve](https://github.com/jina-ai/langchain-serve)** repository.
|
||||
|
||||
:::
|
||||
|
|
@ -2,24 +2,24 @@
|
|||
|
||||
For certain applications, retaining past interactions is crucial. For that, chains and agents may accept a memory component as one of their input parameters. The `ConversationBufferMemory` component is one of them. It stores messages and extracts them into variables.
|
||||
|
||||
## ⛓️ LangFlow Example
|
||||
|
||||
import ThemedImage from '@theme/ThemedImage';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
import ZoomableImage from '/src/theme/ZoomableImage.js';
|
||||
## ⛓️ Langflow Example
|
||||
|
||||
import ThemedImage from "@theme/ThemedImage";
|
||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||
import ZoomableImage from "/src/theme/ZoomableImage.js";
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: 'img/buffer-memory.png',
|
||||
light: "img/buffer-memory.png",
|
||||
}}
|
||||
/>
|
||||
|
||||
#### <a target="\_blank" href="json_files/Buffer_Memory.json" download>Download Flow</a>
|
||||
#### <a target="\_blank" href="json_files/Buffer_Memory.json" download>Download Flow</a>
|
||||
|
||||
:::note LangChain Components 🦜🔗
|
||||
|
||||
- [`ConversationBufferMemory`](https://python.langchain.com/docs/modules/memory/how_to/buffer)
|
||||
- [`ConversationChain`](https://python.langchain.com/docs/modules/chains/)
|
||||
- [`ChatOpenAI`](https://python.langchain.com/docs/modules/model_io/models/chat/integrations/openai)
|
||||
:::
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -6,24 +6,23 @@ This example shows how to instantiate a simple `ConversationChain` component usi
|
|||
Make sure to always get the API key from the provider.
|
||||
:::
|
||||
|
||||
## ⛓️ Langflow Example
|
||||
|
||||
## ⛓️ LangFlow Example
|
||||
|
||||
import ThemedImage from '@theme/ThemedImage';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
import ZoomableImage from '/src/theme/ZoomableImage.js';
|
||||
|
||||
import ThemedImage from "@theme/ThemedImage";
|
||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||
import ZoomableImage from "/src/theme/ZoomableImage.js";
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: 'img/basic-chat.png',
|
||||
light: "img/basic-chat.png",
|
||||
}}
|
||||
/>
|
||||
|
||||
#### <a target="\_blank" href="json_files/Basic_Chat.json" download>Download Flow</a>
|
||||
#### <a target="\_blank" href="json_files/Basic_Chat.json" download>Download Flow</a>
|
||||
|
||||
:::note LangChain Components 🦜🔗
|
||||
|
||||
- [`ConversationChain`](https://python.langchain.com/docs/modules/chains/)
|
||||
- [`ChatOpenAI`](https://python.langchain.com/docs/modules/model_io/models/chat/integrations/openai)
|
||||
:::
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -15,24 +15,23 @@ The vector store is used for efficient semantic search, while `VectorStoreInfo`
|
|||
Once you build this flow, ask questions about the data in the chat interface (e.g., number of rows or columns).
|
||||
:::
|
||||
|
||||
## ⛓️ Langflow Example
|
||||
|
||||
## ⛓️ LangFlow Example
|
||||
|
||||
import ThemedImage from '@theme/ThemedImage';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
import ZoomableImage from '/src/theme/ZoomableImage.js';
|
||||
|
||||
import ThemedImage from "@theme/ThemedImage";
|
||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||
import ZoomableImage from "/src/theme/ZoomableImage.js";
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: 'img/csv-loader.png',
|
||||
light: "img/csv-loader.png",
|
||||
}}
|
||||
/>
|
||||
|
||||
#### <a target="\_blank" href="json_files/CSV_Loader.json" download>Download Flow</a>
|
||||
#### <a target="\_blank" href="json_files/CSV_Loader.json" download>Download Flow</a>
|
||||
|
||||
:::note LangChain Components 🦜🔗
|
||||
|
||||
- [`CSVLoader`](https://python.langchain.com/docs/modules/data_connection/document_loaders/integrations/csv)
|
||||
- [`CharacterTextSplitter`](https://python.langchain.com/docs/modules/data_connection/document_transformers/text_splitters/character_text_splitter)
|
||||
- [`OpenAIEmbedding`](https://python.langchain.com/docs/modules/data_connection/text_embedding/integrations/openai)
|
||||
|
|
@ -40,4 +39,4 @@ import ZoomableImage from '/src/theme/ZoomableImage.js';
|
|||
- [`VectorStoreInfo`](https://python.langchain.com/docs/modules/data_connection/vectorstores/)
|
||||
- [`OpenAI`](https://python.langchain.com/docs/modules/model_io/models/llms/integrations/openai)
|
||||
- [`VectorStoreAgent`](https://python.langchain.com/docs/modules/agents/toolkits/vectorstore)
|
||||
:::
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -1,18 +1,20 @@
|
|||
import ThemedImage from '@theme/ThemedImage';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
import ZoomableImage from '/src/theme/ZoomableImage.js';
|
||||
import ThemedImage from "@theme/ThemedImage";
|
||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||
import ZoomableImage from "/src/theme/ZoomableImage.js";
|
||||
|
||||
# 📚 How to Upload Examples?
|
||||
|
||||
We welcome all examples that can help our community learn and explore LangFlow's capabilities.
|
||||
We welcome all examples that can help our community learn and explore Langflow's capabilities.
|
||||
Langflow Examples is a repository on [GitHub](https://github.com/logspace-ai/langflow_examples) that contains examples of flows that people can use for inspiration and learning.
|
||||
|
||||
<div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'center' }}>
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: 'img/community-examples.png',
|
||||
}}
|
||||
<div
|
||||
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
|
||||
>
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: "img/community-examples.png",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -24,4 +26,4 @@ To upload examples, please follow these steps:
|
|||
|
||||
3. **Submit a Pull Request:** Finally, submit a pull request (PR) to the examples repo. Make sure to include your JSON file in the PR.
|
||||
|
||||
If your example uses any third-party libraries or packages, please include them in your PR and make sure that your example follows the [**⛓️ Langflow Code Of Conduct**](https://github.com/logspace-ai/langflow/blob/dev/CODE_OF_CONDUCT.md).
|
||||
If your example uses any third-party libraries or packages, please include them in your PR and make sure that your example follows the [**⛓️ Langflow Code Of Conduct**](https://github.com/logspace-ai/langflow/blob/dev/CODE_OF_CONDUCT.md).
|
||||
|
|
|
|||
|
|
@ -18,23 +18,23 @@ Imagine a mysterious forest, the trees are tall and ancient, their branches reac
|
|||
Notice that the `ConversationSummaryMemory` stores a summary of the conversation over time. Try using it to create better prompts as the conversation goes on.
|
||||
:::
|
||||
|
||||
## ⛓️ LangFlow Example
|
||||
|
||||
import ThemedImage from '@theme/ThemedImage';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
import ZoomableImage from '/src/theme/ZoomableImage.js';
|
||||
## ⛓️ Langflow Example
|
||||
|
||||
import ThemedImage from "@theme/ThemedImage";
|
||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||
import ZoomableImage from "/src/theme/ZoomableImage.js";
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: 'img/midjourney-prompt-chain.png',
|
||||
light: "img/midjourney-prompt-chain.png",
|
||||
}}
|
||||
/>
|
||||
|
||||
#### <a target="\_blank" href="json_files/MidJourney_Prompt_Chain.json" download>Download Flow</a>
|
||||
#### <a target="\_blank" href="json_files/MidJourney_Prompt_Chain.json" download>Download Flow</a>
|
||||
|
||||
:::note LangChain Components 🦜🔗
|
||||
|
||||
- [`OpenAI`](https://python.langchain.com/docs/modules/model_io/models/llms/integrations/openai)
|
||||
- [`ConversationSummaryMemory`](https://python.langchain.com/docs/modules/memory/how_to/summary)
|
||||
:::
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -1,16 +1,15 @@
|
|||
# Multiple Vector Stores
|
||||
|
||||
|
||||
The example below shows an agent operating with two vector stores built upon different data sources.
|
||||
|
||||
The `TextLoader` loads a TXT file, while the `WebBaseLoader` pulls text from webpages into a document format to accessed downstream. The `Chroma` vector stores are created analogous to what we have demonstrated in our [CSV Loader](/examples/csv-loader.mdx) example. Finally, the `VectorStoreRouterAgent` constructs an agent that routes between the vector stores.
|
||||
|
||||
|
||||
:::info
|
||||
Get the TXT file used [here](https://github.com/hwchase17/chat-your-data/blob/master/state_of_the_union.txt).
|
||||
:::
|
||||
|
||||
URL used by the `WebBaseLoader`:
|
||||
|
||||
```txt
|
||||
https://pt.wikipedia.org/wiki/Harry_Potter
|
||||
```
|
||||
|
|
@ -23,24 +22,23 @@ When you build the flow, request information about one of the sources. The agent
|
|||
Learn more about Multiple Vector Stores [here](https://python.langchain.com/docs/modules/agents/toolkits/vectorstore?highlight=Multiple%20Vector%20Stores#multiple-vectorstores).
|
||||
:::
|
||||
|
||||
## ⛓️ Langflow Example
|
||||
|
||||
## ⛓️ LangFlow Example
|
||||
|
||||
import ThemedImage from '@theme/ThemedImage';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
import ZoomableImage from '/src/theme/ZoomableImage.js';
|
||||
|
||||
import ThemedImage from "@theme/ThemedImage";
|
||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||
import ZoomableImage from "/src/theme/ZoomableImage.js";
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: 'img/multiple-vectorstores.png',
|
||||
light: "img/multiple-vectorstores.png",
|
||||
}}
|
||||
/>
|
||||
|
||||
#### <a target="\_blank" href="json_files/Multiple_Vector_Stores.json" download>Download Flow</a>
|
||||
#### <a target="\_blank" href="json_files/Multiple_Vector_Stores.json" download>Download Flow</a>
|
||||
|
||||
:::note LangChain Components 🦜🔗
|
||||
|
||||
- [`WebBaseLoader`](https://python.langchain.com/docs/modules/data_connection/document_loaders/integrations/web_base)
|
||||
- [`TextLoader`](https://python.langchain.com/docs/modules/data_connection/document_loaders/integrations/unstructured_file)
|
||||
- [`CharacterTextSplitter`](https://python.langchain.com/docs/modules/data_connection/document_transformers/text_splitters/character_text_splitter)
|
||||
|
|
@ -51,4 +49,4 @@ import ZoomableImage from '/src/theme/ZoomableImage.js';
|
|||
- [`VectorStoreRouterToolkit`](https://python.langchain.com/docs/modules/agents/toolkits/vectorstore)
|
||||
- [`VectorStoreRouterAgent`](https://python.langchain.com/docs/modules/agents/toolkits/vectorstore)
|
||||
|
||||
:::
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
# Python Function
|
||||
|
||||
|
||||
LangFlow allows you to create a customized tool using the `PythonFunction` connected to a `Tool` component. In this example, Regex is used in Python to validate a pattern.
|
||||
Langflow allows you to create a customized tool using the `PythonFunction` connected to a `Tool` component. In this example, Regex is used in Python to validate a pattern.
|
||||
|
||||
```python
|
||||
import re
|
||||
|
|
@ -17,34 +16,33 @@ def is_brazilian_zipcode(zipcode: str) -> bool:
|
|||
```
|
||||
|
||||
:::tip
|
||||
When a tool is called, it is often desirable to have its output returned directly to the user. You can do this by setting the **return_direct** flag for a tool to be True.
|
||||
When a tool is called, it is often desirable to have its output returned directly to the user. You can do this by setting the **return_direct** flag for a tool to be True.
|
||||
:::
|
||||
|
||||
The `AgentInitializer` component is a quick way to construct an agent from the model and tools.
|
||||
|
||||
|
||||
:::info
|
||||
The `PythonFunction` is a custom component that uses the LangChain 🦜🔗 tool decorator. Learn more about it [here](https://python.langchain.com/docs/modules/agents/tools/how_to/custom_tools).
|
||||
:::
|
||||
|
||||
## ⛓️ Langflow Example
|
||||
|
||||
## ⛓️ LangFlow Example
|
||||
|
||||
import ThemedImage from '@theme/ThemedImage';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
import ZoomableImage from '/src/theme/ZoomableImage.js';
|
||||
import ThemedImage from "@theme/ThemedImage";
|
||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||
import ZoomableImage from "/src/theme/ZoomableImage.js";
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: 'img/python-function.png',
|
||||
light: "img/python-function.png",
|
||||
}}
|
||||
/>
|
||||
|
||||
#### <a target="\_blank" href="json_files/Python_Function.json" download>Download Flow</a>
|
||||
#### <a target="\_blank" href="json_files/Python_Function.json" download>Download Flow</a>
|
||||
|
||||
:::note LangChain Components 🦜🔗
|
||||
|
||||
- [`PythonFunctionTool`](https://python.langchain.com/docs/modules/agents/tools/how_to/custom_tools)
|
||||
- [`ChatOpenAI`](https://python.langchain.com/docs/modules/model_io/models/chat/integrations/openai)
|
||||
- [`AgentInitializer`](https://python.langchain.com/docs/modules/agents/)
|
||||
:::
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
# Serp API Tool
|
||||
|
||||
The [Serp API](https://serpapi.com/) (Search Engine Results Page) allows developers to scrape results from search engines such as Google, Bing and Yahoo, and can be used as in LangFlow through the `Search` component.
|
||||
The [Serp API](https://serpapi.com/) (Search Engine Results Page) allows developers to scrape results from search engines such as Google, Bing and Yahoo, and can be used as in Langflow through the `Search` component.
|
||||
|
||||
:::info
|
||||
To use the Serp API, you first need to sign up [Serp API](https://serpapi.com/) for an API key on the provider's website.
|
||||
To use the Serp API, you first need to sign up [Serp API](https://serpapi.com/) for an API key on the provider's website.
|
||||
:::
|
||||
|
||||
Here, the `ZeroShotPrompt` component specifies a prompt template for the `ZeroShotAgent`. Set a _Prefix_ and _Suffix_ with rules for the agent to obey. In the example, we used default templates.
|
||||
|
|
@ -14,33 +14,32 @@ The `LLMChain` is a simple chain that takes in a prompt template, formats it wit
|
|||
In this example, we used [`ChatOpenAI`](https://platform.openai.com/) as the LLM, but feel free to experiment with other Language Models!
|
||||
:::
|
||||
|
||||
|
||||
The `ZeroShotAgent` takes the `LLMChain` and the `Search` tool as inputs, using the tool to find information when necessary.
|
||||
|
||||
|
||||
:::info
|
||||
Learn more about the Serp API [here](https://python.langchain.com/docs/modules/agents/tools/integrations/serpapi).
|
||||
:::
|
||||
|
||||
## ⛓️ LangFlow Example
|
||||
## ⛓️ Langflow Example
|
||||
|
||||
import ThemedImage from '@theme/ThemedImage';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
import ZoomableImage from '/src/theme/ZoomableImage.js';
|
||||
import ThemedImage from "@theme/ThemedImage";
|
||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||
import ZoomableImage from "/src/theme/ZoomableImage.js";
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: 'img/serp-api-tool.png',
|
||||
light: "img/serp-api-tool.png",
|
||||
}}
|
||||
/>
|
||||
|
||||
#### <a target="\_blank" href="json_files/SerpAPI_Tool.json" download>Download Flow</a>
|
||||
#### <a target="\_blank" href="json_files/SerpAPI_Tool.json" download>Download Flow</a>
|
||||
|
||||
:::note LangChain Components 🦜🔗
|
||||
|
||||
- [`ZeroShotPrompt`](https://python.langchain.com/docs/modules/model_io/prompts/prompt_templates/)
|
||||
- [`OpenAI`](https://python.langchain.com/docs/modules/model_io/models/llms/integrations/openai)
|
||||
- [`LLMChain`](https://python.langchain.com/docs/modules/chains/foundational/llm_chain)
|
||||
- [`Search`](https://python.langchain.com/docs/modules/agents/tools/integrations/serpapi)
|
||||
- [`ZeroShotAgent`](https://python.langchain.com/docs/modules/agents/how_to/custom_mrkl_agent)
|
||||
:::
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -1,37 +1,37 @@
|
|||
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";
|
||||
|
||||
# 🎨 Creating Flows
|
||||
|
||||
## Compose
|
||||
|
||||
Creating flows with LangFlow is easy. Drag sidebar components onto the canvas and connect them together to create your pipeline. LangFlow provides a range of [LangChain components](https://python.langchain.com/docs/modules/) to choose from, including LLMs, prompt serializers, agents, and chains.
|
||||
Creating flows with Langflow is easy. Drag sidebar components onto the canvas and connect them together to create your pipeline. Langflow provides a range of [LangChain components](https://python.langchain.com/docs/modules/) to choose from, including LLMs, prompt serializers, agents, and chains.
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: 'img/langflow_canvas.png',
|
||||
light: "img/langflow_canvas.png",
|
||||
}}
|
||||
/>
|
||||
|
||||
|
||||
## Fork
|
||||
|
||||
The easiest way to start with LangFlow is by forking a **community example**. Forking an example stores a copy in your project collection, allowing you to edit and save the modified version as a new flow.
|
||||
The easiest way to start with Langflow is by forking a **community example**. Forking an example stores a copy in your project collection, allowing you to edit and save the modified version as a new flow.
|
||||
|
||||
<div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'center' }}>
|
||||
<ReactPlayer playing controls url='/videos/langflow_fork.mp4'
|
||||
/>
|
||||
<div
|
||||
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
|
||||
>
|
||||
<ReactPlayer playing controls url="/videos/langflow_fork.mp4" />
|
||||
</div>
|
||||
|
||||
|
||||
## Build
|
||||
|
||||
Building a flow means validating if the components have prerequisites fulfilled and are properly instantiated. When a chat message is sent, the flow will run for the first time, executing the pipeline.
|
||||
|
||||
<div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'center' }}>
|
||||
<ReactPlayer playing controls url='/videos/langflow_build.mp4'
|
||||
/>
|
||||
<div
|
||||
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
|
||||
>
|
||||
<ReactPlayer playing controls url="/videos/langflow_build.mp4" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,20 @@
|
|||
# 🤗 HuggingFace Spaces
|
||||
|
||||
A fully featured version of LangFlow can be accessed via HuggingFace spaces with no installation required.
|
||||
A fully featured version of Langflow can be accessed via HuggingFace spaces with no installation required.
|
||||
|
||||
import ThemedImage from '@theme/ThemedImage';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
import ZoomableImage from '/src/theme/ZoomableImage.js';
|
||||
import ThemedImage from "@theme/ThemedImage";
|
||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||
import ZoomableImage from "/src/theme/ZoomableImage.js";
|
||||
|
||||
<div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'center' }}>
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: 'img/hugging-face.png',
|
||||
}}
|
||||
<div
|
||||
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
|
||||
>
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: "img/hugging-face.png",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Check out LangFlow on [HuggingFace Spaces](https://huggingface.co/spaces/Logspace/LangFlow).
|
||||
Check out Langflow on [HuggingFace Spaces](https://huggingface.co/spaces/Logspace/Langflow).
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
## Installation
|
||||
|
||||
You can install LangFlow from pip:
|
||||
You can install Langflow from pip:
|
||||
|
||||
```bash
|
||||
pip install langflow
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,18 @@
|
|||
# 👋 Welcome to LangFlow
|
||||
# 👋 Welcome to Langflow
|
||||
|
||||
LangFlow is an easy way to prototype [LangChain](https://github.com/hwchase17/langchain) flows. The drag-and-drop feature allows quick and effortless experimentation, while the built-in chat interface facilitates real-time interaction. It provides options to edit prompt parameters, create chains and agents, track thought processes, and export flows.
|
||||
Langflow is an easy way to prototype [LangChain](https://github.com/hwchase17/langchain) flows. The drag-and-drop feature allows quick and effortless experimentation, while the built-in chat interface facilitates real-time interaction. It provides options to edit prompt parameters, create chains and agents, track thought processes, and export flows.
|
||||
|
||||
import ThemedImage from '@theme/ThemedImage';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
import ZoomableImage from '/src/theme/ZoomableImage.js';
|
||||
import ThemedImage from "@theme/ThemedImage";
|
||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||
import ZoomableImage from "/src/theme/ZoomableImage.js";
|
||||
|
||||
<div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'center' }}>
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: 'img/new_langflow2.gif',
|
||||
}}
|
||||
<div
|
||||
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
|
||||
>
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: "img/new_langflow2.gif",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -236,13 +236,13 @@ export const DESCRIPTIONS: string[] = [
|
|||
"Your Hub for Text Generation.",
|
||||
"Promptly Ingenious!",
|
||||
"Building Linguistic Labyrinths.",
|
||||
"LangFlow: Create, Chain, Communicate.",
|
||||
"Langflow: Create, Chain, Communicate.",
|
||||
"Connect the Dots, Craft Language.",
|
||||
"Interactive Language Weaving.",
|
||||
"Generate, Innovate, Communicate.",
|
||||
"Conversation Catalyst Engine.",
|
||||
"Language Chainlink Master.",
|
||||
"Design Dialogues with LangFlow.",
|
||||
"Design Dialogues with Langflow.",
|
||||
"Nurture NLP Nodes Here.",
|
||||
"Conversational Cartography Unlocked.",
|
||||
"Design, Develop, Dialogize.",
|
||||
|
|
|
|||
|
|
@ -529,7 +529,7 @@ export default function FormModal({
|
|||
<span>
|
||||
👋{" "}
|
||||
<span className="langflow-chat-span">
|
||||
LangFlow Chat
|
||||
Langflow Chat
|
||||
</span>
|
||||
</span>
|
||||
<br />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue