A visual-UI language model fine-tuned from Qwen3.5-4B, quantized to GGUF for llama.cpp. It
answers in a small semantic HTML component system — bento grids, metric cards, steppers, callouts
— wrapped in one <div class="ai-view"> root, instead of plain Markdown. Reasoning-native, and no
system prompt required.
| Item |
Value |
| Source repo |
wesjos/mario-html-4B — bf16 safetensors + bundled WebUI |
| Base |
Qwen/Qwen3.5-4B · 4.66 B (bf16) |
| Architecture |
GGUF qwen35 · 32 hybrid blocks (24 linear + 8 full attention) + 1 MTP head at blk.32 · hidden 2560 |
| Context |
262,144 native |
Files
| File |
Quant |
Size |
Tensor mix |
Mario-Qwen3.5-4B-HTML-Q8_0.gguf |
MOSTLY_Q8_0 |
4.29 GiB |
257 × Q8_0 + 184 × F32 |
Mario-Qwen3.5-4B-HTML-Q4_K_M.gguf |
MOSTLY_Q4_K_M |
2.59 GiB |
222 × Q4_K + 35 × Q6_K + 184 × F32 |
Quick Start
# Q4_K_M — fastest, ~2.6 GB on disk
llama-server \
-hf wesjos/mario-html-4B-GGUF:Mario-Qwen3.5-4B-HTML-Q4_K_M.gguf \
--host 0.0.0.0 --port 18085 \
-ngl 99 -fa on \
-c 65536
Recommended sampling
| Parameter |
Value |
| temperature |
1.0 |
| top_p |
0.95 |
| top_k |
20 |
| min_p |
0.0 |
| presence_penalty |
1.5 |
| repeat_penalty |
1.0 |
Output Contract
One root element; everything else is an optional child:
| Component |
Markup |
| Root |
<div class="ai-view"> |
| Summary |
<div class="summary-card"> · <p class="lead"> |
| Card |
<div class="card"> |
| Grid |
<div class="grid grid-2"> · <div class="grid grid-3"> |
| Metrics |
<div class="metric-group"><div class="metric-card"><span class="metric-label">…</span><span class="metric-value">…</span><span class="metric-sub">…</span></div></div> |
| Stepper |
<div class="stepper"><div class="step-item">…</div></div> |
| Callout |
<div class="callout callout-info\|warning\|success\|danger"><div class="callout-header">…</div></div> |
| Badge |
<span class="badge badge-info\|success\|warning\|danger\|accent"> |
| Table |
<div class="table-container"><table class="modern-table">…</table></div> |
| Feature list |
<div class="feature-list"><div class="feature-item">…</div></div> |
| Code block |
<div class="code-box"><div class="code-header"><span class="code-title">…</span></div>…</div> |
Raw sample (message.content verbatim)
<div class="ai-view">
<header class="ai-view-header">
<h1>Good!</h1>
<p class="lead">Everything looks solid from here. Got anything specific you'd like to build or clarify?</p>
</header>
<div class="grid grid-2">
<div class="card">
<span class="badge badge-success">Current state</span>
<h2>The basics check out</h2>
<p>Your message landed cleanly and the conversation is open. This is a strong position to move forward on whatever topic you want to tackle next.</p>
</div>
<div class="card">
<span class="badge badge-info">What's next</span>
<h2>Set the intent</h2>
<p>Tell me what you're trying to accomplish today—whether it's a task, idea, plan, or question—and I'll help you break it down into concrete steps.</p>
</div>
</div>
<div class="metric-group">
<div class="metric-card">
<span class="metric-label">Confidence</span>
<span class="metric-value">High</span>
<span class="metric-sub">Based on your input</span>
</div>
<div class="metric-card">
<span class="metric-label">Priority</span>
<span class="metric-value">Clarify scope</span>
<span class="metric-sub">To make things faster</span>
</div>
</div>
<div class="callout callout-info">
<div class="callout-header">Want something more specific?</div>
<p>Ambiguous prompts work well sometimes, but adding a single sentence about your end goal makes my responses much tighter and more useful.</p>
</div>
</div>
`ai-view-header` is not in the source repo's `theme.css` — it renders with default header styling. Fine,
but define your own if you want tighter control.
License
Apache License 2.0.
