[PR #21816] [CLOSED] fix: detect WebGPU availability via requestAdapter() and surface Kokoro.js load errors in UI #65148

New Issue

GiteaMirror · 2026-05-06T10:55:20-05:00

GiteaMirror commented

2026-05-06 10:55:20 -05:00

📋 Pull Request Information

Original PR: https://github.com/open-webui/open-webui/pull/21816
Author: @silentoplayz
Created: 2/24/2026
Status: ❌ Closed

Base: dev ← Head: fix/kokoro-webgpu-detection

📝 Commits (2)

217d2b9 fix(audio): detect WebGPU availability via requestAdapter() and surface Kokoro.js load errors in UI
ceb8c0e fix(audio): correct Kokoro.js WebGPU toast — WASM fallback works fine

📊 Changes

1 file changed (+46 additions, -12 deletions)

View changed files

📝 src/lib/components/chat/Settings/Audio.svelte (+46 -12)

📄 Description

Pull Request Checklist

Note to first-time contributors: Please open a discussion post in Discussions to discuss your idea/fix with the community before creating a pull request, and describe your changes before submitting a pull request.

This is to ensure large feature PRs are discussed with the community first, before starting work on it. If the community does not want this feature or it is not relevant for Open WebUI as a project, it can be identified in the discussion before working on the feature and submitting the PR.

Before submitting, make sure you've checked the following:

Target branch: Verify that the pull request targets the dev branch. PRs targeting main will be immediately closed.
Description: Provide a concise description of the changes made in this pull request down below.
Changelog: Ensure a changelog entry following the format of Keep a Changelog is added at the bottom of the PR description.
Documentation: Add docs in Open WebUI Docs Repository. Document user-facing behavior, environment variables, public APIs/interfaces, or deployment steps. (No docs currently needed — this is a bug fix for existing behaviour.)
Dependencies: Are there any new or upgraded dependencies? If so, explain why, update the changelog/docs, and include any compatibility notes. (No new dependencies.)
Testing: Perform manual tests to verify the implemented fix/feature works as intended AND does not break any other functionality. Include reproducible steps to demonstrate the issue before the fix. Test edge cases (URL encoding, HTML entities, types). Take this as an opportunity to make screenshots of the feature/fix and include them in the PR description.
Agentic AI Code: Confirm this Pull Request is not written by any AI Agent or has at least gone through additional human review AND manual testing. If any AI Agent is the co-author of this PR, it may lead to immediate closure of the PR.
Code review: Have you performed a self-review of your code, addressing any coding standard issues and ensuring adherence to the project's coding standards?
Design & Architecture: Prefer smart defaults over adding new settings; use local state for ephemeral UI logic. Open a Discussion for major architectural or UX changes. (No new settings added. Error state is handled via ephemeral toast.)
Git Hygiene: Keep PRs atomic (one logical change). Clean up commits and rebase on dev to ensure no unrelated commits (e.g. from main) are included. Push updates to the existing PR branch instead of closing and reopening.
Title Prefix: fix(audio): detect WebGPU availability via requestAdapter() and surface Kokoro.js load errors in UI

Changelog Entry

Description

Selecting Kokoro.js (Browser) as the Text-to-Speech engine in the Audio settings had two silent failure modes:

False-positive WebGPU detection — The code checked !!navigator?.gpu to decide whether to use 'webgpu' as the inference device. In Firefox and other browsers with partial WebGPU support, navigator.gpu can exist but requestAdapter() returns null. Kokoro.js then throws "no available backend found. ERR: [webgpu] Error: Failed to get GPU adapter" with no feedback to the user.
Stuck loading state — If KokoroTTS.from_pretrained threw for any reason, TTSModelLoading was never reset and the loading spinner stayed visible indefinitely with no error message shown.

Reproduction (before this fix):

Open user settings → Audio tab in Firefox (WebGPU not enabled by default)
Set Text-to-Speech Engine to Kokoro.js (Browser)
Select a Kokoro.js Dtype — model starts downloading and may complete at 100%
The browser console shows Uncaught (in promise) Error: no available backend found with no toast or UI update

Added

isWebGPUAvailable() — async helper that calls navigator.gpu.requestAdapter() and returns false if the adapter is null or the call throws. Used to reliably distinguish browsers where WebGPU is present but non-functional.

Changed

onTTSEngineChange: when Kokoro.js is selected, isWebGPUAvailable() is now awaited before loadKokoro(). If it returns false, a toast.warning fires immediately advising the user to enable WebGPU or switch to a Chromium-based browser.
loadKokoro: device selection now uses the result of isWebGPUAvailable() instead of !!navigator?.gpu.
loadKokoro: KokoroTTS.from_pretrained is now wrapped in try/catch. On failure: TTSModel, TTSModelProgress, and TTSModelLoading are all reset and a toast.error shows the error message.
{:else if TTSModelLoading} (template): the loading spinner branch now only renders when TTSModelLoading is true. Previously the {:else} branch would render the spinner whenever TTSModel was null, including after a failed load.

Fixed

Kokoro.js (Browser) no longer silently crashes on Firefox and other browsers where WebGPU is unavailable
Loading spinner no longer stays visible indefinitely after a failed model load

Additional Information

The navigator.gpu TypeScript type error is a pre-existing issue in the codebase (WebGPU types are not included in the project's lib.dom.d.ts). It does not affect runtime behaviour.
On browsers where WebGPU is fully available (e.g. Chrome/Edge with default settings), behaviour is unchanged — the probe succeeds, no warning is shown, and the model loads as before.

Screenshots or Videos

Before: silent spinner.

After: immediate `toast.warning` on engine selection, `toast.error` with the thrown message if load fails regardless of browser.)*

Contributor License Agreement

By submitting this pull request, I confirm that I have read and fully agree to the Contributor License Agreement (CLA), and I am providing my contributions under its terms.

Note

Deleting the CLA section will lead to immediate closure of your PR and it will not be merged in.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/open-webui/open-webui/pull/21816 **Author:** [@silentoplayz](https://github.com/silentoplayz) **Created:** 2/24/2026 **Status:** ❌ Closed **Base:** `dev` ← **Head:** `fix/kokoro-webgpu-detection` --- ### 📝 Commits (2) - [`217d2b9`](https://github.com/open-webui/open-webui/commit/217d2b930fe3b2a541b39b88f43d7382e4cdb15d) fix(audio): detect WebGPU availability via requestAdapter() and surface Kokoro.js load errors in UI - [`ceb8c0e`](https://github.com/open-webui/open-webui/commit/ceb8c0ed9800431ae800ddf65a6d59fbd241b0a8) fix(audio): correct Kokoro.js WebGPU toast — WASM fallback works fine ### 📊 Changes **1 file changed** (+46 additions, -12 deletions) <details> <summary>View changed files</summary> 📝 `src/lib/components/chat/Settings/Audio.svelte` (+46 -12) </details> ### 📄 Description  # Pull Request Checklist ### Note to first-time contributors: Please open a discussion post in [Discussions](https://github.com/open-webui/open-webui/discussions) to discuss your idea/fix with the community before creating a pull request, and describe your changes before submitting a pull request. This is to ensure large feature PRs are discussed with the community first, before starting work on it. If the community does not want this feature or it is not relevant for Open WebUI as a project, it can be identified in the discussion before working on the feature and submitting the PR. **Before submitting, make sure you've checked the following:** - [x] **Target branch:** Verify that the pull request targets the `dev` branch. **PRs targeting `main` will be immediately closed.** - [x] **Description:** Provide a concise description of the changes made in this pull request down below. - [x] **Changelog:** Ensure a changelog entry following the format of [Keep a Changelog](https://keepachangelog.com/) is added at the bottom of the PR description. - [x] **Documentation:** Add docs in [Open WebUI Docs Repository](https://github.com/open-webui/docs). Document user-facing behavior, environment variables, public APIs/interfaces, or deployment steps. *(No docs currently needed — this is a bug fix for existing behaviour.)* - [x] **Dependencies:** Are there any new or upgraded dependencies? If so, explain why, update the changelog/docs, and include any compatibility notes. *(No new dependencies.)* - [x] **Testing:** Perform manual tests to **verify the implemented fix/feature works as intended AND does not break any other functionality**. Include reproducible steps to demonstrate the issue before the fix. Test edge cases (URL encoding, HTML entities, types). Take this as an opportunity to **make screenshots of the feature/fix and include them in the PR description**. - [x] **Agentic AI Code:** Confirm this Pull Request is **not written by any AI Agent** or has at least **gone through additional human review AND manual testing**. If any AI Agent is the co-author of this PR, it may lead to immediate closure of the PR. - [x] **Code review:** Have you performed a self-review of your code, addressing any coding standard issues and ensuring adherence to the project's coding standards? - [x] **Design & Architecture:** Prefer smart defaults over adding new settings; use local state for ephemeral UI logic. Open a Discussion for major architectural or UX changes. *(No new settings added. Error state is handled via ephemeral toast.)* - [x] **Git Hygiene:** Keep PRs atomic (one logical change). Clean up commits and rebase on `dev` to ensure no unrelated commits (e.g. from `main`) are included. Push updates to the existing PR branch instead of closing and reopening. - [x] **Title Prefix:** `fix(audio): detect WebGPU availability via requestAdapter() and surface Kokoro.js load errors in UI` # Changelog Entry ### Description Selecting **Kokoro.js (Browser)** as the Text-to-Speech engine in the Audio settings had two silent failure modes: 1. **False-positive WebGPU detection** — The code checked `!!navigator?.gpu` to decide whether to use `'webgpu'` as the inference device. In Firefox and other browsers with partial WebGPU support, `navigator.gpu` can exist but `requestAdapter()` returns `null`. Kokoro.js then throws `"no available backend found. ERR: [webgpu] Error: Failed to get GPU adapter"` with no feedback to the user. 2. **Stuck loading state** — If `KokoroTTS.from_pretrained` threw for any reason, `TTSModelLoading` was never reset and the loading spinner stayed visible indefinitely with no error message shown. **Reproduction (before this fix):** 1. Open user settings → Audio tab in Firefox (WebGPU not enabled by default) 2. Set *Text-to-Speech Engine* to *Kokoro.js (Browser)* 3. Select a *Kokoro.js Dtype* — model starts downloading and may complete at 100% 4. The browser console shows `Uncaught (in promise) Error: no available backend found` with no toast or UI update ### Added - `isWebGPUAvailable()` — async helper that calls `navigator.gpu.requestAdapter()` and returns `false` if the adapter is `null` or the call throws. Used to reliably distinguish browsers where WebGPU is present but non-functional. ### Changed - `onTTSEngineChange`: when Kokoro.js is selected, `isWebGPUAvailable()` is now awaited before `loadKokoro()`. If it returns `false`, a `toast.warning` fires immediately advising the user to enable WebGPU or switch to a Chromium-based browser. - `loadKokoro`: device selection now uses the result of `isWebGPUAvailable()` instead of `!!navigator?.gpu`. - `loadKokoro`: `KokoroTTS.from_pretrained` is now wrapped in try/catch. On failure: `TTSModel`, `TTSModelProgress`, and `TTSModelLoading` are all reset and a `toast.error` shows the error message. - `{:else if TTSModelLoading}` (template): the loading spinner branch now only renders when `TTSModelLoading` is `true`. Previously the `{:else}` branch would render the spinner whenever `TTSModel` was `null`, including after a failed load. ### Fixed - Kokoro.js (Browser) no longer silently crashes on Firefox and other browsers where WebGPU is unavailable - Loading spinner no longer stays visible indefinitely after a failed model load --- ### Additional Information - The `navigator.gpu` TypeScript type error is a pre-existing issue in the codebase (WebGPU types are not included in the project's `lib.dom.d.ts`). It does not affect runtime behaviour. - On browsers where WebGPU is fully available (e.g. Chrome/Edge with default settings), behaviour is unchanged — the probe succeeds, no warning is shown, and the model loads as before. ### Screenshots or Videos ### Before: silent spinner. <img width="1354" height="763" alt="image" src="https://github.com/user-attachments/assets/4bfb0f96-5030-4fe9-ada3-793239e783ad" /> ### After: immediate `toast.warning` on engine selection, `toast.error` with the thrown message if load fails regardless of browser.)* <img width="2331" height="1270" alt="image" src="https://github.com/user-attachments/assets/91ba34e0-8137-491b-bde4-1453f3b88389" /> ### Contributor License Agreement  By submitting this pull request, I confirm that I have read and fully agree to the [Contributor License Agreement (CLA)](https://github.com/open-webui/open-webui/blob/main/CONTRIBUTOR_LICENSE_AGREEMENT), and I am providing my contributions under its terms. > [!NOTE] > Deleting the CLA section will lead to immediate closure of your PR and it will not be merged in. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

GiteaMirror added the pull-request label 2026-05-06 10:55:20 -05:00

GiteaMirror closed this issue

2026-05-06 10:55:22 -05:00

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/open-webui#65148

[PR #21816] [CLOSED] fix: detect WebGPU availability via requestAdapter() and surface Kokoro.js load errors in UI #65148