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 === "code" ||
type === "prompt" || type === "prompt" ||
type === "file" || type === "file" ||
type === "int" ||
type === "dict" || type === "dict" ||
type === "NestedDict" || type === "NestedDict") &&
type === "int") &&
!optionalHandle ? ( !optionalHandle ? (
<></> <></>
) : ( ) : (

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

@ -31,9 +31,16 @@ import {
import { darkContext } from "../../contexts/darkContext"; import { darkContext } from "../../contexts/darkContext";
import { typesContext } from "../../contexts/typesContext"; import { typesContext } from "../../contexts/typesContext";
import { codeTabsPropsType } from "../../types/components"; import { codeTabsPropsType } from "../../types/components";
import { unselectAllNodes } from "../../utils/reactflowUtils"; import {
convertObjToArray,
convertValuesToNumbers,
hasDuplicateKeys,
unselectAllNodes,
} from "../../utils/reactflowUtils";
import { classNames } from "../../utils/utils"; import { classNames } from "../../utils/utils";
import DictComponent from "../dictComponent";
import IconComponent from "../genericIconComponent"; import IconComponent from "../genericIconComponent";
import KeypairListComponent from "../keypairListComponent";
export default function CodeTabsComponent({ export default function CodeTabsComponent({
flow, flow,
@ -48,6 +55,7 @@ export default function CodeTabsComponent({
const [openAccordion, setOpenAccordion] = useState<string[]>([]); const [openAccordion, setOpenAccordion] = useState<string[]>([]);
const { dark } = useContext(darkContext); const { dark } = useContext(darkContext);
const { reactFlowInstance } = useContext(typesContext); const { reactFlowInstance } = useContext(typesContext);
const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
useEffect(() => { useEffect(() => {
if (flow && flow["data"]!["nodes"]) { if (flow && flow["data"]!["nodes"]) {
@ -248,7 +256,11 @@ export default function CodeTabsComponent({
node.data.node.template[templateField] node.data.node.template[templateField]
.type === "file" || .type === "file" ||
node.data.node.template[templateField] 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) => { .map((templateField, indx) => {
return ( return (
@ -725,6 +737,127 @@ export default function CodeTabsComponent({
/> />
</div> </div>
</ShadTooltip> </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[ ) : node.data.node.template[
templateField templateField
].type === "Any" ? ( ].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 { TemplateVariableType } from "../../types/api";
import { tweakType, uniqueTweakType } from "../../types/components"; import { tweakType, uniqueTweakType } from "../../types/components";
import { FlowType, NodeType } from "../../types/flow/index"; import { FlowType, NodeType } from "../../types/flow/index";
import { buildTweaks } from "../../utils/reactflowUtils"; import { buildTweaks, convertArrayToObj } from "../../utils/reactflowUtils";
import { import {
getCurlCode, getCurlCode,
getPythonApiCode, getPythonApiCode,
@ -105,7 +105,9 @@ const ApiModal = forwardRef(
node.data.node.template[templateField].type === "code" || node.data.node.template[templateField].type === "code" ||
node.data.node.template[templateField].type === "prompt" || node.data.node.template[templateField].type === "prompt" ||
node.data.node.template[templateField].type === "file" || 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) => { .map((n, i) => {
arrNodesWithValues.push(node["id"]); arrNodesWithValues.push(node["id"]);
@ -118,7 +120,7 @@ const ApiModal = forwardRef(
} }
function buildTweakObject( function buildTweakObject(
tw: string, tw: string,
changes: string | string[] | boolean | number, changes: string | string[] | boolean | number | Object[] | Object,
template: TemplateVariableType template: TemplateVariableType
) { ) {
if (typeof changes === "string" && template.type === "float") { if (typeof changes === "string" && template.type === "float") {
@ -131,6 +133,10 @@ const ApiModal = forwardRef(
changes = changes?.filter((x) => x !== ""); changes = changes?.filter((x) => x !== "");
} }
if (template.type === "dict") {
changes = convertArrayToObj(changes);
}
const existingTweak = tweak.current.find((element) => const existingTweak = tweak.current.find((element) =>
element.hasOwnProperty(tw) element.hasOwnProperty(tw)
); );

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

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

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

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

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

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