webui: Use `toLocaleString()` format consistently across chat message statistics

Open Beginner friendly
#27,989 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
78/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Active
Tech stack
javascript
Domain
frontend

Research direction

Start with tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageStatistics/ChatMessageStatistics.svelte and inspect how each listed statistic is currently rendered, including values using toFixed(2). Choose a consistent locale-formatting approach based on the issue's alternatives, then verify in the web UI that all listed chat statistics display consistently.

Written by the indexing model from the issue text.

Description

enhancement
Prerequisites
  • I am running the latest code. Mention the version if possible as well.
  • I carefully followed the README.md.
  • I searched using keywords relevant to my issue to make sure that I am creating a new issue that is not already open (or closed).
  • I reviewed the Discussions, and have a new and useful enhancement to share.
Feature Description

llama.cpp's web UI currently sometimes uses locale formatting only for certain components like Total Tokens Generated and Generated Tokens. This issue proposes to consistently use this locale formatting across chat message statistics.

Motivation

It is generally much easier to glance at values that use locale formatting than unformatted ones. This will also make llama.cpp's web UI format more consistent with the changes made in #18300 that were missed in PR's made after it.

Possible Implementation

This would just require editing tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageStatistics/ChatMessageStatistics.svelte by adding .toLocaleString() at the end of variables that we want formatted.

We may also want to add locale formatting to stats currently printed using .toFixed(2). To format accordingly, we can either:

  • Use in-line options parameter in .toLocaleString(locale, options) instead of the above (e.g. .toLocalString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
  • Use a common number formatter (e.g. new Intl.NumberFormat(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}))

I personally think that creating a common formatter might be the best way to do this, since it is commonly used across 3 separate variables.

Once we choose one of the two above methods for the toFixed(2) replacement, I can write a PR where I update:

  • tokensPerSecond
  • agenticTimings!.toolCallsCount
  • promptTokens
  • agenticToolsPerSecond
  • promptTokens
  • promptTokensPerSecond
Dominant language
C++
Stars
129k
Forks
23.5k
Avg merge
2d 11h
Merged PRs (30d)
411

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from ggml-org/llama.cpp

All issues in ggml-org/llama.cpp

Similar issues

More C++ issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.