AesCoder-4B-GGUF

<span style="color: #7FFF7F;">AesCoder-4B GGUF Models</span>

<span style="color: #7F7FFF;">Model Generation Details</span>

This model was generated using llama.cpp at commit 45c6ef730.

---

<span style="color: #7FFF7F;">Quantization Beyond the IMatrix</span>

I've been experimenting with a new quantization approach that selectively elevates the precision of key layers beyond what the default IMatrix configuration provides.

In my testing, standard IMatrix quantization underperforms at lower bit depths, especially with Mixture of Experts (MoE) models. To address this, I'm using the --tensor-type option in llama.cpp to manually "bump" important layers to higher precision. You can see the implementation here:
👉 Layer bumping with llama.cpp

While this does increase model file size, it significantly improves precision for a given quantization level.

I'd love your feedback—have you tried this? How does it perform for you?

---

<a href="https://readyforquantum.com/huggingface_gguf_selection_guide.html" style="color: #7FFF7F;"> Click here to get info on choosing the right GGUF model format </a>

---

<!--Begin Original Model Card-->

Code Aesthetics with Agentic Reward Feedback

<div align="center"> <a href='https://bangx7.github.io/code-aesthetics/'><img src='https://img.shields.io/badge/Project-Page-Green'></a> <a href="https://huggingface.co/SamuelBang/AesCoder-4B"><img alt="Hugging Face" src="https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Model-ffc107?color=ffc107&logoColor=white"/></a> <br> <a href="https://arxiv.org/abs/2510.23272"><b>Paper Link</b>👁️</a> </div> <div align="center"> <p> ^1,2<a href="https://bangx7.github.io" target="_blank">Bang Xiao</a>^#,</span> <span class="author-block"> ^1,3<a href="https://github.com/JackLingjie" target="_blank">Lingjie Jiang</a>^#,</span> <span class="author-block"> ¹<a href="https://www.microsoft.com/en-us/research/people/shaohanh/" target="_blank">Shaohan Huang</a>^✉,</span> <span class="author-block"> ¹<a href="https://www.microsoft.com/en-us/research/people/tengchaolv/" target="_blank">Tengchao Lv</a>, </span> <span class="author-block"> ¹<a href="https://www.microsoft.com/en-us/research/people/yupanhuang/" target="_blank">Yupan Huang</a>, </span> <span class="author-block"> ¹<a href="https://yushuiwx.github.io/" target="_blank">Xun Wu</a>, </span> <span class="author-block"> ¹<a href="https://www.microsoft.com/en-us/research/people/lecu/" target="_blank">Lei Cui</a>, </span> <span class="author-block"> ¹<a href="https://www.microsoft.com/en-us/research/people/fuwei/" target="_blank">Furu Wei</a> </span> </p> <p> ¹Microsoft Research Asia &nbsp;&nbsp; ²Zhiyuan College, Shanghai Jiao Tong University &nbsp;&nbsp; ³Peking University<br> ^#Equal Contribution ^✉Corresponding author </p> </div>

For the codebase, refer to: https://github.com/bangx7/code_aesthetics

🎉 News

• [2025.10.29]: Release the AesCoder-4B model.
• [2025.10.27]: Release the Project Page and the Arxiv version.

📷 Abstract

Large Language Models (LLMs) have become valuable assistants for developers in code-related tasks. While LLMs excel at traditional programming tasks such as code generation and bug fixing, they struggle with visually-oriented coding tasks, often producing suboptimal aesthetics. In this paper, we introduce a new pipeline to enhance the aesthetic quality of LLM-generated code. We first construct AesCode-358K, a large-scale instruction-tuning dataset focused on code aesthetics. Next, we propose agentic reward feedback, a multi-agent system that evaluates executability, static aesthetics, and interactive aesthetics. Building on this, we develop GRPO-AR, which integrates these signals into the GRPO algorithm for joint optimization of functionality and code aesthetics. Finally, we develop OpenDesign, a benchmark for assessing code aesthetics. Experimental results show that combining supervised fine-tuning on AesCode-358K with reinforcement learning using agentic reward feedback significantly improves performance on OpenDesign and also enhances results on existing benchmarks such as PandasPlotBench. Notably, our AesCoder-4B surpasses GPT-4o and GPT-4.1, and achieves performance comparable to large open-source models with 480B-685B parameters, underscoring the effectiveness of our approach.

To-do List

• Release paper and project page
• Release our AesCoder model
• Release code

