---

license: apache-2.0

library_name: transformers

pipeline_tag: text-generation

base_model: wesjos/mario-html-4B

language:

• en
• zh

tags:

• gguf
• llama.cpp
• html-generation
• web-design
• visual-ui
• reasoning
• qwen3.5

datasets:

• wesjos/mario-html-sft

---

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

<img src="demo/01-python-transformer-decoder.png" alt="Code generation demo: structured HTML explainer with cards, callout, and a dark code box">

Vision input

describe this picture. — with an image attached

<img src="demo/02-vision-image-description.png" alt="Vision input demo: an uploaded image rendered as a titled spec sheet with a breakdown grid">

Reasoning

is 9.11 bigger than 9.9

<img src="demo/03-math-place-value.png" alt="Reasoning demo: a correction callout, answer cards, a numbered stepper, and a recap grid">

Stepwise arithmetic

8.2x9.12/23=

<img src="demo/04-math-stepwise-reasoning.png" alt="Stepwise arithmetic demo: a three-step stepper with code-box derivations and a calculation callout">

Persona

who are you

<img src="demo/05-persona-who-are-you.png" alt="Persona demo: a persona page with metric cards and a capability table">

---

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

<details>

<summary>Raw sample (<code>message.content</code> verbatim)</summary>

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

</details>

---

📄 License

Apache License 2.0.