[Open WebUI] CodeBlock 토큰 비교 fast-path 최적화

PR 링크: open-webui/open-webui#22101 상태: Merged | 변경: +3 / -1

들어가며

Open WebUI에서 LLM 응답을 스트리밍할 때, 코드 블록 컴포넌트는 매 토큰마다 변경 감지를 위해 JSON.stringify()로 전체 토큰 객체를 직렬화하여 비교하고 있었다. 스트리밍 중에는 token.text와 token.raw만 변경되는데, 전체 객체를 매번 직렬화하는 것은 불필요하게 비용이 높다.

핵심 코드 분석

Before: 매번 JSON.stringify로 전체 비교

$: if (token) {
    if (JSON.stringify(token) !== JSON.stringify(_token)) {
        _token = token;
    }
}

After: 자주 변경되는 필드 우선 비교

$: if (token) {
    if (token.text !== _token?.text || token.raw !== _token?.raw) {
        _token = token;
    } else if (JSON.stringify(token) !== JSON.stringify(_token)) {
        _token = token;
    }
}

왜 이게 좋은가

1. O(1) fast-path: 스트리밍 중 가장 빈번한 변경(text, raw)을 문자열 비교로 즉시 감지한다. JSON.stringify의 O(n) 비용을 대부분의 경우 건너뛴다.
2. 정확성 유지: 드물게 발생하는 구조적 변경(text/raw 외 필드)은 기존 JSON.stringify fallback으로 감지한다.
3. 체감 성능 향상: 코드 블록이 포함된 긴 응답을 스트리밍할 때 매 토큰마다의 비교 비용이 크게 줄어 UI 반응성이 개선된다.
4. Optional chaining: _token?.text 사용으로 초기 상태(_token이 undefined)에서의 안전성도 확보했다.

참고 자료

• Svelte Reactivity
• JSON.stringify Performance