Note: This is the version of AesCoder-4B model for only webpage design.

Quickstart

VLLM deployment (Recommended)

We recommend using vllm>=0.8.5 for efficient inference and deployment. Here's how to get started:

Installation:

pip install vllm>=0.8.5

API Server Deployment: To create an OpenAI-compatible API endpoint:

vllm serve SamuelBang/AesCoder-4B --max-model-len 262144

Using with OpenAI Client:

from openai import OpenAI

# Initialize the client
client = OpenAI(
    base_url="http://localhost:8000/v1",
    api_key="None"
)

# Generate completion
response = client.chat.completions.create(
    model="SamuelBang/AesCoder-4B",
    messages=[
        {"role": "user", "content": "Create a user-friendly website for a landing page dedicated to selling dog-related products."}
    ],
    temperature=0.8,
    max_tokens=16384
)

# Get the generated content
content = response.choices[0].message.content
print("Generated content:", content)

Basic vLLM Usage:

from vllm import LLM, SamplingParams

model_name = "SamuelBang/AesCoder-4B"

# Initialize the model
llm = LLM(
    model=model_name,
    max_model_len=262144,  # Maximum context length
    tensor_parallel_size=1,  # Adjust based on your GPU setup
)

# Define sampling parameters
sampling_params = SamplingParams(
    temperature=0.8,
    top_p=0.8,
    top_k=20,
    min_p=0,
    max_tokens=16384
)

# Prepare the prompt
prompt = "Create a user-friendly website for a landing page dedicated to selling dog-related products. "
messages = [
    {"role": "user", "content": prompt}
]

# Apply chat template (you'll need to get the tokenizer for this)
from transformers import AutoTokenizer
tokenizer = AutoTokenizer.from_pretrained(model_name)
text = tokenizer.apply_chat_template(
    messages,
    tokenize=False,
    add_generation_prompt=True,
)

# Generate text
outputs = llm.generate([text], sampling_params)

# Get the result
content = outputs[0].outputs[0].text
print("Generated content:", content)

Note: If you encounter out-of-memory (OOM) issues, consider reducing the context length to a shorter value, such as 32,768 or adjusting the tensor_parallel_size based on your available GPU memory.

SGLang Deployment

You can use sglang>=0.4.6.post1 to create an OpenAI-compatible API endpoint:

python -m sglang.launch_server --model-path SamuelBang/AesCoder-4B --context-length 262144

Note: If you encounter out-of-memory (OOM) issues, consider reducing the context length to a shorter value, such as 32,768.

Use with origin transformer package (NOT recommended, very slow)

The code of Qwen3 has been in the latest Hugging Face transformers and we advise you to use the latest version of transformers.

With transformers<4.51.0, you will encounter the following error:

KeyError: 'qwen3'

The following contains a code snippet illustrating how to use the model generate content based on given inputs.

from transformers import AutoModelForCausalLM, AutoTokenizer

model_name = "SamuelBang/AesCoder-4B"

# load the tokenizer and the model
tokenizer = AutoTokenizer.from_pretrained(model_name)
model = AutoModelForCausalLM.from_pretrained(
    model_name,
    torch_dtype="auto",
    device_map="auto"
)

# prepare the model input
prompt = "Create a user-friendly website for a landing page dedicated to selling dog-related products. "
messages = [
    {"role": "user", "content": prompt}
]
text = tokenizer.apply_chat_template(
    messages,
    tokenize=False,
    add_generation_prompt=True,
)
model_inputs = tokenizer([text], return_tensors="pt").to(model.device)

# conduct text completion
generated_ids = model.generate(
    **model_inputs,
    max_new_tokens=16384,
    temperature=0.8
)
output_ids = generated_ids[0][len(model_inputs.input_ids[0]):].tolist() 

content = tokenizer.decode(output_ids, skip_special_tokens=True)

print("content:", content)

Best Practices

Sampling Parameters

To achieve optimal performance, we suggest using Temperature=0.8, TopP=0.8, TopK=20, and MinP=0 for sampling.

System Prompt

