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

Merge branch 'dev' into NodeModal

Browse source
This commit is contained in:
anovazzi1 2023-04-27 20:22:21 -03:00
commit 65172707d9
37 changed files with 936 additions and 150 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/backend/langflow/config.yaml
View file

@ -6,6 +6,7 @@ chains:
- SeriesCharacterChain
- MidJourneyPromptChain
- TimeTravelGuideChain
- SQLDatabaseChain
agents:
- ZeroShotAgent
@ -40,6 +41,27 @@ tools:
- Tool
- PythonFunction
- JsonSpec
- News API
- TMDB API
- Podcast API
- QuerySQLDataBaseTool
- InfoSQLDatabaseTool
- ListSQLDatabaseTool
# - QueryCheckerTool
- BingSearchRun
- GoogleSearchRun
- GoogleSearchResults
- JsonListKeysTool
- JsonGetValueTool
- PythonREPLTool
- PythonAstREPLTool
- RequestsGetTool
- RequestsPostTool
- RequestsPatchTool
- RequestsPutTool
- RequestsDeleteTool
- WikipediaQueryRun
- WolframAlphaQueryRun
wrappers:
- RequestsWrapper
@ -91,4 +113,16 @@ documentloaders:
textsplitters:
- CharacterTextSplitter
utilities:
- BingSearchAPIWrapper
- GoogleSearchAPIWrapper
- GoogleSerperAPIWrapper
- SearxResults
- SearxSearchWrapper
- SerpAPIWrapper
- WikipediaAPIWrapper
- WolframAlphaAPIWrapper
# - ZapierNLAWrapper
- SQLDatabase
dev: false

3
src/backend/langflow/custom/customs.py
View file

@ -12,6 +12,9 @@ CUSTOM_NODES = {
"VectorStoreRouterAgent": nodes.VectorStoreRouterAgentNode(),
"SQLAgent": nodes.SQLAgentNode(),
},
"utilities": {
"SQLDatabase": nodes.SQLDatabaseNode(),
},
}

6
src/backend/langflow/graph/base.py
View file

@ -202,7 +202,11 @@ class Node:
"VectorStoreRouterAgent",
"VectorStoreAgent",
"VectorStoreInfo",
] or self.node_type in ["VectorStoreInfo", "VectorStoreRouterToolkit"]:
] or self.node_type in [
"VectorStoreInfo",
"VectorStoreRouterToolkit",
"SQLDatabase",
]:
return self._built_object
return deepcopy(self._built_object)

4
src/backend/langflow/graph/nodes.py
View file

@ -101,6 +101,10 @@ class ChainNode(Node):
self.params[key] = value.build(tools=tools, force=force)
self._build()
#! Cannot deepcopy SQLDatabaseChain
if self.node_type in ["SQLDatabaseChain"]:
return self._built_object
return deepcopy(self._built_object)

8
src/backend/langflow/interface/custom_lists.py
View file

@ -9,10 +9,12 @@ from langchain import (
memory,
requests,
text_splitter,
utilities,
vectorstores,
)
from langchain.agents import agent_toolkits
from langchain.chat_models import ChatOpenAI
from langchain.sql_database import SQLDatabase
from langflow.interface.importing.utils import import_class
@ -76,3 +78,9 @@ documentloaders_type_to_cls_dict: dict[str, Any] = {
textsplitter_type_to_cls_dict: dict[str, Any] = dict(
inspect.getmembers(text_splitter, inspect.isclass)
)
## Utilities
utility_type_to_cls_dict: dict[str, Any] = dict(
inspect.getmembers(utilities, inspect.isclass)
)
utility_type_to_cls_dict["SQLDatabase"] = SQLDatabase

13
src/backend/langflow/interface/importing/utils.py
View file

@ -10,7 +10,7 @@ from langchain.chat_models.base import BaseChatModel
from langchain.llms.base import BaseLLM
from langchain.tools import BaseTool
from langflow.interface.tools.util import get_tool_by_name
from langflow.interface.tools.base import tool_creator
def import_module(module_path: str) -> Any:
@ -44,6 +44,7 @@ def import_by_type(_type: str, name: str) -> Any:
"vectorstores": import_vectorstore,
"documentloaders": import_documentloader,
"textsplitters": import_textsplitter,
"utilities": import_utility,
}
if _type == "llms":
key = "chat" if "chat" in name.lower() else "llm"
@ -107,7 +108,7 @@ def import_llm(llm: str) -> BaseLLM:
def import_tool(tool: str) -> BaseTool:
"""Import tool from tool name"""
return get_tool_by_name(tool)
return tool_creator.type_to_loader_dict[tool]["fcn"]
def import_chain(chain: str) -> Type[Chain]:
@ -131,10 +132,16 @@ def import_vectorstore(vectorstore: str) -> Any:
def import_documentloader(documentloader: str) -> Any:
"""Import documentloader from documentloader name"""
return import_class(f"langchain.document_loaders.{documentloader}")
def import_textsplitter(textsplitter: str) -> Any:
"""Import textsplitter from textsplitter name"""
return import_class(f"langchain.text_splitter.{textsplitter}")
def import_utility(utility: str) -> Any:
"""Import utility from utility name"""
if utility == "SQLDatabase":
return import_class(f"langchain.sql_database.{utility}")
return import_class(f"langchain.utilities.{utility}")

