[GH-ISSUE #16056] issue: model names display overlapping duplicate text layer on leaderboard page #17769

Closed
opened 2026-04-19 23:39:12 -05:00 by GiteaMirror · 3 comments
Owner

Originally created by @silentoplayz on GitHub (Jul 27, 2025).
Original GitHub issue: https://github.com/open-webui/open-webui/issues/16056

Originally assigned to: @tjbck on GitHub.

Check Existing Issues

  • I have searched the existing issues and discussions.
  • I am using the latest version of Open WebUI.

Installation Method

Docker

Open WebUI Version

v0.6.18 (5fbfe2bdca)

Ollama Version (if applicable)

v0.9.5 (5d8c173529)

Operating System

Ubuntu 24.04.2 LTS

Browser (if applicable)

Mozilla Firefox Debian Package (mozilla-deb - 1.0) v141.0 (64-bit)

Confirmation

  • I have read and followed all instructions in README.md.
  • I am using the latest version of both Open WebUI and Ollama.
  • I have included the browser console logs.
  • I have included the Docker container logs.
  • I have provided every relevant configuration, setting, and environment variable used in my setup.
  • I have clearly listed every relevant configuration, custom setting, environment variable, and command-line option that influences my setup (such as Docker Compose overrides, .env values, browser settings, authentication configurations, etc).
  • I have documented step-by-step reproduction instructions that are precise, sequential, and leave nothing to interpretation. My steps:
  • Start with the initial platform/version/OS and dependencies used,
  • Specify exact install/launch/configure commands,
  • List URLs visited, user input (incl. example values/emails/passwords if needed),
  • Describe all options and toggles enabled or changed,
  • Include any files or environmental changes,
  • Identify the expected and actual result at each stage,
  • Ensure any reasonably skilled user can follow and hit the same issue.

Expected Behavior

Model names on the Leaderboard page should display as a single, clear layer of text. This text should be selectable and copyable.

Actual Behavior

On the Leaderboard page within the "Evaluations" tab, model names are displayed with a visually overlapping duplicate layer of text. This overlapping text makes the display appear cluttered and unreadable. Furthermore, this duplicate layer of text cannot be copied when attempting to select the model names. This issue is observed on a development instance, while a separate production (dev branch) instance with customized model names displays the leaderboard correctly.

Steps to Reproduce

This issue is reproduced on a local development environment setup for Open WebUI.

  1. Prerequisites:

    • Operating System: Ubuntu 24.04.2 LTS
    • Python: 3.11 or higher (e.g., 3.11.x)
    • Node.js: 22.10 or higher
    • IDE: VSCode (recommended, used for this setup)
    • Conda (recommended for backend environment)
  2. Clone the Repository:

    • Open a terminal (e.g., VSCode integrated terminal).
    • Navigate to your desired directory.
    • Run:
      git clone https://github.com/open-webui/open-webui.git
      cd open-webui
      
  3. Frontend Setup:

    • Copy the example environment file:
      cp -RPp .env.example .env
      
    • (No custom changes made to .env for reproduction, default settings are used.)
    • Install frontend dependencies (from open-webui directory):
      npm install
      
    • Start the frontend development server (from open-webui directory):
      npm run dev
      
    • Open your web browser and navigate to http://localhost:5173. You should see the frontend waiting for the backend. Keep this terminal running.
  4. Backend Setup:

    • Open a new terminal instance (e.g., VSCode's "Terminal > New Terminal").
    • Navigate to the backend directory in this new terminal:
      cd backend
      
    • Create and activate a Conda environment:
      conda create --name open-webui python=3.11
      conda activate open-webui
      
    • Install backend dependencies (with Conda environment activated, from backend directory):
      pip install -r requirements.txt -U
      
    • Start the backend development server (from backend directory):
      sh dev.sh
      
    • Wait for the backend server to start successfully.
  5. Access Open WebUI and Observe Issue:

    • Go back to your browser tab (e.g., http://localhost:5173).
    • Refresh the page. The full Open WebUI application should now be running.
    • Log in (if prompted).
    • Navigate to the "Evaluations" tab in the top navigation bar.
    • Click on "Leaderboard" in the left sidebar.
    • Observe: The model names in the "MODEL" column will display with a visually overlapping duplicate text layer, as shown in Screenshot 1.
    • Attempt to Reproduce: Try to select and copy the model names. The overlapping text cannot be copied, as shown in Screenshot 3.

Logs & Screenshots

Leaderboard page showing the visual overlap:

Image

Leaderboard page on production (dev) instance showing normal display (for comparison):

Image

Leaderboard page attempting to select text, showing the uncopyable overlap:

Image

Additional Information

This issue primarily affects the visual presentation and usability of the Leaderboard page when running Open WebUI in a local development setup (specifically the frontend via npm run dev). The fact that it works correctly on a separate instance (even if customized) suggests a potential rendering or data binding discrepancy. No immediate functional impact beyond the display anomaly and inability to copy the full model name has been observed.

Originally created by @silentoplayz on GitHub (Jul 27, 2025). Original GitHub issue: https://github.com/open-webui/open-webui/issues/16056 Originally assigned to: @tjbck on GitHub. ### Check Existing Issues - [x] I have searched the existing issues and discussions. - [x] I am using the latest version of Open WebUI. ### Installation Method Docker ### Open WebUI Version v0.6.18 (https://github.com/open-webui/open-webui/commit/5fbfe2bdcadf5f157926f6551891e4dc0802b9f3) ### Ollama Version (if applicable) v0.9.5 (https://github.com/ollama/ollama/commit/5d8c1735296299c3d81bb40f00038398dc729579) ### Operating System Ubuntu 24.04.2 LTS ### Browser (if applicable) Mozilla Firefox Debian Package (mozilla-deb - 1.0) v141.0 (64-bit) ### Confirmation - [x] I have read and followed all instructions in `README.md`. - [x] I am using the latest version of **both** Open WebUI and Ollama. - [x] I have included the browser console logs. - [x] I have included the Docker container logs. - [x] I have **provided every relevant configuration, setting, and environment variable used in my setup.** - [x] I have clearly **listed every relevant configuration, custom setting, environment variable, and command-line option that influences my setup** (such as Docker Compose overrides, .env values, browser settings, authentication configurations, etc). - [x] I have documented **step-by-step reproduction instructions that are precise, sequential, and leave nothing to interpretation**. My steps: - Start with the initial platform/version/OS and dependencies used, - Specify exact install/launch/configure commands, - List URLs visited, user input (incl. example values/emails/passwords if needed), - Describe all options and toggles enabled or changed, - Include any files or environmental changes, - Identify the expected and actual result at each stage, - Ensure any reasonably skilled user can follow and hit the same issue. ### Expected Behavior Model names on the `Leaderboard` page should display as a single, clear layer of text. This text should be selectable and copyable. ### Actual Behavior On the `Leaderboard` page within the "Evaluations" tab, model names are displayed with a visually overlapping duplicate layer of text. This overlapping text makes the display appear cluttered and unreadable. Furthermore, this duplicate layer of text cannot be copied when attempting to select the model names. This issue is observed on a development instance, while a separate production (dev branch) instance with customized model names displays the leaderboard correctly. ### Steps to Reproduce This issue is reproduced on a local development environment setup for Open WebUI. 1. **Prerequisites:** * Operating System: Ubuntu 24.04.2 LTS * Python: 3.11 or higher (e.g., 3.11.x) * Node.js: 22.10 or higher * IDE: VSCode (recommended, used for this setup) * Conda (recommended for backend environment) 2. **Clone the Repository:** * Open a terminal (e.g., VSCode integrated terminal). * Navigate to your desired directory. * Run: ```bash git clone https://github.com/open-webui/open-webui.git cd open-webui ``` 3. **Frontend Setup:** * Copy the example environment file: ```bash cp -RPp .env.example .env ``` * (No custom changes made to `.env` for reproduction, default settings are used.) * Install frontend dependencies (from `open-webui` directory): ```bash npm install ``` * Start the frontend development server (from `open-webui` directory): ```bash npm run dev ``` * Open your web browser and navigate to `http://localhost:5173`. You should see the frontend waiting for the backend. Keep this terminal running. 4. **Backend Setup:** * Open a **new** terminal instance (e.g., VSCode's "Terminal > New Terminal"). * Navigate to the backend directory in this new terminal: ```bash cd backend ``` * Create and activate a Conda environment: ```bash conda create --name open-webui python=3.11 conda activate open-webui ``` * Install backend dependencies (with Conda environment activated, from `backend` directory): ```bash pip install -r requirements.txt -U ``` * Start the backend development server (from `backend` directory): ```bash sh dev.sh ``` * Wait for the backend server to start successfully. 5. **Access Open WebUI and Observe Issue:** * Go back to your browser tab (e.g., `http://localhost:5173`). * Refresh the page. The full Open WebUI application should now be running. * Log in (if prompted). * Navigate to the "Evaluations" tab in the top navigation bar. * Click on "Leaderboard" in the left sidebar. * **Observe:** The model names in the "MODEL" column will display with a visually overlapping duplicate text layer, as shown in Screenshot 1. * **Attempt to Reproduce:** Try to select and copy the model names. The overlapping text cannot be copied, as shown in Screenshot 3. ### Logs & Screenshots ### Leaderboard page showing the visual overlap: <img width="2560" height="1279" alt="Image" src="https://github.com/user-attachments/assets/94b57d9b-f688-4899-aa2f-0f617f94ccc8" /> ### Leaderboard page on production (dev) instance showing normal display (for comparison): <img width="2560" height="1279" alt="Image" src="https://github.com/user-attachments/assets/691dc39d-07e5-4692-bae7-ff528c151b72" /> ### Leaderboard page attempting to select text, showing the uncopyable overlap: <img width="2560" height="1279" alt="Image" src="https://github.com/user-attachments/assets/9cd37b1e-73e7-4d9a-a806-4f4f464d6a6f" /> ### Additional Information This issue primarily affects the visual presentation and usability of the Leaderboard page when running Open WebUI in a local development setup (specifically the frontend via `npm run dev`). The fact that it works correctly on a separate instance (even if customized) suggests a potential rendering or data binding discrepancy. No immediate functional impact beyond the display anomaly and inability to copy the full model name has been observed.
GiteaMirror added the bug label 2026-04-19 23:39:12 -05:00
Author
Owner

@silentoplayz commented on GitHub (Jul 27, 2025):

I've found the solution! The issue is on line 523 of /src/lib/components/admin/Evaluations/Leaderboard.svelte. Removing alt={model.name} from the img tag resolves the duplicate text issue. This is because the alt text was being rendered in addition to the actual model name, causing the visual overlap. I don't believe a PR is necessary for this, but I do urge the maintainer to solve this issue promptly! I have personally tested removal of this line and it solves the issue, although, I'm missing model icons; but that's not due to the removal of this line as far as I know.

Screenshot of fixed models list in the leaderboard tab:
Image

<!-- gh-comment-id:3124156184 --> @silentoplayz commented on GitHub (Jul 27, 2025): I've found the solution! The issue is on line 523 of [/src/lib/components/admin/Evaluations/Leaderboard.svelte](https://github.com/open-webui/open-webui/blob/dev/src/lib/components/admin/Evaluations/Leaderboard.svelte#L523). Removing `alt={model.name}` from the img tag resolves the duplicate text issue. This is because the alt text was being rendered in addition to the actual model name, causing the visual overlap. I don't believe a PR is necessary for this, but I do urge the maintainer to solve this issue promptly! I have personally tested removal of this line and it solves the issue, although, I'm missing model icons; but that's not due to the removal of this line as far as I know. Screenshot of fixed models list in the leaderboard tab: <img width="2292" height="1278" alt="Image" src="https://github.com/user-attachments/assets/867c875d-6edd-4977-9ea7-34481e91f5e9" />
Author
Owner

@rgaricano commented on GitHub (Jul 27, 2025):

I think there are something more, alt text should be showed only when cursor it's over the text.
maybe this is a funcionality of vscode then it's rendering frontend for dev/debug?

<!-- gh-comment-id:3124241363 --> @rgaricano commented on GitHub (Jul 27, 2025): I think there are something more, alt text should be showed only when cursor it's over the text. maybe this is a funcionality of vscode then it's rendering frontend for dev/debug?
Author
Owner

@tjbck commented on GitHub (Aug 4, 2025):

Ubuntu + FF only issue, nothing much we can do from our end unfortunately 😅

<!-- gh-comment-id:3150765635 --> @tjbck commented on GitHub (Aug 4, 2025): Ubuntu + FF only issue, nothing much we can do from our end unfortunately 😅
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/open-webui#17769