From ddade145f8089ed6219129bc2acbb8278f4088db Mon Sep 17 00:00:00 2001 From: Ian Arawjo Date: Tue, 2 May 2023 22:20:21 -0400 Subject: [PATCH] Slightly better response preview styling --- chain-forge/src/PromptNode.js | 47 ++++++++++++++++++++-------- chain-forge/src/text-fields-node.css | 14 ++++----- 2 files changed, 41 insertions(+), 20 deletions(-) diff --git a/chain-forge/src/PromptNode.js b/chain-forge/src/PromptNode.js index 5a55a56..e0fcde0 100644 --- a/chain-forge/src/PromptNode.js +++ b/chain-forge/src/PromptNode.js @@ -1,11 +1,12 @@ -import React, { useEffect, useState, useCallback } from 'react'; +import React, { useEffect, useState, useRef, useCallback } from 'react'; import { Handle } from 'react-flow-renderer'; -import { Menu, Button, Text, useMantineTheme } from '@mantine/core'; +import { Menu, Badge, useMantineTheme } from '@mantine/core'; import useStore from './store'; import StatusIndicator from './StatusIndicatorComponent' import NodeLabel from './NodeLabelComponent' import TemplateHooks from './TemplateHooksComponent' import LLMList from './LLMListComponent' +import AlertModal from './AlertModal' // Available LLMs const llmItems = [ @@ -28,7 +29,7 @@ const vars_to_str = (vars) => { const s = truncStr(vars[varname].trim(), 12); return `${varname} = '${s}'`; }); - return pairs.join('; '); + return pairs; }; const bucketResponsesByLLM = (responses) => { let responses_by_llm = {}; @@ -58,6 +59,9 @@ const PromptNode = ({ data, id }) => { const [status, setStatus] = useState('none'); const [responsePreviews, setReponsePreviews] = useState([]); const [numGenerations, setNumGenerations] = useState(data.n || 1); + + // For displaying error messages to user + const alertModal = useRef(null); const handleMouseEnter = () => { setHovered(true); @@ -116,7 +120,7 @@ const PromptNode = ({ data, id }) => { // Set status indicator setStatus('loading'); - // Pull data from each source: + // Pull data from each source, recursively: const pulled_data = {}; const get_outputs = (varnames, nodeId) => { console.log(varnames); @@ -152,6 +156,11 @@ const PromptNode = ({ data, id }) => { pulled_data[varname] = pulled_data[varname].map(val => to_py_template_format(val)); }); + const rejected = (err) => { + setStatus('error'); + alertModal.current.trigger(err.message); + }; + // Run all prompt permutations through the LLM to generate + cache responses: fetch('http://localhost:5000/queryllm', { method: 'POST', @@ -167,10 +176,14 @@ const PromptNode = ({ data, id }) => { }, no_cache: false, }), - }).then(function(response) { + }, rejected).then(function(response) { return response.json(); - }).then(function(json) { - if (json.responses) { + }, rejected).then(function(json) { + if (!json) { + setStatus('error'); + alertModal.current.trigger('Request was sent and received by backend server, but there was no response.'); + } + else if (json.responses) { // Success! Change status to 'ready': setStatus('ready'); @@ -181,7 +194,8 @@ const PromptNode = ({ data, id }) => { // Save preview strings of responses, for quick glance // Bucket responses by LLM: const responses_by_llm = bucketResponsesByLLM(json.responses); - const colors = ['#cbf078', '#f1b963', '#e46161', '#f8f398', '#defcf9', '#cadefc', '#c3bef0', '#cca8e9']; + // const colors = ['#cbf078', '#f1b963', '#e46161', '#f8f398', '#defcf9', '#cadefc', '#c3bef0', '#cca8e9']; + // const colors = ['green', 'yellow', 'orange', 'red', 'pink', 'grape', 'violet', 'indigo', 'blue', 'gray', 'cyan', 'lime']; setReponsePreviews(Object.keys(responses_by_llm).map((llm, llm_idx) => { const resp_boxes = responses_by_llm[llm].map((res_obj, idx) => { const num_resp = res_obj['responses'].length; @@ -189,9 +203,13 @@ const PromptNode = ({ data, id }) => { (
{truncStr(r, 40)}({i+1} of {num_resp})
) ); const vars = vars_to_str(res_obj.vars); + const var_tags = vars.map((v, i) => ( + {v} + )); return ( -
-

{vars}

+
+ {var_tags} + {/*

{vars}

*/} {resp_prevs}
); @@ -207,13 +225,15 @@ const PromptNode = ({ data, id }) => { // Log responses for debugging: console.log(json.responses); } else { - console.error(json.error || 'Unknown error when querying LLM'); + setStatus('error'); + alertModal.current.trigger(json.error || 'Unknown error when querying LLM'); } - }); + }, rejected); console.log(pulled_data); } else { console.log('Not connected! :('); + alertModal.current.trigger('Missing inputs to one or more template variables.') // TODO: Blink the names of unconnected params } @@ -269,6 +289,7 @@ const PromptNode = ({ data, id }) => { nodeId={id} onEdit={hideStatusIndicator} /> +
@@ -293,7 +314,7 @@ const PromptNode = ({ data, id }) => {
-
+
Models to query:
diff --git a/chain-forge/src/text-fields-node.css b/chain-forge/src/text-fields-node.css index 2d428f6..0694cca 100644 --- a/chain-forge/src/text-fields-node.css +++ b/chain-forge/src/text-fields-node.css @@ -152,25 +152,26 @@ border-color: #aaa; padding: 2px; margin: 0px; - background-color: #fff; + background-color: rgba(255, 255, 255, 0.4); white-space: pre-wrap; } .llm-response-container { max-width: 450px; - background-color: #fff; } .llm-response-container h1 { + font-weight: 400; font-size: 10pt; - font-weight: bold; - margin: 4px; + margin: 6px 8px 0px 8px; padding-top: 2px; - padding-bottom: 2px; + padding-bottom: 0px; color: #222; } .response-preview-container { - max-height: 180px; + margin: 10px -9px -9px -9px; + max-height: 100px; overflow-y: auto; + background-color: #ace1aeb1; /* ACE1AF */ } .response-box { padding: 2px; @@ -179,7 +180,6 @@ .response-tag { font-size: 9pt; color: #555; - font-weight: 700; margin: 0px 0px 0px 2px; }