move files
This commit is contained in:
josc146
10
frontend/src/pages/About.tsx
Normal file
10
frontend/src/pages/About.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import React, {FC} from 'react';
|
||||
import {Text} from '@fluentui/react-components';
|
||||
|
||||
export const About: FC = () => {
|
||||
return (
|
||||
<div className="flex flex-col box-border gap-5 p-2">
|
||||
<Text size={600}>In Development</Text>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
10
frontend/src/pages/Chat.tsx
Normal file
10
frontend/src/pages/Chat.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import React, {FC} from 'react';
|
||||
import {Text} from '@fluentui/react-components';
|
||||
|
||||
export const Chat: FC = () => {
|
||||
return (
|
||||
<div className="flex flex-col box-border gap-5 p-2">
|
||||
<Text size={600}>In Development</Text>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
88
frontend/src/pages/Configs.tsx
Normal file
88
frontend/src/pages/Configs.tsx
Normal file
@@ -0,0 +1,88 @@
|
||||
import {Button, Divider, Dropdown, Input, Option, Slider, Switch, Text} from '@fluentui/react-components';
|
||||
import {AddCircle20Regular, DataUsageSettings20Regular, Delete20Regular, Save20Regular} from '@fluentui/react-icons';
|
||||
import React, {FC} from 'react';
|
||||
import {Section} from '../components/Section';
|
||||
import {Labeled} from '../components/Labeled';
|
||||
import {ToolTipButton} from '../components/ToolTipButton';
|
||||
|
||||
export const Configs: FC = () => {
|
||||
return (
|
||||
<div className="flex flex-col gap-2 p-2 h-full">
|
||||
<Text size={600}>Configs</Text>
|
||||
<Divider/>
|
||||
<div className="flex gap-2 items-center w-full">
|
||||
<Dropdown style={{minWidth: 0}} className="grow"/>
|
||||
<ToolTipButton desc="New Config" icon={<AddCircle20Regular/>}/>
|
||||
<ToolTipButton desc="Delete Config" icon={<Delete20Regular/>}/>
|
||||
<ToolTipButton desc="Save Config" icon={<Save20Regular/>}/>
|
||||
</div>
|
||||
<div className="flex flex-col h-full gap-2 overflow-y-hidden">
|
||||
<Section
|
||||
title="Default API Parameters"
|
||||
desc="Hover your mouse over the text to view a detailed description. Settings marked with * will take effect immediately after being saved."
|
||||
content={
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||||
<Labeled label="API Port" desc="127.0.0.1:8000" content={
|
||||
<Input type="number" min={1} max={65535} step={1}/>
|
||||
}/>
|
||||
<Labeled label="Max Response Token *" content={
|
||||
<div className="flex items-center grow">
|
||||
<Slider style={{minWidth: 0}} className="grow" step={400} min={100} max={8100}/>
|
||||
<Text>1000</Text>
|
||||
</div>
|
||||
}/>
|
||||
<Labeled label="Temperature *" content={
|
||||
<Slider style={{minWidth: 0}} className="grow"/>
|
||||
}/>
|
||||
<Labeled label="Top_P *" content={
|
||||
<Slider style={{minWidth: 0}} className="grow"/>
|
||||
}/>
|
||||
<Labeled label="Presence Penalty *" content={
|
||||
<Slider style={{minWidth: 0}} className="grow"/>
|
||||
}/>
|
||||
<Labeled label="Count Penalty *" content={
|
||||
<Slider style={{minWidth: 0}} className="grow"/>
|
||||
}/>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<Section
|
||||
title="Model Parameters"
|
||||
content={
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||||
<Labeled label="Model" content={
|
||||
<div className="flex gap-2 grow">
|
||||
<Dropdown style={{minWidth: 0}} className="grow"/>
|
||||
<ToolTipButton desc="Manage Models" icon={<DataUsageSettings20Regular/>}/>
|
||||
</div>
|
||||
}/>
|
||||
<ToolTipButton text="Convert" desc="Convert model with these configs"/>
|
||||
<Labeled label="Device" content={
|
||||
<Dropdown style={{minWidth: 0}} className="grow">
|
||||
<Option>CPU</Option>
|
||||
<Option>CUDA: 0</Option>
|
||||
</Dropdown>
|
||||
}/>
|
||||
<Labeled label="Precision" content={
|
||||
<Dropdown style={{minWidth: 0}} className="grow">
|
||||
<Option>fp16</Option>
|
||||
<Option>int8</Option>
|
||||
<Option>fp32</Option>
|
||||
</Dropdown>
|
||||
}/>
|
||||
<Labeled label="Streamed Layers" content={
|
||||
<Slider style={{minWidth: 0}} className="grow"/>
|
||||
}/>
|
||||
<Labeled label="Enable High Precision For Last Layer" content={
|
||||
<Switch/>
|
||||
}/>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-row-reverse sm:fixed bottom-2 right-2">
|
||||
<Button appearance="primary" size="large">Run</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
113
frontend/src/pages/Home.tsx
Normal file
113
frontend/src/pages/Home.tsx
Normal file
@@ -0,0 +1,113 @@
|
||||
import {Button, CompoundButton, Dropdown, Link, Option, Text} from '@fluentui/react-components';
|
||||
import React, {FC, ReactElement} from 'react';
|
||||
import Banner from '../assets/images/banner.jpg';
|
||||
import {
|
||||
Chat20Regular,
|
||||
DataUsageSettings20Regular,
|
||||
DocumentSettings20Regular,
|
||||
Storage20Regular
|
||||
} from '@fluentui/react-icons';
|
||||
import {useNavigate} from 'react-router';
|
||||
import {StartServer} from '../../wailsjs/go/backend_golang/App';
|
||||
|
||||
type NavCard = {
|
||||
label: string;
|
||||
desc: string;
|
||||
path: string;
|
||||
icon: ReactElement;
|
||||
};
|
||||
|
||||
export const navCards: NavCard[] = [
|
||||
{
|
||||
label: 'Chat',
|
||||
desc: 'Go to chat page',
|
||||
path: '/chat',
|
||||
icon: <Chat20Regular/>
|
||||
},
|
||||
{
|
||||
label: 'Configs',
|
||||
desc: 'Manage your configs',
|
||||
path: '/configs',
|
||||
icon: <DocumentSettings20Regular/>
|
||||
},
|
||||
{
|
||||
label: 'Models',
|
||||
desc: 'Manage models',
|
||||
path: '/models',
|
||||
icon: <DataUsageSettings20Regular/>
|
||||
},
|
||||
{
|
||||
label: 'Train',
|
||||
desc: '',
|
||||
path: '/train',
|
||||
icon: <Storage20Regular/>
|
||||
}
|
||||
];
|
||||
|
||||
export const Home: FC = () => {
|
||||
const [selectedConfig, setSelectedConfig] = React.useState('RWKV-3B-4G MEM');
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const onClickNavCard = (path: string) => {
|
||||
navigate({pathname: path});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col justify-between h-full">
|
||||
<img className="rounded-xl select-none hidden sm:block" src={Banner}/>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Text size={600} weight="medium">Introduction</Text>
|
||||
<div className="h-40 overflow-y-auto p-1">
|
||||
RWKV is an RNN with Transformer-level LLM performance, which can also be directly trained like a GPT
|
||||
transformer (parallelizable). And it's 100% attention-free. You only need the hidden state at position t to
|
||||
compute the state at position t+1. You can use the "GPT" mode to quickly compute the hidden state for the
|
||||
"RNN" mode.
|
||||
<br/>
|
||||
So it's combining the best of RNN and transformer - great performance, fast inference, saves VRAM, fast
|
||||
training, "infinite" ctx_len, and free sentence embedding (using the final hidden state).
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-5">
|
||||
{navCards.map(({label, path, icon, desc}, index) => (
|
||||
<CompoundButton icon={icon} secondaryContent={desc} key={`${path}-${index}`} value={path}
|
||||
size="large" onClick={() => onClickNavCard(path)}>
|
||||
{label}
|
||||
</CompoundButton>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex flex-row-reverse sm:fixed bottom-2 right-2">
|
||||
<div className="flex gap-3">
|
||||
<Dropdown style={{minWidth: 0}}
|
||||
placeholder="Config"
|
||||
value={selectedConfig}
|
||||
onOptionSelect={(_, data) => {
|
||||
if (data.optionValue)
|
||||
setSelectedConfig(data.optionValue);
|
||||
}}>
|
||||
<Option id="item-1" key="item-1">
|
||||
RWKV-3B-4G MEM
|
||||
</Option>
|
||||
<Option id="item-2" key="item-2">
|
||||
Item 2
|
||||
</Option>
|
||||
<Option id="item-3" key="item-3">
|
||||
Item 3
|
||||
</Option>
|
||||
<Option id="item-4" key="item-4">
|
||||
Item 4
|
||||
</Option>
|
||||
</Dropdown>
|
||||
<Button appearance="primary" size="large"
|
||||
onClick={() => StartServer('cuda fp16i8', 'E:\\RWKV-4-Raven-3B-v10-Eng49%-Chn50%-Other1%-20230419-ctx4096.pth').then(console.log)}>Run</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-4 items-end">
|
||||
Version: 1.0.0
|
||||
<Link>Help</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
167
frontend/src/pages/Models.tsx
Normal file
167
frontend/src/pages/Models.tsx
Normal file
@@ -0,0 +1,167 @@
|
||||
import React, {FC, useEffect} from 'react';
|
||||
import {
|
||||
createTableColumn,
|
||||
DataGrid,
|
||||
DataGridBody,
|
||||
DataGridCell,
|
||||
DataGridHeader,
|
||||
DataGridHeaderCell,
|
||||
DataGridRow,
|
||||
TableCellLayout,
|
||||
TableColumnDefinition,
|
||||
Text,
|
||||
Textarea
|
||||
} from '@fluentui/react-components';
|
||||
import {EditRegular} from '@fluentui/react-icons/lib/fonts';
|
||||
import {ToolTipButton} from '../components/ToolTipButton';
|
||||
import {ArrowClockwise20Regular} from '@fluentui/react-icons';
|
||||
|
||||
type Operation = {
|
||||
icon: JSX.Element;
|
||||
desc: string
|
||||
}
|
||||
|
||||
type Item = {
|
||||
filename: string;
|
||||
desc: string;
|
||||
size: number;
|
||||
lastUpdated: number;
|
||||
actions: Operation[];
|
||||
isLocal: boolean;
|
||||
};
|
||||
|
||||
const items: Item[] = [
|
||||
{
|
||||
filename: 'RWKV-4-Raven-14B-v11x-Eng99%-Other1%-20230501-ctx8192.pth',
|
||||
desc: 'Mainly English language corpus',
|
||||
size: 28297309490,
|
||||
lastUpdated: 1,
|
||||
actions: [{icon: <EditRegular/>, desc: 'Edit'}],
|
||||
isLocal: false
|
||||
}
|
||||
];
|
||||
|
||||
const columns: TableColumnDefinition<Item>[] = [
|
||||
createTableColumn<Item>({
|
||||
columnId: 'file',
|
||||
compare: (a, b) => {
|
||||
return a.filename.localeCompare(b.filename);
|
||||
},
|
||||
renderHeaderCell: () => {
|
||||
return 'File';
|
||||
},
|
||||
renderCell: (item) => {
|
||||
return (
|
||||
<TableCellLayout className="break-all">
|
||||
{item.filename}
|
||||
</TableCellLayout>
|
||||
);
|
||||
}
|
||||
}),
|
||||
createTableColumn<Item>({
|
||||
columnId: 'desc',
|
||||
compare: (a, b) => {
|
||||
return a.desc.localeCompare(b.desc);
|
||||
},
|
||||
renderHeaderCell: () => {
|
||||
return 'Desc';
|
||||
},
|
||||
renderCell: (item) => {
|
||||
return (
|
||||
<TableCellLayout>
|
||||
{item.desc}
|
||||
</TableCellLayout>
|
||||
);
|
||||
}
|
||||
}),
|
||||
createTableColumn<Item>({
|
||||
columnId: 'size',
|
||||
compare: (a, b) => {
|
||||
return a.size - b.size;
|
||||
},
|
||||
renderHeaderCell: () => {
|
||||
return 'Size';
|
||||
},
|
||||
renderCell: (item) => {
|
||||
return (
|
||||
<TableCellLayout>
|
||||
{(item.size / (1024 * 1024 * 1024)).toFixed(2) + 'GB'}
|
||||
</TableCellLayout>
|
||||
);
|
||||
}
|
||||
}),
|
||||
createTableColumn<Item>({
|
||||
columnId: 'lastUpdated',
|
||||
compare: (a, b) => {
|
||||
return a.lastUpdated - b.lastUpdated;
|
||||
},
|
||||
renderHeaderCell: () => {
|
||||
return 'Last updated';
|
||||
},
|
||||
|
||||
renderCell: (item) => {
|
||||
return new Date(item.lastUpdated).toLocaleString();
|
||||
}
|
||||
}),
|
||||
createTableColumn<Item>({
|
||||
columnId: 'actions',
|
||||
compare: (a, b) => {
|
||||
return a.isLocal === b.isLocal ? 0 : a.isLocal ? -1 : 1;
|
||||
},
|
||||
renderHeaderCell: () => {
|
||||
return 'Actions';
|
||||
},
|
||||
renderCell: (item) => {
|
||||
return (
|
||||
<TableCellLayout>
|
||||
</TableCellLayout>
|
||||
);
|
||||
}
|
||||
})
|
||||
];
|
||||
|
||||
export const Models: FC = () => {
|
||||
useEffect(() => {
|
||||
fetch('https://cdn.jsdelivr.net/gh/josstorer/RWKV-Runner/manifest.json')
|
||||
.then(
|
||||
res => res.json().then(console.log)
|
||||
);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col box-border gap-5 p-2">
|
||||
<Text size={600}>In Development</Text>
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex justify-between">
|
||||
<Text weight="medium">Model Source Url List</Text>
|
||||
<ToolTipButton desc="Refresh" icon={<ArrowClockwise20Regular/>}/>
|
||||
</div>
|
||||
<Text size={100}>description</Text>
|
||||
<Textarea size="large" resize="vertical"
|
||||
defaultValue="https://cdn.jsdelivr.net/gh/josstorer/RWKV-Runner/manifest.json;"/>
|
||||
</div>
|
||||
<DataGrid
|
||||
items={items}
|
||||
columns={columns}
|
||||
sortable={true}
|
||||
>
|
||||
<DataGridHeader>
|
||||
<DataGridRow>
|
||||
{({renderHeaderCell}) => (
|
||||
<DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
|
||||
)}
|
||||
</DataGridRow>
|
||||
</DataGridHeader>
|
||||
<DataGridBody<Item>>
|
||||
{({item, rowId}) => (
|
||||
<DataGridRow<Item> key={rowId}>
|
||||
{({renderCell}) => (
|
||||
<DataGridCell>{renderCell(item)}</DataGridCell>
|
||||
)}
|
||||
</DataGridRow>
|
||||
)}
|
||||
</DataGridBody>
|
||||
</DataGrid>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
10
frontend/src/pages/Settings.tsx
Normal file
10
frontend/src/pages/Settings.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import React, {FC} from 'react';
|
||||
import {Text} from '@fluentui/react-components';
|
||||
|
||||
export const Settings: FC = () => {
|
||||
return (
|
||||
<div className="flex flex-col box-border gap-5 p-2">
|
||||
<Text size={600}>In Development</Text>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
10
frontend/src/pages/Train.tsx
Normal file
10
frontend/src/pages/Train.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import React, {FC} from 'react';
|
||||
import {Text} from '@fluentui/react-components';
|
||||
|
||||
export const Train: FC = () => {
|
||||
return (
|
||||
<div className="flex flex-col box-border gap-5 p-2">
|
||||
<Text size={600}>In Development</Text>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
74
frontend/src/pages/index.tsx
Normal file
74
frontend/src/pages/index.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
import { ReactElement } from "react";
|
||||
import { Configs } from "./Configs";
|
||||
import {
|
||||
Chat20Regular,
|
||||
DataUsageSettings20Regular,
|
||||
DocumentSettings20Regular,
|
||||
Home20Regular, Info20Regular, Settings20Regular, Storage20Regular
|
||||
} from '@fluentui/react-icons';
|
||||
import {Home} from './Home';
|
||||
import {Chat} from './Chat';
|
||||
import {Models} from './Models';
|
||||
import {Train} from './Train';
|
||||
import {Settings} from './Settings';
|
||||
import {About} from './About';
|
||||
|
||||
type NavigationItem = {
|
||||
label: string;
|
||||
path: string;
|
||||
icon: ReactElement;
|
||||
element: ReactElement;
|
||||
top: boolean;
|
||||
};
|
||||
|
||||
export const pages: NavigationItem[] = [
|
||||
{
|
||||
label: "Home",
|
||||
path: "/",
|
||||
icon:<Home20Regular />,
|
||||
element: <Home />,
|
||||
top: true,
|
||||
},
|
||||
{
|
||||
label: "Chat",
|
||||
path: "/chat",
|
||||
icon:<Chat20Regular />,
|
||||
element: <Chat />,
|
||||
top:true
|
||||
},
|
||||
{
|
||||
label: "Configs",
|
||||
path: "/configs",
|
||||
icon:<DocumentSettings20Regular />,
|
||||
element: <Configs />,
|
||||
top:true
|
||||
},
|
||||
{
|
||||
label: "Models",
|
||||
path: "/models",
|
||||
icon:<DataUsageSettings20Regular />,
|
||||
element: <Models />,
|
||||
top:true
|
||||
},
|
||||
{
|
||||
label: "Train",
|
||||
path: "/train",
|
||||
icon:<Storage20Regular />,
|
||||
element: <Train />,
|
||||
top:true
|
||||
},
|
||||
{
|
||||
label: "Settings",
|
||||
path: "/settings",
|
||||
icon:<Settings20Regular />,
|
||||
element: <Settings />,
|
||||
top:false
|
||||
},
|
||||
{
|
||||
label: "About",
|
||||
path: "/about",
|
||||
icon:<Info20Regular />,
|
||||
element: <About />,
|
||||
top:false
|
||||
}
|
||||
];
|
||||
Reference in New Issue
Block a user