getting tabs from the api
This commit is contained in:
parent
7aeac0648a
commit
f432fd6c3f
6 changed files with 78 additions and 76 deletions
|
|
@ -1,7 +1,7 @@
|
||||||
import { Transition } from "@headlessui/react";
|
import { Transition } from "@headlessui/react";
|
||||||
import { Handle, Position } from "reactflow";
|
import { Handle, Position } from "reactflow";
|
||||||
|
|
||||||
export default function ValidatorNode({ data }) {
|
export default function ToolsNode({ data }) {
|
||||||
console.log(data);
|
console.log(data);
|
||||||
return (
|
return (
|
||||||
<Transition
|
<Transition
|
||||||
|
|
@ -20,9 +20,9 @@ export default function ValidatorNode({ data }) {
|
||||||
>
|
>
|
||||||
<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">
|
||||||
Validator
|
Tools
|
||||||
</label>
|
</label>
|
||||||
<div className="w-full h-min text-xs text-center">validator data</div>
|
<div className="w-full h-min text-xs text-center">Tools data</div>
|
||||||
<Handle type="target" position={Position.Right}></Handle>
|
<Handle type="target" position={Position.Right}></Handle>
|
||||||
</div>
|
</div>
|
||||||
</Transition>
|
</Transition>
|
||||||
51
space_flow/src/controllers/NodesServices/index.ts
Normal file
51
space_flow/src/controllers/NodesServices/index.ts
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
export async function getPrompts() {
|
||||||
|
const promises = (await axios.get("http://localhost:5003/list/prompts")).data.map(async (value, index) => {
|
||||||
|
const prompt = await axios.get("http://localhost:5003/templates/prompt", {
|
||||||
|
params: { name: value },
|
||||||
|
});
|
||||||
|
return { name: value, type: "promptNode", ...prompt.data };
|
||||||
|
});
|
||||||
|
return Promise.all(promises);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getChains() {
|
||||||
|
const promises = (await axios.get("http://localhost:5003/list/chains")).data.map(async (value, index) => {
|
||||||
|
const chain = await axios.get("http://localhost:5003/templates/chain", {
|
||||||
|
params: { name: value },
|
||||||
|
});
|
||||||
|
return { name: value, type: "chainNode", ...chain.data };
|
||||||
|
});
|
||||||
|
return Promise.all(promises);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getAgents() {
|
||||||
|
const promises = (await axios.get("http://localhost:5003/list/agents")).data.map(async (value, index) => {
|
||||||
|
const chain = await axios.get("http://localhost:5003/templates/agent", {
|
||||||
|
params: { name: value },
|
||||||
|
});
|
||||||
|
return { name: value, type: "agentNode", ...chain.data };
|
||||||
|
});
|
||||||
|
return Promise.all(promises);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getMemories() {
|
||||||
|
const promises = (await axios.get("http://localhost:5003/list/memories")).data.map(async (value, index) => {
|
||||||
|
const chain = await axios.get("http://localhost:5003/templates/memory", {
|
||||||
|
params: { name: value },
|
||||||
|
});
|
||||||
|
return { name: value, type: "memoryNode", ...chain.data };
|
||||||
|
});
|
||||||
|
return Promise.all(promises);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getTools() {
|
||||||
|
const promises = (await axios.get("http://localhost:5003/list/tools")).data.map(async (value, index) => {
|
||||||
|
const prompt = await axios.get("http://localhost:5003/templates/tool", {
|
||||||
|
params: { name: value },
|
||||||
|
});
|
||||||
|
return { name: value, type: "toolNode", ...prompt.data };
|
||||||
|
});
|
||||||
|
return Promise.all(promises);
|
||||||
|
}
|
||||||
11
space_flow/src/controllers/UiGenerator/index.ts
Normal file
11
space_flow/src/controllers/UiGenerator/index.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
export function generateUiNode(data: Object) {
|
||||||
|
const fields = [];
|
||||||
|
Object.keys(data).forEach((field) => {
|
||||||
|
if (data[field].required) {
|
||||||
|
fields.push(data[field])
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return fields
|
||||||
|
}
|
||||||
|
|
@ -1,61 +0,0 @@
|
||||||
import axios from "axios";
|
|
||||||
|
|
||||||
export async function getPrompts() {
|
|
||||||
const jsons = [];
|
|
||||||
let prompts = await axios.get("http://localhost:5003/list/prompts");
|
|
||||||
(prompts.data as Array<any>).forEach((value, index) => {
|
|
||||||
axios
|
|
||||||
.get("http://localhost:5003/templates/prompt", {
|
|
||||||
params: { name: value },
|
|
||||||
})
|
|
||||||
.then((prompt) => {
|
|
||||||
jsons.push({ name: value, type: "promptNode", ...prompt.data });
|
|
||||||
});
|
|
||||||
});
|
|
||||||
return jsons;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getChains() {
|
|
||||||
const jsons = [];
|
|
||||||
let chains = await axios.get("http://localhost:5003/list/chains");
|
|
||||||
(chains.data as Array<any>).forEach((value, index) => {
|
|
||||||
axios
|
|
||||||
.get("http://localhost:5003/templates/chain", {
|
|
||||||
params: { name: value },
|
|
||||||
})
|
|
||||||
.then((chain) => {
|
|
||||||
jsons.push({ name: value, type: "chainNode", ...chain.data });
|
|
||||||
});
|
|
||||||
});
|
|
||||||
return jsons;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getAgents() {
|
|
||||||
const jsons = [];
|
|
||||||
let chains = await axios.get("http://localhost:5003/list/agents");
|
|
||||||
(chains.data as Array<any>).forEach((value, index) => {
|
|
||||||
axios
|
|
||||||
.get("http://localhost:5003/templates/agent", {
|
|
||||||
params: { name: value },
|
|
||||||
})
|
|
||||||
.then((chain) => {
|
|
||||||
jsons.push({ name: value, type: "agentNode", ...chain.data });
|
|
||||||
});
|
|
||||||
});
|
|
||||||
return jsons;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getMemories() {
|
|
||||||
const jsons = [];
|
|
||||||
let memories = await axios.get("http://localhost:5003/list/memories");
|
|
||||||
(memories.data as Array<any>).forEach((value, index) => {
|
|
||||||
axios
|
|
||||||
.get("http://localhost:5003/templates/memory", {
|
|
||||||
params: { name: value },
|
|
||||||
})
|
|
||||||
.then((memory) => {
|
|
||||||
jsons.push({ name: value, type: "memoryNode", ...memory.data });
|
|
||||||
});
|
|
||||||
});
|
|
||||||
return jsons;
|
|
||||||
}
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import { Bars2Icon, CommandLineIcon, CpuChipIcon, LightBulbIcon, LinkIcon, RocketLaunchIcon, ShieldCheckIcon, ViewColumnsIcon } from "@heroicons/react/24/outline";
|
import { Bars2Icon, CommandLineIcon, CpuChipIcon, LightBulbIcon, LinkIcon, RocketLaunchIcon, WrenchScrewdriverIcon, ViewColumnsIcon } from "@heroicons/react/24/outline";
|
||||||
import { llm_chain } from "../../../../data_assets/llm_chain";
|
import { llm_chain } from "../../../../data_assets/llm_chain";
|
||||||
import { prompt } from "../../../../data_assets/prompt";
|
import { prompt } from "../../../../data_assets/prompt";
|
||||||
import DisclosureComponent from "../DisclosureComponent";
|
import DisclosureComponent from "../DisclosureComponent";
|
||||||
|
|
@ -20,7 +20,7 @@ export function ExtraSidebar() {
|
||||||
if (nodeType === "agentNode") {
|
if (nodeType === "agentNode") {
|
||||||
json = JSON.stringify({ content: "" });
|
json = JSON.stringify({ content: "" });
|
||||||
}
|
}
|
||||||
if (nodeType === "validatorNode") {
|
if (nodeType === "toolNode") {
|
||||||
json = JSON.stringify({ content: "" });
|
json = JSON.stringify({ content: "" });
|
||||||
}
|
}
|
||||||
if (nodeType === "memoryNode") {
|
if (nodeType === "memoryNode") {
|
||||||
|
|
@ -72,14 +72,14 @@ export function ExtraSidebar() {
|
||||||
</div>
|
</div>
|
||||||
</DisclosureComponent>
|
</DisclosureComponent>
|
||||||
<DisclosureComponent
|
<DisclosureComponent
|
||||||
button={{ title: "Validators", Icon: ShieldCheckIcon }}
|
button={{ title: "Tools", Icon: WrenchScrewdriverIcon }}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
draggable
|
draggable
|
||||||
className="flex justify-between text-sm p-4 items-center h-12 m-2 border-dashed border-gray-400 rounded-md border-2 cursor-grab"
|
className="flex justify-between text-sm p-4 items-center h-12 m-2 border-dashed border-gray-400 rounded-md border-2 cursor-grab"
|
||||||
onDragStart={(event) => onDragStart(event, "validatorNode")}
|
onDragStart={(event) => onDragStart(event, "toolNode")}
|
||||||
>
|
>
|
||||||
<span className="text-black">Validator</span>
|
<span className="text-black">tools</span>
|
||||||
<Bars2Icon className="w-6 text-gray-400" />
|
<Bars2Icon className="w-6 text-gray-400" />
|
||||||
</div>
|
</div>
|
||||||
</DisclosureComponent>
|
</DisclosureComponent>
|
||||||
|
|
|
||||||
|
|
@ -12,25 +12,26 @@ import { locationContext } from "../../contexts/locationContext";
|
||||||
import { ExtraSidebar } from "./components/extraSidebarComponent";
|
import { ExtraSidebar } from "./components/extraSidebarComponent";
|
||||||
import AgentNode from "../../CustomNodes/AgentNode";
|
import AgentNode from "../../CustomNodes/AgentNode";
|
||||||
import ChainNode from "../../CustomNodes/ChainNode";
|
import ChainNode from "../../CustomNodes/ChainNode";
|
||||||
import ValidatorNode from "../../CustomNodes/ValidatorNode";
|
import ToolsNode from "../../CustomNodes/ToolsNode";
|
||||||
import MemoryNode from "../../CustomNodes/MemoryNode";
|
import MemoryNode from "../../CustomNodes/MemoryNode";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import {getPrompts, getChains,getAgents,getMemories} from "../../controllers/jsonConverter";
|
import {getPrompts, getChains,getAgents,getMemories} from "../../controllers/NodesServices";
|
||||||
|
import { generateUiNode } from "../../controllers/UiGenerator";
|
||||||
|
|
||||||
const nodeTypes = {
|
const nodeTypes = {
|
||||||
promptNode: PromptNode,
|
promptNode: PromptNode,
|
||||||
modelNode: ModelNode,
|
modelNode: ModelNode,
|
||||||
chainNode: ChainNode,
|
chainNode: ChainNode,
|
||||||
agentNode: AgentNode,
|
agentNode: AgentNode,
|
||||||
validatorNode: ValidatorNode,
|
toolNode: ToolsNode,
|
||||||
memoryNode:MemoryNode
|
memoryNode:MemoryNode
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function FlowPage() {
|
export default function FlowPage() {
|
||||||
getPrompts().then(result=>console.log(result))
|
getPrompts().then(result=>result.forEach(prompt=>console.log(generateUiNode(prompt))))
|
||||||
getChains().then(result=>console.log(result))
|
// getChains().then(result=>console.log(result))
|
||||||
getAgents().then(result=>console.log(result))
|
// getAgents().then(result=>console.log(result))
|
||||||
getMemories().then(result=>console.log(result))
|
// getMemories().then(result=>console.log(result))
|
||||||
|
|
||||||
// outside component to avoid render trigger
|
// outside component to avoid render trigger
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue