Skip to content

Commit

Permalink
fix: fixed the issue that ModelSetting could not be saved #614 (#617)
Browse files Browse the repository at this point in the history
### What problem does this PR solve?

fix: fixed the issue that ModelSetting  could not be saved #614

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
  • Loading branch information
cike8899 committed Apr 30, 2024
1 parent 674b3ae commit 7059ec2
Show file tree
Hide file tree
Showing 3 changed files with 179 additions and 117 deletions.
12 changes: 6 additions & 6 deletions web/src/interfaces/database/chat.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,11 @@ export interface LlmSetting {
}

export interface Variable {
frequency_penalty: number;
max_tokens: number;
presence_penalty: number;
temperature: number;
top_p: number;
frequency_penalty?: number;
max_tokens?: number;
presence_penalty?: number;
temperature?: number;
top_p?: number;
}

export interface IDialog {
Expand All @@ -38,7 +38,7 @@ export interface IDialog {
kb_names: string[];
language: string;
llm_id: string;
llm_setting: LlmSetting;
llm_setting: Variable;
llm_setting_type: string;
name: string;
prompt_config: PromptConfig;
Expand Down
3 changes: 3 additions & 0 deletions web/src/pages/chat/chat-configuration-modal/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -181,6 +181,9 @@ const ChatConfigurationModal = ({
key={key}
show={key === value}
form={form}
{...(key === ConfigurationSegmented.ModelSetting
? { initialLlmSetting: initialDialog.llm_setting, visible }
: {})}
{...(key === ConfigurationSegmented.PromptEngine
? { ref: promptEngineRef }
: {})}
Expand Down
281 changes: 170 additions & 111 deletions web/src/pages/chat/chat-configuration-modal/model-setting.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,19 @@ import { ISegmentedContentProps } from '../interface';

import { useTranslate } from '@/hooks/commonHooks';
import { useFetchLlmList, useSelectLlmOptions } from '@/hooks/llmHooks';
import { Variable } from '@/interfaces/database/chat';
import { variableEnabledFieldMap } from '../constants';
import styles from './index.less';

const ModelSetting = ({ show, form }: ISegmentedContentProps) => {
const ModelSetting = ({
show,
form,
initialLlmSetting,
visible,
}: ISegmentedContentProps & {
initialLlmSetting?: Variable;
visible?: boolean;
}) => {
const { t } = useTranslate('chat');
const parameterOptions = Object.values(ModelVariableType).map((x) => ({
label: t(camelCase(x)),
Expand All @@ -29,14 +38,23 @@ const ModelSetting = ({ show, form }: ISegmentedContentProps) => {
};

useEffect(() => {
const values = Object.keys(variableEnabledFieldMap).reduce<
Record<string, boolean>
>((pre, field) => {
pre[field] = true;
return pre;
}, {});
form.setFieldsValue(values);
}, [form]);
if (visible) {
const values = Object.keys(variableEnabledFieldMap).reduce<
Record<string, boolean>
>((pre, field) => {
pre[field] =
initialLlmSetting === undefined
? true
: !!initialLlmSetting[
variableEnabledFieldMap[
field as keyof typeof variableEnabledFieldMap
] as keyof Variable
];
return pre;
}, {});
form.setFieldsValue(values);
}
}, [form, initialLlmSetting, visible]);

useFetchLlmList(LlmModelType.Chat);

Expand All @@ -60,7 +78,6 @@ const ModelSetting = ({ show, form }: ISegmentedContentProps) => {
name="parameters"
tooltip={t('freedomTip')}
initialValue={ModelVariableType.Precise}
// rules={[{ required: true, message: 'Please input!' }]}
>
<Select<ModelVariableType>
options={parameterOptions}
Expand All @@ -76,26 +93,33 @@ const ModelSetting = ({ show, form }: ISegmentedContentProps) => {
>
<Switch size="small" />
</Form.Item>
<Flex flex={1}>
<Form.Item
name={['llm_setting', 'temperature']}
noStyle
rules={[{ required: true, message: t('temperatureMessage') }]}
>
<Slider className={styles.variableSlider} max={1} step={0.01} />
</Form.Item>
</Flex>
<Form.Item
name={['llm_setting', 'temperature']}
noStyle
rules={[{ required: true, message: t('temperatureMessage') }]}
>
<InputNumber
className={styles.sliderInputNumber}
max={1}
min={0}
step={0.01}
/>
<Form.Item noStyle dependencies={['temperatureEnabled']}>
{({ getFieldValue }) => {
const disabled = !getFieldValue('temperatureEnabled');
return (
<>
<Flex flex={1}>
<Form.Item name={['llm_setting', 'temperature']} noStyle>
<Slider
className={styles.variableSlider}
max={1}
step={0.01}
disabled={disabled}
/>
</Form.Item>
</Flex>
<Form.Item name={['llm_setting', 'temperature']} noStyle>
<InputNumber
className={styles.sliderInputNumber}
max={1}
min={0}
step={0.01}
disabled={disabled}
/>
</Form.Item>
</>
);
}}
</Form.Item>
</Flex>
</Form.Item>
Expand All @@ -104,26 +128,33 @@ const ModelSetting = ({ show, form }: ISegmentedContentProps) => {
<Form.Item name={'topPEnabled'} valuePropName="checked" noStyle>
<Switch size="small" />
</Form.Item>
<Flex flex={1}>
<Form.Item
name={['llm_setting', 'top_p']}
noStyle
rules={[{ required: true, message: t('topPMessage') }]}
>
<Slider className={styles.variableSlider} max={1} step={0.01} />
</Form.Item>
</Flex>
<Form.Item
name={['llm_setting', 'top_p']}
noStyle
rules={[{ required: true, message: t('topPMessage') }]}
>
<InputNumber
className={styles.sliderInputNumber}
max={1}
min={0}
step={0.01}
/>
<Form.Item noStyle dependencies={['topPEnabled']}>
{({ getFieldValue }) => {
const disabled = !getFieldValue('topPEnabled');
return (
<>
<Flex flex={1}>
<Form.Item name={['llm_setting', 'top_p']} noStyle>
<Slider
className={styles.variableSlider}
max={1}
step={0.01}
disabled={disabled}
/>
</Form.Item>
</Flex>
<Form.Item name={['llm_setting', 'top_p']} noStyle>
<InputNumber
className={styles.sliderInputNumber}
max={1}
min={0}
step={0.01}
disabled={disabled}
/>
</Form.Item>
</>
);
}}
</Form.Item>
</Flex>
</Form.Item>
Expand All @@ -136,26 +167,36 @@ const ModelSetting = ({ show, form }: ISegmentedContentProps) => {
>
<Switch size="small" />
</Form.Item>
<Flex flex={1}>
<Form.Item
name={['llm_setting', 'presence_penalty']}
noStyle
rules={[{ required: true, message: t('presencePenaltyMessage') }]}
>
<Slider className={styles.variableSlider} max={1} step={0.01} />
</Form.Item>
</Flex>
<Form.Item
name={['llm_setting', 'presence_penalty']}
noStyle
rules={[{ required: true, message: t('presencePenaltyMessage') }]}
>
<InputNumber
className={styles.sliderInputNumber}
max={1}
min={0}
step={0.01}
/>
<Form.Item noStyle dependencies={['presencePenaltyEnabled']}>
{({ getFieldValue }) => {
const disabled = !getFieldValue('presencePenaltyEnabled');
return (
<>
<Flex flex={1}>
<Form.Item
name={['llm_setting', 'presence_penalty']}
noStyle
>
<Slider
className={styles.variableSlider}
max={1}
step={0.01}
disabled={disabled}
/>
</Form.Item>
</Flex>
<Form.Item name={['llm_setting', 'presence_penalty']} noStyle>
<InputNumber
className={styles.sliderInputNumber}
max={1}
min={0}
step={0.01}
disabled={disabled}
/>
</Form.Item>
</>
);
}}
</Form.Item>
</Flex>
</Form.Item>
Expand All @@ -171,28 +212,39 @@ const ModelSetting = ({ show, form }: ISegmentedContentProps) => {
>
<Switch size="small" />
</Form.Item>
<Flex flex={1}>
<Form.Item
name={['llm_setting', 'frequency_penalty']}
noStyle
rules={[
{ required: true, message: t('frequencyPenaltyMessage') },
]}
>
<Slider className={styles.variableSlider} max={1} step={0.01} />
</Form.Item>
</Flex>
<Form.Item
name={['llm_setting', 'frequency_penalty']}
noStyle
rules={[{ required: true, message: t('frequencyPenaltyMessage') }]}
>
<InputNumber
className={styles.sliderInputNumber}
max={1}
min={0}
step={0.01}
/>
<Form.Item noStyle dependencies={['frequencyPenaltyEnabled']}>
{({ getFieldValue }) => {
const disabled = !getFieldValue('frequencyPenaltyEnabled');
return (
<>
<Flex flex={1}>
<Form.Item
name={['llm_setting', 'frequency_penalty']}
noStyle
>
<Slider
className={styles.variableSlider}
max={1}
step={0.01}
disabled={disabled}
/>
</Form.Item>
</Flex>
<Form.Item
name={['llm_setting', 'frequency_penalty']}
noStyle
>
<InputNumber
className={styles.sliderInputNumber}
max={1}
min={0}
step={0.01}
disabled={disabled}
/>
</Form.Item>
</>
);
}}
</Form.Item>
</Flex>
</Form.Item>
Expand All @@ -201,25 +253,32 @@ const ModelSetting = ({ show, form }: ISegmentedContentProps) => {
<Form.Item name={'maxTokensEnabled'} valuePropName="checked" noStyle>
<Switch size="small" />
</Form.Item>
<Flex flex={1}>
<Form.Item
name={['llm_setting', 'max_tokens']}
noStyle
rules={[{ required: true, message: t('maxTokensMessage') }]}
>
<Slider className={styles.variableSlider} max={2048} />
</Form.Item>
</Flex>
<Form.Item
name={['llm_setting', 'max_tokens']}
noStyle
rules={[{ required: true, message: t('maxTokensMessage') }]}
>
<InputNumber
className={styles.sliderInputNumber}
max={2048}
min={0}
/>
<Form.Item noStyle dependencies={['maxTokensEnabled']}>
{({ getFieldValue }) => {
const disabled = !getFieldValue('maxTokensEnabled');

return (
<>
<Flex flex={1}>
<Form.Item name={['llm_setting', 'max_tokens']} noStyle>
<Slider
className={styles.variableSlider}
max={2048}
disabled={disabled}
/>
</Form.Item>
</Flex>
<Form.Item name={['llm_setting', 'max_tokens']} noStyle>
<InputNumber
disabled={disabled}
className={styles.sliderInputNumber}
max={2048}
min={0}
/>
</Form.Item>
</>
);
}}
</Form.Item>
</Flex>
</Form.Item>
Expand Down

0 comments on commit 7059ec2

Please sign in to comment.