Align runtime note with serve presets

This commit is contained in:
pewdiepie-archdaemon
2026-06-27 22:13:20 +00:00
parent d37abae084
commit 61cf07eaf1
2 changed files with 36 additions and 8 deletions
+7 -6
View File
@@ -1233,11 +1233,13 @@ function _rerenderCachedModels() {
if (_replaceTaskId) {
panelHtml += `<input type="hidden" class="hwfit-sf" data-field="_replaceTaskId" value="${esc(_replaceTaskId)}" />`;
}
// Runtime-readiness note pinned at the top of the serve area so the
// user sees "vLLM ready on …" before scrolling into the configure
// form. Hidden until the readiness probe returns. The × button
// dismisses it for this panel only (re-shows on re-expand).
panelHtml += `<div class="hwfit-serve-runtime-note" style="display:none;font-size:11px;line-height:1.35;color:var(--fg-muted);margin:0 0 8px;padding:6px 28px 6px 10px;border-radius:5px;background:color-mix(in srgb, var(--fg) 4%, transparent);border:1px solid color-mix(in srgb, var(--border) 60%, transparent);position:relative;"><span class="hwfit-serve-runtime-text"></span><button type="button" class="hwfit-serve-runtime-close" title="Dismiss" aria-label="Dismiss" style="position:absolute;top:-8px;right:5px;background:none;border:0;color:inherit;cursor:pointer;padding:2px 4px;line-height:1;font-size:13px;opacity:0.6;"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button></div>`;
// Runtime-readiness note shares the top line with the preset controls
// so "vLLM ready on …" reads as panel status instead of a separate
// block pushing the form down. Hidden until the readiness probe returns.
panelHtml += `<div class="hwfit-serve-topline">`;
panelHtml += `<div class="hwfit-serve-runtime-note" style="display:none;font-size:11px;line-height:1.35;color:var(--fg-muted);margin:0;padding:6px 28px 6px 10px;border-radius:5px;background:color-mix(in srgb, var(--fg) 4%, transparent);border:1px solid color-mix(in srgb, var(--border) 60%, transparent);position:relative;"><span class="hwfit-serve-runtime-text"></span><button type="button" class="hwfit-serve-runtime-close" title="Dismiss" aria-label="Dismiss" style="position:absolute;top:-8px;right:5px;background:none;border:0;color:inherit;cursor:pointer;padding:2px 4px;line-height:1;font-size:13px;opacity:0.6;"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button></div>`;
panelHtml += `<div class="hwfit-serve-preset-row">${_slotsHtml}</div>`;
panelHtml += `</div>`;
// Warn when serving a model whose download hasn't fully completed —
// the user CAN still hit Launch (vLLM/llama-server will start, then
// crash trying to read missing shards), but they should know.
@@ -1247,7 +1249,6 @@ function _rerenderCachedModels() {
: `This model's download isn't complete yet (${esc(m.size || 'partial')}). The serve will start but is likely to crash on a missing shard. Wait for the download to finish, or relaunch after it's done.`;
panelHtml += `<div class="hwfit-serve-warn" style="margin:0 0 8px;padding:6px 10px;border-radius:5px;font-size:11px;background:color-mix(in srgb, var(--color-warning, #f0ad4e) 14%, transparent);border:1px solid color-mix(in srgb, var(--color-warning, #f0ad4e) 40%, transparent);color:var(--color-warning, #f0ad4e);display:flex;gap:6px;align-items:flex-start;line-height:1.4;"><span aria-hidden="true">⚠</span><span>${_warnText}</span></div>`;
}
panelHtml += `<div class="hwfit-serve-preset-row">${_slotsHtml}</div>`;
// Row 1: Engine + Server + Env
panelHtml += `<div class="hwfit-serve-row">`;
const backendOpts = _backendChoices.map(([v,l]) => `<option value="${v}"${defaultBackend===v?' selected':''}>${l}</option>`).join('');
+29 -2
View File
@@ -20066,10 +20066,28 @@ body.gallery-selecting .gallery-dl-btn,
position: relative;
left: -33px;
}
.hwfit-serve-topline {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
margin: 0 0 6px;
}
.hwfit-serve-topline .hwfit-serve-runtime-note {
flex: 1 1 auto;
min-width: 0;
}
.hwfit-serve-topline .hwfit-serve-runtime-text {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hwfit-serve-preset-row {
display: flex;
justify-content: flex-end;
margin: 0 0 6px;
margin: 0;
flex: 0 0 auto;
}
/* Expanded serve panel make sure it can be scrolled past when it
grows taller than the visible viewport. Caps panel height to viewport
@@ -20086,7 +20104,16 @@ body.gallery-selecting .gallery-dl-btn,
}
.hwfit-serve-preset-row {
justify-content: flex-end;
margin: -2px 0 6px;
margin: -2px 0 0;
}
.hwfit-serve-topline {
flex-wrap: wrap;
}
.hwfit-serve-topline .hwfit-serve-runtime-note {
flex-basis: 100%;
}
.hwfit-serve-topline .hwfit-serve-runtime-text {
white-space: normal;
}
}
.hwfit-serve-row label {