diff --git a/mikupad.html b/mikupad.html index c1bc8f3..994f344 100644 --- a/mikupad.html +++ b/mikupad.html @@ -4409,7 +4409,8 @@ const [attachSidebar, setAttachSidebar] = usePersistentState('attachSidebar', false); const [showProbsMode, setShowProbsMode] = usePersistentState('showProbsMode', 0); const [highlightGenTokens, setHighlightGenTokens] = usePersistentState('highlightGenTokens', true); - const [colorizePerplexity, setColorizePerplexity] = usePersistentState('colorizePerplexity', false); + const [__colorizePerplexity, _] = usePersistentState('colorizePerplexity', false); // obsolete! + const [tokenColorMode, setTokenColorMode] = usePersistentState('tokenColorMode', __colorizePerplexity ? 2 : 0); const [preserveCursorPosition, setPreserveCursorPosition] = usePersistentState('preserveCursorPosition', true); const [promptAreaWidth, setPromptAreaWidth] = usePersistentState('promptAreaWidth', undefined); const [theme, setTheme] = usePersistentState('theme', 0); @@ -5122,7 +5123,7 @@ }, [stoppingStrings]); useEffect(() => { - if (showProbsMode === -1) + if (showProbsMode === -1 || !highlightGenTokens) return; const adjustProbsPosition = () => { @@ -5648,9 +5649,9 @@ onInput=${onInput} onScroll=${onScroll}/>
- ${highlightGenTokens || showProbsMode !== -1 ? html` + ${highlightGenTokens ? html` ${promptChunks.map((chunk, i) => { - const getPerplexityColor = (ratio) => { + const getRatioColor = (ratio) => { const sRatio = Math.max(0, Math.min(1, ratio)); if (sRatio <= 0.5) { // Scale ratio from [0, 0.5] to [0, 1] @@ -5663,14 +5664,23 @@ } }; const chunkProb = chunk.prob ?? 1; + let bgColor = ""; + if (tokenColorMode === 1 && chunkProb < 1) { + bgColor = getRatioColor(chunkProb); + } else if (tokenColorMode === 2 && chunkProb < 1) { + const chunkProbs = chunk.completion_probabilities?.[0]?.probs ?? []; + const minChunkProb = chunkProbs.length < 10 ? Math.min(...chunkProbs.map(p => p.prob)) : 0; + const maxChunkProb = chunkProbs.length > 0 ? Math.max(...chunkProbs.map(p => p.prob)) : 1; + bgColor = getRatioColor((chunkProb - minChunkProb) / (maxChunkProb - minChunkProb)); + } const isCurrent = currentPromptChunk && currentPromptChunk.index === i; const isNextUndo = undoHovered && !!undoStack.current.length && undoStack.current.at(-1) <= i; return html` + style=${bgColor ? { '--bg-color': bgColor } : {}} + className=${`${chunk.type === 'user' ? 'user' : 'machine'} ${isCurrent ? 'current' : ''} ${isNextUndo ? 'erase' : ''}`}> ${(chunk.content === '\n' ? ' \n' : chunk.content) + (i === promptChunks.length - 1 && chunk.content.endsWith('\n') ? '\u00a0' : '')} `; })}` : null} @@ -5999,21 +6009,29 @@ value=${spellCheck} onValueChange=${setSpellCheck}/> <${Checkbox} label="Attach sidebar" value=${attachSidebar} onValueChange=${setAttachSidebar}/> - <${Checkbox} label="Highlight generated tokens" - value=${highlightGenTokens} onValueChange=${setHighlightGenTokens}/> - <${Checkbox} label="Colorize perplexity" - value=${colorizePerplexity} onValueChange=${setColorizePerplexity}/> <${Checkbox} label="Preserve cursor position after prediction (disabled in Chat Mode)" value=${preserveCursorPosition} onValueChange=${setPreserveCursorPosition}/> - <${SelectBox} - label="Token probabilities" - value=${showProbsMode} - onValueChange=${setShowProbsMode} - options=${[ - { name: 'Show on hover', value: 0 }, - { name: 'Show on hover while holding CTRL', value: 1 }, - { name: 'Don\'t show', value: -1 }, - ]}/> + <${Checkbox} label="Highlight generated tokens" + value=${highlightGenTokens} onValueChange=${setHighlightGenTokens}/> + ${highlightGenTokens && html` + <${SelectBox} + label="Highlight color" + value=${tokenColorMode} + onValueChange=${setTokenColorMode} + options=${[ + { name: 'Default', value: 0 }, + { name: 'Color by probability', value: 1 }, + { name: 'Color by perplexity', value: 2 }, + ]}/> + <${SelectBox} + label="Probabilities visibility" + value=${showProbsMode} + onValueChange=${setShowProbsMode} + options=${[ + { name: 'Show on hover', value: 0 }, + { name: 'Show on hover while holding CTRL', value: 1 }, + { name: 'Hidden', value: -1 }, + ]}/>`}