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

Merge branch 'dev' of https://github.com/logspace-ai/langflow into dev

Browse source
This commit is contained in:
Gabriel Almeida 2023-05-23 10:40:25 -03:00
commit 7228274b0d
3 changed files with 154 additions and 124 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/backend/langflow/template/nodes.py
View file

@ -122,6 +122,7 @@ class MidJourneyPromptChainNode(FrontendNode):
advanced=False, advanced=False,
multiline=False, multiline=False,
name="llm", name="llm",
display_name="LLM",
), ),
TemplateField( TemplateField(
field_type="BaseChatMemory", field_type="BaseChatMemory",
@ -156,6 +157,7 @@ class TimeTravelGuideChainNode(FrontendNode):
advanced=False, advanced=False,
multiline=False, multiline=False,
name="llm", name="llm",
display_name="LLM",
), ),
TemplateField( TemplateField(
field_type="BaseChatMemory", field_type="BaseChatMemory",
@ -210,6 +212,7 @@ class SeriesCharacterChainNode(FrontendNode):
advanced=False, advanced=False,
multiline=False, multiline=False,
name="llm", name="llm",
display_name="LLM",
), ),
], ],
) )
@ -295,6 +298,7 @@ class JsonAgentNode(FrontendNode):
required=True, required=True,
show=True, show=True,
name="llm", name="llm",
display_name="LLM",
), ),
], ],
) )
@ -341,6 +345,7 @@ class InitializeAgentNode(FrontendNode):
required=True, required=True,
show=True, show=True,
name="llm", name="llm",
display_name="LLM",
advanced=False, advanced=False,
), ),
], ],
@ -376,6 +381,7 @@ class CSVAgentNode(FrontendNode):
required=True, required=True,
show=True, show=True,
name="llm", name="llm",
display_name="LLM",
), ),
], ],
) )

26
src/frontend/src/components/toggleComponent/index.tsx
View file

