update
This commit is contained in:
@@ -1,28 +1,85 @@
|
||||
import {useState} from 'react';
|
||||
import logo from './assets/images/logo-universal.png';
|
||||
import './App.css';
|
||||
import {Greet} from "../wailsjs/go/main/App";
|
||||
// reference: https://github.com/oliverschwendener/electron-fluent-ui
|
||||
//
|
||||
// MIT License
|
||||
//
|
||||
// Copyright (c) 2023 josStorer
|
||||
// Copyright (c) 2023 oliverschwendener
|
||||
//
|
||||
// Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
// of this software and associated documentation files (the "Software"), to deal
|
||||
// in the Software without restriction, including without limitation the rights
|
||||
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
// copies of the Software, and to permit persons to whom the Software is
|
||||
// furnished to do so, subject to the following conditions:
|
||||
//
|
||||
// The above copyright notice and this permission notice shall be included in all
|
||||
// copies or substantial portions of the Software.
|
||||
//
|
||||
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
// SOFTWARE.
|
||||
|
||||
function App() {
|
||||
const [resultText, setResultText] = useState("Please enter your name below 👇");
|
||||
const [name, setName] = useState('');
|
||||
const updateName = (e: any) => setName(e.target.value);
|
||||
const updateResultText = (result: string) => setResultText(result);
|
||||
import {FluentProvider, Tab, TabList, webDarkTheme} from '@fluentui/react-components';
|
||||
import {FC, useEffect, useState} from 'react';
|
||||
import {Route, Routes, useLocation, useNavigate} from 'react-router';
|
||||
import {pages} from './Pages';
|
||||
|
||||
function greet() {
|
||||
Greet(name).then(updateResultText);
|
||||
}
|
||||
const App: FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
return (
|
||||
<div id="App">
|
||||
<img src={logo} id="logo" alt="logo"/>
|
||||
<div id="result" className="result">{resultText}</div>
|
||||
<div id="input" className="input-box">
|
||||
<input id="name" className="input" onChange={updateName} autoComplete="off" name="input" type="text"/>
|
||||
<button className="btn" onClick={greet}>Greet</button>
|
||||
</div>
|
||||
const [path, setPath] = useState<string>(pages[0].path);
|
||||
|
||||
const selectTab = (selectedPath: unknown) =>
|
||||
typeof selectedPath === 'string' ? navigate({pathname: selectedPath}) : null;
|
||||
|
||||
useEffect(() => setPath(location.pathname), [location]);
|
||||
|
||||
return (
|
||||
<FluentProvider theme={webDarkTheme} className="h-screen">
|
||||
<div className="flex h-full">
|
||||
<div className="flex flex-col w-40 p-2 justify-between">
|
||||
<TabList
|
||||
size="large"
|
||||
appearance="subtle"
|
||||
selectedValue={path}
|
||||
onTabSelect={(_, {value}) => selectTab(value)}
|
||||
vertical
|
||||
>
|
||||
{pages.filter(page=>page.top).map(({label, path, icon}, index) => (
|
||||
<Tab icon={icon} key={`${path}-${index}`} value={path}>
|
||||
{label}
|
||||
</Tab>
|
||||
))}
|
||||
</TabList>
|
||||
<TabList
|
||||
size="large"
|
||||
appearance="subtle"
|
||||
selectedValue={path}
|
||||
onTabSelect={(_, {value}) => selectTab(value)}
|
||||
vertical
|
||||
>
|
||||
{pages.filter(page=>!page.top).map(({label, path, icon}, index) => (
|
||||
<Tab icon={icon} key={`${path}-${index}`} value={path}>
|
||||
{label}
|
||||
</Tab>
|
||||
))}
|
||||
</TabList>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<div className="h-full w-full p-2 box-border overflow-y-hidden">
|
||||
<Routes>
|
||||
{pages.map(({path, element}, index) => (
|
||||
<Route key={`${path}-${index}`} path={path} element={element}/>
|
||||
))}
|
||||
</Routes>
|
||||
</div>
|
||||
</div>
|
||||
</FluentProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default App
|
||||
export default App;
|
||||
|
||||
20
frontend/src/Pages/Configs.tsx
Normal file
20
frontend/src/Pages/Configs.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import {Checkbox, Input, Text} from '@fluentui/react-components';
|
||||
import { FC } from "react";
|
||||
import { Section } from "./Section";
|
||||
|
||||
export const Configs: FC = () => {
|
||||
return (
|
||||
<div className="flex flex-col box-border gap-5 p-2">
|
||||
<Text size={600}>Configs</Text>
|
||||
<Section
|
||||
title="Shapes"
|
||||
content={
|
||||
<div className="flex gap-5">
|
||||
<Input/>
|
||||
<Checkbox label="Temp" shape="circular" />
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
101
frontend/src/Pages/Home.tsx
Normal file
101
frontend/src/Pages/Home.tsx
Normal file
@@ -0,0 +1,101 @@
|
||||
import {Text, Combobox, CompoundButton, Link, Option} 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';
|
||||
|
||||
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');
|
||||
|
||||
return (
|
||||
<div className="flex flex-col justify-between h-full">
|
||||
<img className="rounded-xl select-none" src={Banner}/>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Text size={600} weight="medium">Introduction</Text>
|
||||
<Text size={300}>
|
||||
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).
|
||||
</Text>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
{navCards.map(({label, path, icon, desc}, index) => (
|
||||
<CompoundButton className="w-1/5" icon={icon} secondaryContent={desc} key={`${path}-${index}`} value={path}
|
||||
size="large">
|
||||
{label}
|
||||
</CompoundButton>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<div className="flex gap-4 items-end">
|
||||
Version: 1.0.0
|
||||
<Link>Help</Link>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<Combobox 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>
|
||||
</Combobox>
|
||||
<CompoundButton appearance="primary" size="large">Run</CompoundButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
11
frontend/src/Pages/Section.tsx
Normal file
11
frontend/src/Pages/Section.tsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import { FC, ReactElement } from "react";
|
||||
import { SectionTitle } from "./SectionTitle";
|
||||
|
||||
export const Section: FC<{ title: string; content: ReactElement }> = ({ title, content }) => {
|
||||
return (
|
||||
<div className="flex flex-col gap-5">
|
||||
<SectionTitle label={title} />
|
||||
{content}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
4
frontend/src/Pages/SectionTitle.tsx
Normal file
4
frontend/src/Pages/SectionTitle.tsx
Normal file
@@ -0,0 +1,4 @@
|
||||
import { Text } from "@fluentui/react-components";
|
||||
import { FC } from "react";
|
||||
|
||||
export const SectionTitle: FC<{ label: string }> = ({ label }) => <Text weight="medium">{label}</Text>;
|
||||
69
frontend/src/Pages/index.tsx
Normal file
69
frontend/src/Pages/index.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
import { ReactElement } from "react";
|
||||
import { Configs } from "./Configs";
|
||||
import {
|
||||
Chat20Regular,
|
||||
DataUsageSettings20Regular,
|
||||
DocumentSettings20Regular,
|
||||
Home20Regular, Info20Regular, Settings20Regular, Storage20Regular
|
||||
} from '@fluentui/react-icons';
|
||||
import {Home} from './Home';
|
||||
|
||||
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: <Configs />,
|
||||
top:true
|
||||
},
|
||||
{
|
||||
label: "Configs",
|
||||
path: "/configs",
|
||||
icon:<DocumentSettings20Regular />,
|
||||
element: <Configs />,
|
||||
top:true
|
||||
},
|
||||
{
|
||||
label: "Models",
|
||||
path: "/models",
|
||||
icon:<DataUsageSettings20Regular />,
|
||||
element: <Configs />,
|
||||
top:true
|
||||
},
|
||||
{
|
||||
label: "Train",
|
||||
path: "/train",
|
||||
icon:<Storage20Regular />,
|
||||
element: <Configs />,
|
||||
top:true
|
||||
},
|
||||
{
|
||||
label: "Settings",
|
||||
path: "/settings",
|
||||
icon:<Settings20Regular />,
|
||||
element: <Configs />,
|
||||
top:false
|
||||
},
|
||||
{
|
||||
label: "About",
|
||||
path: "/about",
|
||||
icon:<Info20Regular />,
|
||||
element: <Configs />,
|
||||
top:false
|
||||
}
|
||||
];
|
||||
@@ -1,93 +0,0 @@
|
||||
Copyright 2016 The Nunito Project Authors (contact@sansoxygen.com),
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
http://scripts.sil.org/OFL
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
Binary file not shown.
BIN
frontend/src/assets/images/banner.jpg
Normal file
BIN
frontend/src/assets/images/banner.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 136 KiB |
@@ -2,13 +2,14 @@ import React from 'react'
|
||||
import {createRoot} from 'react-dom/client'
|
||||
import './style.css'
|
||||
import App from './App'
|
||||
import {HashRouter} from 'react-router-dom';
|
||||
|
||||
const container = document.getElementById('root')
|
||||
|
||||
const root = createRoot(container!)
|
||||
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<HashRouter>
|
||||
<App/>
|
||||
</React.StrictMode>
|
||||
</HashRouter>
|
||||
)
|
||||
|
||||
@@ -1,26 +1,8 @@
|
||||
html {
|
||||
background-color: rgba(27, 38, 54, 1);
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
color: white;
|
||||
font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
|
||||
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Nunito";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local(""),
|
||||
url("assets/fonts/nunito-v16-latin-regular.woff2") format("woff2");
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100vh;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user