+
+ validation/completions
+ {#if completionsData}
+
+ of {completionsData.targetStep.completions.length}
+ {/if}
+
+ {#if completionsData}
+
+ Step {completionsData.stepNumber} • Temp: {completionsData.targetStep.samplingParams
+ .temperature}
+
+ {/if}
+
+
No validation data available. Validation will run during training.
+
+ {:else}
+ {@const visibleCompletionsNumberWidth = visibleCompletions.length.toString().length}
+ {@const focus = hoveredFocus}
+
+
+ {#await tokenizer then tokenizer}
+ {#each visibleCompletions as completion, index (index)}
+ {@const genIds = completion.tokenIds}
+ {@const hasTargets = Boolean(completionsData.targets)}
+ {@const tgtIds = hasTargets ? completionsData.targets?.[index] || [] : []}
+ {@const tokenComparisons = hasTargets ? compareTokenIds(genIds, tgtIds, tokenizer) : []}
+ {@const matchesRow = completionsData.targetStep.matches?.[index] || []}
+ {@const prefixLen = completionsData.decoderPromptLengths?.[index] ?? 1}
+
+
+ (hoveredFocus = {
+ exampleIndex: index,
+ tokenIndex: hoveredFocus?.tokenIndex ?? 0
+ })}
+ onmouseleave={() => (hoveredFocus = null)}
+ >
+
+ {(index + 1).toString().padStart(visibleCompletionsNumberWidth, '\u00A0')}
+
+
+
+
+ {#if hasTargets}
+ {#each tokenComparisons as item, tIndex (tIndex)}
+ {@const isPromptItem = item.kind === 'prompt'}
+ {@const completedBefore = tokenComparisons
+ .slice(0, tIndex)
+ .filter((it) => it.kind !== 'prompt').length}
+ {@const sequenceTokenIndex = isPromptItem
+ ? prefixLen
+ : prefixLen + Math.max(0, completedBefore)}
+ {@const isHighlighted =
+ !isPromptItem &&
+ focus?.exampleIndex === index &&
+ focus?.tokenIndex === sequenceTokenIndex}
+ {#if item.kind === 'prompt'}
+ {}}
+ onLeave={() => {}}
+ onSelect={() => {}}
+ />
+ {:else if item.isCorrect}
+ (hoveredFocus = { exampleIndex: ei, tokenIndex: ti })}
+ onLeave={() => (hoveredFocus = null)}
+ />
+ {:else}
+ (hoveredFocus = { exampleIndex: ei, tokenIndex: ti })}
+ onLeave={() => (hoveredFocus = null)}
+ />
+ {/if}
+ {/each}
+ {:else if genIds.length === 0}
+ [empty]
+ {:else}
+ {#each genIds as id, tIndex (tIndex)}
+ {@const text = decodeSingle(id, tokenizer)}
+ {@const isPrompt = tIndex < prefixLen}
+ {@const match = matchesRow[tIndex - prefixLen]}
+ {@const variant = isPrompt
+ ? 'prompt'
+ : !hasMatchData || matchesRow.length === 0
+ ? 'generated'
+ : match === true
+ ? 'correct'
+ : match === false
+ ? 'incorrect'
+ : 'neutral'}
+ {@const isHighlighted =
+ !isPrompt && focus?.exampleIndex === index && focus?.tokenIndex === tIndex}
+ (hoveredFocus = { exampleIndex: ei, tokenIndex: ti })}
+ onLeave={() => (hoveredFocus = null)}
+ />
+ {/each}
+ {/if}
+
+
+ {/each}
+ {/await}
+
+
+
+ {#if chartOptions}
+
+
+
+ {#if selectedProbsStep}
+
+ (selectedProbsStep = null)}
+ />
+
+ {/if}
+
{
+ if (!chartOptions) return null;
+ const baseBar = chartOptions.bar;
+ const tbc = chartOptions.tokensByCol ?? [];
+ const last = Math.max(0, tbc.length - 1);
+ const col =
+ activeStepCol == null
+ ? last
+ : Math.max(0, Math.min(last, Math.floor(activeStepCol)));
+ const defaultCategories = chartOptions.tokenCategoriesByCol[col];
+ const defaultData = tbc[col];
+ const categories = selectedProbsStep
+ ? selectedProbsStep.categories
+ : defaultCategories;
+ const data = selectedProbsStep ? selectedProbsStep.data : defaultData;
+ return {
+ ...baseBar,
+ title: selectedProbsStep
+ ? { ...baseBar.title, text: `probs (step ${selectedProbsStep.step})` }
+ : baseBar?.title,
+ xAxis: [
+ {
+ type: 'category',
+ data: categories,
+ axisPointer: { show: true, type: 'shadow' },
+ triggerEvent: true,
+ axisTick: { show: false },
+ axisLabel: { show: false },
+ axisLine: { show: false }
+ }
+ ],
+ series: [{ id: 'token-bars', type: 'bar', data }]
+ };
+ }
+ })}
+ >
+
+
+
+ {/if}
+