mirror of
https://github.com/ianarawjo/ChainForge.git
synced 2025-03-14 16:26:45 +00:00
Add LLM button
This commit is contained in:
parent
6105522ad1
commit
187be40b3f
@ -3,15 +3,8 @@ import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
|
||||
import ListItem, { DragItem, ListItemClone } from "./ListItemComponent";
|
||||
import { StrictModeDroppable } from './StrictModeDroppable'
|
||||
|
||||
const llmItems = [
|
||||
{ model: "🙂 GPT3.5", temp: 1.0 },
|
||||
{ model: "🥵 GPT4", temp: 1.0 },
|
||||
{ model: "🦙 Alpaca 7B", temp: 0.5 },
|
||||
{ model: "📚 Claude v1", temp: 0.5 }
|
||||
];
|
||||
|
||||
export default function LLMList() {
|
||||
const [items, setItems] = useState(llmItems);
|
||||
export default function LLMList({llms}) {
|
||||
const [items, setItems] = useState(llms);
|
||||
|
||||
const onDragEnd = (result) => {
|
||||
const { destination, source } = result;
|
||||
|
@ -44,7 +44,7 @@ const ListItem = ({ item, provided, snapshot }) => {
|
||||
{...provided.dragHandleProps}
|
||||
>
|
||||
<div>
|
||||
<CardHeader>{item.model}</CardHeader>
|
||||
<CardHeader>{item.emoji} {item.model}</CardHeader>
|
||||
<SettingsButton />
|
||||
</div>
|
||||
|
||||
@ -61,7 +61,7 @@ export const ListItemClone = ({ item, provided, snapshot }) => {
|
||||
snapshot={snapshot}
|
||||
>
|
||||
<div>
|
||||
<CardHeader>{item.model}</CardHeader>
|
||||
<CardHeader>{item.emoji} {item.model}</CardHeader>
|
||||
<SettingsButton />
|
||||
</div>
|
||||
</DragItem>
|
||||
|
@ -1,11 +1,20 @@
|
||||
import React, { useEffect, useState, useCallback } from 'react';
|
||||
import { Handle } from 'react-flow-renderer';
|
||||
import { Menu, Button, Text, useMantineTheme } from '@mantine/core';
|
||||
import useStore from './store';
|
||||
import StatusIndicator from './StatusIndicatorComponent'
|
||||
import NodeLabel from './NodeLabelComponent'
|
||||
import TemplateHooks from './TemplateHooksComponent'
|
||||
import LLMList from './LLMListComponent'
|
||||
|
||||
// Available LLMs
|
||||
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 }
|
||||
];
|
||||
|
||||
// Helper funcs
|
||||
const truncStr = (s, maxLen) => {
|
||||
if (s.length > maxLen) // Cut the name short if it's long
|
||||
@ -32,6 +41,7 @@ const bucketResponsesByLLM = (responses) => {
|
||||
};
|
||||
|
||||
const PromptNode = ({ data, id }) => {
|
||||
const theme = useMantineTheme();
|
||||
|
||||
// Get state from the Zustand store:
|
||||
const edges = useStore((state) => state.edges);
|
||||
@ -234,16 +244,6 @@ const PromptNode = ({ data, id }) => {
|
||||
}
|
||||
};
|
||||
|
||||
// const nodeLabelRef = React.useRef(null);
|
||||
// const makeEditable = () => {
|
||||
// if (nodeLabelRef.current) {
|
||||
// for (const child of nodeLabelRef.current.children) {
|
||||
// console.log(child.children);
|
||||
// child.contentEditable = 'true';
|
||||
// }
|
||||
// }
|
||||
// };
|
||||
|
||||
const hideStatusIndicator = () => {
|
||||
if (status !== 'none') { setStatus('none'); }
|
||||
};
|
||||
@ -252,26 +252,9 @@ const PromptNode = ({ data, id }) => {
|
||||
? '1px solid #222'
|
||||
: '1px solid #999';
|
||||
|
||||
const llm_list_data = [
|
||||
{
|
||||
"position": 6,
|
||||
"mass": 12.011,
|
||||
"symbol": "C",
|
||||
"name": "Carbon"
|
||||
},
|
||||
{
|
||||
"position": 7,
|
||||
"mass": 14.007,
|
||||
"symbol": "N",
|
||||
"name": "Nitrogen"
|
||||
},
|
||||
{
|
||||
"position": 39,
|
||||
"mass": 88.906,
|
||||
"symbol": "Y",
|
||||
"name": "Yttrium"
|
||||
}
|
||||
];
|
||||
const selectedModel = (name) => {
|
||||
console.log(name);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -312,12 +295,23 @@ const PromptNode = ({ data, id }) => {
|
||||
<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">
|
||||
<button>Add +</button>
|
||||
<Menu transitionProps={{ transition: 'pop-top-left' }}
|
||||
position="bottom-start"
|
||||
width={220}
|
||||
withinPortal={true}
|
||||
>
|
||||
<Menu.Target>
|
||||
<button>Add +</button>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
{llmItems.map(item => (<Menu.Item key={item.model} onClick={() => selectedModel(item.model)} icon={item.emoji}>{item.model}</Menu.Item>))}
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="nodrag">
|
||||
<LLMList data={llm_list_data} />
|
||||
<LLMList llms={llmItems} />
|
||||
{/* <input type="checkbox" id="gpt3.5" name="gpt3.5" value="gpt3.5" defaultChecked={true} onChange={handleLLMChecked} />
|
||||
<label htmlFor="gpt3.5">GPT3.5 </label>
|
||||
<input type="checkbox" id="gpt4" name="gpt4" value="gpt4" defaultChecked={false} onChange={handleLLMChecked} />
|
||||
|
Loading…
x
Reference in New Issue
Block a user