---

license: apache-2.0

library_name: llama.cpp

pipeline_tag: image-text-to-text

base_model: wesjos/mario-html-v2-9B

language:

• en
• zh

tags:

• html-generation
• web-design
• visual-ui
• visual-question-answering
• reasoning
• image-text-to-text
• zero-system-prompt
• cot-purity
• gguf
• quantized

datasets:

• wesjos/mario-html-sft

---

🍄 Mario-HTML-v2-9B

> V2: less html tag in Cot than v1.

> This is the GGUF build of wesjos/mario-html-v2-9B.

> The weights here are quantized; the card below and the demos are that model's, unchanged.

📦 GGUF files

| File | Quant | Size | Notes |

|---|---|---|---|

| Qwen3.5-9B-HTML-v5-Q8_0.gguf | Q8_0 | 8.87 GiB | near-lossless |

| Qwen3.5-9B-HTML-v5-Q4_K_M.gguf | Q4_K_M | 5.24 GiB | smaller, faster |

| mmproj-Qwen3.5-9B-BF16.gguf | BF16 | 0.86 GiB | vision projector — required for image input |

• Text → HTML: one quant is enough, e.g. llama serve -hf wesjos/mario-html-v2-9B-GGUF:Q8_0 (the tag form the Hub generates for this repo).
• Text + image → HTML: add the projector explicitly — --mmproj mmproj-Qwen3.5-9B-BF16.gguf (it does follow the mmproj-* naming, but keeping it explicit costs nothing).
• Manual form, equivalent: llama-server -m Qwen3.5-9B-HTML-v5-Q8_0.gguf --mmproj mmproj-Qwen3.5-9B-BF16.gguf -ngl 99 -c 65536.
• Chat template default system: none (zero-prompt native).
• If you reuse the 4B repo's WebUI config, its model_path points at the 4B quant — set it to ./Qwen3.5-9B-HTML-v5-Q8_0.gguf here.

| | |

|---|---|

| Base | Qwen/Qwen3.5-9B · 9.65 B (bf16) · 17.98 GiB |

| Architecture | Qwen3_5ForConditionalGeneration · 32 layers (24 linear + 8 full attention, interval 4) · hidden 4096 |

| Context | 262,144 native |

| Modalities | text → HTML, text + image → HTML |

---

🖼️ Demo

All shots are the WebUI (shipped with the mario-html-v2-4B repo,

theme_preset: editorial) with the CoT toggle switched on — its webui/config.json ships

enable_thinking: false, which hides the reasoning panel entirely, so flip it if you want to see

the traces. The panel above each answer is the raw <think> stream; the page below it is the

unmodified render.

Microservices vs. Monolith — comparison grid

Compare Microservices vs Monolith architecture in a modern comparison grid

(two-card grid, callouts, metric tiles and a head-to-head table; reasoning panel collapsed)

<img src="demo/01-microservices-vs-monolith.png" alt="Architecture comparison demo: a verdict callout, a two-card Monolith vs Microservices grid with BEST FOR / RISK / OPS / TRADE-OFF bullets, metric tiles, and a head-to-head comparison table">

Step-by-step math, CoT expanded

Solve the linear equation: 2x + 5 = 17 step by step

(the <think> stream is pure plain-text planning — zero HTML tags — while the answer renders as

cards, code blocks and a stepper)

<img src="demo/02-solve-linear-equation-cot.png" alt="Math demo: reasoning panel expanded above the answer, showing plain-text planning followed by a rendered step-by-step solution with code blocks and a golden-rule callout">

Vision input

llama photo + what is this (image paste via Ctrl+V, answered as a llama-vs-alpaca breakdown)

<img src="demo/03-vision-llama.png" alt="Vision demo: an uploaded llama photo with the question 'what is this', answered with a two-card llama-vs-alpaca comparison, a feature table and characteristic tiles">

---

📤 Output Contract

One root element; everything else is an optional child. Class list verified against

webui/static/theme.css (shipped with the mario-html-v2-4B repo):

| Component | Markup |

|---|---|

| Root | <div class="ai-view"> |

| Summary | <div class="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, v2 zero-system-prompt greedy)</summary>

<div class="ai-view">
<h3>为什么天空是蓝色的？</h3>
<div class="summary">
<p class="lead">阳光中的蓝光被大气中的分子"散射"到四面八方，而我们的眼睛对蓝光更敏感，所以我们看到天空是蓝色的。</p>
</div>
<div class="card">
<h4>三句话解释</h4>
<div class="step-list"><div class="step-item">…</div></div>
</div>
</div>

The <think> trace that precedes this sample contains zero HTML tags — pure plain-text planning

("a summary lead, then a three-item stepper..."). Two classes in the sample are content-only:

step-list and ai-view-header are not in theme.css, so they render with default block styling —

define your own if you want tighter control. (step-item itself is styled.)

</details>

---

🎨 WebUI

The WebUI ships with the sibling 4B repo — clone wesjos/mario-html-v2-4B, point webui/config.json at your serving endpoint for this model, and:

cd webui
pip install -r requirements.txt
python server.py --port 8791

Open http://localhost:8791. Dual-stream rendering (collapsible <think> + live HTML), clipboard

image paste (Ctrl+V), nine theme presets (default · apple · notion · cyber · editorial ·

cards_rounded · glassmorphism · soft_shadows · compact) plus live custom CSS, and a

raw-source / copy-HTML view per message.

---

⚠️ Notes

• The output is HTML, not Markdown. Feed it a Markdown renderer and you get raw tags.
• Serve with a clear/absent system prompt — the zero-system-prompt path is the trained one.
• The model picks from the class vocabulary above; arbitrary new CSS classes are not a contract.

Custom theme.css is the supported way to restyle.

• Arithmetic is reliable but not bank-grade — check long decimal chains.
• --reasoning-parser qwen3 needs a recent vLLM.

---

📄 License

Apache License 2.0.