ViCoder-html-32B-preview开源模型 - 免费快速生成单页网站代码草图

首页

Vicoder Html 32B Preview

由 vicharai 开发

ViCoder-html-32B预览版是由维查AI开发的专注于HTML/CSS/JS代码生成的预览模型，基于Qwen2.5-Coder-32B-Instruct微调，擅长快速生成单页网站代码草图。

大型语言模型

Transformers

支持多种语言开源协议:Apache-2.0 #Tailwind代码生成 #网页原型设计 #前端草图模型

下载量 36

发布时间 : 4/24/2025

模型简介

该模型专注于使用HTML、Tailwind CSS和JavaScript快速生成单页网站（如落地页和仪表盘）的代码草图，适合网页开发者和设计师快速原型设计。

模型特点

Tailwind CSS支持

专为Tailwind CSS优化，能够生成现代化、实用优先的样式代码

快速原型设计

能够根据简单描述快速生成完整的HTML页面结构

交互式元素生成

可以生成包含基本JavaScript交互功能的代码

多技术整合

同时处理HTML结构、Tailwind CSS样式和JavaScript逻辑

模型能力

HTML代码生成

Tailwind CSS样式生成

基础JavaScript功能实现

单页网站原型设计

响应式布局生成

使用案例

网页开发

落地页快速原型

根据产品描述快速生成营销落地页HTML代码

可在几分钟内获得可工作的页面原型

仪表盘设计

生成管理仪表盘的基本框架和UI组件

提供完整的HTML结构和Tailwind样式

教育

前端教学辅助

帮助学生理解HTML/CSS/JS的实际应用

即时生成可运行的代码示例

🚀 ViCoder-html-32B-preview

🚀 ViCoder-html-32B-preview 是一款强大的 HTML/CSS/JS 草图模型，由 Qwen2.5-Coder-32B-Instruct 提供支持，能够助力开发者快速搭建网页。

🚀 快速开始

使用 transformers 库的管道可以轻松实现文本生成。确保你已经安装了 transformers、torch 和 accelerate。

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)

✨ 主要特性

强大的代码生成能力：ViCoder-html-32B-preview 是 ViCoder 系列的预览模型，专注于单页网站的草图绘制，如着陆页和仪表盘。
多技术支持：使用 HTML 构建语义结构，Tailwind CSS 实现现代实用优先的样式，JavaScript 实现交互性和基本动态行为。
适用人群广泛：适用于网页开发者、前端工程师、设计师、教育工作者和学生等不同人群。

📦 模型详情

属性	详情
模型类型	代码生成（指令微调语言模型）
基础模型	Qwen/Qwen2.5-Coder-32B-Instruct
开发者	Vichar AI (Hugging Face 主页)
支持语言	主要为 HTML、Tailwind CSS、JavaScript，可理解英文指令
训练数据	专注于高质量网页组件和页面的专有精选数据集
许可证	Apache 2.0
库	🤗 Transformers
联系方式	访问 vichar.io 或使用 Hugging Face 讨论区

🔧 GGUF 量化版本

ViCoder-html-32B-preview 的 GGUF 格式量化版本可用于使用 llama.cpp、LM Studio 或 Ollama 进行高效的本地推理。

你可以在这里找到它们：

🔗 Hugging Face 上的 GGUF 量化版本

这些量化变体（Q3_K_M、Q4_K_M、Q6_K、Q8_0）适用于在低内存硬件上运行模型或嵌入桌面/网页应用程序。

💻 使用示例

基础用法

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)

输出示例

<!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 */...

⚠️ 重要提示

该模型旨在生成带有 Tailwind 类的完整 HTML 结构。请根据需要审查和调整生成的代码。

📚 评估与局限性

作为预览版本，该模型已进行了初步的内部测试，重点包括：

代码正确性：生成的 HTML、Tailwind CSS 类和基本 JavaScript 代码片段的有效性。
Tailwind CSS 使用：遵循 Tailwind 的实用优先原则和常见模式。
组件结构：典型网页组件的 HTML 元素的逻辑组织。
指令遵循：理解和实现提示中要求的能力。

当前局限性：

缺乏正式基准测试：尚未在标准代码生成基准测试（如 HumanEval-X、MBPP）上进行评估。
复杂逻辑处理能力有限：可能难以处理复杂的 JavaScript 逻辑、状态管理或超出 Tailwind 实用工具的复杂 CSS。
存在幻觉风险：与所有大语言模型一样，有时可能会生成不正确、不完整或非最优的代码。请始终审查输出。
预览状态：在没有彻底验证的情况下，不建议用于关键生产环境。

📍 路线图

ViCoder 系列是 Vichar AI 的一个持续项目。我们目前的路线图包括：

✅ ViCoder-html-32B-preview：初始公开预览版本（即本模型）。
⏳ ViCoder-html-32B (v1.0)：计划推出的生产就绪版本，将改进训练数据、微调方法和评估方式。
🚀 ViCoder-js-32B：未来专注于高级 JavaScript 生成（框架、逻辑）的模型。
🐍 ViCoder-python-32B：可能推出的用于 Python 后端代码生成的配套模型。
📊 基准测试与评估：在相关代码生成基准测试上进行正式评估。

请关注 Hugging Face 上的 VicharAI 或查看 Vichar AI 网站获取最新消息！

📄 许可证

该模型及其代码遵循 Apache 许可证 2.0。你可以在这里找到完整的许可证文本。

🙏 引用

如果你在项目、出版物或研究中使用了 ViCoder-html-32B-preview，请引用以下内容：

@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}
}