2
src/backend/langflow/interface/listing.py
View file

@ -8,6 +8,7 @@ from langflow.interface.prompts.base import prompt_creator
from langflow.interface.text_splitters.base import textsplitter_creator
from langflow.interface.toolkits.base import toolkits_creator
from langflow.interface.tools.base import tool_creator
from langflow.interface.utilities.base import utility_creator
from langflow.interface.vector_store.base import vectorstore_creator
from langflow.interface.wrappers.base import wrapper_creator
@ -26,6 +27,7 @@ def get_type_dict():
"vectorStore": vectorstore_creator.to_list(),
"embeddings": embedding_creator.to_list(),
"textSplitters": textsplitter_creator.to_list(),
"utilities": utility_creator.to_list(),
}

16
src/backend/langflow/interface/loading.py
View file

@ -68,6 +68,13 @@ def instantiate_class(node_type: str, base_type: str, params: Dict) -> Any:
params.pop("model")
return class_object(**params)
elif base_type == "vectorstores":
if len(params.get("documents", [])) == 0:
# Error when the pdf or other source was not correctly
# loaded.
raise ValueError(
"The source you provided did not load correctly or was empty."
"This may cause an error in the vectorstore."
)
return class_object.from_documents(**params)
elif base_type == "documentloaders":
return class_object(**params).load()
@ -75,16 +82,19 @@ def instantiate_class(node_type: str, base_type: str, params: Dict) -> Any:
documents = params.pop("documents")
text_splitter = class_object(**params)
return text_splitter.split_documents(documents)
elif base_type == "utilities":
if node_type == "SQLDatabase":
return class_object.from_uri(params.pop("uri"))
return class_object(**params)
def load_flow_from_json(path: str):
def load_flow_from_json(path: str, build=True):
# This is done to avoid circular imports
from langflow.graph import Graph
"""Load flow from json file"""
with open(path, "r") as f:
with open(path, "r", encoding="utf-8") as f:
flow_graph = json.load(f)
data_graph = flow_graph["data"]
nodes = data_graph["nodes"]
@ -96,7 +106,7 @@ def load_flow_from_json(path: str):
# Nodes, edges and root node
edges = data_graph["edges"]
graph = Graph(nodes, edges)
return graph.build()
return graph.build() if build else graph
def replace_zero_shot_prompt_with_prompt_template(nodes):

5
src/backend/langflow/interface/run.py
View file

@ -1,6 +1,7 @@
import contextlib
import io
from typing import Any, Dict
from chromadb.errors import NotEnoughElementsException
from langflow.cache.utils import compute_dict_hash, load_cache, memoize_dict
from langflow.graph.graph import Graph
@ -230,6 +231,10 @@ def get_result_and_thought_using_graph(langchain_object, message: str):
else:
thought = output_buffer.getvalue()
except NotEnoughElementsException as exc:
raise ValueError(
"Error: Not enough documents for ChromaDB to index. Try reducing chunk size in TextSplitter."
) from exc
except Exception as exc:
raise ValueError(f"Error: {str(exc)}") from exc
return result, thought

111
src/backend/langflow/interface/tools/base.py
View file

