feat: common components

src/pages/playground/components/params-settings.tsx

@@ -1,13 +1,142 @@
-import { Form } from 'antd';
-import { useState } from 'react';
+import SealInput from '@/components/seal-form/seal-input';
+import { INPUT_WIDTH } from '@/constants';
+import { Button, Form, Space } from 'antd';
+
+type ParamsSettingsProps = {
+  seed?: number;
+  stopSequence?: number;
+  temperature?: number;
+  topK?: number;
+  topP?: number;
+  repeatPenalty?: number;
+  repeatLastN?: number;
+  tfsZ?: number;
+  contextLength?: number;
+  maxTokens?: number;
+};
 
 const ParamsSettings: React.FC = () => {
-  const [params, setParams] = useState({
-    name: 'jack',
-    age: 18,
-  });
+  const initialValues = {
+    seed: 1,
+    stopSequence: 1,
+    temperature: 1,
+    topK: 1,
+    topP: 1,
+    repeatPenalty: 1,
+    repeatLastN: 1,
+    tfsZ: 1,
+    contextLength: 256,
+    maxTokens: 256
+  };
+  const [form] = Form.useForm();
 
-  return <Form></Form>;
+  const handleOnFinish = (values: any) => {
+    console.log('handleOnFinish', values);
+  };
+
+  const handleOnFinishFailed = (errorInfo: any) => {
+    console.log('handleOnFinishFailed', errorInfo);
+  };
+
+  return (
+    <Form
+      name="modelparams"
+      form={form}
+      onFinish={handleOnFinish}
+      onFinishFailed={handleOnFinishFailed}
+    >
+      <Form.Item<ParamsSettingsProps> name="seed" rules={[{ required: true }]}>
+        <SealInput.Input
+          label="Seed"
+          style={{ width: INPUT_WIDTH.default }}
+        ></SealInput.Input>
+      </Form.Item>
+      <Form.Item<ParamsSettingsProps>
+        name="stopSequence"
+        rules={[{ required: true }]}
+      >
+        <SealInput.Input
+          label="Stop Sequence"
+          style={{ width: INPUT_WIDTH.default }}
+        ></SealInput.Input>
+      </Form.Item>
+      <Form.Item<ParamsSettingsProps>
+        name="temperature"
+        rules={[{ required: true }]}
+      >
+        <SealInput.Input
+          label="Temperature"
+          style={{ width: INPUT_WIDTH.default }}
+        ></SealInput.Input>
+      </Form.Item>
+      <Form.Item<ParamsSettingsProps> name="topK" rules={[{ required: true }]}>
+        <SealInput.Input
+          label="TopK"
+          style={{ width: INPUT_WIDTH.default }}
+        ></SealInput.Input>
+      </Form.Item>
+      <Form.Item<ParamsSettingsProps> name="topP" rules={[{ required: true }]}>
+        <SealInput.Input
+          label="TopP"
+          style={{ width: INPUT_WIDTH.default }}
+        ></SealInput.Input>
+      </Form.Item>
+      <Form.Item<ParamsSettingsProps>
+        name="repeatPenalty"
+        rules={[{ required: true }]}
+      >
+        <SealInput.Input
+          label="Repeat Penalty"
+          style={{ width: INPUT_WIDTH.default }}
+        ></SealInput.Input>
+      </Form.Item>
+      <Form.Item<ParamsSettingsProps>
+        name="repeatLastN"
+        rules={[{ required: true }]}
+      >
+        <SealInput.Input
+          label="Repeat Last N"
+          style={{ width: INPUT_WIDTH.default }}
+        ></SealInput.Input>
+      </Form.Item>
+      <Form.Item<ParamsSettingsProps> name="tfsZ" rules={[{ required: true }]}>
+        <SealInput.Input
+          label="TFSZ"
+          style={{ width: INPUT_WIDTH.default }}
+        ></SealInput.Input>
+      </Form.Item>
+      <Form.Item<ParamsSettingsProps>
+        name="contextLength"
+        rules={[{ required: true }]}
+      >
+        <SealInput.Input
+          label="Context Length"
+          style={{ width: INPUT_WIDTH.default }}
+        ></SealInput.Input>
+      </Form.Item>
+      <Form.Item<ParamsSettingsProps>
+        name="maxTokens"
+        rules={[{ required: true }]}
+      >
+        <SealInput.Input
+          label="Max Tokens"
+          style={{ width: INPUT_WIDTH.default }}
+        ></SealInput.Input>
+      </Form.Item>
+      <Form.Item noStyle>
+        <Space
+          size={20}
+          align="end"
+          style={{ width: '100%', display: 'flex', justifyContent: 'end' }}
+        >
+          <Button>Cancel</Button>
+          <Button type="primary" htmlType="submit">
+            Submit
+          </Button>
+        </Space>
+      </Form.Item>
+    </Form>
+  );
 };
 
 export default ParamsSettings;

src/pages/playground/index.tsx

@@ -1,10 +1,11 @@
-import SealInput from '@/components/seal-form/seal-input';
+import SealPopover from '@/components/popover';
 import { ControlOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
-import { Button, Popover, Select, Space } from 'antd';
+import { Button, Select, Space } from 'antd';
 import { useEffect, useState } from 'react';
 import ChatContent from './components/chatContent';
 import MessageInput from './components/messageInput';
+import ParamsSettings from './components/params-settings';
 
 const dataList = [
   { value: 'llama3:latest', label: 'llama3:latest' },
@@ -23,6 +24,7 @@ const Playground: React.FC = () => {
 
   const getMessageList = () => {
     // fetch message list from server
+    console.log('getModelList');
     setMessageList(['1']);
   };
 
@@ -43,13 +45,21 @@ const Playground: React.FC = () => {
             onChange={handleSelectChange}
             variant="filled"
           ></Select>
-          <Popover content="ssd" title="Title" trigger="click">
+          <SealPopover
+            content={<ParamsSettings></ParamsSettings>}
+            destroyTooltipOnHide={true}
+            title="Params Settings"
+            trigger="click"
+            arrow={false}
+            overlayInnerStyle={{ maxHeight: '500px', overflow: 'auto' }}
+            placement="bottomRight"
+          >
             <Button
               type="primary"
               shape="circle"
               icon={<ControlOutlined />}
             ></Button>
-          </Popover>
+          </SealPopover>
         </Space>
       ]}
       footer={[<MessageInput />]}
@@ -57,7 +67,6 @@ const Playground: React.FC = () => {
       <div style={{ display: 'flex', justifyContent: 'center' }}>
         <ChatContent messageList={messageList}></ChatContent>
       </div>
-      <SealInput.Input label="test label"></SealInput.Input>
     </PageContainer>
   );
 };