From 4875ac57c86ffd4b44a6d00077a315c2584d6615 Mon Sep 17 00:00:00 2001 From: Gabriel Luiz Freitas Almeida Date: Tue, 5 Mar 2024 17:36:09 -0300 Subject: [PATCH 1/4] Update Langflow documentation with new component descriptions --- docs/docs/getting-started/creating-flows.mdx | 23 +++++++++++++++----- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/docs/docs/getting-started/creating-flows.mdx b/docs/docs/getting-started/creating-flows.mdx index aecc3ea16..9c16d225f 100644 --- a/docs/docs/getting-started/creating-flows.mdx +++ b/docs/docs/getting-started/creating-flows.mdx @@ -7,7 +7,8 @@ import ReactPlayer from "react-player"; ## 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 Components to choose from, including **Chat Input**, **Chat Output**, **API Request** and **Prompt**. -## Fork +## Starter Flows -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. +Langflow provides a range of starter flows to help you get started. These flows are pre-built and can be used as a starting point for your own flows.
-## Build +## Defining Inputs and Outputs + +Each flow can have multiple inputs and outputs. These can be defined by placing **Inputs** and **Outputs** components on the canvas. + +The **Inputs** components define the inputs to the flow. +Whenever you place an Input component on the canvas, it will allow you to interactively define change its value +from the Interactive Panel. + +The **Text Input** component allows you to define a text input, and the **Chat Input** component allows you to use the chat input from the Interactive Panel. + +The **Outputs** components define the outputs of the flow and work similarly to the Inputs components. + +Both Inputs and Outputs components can be connected to other components on the canvas and are used to define how the API works too. + -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.
Date: Tue, 5 Mar 2024 17:42:06 -0300 Subject: [PATCH 2/4] Add logging to read_flows function --- src/backend/langflow/api/v1/flows.py | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/backend/langflow/api/v1/flows.py b/src/backend/langflow/api/v1/flows.py index de021d091..371e320f4 100644 --- a/src/backend/langflow/api/v1/flows.py +++ b/src/backend/langflow/api/v1/flows.py @@ -5,6 +5,7 @@ from uuid import UUID import orjson from fastapi import APIRouter, Depends, File, HTTPException, UploadFile from fastapi.encoders import jsonable_encoder +from loguru import logger from sqlmodel import Session, select from langflow.api.utils import remove_api_keys, validate_is_component @@ -54,8 +55,11 @@ def read_flows( flows = current_user.flows flows = validate_is_component(flows) # with the session get the flows that DO NOT have a user_id - example_flows = session.exec(select(Flow).where(Flow.user_id == None)).all() - flows.extend(example_flows) + try: + example_flows = session.exec(select(Flow).where(Flow.user_id == None)).all() + flows.extend(example_flows) + except Exception as e: + logger.error(e) except Exception as e: raise HTTPException(status_code=500, detail=str(e)) from e return [jsonable_encoder(flow) for flow in flows] From e454624036c14f9a8da673903194fd9e01f79a3c Mon Sep 17 00:00:00 2001 From: Gabriel Luiz Freitas Almeida Date: Tue, 5 Mar 2024 17:46:59 -0300 Subject: [PATCH 3/4] Update user_id field to be optional in FlowRead class --- src/backend/langflow/services/database/models/flow/model.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/backend/langflow/services/database/models/flow/model.py b/src/backend/langflow/services/database/models/flow/model.py index 1211c40ed..c7ee08141 100644 --- a/src/backend/langflow/services/database/models/flow/model.py +++ b/src/backend/langflow/services/database/models/flow/model.py @@ -80,7 +80,7 @@ class FlowCreate(FlowBase): class FlowRead(FlowBase): id: UUID - user_id: UUID = Field() + user_id: Optional[UUID] = Field() class FlowUpdate(SQLModel): From 245648c8156d00859be750440b5487474c075f92 Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Tue, 5 Mar 2024 18:25:48 -0300 Subject: [PATCH 4/4] Refactor: UI changes --- .../src/CustomNodes/GenericNode/index.tsx | 3 +- .../extraSidebarComponent/utils.tsx | 3 +- .../components/nodeToolbarComponent/index.tsx | 2 +- src/frontend/src/utils/styleUtils.ts | 29 ++++++++++++------- 4 files changed, 23 insertions(+), 14 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 80e5ad0f7..ddfc04aef 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -44,6 +44,7 @@ export default function GenericNode({ const buildFlow = useFlowStore((state) => state.buildFlow); const setNode = useFlowStore((state) => state.setNode); const name = nodeIconsLucide[data.type] ? data.type : types[data.type]; + console.log(types[data.type]) const [inputName, setInputName] = useState(false); const [nodeName, setNodeName] = useState(data.node!.display_name); const [inputDescription, setInputDescription] = useState(false); @@ -157,7 +158,7 @@ export default function GenericNode({ const iconElement = data?.node?.icon; const iconColor = nodeColors[types[data.type]]; const iconName = - iconElement || (data.node?.flow ? "group_components" : name); + iconElement || (data.node?.flow ? "group_components" : name); const iconClassName = `generic-node-icon ${ !showNode ? " absolute inset-x-6 h-12 w-12 " : "" }`; diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/utils.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/utils.tsx index 6261e87bb..f8b5a0af9 100644 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/utils.tsx +++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/utils.tsx @@ -4,9 +4,10 @@ export function sortKeys(a: string, b: string) { "saved_components", "inputs", "outputs", + "prompts", "data", - "utilities", "models", + "utilities", ]; const indexA = order.indexOf(a.toLowerCase()); const indexB = order.indexOf(b.toLowerCase()); diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index 0dc36eac7..8733e4528 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -219,7 +219,7 @@ export default function NodeToolbarComponent({ }} data-testid="code-button-modal" > - + ) : ( diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts index 601066407..dc7115838 100644 --- a/src/frontend/src/utils/styleUtils.ts +++ b/src/frontend/src/utils/styleUtils.ts @@ -3,11 +3,13 @@ import { ArrowLeft, ArrowUpToLine, Bell, + Binary, BookMarked, BookmarkPlus, Bot, Boxes, Braces, + BrainCircuit, Check, CheckCircle2, ChevronDown, @@ -28,6 +30,7 @@ import { Compass, Copy, Cpu, + Database, Delete, Download, DownloadCloud, @@ -40,6 +43,7 @@ import { FileDown, FileSearch, FileSearch2, + FileSliders, FileText, FileType2, FileUp, @@ -79,12 +83,14 @@ import { MoonIcon, MoreHorizontal, Network, + Package2, Paperclip, Pencil, PencilLine, Pin, Play, Plus, + PocketKnife, Redo, RefreshCcw, Repeat, @@ -120,6 +126,7 @@ import { UserPlus2, Users2, Variable, + Wand, Wand2, Workflow, Wrench, @@ -242,7 +249,7 @@ export const nodeNames: { [char: string]: string } = { outputs: "Outputs", data: "Data", prompts: "Prompts", - models: "Language Models", + models: "Models", model_specs: "Model Specs", chains: "Chains", agents: "Agents", @@ -258,8 +265,8 @@ export const nodeNames: { [char: string]: string } = { wrappers: "Wrappers", textsplitters: "Text Splitters", retrievers: "Retrievers", - utilities: "Utilities", - langchain_utilities: "Langchain Utilities", + utilities: "Helpers", + langchain_utilities: "Utilities", output_parsers: "Output Parsers", custom_components: "Custom", unknown: "Other", @@ -268,7 +275,7 @@ export const nodeNames: { [char: string]: string } = { export const nodeIconsLucide: iconsType = { inputs: Download, outputs: Upload, - data: FolderOpen, + data: Database, AzureChatOpenAi: AzureIcon, Ollama: OllamaIcon, ChatOllama: OllamaIcon, @@ -331,27 +338,27 @@ export const nodeIconsLucide: iconsType = { VertexAIEmbeddings: VertexAIIcon, Share3: ShareIcon, Share4: Share2Icon, - agents: Rocket, + agents: Bot, Workflow, User, WikipediaAPIWrapper: SvgWikipedia, chains: Link, memories: Cpu, - models: Bot, - model_specs: Lightbulb, + models: BrainCircuit, + model_specs: FileSliders, prompts: TerminalSquare, - tools: Wrench, + tools: Hammer, advanced: Laptop2, chat: MessageCircle, - embeddings: Fingerprint, + embeddings: Binary, saved_components: GradientSave, documentloaders: Paperclip, vectorstores: Layers, - toolkits: Hammer, + toolkits: Package2, textsplitters: Scissors, wrappers: Gift, utilities: Wand2, - langchain_utilities: Wand2, + langchain_utilities: PocketKnife, WolframAlphaAPIWrapper: SvgWolfram, output_parsers: Compass, retrievers: FileSearch,