style: form item style
This commit is contained in:
jialin
@@ -1,69 +0,0 @@
|
|||||||
import classNames from 'classnames';
|
|
||||||
import React from 'react';
|
|
||||||
import LabelInfo from './components/label-info';
|
|
||||||
import wrapperStyle from './components/wrapper.less';
|
|
||||||
interface WrapperProps {
|
|
||||||
children: React.ReactNode;
|
|
||||||
label: React.ReactNode;
|
|
||||||
status?: string;
|
|
||||||
className?: string;
|
|
||||||
disabled?: boolean;
|
|
||||||
required?: boolean;
|
|
||||||
description?: React.ReactNode;
|
|
||||||
variant?: string;
|
|
||||||
style?: React.CSSProperties;
|
|
||||||
onClick?: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const Wrapper: React.FC<WrapperProps> = ({
|
|
||||||
children,
|
|
||||||
label,
|
|
||||||
status,
|
|
||||||
className,
|
|
||||||
disabled,
|
|
||||||
required,
|
|
||||||
variant,
|
|
||||||
style,
|
|
||||||
description
|
|
||||||
}) => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
padding: '0 calc(var(--ant-padding-sm) - 5px)',
|
|
||||||
width: '100%',
|
|
||||||
...style
|
|
||||||
}}
|
|
||||||
className={classNames(
|
|
||||||
wrapperStyle.wrapper,
|
|
||||||
wrapperStyle[`validate-status-${status}`],
|
|
||||||
disabled ? wrapperStyle['seal-input-wrapper-disabled'] : '',
|
|
||||||
variant === 'filled' ? wrapperStyle['filled'] : '',
|
|
||||||
variant === 'borderless' ? wrapperStyle['borderless'] : '',
|
|
||||||
className ? wrapperStyle[className] : ''
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
className={classNames(
|
|
||||||
wrapperStyle['label'],
|
|
||||||
wrapperStyle['isfoucs-has-value']
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<LabelInfo
|
|
||||||
label={label}
|
|
||||||
required={required}
|
|
||||||
description={description}
|
|
||||||
></LabelInfo>
|
|
||||||
</label>
|
|
||||||
<div
|
|
||||||
className="child-inner"
|
|
||||||
style={{
|
|
||||||
width: '100%'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Wrapper;
|
|
||||||
@@ -1,8 +1,9 @@
|
|||||||
import { Form, Input } from 'antd';
|
import { Form, Input } from 'antd';
|
||||||
import type { SearchProps } from 'antd/es/input/Search';
|
import type { SearchProps } from 'antd/es/input/Search';
|
||||||
import { useEffect, useRef, useState } from 'react';
|
import React, { useEffect, useRef, useState } from 'react';
|
||||||
import Wrapper from './components/wrapper';
|
|
||||||
import { SealFormItemProps } from './types';
|
import { SealFormItemProps } from './types';
|
||||||
|
import Wrapper from './wrapper';
|
||||||
|
import InputWrapper from './wrapper/input';
|
||||||
|
|
||||||
type OnSearch = (
|
type OnSearch = (
|
||||||
value: string,
|
value: string,
|
||||||
@@ -66,25 +67,27 @@ const SealInputSearch: React.FC<SearchProps & SealFormItemProps> = (props) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Wrapper
|
<InputWrapper>
|
||||||
status={status}
|
<Wrapper
|
||||||
label={label}
|
status={status}
|
||||||
isFocus={isFocus}
|
label={label}
|
||||||
required={required}
|
isFocus={isFocus}
|
||||||
description={description}
|
required={required}
|
||||||
disabled={props.disabled}
|
description={description}
|
||||||
onClick={handleClickWrapper}
|
disabled={props.disabled}
|
||||||
>
|
onClick={handleClickWrapper}
|
||||||
<Input.Search
|
>
|
||||||
{...rest}
|
<Input.Search
|
||||||
ref={inputRef}
|
{...rest}
|
||||||
autoComplete="off"
|
ref={inputRef}
|
||||||
onFocus={handleOnFocus}
|
autoComplete="off"
|
||||||
onBlur={handleOnBlur}
|
onFocus={handleOnFocus}
|
||||||
onSearch={handleSearch}
|
onBlur={handleOnBlur}
|
||||||
onChange={handleChange}
|
onSearch={handleSearch}
|
||||||
></Input.Search>
|
onChange={handleChange}
|
||||||
</Wrapper>
|
></Input.Search>
|
||||||
|
</Wrapper>
|
||||||
|
</InputWrapper>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -54,9 +54,7 @@ const SealSlider: React.FC<SealSliderProps> = (props) => {
|
|||||||
className="slider-label"
|
className="slider-label"
|
||||||
style={{ width: labelWidth || INPUT_WIDTH.mini }}
|
style={{ width: labelWidth || INPUT_WIDTH.mini }}
|
||||||
>
|
>
|
||||||
<span className="text">
|
<LabelInfo label={label} description={description}></LabelInfo>
|
||||||
<LabelInfo label={label} description={description}></LabelInfo>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
{inputnumber ? (
|
{inputnumber ? (
|
||||||
<InputNumber
|
<InputNumber
|
||||||
|
|||||||
@@ -109,7 +109,7 @@ const InputWrapper = styled.div`
|
|||||||
.ant-input-search-button {
|
.ant-input-search-button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -20px;
|
top: -20px;
|
||||||
right: 0;
|
right: 1px;
|
||||||
border-radius: 0 ${BORDERRADIUS}px ${BORDERRADIUS}px 0 !important;
|
border-radius: 0 ${BORDERRADIUS}px ${BORDERRADIUS}px 0 !important;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border: none;
|
border: none;
|
||||||
|
|||||||
@@ -2,6 +2,10 @@ import styled from 'styled-components';
|
|||||||
import { INPUTHEIGHT, INPUT_INNER_PADDING } from '../config';
|
import { INPUTHEIGHT, INPUT_INNER_PADDING } from '../config';
|
||||||
|
|
||||||
const SliderWrapper = styled.div`
|
const SliderWrapper = styled.div`
|
||||||
|
.__wrapper__ {
|
||||||
|
height: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
padding-block: 0;
|
padding-block: 0;
|
||||||
padding-inline: 2px;
|
padding-inline: 2px;
|
||||||
input.ant-input-number-input {
|
input.ant-input-number-input {
|
||||||
@@ -24,7 +28,7 @@ const SliderWrapper = styled.div`
|
|||||||
.label-val {
|
.label-val {
|
||||||
position: absolute !important;
|
position: absolute !important;
|
||||||
top: -14px;
|
top: -14px;
|
||||||
right: -14px;
|
right: -10px;
|
||||||
width: 80px;
|
width: 80px;
|
||||||
border-radius: var(--border-radius-base);
|
border-radius: var(--border-radius-base);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|||||||
@@ -1,347 +0,0 @@
|
|||||||
import FieldWrapper from '@/components/seal-form/field-wrapper';
|
|
||||||
import SealInput from '@/components/seal-form/seal-input';
|
|
||||||
import SealSelect from '@/components/seal-form/seal-select';
|
|
||||||
import { INPUT_WIDTH } from '@/constants';
|
|
||||||
import { QuestionCircleOutlined } from '@ant-design/icons';
|
|
||||||
import { useIntl } from '@umijs/max';
|
|
||||||
import { Form, InputNumber, Slider, Tooltip } from 'antd';
|
|
||||||
import _ from 'lodash';
|
|
||||||
import { memo, useCallback, useEffect, useId, useState } from 'react';
|
|
||||||
import CustomLabelStyles from '../style/custom-label.less';
|
|
||||||
|
|
||||||
type ParamsSettingsFormProps = {
|
|
||||||
seed?: number;
|
|
||||||
stop?: number;
|
|
||||||
temperature?: number;
|
|
||||||
top_p?: number;
|
|
||||||
max_tokens?: number;
|
|
||||||
model?: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
type ParamsSettingsProps = {
|
|
||||||
selectedModel?: string;
|
|
||||||
showModelSelector?: boolean;
|
|
||||||
params?: ParamsSettingsFormProps;
|
|
||||||
model?: string;
|
|
||||||
modelList: Global.BaseOption<string>[];
|
|
||||||
onValuesChange?: (changeValues: any, value: Record<string, any>) => void;
|
|
||||||
setParams: (params: any) => void;
|
|
||||||
globalParams?: ParamsSettingsFormProps;
|
|
||||||
};
|
|
||||||
|
|
||||||
const METAKEYS: Record<string, any> = {
|
|
||||||
seed: 'seed',
|
|
||||||
stop: 'stop',
|
|
||||||
temperature: 'temperature',
|
|
||||||
top_p: 'top_p',
|
|
||||||
n_ctx: 'n_ctx',
|
|
||||||
n_slot: 'n_slot',
|
|
||||||
max_model_len: 'max_model_len'
|
|
||||||
};
|
|
||||||
|
|
||||||
const ParamsSettings: React.FC<ParamsSettingsProps> = ({
|
|
||||||
selectedModel,
|
|
||||||
setParams,
|
|
||||||
globalParams,
|
|
||||||
onValuesChange,
|
|
||||||
modelList,
|
|
||||||
showModelSelector = true
|
|
||||||
}) => {
|
|
||||||
const intl = useIntl();
|
|
||||||
const initialValues = {
|
|
||||||
seed: null,
|
|
||||||
stop: null,
|
|
||||||
temperature: 1,
|
|
||||||
top_p: 1,
|
|
||||||
max_tokens: 1024,
|
|
||||||
...globalParams
|
|
||||||
};
|
|
||||||
const [form] = Form.useForm();
|
|
||||||
const formId = useId();
|
|
||||||
const [metaData, setMetaData] = useState<Record<string, any>>({});
|
|
||||||
const [firstLoad, setFirstLoad] = useState(true);
|
|
||||||
|
|
||||||
const handleOnFinish = (values: any) => {
|
|
||||||
console.log('handleOnFinish', values);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleOnFinishFailed = (errorInfo: any) => {
|
|
||||||
console.log('handleOnFinishFailed', errorInfo);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleValuesChange = useCallback(
|
|
||||||
(changedValues: any, allValues: any) => {
|
|
||||||
setParams?.(allValues);
|
|
||||||
onValuesChange?.(changedValues, allValues);
|
|
||||||
},
|
|
||||||
[onValuesChange, setParams]
|
|
||||||
);
|
|
||||||
const handleFieldValueChange = useCallback(
|
|
||||||
(val: any, field: string) => {
|
|
||||||
const values = form.getFieldsValue();
|
|
||||||
form.setFieldsValue({
|
|
||||||
...values,
|
|
||||||
[field]: val
|
|
||||||
});
|
|
||||||
setParams({
|
|
||||||
...values,
|
|
||||||
[field]: val
|
|
||||||
});
|
|
||||||
onValuesChange?.(
|
|
||||||
{ [field]: val },
|
|
||||||
{
|
|
||||||
...values,
|
|
||||||
[field]: val
|
|
||||||
}
|
|
||||||
);
|
|
||||||
},
|
|
||||||
[form, setParams, onValuesChange]
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleModelChange = (val: string) => {
|
|
||||||
const model = _.find(modelList, { value: val });
|
|
||||||
const modelMeta = model?.meta || {};
|
|
||||||
const modelMetaValue = _.pick(modelMeta, _.keys(METAKEYS));
|
|
||||||
const obj = Object.entries(METAKEYS).reduce((acc: any, [key, value]) => {
|
|
||||||
const val = modelMetaValue[key];
|
|
||||||
if (val && _.hasIn(modelMetaValue, key)) {
|
|
||||||
acc[value] = val;
|
|
||||||
}
|
|
||||||
return acc;
|
|
||||||
}, {});
|
|
||||||
|
|
||||||
let defaultMaxTokens = 1024;
|
|
||||||
|
|
||||||
if (obj.n_ctx && obj.n_slot) {
|
|
||||||
defaultMaxTokens = _.divide(obj.n_ctx / 2, obj.n_slot);
|
|
||||||
} else if (obj.max_model_len) {
|
|
||||||
defaultMaxTokens = obj.max_model_len / 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
const initials = {
|
|
||||||
..._.omit(obj, ['n_ctx', 'n_slot', 'max_model_len']),
|
|
||||||
seed: obj.seed === -1 ? null : obj.seed,
|
|
||||||
max_tokens: defaultMaxTokens
|
|
||||||
};
|
|
||||||
|
|
||||||
form.setFieldsValue(initials);
|
|
||||||
|
|
||||||
setMetaData({
|
|
||||||
...obj,
|
|
||||||
max_tokens: obj.max_model_len || _.divide(obj.n_ctx, obj.n_slot)
|
|
||||||
});
|
|
||||||
return initials;
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
let model = selectedModel || '';
|
|
||||||
if (showModelSelector) {
|
|
||||||
model = model || _.get(modelList, '[0].value');
|
|
||||||
}
|
|
||||||
const modelMetaData = handleModelChange(model);
|
|
||||||
const mergeData = _.merge({}, initialValues, modelMetaData);
|
|
||||||
|
|
||||||
form.setFieldsValue({
|
|
||||||
...mergeData,
|
|
||||||
model: model
|
|
||||||
});
|
|
||||||
setParams({
|
|
||||||
...mergeData,
|
|
||||||
model: model
|
|
||||||
});
|
|
||||||
setFirstLoad(false);
|
|
||||||
}, [modelList, showModelSelector, selectedModel]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!firstLoad) {
|
|
||||||
form.setFieldsValue(globalParams);
|
|
||||||
}
|
|
||||||
}, [globalParams, firstLoad]);
|
|
||||||
|
|
||||||
const renderLabel = (args: {
|
|
||||||
field: string;
|
|
||||||
label: string;
|
|
||||||
description: string;
|
|
||||||
}) => {
|
|
||||||
return (
|
|
||||||
<span
|
|
||||||
className={CustomLabelStyles.label}
|
|
||||||
style={{ width: INPUT_WIDTH.mini }}
|
|
||||||
>
|
|
||||||
<span className="text">
|
|
||||||
{args.description ? (
|
|
||||||
<Tooltip title={args.description}>
|
|
||||||
<span> {args.label}</span>
|
|
||||||
<span className="m-l-5">
|
|
||||||
<QuestionCircleOutlined />
|
|
||||||
</span>
|
|
||||||
</Tooltip>
|
|
||||||
) : (
|
|
||||||
<span>{args.label}</span>
|
|
||||||
)}
|
|
||||||
</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
|
|
||||||
name={formId}
|
|
||||||
form={form}
|
|
||||||
onValuesChange={handleValuesChange}
|
|
||||||
onFinish={handleOnFinish}
|
|
||||||
onFinishFailed={handleOnFinishFailed}
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
{showModelSelector && (
|
|
||||||
<>
|
|
||||||
<h3 className="m-b-20 m-l-10 font-size-14 line-24">
|
|
||||||
{intl.formatMessage({ id: 'playground.model' })}
|
|
||||||
</h3>
|
|
||||||
<Form.Item<ParamsSettingsFormProps>
|
|
||||||
name="model"
|
|
||||||
rules={[
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: intl.formatMessage(
|
|
||||||
{
|
|
||||||
id: 'common.form.rule.select'
|
|
||||||
},
|
|
||||||
{ name: intl.formatMessage({ id: 'playground.model' }) }
|
|
||||||
)
|
|
||||||
}
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<SealSelect
|
|
||||||
showSearch={true}
|
|
||||||
options={modelList}
|
|
||||||
onChange={handleModelChange}
|
|
||||||
></SealSelect>
|
|
||||||
</Form.Item>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
<h3 className="m-b-20 m-l-10 flex-between flex-center font-size-14 line-24">
|
|
||||||
<span>{intl.formatMessage({ id: 'playground.parameters' })}</span>
|
|
||||||
</h3>
|
|
||||||
<Form.Item<ParamsSettingsFormProps>
|
|
||||||
name="temperature"
|
|
||||||
rules={[{ required: false }]}
|
|
||||||
>
|
|
||||||
<FieldWrapper
|
|
||||||
label={renderLabel({
|
|
||||||
field: 'temperature',
|
|
||||||
label: 'Temperature',
|
|
||||||
description: intl.formatMessage({
|
|
||||||
id: 'playground.params.temperature.tips'
|
|
||||||
})
|
|
||||||
})}
|
|
||||||
style={{ padding: '20px 2px 0' }}
|
|
||||||
variant="borderless"
|
|
||||||
>
|
|
||||||
<Slider
|
|
||||||
defaultValue={1}
|
|
||||||
max={2}
|
|
||||||
step={0.1}
|
|
||||||
style={{ marginBottom: 0, marginTop: 16, marginInline: 0 }}
|
|
||||||
tooltip={{ open: false }}
|
|
||||||
value={form.getFieldValue('temperature') || undefined}
|
|
||||||
onChange={(val) => handleFieldValueChange(val, 'temperature')}
|
|
||||||
></Slider>
|
|
||||||
</FieldWrapper>
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item<ParamsSettingsFormProps>
|
|
||||||
name="max_tokens"
|
|
||||||
rules={[{ required: false }]}
|
|
||||||
>
|
|
||||||
<FieldWrapper
|
|
||||||
label={renderLabel({
|
|
||||||
field: 'max_tokens',
|
|
||||||
label: 'Max Tokens',
|
|
||||||
description: intl.formatMessage({
|
|
||||||
id: 'playground.params.maxtokens.tips'
|
|
||||||
})
|
|
||||||
})}
|
|
||||||
style={{ padding: '20px 2px 0' }}
|
|
||||||
variant="borderless"
|
|
||||||
>
|
|
||||||
<Slider
|
|
||||||
defaultValue={2048}
|
|
||||||
max={metaData.max_tokens || 16 * 1024}
|
|
||||||
step={1}
|
|
||||||
style={{ marginBottom: 0, marginTop: 16, marginInline: 0 }}
|
|
||||||
tooltip={{ open: false }}
|
|
||||||
value={form.getFieldValue('max_tokens') || undefined}
|
|
||||||
onChange={(val) => handleFieldValueChange(val, 'max_tokens')}
|
|
||||||
></Slider>
|
|
||||||
</FieldWrapper>
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item<ParamsSettingsFormProps>
|
|
||||||
name="top_p"
|
|
||||||
rules={[{ required: false }]}
|
|
||||||
>
|
|
||||||
<FieldWrapper
|
|
||||||
label={renderLabel({
|
|
||||||
field: 'top_p',
|
|
||||||
label: 'Top P',
|
|
||||||
description: intl.formatMessage({
|
|
||||||
id: 'playground.params.topp.tips'
|
|
||||||
})
|
|
||||||
})}
|
|
||||||
style={{ padding: '20px 2px 0' }}
|
|
||||||
variant="borderless"
|
|
||||||
>
|
|
||||||
<Slider
|
|
||||||
defaultValue={1}
|
|
||||||
max={1}
|
|
||||||
step={0.1}
|
|
||||||
style={{ marginBottom: 0, marginTop: 16, marginInline: 0 }}
|
|
||||||
tooltip={{ open: false }}
|
|
||||||
value={form.getFieldValue('top_p') || undefined}
|
|
||||||
onChange={(val) => handleFieldValueChange(val, 'top_p')}
|
|
||||||
></Slider>
|
|
||||||
</FieldWrapper>
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item<ParamsSettingsFormProps>
|
|
||||||
name="seed"
|
|
||||||
rules={[{ required: false }]}
|
|
||||||
>
|
|
||||||
<SealInput.Number
|
|
||||||
label="Seed"
|
|
||||||
min={0}
|
|
||||||
description={intl.formatMessage({
|
|
||||||
id: 'playground.params.seed.tips'
|
|
||||||
})}
|
|
||||||
style={{ width: INPUT_WIDTH.mini }}
|
|
||||||
></SealInput.Number>
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item<ParamsSettingsFormProps>
|
|
||||||
name="stop"
|
|
||||||
rules={[{ required: false }]}
|
|
||||||
normalize={(value) => {
|
|
||||||
return value || null;
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<SealInput.Input
|
|
||||||
allowClear
|
|
||||||
label="Stop Sequence"
|
|
||||||
description={intl.formatMessage({
|
|
||||||
id: 'playground.params.stop.tips'
|
|
||||||
})}
|
|
||||||
style={{ width: INPUT_WIDTH.mini }}
|
|
||||||
></SealInput.Input>
|
|
||||||
</Form.Item>
|
|
||||||
</div>
|
|
||||||
</Form>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(ParamsSettings);
|
|
||||||
Reference in New Issue
Block a user