chore: common components

2024-05-17 17:12:30 +08:00
parent fa522fb89e
commit c948110153
11 changed files with 681 additions and 108 deletions
@@ -1,6 +1,7 @@
 import SealInput from '@/components/seal-form/seal-input';
+import SealSelect from '@/components/seal-form/seal-select';
 import { INPUT_WIDTH } from '@/constants';
-import { Button, Form, Space } from 'antd';
+import { Button, Form, Select, Space } from 'antd';

 type ParamsSettingsProps = {
  seed?: number;
@@ -15,7 +16,7 @@ type ParamsSettingsProps = {
  maxTokens?: number;
 };

-const ParamsSettings: React.FC = () => {
+const ParamsSettings: React.FC<{ onClose: () => void }> = ({ onClose }) => {
  const initialValues = {
    seed: 1,
    stopSequence: 1,
@@ -38,6 +39,11 @@ const ParamsSettings: React.FC = () => {
    console.log('handleOnFinishFailed', errorInfo);
  };

+  const handleCancel = () => {
+    form.resetFields();
+    onClose();
+  };
+
  return (
    <Form
      name="modelparams"
@@ -45,91 +51,134 @@ const ParamsSettings: React.FC = () => {
      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 }]}
+      <div
+        style={{
+          maxHeight: '450px',
+          overflow: 'auto',
+          paddingRight: 'var(--ant-popover-inner-padding)'
+        }}
      >
-        <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<ParamsSettingsProps>
+          name="seed"
+          rules={[{ required: true }]}
+        >
+          <SealInput.Input
+            label="Seed"
+            disabled={true}
+            style={{ width: INPUT_WIDTH.default }}
+          ></SealInput.Input>
+        </Form.Item>
+        <Form.Item<ParamsSettingsProps>
+          name="select"
+          rules={[{ required: true }]}
+        >
+          <SealSelect
+            label="Select"
+            disabled={true}
+            style={{ width: INPUT_WIDTH.default }}
+          >
+            <Select.Option value={1}>1</Select.Option>
+            <Select.Option value={2}>2</Select.Option>
+            <Select.Option value={3}>3</Select.Option>
+          </SealSelect>
+        </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 }}
+            disabled={true}
+          ></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.Search
+            label="Repeat Last N"
+            style={{ width: INPUT_WIDTH.default }}
+            disabled={true}
+          ></SealInput.Search>
+        </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.Number
+            label="Context Length"
+            style={{ width: INPUT_WIDTH.default }}
+          ></SealInput.Number>
+        </Form.Item>
+        <Form.Item<ParamsSettingsProps>
+          name="maxTokens"
+          rules={[{ required: true }]}
+        >
+          <SealInput.TextArea
+            label="Max Tokens"
+            style={{ width: INPUT_WIDTH.default }}
+          ></SealInput.TextArea>
+        </Form.Item>
+      </div>
      <Form.Item noStyle>
        <Space
          size={20}
          align="end"
-          style={{ width: '100%', display: 'flex', justifyContent: 'end' }}
+          style={{
+            width: '100%',
+            display: 'flex',
+            justifyContent: 'end',
+            paddingRight: 'var(--ant-popover-inner-padding)',
+            paddingTop: 'var(--ant-popover-inner-padding)'
+          }}
        >
-          <Button>Cancel</Button>
+          <Button onClick={handleCancel}>Cancel</Button>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
@@ -1,7 +1,6 @@
-import SealPopover from '@/components/popover';
 import { ControlOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
-import { Button, Select, Space } from 'antd';
+import { Button, Popover, Select, Space } from 'antd';
 import { useEffect, useState } from 'react';
 import ChatContent from './components/chatContent';
 import MessageInput from './components/messageInput';
@@ -17,6 +16,7 @@ const Playground: React.FC = () => {
  const [ModelList, setModelList] = useState(dataList);
  const [messageList, setMessageList] = useState<any[]>([]);
  const [selectedModel, setSelectedModel] = useState('llama3:latest');
+  const [showPopover, setShowPopover] = useState(false);

  const handleSelectChange = (value: string) => {
    setSelectedModel(value);
@@ -28,6 +28,14 @@ const Playground: React.FC = () => {
    setMessageList(['1']);
  };

+  const handleTogglePopover = () => {
+    setShowPopover(!showPopover);
+  };
+
+  const handleClosePopover = () => {
+    setShowPopover(false);
+  };
+
  useEffect(() => {
    getMessageList();
  }, [selectedModel]);
@@ -45,21 +53,26 @@ const Playground: React.FC = () => {
            onChange={handleSelectChange}
            variant="filled"
          ></Select>
-          <SealPopover
-            content={<ParamsSettings></ParamsSettings>}
+          <Popover
+            content={
+              <ParamsSettings onClose={handleClosePopover}></ParamsSettings>
+            }
            destroyTooltipOnHide={true}
            title="Params Settings"
            trigger="click"
            arrow={false}
-            overlayInnerStyle={{ maxHeight: '500px', overflow: 'auto' }}
+            open={showPopover}
+            overlayStyle={{ top: 70 }}
+            overlayInnerStyle={{ paddingRight: 0 }}
            placement="bottomRight"
          >
            <Button
+              onClick={handleTogglePopover}
              type="primary"
              shape="circle"
              icon={<ControlOutlined />}
            ></Button>
-          </SealPopover>
+          </Popover>
        </Space>
      ]}
      footer={[<MessageInput />]}