@ -1,7 +1,6 @@
from typing import Dict, List, Optional
from langchain.agents.load_tools import (
_BASE_TOOLS,
_EXTRA_LLM_TOOLS,
_EXTRA_OPTIONAL_TOOLS,
_LLM_TOOLS,
@ -10,17 +9,16 @@ from langchain.agents.load_tools import (
from langflow.custom import customs
from langflow.interface.base import LangChainTypeCreator
from langflow.interface.tools.constants import (
ALL_TOOLS_NAMES,
CUSTOM_TOOLS,
FILE_TOOLS,
OTHER_TOOLS,
)
from langflow.interface.tools.util import (
get_tool_by_name,
get_tool_params,
get_tools_dict,
)
from langflow.interface.tools.util import get_tool_params
from langflow.settings import settings
from langflow.template.base import Template, TemplateField
from langflow.utils import util
from langflow.utils.util import build_template_from_class
TOOL_INPUTS = {
"str": TemplateField(
@ -66,64 +64,81 @@ class ToolCreator(LangChainTypeCreator):
@property
def type_to_loader_dict(self) -> Dict:
if self.tools_dict is None:
self.tools_dict = get_tools_dict()
all_tools = {}
for tool, tool_fcn in ALL_TOOLS_NAMES.items():
tool_params = get_tool_params(tool_fcn)
tool_name = tool_params.get("name", tool)
if tool_name in settings.tools or settings.dev:
if tool_name == "JsonSpec":
tool_params["path"] = tool_params.pop("dict_") # type: ignore
all_tools[tool_name] = {
"type": tool,
"params": tool_params,
"fcn": tool_fcn,
}
self.tools_dict = all_tools
return self.tools_dict
def get_signature(self, name: str) -> Optional[Dict]:
"""Get the signature of a tool."""
base_classes = ["Tool"]
all_tools = {}
for tool in self.type_to_loader_dict.keys():
tool_fcn = get_tool_by_name(tool)
if tool_params := get_tool_params(tool_fcn):
tool_name = tool_params.get("name") or str(tool)
all_tools[tool_name] = {
"type": tool,
"params": tool_params,
"fcn": tool_fcn,
}
fields = []
params = []
tool_params = {}
# Raise error if name is not in tools
if name not in all_tools.keys():
if name not in self.type_to_loader_dict.keys():
raise ValueError("Tool not found")
tool_type: str = all_tools[name]["type"] # type: ignore
tool_type: str = self.type_to_loader_dict[name]["type"] # type: ignore
if all_tools[tool_type]["fcn"] in _BASE_TOOLS.values():
params = []
elif all_tools[tool_type]["fcn"] in _LLM_TOOLS.values():
# if tool_type in _BASE_TOOLS.keys():
# params = []
if tool_type in _LLM_TOOLS.keys():
params = ["llm"]
elif all_tools[tool_type]["fcn"] in [
val[0] for val in _EXTRA_LLM_TOOLS.values()
]:
n_dict = {val[0]: val[1] for val in _EXTRA_LLM_TOOLS.values()}
extra_keys = n_dict[all_tools[tool_type]["fcn"]]
elif tool_type in _EXTRA_LLM_TOOLS.keys():
extra_keys = _EXTRA_LLM_TOOLS[tool_type][1]
params = ["llm"] + extra_keys
elif all_tools[tool_type]["fcn"] in [
val[0] for val in _EXTRA_OPTIONAL_TOOLS.values()
]:
n_dict = {val[0]: val[1] for val in _EXTRA_OPTIONAL_TOOLS.values()} # type: ignore
extra_keys = n_dict[all_tools[tool_type]["fcn"]]
elif tool_type in _EXTRA_OPTIONAL_TOOLS.keys():
extra_keys = _EXTRA_OPTIONAL_TOOLS[tool_type][1]
params = extra_keys
# elif tool_type == "Tool":
# params = ["name", "description", "func"]
elif tool_type in CUSTOM_TOOLS:
# Get custom tool params
params = all_tools[name]["params"] # type: ignore
params = self.type_to_loader_dict[name]["params"] # type: ignore
base_classes = ["function"]
if node := customs.get_custom_nodes("tools").get(tool_type):
return node
elif tool_type in FILE_TOOLS:
params = all_tools[name]["params"] # type: ignore
if tool_type == "JsonSpec":
params["path"] = params.pop("dict_") # type: ignore
params = self.type_to_loader_dict[name]["params"] # type: ignore
base_classes += [name]
else:
params = []
elif tool_type in OTHER_TOOLS:
print(tool_type)
tool_dict = build_template_from_class(tool_type, OTHER_TOOLS)
fields = tool_dict["template"]
# Pop unnecessary fields and add name
fields.pop("_type") # type: ignore
fields.pop("return_direct") # type: ignore
fields.pop("verbose") # type: ignore
tool_params = {
"name": fields.pop("name")["value"], # type: ignore
"description": fields.pop("description")["value"], # type: ignore
}
fields = [
TemplateField(name=name, field_type=field["type"], **field)
for name, field in fields.items() # type: ignore
]
base_classes += tool_dict["base_classes"]
# Copy the field and add the name
fields = []
for param in params:
field = TOOL_INPUTS.get(param, TOOL_INPUTS["str"]).copy()
field.name = param
@ -134,7 +149,7 @@ class ToolCreator(LangChainTypeCreator):
template = Template(fields=fields, type_name=tool_type)
tool_params = all_tools[name]["params"]
tool_params = {**tool_params, **self.type_to_loader_dict[name]["params"]}
return {
"template": util.format_dict(template.to_dict()),
**tool_params,
@ -144,21 +159,7 @@ class ToolCreator(LangChainTypeCreator):
def to_list(self) -> List[str]:
"""List all load tools"""
tools = []
for tool, fcn in get_tools_dict().items():
tool_params = get_tool_params(fcn)
if tool_params and not tool_params.get("name"):
tool_params["name"] = tool
if tool_params and (
tool_params.get("name") in settings.tools
or (tool_params.get("name") and settings.dev)
):
tools.append(tool_params["name"])
return tools
return list(self.type_to_loader_dict.keys())
tool_creator = ToolCreator()

41
src/backend/langflow/interface/tools/constants.py
View file

@ -5,12 +5,50 @@ from langchain.agents.load_tools import (
_EXTRA_OPTIONAL_TOOLS,
_LLM_TOOLS,
)
from langchain.tools.json.tool import JsonSpec
from langchain.tools.bing_search.tool import BingSearchRun
from langchain.tools.google_search.tool import GoogleSearchResults, GoogleSearchRun
from langchain.tools.json.tool import JsonGetValueTool, JsonListKeysTool, JsonSpec
from langchain.tools.python.tool import PythonAstREPLTool, PythonREPLTool
from langchain.tools.requests.tool import (
RequestsDeleteTool,
RequestsGetTool,
RequestsPatchTool,
RequestsPostTool,
RequestsPutTool,
)
from langchain.tools.sql_database.tool import (
InfoSQLDatabaseTool,
ListSQLDatabaseTool,
QueryCheckerTool,
QuerySQLDataBaseTool,
)
from langchain.tools.wikipedia.tool import WikipediaQueryRun
from langchain.tools.wolfram_alpha.tool import WolframAlphaQueryRun
from langflow.interface.tools.custom import PythonFunction
FILE_TOOLS = {"JsonSpec": JsonSpec}
CUSTOM_TOOLS = {"Tool": Tool, "PythonFunction": PythonFunction}
OTHER_TOOLS = {
"QuerySQLDataBaseTool": QuerySQLDataBaseTool,
"InfoSQLDatabaseTool": InfoSQLDatabaseTool,
"ListSQLDatabaseTool": ListSQLDatabaseTool,
"QueryCheckerTool": QueryCheckerTool,
"BingSearchRun": BingSearchRun,
"GoogleSearchRun": GoogleSearchRun,
"GoogleSearchResults": GoogleSearchResults,
"JsonListKeysTool": JsonListKeysTool,
"JsonGetValueTool": JsonGetValueTool,
"PythonREPLTool": PythonREPLTool,
"PythonAstREPLTool": PythonAstREPLTool,
"RequestsGetTool": RequestsGetTool,
"RequestsPostTool": RequestsPostTool,
"RequestsPatchTool": RequestsPatchTool,
"RequestsPutTool": RequestsPutTool,
"RequestsDeleteTool": RequestsDeleteTool,
"WikipediaQueryRun": WikipediaQueryRun,
"WolframAlphaQueryRun": WolframAlphaQueryRun,
}
ALL_TOOLS_NAMES = {
**_BASE_TOOLS,
**_LLM_TOOLS, # type: ignore
@ -18,4 +56,5 @@ ALL_TOOLS_NAMES = {
**{k: v[0] for k, v in _EXTRA_OPTIONAL_TOOLS.items()},
**CUSTOM_TOOLS,
**FILE_TOOLS, # type: ignore
**OTHER_TOOLS,
}

25
src/backend/langflow/interface/tools/util.py
View file

@ -4,29 +4,6 @@ from typing import Dict, Union
from langchain.agents.tools import Tool
from langflow.interface.tools.constants import ALL_TOOLS_NAMES
def get_tools_dict():
"""Get the tools dictionary."""
all_tools = {}
for tool, fcn in ALL_TOOLS_NAMES.items():
if tool_params := get_tool_params(fcn):
tool_name = tool_params.get("name") or str(tool)
all_tools[tool_name] = fcn
return all_tools
def get_tool_by_name(name: str):
"""Get a tool from the tools dictionary."""
tools = get_tools_dict()
if name not in tools:
raise ValueError(f"{name} not found.")
return tools[name]
def get_func_tool_params(func, **kwargs) -> Union[Dict, None]:
tree = ast.parse(inspect.getsource(func))
@ -113,6 +90,8 @@ def get_tool_params(tool, **kwargs) -> Dict:
elif inspect.isclass(tool):
# Get the parameters necessary to
# instantiate the class
return get_class_tool_params(tool, **kwargs) or {}
else:
raise ValueError("Tool must be a function or class.")

2
src/backend/langflow/interface/types.py
View file

@ -8,6 +8,7 @@ from langflow.interface.prompts.base import prompt_creator
from langflow.interface.text_splitters.base import textsplitter_creator
from langflow.interface.toolkits.base import toolkits_creator
from langflow.interface.tools.base import tool_creator
from langflow.interface.utilities.base import utility_creator
from langflow.interface.vector_store.base import vectorstore_creator
from langflow.interface.wrappers.base import wrapper_creator
@ -42,6 +43,7 @@ def build_langchain_types_dict(): # sourcery skip: dict-assign-update-to-union
vectorstore_creator,
documentloader_creator,
textsplitter_creator,
utility_creator,
]
all_types = {}

0
src/backend/langflow/interface/utilities/__init__.py Normal file
View file

39
src/backend/langflow/interface/utilities/base.py Normal file
View file

@ -0,0 +1,39 @@
from typing import Dict, List, Optional
from langflow.custom.customs import get_custom_nodes
from langflow.interface.base import LangChainTypeCreator
from langflow.interface.custom_lists import utility_type_to_cls_dict
from langflow.settings import settings
from langflow.utils.logger import logger
from langflow.utils.util import build_template_from_class
class UtilityCreator(LangChainTypeCreator):
type_name: str = "utilities"
@property
def type_to_loader_dict(self) -> Dict:
return utility_type_to_cls_dict
def get_signature(self, name: str) -> Optional[Dict]:
"""Get the signature of a utility."""
try:
if name in get_custom_nodes(self.type_name).keys():
return get_custom_nodes(self.type_name)[name]
return build_template_from_class(name, utility_type_to_cls_dict)
except ValueError as exc:
raise ValueError(f"Utility {name} not found") from exc
except AttributeError as exc:
logger.error(f"Utility {name} not loaded: {exc}")
return None
def to_list(self) -> List[str]:
return [
utility.__name__
for utility in self.type_to_loader_dict.values()
if utility.__name__ in settings.utilities or settings.dev
]
utility_creator = UtilityCreator()

2
src/backend/langflow/settings.py
View file

@ -18,6 +18,7 @@ class Settings(BaseSettings):
wrappers: List[str] = []
toolkits: List[str] = []
textsplitters: List[str] = []
utilities: List[str] = []
dev: bool = False
class Config:
@ -42,6 +43,7 @@ class Settings(BaseSettings):
self.wrappers = new_settings.wrappers or []
self.toolkits = new_settings.toolkits or []
self.textsplitters = new_settings.textsplitters or []
self.utilities = new_settings.utilities or []
self.dev = new_settings.dev or False

23
src/backend/langflow/template/nodes.py
View file

@ -256,6 +256,29 @@ class CSVAgentNode(FrontendNode):
return super().to_dict()
class SQLDatabaseNode(FrontendNode):
name: str = "SQLDatabase"
template: Template = Template(
type_name="sql_database",
fields=[
TemplateField(
field_type="str",
required=True,
is_list=False,
show=True,
multiline=False,
value="",
name="uri",
),
],
)
description: str = """SQLAlchemy wrapper around a database."""
base_classes: list[str] = ["SQLDatabase"]
def to_dict(self):
return super().to_dict()
class VectorStoreAgentNode(FrontendNode):
name: str = "VectorStoreAgent"
template: Template = Template(

9
src/frontend/package-lock.json generated
View file

@ -14,6 +14,7 @@
"@heroicons/react": "^2.0.15",
"@mui/material": "^5.11.9",
"@tailwindcss/forms": "^0.5.3",
"@tailwindcss/line-clamp": "^0.4.4",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
@ -3930,6 +3931,14 @@
"tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
}
},
"node_modules/@tailwindcss/line-clamp": {
"version": "0.4.4",
"resolved": "https://registry.npmjs.org/@tailwindcss/line-clamp/-/line-clamp-0.4.4.tgz",
"integrity": "sha512-5U6SY5z8N42VtrCrKlsTAA35gy2VSyYtHWCsg1H87NU1SXnEfekTVlrga9fzUDrrHcGi2Lb5KenUWb4lRQT5/g==",
"peerDependencies": {
"tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
}
},
"node_modules/@testing-library/dom": {
"version": "8.20.0",
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.0.tgz",

3
src/frontend/package.json
View file

@ -9,6 +9,7 @@
"@heroicons/react": "^2.0.15",
"@mui/material": "^5.11.9",
"@tailwindcss/forms": "^0.5.3",
"@tailwindcss/line-clamp": "^0.4.4",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
@ -60,4 +61,4 @@
]
},
"proxy": "http://backend:7860"
}
}

5
src/frontend/src/components/TooltipComponent/index.tsx
View file

@ -1,6 +1,7 @@
import { ReactElement } from "react";
import { LightTooltip } from "../LightTooltipComponent";
import { TooltipComponentType } from "../../types/components";
export default function Tooltip({ children, title }:{children:ReactElement,title:string}) {
return <LightTooltip title={title} arrow>{children}</LightTooltip>;
export default function Tooltip({ children, title,placement }:TooltipComponentType) {
return <LightTooltip placement={placement} title={title} arrow>{children}</LightTooltip>;
}

1
src/frontend/src/components/loadingComponent/index.tsx
View file

@ -10,6 +10,7 @@ export default function LoadingComponent({remSize}:LoadingComponentProps){
<path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
<path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
</svg>
<br></br>
<span className="animate-pulse text-blue-600 text-lg">Loading...</span>
</div>
)

2
src/frontend/src/contexts/tabsContext.tsx
View file

@ -144,7 +144,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
// Create a new flow with a default name if no flow is provided.
let newFlow: FlowType = {
description,
name: "New Flow",
name: flow?.name??"New Flow",
id: id.toString(),
data,
chat: flow ? flow.chat : [],

21
src/frontend/src/controllers/API/index.ts
View file

@ -1,6 +1,7 @@
import { PromptTypeAPI, errorsTypeAPI } from './../../types/api/index';
import { APIObjectType, sendAllProps } from '../../types/api/index';
import axios, { AxiosResponse } from "axios";
import { FlowType } from '../../types/flow';
export async function getAll():Promise<AxiosResponse<APIObjectType>> {
return await axios.get(`/all`);
@ -18,4 +19,22 @@ export async function checkCode(code:string):Promise<AxiosResponse<errorsTypeAPI
export async function checkPrompt(template:string):Promise<AxiosResponse<PromptTypeAPI>>{
return await axios.post('/validate/prompt',{template})
}
}
export async function getExamples(): Promise<FlowType[]> {
const url = 'https://api.github.com/repos/logspace-ai/langflow_examples/contents/examples';
const response = await axios.get(url);
const jsonFiles = response.data.filter((file: any) => {
return file.name.endsWith('.json');
});
const contentsPromises = jsonFiles.map(async (file: any) => {
const contentResponse = await axios.get(file.download_url);
return contentResponse.data;
});
const contents = await Promise.all(contentsPromises);
return contents;
}

114
src/frontend/src/modals/importModal/buttonBox/index.tsx
View file

@ -1,6 +1,7 @@
import React, { ReactNode } from "react";
import { DocumentDuplicateIcon } from "@heroicons/react/solid";
import { classNames } from "../../../utils";
import Tooltip from "../../../components/TooltipComponent";
export default function ButtonBox({
onClick,
@ -9,7 +10,8 @@ export default function ButtonBox({
icon,
bgColor,
textColor,
deactivate
deactivate,
size,
}: {
onClick: () => void;
title: string;
@ -17,31 +19,103 @@ export default function ButtonBox({
icon: ReactNode;
bgColor: string;
textColor: string;
deactivate?:boolean;
deactivate?: boolean;
size: "small" | "medium" | "big";
}) {
let bigCircle: string;
let smallCircle: string;
let titleFontSize: string;
let descriptionFontSize: string;
let padding: string;
let marginTop: string;
let height: string;
let widht: string;
switch (size) {
case "small":
bigCircle = "h-12 w-12";
smallCircle = "h-8 w-8";
titleFontSize = "text-sm";
descriptionFontSize = "text-xs";
padding = "p-2";
marginTop = "mt-2";
height = "h-36";
widht = "w-32";
break;
case "medium":
bigCircle = "h-16 w-16";
smallCircle = "h-12 w-12";
titleFontSize = "text-base";
descriptionFontSize = "text-sm";
padding = "p-4";
marginTop = "mt-3";
height = "h-44";
widht = "w-36";
break;
case "big":
bigCircle = "h-20 w-20";
smallCircle = "h-16 w-16";
titleFontSize = "text-lg";
descriptionFontSize = "text-sm";
padding = "p-8";
marginTop = "mt-6";
height = "h-56";
widht = "w-44";
break;
default:
bigCircle = "h-20 w-20";
smallCircle = "h-16 w-16";
titleFontSize = "text-lg";
descriptionFontSize = "text-sm";
padding = "p-8";
marginTop = "mt-6";
height = "h-56";
widht = "w-44";
break;
}
return (
<button disabled={deactivate} onClick={onClick}>
<div
className={classNames(
"col-span-1 flex flex-col divide-y divide-gray-200 rounded-lg text-center shadow border border-gray-300 hover:shadow-lg transform hover:scale-105",
bgColor
)}
>
<div className="flex flex-1 flex-col p-8">
<div className="mx-auto flex items-center justify-center h-20 w-20 bg-white/30 rounded-full">
<div className="mx-auto flex items-center justify-center h-16 w-16 bg-white rounded-full">
<div className={textColor}>
{icon}
</div>
<Tooltip title={description} placement="bottom">
<div
className={classNames(
"col-span-1 flex flex-col divide-y divide-gray-200 rounded-lg text-center shadow border border-gray-300 hover:shadow-lg transform hover:scale-105",
bgColor,
height,
widht
)}
>
<div className={`flex flex-1 flex-col ${padding}`}>
<div
className={`mx-auto flex items-center justify-center ${bigCircle} bg-white/30 rounded-full`}
>
<div
className={`mx-auto flex items-center justify-center ${smallCircle} bg-white rounded-full`}
>
<div className={textColor}>{icon}</div>
</div>
</div>
<h3
className={classNames(
"font-semibold text-white",
titleFontSize,
marginTop
)}
>
{title}
</h3>
<div className="mt-1 flex flex-grow flex-col justify-between">
<dt className="sr-only">{title}</dt>
{/* <dd
className={classNames(
"text-gray-100 line-clamp-2",
descriptionFontSize
)}
>
{deactivate ? "Coming soon" : description}
</dd> */}
</div>
</div>
<h3 className="mt-6 text-lg font-semibold text-white">{title}</h3>
<div className="mt-1 flex flex-grow flex-col justify-between">
<dt className="sr-only">{title}</dt>
<dd className="text-sm text-gray-100">{deactivate? "Coming soon":description}</dd>
</div>
</div>
</div>
</Tooltip>
</button>
);
}

163
src/frontend/src/modals/importModal/index.tsx
View file

@ -3,19 +3,30 @@ import {
XMarkIcon,
ArrowDownTrayIcon,
DocumentDuplicateIcon,
ComputerDesktopIcon,
ComputerDesktopIcon,
ArrowUpTrayIcon,
ArrowLeftIcon,
} from "@heroicons/react/24/outline";
import { Fragment, useContext, useRef, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext";
import { TabsContext } from "../../contexts/tabsContext";
import ButtonBox from "./buttonBox";
import { getExamples } from "../../controllers/API";
import { error } from "console";
import { alertContext } from "../../contexts/alertContext";
import LoadingComponent from "../../components/loadingComponent";
import { FlowType } from "../../types/flow";
import { classNames } from "../../utils";
export default function ImportModal() {
const [open, setOpen] = useState(true);
const { setErrorData } = useContext(alertContext);
const { closePopUp } = useContext(PopUpContext);
const ref = useRef();
const {uploadFlow} = useContext(TabsContext)
const [showExamples, setShowExamples] = useState(false);
const [loadingExamples, setLoadingExamples] = useState(false);
const [examples, setExamples] = useState<FlowType[]>([]);
const { uploadFlow, addFlow } = useContext(TabsContext);
function setModalOpen(x: boolean) {
setOpen(x);
if (x === false) {
@ -24,6 +35,22 @@ export default function ImportModal() {
}, 300);
}
}
function handleExamples() {
setLoadingExamples(true);
getExamples()
.then((result) => {
setLoadingExamples(false);
setExamples(result);
})
.catch((error) =>
setErrorData({
title: "there was an error loading examples, please try again",
list: [error.message],
})
);
}
return (
<Transition.Root show={open} appear={true} as={Fragment}>
<Dialog
@ -68,6 +95,41 @@ export default function ImportModal() {
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
</button>
</div>
{showExamples && (
<>
<div className="z-50 absolute top-2 left-0 hidden pt-4 pl-4 sm:block">
<button
type="button"
className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
onClick={() => {
setShowExamples(false);
}}
>
<span className="sr-only">Close</span>
<ArrowLeftIcon className="h-6 w-6" aria-hidden="true" />
</button>
</div>
<div className="z-50 absolute bottom-2 left-0 hidden pt-4 pl-2 sm:block">
<a
href="https://github.com/logspace-ai/langflow_examples"
target="_blank"
>
<svg
width="24"
viewBox="0 0 98 96"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
fill="#24292f"
/>
</svg>
</a>
</div>
</>
)}
<div className="h-full w-full flex flex-col justify-center items-center">
<div className="flex w-full pb-4 z-10 justify-center shadow-sm">
<div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
@ -81,36 +143,81 @@ export default function ImportModal() {
as="h3"
className="text-lg font-medium dark:text-white leading-10 text-gray-900"
>
Import from
{showExamples ?"Select an example":"Import from"}
</Dialog.Title>
</div>
</div>
<div className="h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
<div className="flex h-full w-full justify-evenly items-center">
<ButtonBox
deactivate
bgColor="bg-slate-400"
description="Prebuilt Examples"
icon={
<DocumentDuplicateIcon className="h-10 w-10 flex-shrink-0" />
}
onClick={() => console.log("sdsds")}
textColor="text-slate-400"
title="Examples"
></ButtonBox>
<ButtonBox
bgColor="bg-blue-500"
description="Import from Local"
icon={
<ComputerDesktopIcon className="h-10 w-10 flex-shrink-0" />
}
onClick={() => {uploadFlow();setModalOpen(false)}}
textColor="text-blue-500"
title="Local file"
></ButtonBox>
</div>
<div
className={classNames(
"h-full w-full bg-gray-200 dark:bg-gray-900 gap-4",
showExamples && !loadingExamples
? "flex flex-row start justify-start items-start p-9 flex-wrap overflow-auto"
: "flex flex-row justify-center items-center p-4"
)}
>
{!showExamples && (
<div className="flex h-full w-full justify-evenly items-center">
<ButtonBox
size="big"
bgColor="bg-emerald-500"
description="Prebuilt Examples"
icon={
<DocumentDuplicateIcon className="h-10 w-10 flex-shrink-0" />
}
onClick={() => {
setShowExamples(true);
handleExamples();
}}
textColor="text-emerald-400"
title="Examples"
></ButtonBox>
<ButtonBox
size="big"
bgColor="bg-blue-500"
description="Import from Local"
icon={
<ComputerDesktopIcon className="h-10 w-10 flex-shrink-0" />
}
onClick={() => {
uploadFlow();
setModalOpen(false);
}}
textColor="text-blue-500"
title="Local file"
></ButtonBox>
</div>
)}
{showExamples && loadingExamples && (
<div className="flex align-middle justify-center items-center">
<LoadingComponent remSize={30} />
</div>
)}
{showExamples &&
!loadingExamples &&
examples.map((example, index) => {
return (
<div id="index">
{" "}
<ButtonBox
size="small"
bgColor="bg-emerald-500"
description={
example.description ?? "Prebuilt Examples"
}
icon={
<DocumentDuplicateIcon className="h-6 w-6 flex-shrink-0" />
}
onClick={() => {
addFlow(example);
setModalOpen(false);
}}
textColor="text-emerald-400"
title={example.name}
></ButtonBox>
</div>
);
})}
</div>
</div>
</Dialog.Panel>
</Transition.Child>

3
src/frontend/src/pages/FlowPage/components/tabComponent/index.tsx
View file

@ -18,7 +18,8 @@ export default function TabComponent({ selected, flow, onClick }:{flow:FlowType,
className="dark:text-white flex justify-between select-none truncate w-44 items-center px-4 my-1.5 border-x border-x-gray-300 dark:border-x-gray-600 -ml-px"
onClick={onClick}
>
{flow.name}
<span className="w-32 truncate text-left">{flow.name}</span>
<button
onClick={(e) => {
e.stopPropagation();

8
src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
View file

@ -60,18 +60,18 @@ export default function TabsManagerComponent() {
/>
)
}
className="flex items-center gap-1 pr-2 border-gray-400 border-r text-sm text-gray-400 hover:text-gray-500"
className="flex items-center gap-1 pr-2 border-gray-400 border-r text-sm text-gray-600 hover:text-gray-500"
>
Import <ArrowUpTrayIcon className="w-5 h-5" />
</button>
<button
onClick={() =>openPopUp(<ExportModal/>)}
className="flex items-center gap-1 mr-2 text-sm text-gray-400 hover:text-gray-500"
className="flex items-center gap-1 mr-2 text-sm text-gray-600 hover:text-gray-500"
>
Export <ArrowDownTrayIcon className="h-5 w-5" />
</button>
<button
className="text-gray-400 hover:text-gray-500 "
className="text-gray-600 hover:text-gray-500 "
onClick={() => {
setDark(!dark);
}}
@ -83,7 +83,7 @@ export default function TabsManagerComponent() {
)}
</button>
<button
className="text-gray-400 hover:text-gray-500 relative"
className="text-gray-600 hover:text-gray-500 relative"
onClick={(event: React.MouseEvent<HTMLElement>) => {
setNotificationCenter(false);
const top = (event.target as Element).getBoundingClientRect().top;

14
src/frontend/src/types/components/index.ts
View file

@ -65,3 +65,17 @@ export type FloatComponentType = {
disabled?: boolean;
onChange: (value: string) => void;
};
export type TooltipComponentType={children:ReactElement,title:string,placement?:
| 'bottom-end'
| 'bottom-start'
| 'bottom'
| 'left-end'
| 'left-start'
| 'left'
| 'right-end'
| 'right-start'
| 'right'
| 'top-end'
| 'top-start'
| 'top';}

2
src/frontend/src/types/tabs/index.ts
View file

@ -6,7 +6,7 @@ export type TabsContextType = {
setTabIndex: (index: number) => void;
flows: Array<FlowType>;
removeFlow: (id: string) => void;
addFlow: (flowData?: any) => void;
addFlow: (flowData?: FlowType) => void;
updateFlow: (newFlow: FlowType) => void;
incrementNodeId: () => number;
downloadFlow: (flow:FlowType) => void;

6
src/frontend/src/utils.ts
View file

@ -13,7 +13,8 @@ import {
QuestionMarkCircleIcon,
FingerPrintIcon,
ScissorsIcon,
CircleStackIcon
CircleStackIcon,
Squares2X2Icon
} from "@heroicons/react/24/outline";
import { Connection, Edge, Node, ReactFlowInstance } from "reactflow";
import { FlowType } from "./types/flow";
@ -85,6 +86,7 @@ export const nodeColors: {[char: string]: string} = {
textsplitters: "#B47CB5",
toolkits:"#DB2C2C",
wrappers:"#E6277A",
utilities:"#31A3CC",
unknown:"#9CA3AF"
};
@ -103,6 +105,7 @@ export const nodeNames:{[char: string]: string} = {
toolkits:"Toolkits",
wrappers:"Wrappers",
textsplitters: "Text Splitters",
utilities:"Utilities",
unknown:"Unknown"
};
@ -121,6 +124,7 @@ export const nodeIcons:{[char: string]: React.ForwardRefExoticComponent<React.SV
toolkits:WrenchScrewdriverIcon,
textsplitters:ScissorsIcon,
wrappers:GiftIcon,
utilities:Squares2X2Icon,
unknown:QuestionMarkCircleIcon
};

2
src/frontend/tailwind.config.js
View file

@ -40,6 +40,6 @@ module.exports = {
}
}
)
})
}),require('@tailwindcss/line-clamp')
],
}