Note

This is a small experiment I conducted to see what happens if I choose to use HTML instead of Markdown in LLM.
there are html tokens in Cot in this model which is low efficent for any task, because models have to waste there energy to think about how to make nice html. ill try to fix that.
for the name mario, that is just because i was thinking of Marshroom LOL.

🍄 Mario-HTML-4B-GGUF

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

🖼️ Demo

Copied from the source repo wesjos/mario-html-4B — these shots are the bf16 checkpoint rendered by the bundled WebUI (webui/, editorial theme), not re-run on these quants. The pink bar at the top of each answer is the collapsed <think> stream; the render below it is the raw output, unmodified.

Code generation

python code: transformer decoder with numpy only

Vision input

describe this picture. — with an image attached

Reasoning

is 9.11 bigger than 9.9

Stepwise arithmetic

8.2x9.12/23=

Persona

who are you

📦 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.

wesjos/mario-html-4B-GGUF