config page

backend-golang/app.go

@@ -1,8 +1,7 @@
-package main
+package backend_golang
 
 import (
 	"context"
-	"fmt"
 )
 
 // App struct
@@ -17,11 +16,6 @@ func NewApp() *App {
 
 // startup is called when the app starts. The context is saved
 // so we can call the runtime methods
-func (a *App) startup(ctx context.Context) {
+func (a *App) OnStartup(ctx context.Context) {
 	a.ctx = ctx
 }
-
-// Greet returns a greeting for the given name
-func (a *App) Greet(name string) string {
-	return fmt.Sprintf("Hello %s, It's show time!", name)
-}

backend-golang/config.go

@@ -0,0 +1,18 @@
+package backend_golang
+
+import (
+	"encoding/json"
+	"os"
+)
+
+func (a *App) SaveConfig(config interface{}) string {
+	jsonData, err := json.MarshalIndent(config, "", "  ")
+	if err != nil {
+		return err.Error()
+	}
+
+	if err := os.WriteFile("config.json", jsonData, 0644); err != nil {
+		return err.Error()
+	}
+	return ""
+}

frontend/src/Pages/About.tsx

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

frontend/src/Pages/Chat.tsx

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

frontend/src/Pages/Configs.tsx

@@ -1,20 +1,271 @@
-import {Checkbox, Input, Text} from '@fluentui/react-components';
-import { FC } from "react";
-import { Section } from "./Section";
+import {
+  Avatar,
+  Button,
+  createTableColumn,
+  Dropdown,
+  Input,
+  PresenceBadgeStatus,
+  Select,
+  Slider,
+  Switch,
+  TableCellLayout,
+  TableColumnDefinition,
+  Text,
+  Tooltip
+} from '@fluentui/react-components';
+import {
+  AddCircle20Regular,
+  Delete20Regular,
+  DocumentPdfRegular,
+  DocumentRegular,
+  EditRegular,
+  FolderRegular,
+  OpenRegular,
+  PeopleRegular,
+  Save20Regular,
+  VideoRegular
+} from '@fluentui/react-icons';
+import React, {FC} from 'react';
+import {Section} from './components/Section';
+import {Labeled} from './components/Labeled';
+import {ToolTipButton} from './components/ToolTipButton';
+
+type FileCell = {
+  label: string;
+  icon: JSX.Element;
+};
+
+type LastUpdatedCell = {
+  label: string;
+  timestamp: number;
+};
+
+type LastUpdateCell = {
+  label: string;
+  icon: JSX.Element;
+};
+
+type AuthorCell = {
+  label: string;
+  status: PresenceBadgeStatus;
+};
+
+type Item = {
+  file: FileCell;
+  author: AuthorCell;
+  lastUpdated: LastUpdatedCell;
+  lastUpdate: LastUpdateCell;
+};
+
+const items: Item[] = [
+  {
+    file: {label: 'Meeting notes', icon: <DocumentRegular/>},
+    author: {label: 'Max Mustermann', status: 'available'},
+    lastUpdated: {label: '7h ago', timestamp: 1},
+    lastUpdate: {
+      label: 'You edited this',
+      icon: <EditRegular/>
+    }
+  },
+  {
+    file: {label: 'Thursday presentation', icon: <FolderRegular/>},
+    author: {label: 'Erika Mustermann', status: 'busy'},
+    lastUpdated: {label: 'Yesterday at 1:45 PM', timestamp: 2},
+    lastUpdate: {
+      label: 'You recently opened this',
+      icon: <OpenRegular/>
+    }
+  },
+  {
+    file: {label: 'Training recording', icon: <VideoRegular/>},
+    author: {label: 'John Doe', status: 'away'},
+    lastUpdated: {label: 'Yesterday at 1:45 PM', timestamp: 2},
+    lastUpdate: {
+      label: 'You recently opened this',
+      icon: <OpenRegular/>
+    }
+  },
+  {
+    file: {label: 'Purchase order', icon: <DocumentPdfRegular/>},
+    author: {label: 'Jane Doe', status: 'offline'},
+    lastUpdated: {label: 'Tue at 9:30 AM', timestamp: 3},
+    lastUpdate: {
+      label: 'You shared this in a Teams chat',
+      icon: <PeopleRegular/>
+    }
+  }
+];
+
+const columns: TableColumnDefinition<Item>[] = [
+  createTableColumn<Item>({
+    columnId: 'file',
+    compare: (a, b) => {
+      return a.file.label.localeCompare(b.file.label);
+    },
+    renderHeaderCell: () => {
+      return 'File';
+    },
+    renderCell: (item) => {
+      return (
+        <TableCellLayout media={item.file.icon}>
+          {item.file.label}
+        </TableCellLayout>
+      );
+    }
+  }),
+  createTableColumn<Item>({
+    columnId: 'author',
+    compare: (a, b) => {
+      return a.author.label.localeCompare(b.author.label);
+    },
+    renderHeaderCell: () => {
+      return 'Author';
+    },
+    renderCell: (item) => {
+      return (
+        <TableCellLayout
+          media={
+            <Avatar
+              aria-label={item.author.label}
+              name={item.author.label}
+              badge={{status: item.author.status}}
+            />
+          }
+        >
+          {item.author.label}
+        </TableCellLayout>
+      );
+    }
+  }),
+  createTableColumn<Item>({
+    columnId: 'lastUpdated',
+    compare: (a, b) => {
+      return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
+    },
+    renderHeaderCell: () => {
+      return 'Last updated';
+    },
+
+    renderCell: (item) => {
+      return item.lastUpdated.label;
+    }
+  }),
+  createTableColumn<Item>({
+    columnId: 'lastUpdate',
+    compare: (a, b) => {
+      return a.lastUpdate.label.localeCompare(b.lastUpdate.label);
+    },
+    renderHeaderCell: () => {
+      return 'Last update';
+    },
+    renderCell: (item) => {
+      return (
+        <TableCellLayout media={item.lastUpdate.icon}>
+          {item.lastUpdate.label}
+        </TableCellLayout>
+      );
+    }
+  })
+];
+
+// <DataGrid
+//   items={items}
+//   columns={columns}
+// >
+//   <DataGridBody<Item>>
+//     {({ item, rowId }) => (
+//       <DataGridRow<Item> key={rowId}>
+//         {({ renderCell }) => (
+//           <DataGridCell>{renderCell(item)}</DataGridCell>
+//         )}
+//       </DataGridRow>
+//     )}
+//   </DataGridBody>
+// </DataGrid>
 
 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>
-    );
+  return (
+    <div className="flex flex-col box-border gap-5 p-2">
+      <Text size={600}>Configs</Text>
+      <Section
+        title="Config List"
+        content={
+          <div className="flex gap-5 items-center w-full">
+            <Dropdown className="w-full"/>
+            <ToolTipButton desc="New Config" icon={<AddCircle20Regular/>}/>
+            <ToolTipButton desc="Delete Config" icon={<Delete20Regular/>}/>
+            <ToolTipButton desc="Save Config" icon={<Save20Regular/>}/>
+          </div>
+        }
+      />
+      <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="flex flex-col gap-1">
+            <div className="grid grid-cols-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">
+                  <Slider className="w-48" step={400} min={100} max={8100}/>
+                  <Text>1000</Text>
+                </div>
+              }/>
+            </div>
+            <div className="grid grid-cols-2">
+              <Labeled label="Temperature *" content={
+                <Slider/>
+              }/>
+              <Labeled label="Top_P *" content={
+                <Slider/>
+              }/>
+            </div>
+            <div className="grid grid-cols-2">
+              <Labeled label="Presence Penalty *" content={
+                <Slider/>
+              }/>
+              <Labeled label="Count Penalty *" content={
+                <Slider/>
+              }/>
+            </div>
+          </div>
+        }
+      />
+      <Section
+        title="Model Parameters"
+        content={
+          <div className="flex flex-col gap-1">
+            <div className="grid grid-cols-2">
+              <Labeled label="Device" content={
+                <Select className="w-28">
+                  <option>CPU</option>
+                  <option>CUDA: 0</option>
+                </Select>
+              }/>
+              <Labeled label="Precision" content={
+                <Select className="w-28">
+                  <option>fp16</option>
+                  <option>int8</option>
+                  <option>fp32</option>
+                </Select>
+              }/>
+            </div>
+            <div className="grid grid-cols-2">
+              <Labeled label="Streamed Layers" content={
+                <Slider/>
+              }/>
+              <Labeled label="Enable High Precision For Last Layer" content={
+                <Switch/>
+              }/>
+            </div>
+          </div>
+        }
+      />
+      <div className="fixed bottom-2 right-2">
+        <Button appearance="primary" size="large">Run</Button>
+      </div>
+    </div>
+  );
 };

