From 09bd1093dd35cd45030765dfac0d54939b4a5e3e Mon Sep 17 00:00:00 2001 From: Gabriel Luiz Freitas Almeida Date: Sun, 11 Jun 2023 10:58:10 -0300 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style(constants.tsx):=20refactor?= =?UTF-8?q?=20getPythonApiCode,=20getCurlCode,=20and=20getPythonCode=20to?= =?UTF-8?q?=20separate=20functions=20=E2=9C=A8=20feat(ApiModal):=20use=20g?= =?UTF-8?q?etPythonApiCode=20and=20getCurlCode=20functions=20to=20generate?= =?UTF-8?q?=20python=20and=20curl=20code=20=E2=9C=A8=20feat(cardComponent)?= =?UTF-8?q?:=20add=20RenameLabel=20component=20to=20allow=20renaming=20of?= =?UTF-8?q?=20flow=20name=20and=20description=20=F0=9F=90=9B=20fix(cardCom?= =?UTF-8?q?ponent):=20fix=20CardDescription=20height=20to=20prevent=20over?= =?UTF-8?q?flow=20The=20getPythonApiCode,=20getCurlCode,=20and=20getPython?= =?UTF-8?q?Code=20functions=20were=20refactored=20into=20separate=20functi?= =?UTF-8?q?ons=20to=20improve=20code=20readability=20and=20maintainability?= =?UTF-8?q?.=20The=20ApiModal=20component=20now=20uses=20the=20getPythonAp?= =?UTF-8?q?iCode=20and=20getCurlCode=20functions=20to=20generate=20the=20p?= =?UTF-8?q?ython=20and=20curl=20code.=20The=20CardComponent=20now=20has=20?= =?UTF-8?q?a=20RenameLabel=20component=20that=20allows=20renaming=20of=20t?= =?UTF-8?q?he=20flow=20name=20and=20description.=20The=20CardDescription?= =?UTF-8?q?=20height=20was=20also=20fixed=20to=20prevent=20overflow.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/frontend/src/constants.tsx | 44 ++++++++++++ src/frontend/src/modals/ApiModal/index.tsx | 25 ++----- .../components/cardComponent/index.tsx | 72 ++++++++++++------- 3 files changed, 95 insertions(+), 46 deletions(-) diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx index 49b6ea194..82d256c6e 100644 --- a/src/frontend/src/constants.tsx +++ b/src/frontend/src/constants.tsx @@ -37,3 +37,47 @@ export const PROMPT_DIALOG_SUBTITLE = "Edit you prompt."; * @constant */ export const TEXT_DIALOG_SUBTITLE = "Edit you text."; + +/** + * Function to get the python code for the API + * @param {string} flowId - The id of the flow + * @returns {string} - The python code + */ +export const getPythonApiCode = (flowId: string): string => { + return `import requests + + FLOW_ID = "${flowId}" + API_URL = f"${window.location.protocol}//${window.location.host}/predict/{FLOW_ID}" + + def predict(message): + payload = {'message': message} + response = requests.post(API_URL, json=payload) + return response.json() + + print(predict("Your message"))`; +}; + +/** + * Function to get the curl code for the API + * @param {string} flowId - The id of the flow + * @returns {string} - The curl code + */ +export const getCurlCode = (flowId: string): string => { + return `curl -X POST \\ + -H "Content-Type: application/json" \\ + -d '{"message": "Your message"}' \\ + ${window.location.protocol}//${window.location.host}/predict/${flowId}`; +}; + +/** + * Function to get the python code for the API + * @param {string} flowName - The name of the flow + * @returns {string} - The python code + */ +export const getPythonCode = (flowName: string): string => { + return `from langflow import load_flow_from_json + + flow = load_flow_from_json("${flowName}.json") + # Now you can use it like any chain + flow("Hey, have you heard of LangFlow?")`; +}; diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx index da1b21123..6a58d467a 100644 --- a/src/frontend/src/modals/ApiModal/index.tsx +++ b/src/frontend/src/modals/ApiModal/index.tsx @@ -25,6 +25,7 @@ import { } from "../../components/ui/dialog"; import { Button } from "../../components/ui/button"; import { FlowType } from "src/types/flow"; +import { getCurlCode, getPythonApiCode, getPythonCode } from "../../constants"; export default function ApiModal({ flow }: { flow: FlowType }) { const [open, setOpen] = useState(true); @@ -53,28 +54,10 @@ export default function ApiModal({ flow }: { flow: FlowType }) { } } - const pythonApiCode = `import requests + const pythonApiCode = getPythonApiCode(flow.id); -FLOW_ID = "${flow.id}" -API_URL = f"${window.location.protocol}//${window.location.host}/predict/{FLOW_ID}" - -def predict(message): - payload = {'message': message} - response = requests.post(API_URL, json=payload) - return response.json() - -print(predict("Your message"))`; - - const curl_code = `curl -X POST \\ - -H "Content-Type: application/json" \\ - -d '{"message": "Your message"}' \\ - ${window.location.protocol}//${window.location.host}/predict/${flow.id}`; - - const pythonCode = `from langflow import load_flow_from_json - -flow = load_flow_from_json("${flow.name}.json") -# Now you can use it like any chain -flow("Hey, have you heard of LangFlow?")`; + const curl_code = getCurlCode(flow.id); + const pythonCode = getPythonCode(flow.name); const tabs = [ { diff --git a/src/frontend/src/pages/MainPage/components/cardComponent/index.tsx b/src/frontend/src/pages/MainPage/components/cardComponent/index.tsx index 2b05a0df7..b69201a05 100644 --- a/src/frontend/src/pages/MainPage/components/cardComponent/index.tsx +++ b/src/frontend/src/pages/MainPage/components/cardComponent/index.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useContext, useState } from "react"; import { ArrowTopRightOnSquareIcon, TrashIcon, @@ -15,6 +15,11 @@ import { CardTitle, } from "../../../../components/ui/card"; import { FlowType } from "../../../../types/flow"; +import RenameLabel from "../../../../components/ui/rename-label"; +import _ from "lodash"; +import { TabsContext } from "../../../../contexts/tabsContext"; +import { alertContext } from "../../../../contexts/alertContext"; +import { updateFlowInDatabase } from "../../../../controllers/API"; export const CardComponent = ({ flow, idx, @@ -28,31 +33,38 @@ export const CardComponent = ({ setTabIndex: (idx: number) => void; setActiveTab: (tab: string) => void; }) => { - // flow has a style attribute - // if it is empty just get a random style - // if it is not empty use that style - // if it is not empty and it is not a valid style get a random style + const { setErrorData } = useContext(alertContext); + const { updateFlow } = useContext(TabsContext); + function handleSaveFlow(flow) { + try { + updateFlowInDatabase(flow); + updateFlow(flow); + // updateFlowStyleInDataBase(flow); + } catch (err) { + setErrorData(err); + } + } + const [rename, setRename] = useState(false); - let emoji = flow.style?.emoji || "🤖"; - // get random tailwind color - let color = flow.style?.color || "bg-blue-200"; return (
- {/* - {emoji} - */} - {flow.name} + { + if (value !== "") { + let newFlow = _.cloneDeep(flow); + newFlow.name = value; + handleSaveFlow(newFlow); + } + }} + rename={rename} + setRename={setRename} + />
- {/* make the icons shake a bit on hover */} { @@ -68,13 +80,23 @@ export const CardComponent = ({ />
- -
- {idx === 0 - ? "This flow creates an agent that accesses a department store database and APIs to monitor customer activity and overall storage." - : "This is a new Flow"} - {/* {flow.description} */} -
+ + {/*
*/} + { + if (value !== "") { + let newFlow = _.cloneDeep(flow); + newFlow.description = value; + handleSaveFlow(newFlow); + } + }} + rename={rename} + setRename={setRename} + /> + {/*
*/}