@ -21,9 +21,9 @@ export default function ToggleComponent({
setEnabled(x); setEnabled(x);
}} }}
className={classNames( className={classNames(
enabled ? "bg-indigo-600" : "bg-gray-200 dark:bg-gray-600", enabled ? 'bg-indigo-600' : 'bg-gray-200',
"relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out " 'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2'
)} )}
> >
<span className="sr-only">Use setting</span> <span className="sr-only">Use setting</span>
<span <span
@ -44,19 +44,6 @@ export default function ToggleComponent({
)} )}
aria-hidden="true" aria-hidden="true"
> >
<svg
className="h-3 w-3 text-gray-400"
fill="none"
viewBox="0 0 12 12"
>
<path
d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</span> </span>
<span <span
className={classNames( className={classNames(
@ -67,13 +54,6 @@ export default function ToggleComponent({
)} )}
aria-hidden="true" aria-hidden="true"
> >
<svg
className="h-3 w-3 text-indigo-600"
fill="currentColor"
viewBox="0 0 12 12"
>
<path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z" />
</svg>
</span> </span>
</span> </span>
</Switch> </Switch>

246
src/frontend/src/modals/importModal/buttonBox/index.tsx
View file

@ -1,109 +1,153 @@
import React, { ReactNode } from "react"; import React, { ReactNode, useEffect } from "react";
import { DocumentDuplicateIcon } from "@heroicons/react/solid"; import { DocumentDuplicateIcon } from "@heroicons/react/solid";
import { classNames } from "../../../utils"; import { classNames } from "../../../utils";
import Tooltip from "../../../components/TooltipComponent"; import Tooltip from "../../../components/TooltipComponent";
export default function ButtonBox({ export default function ButtonBox({
onClick, onClick,
title, title,
description, description,
icon, icon,
bgColor, bgColor,
textColor, textColor,
deactivate, deactivate,
size, size,
}: { }: {
onClick: () => void; onClick: () => void;
title: string; title: string;
description: string; description: string;
icon: ReactNode; icon: ReactNode;
bgColor: string; bgColor: string;
textColor: string; textColor: string;
deactivate?: boolean; deactivate?: boolean;
size: "small" | "medium" | "big"; size: "small" | "medium" | "big";
}) { }) {
let bigCircle: string; let bigCircle: string;
let smallCircle: string; let smallCircle: string;
let titleFontSize: string; let titleFontSize: string;
let descriptionFontSize: string; let descriptionFontSize: string;
let padding: string; let padding: string;
let marginTop: string; let marginTop: string;
let height: string; let height: string;
let width: string; let width: string;
switch (size) { let textHeight: number;
case "small": let textWidth: number;
bigCircle = "h-12 w-12"; switch (size) {
smallCircle = "h-8 w-8"; case "small":
titleFontSize = "text-sm"; bigCircle = "h-12 w-12";
descriptionFontSize = "text-xs"; smallCircle = "h-8 w-8";
padding = "p-2 py-3"; titleFontSize = "text-sm";
marginTop = "mt-2"; descriptionFontSize = "text-xs";
height = "h-36"; padding = "p-2 py-3";
width = "w-32"; marginTop = "mt-2";
break; height = "h-36";
case "medium": textHeight = 70;
bigCircle = "h-16 w-16"; textWidth = 80;
smallCircle = "h-12 w-12"; width = "w-32";
titleFontSize = "text-base"; break;
descriptionFontSize = "text-sm"; case "medium":
padding = "p-4 py-5"; bigCircle = "h-16 w-16";
marginTop = "mt-3"; smallCircle = "h-12 w-12";
height = "h-44"; titleFontSize = "text-base";
width = "w-36"; descriptionFontSize = "text-sm";
break; padding = "p-4 py-5";
case "big": marginTop = "mt-3";
bigCircle = "h-20 w-20"; textHeight = 112;
smallCircle = "h-16 w-16"; textWidth = 162;
titleFontSize = "text-lg"; height = "h-44";
descriptionFontSize = "text-sm"; width = "w-36";
padding = "p-8 py-10"; break;
marginTop = "mt-6"; case "big":
height = "h-56"; bigCircle = "h-20 w-20";
width = "w-44"; smallCircle = "h-16 w-16";
break; titleFontSize = "text-lg";
default: descriptionFontSize = "text-sm";
bigCircle = "h-20 w-20"; padding = "p-8 py-10";
smallCircle = "h-16 w-16"; marginTop = "mt-6";
titleFontSize = "text-lg"; height = "h-56";
descriptionFontSize = "text-sm"; width = "w-44";
padding = "p-8 py-10"; break;
marginTop = "mt-6"; default:
height = "h-56"; bigCircle = "h-20 w-20";
width = "w-44"; smallCircle = "h-16 w-16";
break; titleFontSize = "text-lg";
} descriptionFontSize = "text-sm";
return ( padding = "p-8 py-10";
<button disabled={deactivate} onClick={onClick}> marginTop = "mt-6";
<div height = "h-56";
className={classNames( width = "w-44";
"flex flex-col justify-center items-center rounded-lg text-center shadow border border-gray-300 dark:border-gray-800 hover:shadow-lg transform hover:scale-105", break;
bgColor, }
height,
width, const titleRef = React.useRef<HTMLHeadingElement>(null);
padding
)} useEffect(() => {
> const resizeFont = () => {
<div const titleElement = titleRef.current;
className={`flex items-center justify-center ${bigCircle} bg-white/30 dark:bg-white/30 rounded-full`} if (titleElement) {
> const containerWidth = titleElement.offsetWidth;
<div const containerHeight = titleElement.offsetHeight;
className={`flex items-center justify-center ${smallCircle} bg-white dark:bg-white/80 rounded-full`}
> const titleComputedStyle = window.getComputedStyle(titleElement);
<div className={textColor}>{icon}</div> const titleWidth = titleElement.getBoundingClientRect().width;
</div>
</div> const currentFontSize = parseFloat(titleComputedStyle.fontSize);
<div className="w-full mt-auto mb-auto">
<h3 const desiredWidth = textWidth - 10; // Subtracting the desired padding
className={classNames(
"w-full font-semibold break-words text-white dark:text-white/80", // Calculate the desired font size based on the adjusted width
titleFontSize, let desiredFontSize = currentFontSize * (desiredWidth / titleWidth);
marginTop
)} // Adjust the desired font size to fit within the container height, if needed
> const maxHeight = containerHeight - 10; // Subtracting the desired top padding
{title} const maxHeightFontSize = maxHeight * 0.8; // Adjust the scaling factor as needed
</h3> desiredFontSize = Math.min(desiredFontSize, maxHeightFontSize);
</div>
</div> // Apply the desired font size and padding to the title element
</button> titleElement.style.fontSize = `${desiredFontSize}px`;
); titleElement.style.paddingLeft = "5px";
titleElement.style.paddingRight = "5px";
}
};
resizeFont();
window.addEventListener("resize", resizeFont);
return () => {
window.removeEventListener("resize", resizeFont);
};
}, []);
return (
<button disabled={deactivate} onClick={onClick}>
<div
className={classNames(
"flex flex-col justify-center items-center rounded-lg text-center shadow border border-gray-300 dark:border-gray-800 hover:shadow-lg transform hover:scale-105",
bgColor,
height,
width,
padding
)}
>
<div
className={`flex items-center justify-center ${bigCircle} bg-white/30 dark:bg-white/30 rounded-full`}
>
<div
className={`flex items-center justify-center ${smallCircle} bg-white dark:bg-white/80 rounded-full`}
>
<div className={textColor}>{icon}</div>
</div>
</div>
<h3
ref={titleRef}
className={classNames(
" font-semibold text-white dark:text-white/80",
marginTop
)}
>
{title}
</h3>
</div>
</button>
);
} }