From 02a0e703969d3459c13efd519a388cb9daf233b7 Mon Sep 17 00:00:00 2001 From: "LocalAI [bot]" <139863280+localai-bot@users.noreply.github.com> Date: Wed, 27 May 2026 21:09:14 +0200 Subject: [PATCH] fix(react-ui): polish 'Fits in my GPU' filter to use design-system Toggle (#10030) * fix(react-ui): polish 'Fits in my GPU' filter to use design-system Toggle The recently added VRAM-fit filter in the Models page used a raw next to the themed range slider, breaking the visual language of the rest of the row. Swap it for the shared component (already used by Backends, Settings, Traces, AgentCreate), adopt the filter-bar-group__toggle class to drop the duplicated inline styles, add a fa-microchip icon to mirror the per-row fit indicator, and add a subtle left divider so the filter reads as separate from the context-size slider on its left. Assisted-by: Claude:claude-opus-4-7 Signed-off-by: Ettore Di Giacinto * fix(react-ui): move 'Fits in GPU' filter to filter row and unify copy Two follow-ups on the previous polish pass: 1. Move the toggle from the context-slider row into the filter-button row above. The toggle is a filter on the result set, not a config for VRAM estimation, so it belongs with the type chips and backend select. The context slider stays its own thing. 2. Unify the label copy. The same locale file had "Fits in my GPU" for the filter and "Fits in GPU" for the per-row indicator; pick the shorter, possessive-free variant everywhere (en/de/es/it/zh-CN). Update e2e selectors to match. Assisted-by: Claude:claude-opus-4-7 Signed-off-by: Ettore Di Giacinto --------- Signed-off-by: Ettore Di Giacinto Co-authored-by: Ettore Di Giacinto --- core/http/react-ui/e2e/models-gallery.spec.js | 10 +++++----- .../react-ui/public/locales/de/models.json | 2 +- .../react-ui/public/locales/en/models.json | 2 +- .../react-ui/public/locales/es/models.json | 2 +- .../react-ui/public/locales/it/models.json | 2 +- .../react-ui/public/locales/zh-CN/models.json | 2 +- core/http/react-ui/src/pages/Models.jsx | 20 +++++++++---------- 7 files changed, 19 insertions(+), 21 deletions(-) diff --git a/core/http/react-ui/e2e/models-gallery.spec.js b/core/http/react-ui/e2e/models-gallery.spec.js index 5b3f4242f..8b3157635 100644 --- a/core/http/react-ui/e2e/models-gallery.spec.js +++ b/core/http/react-ui/e2e/models-gallery.spec.js @@ -282,14 +282,14 @@ test.describe('Models Gallery - Fits In GPU Filter', () => { await expect(page.locator('th', { hasText: 'Backend' })).toBeVisible({ timeout: 10_000 }) }) - test('fits checkbox is visible when GPU resources are available', async ({ page }) => { - await expect(page.getByText('Fits in my GPU')).toBeVisible() + test('fits toggle is visible when GPU resources are available', async ({ page }) => { + await expect(page.getByText('Fits in GPU')).toBeVisible() }) test('enabling fits filter hides models that exceed available VRAM', async ({ page }) => { await expect(page.locator('tr', { hasText: 'stablediffusion-model' })).toBeVisible() - await page.getByLabel('Fits in my GPU').check() + await page.getByLabel('Fits in GPU').check() await expect(page.locator('tr', { hasText: 'stablediffusion-model' })).toHaveCount(0) await expect(page.locator('tr', { hasText: 'llama-model' })).toBeVisible() @@ -298,8 +298,8 @@ test.describe('Models Gallery - Fits In GPU Filter', () => { }) test('fits filter state persists after reload', async ({ page }) => { - await page.getByLabel('Fits in my GPU').check() + await page.getByLabel('Fits in GPU').check() await page.reload() - await expect(page.getByLabel('Fits in my GPU')).toBeChecked() + await expect(page.getByLabel('Fits in GPU')).toBeChecked() }) }) diff --git a/core/http/react-ui/public/locales/de/models.json b/core/http/react-ui/public/locales/de/models.json index affe4ae1d..e5929d832 100644 --- a/core/http/react-ui/public/locales/de/models.json +++ b/core/http/react-ui/public/locales/de/models.json @@ -23,7 +23,7 @@ "diarization": "Diarisierung", "embedding": "Embedding", "rerank": "Rerank", - "fitsGpu": "Passt in meine GPU", + "fitsGpu": "Passt in die GPU", "allBackends": "Alle Backends", "searchBackends": "Backends suchen..." }, diff --git a/core/http/react-ui/public/locales/en/models.json b/core/http/react-ui/public/locales/en/models.json index 0e3832ce8..603bd809c 100644 --- a/core/http/react-ui/public/locales/en/models.json +++ b/core/http/react-ui/public/locales/en/models.json @@ -29,7 +29,7 @@ "rerank": "Rerank", "detection": "Detection", "vad": "VAD", - "fitsGpu": "Fits in my GPU", + "fitsGpu": "Fits in GPU", "allBackends": "All Backends", "searchBackends": "Search backends..." }, diff --git a/core/http/react-ui/public/locales/es/models.json b/core/http/react-ui/public/locales/es/models.json index 8a3f9399f..ac4275fbb 100644 --- a/core/http/react-ui/public/locales/es/models.json +++ b/core/http/react-ui/public/locales/es/models.json @@ -23,7 +23,7 @@ "diarization": "Diarización", "embedding": "Embedding", "rerank": "Rerank", - "fitsGpu": "Cabe en mi GPU", + "fitsGpu": "Cabe en la GPU", "allBackends": "Todos los backends", "searchBackends": "Buscar backends..." }, diff --git a/core/http/react-ui/public/locales/it/models.json b/core/http/react-ui/public/locales/it/models.json index 273e4cb62..25c371eb1 100644 --- a/core/http/react-ui/public/locales/it/models.json +++ b/core/http/react-ui/public/locales/it/models.json @@ -23,7 +23,7 @@ "diarization": "Diarizzazione", "embedding": "Embedding", "rerank": "Rerank", - "fitsGpu": "Entra nella mia GPU", + "fitsGpu": "Entra nella GPU", "allBackends": "Tutti i backend", "searchBackends": "Cerca backend..." }, diff --git a/core/http/react-ui/public/locales/zh-CN/models.json b/core/http/react-ui/public/locales/zh-CN/models.json index 19025fd37..246153e68 100644 --- a/core/http/react-ui/public/locales/zh-CN/models.json +++ b/core/http/react-ui/public/locales/zh-CN/models.json @@ -23,7 +23,7 @@ "diarization": "说话人分离", "embedding": "嵌入", "rerank": "重排", - "fitsGpu": "适合我的 GPU", + "fitsGpu": "适合 GPU", "allBackends": "所有后端", "searchBackends": "搜索后端..." }, diff --git a/core/http/react-ui/src/pages/Models.jsx b/core/http/react-ui/src/pages/Models.jsx index 6ce87f804..761f07142 100644 --- a/core/http/react-ui/src/pages/Models.jsx +++ b/core/http/react-ui/src/pages/Models.jsx @@ -9,6 +9,7 @@ import { useResources } from '../hooks/useResources' import SearchableSelect from '../components/SearchableSelect' import ConfirmDialog from '../components/ConfirmDialog' import GalleryLoader from '../components/GalleryLoader' +import Toggle from '../components/Toggle' import React from 'react' @@ -325,6 +326,13 @@ export default function Models() { ) })} + {totalGpuMemory > 0 && ( + + )} {allBackends.length > 0 && ( 0 ? undefined : { marginLeft: 'auto' }} /> )} @@ -355,16 +363,6 @@ export default function Models() { {CONTEXT_LABELS[CONTEXT_SIZES.indexOf(contextSize)]} - {totalGpuMemory > 0 && ( - - )} {/* Table */}