update

frontend/src/Pages/Configs.tsx

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

frontend/src/Pages/Home.tsx

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

frontend/src/Pages/Section.tsx

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

frontend/src/Pages/SectionTitle.tsx

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

frontend/src/Pages/index.tsx

@@ -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
+    }
+];