Text Generation
Transformers
Safetensors
English
qwen2
code
codeqwen
chat
qwen
qwen-coder
html
javascript
css
tailwindcss
frontend
web-development
ViCoder-html-32B-preview
ViCoder-html
ViCoder
ViCoder-html-preview
vichar ai labs
vichar ai
strive ai labs llp
strive ai labs
vichar.io
conversational
text-generation-inference
| license: apache-2.0 | |
| language: | |
| - en | |
| base_model: | |
| - Qwen/Qwen2.5-Coder-32B-Instruct | |
| library_name: transformers | |
| tags: | |
| - code | |
| - codeqwen | |
| - chat | |
| - qwen | |
| - qwen-coder | |
| - html | |
| - javascript | |
| - css | |
| - tailwindcss | |
| - frontend | |
| - web-development | |
| - ViCoder-html-32B-preview | |
| - ViCoder-html | |
| - ViCoder | |
| - ViCoder-html-preview | |
| - vichar ai labs | |
| - vichar ai | |
| - strive ai labs llp | |
| - strive ai labs | |
| - vichar.io | |
| pipeline_tag: text-generation | |
| <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> | |
| | Property | Value | | |
| | :--------------- | :------------------------------------------------------------------------------------------ | | |
| | **Model Type** | Code Generation (Instruction-tuned Language Model) | | |
| | **Base Model** | [Qwen/Qwen2.5-Coder-32B-Instruct](https://huggingface.co/Qwen/Qwen2.5-Coder-32B-Instruct) | | |
| | **Developed by** | [Vichar AI](https://vichar.io) ([HF Profile](https://huggingface.co/VicharAI)) | | |
| | **Languages** | Primarily HTML, Tailwind CSS, JavaScript. Understands English instructions. | | |
| | **Training Data**| Proprietary curated dataset focusing on high-quality web components and pages. | | |
| | **License** | [Apache 2.0](https://www.apache.org/licenses/LICENSE-2.0) | | |
| | **Library** | 🤗 Transformers | | |
| | **Contact** | Visit [vichar.io](https://vichar.io) or use HF Discussions | | |
| --- | |
| ### <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](https://github.com/ggerganov/llama.cpp), [LM Studio](https://lmstudio.ai/), or [Ollama](https://ollama.com/). | |
| You can find them here: | |
| - 🔗 [GGUF Quantizations on Hugging Face](https://huggingface.co/VicharAI/ViCoder-html-32B-preview-GGUF) | |
| These quantized variants (Q3_K_M, Q4_K_M, Q6_K, Q8_0) 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. | |
| ```python | |
| 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> | |
| ```html | |
| <!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](https://vichar.io) 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](https://www.apache.org/licenses/LICENSE-2.0). | |
| --- | |
| ### <span style="color: #1ABC9C;">🙏 Citation</span> | |
| If you use ViCoder-html-32B-preview in your projects, publications, or research, please cite it: | |
| ```bibtex | |
| @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](https://huggingface.co/VicharAI/ViCoder-html-32B-preview/discussions). | |
| - **Website:** Visit us at [https://vichar.io](https://vichar.io) for more information about Vichar AI and the ViCoder project. | |
| - **Contact:** Find direct contact methods on the [Vichar AI website](https://vichar.io). | |
| --- | |
| ### <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](https://huggingface.co/Qwen/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](https://vichar.io). | |
| --- | |
| <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> |