pengjunjie/ragflow
1
0
Fork 1
mirror of https://github.com/infiniflow/ragflow.git synced 2025-12-08 20:42:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Add LlmSettingFieldItems component #3221 (#4906)

Browse Source 
### What problem does this PR solve?

Feat: Add LlmSettingFieldItems component #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu
2025-02-12 15:43:31 +08:00
committed by GitHub
parent b08bb56f6c
commit 7f06712a30
6 changed files with 282 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
web/src/components/llm-setting-items/next.tsx Normal file
View File

@ -0,0 +1,219 @@
import { LlmModelType, ModelVariableType } from '@/constants/knowledge';
import { useTranslate } from '@/hooks/common-hooks';
import { useComposeLlmOptionsByModelTypes } from '@/hooks/llm-hooks';
import { camelCase } from 'lodash';
import { useCallback } from 'react';
import { useFormContext } from 'react-hook-form';
import {
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '../ui/form';
import { Input } from '../ui/input';
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
} from '../ui/select';
import { FormSlider } from '../ui/slider';
import { Switch } from '../ui/switch';
interface SliderWithInputNumberFormFieldProps {
name: string;
label: string;
checkName: string;
max: number;
min?: number;
step?: number;
}
function SliderWithInputNumberFormField({
name,
label,
checkName,
max,
min = 0,
step = 1,
}: SliderWithInputNumberFormFieldProps) {
const { control, watch } = useFormContext();
const { t } = useTranslate('chat');
const disabled = !watch(checkName);
return (
<FormField
control={control}
name={name}
render={({ field }) => (
<FormItem>
<div className="flex items-center justify-between">
<FormLabel>{t(label)}</FormLabel>
<FormField
control={control}
name={checkName}
render={({ field }) => (
<FormItem>
<FormControl>
<Switch
{...field}
checked={field.value}
onCheckedChange={field.onChange}
></Switch>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<FormControl>
<div className="flex w-full items-center space-x-2">
<FormSlider
{...field}
disabled={disabled}
max={max}
min={min}
step={step}
></FormSlider>
<Input
type={'number'}
className="w-2/5"
{...field}
disabled={disabled}
max={max}
min={min}
step={step}
/>
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
);
}
interface LlmSettingFieldItemsProps {
prefix?: string;
}
export function LlmSettingFieldItems({ prefix }: LlmSettingFieldItemsProps) {
const form = useFormContext();
const { t } = useTranslate('chat');
const modelOptions = useComposeLlmOptionsByModelTypes([
LlmModelType.Chat,
LlmModelType.Image2text,
]);
const parameterOptions = Object.values(ModelVariableType).map((x) => ({
label: t(camelCase(x)),
value: x,
}));
const getFieldWithPrefix = useCallback(
(name: string) => {
return `${prefix}.${name}`;
},
[prefix],
);
return (
<div className="space-y-8">
<FormField
control={form.control}
name={'llm_id'}
render={({ field }) => (
<FormItem>
<FormLabel>{t('model')}</FormLabel>
<FormControl>
<Select onValueChange={field.onChange} {...field}>
<SelectTrigger value={field.value}>
<SelectValue />
</SelectTrigger>
<SelectContent>
{modelOptions.map((x) => (
<SelectGroup key={x.value}>
<SelectLabel>{x.label}</SelectLabel>
{x.options.map((y) => (
<SelectItem
value={y.value}
key={y.value}
disabled={y.disabled}
>
{y.label}
</SelectItem>
))}
</SelectGroup>
))}
</SelectContent>
</Select>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name={'parameter'}
render={({ field }) => (
<FormItem>
<FormLabel>{t('freedom')}</FormLabel>
<FormControl>
<Select {...field} onValueChange={field.onChange}>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
{parameterOptions.map((x) => (
<SelectItem value={x.value} key={x.value}>
{x.label}
</SelectItem>
))}
</SelectContent>
</Select>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<SliderWithInputNumberFormField
name={getFieldWithPrefix('temperature')}
checkName="temperatureEnabled"
label="temperature"
max={1}
step={0.01}
></SliderWithInputNumberFormField>
<SliderWithInputNumberFormField
name={getFieldWithPrefix('top_p')}
checkName="topPEnabled"
label="topP"
max={1}
step={0.01}
></SliderWithInputNumberFormField>
<SliderWithInputNumberFormField
name={getFieldWithPrefix('presence_penalty')}
checkName="presencePenaltyEnabled"
label="presencePenalty"
max={1}
step={0.01}
></SliderWithInputNumberFormField>
<SliderWithInputNumberFormField
name={getFieldWithPrefix('frequency_penalty')}
checkName="frequencyPenaltyEnabled"
label="frequencyPenalty"
max={1}
step={0.01}
></SliderWithInputNumberFormField>
<SliderWithInputNumberFormField
name={getFieldWithPrefix('max_tokens')}
checkName="maxTokensEnabled"
label="maxTokens"
max={128000}
></SliderWithInputNumberFormField>
</div>
);
}