mirror of
https://github.com/ianarawjo/ChainForge.git
synced 2025-03-14 16:26:45 +00:00
Offload template hooks to separate component
This commit is contained in:
parent
7d87dfddda
commit
0584600334
@ -3,6 +3,7 @@ import { Handle } from 'react-flow-renderer';
|
||||
import useStore from './store';
|
||||
import StatusIndicator from './StatusIndicatorComponent'
|
||||
import NodeLabel from './NodeLabelComponent'
|
||||
import TemplateHooks from './TemplateHooksComponent'
|
||||
|
||||
// Helper funcs
|
||||
const truncStr = (s, maxLen) => {
|
||||
@ -36,30 +37,8 @@ const PromptNode = ({ data, id }) => {
|
||||
const output = useStore((state) => state.output);
|
||||
const setDataPropsForNode = useStore((state) => state.setDataPropsForNode);
|
||||
|
||||
const genTemplateHooks = (temp_var_names, names_to_blink) => {
|
||||
return temp_var_names.map(
|
||||
(name, idx) => {
|
||||
const className = (names_to_blink.includes(name)) ? 'text-blink' : '';
|
||||
const pos = (idx * 35) + 140 + 'px';
|
||||
const style = { top: pos, background: '#555' };
|
||||
return (
|
||||
<div key={name} className={className} >
|
||||
<p>{name}</p>
|
||||
<Handle
|
||||
type="target"
|
||||
position="left"
|
||||
id={name}
|
||||
style={style}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const [hovered, setHovered] = useState(false);
|
||||
const [templateVars, setTemplateVars] = useState(data.vars || []);
|
||||
const [templateHooks, setTemplateHooks] = useState(genTemplateHooks(data.vars || [], []));
|
||||
const [promptText, setPromptText] = useState(data.prompt);
|
||||
const [promptTextOnLastRun, setPromptTextOnLastRun] = useState(null);
|
||||
const [selectedLLMs, setSelectedLLMs] = useState(['gpt3.5']);
|
||||
@ -90,28 +69,24 @@ const PromptNode = ({ data, id }) => {
|
||||
}
|
||||
}
|
||||
|
||||
// Update template var fields + handles
|
||||
const braces_regex = /(?<!\\){(.*?)(?<!\\)}/g; // gets all strs within braces {} that aren't escaped; e.g., ignores \{this\} but captures {this}
|
||||
const found_template_vars = value.match(braces_regex);
|
||||
if (found_template_vars && found_template_vars.length > 0) {
|
||||
const temp_var_names = found_template_vars.map(
|
||||
name => name.substring(1, name.length-1)
|
||||
name => name.substring(1, name.length-1) // remove brackets {}
|
||||
)
|
||||
setTemplateVars(temp_var_names);
|
||||
setTemplateHooks(
|
||||
genTemplateHooks(temp_var_names, [])
|
||||
);
|
||||
setDataPropsForNode(id, {vars: temp_var_names});
|
||||
} else {
|
||||
setTemplateHooks([]);
|
||||
setDataPropsForNode(id, {vars: []});
|
||||
setTemplateVars([]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRunClick = (event) => {
|
||||
// Go through all template hooks (if any) and check they're connected:
|
||||
const is_fully_connected = templateHooks.every(hook => {
|
||||
const is_fully_connected = templateVars.every(varname => {
|
||||
// Check that some edge has, as its target, this node and its template hook:
|
||||
return edges.some(e => (e.target == id && e.targetHandle == hook.key));
|
||||
return edges.some(e => (e.target == id && e.targetHandle == varname));
|
||||
});
|
||||
|
||||
// console.log(templateHooks);
|
||||
@ -130,18 +105,18 @@ const PromptNode = ({ data, id }) => {
|
||||
|
||||
// Pull data from each source:
|
||||
const pulled_data = {};
|
||||
templateHooks.forEach(hook => {
|
||||
templateVars.forEach(varname => {
|
||||
// Find the relevant edge (breaking once we've found it):
|
||||
for (let i = 0; i < edges.length; i++) {
|
||||
const e = edges[i];
|
||||
if (e.target == id && e.targetHandle == hook.key) {
|
||||
if (e.target == id && e.targetHandle == varname) {
|
||||
// Get the data output for that handle on the source node:
|
||||
let out = output(e.source, e.sourceHandle);
|
||||
if (!Array.isArray(out)) out = [out];
|
||||
if (hook.key in pulled_data)
|
||||
pulled_data[hook.key] = pulled_data[hook.key].concat(out);
|
||||
if (varname in pulled_data)
|
||||
pulled_data[varname] = pulled_data[varname].concat(out);
|
||||
else
|
||||
pulled_data[hook.key] = out;
|
||||
pulled_data[varname] = out;
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -212,20 +187,7 @@ const PromptNode = ({ data, id }) => {
|
||||
} else {
|
||||
console.log('Not connected! :(');
|
||||
|
||||
// Blink the names of unconnected params:
|
||||
const names_to_blink = templateVars.filter(name => {
|
||||
return !edges.some(e => (e.target == id && e.targetHandle == name));
|
||||
});
|
||||
setTemplateHooks(
|
||||
genTemplateHooks(templateVars, names_to_blink)
|
||||
);
|
||||
|
||||
// Set timeout to turn off blinking:
|
||||
setTimeout(() => {
|
||||
setTemplateHooks(
|
||||
genTemplateHooks(templateVars, [])
|
||||
);
|
||||
}, 750*2);
|
||||
// TODO: Blink the names of unconnected params
|
||||
}
|
||||
}
|
||||
|
||||
@ -302,9 +264,7 @@ const PromptNode = ({ data, id }) => {
|
||||
style={{ top: '50%', background: '#555' }}
|
||||
/>
|
||||
</div>
|
||||
<div className="template-hooks">
|
||||
{templateHooks}
|
||||
</div>
|
||||
<TemplateHooks vars={templateVars} nodeId={id} startY={140} />
|
||||
<div>
|
||||
<hr />
|
||||
<div>
|
||||
|
39
chain-forge/src/TemplateHooksComponent.js
Normal file
39
chain-forge/src/TemplateHooksComponent.js
Normal file
@ -0,0 +1,39 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Handle } from 'react-flow-renderer';
|
||||
import useStore from './store'
|
||||
|
||||
export default function TemplateHooks({ vars, nodeId, startY }) {
|
||||
|
||||
const genTemplateHooks = (temp_var_names, names_to_blink) => {
|
||||
return temp_var_names.map((name, idx) => {
|
||||
const className = (names_to_blink.includes(name)) ? 'text-blink' : '';
|
||||
const pos = (idx * 35) + startY + 'px';
|
||||
const style = { top: pos, background: '#555' };
|
||||
return (<div key={name} className={className} >
|
||||
<p>{name}</p>
|
||||
<Handle type="target" position="left" id={name} style={style} />
|
||||
</div>)
|
||||
});
|
||||
};
|
||||
|
||||
const [templateHooks, setTemplateHooks] = useState(genTemplateHooks(vars || [], []));
|
||||
const setDataPropsForNode = useStore((state) => state.setDataPropsForNode);
|
||||
|
||||
const blinkTemplateVars = (vars_to_blink) => {
|
||||
setTemplateHooks(genTemplateHooks(vars, vars_to_blink));
|
||||
setTimeout(() => { // Set timeout to turn off blinking:
|
||||
blinkTemplateVars([]);
|
||||
}, 750*2);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setTemplateHooks(genTemplateHooks(vars, []));
|
||||
setDataPropsForNode(nodeId, {vars: vars});
|
||||
}, [vars]);
|
||||
|
||||
return (
|
||||
<div className="template-hooks">
|
||||
{templateHooks}
|
||||
</div>
|
||||
);
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user