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

🐛 fix(parameterComponent): add support for 'int' type in conditional rendering to display a component

Browse source 
✨ feat(parameterComponent): add support for 'dict' and 'NestedDict' types in conditional rendering to display a component
🐛 fix(codeTabsComponent): import missing functions from reactflowUtils to fix build error
✨ feat(codeTabsComponent): add support for 'dict' and 'NestedDict' types in conditional rendering to display a component
✨ feat(codeTabsComponent): add DictComponent and KeypairListComponent to handle 'dict' and 'NestedDict' types
🐛 fix(ApiModal): import missing function from reactflowUtils to fix build error
✨ feat(ApiModal): add support for 'dict' and 'NestedDict' types in conditional rendering to display a component
🐛 fix(types): add Object type to buildTweakObject function in codeTabsPropsType
🐛 fix(reactflowUtils): add missing convertArrayToObj function to convert array of objects to object
✨ feat(reactflowUtils): add convertArrayToObj function to convert array of objects to object

🐛 fix(utils.ts): fix indentation and formatting issues in groupByFamily function
🐛 fix(utils.ts): fix indentation and formatting issues in buildTweakObject function
🐛 fix(utils.ts): fix indentation and formatting issues in getPythonApiCode function
🐛 fix(utils.ts): fix indentation and formatting issues in getCurlCode function
🐛 fix(utils.ts): fix indentation and formatting issues in getPythonCode function
🐛 fix(utils.ts): fix indentation and formatting issues in getChatComponentCode function
This commit is contained in:
Cristhian Zanforlin Lousa 2023-09-26 12:07:31 -03:00
commit df3ce5a3d8
6 changed files with 201 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -268,9 +268,9 @@ export default function ParameterComponent({
type === "code" ||
type === "prompt" ||
type === "file" ||
type === "int" ||
type === "dict" ||
type === "NestedDict" ||
type === "int") &&
type === "NestedDict") &&
!optionalHandle ? (
<></>
) : (

137
src/frontend/src/components/codeTabsComponent/index.tsx
View file

@ -31,9 +31,16 @@ import {
import { darkContext } from "../../contexts/darkContext";
import { typesContext } from "../../contexts/typesContext";
import { codeTabsPropsType } from "../../types/components";
import { unselectAllNodes } from "../../utils/reactflowUtils";
import {
convertObjToArray,
convertValuesToNumbers,
hasDuplicateKeys,
unselectAllNodes,
} from "../../utils/reactflowUtils";
import { classNames } from "../../utils/utils";
import DictComponent from "../dictComponent";
import IconComponent from "../genericIconComponent";
import KeypairListComponent from "../keypairListComponent";
export default function CodeTabsComponent({
flow,
@ -48,6 +55,7 @@ export default function CodeTabsComponent({
const [openAccordion, setOpenAccordion] = useState<string[]>([]);
const { dark } = useContext(darkContext);
const { reactFlowInstance } = useContext(typesContext);
const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
useEffect(() => {
if (flow && flow["data"]!["nodes"]) {
@ -248,7 +256,11 @@ export default function CodeTabsComponent({
node.data.node.template[templateField]
.type === "file" ||
node.data.node.template[templateField]
.type === "int")
.type === "int" ||
node.data.node.template[templateField]
.type === "dict" ||
node.data.node.template[templateField]
.type === "NestedDict")
)
.map((templateField, indx) => {
return (
@ -725,6 +737,127 @@ export default function CodeTabsComponent({
/>
</div>
</ShadTooltip>
) : node.data.node.template[
templateField
].type === "dict" ? (
<ShadTooltip
content={tweaks.buildContent!(
tweaks.getValue!(
node.data.node.template[
templateField
].value,
node.data,
node.data.node.template[
templateField
]
)
)}
>
<div className="mx-auto">
<KeypairListComponent
disabled={false}
editNode={true}
value={
node.data.node!.template[
templateField
].value?.length === 0 ||
!node.data.node!.template[
templateField
].value
? [{ "": "" }]
: convertObjToArray(
node.data.node!
.template[
templateField
].value
)
}
duplicateKey={
errorDuplicateKey
}
onChange={(target) => {
const valueToNumbers =
convertValuesToNumbers(
target
);
node.data.node!.template[
templateField
].value = valueToNumbers;
setErrorDuplicateKey(
hasDuplicateKeys(
valueToNumbers
)
);
setData((old) => {
let newInputList =
cloneDeep(old);
newInputList![
i
].data.node.template[
templateField
].value = target;
return newInputList;
});
tweaks.buildTweakObject!(
node["data"]["id"],
target,
node.data.node.template[
templateField
]
);
}}
/>
</div>
</ShadTooltip>
) : node.data.node.template[
templateField
].type === "NestedDict" ? (
<ShadTooltip
content={tweaks.buildContent!(
tweaks.getValue!(
node.data.node.template[
templateField
].value,
node.data,
node.data.node.template[
templateField
]
)
)}
>
<div className="mx-auto">
<DictComponent
disabled={false}
editNode={true}
value={
node.data.node!.template[
templateField
].value ?? {
yourkey: "value",
}
}
onChange={(target) => {
setData((old) => {
let newInputList =
cloneDeep(old);
newInputList![
i
].data.node.template[
templateField
].value = target;
return newInputList;
});
tweaks.buildTweakObject!(
node["data"]["id"],
target,
node.data.node.template[
templateField
]
);
}}
/>
</div>
</ShadTooltip>
) : node.data.node.template[
templateField
].type === "Any" ? (

12
src/frontend/src/modals/ApiModal/index.tsx
View file

@ -19,7 +19,7 @@ import { TabsContext } from "../../contexts/tabsContext";
import { TemplateVariableType } from "../../types/api";
import { tweakType, uniqueTweakType } from "../../types/components";
import { FlowType, NodeType } from "../../types/flow/index";
import { buildTweaks } from "../../utils/reactflowUtils";
import { buildTweaks, convertArrayToObj } from "../../utils/reactflowUtils";
import {
getCurlCode,
getPythonApiCode,
@ -105,7 +105,9 @@ const ApiModal = forwardRef(
node.data.node.template[templateField].type === "code" ||
node.data.node.template[templateField].type === "prompt" ||
node.data.node.template[templateField].type === "file" ||
node.data.node.template[templateField].type === "int")
node.data.node.template[templateField].type === "int" ||
node.data.node.template[templateField].type === "dict" ||
node.data.node.template[templateField].type === "NestedDict")
)
.map((n, i) => {
arrNodesWithValues.push(node["id"]);
@ -118,7 +120,7 @@ const ApiModal = forwardRef(
}
function buildTweakObject(
tw: string,
changes: string | string[] | boolean | number,
changes: string | string[] | boolean | number | Object[] | Object,
template: TemplateVariableType
) {
if (typeof changes === "string" && template.type === "float") {
@ -131,6 +133,10 @@ const ApiModal = forwardRef(
changes = changes?.filter((x) => x !== "");
}
if (template.type === "dict") {
changes = convertArrayToObj(changes);
}
const existingTweak = tweak.current.find((element) =>
element.hasOwnProperty(tw)
);

26
src/frontend/src/types/components/index.ts
View file

@ -134,18 +134,18 @@ export type TooltipComponentType = {
children: ReactElement;
title: string | ReactElement;
placement?:
| "bottom-end"
| "bottom-start"
| "bottom"
| "left-end"
| "left-start"
| "left"
| "right-end"
| "right-start"
| "right"
| "top-end"
| "top-start"
| "top";
| "bottom-end"
| "bottom-start"
| "bottom"
| "left-end"
| "left-start"
| "left"
| "right-end"
| "right-start"
| "right"
| "top-end"
| "top-start"
| "top";
};
export type ProgressBarType = {
@ -549,7 +549,7 @@ export type codeTabsPropsType = {
) => string;
buildTweakObject?: (
tw: string,
changes: string | string[] | boolean | number,
changes: string | string[] | boolean | number | Object[] | Object,
template: TemplateVariableType
) => string | void;
};

24
src/frontend/src/utils/reactflowUtils.ts
View file

@ -220,8 +220,7 @@ export function validateNode(
)
) {
errors.push(
`${type} is missing ${
template.display_name || toNormalCase(template[t].name)
`${type} is missing ${template.display_name || toNormalCase(template[t].name)
}.`
);
} else if (
@ -234,14 +233,12 @@ export function validateNode(
) {
if (hasDuplicateKeys(template[t].value))
errors.push(
`${type} (${
template.display_name || template[t].name
`${type} (${template.display_name || template[t].name
}) contains duplicate keys with the same values.`
);
if (hasEmptyKey(template[t].value))
errors.push(
`${type} (${
template.display_name || template[t].name
`${type} (${template.display_name || template[t].name
}) field must not be empty.`
);
}
@ -325,6 +322,21 @@ export function convertObjToArray(singleObject) {
return arrConverted;
}
export function convertArrayToObj(arrayOfObjects) {
if (!Array.isArray(arrayOfObjects)) return arrayOfObjects;
let objConverted = {};
for (const obj of arrayOfObjects) {
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
objConverted[key] = obj[key];
}
}
}
return objConverted;
}
export function hasDuplicateKeys(array) {
const keys = {};
for (const obj of array) {

57
src/frontend/src/utils/utils.ts
View file

@ -186,13 +186,13 @@ export function groupByFamily(
return left
? arrOfPossibleOutputs.map((output) => ({
family: output.category,
type: output.full ? "" : output.nodes.join(", "),
}))
family: output.category,
type: output.full ? "" : output.nodes.join(", "),
}))
: arrOfPossibleInputs.map((input) => ({
family: input.category,
type: input.full ? "" : input.nodes.join(", "),
}));
family: input.category,
type: input.full ? "" : input.nodes.join(", "),
}));
}
export function buildInputs(tabsState: TabsState, id: string): string {
@ -262,7 +262,7 @@ export function buildTweakObject(tweak: tweakType) {
for (let kp in el[key]) {
try {
el[key][kp] = JSON.parse(el[key][kp]);
} catch {}
} catch { }
}
});
});
@ -314,21 +314,18 @@ export function getPythonApiCode(
return `import requests
from typing import Optional
BASE_API_URL = "${window.location.protocol}//${
window.location.host
}/api/v1/process"
BASE_API_URL = "${window.location.protocol}//${window.location.host
}/api/v1/process"
FLOW_ID = "${flowId}"
# You can tweak the flow by adding a tweaks dictionary
# e.g {"OpenAI-XXXXX": {"model_name": "gpt-4"}}
TWEAKS = ${
tweak && tweak.length > 0
TWEAKS = ${tweak && tweak.length > 0
? buildTweakObject(tweak)
: JSON.stringify(tweaks, null, 2)
}
}
def run_flow(inputs: dict, flow_id: str, tweaks: Optional[dict] = None${
!isAuth ? `, apiKey: str=""` : ""
}) -> dict:
def run_flow(inputs: dict, flow_id: str, tweaks: Optional[dict] = None${!isAuth ? `, apiKey: str=""` : ""
}) -> dict:
"""
Run a flow with a given message and optional tweaks.
@ -350,9 +347,8 @@ def run_flow(inputs: dict, flow_id: str, tweaks: Optional[dict] = None${
# Setup any tweaks you want to apply to the flow
inputs = ${inputs}
${!isAuth ? `api_key = "<your api key>"` : ""}
print(run_flow(inputs, flow_id=FLOW_ID, tweaks=TWEAKS${
!isAuth ? `, apiKey=api_key` : ""
}))`;
print(run_flow(inputs, flow_id=FLOW_ID, tweaks=TWEAKS${!isAuth ? `, apiKey=api_key` : ""
}))`;
}
/**
@ -371,16 +367,14 @@ export function getCurlCode(
const inputs = buildInputs(tabsState!, flow.id);
return `curl -X POST \\
${window.location.protocol}//${
window.location.host
}/api/v1/process/${flowId} \\
${window.location.protocol}//${window.location.host
}/api/v1/process/${flowId} \\
-H 'Content-Type: application/json'\\
${!isAuth ? `-H 'api-key: <your api key>'\\` : ""}
-d '{"inputs": ${inputs}, "tweaks": ${
tweak && tweak.length > 0
-d '{"inputs": ${inputs}, "tweaks": ${tweak && tweak.length > 0
? buildTweakObject(tweak)
: JSON.stringify(tweaks, null, 2)
}}'`;
}}'`;
}
/**
@ -397,11 +391,10 @@ export function getPythonCode(
const tweaks = buildTweaks(flow);
const inputs = buildInputs(tabsState!, flow.id);
return `from langflow import load_flow_from_json
TWEAKS = ${
tweak && tweak.length > 0
TWEAKS = ${tweak && tweak.length > 0
? buildTweakObject(tweak)
: JSON.stringify(tweaks, null, 2)
}
}
flow = load_flow_from_json("${flowName}.json", tweaks=TWEAKS)
# Now you can use it like any chain
inputs = ${inputs}
@ -431,18 +424,16 @@ chat_input_field: Input key that you want the chat to send the user message with
<langflow-chat
window_title="${flowName}"
flow_id="${flowId}"
${
tabsState![flow.id] && tabsState![flow.id].formKeysData
${tabsState![flow.id] && tabsState![flow.id].formKeysData
? `chat_inputs='${inputs}'
chat_input_field="${chat_input_field}"
`
: ""
}host_url="http://localhost:7860"${
!isAuth
}host_url="http://localhost:7860"${!isAuth
? `
api_key="..."`
: ""
}
}
></langflow-chat>`;
}