frontend/src/Pages/Home.tsx

@@ -1,4 +1,4 @@
-import {Combobox, CompoundButton, Link, Option, Text} from '@fluentui/react-components';
+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 {
@@ -8,6 +8,7 @@ import {
   Storage20Regular
 } from '@fluentui/react-icons';
 import {useNavigate} from 'react-router';
+import {SaveConfig} from '../../wailsjs/go/backend_golang/App';
 
 type NavCard = {
   label: string;
@@ -81,7 +82,7 @@ export const Home: FC = () => {
           <Link>Help</Link>
         </div>
         <div className="flex gap-3">
-          <Combobox placeholder="Config"
+          <Dropdown placeholder="Config"
                     value={selectedConfig}
                     onOptionSelect={(_, data) => {
                       if (data.optionValue)
@@ -99,8 +100,8 @@ export const Home: FC = () => {
             <Option id="item-4" key="item-4">
               Item 4
             </Option>
-          </Combobox>
-          <CompoundButton appearance="primary" size="large">Run</CompoundButton>
+          </Dropdown>
+          <Button appearance="primary" size="large" onClick={() => SaveConfig({a: 1234, b: 'test'})}>Run</Button>
         </div>
       </div>
     </div>

frontend/src/Pages/Models.tsx

@@ -0,0 +1,10 @@
+import React, {FC} from 'react';
+import {Text} from '@fluentui/react-components';
+
+export const Models: FC = () => {
+  return (
+    <div className="flex flex-col box-border gap-5 p-2">
+      <Text size={600}>In Development</Text>
+    </div>
+  );
+};

frontend/src/Pages/Section.tsx

@@ -1,11 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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/Settings.tsx

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

frontend/src/Pages/Train.tsx

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

frontend/src/Pages/components/Labeled.tsx

@@ -0,0 +1,16 @@
+import {FC, ReactElement} from 'react';
+import {Label, Tooltip} from '@fluentui/react-components';
+
+export const Labeled: FC<{ label: string; desc?: string, content: ReactElement }> = ({label, desc, content}) => {
+  return (
+    <div className="flex items-center">
+      {desc ?
+        <Tooltip content={desc} showDelay={0} hideDelay={0} relationship="description">
+          <Label className="w-44">{label}</Label>
+        </Tooltip> :
+        <Label className="w-44">{label}</Label>
+      }
+      {content}
+    </div>
+  );
+};

frontend/src/Pages/components/Section.tsx

@@ -0,0 +1,14 @@
+import {FC, ReactElement} from 'react';
+import {Text} from '@fluentui/react-components';
+
+export const Section: FC<{ title: string; desc?: string, content: ReactElement }> = ({title, desc, content}) => {
+  return (
+    <div className="flex flex-col gap-5">
+      <div className="flex flex-col gap-1">
+        <Text weight="medium">{title}</Text>
+        {desc && <Text size={100}>{desc}</Text>}
+      </div>
+      {content}
+    </div>
+  );
+};

frontend/src/Pages/components/ToolTipButton.tsx

@@ -0,0 +1,10 @@
+import React, {FC, ReactElement} from 'react';
+import {Button, Tooltip} from '@fluentui/react-components';
+
+export const ToolTipButton: FC<{ desc: string, icon: ReactElement }> = ({desc, icon}) => {
+  return (
+    <Tooltip content={desc} showDelay={0} hideDelay={0} relationship="label">
+      <Button icon={icon}/>
+    </Tooltip>
+  );
+};

frontend/src/Pages/index.tsx

@@ -7,6 +7,11 @@ import {
     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;
@@ -28,7 +33,7 @@ export const pages: NavigationItem[] = [
         label: "Chat",
         path: "/chat",
         icon:<Chat20Regular />,
-        element: <Configs />,
+        element: <Chat />,
         top:true
     },
     {
@@ -42,28 +47,28 @@ export const pages: NavigationItem[] = [
         label: "Models",
         path: "/models",
         icon:<DataUsageSettings20Regular />,
-        element: <Configs />,
+        element: <Models />,
         top:true
     },
     {
         label: "Train",
         path: "/train",
         icon:<Storage20Regular />,
-        element: <Configs />,
+        element: <Train />,
         top:true
     },
     {
         label: "Settings",
         path: "/settings",
         icon:<Settings20Regular />,
-        element: <Configs />,
+        element: <Settings />,
         top:false
     },
     {
         label: "About",
         path: "/about",
         icon:<Info20Regular />,
-        element: <Configs />,
+        element: <About />,
         top:false
     }
 ];

frontend/wailsjs/go/backend_golang/App.d.ts

@@ -1,4 +1,4 @@
 // Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
 // This file is automatically generated. DO NOT EDIT
 
-export function Greet(arg1:string):Promise<string>;
+export function SaveConfig(arg1:any):Promise<string>;

frontend/wailsjs/go/backend_golang/App.js

@@ -2,6 +2,6 @@
 // Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
 // This file is automatically generated. DO NOT EDIT
 
-export function Greet(arg1) {
-  return window['go']['main']['App']['Greet'](arg1);
+export function SaveConfig(arg1) {
+  return window['go']['backend_golang']['App']['SaveConfig'](arg1);
 }

main.go

@@ -3,6 +3,8 @@ package main
 import (
 	"embed"
 
+	backend "rwkv-runner/backend-golang"
+
 	"github.com/wailsapp/wails/v2"
 	"github.com/wailsapp/wails/v2/pkg/options"
 	"github.com/wailsapp/wails/v2/pkg/options/assetserver"
@@ -13,7 +15,7 @@ var assets embed.FS
 
 func main() {
 	// Create an instance of the app structure
-	app := NewApp()
+	app := backend.NewApp()
 
 	// Create application with options
 	err := wails.Run(&options.App{
@@ -25,7 +27,7 @@ func main() {
 		AssetServer: &assetserver.Options{
 			Assets: assets,
 		},
-		OnStartup: app.startup,
+		OnStartup: app.OnStartup,
 		Bind: []interface{}{
 			app,
 		},