mirror of
https://github.com/ianarawjo/ChainForge.git
synced 2025-03-14 16:26:45 +00:00
Use Mantine badges for prompt var labels
This commit is contained in:
parent
187be40b3f
commit
1a1533530c
@ -12,7 +12,8 @@ const llmItems = [
|
||||
{ model: "GPT3.5", emoji: "🙂", temp: 1.0 },
|
||||
{ model: "GPT4", emoji: "🥵", temp: 1.0 },
|
||||
{ model: "Alpaca 7B", emoji: "🦙", temp: 0.5 },
|
||||
{ model: "Claude v1", emoji: "📚", temp: 0.5 }
|
||||
{ model: "Claude v1", emoji: "📚", temp: 0.5 },
|
||||
{ model: "Ian Chatbot", emoji: "💩", temp: 0.5 }
|
||||
];
|
||||
|
||||
// Helper funcs
|
||||
@ -286,12 +287,13 @@ const PromptNode = ({ data, id }) => {
|
||||
/>
|
||||
</div>
|
||||
<TemplateHooks vars={templateVars} nodeId={id} startY={140} />
|
||||
<hr />
|
||||
<div>
|
||||
<div style={{marginBottom: '10px', padding: '4px'}}>
|
||||
<label htmlFor="num-generations" style={{fontSize: '10pt'}}>Num responses per prompt: </label>
|
||||
<input id="num-generations" name="num-generations" type="number" min={1} max={50} defaultValue={data.n || 1} onChange={handleNumGenChange} className="nodrag"></input>
|
||||
</div>
|
||||
<div id="llms-list" style={{backgroundColor: '#eee', padding: '8px', boxShadow: 'inset 0 0 30px #fff'}}>
|
||||
<div id="llms-list" className="nowheel" style={{backgroundColor: '#eee', padding: '8px', boxShadow: 'inset 0 0 30px #fff', overflowY: 'auto', maxHeight: '220px'}}>
|
||||
<div style={{marginTop: '6px', marginBottom: '6px', marginLeft: '6px', paddingBottom: '4px', textAlign: 'left', fontSize: '10pt', color: '#777'}}>
|
||||
Models to query:
|
||||
<div className="add-llm-model-btn nodrag">
|
||||
|
@ -1,16 +1,17 @@
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import { Handle } from 'react-flow-renderer';
|
||||
import { Badge } from '@mantine/core';
|
||||
import useStore from './store'
|
||||
|
||||
export default function TemplateHooks({ vars, nodeId, startY }) {
|
||||
|
||||
const genTemplateHooks = useCallback((temp_var_names, names_to_blink) => {
|
||||
return temp_var_names.map((name, idx) => {
|
||||
const className = (names_to_blink.includes(name)) ? 'text-blink' : '';
|
||||
const className = (names_to_blink.includes(name)) ? 'hook-tag text-blink' : 'hook-tag';
|
||||
const pos = (idx * 35) + startY + 'px';
|
||||
const style = { top: pos, background: '#555' };
|
||||
return (<div key={name} className={className} >
|
||||
<p>{name}</p>
|
||||
<Badge color="indigo" size="md" radius="sm">{name}</Badge>
|
||||
<Handle type="target" position="left" id={name} style={style} />
|
||||
</div>)
|
||||
});
|
||||
|
@ -203,6 +203,11 @@
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
}
|
||||
|
||||
.hook-tag {
|
||||
padding-top: 11px;;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
.code-mirror-field-header {
|
||||
font-size: 10pt;
|
||||
color: #333;
|
||||
|
Loading…
x
Reference in New Issue
Block a user