vicharai/ViCoder-html-32B-preview
<p align="center"> <a href="https://vichar.io" target="blank" rel="noopener noreferrer"> <!-- Link the logo --> <img src="https://vichar.s3.ap-south-1.amazonaws.com/vicoder-html-32B.png" width="450" height="200" alt="ViCoder-html-32B-preview Logo" style="display: block; margin-left: auto; margin-right: auto; border-radius: 15px;"/> </a> <h1 align="center" style="color: #2E86C1; margin-top: 15px; margin-bottom: 5px;"> <!-- Added a subtle blue color --> ViCoder-html-32B-preview </h1> </p> <p align="center" style="font-size: 1.2em;"> <b>🚀 A powerful HTML/CSS/JS sketching model powered by <a href="https://huggingface.co/Qwen/Qwen2.5-Coder-32B-Instruct" style="color: #5DADE2;">Qwen2.5-Coder-32B-Instruct</a> 🚀</b> <!-- Slightly lighter blue link --> </p> <p align="center" style="font-size: 1.0em; color: #555;"> <i>Developed by <a href="https://vichar.io" target="blank" rel="noopener noreferrer" style="color: #5DADE2;">Vichar AI</a> | <a href="https://huggingface.co/VicharAI" style="color: #5DADE2;">Hugging Face Profile</a></i><br/> <span style="font-size: 0.9em; color: #6c757d;">Licensed under Apache 2.0</span> </p>
<span style="color: #1ABC9C;">💡 What is ViCoder-html-32B-preview?</span>
ViCoder-html-32B-preview is a preview model in the ViCoder series from <a href="https://vichar.io" target="_blank" rel="noopener noreferrer">Vichar AI</a> — a line of models specialized in code generation. This model focuses specifically on sketching single-page websites, such as landing pages and dashboards, using using:
- 🧠 HTML for semantic structure
- 🎨 Tailwind CSS for modern, utility-first styling
- ⚙️ JavaScript for interactivity and basic dynamic behavior
This model is ideal for:
- Web Developers: Quickly scaffolding dashboards or page layouts.
- Frontend Engineers: Prototyping UIs and exploring design variations.
- Designers: Turning textual mockups into initial code sketches.
- Educators & Students: Learning and experimenting with HTML, Tailwind CSS, and JavaScript in a practical context.
⚠️ Note: This is a preview version. It demonstrates core capabilities but is still under active development. A more refined and robust production release is planned. Stay updated via <a href="https://vichar.io" target="_blank" rel="noopener noreferrer">vichar.io</a> or follow <a href="https://huggingface.co/VicharAI">VicharAI on Hugging Face</a>!
<span style="color: #1ABC9C;">🛠️ Model Details</span>
<span style="color: #1ABC9C;">🧱 GGUF Quantized Versions</span>
Quantized versions of ViCoder-html-32B-preview in GGUF format are available for efficient local inference using llama.cpp, LM Studio, or Ollama.
You can find them here:
These quantized variants (Q3KM, Q4KM, Q6K, Q80) are useful for running the model on lower-memory hardware or for embedding in desktop/web applications.
<span style="color: #1ABC9C;">⚡ Example Usage</span>
Use the transformers library pipeline for easy text generation. Ensure you have transformers, torch, and accelerate installed.
from transformers import AutoTokenizer, AutoModelForCausalLM, pipeline
import torch
# Define model ID
model_id = "VicharAI/ViCoder-html-32B-preview"
# Load tokenizer and model
# Use bfloat16 for faster inference if your GPU supports it
tokenizer = AutoTokenizer.from_pretrained(model_id)
model = AutoModelForCausalLM.from_pretrained(
model_id,
torch_dtype=torch.bfloat16, # Or torch.float16 if bfloat16 is not supported
device_map="auto" # Automatically distribute across available GPUs/CPU
)
messages = [
{"role": "user", "content": "A modern, sleek landing page for a company focusing on open-source LLM solutions"},
]
inputs = tokenizer.apply_chat_template(
messages,
tokenize = True,
add_generation_prompt = True,
return_tensors = "pt",
).to("cuda")
from transformers import TextStreamer
text_streamer = TextStreamer(tokenizer, skip_prompt = True)
_ = model.generate(input_ids = inputs, streamer = text_streamer, max_new_tokens = 16000,
use_cache = True, temperature = 0.7, min_p = 0.1, repetition_penalty=1.1)<span style="color: #1ABC9C;">✨ Output Sample</span>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Our Love Story - Surprise Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Custom animation classes */...(Note: The model aims to generate complete HTML structures with Tailwind classes. Review and adapt generated code as needed.)
<span style="color: #1ABC9C;">🧪 Evaluation & Limitations</span>
As a preview release, this model has undergone initial internal testing focused on:
- Code Correctness: Validity of generated HTML, Tailwind CSS classes, and basic JavaScript snippets.
- Tailwind CSS Usage: Adherence to Tailwind's utility-first principles and common patterns.
- Component Structure: Logical organization of HTML elements for typical web components.
- Instruction Following: Ability to understand and implement requirements from the prompt.
Current Limitations:
- No Formal Benchmarks: Not yet evaluated on standard code generation benchmarks (e.g., HumanEval-X, MBPP).
- Complex Logic: May struggle with complex JavaScript logic, state management, or intricate CSS beyond Tailwind utilities.
- Hallucination Risk: Like all LLMs, it can sometimes generate incorrect, incomplete, or non-optimal code. Always review the output.
- Preview Status: Not recommended for critical production use without thorough validation.
<span style="color: #1ABC9C;">📍 Roadmap</span>
The ViCoder series is an ongoing project at <a href="https://vichar.io" target="_blank" rel="noopener noreferrer">Vichar AI</a>. Our current roadmap includes:
- ✅ ViCoder-html-32B-preview: Initial public preview release (this model).
- ⏳ ViCoder-html-32B (v1.0): Planned production-ready release with improved training data, fine-tuning, and evaluation.
- 🚀 ViCoder-js-32B: Future model focusing specifically on advanced JavaScript generation (frameworks, logic).
- 🐍 ViCoder-python-32B: Potential companion model for Python backend code generation.
- 📊 Benchmarking & Evaluation: Formal evaluation on relevant code generation benchmarks.
Follow <a href="https://huggingface.co/VicharAI">VicharAI on Hugging Face</a> or check the Vichar AI website for announcements!
<span style="color: #1ABC9C;">📄 License</span>
This model and its code are licensed under the Apache License 2.0. You can find the full license text here.
<span style="color: #1ABC9C;">🙏 Citation</span>
If you use ViCoder-html-32B-preview in your projects, publications, or research, please cite it:
@misc{vicharai_vicoder_html_32b_preview_2025,
title = {ViCoder-html-32B-preview: A Preview Model for HTML/Tailwind CSS/JavaScript Sketching},
author = {Vichar AI},
year = {2025},
publisher = {Hugging Face},
url = {https://huggingface.co/VicharAI/ViCoder-html-32B-preview},
url = {https://vichar.io}
}<span style="color: #1ABC9C;">📬 Get in Touch</span>
We welcome feedback, questions, and collaboration ideas!
- Hugging Face: Open an issue or start a discussion on the model page's Community tab.
- Website: Visit us at https://vichar.io for more information about Vichar AI and the ViCoder project.
- Contact: Find direct contact methods on the Vichar AI website.
<span style="color: #1ABC9C;">🤝 Acknowledgments</span>
This project builds upon the incredible work of others:
- SprykAI for their support during model experimentation phases.
- The Qwen Team at Alibaba Cloud for developing the foundational Qwen2.5-Coder-32B-Instruct model.
- The Hugging Face Team for their platform and libraries (🤗 Transformers, Accelerate,TRL).
- The broader open-source AI community for continuous innovation and shared knowledge.
- Development efforts by the team at Vichar AI.
<p align="center" style="font-size: 1.1em; font-weight: bold; color: #2ECC71;"> <!-- Changed final line color --> 💥 This preview is just the start! Explore, build, and stay tuned for the full ViCoder suite from <a href="https://vichar.io" target="_blank" rel="noopener noreferrer" style="color: #27AE60;">Vichar AI</a>! 💥 </p>