ExternalVendorCode/ChainForge
1
0
Fork 0
mirror of https://github.com/ianarawjo/ChainForge.git synced 2025-03-14 16:26:45 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Use Mantine badges for prompt var labels

Browse Source
This commit is contained in:
Ian Arawjo 2023-05-02 19:10:24 -04:00
parent 187be40b3f
commit 1a1533530c
3 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
chain-forge/src/PromptNode.js
View File

@ -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:&nbsp;</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">

5
chain-forge/src/TemplateHooksComponent.js
View File

@ -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>)
});

5
chain-forge/src/text-fields-node.css
View File

@ -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;