Houmeres/LLeMbas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 19 Wiki Activity

Model lists you can read

Browse Source 
The chat's model picker shows name, context window (CTX 131K) and an eye
for vision, on shared column tracks; the capability tags are gone from it.
Settings -> Models gives the name its own row and wraps the tags beneath.
The picker's tick now follows an in-place choice.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Homer
2026-09-26 22:54:31 +00:00
co-authored by Claude Opus 5.5
parent 8503c6c775
commit da43bc1459
10 changed files with 269 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lembas/__init__.py
+1 -1
View File
@@ -1,3 +1,3 @@
"""LLeMbas - a Middle-earth themed web UI for OpenAI-compatible LLM endpoints."""
__version__ = "1.8.1"
__version__ = "1.8.2"
src/lembas/web/i18n/sk.py
+2
View File
@@ -679,6 +679,8 @@ MESSAGES.update(
"Add a connection": "Pridať spojenie",
"Models": "Modely",
"Model": "Model",
"Context window": "Kontextové okno",
"Sees images": "Vidí obrázky",
"Groups": "Skupiny",
"Members": "Členovia",
"Account": "Účet",
src/lembas/web/static/css/admin.css
+29
View File
@@ -451,6 +451,35 @@ a.tabs__tab { text-decoration: none; }
.model-list__item:first-child { padding-top: 0; }
.model-list__item:last-child { border-bottom: 0; padding-bottom: 0; }
/* The models card in /settings. Every row shares the list's column tracks, so
the context sizes and the eyes line up; the description and the capability
tags take the rest of the row underneath, never the space beside the name. */
.model-list--models {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
column-gap: var(--sp-3);
}
.model-list--models .model-list__item {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
align-items: center;
row-gap: var(--sp-1);
}
/* Wraps rather than truncates: there is room below, and a name cut to
"Gemma 4 E…" on a phone is a different model's name. */
.model-list__name {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-1) var(--sp-2);
min-width: 0;
overflow-wrap: anywhere;
}
.model-list__more { grid-column: 2 / -1; min-width: 0; }
.model-list__tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.model-list__tags:empty { display: none; }
/* --- Permission grids ------------------------------------------------------ */
.checkbox-row {
display: flex;
src/lembas/web/static/css/app.css
+26
View File
@@ -1730,6 +1730,32 @@ body.is-resizing .canvas__body { pointer-events: none; }
color: var(--leaf);
}
.picker__tick { color: var(--accent); flex: none; margin-top: 0.35rem; }
/* The model picker: one row per model on the list's own column tracks, so the
context sizes and the eyes form columns whatever a name's length. Scoped to
the modifier because `.picker__list` is also the @-mention menu's list. */
.picker__list--models {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto auto;
column-gap: var(--sp-3);
}
.picker__list--models .picker__option {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
align-items: center;
gap: inherit;
}
.picker__list--models .picker__option .picker__avatar { margin-top: 0; }
.picker__list--models .picker__option-name { min-width: 0; }
.model-ctx {
font-size: var(--text-xs);
color: var(--ink-faint);
white-space: nowrap;
}
.model-vision { display: flex; color: var(--ink-faint); min-width: 1rem; }
.picker__list--models .picker__tick { display: flex; margin-top: 0; min-width: 1rem; visibility: hidden; }
.picker__list--models .picker__option.is-selected .picker__tick { visibility: visible; }
.picker__empty {
padding: var(--sp-4);
margin: 0;
src/lembas/web/templates/chat/_model_picker.html
+26 -20
View File
@@ -3,9 +3,16 @@
Model picker.
A real dropdown rather than a <select>, because a <select> cannot show an
image, a description or capability badges -- browsers render only text in an
<option>. The hidden input is what actually carries the value, so the control
still behaves like a form field.
image or an icon -- browsers render only text in an <option>. The hidden
input is what actually carries the value, so the control still behaves like
a form field.
Each option is name, context window and an eye for vision, and nothing else.
It listed every capability switch as a tag until 1.8.2, which is twenty
`tool_*` tags per model in a menu whose one job is choosing; the full list is
on /settings. The options share the list's column tracks (subgrid), so the
context sizes and the eyes line up whatever a name's length -- and every
option emits every slot, empty or not, or its row shifts.
Inside a chat it PATCHes the chat; on /chat it navigates, because there is no
chat row to patch yet.
@@ -31,7 +38,7 @@
</div>
{% endif %}
<div class="picker__list">
<div class="picker__list picker__list--models">
{% for model in models %}
<button class="picker__option {{ 'is-selected' if current_model and model.model_id == current_model.model_id }}"
type="button" role="option"
@@ -39,23 +46,22 @@
data-picker-value="{{ model.model_id }}"
data-picker-search="{{ model.label|lower }} {{ model.model_id|lower }}">
{{ model_avatar(model, cls="picker__avatar") }}
<span class="picker__option-body">
<span class="picker__option-name">
{{ model.label }}
{% if model.pinned %}{{ icon("pin", "icon--sm picker__pin") }}{% endif %}
</span>
{% if model.description %}
<span class="picker__option-desc">{{ model.description }}</span>
{% endif %}
<span class="picker__option-tags">
{% for name, on in (model.capabilities_json or {}).items() %}
{% if on %}<span class="tag">{{ name }}</span>{% endif %}
{% endfor %}
</span>
<span class="picker__option-name">
<span class="truncate">{{ model.label }}</span>
{% if model.pinned %}{{ icon("pin", "icon--sm picker__pin") }}{% endif %}
</span>
{% if current_model and model.model_id == current_model.model_id %}
{{ icon("check", "icon--sm picker__tick") }}
{% endif %}
<span class="model-ctx mono"
{% if model.context_length %}title="{{ t('Context window') }}: {{ model.context_length }}"{% endif %}>
{%- if model.context_length %}CTX {{ model.context_length|context_size }}{% endif -%}
</span>
<span class="model-vision">
{%- if (model.capabilities_json or {}).get("vision") -%}
{{ icon("eye", "icon--sm") }}<span class="visually-hidden">{{ t("Sees images") }}</span>
{%- endif -%}
</span>
{# Always rendered and shown by `.is-selected`, so it follows ui.js's
in-place choice rather than staying on the model the page loaded with. #}
<span class="picker__tick">{{ icon("check", "icon--sm") }}</span>
</button>
{% endfor %}
</div>
src/lembas/web/templates/partials/icons.html
+4
View File
@@ -135,6 +135,10 @@
<circle cx="9" cy="10" r="1.6"/>
<path d="m4.5 17 4.2-4.2a1.5 1.5 0 0 1 2.1 0l3 3 1.9-1.9a1.5 1.5 0 0 1 2.1 0l2 2"/>
</symbol>
<symbol id="i-eye" viewBox="0 0 24 24">
<path d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z"/>
<circle cx="12" cy="12" r="3"/>
</symbol>
<symbol id="i-arrow-up" viewBox="0 0 24 24"><path d="M12 19V6M6 12l6-6 6 6"/></symbol>
<symbol id="i-arrow-down" viewBox="0 0 24 24"><path d="M12 5v13M6 12l6 6 6-6"/></symbol>
<symbol id="i-star" viewBox="0 0 24 24">
src/lembas/web/templates/settings.html
+26 -14
View File
@@ -145,23 +145,35 @@
<div class="card">
<h2 class="card__title">{{ t("Available to you") }}</h2>
<p class="card__lede">{{ t("In the order an administrator arranged them.") }}</p>
<ul class="model-list">
{# Name, context window and vision on one line, on the list's
column tracks so they line up down the card; the capability
switches wrap underneath at the full width. They sat beside
the name until 1.8.2 and, twenty tags long, squeezed it to a
word per line and ran over it. #}
<ul class="model-list model-list--models">
{% for model in models %}
<li class="model-list__item">
<div class="row" style="gap: var(--sp-2); min-width: 0">
{{ model_avatar(model, cls="nav-item__avatar") }}
<div style="min-width: 0">
<strong>{{ model.label }}</strong>
{% if model.description %}
<div class="text-xs faint">{{ model.description }}</div>
{% endif %}
</div>
</div>
<div class="btn-row">
{% for name, on in (model.capabilities_json or {}).items() %}
{% if on %}<span class="badge badge--leaf">{{ name }}</span>{% endif %}
{% endfor %}
{{ model_avatar(model, cls="nav-item__avatar") }}
<strong class="model-list__name">
<span>{{ model.label }}</span>
{% if model.pinned %}<span class="badge">{{ t("pinned") }}</span>{% endif %}
</strong>
<span class="model-ctx mono"
{% if model.context_length %}title="{{ t('Context window') }}: {{ model.context_length }}"{% endif %}>
{%- if model.context_length %}CTX {{ model.context_length|context_size }}{% endif -%}
</span>
<span class="model-vision">
{%- if (model.capabilities_json or {}).get("vision") -%}
{{ icon("eye", "icon--sm") }}<span class="visually-hidden">{{ t("Sees images") }}</span>
{%- endif -%}
</span>
{% if model.description %}
<div class="model-list__more text-xs faint">{{ model.description }}</div>
{% endif %}
<div class="model-list__more model-list__tags">
{%- for name, on in (model.capabilities_json or {}).items() -%}
{%- if on %}<span class="tag">{{ name }}</span>{% endif -%}
{%- endfor -%}
</div>
</li>
{% endfor %}
src/lembas/web/templating.py
+20
View File
@@ -63,6 +63,26 @@ def stable_hue(value: str) -> int:
templates.env.filters["stable_hue"] = stable_hue
def context_size(tokens: int | None) -> str:
"""A context window as a model list shows it: 131072 -> "131K".
Decimal thousands, because that is how the number is quoted everywhere a
person reads it, and a picker that said "128K" for a 131072-token model
would disagree with the admin page's own figure. Empty for an unknown size,
so the column slot is still emitted and the next row does not shift.
"""
if not tokens or tokens <= 0:
return ""
if tokens < 1000:
return str(tokens)
if tokens < 1_000_000:
return f"{round(tokens / 1000)}K"
return f"{tokens / 1_000_000:.1f}".removesuffix(".0") + "M"
templates.env.filters["context_size"] = context_size
# A user's own message: escaped here and marked up, so `@mentions` read as
# references rather than as punctuation. A filter rather than a context value
# because the message templates are included from four different handlers and