--- license: mit language: - en tags: - mlx - phi-2 - html - css - web-development - code-generation - fine-tuned - apple-silicon base_model: microsoft/phi-2 pipeline_tag: text-generation library_name: mlx model-index: - name: WebICoder-v3-MLX-4bit results: [] --- # ⚡ WebICoder v3 — HTML Code Generation (MLX 4-bit) **WebICoder v3** is a fine-tuned version of [Microsoft Phi-2](https://huggingface.co/microsoft/phi-2) (2.7B parameters) specialized in generating **complete, production-ready HTML/CSS websites** from natural language descriptions. Optimized for **Apple Silicon** via [MLX](https://github.com/ml-explore/mlx). ## Model Details | Property | Value | |---|---| | **Base Model** | Microsoft Phi-2 (2.7B parameters) | | **Architecture** | PhiForCausalLM (32 layers, 2560 hidden) | | **Format** | MLX (Apple Silicon optimized) | | **Quantization** | 4-bit (4.504 bits/weight, affine) | | **Size** | ~1.5 GB | | **Context Length** | 4096 tokens | | **Task** | HTML/CSS Code Generation | | **Speed** | ~20-40 tok/s on M-series Mac | ## Also Available | Variant | Link | Size | |---|---|---| | **8-bit** (higher quality) | `YOUR_USERNAME/WebICoder-v3-MLX-8bit` | ~2.9 GB | --- ## ⚠️ MANDATORY — Read Before Using > **If you skip these steps, the model will produce broken, repeated, or low-quality output.** > Follow ALL 5 rules below to get the best results. ### Rule 1 — Use the correct prompt format The model was trained with an **Alpaca-style format**. You MUST wrap your prompt like this: ``` ### Instruction: {your website description here} ### Response: ``` ❌ **DO NOT** send raw text like `"Create a website"` — the model won't understand it correctly. ✅ **DO** use the format above, or use `tokenizer.apply_chat_template()` which does it automatically. ### Rule 2 — ALWAYS stop at `` The model does not always emit an EOS token after finishing the HTML. You **MUST** check for `` in the output and stop generation when you see it. ```python # ✅ Correct — stop at for response in stream_generate(model, tokenizer, prompt=prompt, max_tokens=4096, sampler=sampler): full_text += response.text if "" in full_text: break ``` ❌ Without this, the model will **repeat the entire page** in a loop. ### Rule 3 — Use repetition penalty A repetition penalty is **essential** to prevent the model from generating duplicate sections (e.g., the same footer twice, identical testimonials). ```python from mlx_lm.sample_utils import make_logits_processors logits_processors = make_logits_processors(repetition_penalty=1.2, repetition_context_size=256) ``` Then pass `logits_processors=logits_processors` to `stream_generate()`. ### Rule 4 — Use low temperature (0.3 – 0.5) High temperature (> 0.7) produces incoherent, broken HTML. **Always use 0.3 – 0.5**. ```python from mlx_lm.sample_utils import make_sampler sampler = make_sampler(temp=0.4) # ✅ Recommended ``` ### Rule 5 — Post-process the output The model may occasionally prepend training artifacts (system prompt) before the HTML. **Always clean the output:** ```python import re def clean_html(text: str) -> str: """Extract clean HTML from model output.""" # Remove leaked system prompts text = re.sub(r"You are (?:Deep|Web[iI])coder.*?production-ready code\.\n*", "", text, flags=re.DOTALL) text = re.sub(r"### Instruction:.*", "", text, flags=re.DOTALL) text = re.sub(r"### Response:\s*", "", text, flags=re.DOTALL) # Extract HTML document match = re.search(r"(<(?:!DOCTYPE\s+html|html)[\s\S]*?)", text, re.IGNORECASE) if match: return match.group(1).strip() # Fallback start = re.search(r"<(?:!DOCTYPE|html|head|body)", text, re.IGNORECASE) if start: html = text[start.start():].strip() if not html.lower().startswith("\n\n" + html + "\n" return html return text.strip() ``` --- ## Quick Start — Complete Working Example Copy-paste this and it will work: ```python from mlx_lm import load, stream_generate from mlx_lm.sample_utils import make_sampler, make_logits_processors import re # 1. Load model model, tokenizer = load("YOUR_USERNAME/WebICoder-v3-MLX-4bit") # 2. Format prompt (MANDATORY) user_prompt = "Create a modern portfolio website with a hero, project cards, and a contact form" prompt = f"""### Instruction: {user_prompt} ### Response: """ # 3. Configure sampler + repetition penalty (MANDATORY) sampler = make_sampler(temp=0.4) logits_processors = make_logits_processors(repetition_penalty=1.2, repetition_context_size=256) # 4. Generate with stop at (MANDATORY) full_text = "" for response in stream_generate( model, tokenizer, prompt=prompt, max_tokens=4096, sampler=sampler, logits_processors=logits_processors, ): full_text += response.text print(response.text, end="", flush=True) if "" in full_text or response.finish_reason: break # 5. Clean output (MANDATORY) def clean_html(text): text = re.sub(r"You are (?:Deep|Web[iI])coder.*?production-ready code\.\n*", "", text, flags=re.DOTALL) match = re.search(r"(<(?:!DOCTYPE\s+html|html)[\s\S]*?)", text, re.IGNORECASE) return match.group(1).strip() if match else text.strip() html = clean_html(full_text) # Save to file with open("output.html", "w") as f: f.write(html) print(f"\n\nSaved to output.html ({len(html)} chars)") ``` --- ## Recommended Parameters Summary | Parameter | Value | Mandatory? | |---|---|:---:| | **Prompt format** | `### Instruction:` / `### Response:` | ✅ YES | | **Temperature** | 0.3 – 0.5 | ✅ YES | | **Repetition Penalty** | 1.2 | ✅ YES | | **Repetition Context** | 256 | ✅ YES | | **Max Tokens** | 4096 | ✅ YES | | **Stop at ``** | Check output and break | ✅ YES | | **Post-processing** | `clean_html()` function | ✅ YES | | **Top-p** | 0.9 | Recommended | | **Top-k** | 50 | Optional | --- ## Using the Chat Template The tokenizer includes a built-in chat template that handles prompt formatting automatically: ```python messages = [ {"role": "user", "content": "Create a dark-themed portfolio website with project cards"} ] prompt = tokenizer.apply_chat_template(messages, tokenize=False, add_generation_prompt=True) # This automatically wraps it in ### Instruction: / ### Response: format ``` ## Using the Example Script ```bash # Single prompt python example.py "Create a landing page for a coffee shop" # Interactive mode python example.py --interactive ``` --- ## Example Outputs | Prompt | What You Get | |---|---| | "Create a portfolio with a hero and project cards" | Nav, animated hero, glassmorphism cards, contact form, footer | | "Create a landing page for a fitness app" | Hero gradient, feature cards, testimonials, CTA, footer | | "Create a pricing page with 3 tiers" | Toggle monthly/yearly, feature lists, highlighted plan | | "Create a login page with split layout" | Gradient left, form right, social login buttons | --- ## What the Model Generates When properly configured, WebICoder v3 produces: - ✅ Complete `` with ``, ``, `` - ✅ **Vanilla CSS** — custom properties, gradients, glassmorphism, `backdrop-filter` - ✅ **Responsive design** — `@media` queries, `clamp()`, CSS Grid `auto-fit` - ✅ **Animations** — `fade-in` with `IntersectionObserver`, hover transitions - ✅ **Modern design** — gradient text, blur effects, rounded corners, shadows - ✅ **Complete pages** — nav, hero, content sections, footer --- ## Limitations - Optimized for **single-page HTML** with embedded CSS/JS - Context window: **4096 tokens** — very complex multi-section pages may still be truncated - Based on Phi-2 (2.7B) — larger models will produce more sophisticated output - English prompts work best --- ## Training Details | Property | Value | |---|---| | **Base Model** | microsoft/phi-2 | | **Fine-tuning** | Full fine-tuning on HTML/CSS code pairs | | **Training Format** | Alpaca-style (Instruction / Response) | | **Training Context** | 4096 tokens | | **Precision** | float16 | | **Quantization** | Post-training 4-bit (MLX affine, group_size=64) | --- ## Files Included | File | Description | |---|---| | `model.safetensors` | Quantized model weights | | `config.json` | Model architecture configuration | | `tokenizer.json` | Tokenizer vocabulary | | `tokenizer_config.json` | Tokenizer settings with chat template | | `generation_config.json` | Recommended generation parameters | | `example.py` | Ready-to-use example script with all mandatory rules | | `LICENSE` | MIT License | --- ## Citation ```bibtex @misc{webicoder-v3, title={WebICoder v3: Fine-tuned Phi-2 for HTML Code Generation}, year={2025}, publisher={Hugging Face}, url={https://huggingface.co/YOUR_USERNAME/WebICoder-v3-MLX-4bit} } ``` ## License MIT License — see [LICENSE](LICENSE) for details.