diff --git a/space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 1a687eb0b..f81e5d042 100644 --- a/space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -51,7 +51,7 @@ export default function ParameterComponent({ position={left ? Position.Left : Position.Right} id={id} isValidConnection={(connection) => - isValidConnection(data, connection) + isValidConnection(connection,reactFlowInstance) } className={ (left ? "-ml-0.5 " : "-mr-0.5 ") + diff --git a/space_flow/src/contexts/tabsContext.tsx b/space_flow/src/contexts/tabsContext.tsx index 9906dea98..27cd2a9ec 100644 --- a/space_flow/src/contexts/tabsContext.tsx +++ b/space_flow/src/contexts/tabsContext.tsx @@ -7,7 +7,7 @@ type TabsContextType={ setTabIndex:(index:number)=>void; flows:Array removeFlow:(id:string)=>void; - addFlow:()=>void; + addFlow:(flowData?:any)=>void; updateFlow:(newFlow:flow)=>void; nodeId:number; } @@ -17,7 +17,7 @@ const TabsContextInitialValue = { setTabIndex:(index:number)=>{}, flows:[], removeFlow:(id:string)=>{}, - addFlow:()=>{}, + addFlow:(flowData?:any)=>{}, updateFlow:(newFlow:flow)=>{}, nodeId:0, @@ -65,8 +65,9 @@ export function TabsProvider({children}){ return newFlows; }); } - function addFlow() { - let newFlow: flow = {name: "flow"+id, id: id.toString(), data:null} + function addFlow(flowData?:flow) { + const data = flowData?flowData:null + let newFlow: flow = {name: "flow"+id, id: id.toString(), data} setId((old) => old+1); setFlows(prevState => { const newFlows = [...prevState, newFlow]; diff --git a/space_flow/src/data_assets/example.ts b/space_flow/src/data_assets/example.ts new file mode 100644 index 000000000..1d6e47a95 --- /dev/null +++ b/space_flow/src/data_assets/example.ts @@ -0,0 +1,231 @@ +export const example = { + "nodes": [ + { + "width": 384, + "height": 413, + "id": "dndnode_1", + "type": "genericNode", + "position": { + "x": 124.66903342355295, + "y": -20.27227649302739 + }, + "data": { + "type": "OpenAI", + "node": { + "template": { + "_type": "openai", + "cache": { + "type": "bool", + "required": false, + "placeholder": "", + "list": false, + "show": false, + "multline": false, + "value": null + }, + "verbose": { + "type": "bool", + "required": false, + "placeholder": "", + "list": false, + "show": true, + "multline": false, + "value": null + }, + "client": { + "type": "Any", + "required": false, + "placeholder": "", + "list": false, + "show": false, + "multline": false, + "value": null + }, + "model_name": { + "type": "str", + "required": false, + "placeholder": "", + "list": false, + "show": false, + "multline": false, + "value": "text-davinci-003" + }, + "temperature": { + "type": "float", + "required": false, + "placeholder": "", + "list": false, + "show": false, + "multline": false, + "value": 0.7 + }, + "max_tokens": { + "type": "int", + "required": false, + "placeholder": "", + "list": false, + "show": false, + "multline": false, + "value": 256 + }, + "top_p": { + "type": "float", + "required": false, + "placeholder": "", + "list": false, + "show": false, + "multline": false, + "value": 1 + }, + "frequency_penalty": { + "type": "float", + "required": false, + "placeholder": "", + "list": false, + "show": false, + "multline": false, + "value": 0 + }, + "presence_penalty": { + "type": "float", + "required": false, + "placeholder": "", + "list": false, + "show": false, + "multline": false, + "value": 0 + }, + "n": { + "type": "int", + "required": false, + "placeholder": "", + "list": false, + "show": false, + "multline": false, + "value": 1 + }, + "best_of": { + "type": "int", + "required": false, + "placeholder": "", + "list": false, + "show": false, + "multline": false, + "value": 1 + }, + "model_kwargs": { + "type": "dict[str, Any]", + "required": false, + "placeholder": "", + "list": false, + "show": false, + "multline": false, + "value": null + }, + "openai_api_key": { + "type": "str", + "required": false, + "placeholder": "", + "list": false, + "show": true, + "multline": false, + "value": "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" + }, + "batch_size": { + "type": "int", + "required": false, + "placeholder": "", + "list": false, + "show": false, + "multline": false, + "value": 20 + }, + "request_timeout": { + "type": "Union[float, Tuple[float, float], NoneType]", + "required": false, + "placeholder": "", + "list": false, + "show": false, + "multline": false, + "value": null + }, + "logit_bias": { + "type": "dict[str, float]", + "required": false, + "placeholder": "", + "list": false, + "show": false, + "multline": false, + "value": null + }, + "max_retries": { + "type": "int", + "required": false, + "placeholder": "", + "list": false, + "show": false, + "multline": false, + "value": 6 + } + }, + "description": "Generic OpenAI class that uses model name.", + "base_classes": [ + "BaseOpenAI", + "BaseLLM" + ] + }, + "id": "dndnode_1", + "value": null, + "reactFlowInstance": { + "viewportInitialized": true + } + }, + "selected": false, + "positionAbsolute": { + "x": 124.66903342355295, + "y": -20.27227649302739 + }, + "dragging": false + }, + { + "width": 152, + "height": 62, + "id": "dndnode_2", + "type": "chatOutputNode", + "position": { + "x": 688.2448440290276, + "y": 315.1849334347801 + }, + "data": { + "type": "chatOutput", + "id": "dndnode_2", + "value": null, + "reactFlowInstance": { + "viewportInitialized": true + } + }, + "selected": false, + "positionAbsolute": { + "x": 688.2448440290276, + "y": 315.1849334347801 + }, + "dragging": false + } + ], + "edges": [ + { + "source": "dndnode_1", + "sourceHandle": "OpenAI|dndnode_1|BaseOpenAI,|BaseLLM", + "target": "dndnode_2", + "targetHandle": "str|output|dndnode_2", + "className": "animate-pulse", + "id": "reactflow__edge-dndnode_1OpenAI|dndnode_1|BaseOpenAI,|BaseLLM-dndnode_2str|output|dndnode_2" + } + ], + "viewport": { + "x": 283.7086041469587, + "y": 207.97093260601437, + "zoom": 0.5937798330367052 + }, + "message": "Tell me a joke." +} \ No newline at end of file diff --git a/space_flow/src/pages/FlowPage/flowManager/index.tsx b/space_flow/src/pages/FlowPage/flowManager/index.tsx index 998059562..c52a9aab7 100644 --- a/space_flow/src/pages/FlowPage/flowManager/index.tsx +++ b/space_flow/src/pages/FlowPage/flowManager/index.tsx @@ -3,13 +3,14 @@ import { ReactFlowProvider } from "reactflow"; import FlowPage from ".."; import { TabsContext } from "../../../contexts/tabsContext"; import TabComponent from "./tabComponent"; +import { example } from "../../../data_assets/example"; var _ = require("lodash"); export function TabsManager() { const { flows, addFlow, tabIndex, setTabIndex } = useContext(TabsContext); useEffect(() => { if (flows.length === 0) { - addFlow(); + addFlow(example); } }, [addFlow, flows.length]); diff --git a/space_flow/src/utils.ts b/space_flow/src/utils.ts index ec5b5227b..201819904 100644 --- a/space_flow/src/utils.ts +++ b/space_flow/src/utils.ts @@ -335,18 +335,18 @@ export function getConnectedNodes(edge: Edge, nodes: Array): Array { } export function isValidConnection( - data, - { source, target, sourceHandle, targetHandle } + { source, target, sourceHandle, targetHandle }, + reactFlowInstance ) { if ( targetHandle.split('|')[0] === sourceHandle.split("|")[0] || targetHandle.split('|').slice(2).some((t) => t === sourceHandle.split("|")[0]) || sourceHandle.split("|")[0] === "str" ) { - let sourceNode = data.reactFlowInstance.getNode(source).data.node; + let sourceNode = reactFlowInstance.getNode(source).data.node; if (!sourceNode) { if ( - !data.reactFlowInstance + !reactFlowInstance .getEdges() .find((e) => e.sourceHandle === sourceHandle) ) { @@ -354,7 +354,7 @@ export function isValidConnection( } } else if ( (!sourceNode.template[sourceHandle.split("|")[1]].list && - !data.reactFlowInstance + !reactFlowInstance .getEdges() .find((e) => e.sourceHandle === sourceHandle)) || sourceNode.template[sourceHandle.split("|")[1]].list