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

Fix: Refactor the similarity slider component and modify the style of the dataset-test page #10703 (#10846)

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

Fix: Refactor the similarity slider component and modify the style of
the dataset-test page

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
This commit is contained in:
chanx
2025-10-28 19:17:05 +08:00
committed by GitHub
parent 11247d1a9d
commit c5d1139f7b
8 changed files with 105 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
web/src/components/similarity-slider/index.tsx
View File

@ -1,7 +1,19 @@
import { FormLayout } from '@/constants/form';
import { useTranslate } from '@/hooks/common-hooks';
import { cn } from '@/lib/utils';
import { Form, Slider } from 'antd';
import { useFormContext } from 'react-hook-form';
import { z } from 'zod';
import { SliderInputFormField } from '../slider-input-form-field';
import { SingleFormSlider } from '../ui/dual-range-slider';
import {
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '../ui/form';
import { NumberInput } from '../ui/input';
type FieldType = {
similarity_threshold?: number;
@ -44,6 +56,7 @@ const SimilaritySlider = ({
export default SimilaritySlider;
interface SimilaritySliderFormFieldProps {
similarityName?: string;
vectorSimilarityWeightName?: string;
isTooltipShown?: boolean;
}
@ -70,37 +83,93 @@ export const initialVectorSimilarityWeightValue = {
};
export function SimilaritySliderFormField({
similarityName = 'similarity_threshold',
vectorSimilarityWeightName = 'vector_similarity_weight',
isTooltipShown,
}: SimilaritySliderFormFieldProps) {
const { t } = useTranslate('knowledgeDetails');
const isVector = vectorSimilarityWeightName === 'vector_similarity_weight';
const form = useFormContext();
const isVector =
vectorSimilarityWeightName.indexOf('vector_similarity_weight') > -1;
return (
<>
<SliderInputFormField
name={'similarity_threshold'}
name={similarityName}
label={t('similarityThreshold')}
max={1}
step={0.01}
layout={FormLayout.Vertical}
tooltip={isTooltipShown && t('similarityThresholdTip')}
></SliderInputFormField>
<SliderInputFormField
<FormField
control={form.control}
name={vectorSimilarityWeightName}
label={t(
isVector ? 'vectorSimilarityWeight' : 'keywordSimilarityWeight',
defaultValue={0}
render={({ field }) => (
<FormItem
// className={cn({ 'flex items-center gap-1 space-y-0': isHorizontal })}
>
<FormLabel
tooltip={
isTooltipShown &&
t(
isVector
? 'vectorSimilarityWeightTip'
: 'keywordSimilarityWeightTip',
)
}
>
{t(
isVector ? 'vectorSimilarityWeight' : 'keywordSimilarityWeight',
)}
</FormLabel>
<div className={cn('flex items-end gap-14 justify-between')}>
<FormControl>
<div className="flex flex-col flex-1 gap-2">
<div className="flex justify-between items-center">
<div className="flex items-center gap-1">
<label className="italic text-xs text-text-secondary">
vector
</label>
<span className="bg-bg-card rounded-md p-1 w-10 text-center text-xs">
{field.value.toFixed(2)}
</span>
</div>
<div className="flex items-center gap-1">
<label className="italic text-xs text-text-secondary">
full-text
</label>
<span className="bg-bg-card rounded-md p-1 w-10 text-center text-xs">
{(1 - field.value).toFixed(2)}
</span>
</div>
</div>
<SingleFormSlider
{...field}
max={1}
step={0.01}
min={0}
></SingleFormSlider>
</div>
</FormControl>
<FormControl>
<NumberInput
className={cn(
'h-6 w-10 p-0 text-center bg-bg-input border-border-default border text-text-secondary',
'[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
)}
max={1}
min={0}
step={0.01}
{...field}
></NumberInput>
</FormControl>
</div>
<FormMessage />
</FormItem>
)}
max={1}
step={0.01}
tooltip={
isTooltipShown &&
t(
isVector
? 'vectorSimilarityWeightTip'
: 'keywordSimilarityWeightTip',
)
}
></SliderInputFormField>
/>
</>
);
}

5
web/src/components/slider-input-form-field.tsx
View File

@ -79,7 +79,10 @@ export function SliderInputFormField({
</FormControl>
<FormControl>
<NumberInput
className="h-7 w-20"
className={cn(
'h-6 w-10 p-0 text-center bg-bg-input border border-border-default text-text-secondary',
'[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
)}
max={max}
min={min}
step={step}

2
web/src/components/top-n-item.tsx
View File

@ -1,3 +1,4 @@
import { FormLayout } from '@/constants/form';
import { useTranslate } from '@/hooks/common-hooks';
import { Form, Slider } from 'antd';
import { z } from 'zod';
@ -46,6 +47,7 @@ export function TopNFormField({ max = 30 }: SimilaritySliderFormFieldProps) {
label={t('topN')}
max={max}
tooltip={t('topNTip')}
layout={FormLayout.Vertical}
></SliderInputFormField>
);
}

4
web/src/components/ui/dual-range-slider.tsx
View File

@ -28,12 +28,12 @@ const DualRangeSlider = React.forwardRef<
)}
{...props}
>
<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-border-button">
<SliderPrimitive.Track className="relative h-1 w-full grow overflow-hidden rounded-full bg-border-button">
<SliderPrimitive.Range className="absolute h-full bg-accent-primary" />
</SliderPrimitive.Track>
{initialValue.map((value, index) => (
<React.Fragment key={index}>
<SliderPrimitive.Thumb className="relative block h-4 w-4 rounded-full border-2 border-accent-primary bg-white ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer">
<SliderPrimitive.Thumb className="relative block h-2.5 w-2.5 rounded-full border-2 border-accent-primary bg-white ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer">
{label && (
<span
className={cn(