kadalicious22/snapgate-code-4B

🌐 snapgate-VL-4B

Vision-Language AI · Fine-tuned for Coding & Design

snapgate-code-4B adalah model vision-language multimodal hasil fine-tuning dari Qwen3-VL-4B-Instruct menggunakan QLoRA, dioptimalkan khusus untuk kebutuhan developer dan desainer — memahami gambar sekaligus teks dengan presisi tinggi.

Dikembangkan oleh Snapgate · Made with ❤️ in Indonesia 🇮🇩

---

🧠 Kemampuan Utama

Kemampuan	Deskripsi
💻 Code Generation & Review	Menulis, menganalisis, debug, dan mengoptimalkan kode (Python, JS, TS, HTML/CSS, SQL, dll.)
🎨 UI/UX Design Analysis	Menganalisis screenshot antarmuka, memberikan saran desain, mengidentifikasi masalah UX
🖼️ Design to Code	Mengkonversi mockup, wireframe, atau screenshot UI menjadi kode HTML/CSS/React/Tailwind
🏗️ Diagram & Architecture	Memahami diagram alur, arsitektur sistem, ERD, dan flowchart teknis
📸 Code from Image	Membaca dan menjelaskan kode dari screenshot atau foto
📝 Technical Documentation	Membuat dokumentasi teknis yang jelas, terstruktur, dan profesional

---

🔧 Training Configuration

Klik untuk lihat detail training

Parameter	Value
🤖 Base Model	Qwen/Qwen3-VL-4B-Instruct
⚙️ Method	QLoRA (4-bit NF4)
🔢 LoRA Rank	16
🔢 LoRA Alpha	32
🎯 Target Modules	q_proj, k_proj, v_proj, o_proj, gate_proj, up_proj, down_proj
🔢 Trainable Params	33,030,144 (0.74% of total)
🔄 Epochs	3
📶 Total Steps	75
📈 Learning Rate	1e-4
📦 Batch Size	1 (grad accumulation: 8)
⚡ Optimizer	paged_adamw_8bit
🎛️ Precision	bfloat16
🖥️ Hardware	NVIDIA T4 · Google Colab
📦 Dataset	200 samples internal Snapgate
🏷️ Kategori	10 kategori · 20 samples each
📊 Format	ShareGPT

Kategori Dataset: code_generation · code_review · debugging · refactoring · ui_html_css · ui_react · ui_tailwind · design_system · ux_analysis · design_to_code

---

📊 Training Progress

Loss turun konsisten selama training — dari 1.242 → 0.444 ✅

Step  5  │███░░░░░░░░░░░░░░░░░│  Loss: 1.242
Step 10  │██████░░░░░░░░░░░░░░│  Loss: 0.959
Step 15  │████████░░░░░░░░░░░░│  Loss: 0.808
Step 20  │██████████░░░░░░░░░░│  Loss: 0.671
Step 25  │████████████░░░░░░░░│  Loss: 0.544
Step 30  │████████████░░░░░░░░│  Loss: 0.561
Step 35  │█████████████░░░░░░░│  Loss: 0.513
Step 40  │█████████████░░░░░░░│  Loss: 0.469
Step 45  │██████████████░░░░░░│  Loss: 0.448
Step 50  │██████████████░░░░░░│  Loss: 0.465
Step 55  │██████████████░░░░░░│  Loss: 0.453
Step 60  │██████████████░░░░░░│  Loss: 0.465
Step 65  │██████████████░░░░░░│  Loss: 0.465
Step 70  │██████████████░░░░░░│  Loss: 0.450
Step 75  │██████████████░░░░░░│  Loss: 0.444

---

🚀 Cara Penggunaan

1. Install Dependencies

pip install transformers>=4.51.0 accelerate>=0.30.0 qwen-vl-utils

2. Load Model

from transformers import Qwen3VLForConditionalGeneration, AutoProcessor
import torch

model_id = "kadalicious22/snapgate-VL-4B"

processor = AutoProcessor.from_pretrained(model_id, trust_remote_code=True)
model = Qwen3VLForConditionalGeneration.from_pretrained(
    model_id,
    torch_dtype=torch.bfloat16,
    device_map="auto",
    trust_remote_code=True,
)

SYSTEM_PROMPT = """Kamu adalah Snapgate AI, asisten AI multimodal milik Snapgate \
yang ahli dalam bidang coding dan UI/UX design."""

3. Inference dengan Gambar

from qwen_vl_utils import process_vision_info

messages = [
    {"role": "system", "content": SYSTEM_PROMPT},
    {
        "role": "user",
        "content": [
            {"type": "image", "image": "path/to/your/image.png"},
            {"type": "text", "text": "Analisis UI dari gambar ini dan buat kode HTML/CSS-nya."},
        ],
    },
]

text = processor.apply_chat_template(messages, tokenize=False, add_generation_prompt=True)
image_inputs, video_inputs = process_vision_info(messages)
inputs = processor(
    text=[text],
    images=image_inputs,
    videos=video_inputs,
    return_tensors="pt",
).to(model.device)

with torch.no_grad():
    output_ids = model.generate(**inputs, max_new_tokens=1024, do_sample=False)

generated = output_ids[:, inputs["input_ids"].shape[1]:]
response = processor.batch_decode(generated, skip_special_tokens=True)[0]
print(response)

4. Inference Teks Saja

messages = [
    {"role": "system", "content": SYSTEM_PROMPT},
    {"role": "user", "content": "Buatkan fungsi Python untuk validasi email dengan regex."},
]

text = processor.apply_chat_template(messages, tokenize=False, add_generation_prompt=True)
inputs = processor(text=[text], return_tensors="pt").to(model.device)

with torch.no_grad():
    output_ids = model.generate(**inputs, max_new_tokens=1024, do_sample=False)

response = processor.batch_decode(
    output_ids[:, inputs["input_ids"].shape[1]:],
    skip_special_tokens=True
)[0]
print(response)

---

⚠️ Limitasi

• 📦 Di-training pada dataset internal Snapgate yang relatif kecil (200 samples) — performa akan terus meningkat seiring penambahan data
• 🌏 Dioptimalkan untuk Bahasa Indonesia dan Inggris; bahasa lain belum diuji
• 🎯 Performa terbaik pada task coding dan UI analysis; kurang optimal untuk domain di luar itu (misal: sains, hukum, medis)
• 🖥️ Direkomendasikan minimal GPU dengan 8GB VRAM untuk inference yang nyaman

---

📄 Lisensi

Dirilis di bawah lisensi Apache 2.0, mengikuti lisensi base model Qwen3-VL-4B-Instruct.

---

🔗 Links

🌐 Website	snapgate.tech
🤗 Base Model	Qwen/Qwen3-VL-4B-Instruct
📧 Contact	Via website Snapgate

---