move files

frontend/src/pages/Configs.tsx

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