Add LLM button

This commit is contained in:
Ian Arawjo 2023-05-02 18:51:37 -04:00
parent 6105522ad1
commit 187be40b3f
3 changed files with 30 additions and 43 deletions

View File

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

View File

@ -44,7 +44,7 @@ const ListItem = ({ item, provided, snapshot }) => {
{...provided.dragHandleProps}
>
<div>
<CardHeader>{item.model}</CardHeader>
<CardHeader>{item.emoji}&nbsp;{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}&nbsp;{item.model}</CardHeader>
<SettingsButton />
</div>
</DragItem>

View File

@ -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} />