Fredithefish commited on
Commit
09efe5f
Β·
verified Β·
1 Parent(s): cebd6c3

Create README.md

Browse files
Files changed (1) hide show
  1. README.md +231 -0
README.md ADDED
@@ -0,0 +1,231 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ---
2
+ license: apache-2.0
3
+ language:
4
+ - en
5
+ base_model:
6
+ - Qwen/Qwen2.5-Coder-32B-Instruct
7
+ library_name: transformers
8
+ tags:
9
+ - code
10
+ - codeqwen
11
+ - chat
12
+ - qwen
13
+ - qwen-coder
14
+ - html
15
+ - javascript
16
+ - css
17
+ - tailwindcss
18
+ - frontend
19
+ - web-development
20
+ - ViCoder-html-32B-preview
21
+ - ViCoder-html
22
+ - ViCoder
23
+ - ViCoder-html-preview
24
+ - vichar ai labs
25
+ - vichar ai
26
+ - strive ai labs llp
27
+ - strive ai labs
28
+ - vichar.io
29
+ pipeline_tag: text-generation
30
+ ---
31
+
32
+ <p align="center">
33
+ <a href="https://vichar.io" target="_blank" rel="noopener noreferrer"> <!-- Link the logo -->
34
+ <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;"/>
35
+ </a>
36
+ <h1 align="center" style="color: #2E86C1; margin-top: 15px; margin-bottom: 5px;"> <!-- Added a subtle blue color -->
37
+ ViCoder-html-32B-preview
38
+ </h1>
39
+ </p>
40
+ <p align="center" style="font-size: 1.2em;">
41
+ <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 -->
42
+ </p>
43
+ <p align="center" style="font-size: 1.0em; color: #555;">
44
+ <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/>
45
+ <span style="font-size: 0.9em; color: #6c757d;">Licensed under Apache 2.0</span>
46
+ </p>
47
+
48
+ ---
49
+
50
+ ### <span style="color: #1ABC9C;">πŸ’‘ What is ViCoder-html-32B-preview?</span>
51
+
52
+ **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:
53
+
54
+ - 🧠 **HTML** for semantic structure
55
+ - 🎨 **Tailwind CSS** for modern, utility-first styling
56
+ - βš™οΈ **JavaScript** for interactivity and basic dynamic behavior
57
+
58
+ This model is ideal for:
59
+ - **Web Developers:** Quickly scaffolding dashboards or page layouts.
60
+ - **Frontend Engineers:** Prototyping UIs and exploring design variations.
61
+ - **Designers:** Turning textual mockups into initial code sketches.
62
+ - **Educators & Students:** Learning and experimenting with HTML, Tailwind CSS, and JavaScript in a practical context.
63
+
64
+ > ⚠️ **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>!
65
+
66
+ ---
67
+
68
+ ### <span style="color: #1ABC9C;">πŸ› οΈ Model Details</span>
69
+
70
+ | Property | Value |
71
+ | :--------------- | :------------------------------------------------------------------------------------------ |
72
+ | **Model Type** | Code Generation (Instruction-tuned Language Model) |
73
+ | **Base Model** | [Qwen/Qwen2.5-Coder-32B-Instruct](https://huggingface.co/Qwen/Qwen2.5-Coder-32B-Instruct) |
74
+ | **Developed by** | [Vichar AI](https://vichar.io) ([HF Profile](https://huggingface.co/VicharAI)) |
75
+ | **Languages** | Primarily HTML, Tailwind CSS, JavaScript. Understands English instructions. |
76
+ | **Training Data**| Proprietary curated dataset focusing on high-quality web components and pages. |
77
+ | **License** | [Apache 2.0](https://www.apache.org/licenses/LICENSE-2.0) |
78
+ | **Library** | πŸ€— Transformers |
79
+ | **Contact** | Visit [vichar.io](https://vichar.io) or use HF Discussions |
80
+
81
+ ---
82
+
83
+ ### <span style="color: #1ABC9C;">🧱 GGUF Quantized Versions</span>
84
+
85
+ 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/).
86
+
87
+ You can find them here:
88
+ - πŸ”— [GGUF Quantizations on Hugging Face](https://huggingface.co/VicharAI/ViCoder-html-32B-preview-GGUF)
89
+
90
+ 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.
91
+
92
+ ---
93
+
94
+ ### <span style="color: #1ABC9C;">⚑ Example Usage</span>
95
+
96
+ Use the `transformers` library pipeline for easy text generation. Ensure you have `transformers`, `torch`, and `accelerate` installed.
97
+
98
+ ```python
99
+ from transformers import AutoTokenizer, AutoModelForCausalLM, pipeline
100
+ import torch
101
+
102
+ # Define model ID
103
+ model_id = "VicharAI/ViCoder-html-32B-preview"
104
+
105
+ # Load tokenizer and model
106
+ # Use bfloat16 for faster inference if your GPU supports it
107
+ tokenizer = AutoTokenizer.from_pretrained(model_id)
108
+ model = AutoModelForCausalLM.from_pretrained(
109
+ model_id,
110
+ torch_dtype=torch.bfloat16, # Or torch.float16 if bfloat16 is not supported
111
+ device_map="auto" # Automatically distribute across available GPUs/CPU
112
+ )
113
+
114
+ messages = [
115
+ {"role": "user", "content": "A modern, sleek landing page for a company focusing on open-source LLM solutions"},
116
+ ]
117
+ inputs = tokenizer.apply_chat_template(
118
+ messages,
119
+ tokenize = True,
120
+ add_generation_prompt = True,
121
+ return_tensors = "pt",
122
+ ).to("cuda")
123
+
124
+ from transformers import TextStreamer
125
+ text_streamer = TextStreamer(tokenizer, skip_prompt = True)
126
+ _ = model.generate(input_ids = inputs, streamer = text_streamer, max_new_tokens = 16000,
127
+ use_cache = True, temperature = 0.7, min_p = 0.1, repetition_penalty=1.1)
128
+ ```
129
+
130
+ ---
131
+
132
+ ### <span style="color: #1ABC9C;">✨ Output Sample</span>
133
+
134
+
135
+ ```html
136
+ <!DOCTYPE html>
137
+ <html lang="en">
138
+ <head>
139
+ <meta charset="UTF-8">
140
+ <title>Our Love Story - Surprise Website</title>
141
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
142
+ <!-- Tailwind CSS CDN -->
143
+ <script src="https://cdn.tailwindcss.com"></script>
144
+ <style>
145
+ /* Custom animation classes */...
146
+ ```
147
+
148
+ *(**Note:** The model aims to generate complete HTML structures with Tailwind classes. Review and adapt generated code as needed.)*
149
+
150
+ ---
151
+
152
+ ### <span style="color: #1ABC9C;">πŸ§ͺ Evaluation & Limitations</span>
153
+
154
+ As a **preview** release, this model has undergone initial internal testing focused on:
155
+
156
+ - **Code Correctness:** Validity of generated HTML, Tailwind CSS classes, and basic JavaScript snippets.
157
+ - **Tailwind CSS Usage:** Adherence to Tailwind's utility-first principles and common patterns.
158
+ - **Component Structure:** Logical organization of HTML elements for typical web components.
159
+ - **Instruction Following:** Ability to understand and implement requirements from the prompt.
160
+
161
+ **Current Limitations:**
162
+
163
+ - **No Formal Benchmarks:** Not yet evaluated on standard code generation benchmarks (e.g., HumanEval-X, MBPP).
164
+ - **Complex Logic:** May struggle with complex JavaScript logic, state management, or intricate CSS beyond Tailwind utilities.
165
+ - **Hallucination Risk:** Like all LLMs, it can sometimes generate incorrect, incomplete, or non-optimal code. Always review the output.
166
+ - **Preview Status:** Not recommended for critical production use without thorough validation.
167
+
168
+ ---
169
+
170
+ ### <span style="color: #1ABC9C;">πŸ“ Roadmap</span>
171
+
172
+ 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:
173
+
174
+ - βœ… **ViCoder-html-32B-preview:** Initial public preview release (this model).
175
+ - ⏳ **ViCoder-html-32B (v1.0):** Planned production-ready release with improved training data, fine-tuning, and evaluation.
176
+ - πŸš€ **ViCoder-js-32B:** Future model focusing specifically on advanced JavaScript generation (frameworks, logic).
177
+ - 🐍 **ViCoder-python-32B:** Potential companion model for Python backend code generation.
178
+ - πŸ“Š **Benchmarking & Evaluation:** Formal evaluation on relevant code generation benchmarks.
179
+
180
+ Follow <a href="https://huggingface.co/VicharAI">VicharAI on Hugging Face</a> or check the [Vichar AI website](https://vichar.io) for announcements!
181
+
182
+ ---
183
+
184
+ ### <span style="color: #1ABC9C;">πŸ“„ License</span>
185
+
186
+ 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).
187
+
188
+ ---
189
+
190
+ ### <span style="color: #1ABC9C;">πŸ™ Citation</span>
191
+
192
+ If you use ViCoder-html-32B-preview in your projects, publications, or research, please cite it:
193
+
194
+ ```bibtex
195
+ @misc{vicharai_vicoder_html_32b_preview_2025,
196
+ title = {ViCoder-html-32B-preview: A Preview Model for HTML/Tailwind CSS/JavaScript Sketching},
197
+ author = {Vichar AI},
198
+ year = {2025},
199
+ publisher = {Hugging Face},
200
+ url = {https://huggingface.co/VicharAI/ViCoder-html-32B-preview},
201
+ url = {https://vichar.io}
202
+ }
203
+ ```
204
+
205
+ ---
206
+
207
+ ### <span style="color: #1ABC9C;">πŸ“¬ Get in Touch</span>
208
+
209
+ We welcome feedback, questions, and collaboration ideas!
210
+
211
+ - **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).
212
+ - **Website:** Visit us at [https://vichar.io](https://vichar.io) for more information about Vichar AI and the ViCoder project.
213
+ - **Contact:** Find direct contact methods on the [Vichar AI website](https://vichar.io).
214
+
215
+ ---
216
+
217
+ ### <span style="color: #1ABC9C;">🀝 Acknowledgments</span>
218
+
219
+ This project builds upon the incredible work of others:
220
+
221
+ - **SprykAI** for their support during model experimentation phases.
222
+ - 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.
223
+ - The **Hugging Face Team** for their platform and libraries (πŸ€— Transformers, Accelerate,TRL).
224
+ - The broader **open-source AI community** for continuous innovation and shared knowledge.
225
+ - Development efforts by the team at [Vichar AI](https://vichar.io).
226
+
227
+ ---
228
+
229
+ <p align="center" style="font-size: 1.1em; font-weight: bold; color: #2ECC71;"> <!-- Changed final line color -->
230
+ πŸ’₯ 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>! πŸ’₯
231
+ </p>