Added time to first token
| @@ -2477,7 +2477,7 @@ export function addOneMessage(mes, { type = 'normal', insertAfter = null, scroll | ||
| 2477 | 2477 | timestamp: timestamp, |
| 2478 | 2478 | extra: mes.extra, |
| 2479 | 2479 | tokenCount: mes.extra?.token_count ?? 0, |
| 2480 | 2480 | ...formatGenerationTimer(mes.gen_started, mes.gen_finished, mes.extra?.token_count, mes.time_to_first_token, mes.extra?.reasoning_duration), |
| 2481 | 2481 | }; |
| 2482 | 2482 | |
| 2483 | 2483 | const renderedMessage = getMessageFromTemplate(params); |
| @@ -2597,6 +2597,7 @@ export function formatCharacterAvatar(characterAvatar) { | ||
| 2597 | 2597 | * @param {Date} gen_started Date when generation was started |
| 2598 | 2598 | * @param {Date} gen_finished Date when generation was finished |
| 2599 | 2599 | * @param {number} tokenCount Number of tokens generated (0 if not available) |
| 2600 | + * @param {number} timeToFirstToken Time to first token | |
| 2600 | 2601 | * @param {number?} [reasoningDuration=null] Reasoning duration (null if no reasoning was done) |
| 2601 | 2602 | * @returns {Object} Object containing the formatted timer value and title |
| 2602 | 2603 | * @example |
| @@ -2604,7 +2605,7 @@ export function formatCharacterAvatar(characterAvatar) { | ||
| 2604 | 2605 | * console.log(timerValue); // 1.2s |
| 2605 | 2606 | * console.log(timerTitle); // Generation queued: 12:34:56 7 Jan 2021\nReply received: 12:34:57 7 Jan 2021\nTime to generate: 1.2 seconds\nToken rate: 5 t/s |
| 2606 | 2607 | */ |
| 2607 | 2608 | function formatGenerationTimer(gen_started, gen_finished, tokenCount, timeToFirstToken, reasoningDuration = null) { |
| 2608 | 2609 | if (!gen_started || !gen_finished) { |
| 2609 | 2610 | return {}; |
| 2610 | 2611 | } |
| @@ -2618,6 +2619,7 @@ function formatGenerationTimer(gen_started, gen_finished, tokenCount, reasoningD | ||
| 2618 | 2619 | `Generation queued: ${start.format(dateFormat)}`, |
| 2619 | 2620 | `Reply received: ${finish.format(dateFormat)}`, |
| 2620 | 2621 | `Time to generate: ${seconds} seconds`, |
| 2622 | + timeToFirstToken > 0 ? `Time to first token: ${(timeToFirstToken / 1000).toFixed(1)} seconds` : '', | |
| 2621 | 2623 | reasoningDuration > 0 ? `Time to think: ${reasoningDuration / 1000} seconds` : '', |
| 2622 | 2624 | tokenCount > 0 ? `Token rate: ${Number(tokenCount / seconds).toFixed(1)} t/s` : '', |
| 2623 | 2625 | ].filter(x => x).join('\n').trim(); |
| @@ -3158,6 +3160,8 @@ class StreamingProcessor { | ||
| 3158 | 3160 | this.abortController = new AbortController(); |
| 3159 | 3161 | this.firstMessageText = '...'; |
| 3160 | 3162 | this.timeStarted = timeStarted; |
| 3163 | + this.timeToFirstToken = -1; | |
| 3164 | + this.createdAt = new Date(); | |
| 3161 | 3165 | this.continueMessage = type === 'continue' ? continueMessage : ''; |
| 3162 | 3166 | this.swipes = []; |
| 3163 | 3167 | /** @type {import('./scripts/logprobs.js').TokenLogprobs[]} */ |
| @@ -3195,6 +3199,8 @@ class StreamingProcessor { | ||
| 3195 | 3199 | } |
| 3196 | 3200 | |
| 3197 | 3201 | async onStartStreaming(text) { |
| 3202 | + this.timeToFirstToken = Date.now() - this.createdAt.getTime(); | |
| 3203 | + | |
| 3198 | 3204 | if (this.type === 'continue' && this.promptReasoning.prefixReasoning) { |
| 3199 | 3205 | this.reasoningHandler.initContinue(this.promptReasoning); |
| 3200 | 3206 | } |
| @@ -3245,6 +3251,7 @@ class StreamingProcessor { | ||
| 3245 | 3251 | const currentTime = new Date(); |
| 3246 | 3252 | chat[messageId]['mes'] = processedText; |
| 3247 | 3253 | chat[messageId]['gen_started'] = this.timeStarted; |
| 3254 | + chat[messageId]['time_to_first_token'] = this.timeToFirstToken; | |
| 3248 | 3255 | chat[messageId]['gen_finished'] = currentTime; |
| 3249 | 3256 | if (!chat[messageId]['extra']) { |
| 3250 | 3257 | chat[messageId]['extra'] = {}; |
| @@ -3282,7 +3289,7 @@ class StreamingProcessor { | ||
| 3282 | 3289 | this.messageTextDom.innerHTML = formattedText; |
| 3283 | 3290 | } |
| 3284 | 3291 | |
| 3285 | 3292 | const timePassed = formatGenerationTimer(this.timeStarted, currentTime, currentTokenCount, this.timeToFirstToken, this.reasoningHandler.getDuration()); |
| 3286 | 3293 | if (this.messageTimerDom instanceof HTMLElement) { |
| 3287 | 3294 | this.messageTimerDom.textContent = timePassed.timerValue; |
| 3288 | 3295 | this.messageTimerDom.title = timePassed.timerTitle; |