🚀 ViCoder-html-32B-preview
🚀 ViCoder-html-32B-previewは、Qwen2.5-Coder-32B-Instructをベースにした強力なHTML/CSS/JSスケッチモデルです。このモデルは、HTML、Tailwind CSS、JavaScriptを用いて、シングルページウェブサイトのスケッチを行うことができます。
🚀 クイックスタート
ViCoder-html-32B-previewは、Qwen2.5-Coder-32B-InstructをベースにしたHTML/CSS/JSスケッチモデルです。以下の手順で使用することができます。
必要なライブラリのインストール
pip install transformers torch accelerate
コードの実行
from transformers import AutoTokenizer, AutoModelForCausalLM, pipeline
import torch
model_id = "VicharAI/ViCoder-html-32B-preview"
tokenizer = AutoTokenizer.from_pretrained(model_id)
model = AutoModelForCausalLM.from_pretrained(
model_id,
torch_dtype=torch.bfloat16,
device_map="auto"
)
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)
✨ 主な機能
- 強力なコード生成能力：Qwen2.5-Coder-32B-Instructをベースにしているため、高品質なHTML、Tailwind CSS、JavaScriptコードを生成することができます。
- 多様な用途：ウェブ開発者、フロントエンドエンジニア、デザイナー、教育者、学生など、様々なユーザーに適しています。
- 効率的なローカル推論：GGUF形式の量子化バージョンが利用可能で、低メモリハードウェアでも実行できます。
📦 インストール
必要なライブラリをインストールすることで、ViCoder-html-32B-previewを使用することができます。
pip install transformers torch accelerate
💻 使用例
基本的な使用法
from transformers import AutoTokenizer, AutoModelForCausalLM, pipeline
import torch
model_id = "VicharAI/ViCoder-html-32B-preview"
tokenizer = AutoTokenizer.from_pretrained(model_id)
model = AutoModelForCausalLM.from_pretrained(
model_id,
torch_dtype=torch.bfloat16,
device_map="auto"
)
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)
高度な使用法
_ = model.generate(input_ids = inputs, streamer = text_streamer, max_new_tokens = 16000,
use_cache = True, temperature = 0.5, min_p = 0.1, repetition_penalty=1.1)
📚 ドキュメント
モデルの詳細
GGUF量子化バージョン
ViCoder-html-32B-previewのGGUF形式の量子化バージョンは、llama.cpp、LM Studio、またはOllamaを使用して、効率的なローカル推論を行うことができます。
出力サンプル
<!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">
<script src="https://cdn.tailwindcss.com"></script>
<style>
...
(注意: このモデルは、Tailwindクラスを含む完全なHTML構造を生成することを目的としています。生成されたコードは必要に応じてレビューし、調整してください。)
評価と制限
このモデルはプレビュー版であり、以下の点に焦点を当てた初期の内部テストを行っています。
- コードの正確性：生成されたHTML、Tailwind CSSクラス、および基本的なJavaScriptスニペットの有効性。
- Tailwind CSSの使用：Tailwindのユーティリティファーストの原則と一般的なパターンへの準拠。
- コンポーネント構造：典型的なウェブコンポーネントのHTML要素の論理的な組織。
- 命令の追従：プロンプトからの要件を理解し、実装する能力。
現在の制限事項：
- 正式なベンチマークなし：標準的なコード生成ベンチマーク（例：HumanEval-X、MBPP）でまだ評価されていません。
- 複雑なロジック：複雑なJavaScriptロジック、状態管理、またはTailwindユーティリティを超える複雑なCSSに苦労する可能性があります。
- 幻覚のリスク：すべてのLLMと同様に、時々誤った、不完全な、または最適でないコードを生成することがあります。常に出力をレビューしてください。
- プレビュー状態：十分な検証なしに重要な本番環境での使用はお勧めしません。
ロードマップ
ViCoderシリーズは、Vichar AIの進行中のプロジェクトです。現在のロードマップは以下の通りです。
- ✅ ViCoder-html-32B-preview：初期の公開プレビューリリース（このモデル）。
- ⏳ ViCoder-html-32B (v1.0)：改善された学習データ、微調整、および評価を備えた本番環境で使用可能なリリースが予定されています。
- 🚀 ViCoder-js-32B：将来的には、高度なJavaScript生成（フレームワーク、ロジック）に特化したモデル。
- 🐍 ViCoder-python-32B：Pythonバックエンドコード生成のための潜在的なコンパニオンモデル。
- 📊 ベンチマークと評価：関連するコード生成ベンチマークでの正式な評価。
📄 ライセンス
このモデルとそのコードは、Apache License 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}
}
📬 連絡方法
フィードバック、質問、および協力のアイデアを歓迎します！
🤝 謝辞
このプロジェクトは、他の素晴らしい人々の仕事に基づいています。
- SprykAI：モデルの実験段階での支援。
- アリババクラウドのQwenチーム：基盤となるQwen2.5-Coder-32B-Instructモデルの開発。
- Hugging Faceチーム：彼らのプラットフォームとライブラリ（🤗 Transformers、Accelerate、TRL）。
- より広いオープンソースAIコミュニティ：継続的な革新と共有知識。
- Vichar AIのチームによる開発努力。
⚠️ 重要提示
このモデルはプレビュー版です。本番環境での使用は、十分な検証を行ってから行ってください。
💡 使用建议
生成されたコードは必ずレビューし、必要に応じて調整してください。また、パラメータを調整することで、生成されるコードの品質を向上させることができます。
%20--%3e%3cdefs%3e%3cstyle%3e%20.st0%20{%20fill:%20%23061b40;%20}%20.st1%20{%20fill:%20%23306af1;%20}%20.st2%20{%20fill:%20%235ce5cf;%20}%20%3c/style%3e%3c/defs%3e%3cg%3e%3cpath%20class='st0'%20d='M55,10.5h9v3h-9v9h12V7.5h-12v3ZM64,19.5h-6v-3h6v3Z'/%3e%3cpolygon%20class='st0'%20points='69%2016.5%2078%2016.5%2078%2019.5%2069%2019.5%2069%2022.5%2081%2022.5%2081%2013.5%2072%2013.5%2072%2010.5%2081%2010.5%2081%207.5%2069%207.5%2069%2016.5'/%3e%3cpolygon%20class='st0'%20points='95%2010.5%2095%207.5%2083%207.5%2083%2022.5%2095%2022.5%2095%2019.5%2086%2019.5%2086%2016.5%2095%2016.5%2095%2013.5%2086%2013.5%2086%2010.5%2095%2010.5'/%3e%3cpath%20class='st0'%20d='M40,1.5v21h11.6l1.4-1.4v-7.6h0c0,0-1.4-1.5-1.4-1.5l1.4-1.4V2.9l-1.4-1.4h-11.6ZM50,19.5h-7v-6h7v6ZM50,10.5h-7v-6h7v6Z'/%3e%3c/g%3e%3cpath%20class='st1'%20d='M23.1,24L14.7,4.8l-4.9,11.2h3.8l-1.8,4H3.3L12.1,0H2C.9,0,0,.9,0,2v20c0,1.1.9,2,2,2h21.1Z'/%3e%3cpath%20class='st2'%20d='M34,0h-16.8l10.6,24h6.2c1.1,0,2-.9,2-2V2C36,.9,35.1,0,34,0ZM32.5,20h-4V4h4v16Z'/%3e%3c/svg%3e)
Transformers 複数言語対応