To achieve better webpage generation results with our model, please use appropriate system prompts. We have categorized webpage generation into 5 main categories, and the recommended system prompts for each category are as follows (reference to: https://designarena.ai):

Website:

You are an expert web developer and designer specializing in modern websites. Create a complete, working HTML page with embedded CSS and JavaScript if needed. Feel free to use lightweight libraries like Tailwind CSS to enhance the design as long as they can be rendered in an iframe.
 Requirements:
 1. Create a fully functional, modern, and responsive website design
 2. Use only HTML, CSS, and JavaScript, but feel free to use libraries like Tailwind CSS to make the design better. Libraries such as ThreeJS, react three fiber, drei, @react-three/postprocessing, @react-three/cannon, d3, and recharts as additional libraries can be imported.
 3. Include all styles inline within <style> tags
 4. Focus on clean layouts, typography, and user experience
 5. Implement modern web design trends (gradients, shadows, smooth animations)
 6. Ensure excellent mobile responsiveness
 7. Include interactive elements where appropriate
 8. Make it production-ready and professional
 9. You must include all relevant script tags for libraries to work properly.
 Return ONLY the complete HTML code, starting with <!DOCTYPE html> and ending with </html>. Do not include any explanations or markdown formatting.

Game Development:

You are an expert game developer specializing in browser-based games. Create a complete, working HTML page with an interactive game using embedded CSS and JavaScript.
 Requirements:
 1. Create a fully functional, playable browser game
 2. Use HTML, CSS, and JavaScript, but feel free to use libraries Tailwind CSS to make the game better as long as they will render in iframe. Libraries such as ThreeJS, react three fiber, drei, @react-three/postprocessing, @react-three/cannon, d3, and recharts (and others) can be imported.
 3. Include all styles inline within <style> tags
 4. Implement game mechanics, controls, and scoring systems
 5. Include game states (start screen, gameplay, game over)
 6. Add visual feedback, animations, and sound effects using Web Audio API if needed
 7. Ensure responsive design that works on both desktop and mobile
 8. Make the game engaging and fun to play
 9. You must include all relevant script tags for libraries to work properly.
 Return ONLY the complete HTML code, starting with <!DOCTYPE html> and ending with </html>. Do not include any explanations or markdown formatting.

3D Design

You are an expert in 3D graphics and WebGL. Create a complete, working HTML page with 3D graphics and animations using embedded CSS and JavaScript.
Requirements:
1. Create a fully functional 3D scene or application
2. Use only CSS, and vanilla JavaScript with WebGL or CSS 3D transforms. Feel free to use lightweight libraries like Three.js or Babylon.js to make the 3D design better as long as they can be rendered in an iframe. Libraries such as ThreeJS, react three fiber, drei, @react-three/postprocessing, @react-three/cannon, d3, and recharts (and others) can be imported.
3. Include all styles inline within <style> tags
4. Implement 3D models, animations, and interactive controls
5. Add proper lighting, materials, and camera controls
6. Include smooth animations and user interaction
7. Ensure good performance and responsive design
8. Make it visually impressive and production-ready
9. You must include all relevant script tags for libraries to work properly.
Return ONLY the complete HTML code, starting with <!DOCTYPE html> and ending with </html>. Do not include any explanations or markdown formatting.

Data Visualization

You are an expert in data visualization and interactive charts. Create a complete, working HTML page with dynamic data visualization capabilities using embedded CSS and JavaScript. Feel free to use lightwight libraries (as long as it can be rendered in an iframe) such as Tailwind CSS.

Requirements:
1. Create a fully functional data visualization application with interactive charts and graphs
2. Use only HTML, CSS, and vanilla JavaScript with Canvas API or SVG, but feel free to use lightweight libraries like D3.js or Chart.js to make the visualizations better as long as they can be rendered in an iframe. Libraries such as ThreeJS, react three fiber, drei, @react-three/postprocessing, @react-three/cannon, d3, and recharts (and others) can be imported.
3. Include all styles inline within <style> tags
4. Ensure responsive design that adapts to different screen sizes
5. Your goal is to make the design of the data visualization top-notch.
6. You must include all relevant script tags for libraries to work properly.

When making data visualizations, always set "maintain aspect ratio" to true.

Return ONLY the complete HTML code, starting with <!DOCTYPE html> and ending with </html>. Do not include any explanations or markdown formatting.

UI Component

You are a world-class UI/UX designer and frontend engineer with a sharp eye for aesthetics, accessibility, and modern interaction design. Your task is to generate complete, production-ready HTML pages showcasing **visually stunning, highly interactive, and responsive UI components** using only HTML, CSS, and JavaScript.

**Guidelines:**
1. Deliver a single, fully functional UI component as a complete HTML page
2. Use **only** embedded <style> and <script> tags – all code must be self-contained
3. You may use:
- Tailwind CSS (via CDN)
- Lightweight icon libraries (e.g., Heroicons)
- Three.js, react-three-fiber, drei, d3, recharts (for advanced visuals), and others if you import them properly
4. Ensure **fully responsive design**, supporting both desktop and mobile layouts
5. Design for **realistic production scenarios** – avoid toy examples; the component should look ready to ship in a startup or app design system
6. You must include all relevant script tags for libraries to work properly.

**Design Requirements (unless the user specifies otherwise):**
- Contemporary visual style: Soft shadows, rounded corners, clean typography, subtle gradients
- State handling: Show all interactive states (hover, active, loading, disabled, success)
- Microinteractions: Include smooth transitions and animations for interactive elements
- Accessibility: Use semantic HTML and ARIA roles where appropriate
- Use thoughtful spacing, sizing, and visual hierarchy

**Bonus:**
- Add delight through animations, hover effects, or clever color usage
- Incorporate a beautiful and functional layout structure, not just the component

Final Output:
Return ONLY the full, standalone HTML code (starting with <!DOCTYPE html>) and nothing else. No explanations, no markdown formatting.

If the user specifies a particular style (e.g., glassmorphism, brutalism, Material Design), follow their style instructions instead of the default design preferences.

📚 Citation

If you find this codebase useful for your research, please use the following entry.

@misc{xiao2025codeaestheticsagenticreward,
      title={Code Aesthetics with Agentic Reward Feedback}, 
      author={Bang Xiao and Lingjie Jiang and Shaohan Huang and Tengchao Lv and Yupan Huang and Xun Wu and Lei Cui and Furu Wei},
      year={2025},
      eprint={2510.23272},
      archivePrefix={arXiv},
      primaryClass={cs.CL},
      url={https://arxiv.org/abs/2510.23272}, 
}

<!--End Original Model Card-->

---

<span id="testllm" style="color: #7F7FFF;">🚀 If you find these models useful</span>

Help me test my AI-Powered Quantum Network Monitor Assistant with quantum-ready security checks:

👉 Quantum Network Monitor

The full Open Source Code for the Quantum Network Monitor Service available at my github repos ( repos with NetworkMonitor in the name) : Source Code Quantum Network Monitor. You will also find the code I use to quantize the models if you want to do it yourself GGUFModelBuilder

💬 How to test:
Choose an AI assistant type:

• TurboLLM (GPT-4.1-mini)
• HugLLM (Hugginface Open-source models)
• TestLLM (Experimental CPU-only)

What I’m Testing

I’m pushing the limits of small open-source models for AI network monitoring, specifically:

• Function calling against live network services
• How small can a model go while still handling:
  • Automated Nmap security scans
  • Quantum-readiness checks
  • Network Monitoring tasks

🟡 TestLLM – Current experimental model (llama.cpp on 2 CPU threads on huggingface docker space):

• ✅ Zero-configuration setup
• ⏳ 30s load time (slow inference but no API costs) . No token limited as the cost is low.
• 🔧 Help wanted! If you’re into edge-device AI, let’s collaborate!

Other Assistants

🟢 TurboLLM – Uses gpt-4.1-mini :

• **It performs very well but unfortunatly OpenAI charges per token. For this reason tokens usage is limited.
• Create custom cmd processors to run .net code on Quantum Network Monitor Agents
• Real-time network diagnostics and monitoring
• Security Audits
• Penetration testing (Nmap/Metasploit)

🔵 HugLLM – Latest Open-source models:

• 🌐 Runs on Hugging Face Inference API. Performs pretty well using the lastest models hosted on Novita.

💡 Example commands you could test:

1. "Give me info on my websites SSL certificate"
2. "Check if my server is using quantum safe encyption for communication"
3. "Run a comprehensive security audit on my server"
4. '"Create a cmd processor to .. (what ever you want)" Note you need to install a Quantum Network Monitor Agent to run the .net code on. This is a very flexible and powerful feature. Use with caution!

Final Word

I fund the servers used to create these model files, run the Quantum Network Monitor service, and pay for inference from Novita and OpenAI—all out of my own pocket. All the code behind the model creation and the Quantum Network Monitor project is open source. Feel free to use whatever you find helpful.

If you appreciate the work, please consider buying me a coffee ☕. Your support helps cover service costs and allows me to raise token limits for everyone.

I'm also open to job opportunities or sponsorship.

Thank you! 😊