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

Merge branches of multiple nodes and sidebars

Browse source
This commit is contained in:
Lucas Oliveira 2023-02-10 16:28:48 -03:00
commit 12283981b9
8 changed files with 85 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

4
space_flow/public/index.html
View file

@ -6,9 +6,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <title>Document</title>
</head> </head>
<body class="h-full overflow-hidden"> <body style="width: 100%; height:100%">
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div class="w-screen h-screen overflow-hidden" id='root'> <div style="width: 100vw; height:100vh" id='root'>
</div> </div>
</body> </body>
</html> </html>

17
space_flow/src/CustomNodes/AgentNode/index.tsx Normal file
View file

@ -0,0 +1,17 @@
import { Handle, Position } from "reactflow";
export default function AgentNode({ data }) {
console.log(data)
return (
<div onClick={data.delete} className="agent-node relative bg-white h-16 w-40 border rounded-sm solid border-black flex flex-col justify-center">
<Handle type="source" position={Position.Left}></Handle>
<label className="absolute cursor-grab text-sm -top-3 left-1 bg-white w-14 text-center">
Agent
</label>
<div className="w-full h-min text-xs text-center">
Agent data
</div>
<Handle type="target" position={Position.Right}></Handle>
</div>
);
}

17
space_flow/src/CustomNodes/ChainNode/index.tsx Normal file
View file

@ -0,0 +1,17 @@
import { Handle, Position } from "reactflow";
export default function ChainNode({ data }) {
console.log(data)
return (
<div onClick={data.delete} className="chain-node relative bg-white h-16 w-40 border rounded-sm solid border-black flex flex-col justify-center">
<Handle type="source" position={Position.Left}></Handle>
<label className="absolute cursor-grab text-sm -top-3 left-1 bg-white w-14 text-center">
Chain
</label>
<div className="w-full h-min text-xs text-center">
Chain data
</div>
<Handle type="target" position={Position.Right}></Handle>
</div>
);
}

2
space_flow/src/CustomNodes/ModelNode/index.tsx
View file

