From 8d5d0665f876996462022c741924a32ce2d2eafe Mon Sep 17 00:00:00 2001 From: Ian Arawjo Date: Sat, 23 Mar 2024 23:11:32 -0400 Subject: [PATCH] wip --- chainforge/react-server/src/LLMEvalNode.tsx | 31 +++++++++++---------- chainforge/react-server/src/VisNode.tsx | 4 +-- 2 files changed, 18 insertions(+), 17 deletions(-) diff --git a/chainforge/react-server/src/LLMEvalNode.tsx b/chainforge/react-server/src/LLMEvalNode.tsx index 9956583..8b9777d 100644 --- a/chainforge/react-server/src/LLMEvalNode.tsx +++ b/chainforge/react-server/src/LLMEvalNode.tsx @@ -7,7 +7,7 @@ import React, { useImperativeHandle, useContext, } from "react"; -import { Handle } from "reactflow"; +import { Handle, Position } from "reactflow"; import { Group, NativeSelect, Progress, Text, Textarea } from "@mantine/core"; import { IconRobot, IconSearch } from "@tabler/icons-react"; import { v4 as uuid } from "uuid"; @@ -23,6 +23,7 @@ import LLMResponseInspectorDrawer from "./LLMResponseInspectorDrawer"; import { stripLLMDetailsFromResponses } from "./backend/utils"; import { AlertModalContext } from "./AlertModal"; import { QueryProgress } from "./backend/typing"; +import { Status } from "./StatusIndicatorComponent"; // The default prompt shown in gray highlights to give people a good example of an evaluation prompt. const PLACEHOLDER_PROMPT = @@ -175,8 +176,8 @@ export const LLMEvaluatorComponent = forwardRef(function LLMEvaluatorComponent( : undefined } className="prompt-field-fixed nodrag nowheel" - minRows="4" - maxRows="12" + minRows={4} + maxRows={12} w="100%" mb="sm" value={promptText} @@ -213,7 +214,7 @@ const LLMEvaluatorNode = ({ data, id }) => { // The inner component storing the UI and logic for running the LLM-based evaluation const llmEvaluatorRef = useRef(null); - const [status, setStatus] = useState("none"); + const [status, setStatus] = useState(Status.NONE); const showAlert = useContext(AlertModalContext); const inspectModal = useRef(null); @@ -241,11 +242,11 @@ const LLMEvaluatorNode = ({ data, id }) => { return; } - setStatus("loading"); + setStatus(Status.LOADING); setProgress({ success: 2, error: 0 }); - const handleError = (err) => { - setStatus("error"); + const handleError = (err: Error | string) => { + setStatus(Status.ERROR); setProgress(undefined); if (typeof err !== "string") console.error(err); if (showAlert) showAlert(typeof err === "string" ? err : err?.message); @@ -290,7 +291,7 @@ const LLMEvaluatorNode = ({ data, id }) => { if (!showDrawer) setUninspectedResponses(true); - setStatus("ready"); + setStatus(Status.READY); setProgress(undefined); }) .catch(handleError); @@ -314,7 +315,7 @@ const LLMEvaluatorNode = ({ data, id }) => { useEffect(() => { if (data.refresh && data.refresh === true) { setDataPropsForNode(id, { refresh: false }); - setStatus("warning"); + setStatus(Status.WARNING); } }, [data]); @@ -327,7 +328,7 @@ const LLMEvaluatorNode = ({ data, id }) => { if (json.responses && json.responses.length > 0) { // Store responses and set status to green checkmark setLastResponses(stripLLMDetailsFromResponses(json.responses)); - setStatus("ready"); + setStatus(Status.READY); } }); }, []); @@ -335,7 +336,7 @@ const LLMEvaluatorNode = ({ data, id }) => { return ( } status={status} @@ -351,9 +352,9 @@ const LLMEvaluatorNode = ({ data, id }) => { { + onPromptEdit={(prompt: string) => { setDataPropsForNode(id, { prompt }); - setStatus("warning"); + setStatus(Status.WARNING); }} onLLMGraderChange={(new_grader) => setDataPropsForNode(id, { grader: new_grader }) @@ -394,14 +395,14 @@ const LLMEvaluatorNode = ({ data, id }) => { = ({ data, id }) => { setResponses(json.responses.toReversed()); // Find all vars in responses - let varnames = new Set(); - let metavars = new Set(); + let varnames = new Set(); + let metavars = new Set(); json.responses.forEach((resp_obj) => { Object.keys(resp_obj.vars).forEach((v) => varnames.add(v)); if (resp_obj.metavars)