基于React DnD + 虚拟化技术的文本分段可视化
在自然语言处理领域，文本分段是一项基础且关键的任务。随着大型语言模型(LLM)的发展，自动化文本分段已成为可能，但这些模型生成的分段结果往往需要人工审核和调整。
本文介绍一个基于React技术栈开发的交互式文本分段可视化与编辑系统，该系统允许用户直观地查看、选择和调整大模型生成的文本分段，从而提高分段质量和准确性。
Part1
系统概述
本系统主要解决以下问题：
1. 可视化展示原始文本及其分段结果
2. 处理分段之间可能存在的重叠区域
3. 通过直观的交互方式调整分段边界
4. 高效处理大量文本数据的性能优化
系统采用React框架结合React DnD(Drag and Drop)库实现，并通过虚拟化技术处理大型文本数据，确保在处理长文本时保持流畅的用户体验。
Part2
技术架构
核心组件
系统的核心组件包括：
1. TextRangeSelector：主容器组件，负责整合所有子组件并提供DnD上下文
2. Renderer：负责渲染文本和分段的可视化表示，包含三层结构
3. BackgroundLayer：处理文本分段的背景色渲染（第一层）
4. DndDropLayer：处理拖拽目标区域（第二层）
5. DndDragLayer：处理拖拽操作的视觉反馈（第三层）
6. NewTRSContext：提供全局状态管理，存储原文和分段数据
三层渲染结构
系统采用三层结构渲染每个文本段落，确保清晰的视觉表现和精确的交互控制：
return (
<div style={style}>
{/* 第一层：背景层 - 负责显示分段的背景颜色 */}
<div className={clsx('absolute left-0 top-0 max-w-full')}>
{parts && <BackgroundLayer parts={parts} />}
</div>
{/* 第二层：DnD Drop层 - 负责处理拖拽放置 */}
<div
className={clsx(
'absolute left-0 top-0 break-all',
// !isDragging && 'pointer-events-none',
)}
>
<DndDropLayer text={text} startPos={startPos} />
</div>
{/* 第三层：DnD Drag层 - 负责处理拖拽视觉反馈 */}
<div className={clsx('absolute left-0 top-0', 'pointer-events-none')}>
{showDragLayer && <DndDragLayer parts={parts} />}
</div>
</div>
);数据模型
系统处理两类主要数据：
1. 原文数组：包含完整的文本内容，按段落分割
2.分段数据：由大模型生成的文本分段信息，每个分段包含起始位置(s)和结束位置(e)
分段之间可能存在重叠，系统需要正确处理这种情况并提供直观的可视化表示。
Part3
实现细节
虚拟化列表实现
为了高效处理大型文本，系统采用react-window库的VariableSizeList组件实现虚拟化列表，只渲染当前视口中可见的文本部分。这大大提高了系统在处理长文本时的性能。
return (
<List
ref={variableListRef}
className="!h-full px-6 py-6 [&>:first-child]:relative text-[14px] leading-[30px] !overflow-y-scroll"
itemSize={getItemSize} // 每行高度
height={height} // 父容器高度
itemCount={chunks.length} // 总块数
width="100%"// 宽度适应父容器
estimatedItemSize={30}
onItemsRendered={({
visibleStartIndex,
visibleStopIndex,
}: {
visibleStartIndex: number;
visibleStopIndex: number;
}) => {
// 更新当前可视区域
console.log('range:', visibleStartIndex, visibleStopIndex);
setNewLineRange(visibleStartIndex, visibleStopIndex);
}}
innerElementType={CustomInnerElement}
>
{rowRenderer}
</List>
);系统动态计算每行文本的高度，确保虚拟列表能够准确渲染不同长度的文本段落：
// 动态计算行高
const getLineHeight = (line: string, index: number) => {
if (!virtualListRef.current) return30;
console.log('计算行高', index);
const tempElement = document.createElement('div');
tempElement.style.position = 'absolute';
tempElement.style.visibility = 'hidden';
tempElement.style.whiteSpace = 'pre-wrap';
tempElement.style.width = '100%';
tempElement.style.fontSize = '14px';
tempElement.style.lineHeight = '30px';
tempElement.style.wordBreak = 'break-all';
tempElement.innerText = line;
virtualListRef.current.appendChild(tempElement);
const height = tempElement.getBoundingClientRect().height;
virtualListRef.current.removeChild(tempElement);
return height;
};三层结构详解
🔹第一层：背景层（BackgroundLayer）
背景层负责根据分段数据渲染不同颜色的背景，直观地展示文本的分段情况。系统使用不同的颜色区分奇数段、偶数段、重叠区域和空隙区域：
return (
<span
className={clsx(
'cursor-pointer break-all',
isGap && 'bg-[#276DDC4D]', // 激活状态
!overlapped && isEven && 'bg-[#0AA6A44D]', // 偶数区域
!overlapped && isOdd && 'bg-[#FF61614D]', // 奇数区域
overlapped && 'bg-[#B6C3C3] cursor-default', // 重叠部分
)}
onClick={() => highlight(part)}
>
{partText}
</span>
);🔹第二层：DnD Drop层（DndDropLayer）
DnD Drop层负责处理拖拽目标区域，允许用户将游标拖放到文本的特定位置。该层在拖拽过程中接收游标的放置操作，并更新分段的边界：
function DndLayer({ text, startPos }: { text: string; startPos: number }) {
const { handleDropped, isDragging } = useContext(NewTRSContext);
const onDrop = (pos: CursorPosition, newPos: number) => {
// const p = newPos + lineIndex * LineCharCount;
// setIsDropping();
handleDropped(pos, newPos);
};
console.log('text:', text);
return (
<>
{/* 只有在拖拽的时候才渲染 */}
{isDragging
? text.split(splitter).map((char, index) => (
<Char key={index} index={index + startPos} onDrop={onDrop}>
{char}
</Char>
))
: null}
</>
);
}为了优化性能，DnD Drop层只在拖拽过程中渲染，避免不必要的DOM元素创建。
🔹第三层：DnD Drag层（DndDragLayer）
DnD Drag层负责处理拖拽操作的视觉反馈，显示当前选中分段的游标，并在拖拽过程中提供视觉指引：
const DndDragLayer = ({ parts }: { parts: SplittedByLineTextRange[] }) => {
// TODO: 注意这一层只负责 Cursor 的拖动， 因此 所有文字是透明的并且不响应事件
const { activatedObject } = useContext(NewTRSContext);
return (
<>
{parts.map((part, index) => {
return (
<Fragment key={index}>
{activatedObject?.activatedRange &&
activatedObject.activatedRange.s === part.s && (
<CursorGhost
pos={{
index: activatedObject.index,
type: 's',
pos: part.s,
}}
/>
)}
<span className="text-transparent break-all">{part.text}</span>
{activatedObject?.activatedRange &&
activatedObject.activatedRange.e === part.e && (
<CursorGhost
pos={{
index: activatedObject.index,
type: 'e',
pos: part.e,
}}
/>
)}
</Fragment>
);
})}
</>
);
};DndDragLayer组件显示两种游标：起始位置游标和结束位置游标，用户可以拖拽这些游标来调整分段的边界。
拖拽实现细节
系统使用React DnD库实现拖拽功能，主要包括以下组件：
1.CustomInnerElement：定义拖拽源，使用 useDrag钩子创建可拖拽的游标
2.Char：定义拖拽目标，使用useDrop钩子接收游标的放置操作
3.CursorGhost：提供拖拽元素的视觉反馈
const [{}, startDrag, startPreview] = useDrag(
() => ({
type: 'CURSOR',
item: () => {
return {
index: activatedObject?.index,
type: 's',
pos: activatedObject?.activatedRange.s,
};
},
collect: (monitor) => ({
isDragging: !!monitor.isDragging(),
}),
}),
[activatedObject],
);当用户拖拽游标时，系统会更新全局状态中的分段数据，并重新渲染视图以反映变化。
Part4
性能优化
系统在处理大型文本时面临性能挑战，为此采取了以下优化措施：
1. 虚拟化渲染：只渲染当前视口中可见的文本部分
2. 条件渲染：DndDropLayer只在拖拽过程中渲染
3. 动态高度计算：准确计算每段文本的高度，避免渲染错误
4. 状态管理优化：避免不必要的状态更新和重渲染
这些优化措施确保系统在处理大型文本数据时保持流畅的用户体验。
Part5
用户体验设计
系统的用户界面设计遵循以下原则：
1. 直观性：使用颜色编码直观地表示不同分段和重叠区域
2. 响应性：提供即时视觉反馈，增强用户操作的确定性
3. 一致性：保持交互模式的一致性，降低学习成本
4. 容错性：允许用户撤销操作，提高容错能力
三层结构的设计确保了清晰的视觉表现和精确的交互控制，使用户能够轻松地查看和调整文本分段。
Part6
效果展示
1: 分段色块，选中分段之后显示对应分段的边界游标和分段操作菜单
2：推拽游标，实时显示拖拽到的目标位置
3：修改边界，放下拖拽的游标，就会正式修改分段边界
Part7
结论
本文介绍的基于React DnD的文本分段可视化与交互系统为大模型生成的文本分段提供了直观、高效的人工审核和调整工具。系统采用三层结构（背景层、DnD Drop层和DnD Drag层）实现清晰的视觉表现和精确的交互控制，结合虚拟化列表技术处理大型文本数据，确保在处理长文本时保持流畅的用户体验。
通过结合现代前端技术和用户体验设计，系统实现了复杂文本分段任务的简化，提高了分段质量和效率。该系统不仅解决了当前文本分段处理的实际需求，也为未来更复杂的内容结构化处理提供了技术基础和实践经验。