@ -3,7 +3,7 @@ import { Handle, Position } from "reactflow";
export default function ModelNode({ data }) { export default function ModelNode({ data }) {
console.log(data) console.log(data)
return ( return (
<div onClick={data.delete} className="model-Node relative bg-white h-16 w-40 border rounded-sm solid border-black flex flex-col justify-center"> <div onClick={data.delete} className="model-node relative bg-white h-16 w-40 border rounded-sm solid border-black flex flex-col justify-center">
<Handle type="source" position={Position.Left}></Handle> <Handle type="source" position={Position.Left}></Handle>
<label className="absolute cursor-grab text-sm -top-3 left-1 bg-white w-14 text-center"> <label className="absolute cursor-grab text-sm -top-3 left-1 bg-white w-14 text-center">
Model Model

2
space_flow/src/CustomNodes/PromptNode/index.tsx
View file

@ -8,7 +8,7 @@ export default function PromptNode({ data }) {
return ( return (
<div <div
onClick={()=>openPopUp(<div className="absolute top-1/2 left-1/2">teste</div>)} onClick={()=>openPopUp(<div className="absolute top-1/2 left-1/2">teste</div>)}
className="prompt-Node relative bg-white h-16 w-40 border rounded-sm solid border-black flex flex-col justify-center" className="prompt-node relative bg-white h-16 w-40 border rounded-sm solid border-black flex flex-col justify-center"
> >
<Handle type="source" position={Position.Left}></Handle> <Handle type="source" position={Position.Left}></Handle>
<label className="absolute cursor-grab text-sm -top-3 left-1 bg-white w-14 text-center"> <label className="absolute cursor-grab text-sm -top-3 left-1 bg-white w-14 text-center">

17
space_flow/src/CustomNodes/ValidatorNode/index.tsx Normal file
View file

@ -0,0 +1,17 @@
import { Handle, Position } from "reactflow";
export default function ValidatorNode({ data }) {
console.log(data)
return (
<div onClick={data.delete} className="validator-node relative bg-white h-16 w-40 border rounded-sm solid border-black flex flex-col justify-center">
<Handle type="source" position={Position.Left}></Handle>
<label className="absolute cursor-grab text-sm -top-3 left-1 bg-white w-14 text-center">
Validator
</label>
<div className="w-full h-min text-xs text-center">
validator data
</div>
<Handle type="target" position={Position.Right}></Handle>
</div>
);
}

17
space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
View file

@ -1,4 +1,6 @@
import { llm_chain } from "../../../../data_assets/llm_chain"; import { llm_chain } from "../../../../data_assets/llm_chain";
import { prompt } from "../../../../data_assets/prompt";
export function ExtraSidebar(){ export function ExtraSidebar(){
@ -12,13 +14,26 @@ export function ExtraSidebar(){
if(nodeType==="modelNode"){ if(nodeType==="modelNode"){
json = JSON.stringify(llm_chain) json = JSON.stringify(llm_chain)
} }
if(nodeType==="chainNode"){
json = JSON.stringify({content:""})
}
if(nodeType==="agentNode"){
json = JSON.stringify({content:""})
}
if(nodeType==="validatorNode"){
json = JSON.stringify({content:""})
}
event.dataTransfer.setData('json',json); event.dataTransfer.setData('json',json);
} }
return( return(
<div className="h-full w-48 bg-slate-200 flex flex-col"> <div className="h-full w-48 bg-slate-200 flex flex-col">
<div className="w-full text-center border border-black cursor-grab" draggable onDragStart={(event)=>onDragStart(event,'promptNode')}> prompt Node</div> <div draggable className="w-full text-center border border-black cursor-grab" onDragStart={(event)=>onDragStart(event,'promptNode')}> Prompt Node</div>
<div draggable className="w-full text-center border border-black cursor-grab" onDragStart={(event)=>onDragStart(event,'modelNode')}> Model Node</div> <div draggable className="w-full text-center border border-black cursor-grab" onDragStart={(event)=>onDragStart(event,'modelNode')}> Model Node</div>
<div draggable className="w-full text-center border border-black cursor-grab" onDragStart={(event)=>onDragStart(event,'chainNode')}> Chain Node</div>
<div draggable className="w-full text-center border border-black cursor-grab" onDragStart={(event)=>onDragStart(event,'agentNode')}> Agent Node</div>
<div draggable className="w-full text-center border border-black cursor-grab" onDragStart={(event)=>onDragStart(event,'validatorNode')}> Validator Node</div>
</div> </div>
) )
} }

19
space_flow/src/pages/FlowPage/index.tsx
View file

@ -11,21 +11,30 @@ import PromptNode from "../../CustomNodes/PromptNode";
import ModelNode from "../../CustomNodes/ModelNode"; import ModelNode from "../../CustomNodes/ModelNode";
import { locationContext } from "../../contexts/locationContext"; import { locationContext } from "../../contexts/locationContext";
import { ExtraSidebar } from "./components/extraSidebarComponent"; import { ExtraSidebar } from "./components/extraSidebarComponent";
import AgentNode from "../../CustomNodes/AgentNode";
import ChainNode from "../../CustomNodes/ChainNode";
import ValidatorNode from "../../CustomNodes/ValidatorNode";
const nodeTypes = {
textUpdater: TextUpdaterNode,
promptNode: PromptNode,
modelNode: ModelNode,
chainNode: ChainNode,
agentNode: AgentNode,
validatorNode: ValidatorNode,
};
export default function FlowPage() { export default function FlowPage() {
// outside component to avoid render trigger // outside component to avoid render trigger
const reactFlowWrapper = useRef(null); const reactFlowWrapper = useRef(null);
const nodeTypes = {
textUpdater: TextUpdaterNode,
promptNode: PromptNode,
modelNode: ModelNode,
};
const rfStyle = { const rfStyle = {
backgroundCOlor: "#B8CEFF", backgroundCOlor: "#B8CEFF",
}; };
let id = 0; let id = 0;
const getId = () => `dndnode_${id++}`; const getId = () => `dndnode_${id++}`;
const { setExtraComponent } = useContext(locationContext); const { setExtraComponent } = useContext(locationContext);