style: playground params styles

src/pages/llmodels/index.tsx

@@ -318,7 +318,7 @@ const Models: React.FC = () => {
                     {item.node_ip}:{item.port}
                   </Col>
                   <Col span={5}>
-                    <span>{item.huggingface_repo_id}</span>
+                    <span>{item.huggingface_filename}</span>
                   </Col>
                   <Col span={4}>
                     {dayjs(item.updated_at).format('YYYY-MM-DD HH:mm:ss')}

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

@@ -3,9 +3,10 @@ import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import { INPUT_WIDTH } from '@/constants';
 import { queryModelsList } from '@/pages/llmodels/apis';
-import { Form, Slider } from 'antd';
+import { Button, Form, InputNumber, Slider } from 'antd';
 import _ from 'lodash';
 import { useEffect, useState } from 'react';
+import CustomLabelStyles from '../style/custom-label.less';
 
 type ParamsSettingsFormProps = {
   seed?: number;
@@ -90,9 +91,42 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
   };
 
   const handleValuesChange = (changedValues: any, allValues: any) => {
-    console.log('handleValuesChange', changedValues, allValues);
     setParams?.(allValues);
   };
+  const handleFieldValueChange = (val: any, field: string) => {
+    const values = form.getFieldsValue();
+    form.setFieldsValue({
+      ...values,
+      [field]: val
+    });
+    setParams({
+      ...values,
+      [field]: val
+    });
+  };
+
+  const handleResetParams = () => {
+    form.setFieldsValue(initialValues);
+    setParams(initialValues);
+  };
+  const renderLabel = (args: { field: string; label: string }) => {
+    return (
+      <span
+        className={CustomLabelStyles.label}
+        style={{ width: INPUT_WIDTH.mini }}
+      >
+        <span className="text">{args.label}</span>
+        <InputNumber
+          className="label-val"
+          variant="outlined"
+          size="small"
+          value={form.getFieldValue(args.field)}
+          controls={false}
+          onChange={(val) => handleFieldValueChange(val, args.field)}
+        ></InputNumber>
+      </span>
+    );
+  };
 
   return (
     <Form
@@ -110,17 +144,32 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
         >
           <SealSelect options={ModelList} label="Model"></SealSelect>
         </Form.Item>
-        <h3 className="m-b-20 m-l-10">Parameters</h3>
+        <h3 className="m-b-20 m-l-10 flex-between flex-center">
+          <span>Parameters</span>
+          <Button size="small" onClick={handleResetParams}>
+            Reset
+          </Button>
+        </h3>
         <Form.Item<ParamsSettingsFormProps>
           name="temperature"
           rules={[{ required: true }]}
         >
-          <FieldWrapper label="Temperature">
+          <FieldWrapper
+            label={renderLabel({
+              field: 'temperature',
+              label: 'Temperature'
+            })}
+            style={{ paddingLeft: 0 }}
+            variant="borderless"
+          >
             <Slider
               defaultValue={1}
               max={2}
               step={0.1}
               style={{ marginBottom: 0 }}
+              tooltip={{ open: false }}
+              value={form.getFieldValue('temperature') || undefined}
+              onChange={(val) => handleFieldValueChange(val, 'temperature')}
             ></Slider>
           </FieldWrapper>
         </Form.Item>
@@ -128,21 +177,49 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
           name="max_tokens"
           rules={[{ required: true }]}
         >
-          <SealInput.Number
+          <FieldWrapper
+            label={renderLabel({
+              field: 'max_tokens',
+              label: 'Max Tokens'
+            })}
+            style={{ paddingLeft: 0 }}
+            variant="borderless"
+          >
+            <Slider
+              defaultValue={1024}
+              max={16384}
+              step={1}
+              style={{ marginBottom: 0 }}
+              tooltip={{ open: false }}
+              value={form.getFieldValue('max_tokens') || undefined}
+              onChange={(val) => handleFieldValueChange(val, 'max_tokens')}
+            ></Slider>
+          </FieldWrapper>
+          {/* <SealInput.Number
             label="Max Tokens"
             style={{ width: INPUT_WIDTH.mini }}
-          ></SealInput.Number>
+          ></SealInput.Number> */}
         </Form.Item>
         <Form.Item<ParamsSettingsFormProps>
           name="top_p"
           rules={[{ required: true }]}
         >
-          <FieldWrapper label="Top P">
+          <FieldWrapper
+            label={renderLabel({
+              field: 'top_p',
+              label: 'Top P'
+            })}
+            style={{ paddingLeft: 0 }}
+            variant="borderless"
+          >
             <Slider
               defaultValue={1}
               max={1}
               step={0.1}
               style={{ marginBottom: 0 }}
+              tooltip={{ open: false }}
+              value={form.getFieldValue('top_p') || undefined}
+              onChange={(val) => handleFieldValueChange(val, 'top_p')}
             ></Slider>
           </FieldWrapper>
         </Form.Item>
@@ -150,10 +227,27 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
           name="seed"
           rules={[{ required: true }]}
         >
-          <SealInput.Number
+          <FieldWrapper
+            label={renderLabel({
+              field: 'seed',
+              label: 'Seed'
+            })}
+            style={{ paddingLeft: 0 }}
+            variant="borderless"
+          >
+            <Slider
+              defaultValue={undefined}
+              step={1}
+              tooltip={{ open: false }}
+              value={form.getFieldValue('seed') || undefined}
+              onChange={(val) => handleFieldValueChange(val, 'seed')}
+              style={{ marginBottom: 0 }}
+            ></Slider>
+          </FieldWrapper>
+          {/* <SealInput.Number
             label="Seed"
             style={{ width: INPUT_WIDTH.mini }}
-          ></SealInput.Number>
+          ></SealInput.Number> */}
         </Form.Item>
         <Form.Item<ParamsSettingsFormProps>
           name="stop"

src/pages/playground/style/custom-label.less

@@ -0,0 +1,19 @@
+:local(.label) {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  width: 100%;
+
+  :global(.label-val) {
+    position: absolute;
+    top: -14px;
+    right: 26px;
+    width: 80px;
+    border-radius: var(--border-radius-small);
+    text-align: center;
+
+    :global(.ant-input-number-input) {
+      text-align: center !important;
+    }
+  }
+}