From b8c95fb7ec47ef3f47d7222aee4f2ab1fdc20580 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Tue, 9 May 2023 16:56:05 -0300 Subject: [PATCH 01/12] Get data from Validate Nodes and display it on Tooltip --- src/backend/langflow/api/validate.py | 7 ++-- .../src/CustomNodes/GenericNode/index.tsx | 39 +++++++++++++------ .../src/components/inputComponent/index.tsx | 2 +- .../components/textAreaComponent/index.tsx | 2 +- .../components/tabsManagerComponent/index.tsx | 8 ++-- src/frontend/src/types/components/index.ts | 4 +- 6 files changed, 39 insertions(+), 23 deletions(-) diff --git a/src/backend/langflow/api/validate.py b/src/backend/langflow/api/validate.py index 36b954f95..0926ab16b 100644 --- a/src/backend/langflow/api/validate.py +++ b/src/backend/langflow/api/validate.py @@ -10,6 +10,7 @@ from langflow.api.base import ( from langflow.interface.run import build_graph from langflow.utils.logger import logger from langflow.utils.validate import validate_code +import json # build router router = APIRouter(prefix="/validate", tags=["validate"]) @@ -46,8 +47,8 @@ def post_validate_node(node_id: str, data: dict): node = graph.get_node(node_id) if node is not None: _ = node.build() - return str(node.params) - raise Exception(f"Node {node_id} not found") + return json.dumps({'valid': True, 'params': str(node.params)}) + else: + return json.dumps({'valid': False}) except Exception as e: logger.error(e) - raise HTTPException(status_code=500, detail=str(e)) from e diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index cc6738dcb..da55e690c 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -1,4 +1,4 @@ -import { Cog6ToothIcon, TrashIcon } from "@heroicons/react/24/outline"; +import { BugAntIcon, Cog6ToothIcon, ExclamationCircleIcon, InformationCircleIcon, TrashIcon } from "@heroicons/react/24/outline"; import { classNames, nodeColors, @@ -7,7 +7,7 @@ import { } from "../../utils"; import ParameterComponent from "./components/parameterComponent"; import { typesContext } from "../../contexts/typesContext"; -import { useContext, useState, useEffect, useRef } from "react"; +import { useContext, useState, useEffect, useRef, Fragment } from "react"; import { NodeDataType } from "../../types/flow"; import { alertContext } from "../../contexts/alertContext"; import { PopUpContext } from "../../contexts/popUpContext"; @@ -15,6 +15,7 @@ import NodeModal from "../../modals/NodeModal"; import { useCallback } from "react"; import { TabsContext } from "../../contexts/tabsContext"; import { debounce } from "../../utils"; +import Tooltip from "../../components/TooltipComponent"; export default function GenericNode({ data, selected, @@ -27,7 +28,7 @@ export default function GenericNode({ const { types, deleteNode } = useContext(typesContext); const { openPopUp } = useContext(PopUpContext); const Icon = nodeIcons[types[data.type]]; - const [validationStatus, setValidationStatus] = useState("idle"); + const [validationStatus, setValidationStatus] = useState(null); // State for outline color const [isValid, setIsValid] = useState(false); const { save } = useContext(TabsContext); @@ -53,9 +54,14 @@ export default function GenericNode({ }); if (response.status === 200) { - setValidationStatus("success"); - } else if (response.status === 500) { - setValidationStatus("error"); + let jsonResponse = await response.json(); + let jsonResponseParsed = await JSON.parse(jsonResponse); + console.log(jsonResponseParsed); + if(jsonResponseParsed.valid){ + setValidationStatus(jsonResponseParsed.params); + } else { + setValidationStatus("error"); + } } } catch (error) { // console.error("Error validating node:", error); @@ -71,7 +77,7 @@ export default function GenericNode({ }, [params, validateNode]); useEffect(() => { - if (validationStatus === "success") { + if (validationStatus !== "error") { setIsValid(true); } else { setIsValid(false); @@ -100,14 +106,23 @@ export default function GenericNode({ )} >
-
+
-
{data.type}
+
{data.type}
+ {validationStatus && validationStatus !== "error" ? + + {validationStatus} +
}> + + + : <> +}
@@ -143,13 +158,13 @@ export default function GenericNode({ deleteNode(data.id); }} > - +
-
+
{data.node.description}
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx index f28d82307..fa580ffe4 100644 --- a/src/frontend/src/components/inputComponent/index.tsx +++ b/src/frontend/src/components/inputComponent/index.tsx @@ -38,7 +38,7 @@ export default function InputComponent({ }} /> +
+
+
+
+
+
+ + Use API + +
+
+
+
+
+ {tabs.map((tab, index) => ( + + ))} +
+
+ +
+
+
+
+ + +
+ + + + ); +} diff --git a/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx index f4fac149f..4b321915d 100644 --- a/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx @@ -8,6 +8,7 @@ import { ArrowDownTrayIcon, ArrowUpTrayIcon, BellIcon, + CodeBracketSquareIcon, MoonIcon, SunIcon, } from "@heroicons/react/24/outline"; @@ -17,6 +18,7 @@ import { alertContext } from "../../../../contexts/alertContext"; import ImportModal from "../../../../modals/importModal"; import ExportModal from "../../../../modals/exportModal"; import { typesContext } from "../../../../contexts/typesContext"; +import ApiModal from "../../../../modals/ApiModal"; export default function TabsManagerComponent() { const { flows, addFlow, tabIndex, setTabIndex, uploadFlow, downloadFlow } = @@ -55,6 +57,12 @@ export default function TabsManagerComponent() { flow={null} />
+ ))}
- +
+ +
+ + {tabs[activeTab].code} +
From 2961fc25a7772a6bdc2a8d704fcc4d56d9c21715 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Wed, 10 May 2023 23:56:20 -0300 Subject: [PATCH 04/12] ApiModal dark mode fixed --- src/frontend/src/modals/ApiModal/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx index e199c4cdb..16f959a1c 100644 --- a/src/frontend/src/modals/ApiModal/index.tsx +++ b/src/frontend/src/modals/ApiModal/index.tsx @@ -144,7 +144,7 @@ export default function ApiModal() { {tabs.map((tab, index) => ( From d01db97cd33ee6450533c23f4f75dd08b4cef539 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 11 May 2023 00:00:17 -0300 Subject: [PATCH 05/12] Changed Chat modal to work with dark mode --- src/frontend/src/modals/chatModal/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx index dd82ae313..4851beed3 100644 --- a/src/frontend/src/modals/chatModal/index.tsx +++ b/src/frontend/src/modals/chatModal/index.tsx @@ -181,7 +181,7 @@ export default function ChatModal({ } } catch (error) { setErrorData({ - title: "There was an erro sending the message", + title: "There was an error sending the message", list: [error.message], }); setChatValue(data.message); @@ -325,7 +325,7 @@ export default function ChatModal({
@@ -337,12 +337,12 @@ export default function ChatModal({
👋{" "} - + LangFlow Chat
-
+
Start a conversation and click the agent’s thoughts{" "} From 23f349a2d881802afba427da6f0900b748aaa4a0 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 11 May 2023 00:04:23 -0300 Subject: [PATCH 06/12] Fixed typo in class at API modal --- src/frontend/src/modals/ApiModal/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx index 16f959a1c..e199c4cdb 100644 --- a/src/frontend/src/modals/ApiModal/index.tsx +++ b/src/frontend/src/modals/ApiModal/index.tsx @@ -144,7 +144,7 @@ export default function ApiModal() { {tabs.map((tab, index) => ( From 6030b4791519d1abdae239c07d72f91402d5189c Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 11 May 2023 14:00:29 -0300 Subject: [PATCH 07/12] Removed JS from API modal --- src/frontend/src/modals/ApiModal/index.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx index e199c4cdb..4f5a5225a 100644 --- a/src/frontend/src/modals/ApiModal/index.tsx +++ b/src/frontend/src/modals/ApiModal/index.tsx @@ -30,8 +30,6 @@ def predict(message): print(predict("Your message"))`; -const jsCode = `codigo em javascript`; - const tabs = [ { name: "Python", @@ -39,12 +37,6 @@ const tabs = [ image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png", code: pythonCode, }, - { - name: "Javascript", - mode: "js", - image: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/1024px-Unofficial_JavaScript_logo_2.svg.png?20141107110902", - code: jsCode, - }, ] From 2589b1f468f69bd050b95cc507e897f8255bb015 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 11 May 2023 14:01:59 -0300 Subject: [PATCH 08/12] Fixed dark mode classes on FileInput --- src/frontend/src/components/inputFileComponent/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx index d20044571..01a500f91 100644 --- a/src/frontend/src/components/inputFileComponent/index.tsx +++ b/src/frontend/src/components/inputFileComponent/index.tsx @@ -71,7 +71,7 @@ export default function InputFileComponent({ From d55d209dc3c44917d7de41e0b694af8fd6e77f2e Mon Sep 17 00:00:00 2001 From: Gabriel Almeida Date: Thu, 11 May 2023 14:33:52 -0300 Subject: [PATCH 09/12] formatting --- src/backend/langflow/api/validate.py | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/backend/langflow/api/validate.py b/src/backend/langflow/api/validate.py index 0926ab16b..3a64080a3 100644 --- a/src/backend/langflow/api/validate.py +++ b/src/backend/langflow/api/validate.py @@ -1,3 +1,5 @@ +import json + from fastapi import APIRouter, HTTPException from langflow.api.base import ( @@ -10,7 +12,6 @@ from langflow.api.base import ( from langflow.interface.run import build_graph from langflow.utils.logger import logger from langflow.utils.validate import validate_code -import json # build router router = APIRouter(prefix="/validate", tags=["validate"]) @@ -47,8 +48,8 @@ def post_validate_node(node_id: str, data: dict): node = graph.get_node(node_id) if node is not None: _ = node.build() - return json.dumps({'valid': True, 'params': str(node.params)}) + return json.dumps({"valid": True, "params": str(node.params)}) else: - return json.dumps({'valid': False}) + return json.dumps({"valid": False}) except Exception as e: logger.error(e) From 9496728eb5574a43d9de4efc608a49f11be7664a Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 11 May 2023 18:58:07 -0300 Subject: [PATCH 10/12] Fixed Python API code --- src/frontend/src/modals/ApiModal/index.tsx | 52 +++++++++---------- .../components/tabsManagerComponent/index.tsx | 2 +- 2 files changed, 26 insertions(+), 28 deletions(-) diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx index 4f5a5225a..8385cc70f 100644 --- a/src/frontend/src/modals/ApiModal/index.tsx +++ b/src/frontend/src/modals/ApiModal/index.tsx @@ -3,44 +3,18 @@ import { IconCheck, IconClipboard, IconDownload } from '@tabler/icons-react'; import { XMarkIcon, CommandLineIcon, CodeBracketSquareIcon } from "@heroicons/react/24/outline"; import { Fragment, useContext, useRef, useState } from "react"; import { PopUpContext } from "../../contexts/popUpContext"; -import AceEditor from "react-ace"; import "ace-builds/src-noconflict/mode-python"; import "ace-builds/src-noconflict/theme-github"; import "ace-builds/src-noconflict/theme-twilight"; import "ace-builds/src-noconflict/ext-language_tools"; import "ace-builds/webpack-resolver"; import { darkContext } from "../../contexts/darkContext"; -import { checkCode } from "../../controllers/API"; -import { alertContext } from "../../contexts/alertContext"; -import { FaPython } from "react-icons/fa"; import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism'; -const pythonCode = `import requests -API_URL = "{window.location.protocol}//{window.location.host}/predict" -def predict(message): - with open("FLOW NAME.json:, "r") as f: - json_data = json.load(f) - payload['exported_flow'] = json_data - payload['message'] = message - response = requests.post(API_URL, json=payload) - return response.json() # JSON {"result": "Response"} - -print(predict("Your message"))`; - -const tabs = [ - { - name: "Python", - mode: "python", - image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png", - code: pythonCode, - }, - -] - -export default function ApiModal() { +export default function ApiModal({flowName}) { const [open, setOpen] = useState(true); const { dark } = useContext(darkContext); const { closePopUp } = useContext(PopUpContext); @@ -69,6 +43,30 @@ export default function ApiModal() { }, 300); } } + + const pythonCode = `import requests + +API_URL = "${window.location.protocol}//${window.location.host}/predict" + +def predict(message): + with open("${flowName}.json:, "r") as f: + json_data = json.load(f) + payload['exported_flow'] = json_data + payload['message'] = message + response = requests.post(API_URL, json=payload) + return response.json() # JSON {"result": "Response"} + +print(predict("Your message"))`; + +const tabs = [ + { + name: "Python", + mode: "python", + image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png", + code: pythonCode, + }, + +] return (
diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx index d351b847a..1405a3c68 100644 --- a/src/frontend/src/modals/importModal/index.tsx +++ b/src/frontend/src/modals/importModal/index.tsx @@ -82,7 +82,7 @@ export default function ImportModal() { leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" > - +
- )}
@@ -152,7 +130,7 @@ export default function ImportModal() {
From 0d43a9b32b3d0b3761dd020f7b3db39bcfa8a11f Mon Sep 17 00:00:00 2001 From: Gabriel Almeida Date: Thu, 11 May 2023 19:48:56 -0300 Subject: [PATCH 12/12] fixed python code --- src/frontend/src/modals/ApiModal/index.tsx | 23 +++++++++++----------- 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx index 8385cc70f..9c91070b3 100644 --- a/src/frontend/src/modals/ApiModal/index.tsx +++ b/src/frontend/src/modals/ApiModal/index.tsx @@ -14,7 +14,7 @@ import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism'; -export default function ApiModal({flowName}) { +export default function ApiModal({ flowName }) { const [open, setOpen] = useState(true); const { dark } = useContext(darkContext); const { closePopUp } = useContext(PopUpContext); @@ -49,24 +49,23 @@ export default function ApiModal({flowName}) { API_URL = "${window.location.protocol}//${window.location.host}/predict" def predict(message): - with open("${flowName}.json:, "r") as f: + with open("${flowName}.json", "r") as f: json_data = json.load(f) - payload['exported_flow'] = json_data - payload['message'] = message + payload = {'exported_flow': json_data, 'message': message} response = requests.post(API_URL, json=payload) return response.json() # JSON {"result": "Response"} print(predict("Your message"))`; -const tabs = [ - { - name: "Python", - mode: "python", - image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png", - code: pythonCode, - }, + const tabs = [ + { + name: "Python", + mode: "python", + image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png", + code: pythonCode, + }, -] + ] return (