kadalicious22
/

snapgate-code-4B

@@ -16,60 +16,118 @@ language:
 pipeline_tag: image-text-to-text
 ---
-official website snapgate AI : www.snapgate.tech
-# snapgate-VL-4B
-**snapgate-VL-4B** adalah model vision-language multimodal hasil fine-tuning dari [Qwen/Qwen3-VL-4B-Instruct](https://huggingface.co/Qwen/Qwen3-VL-4B-Instruct) menggunakan metode **QLoRA**, yang dioptimalkan untuk domain **coding** dan **UI/UX design**.
-Model ini dikembangkan oleh **Snapgate** sebagai asisten AI multimodal yang mampu memahami gambar sekaligus teks, khususnya untuk kebutuhan developer dan desainer.
 ---
 ## 🧠 Kemampuan Utama
-- **Code Generation & Review** — Menulis, menganalisis, debug, dan mengoptimalkan kode (Python, JavaScript, TypeScript, 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
-- **Code from Image** — Membaca dan menjelaskan kode dari screenshot atau foto
-- **Technical Documentation** — Membuat dokumentasi teknis yang jelas dan terstruktur
-- **Bilingual** — Mendukung Bahasa Indonesia dan Inggris
 ---
-## 🔧 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%) |
-| Epochs | 3 |
-| Learning Rate | 1e-4 |
-| Batch Size | 1 (grad accum: 8) |
-| Optimizer | paged_adamw_8bit |
-| Precision | bfloat16 |
-| Hardware | NVIDIA T4 (Google Colab) |
 ---
 ## 🚀 Cara Penggunaan
-### Install Dependencies
 ```bash
 pip install transformers>=4.51.0 accelerate>=0.30.0 qwen-vl-utils
 ```
-### Inference dengan Gambar
 ```python
 from transformers import Qwen3VLForConditionalGeneration, AutoProcessor
-from qwen_vl_utils import process_vision_info
 import torch
 model_id = "kadalicious22/snapgate-VL-4B"
@@ -82,7 +140,14 @@ model = Qwen3VLForConditionalGeneration.from_pretrained(
     trust_remote_code=True,
 )
-SYSTEM_PROMPT = """Kamu adalah Snapgate AI, asisten AI multimodal milik Snapgate yang ahli dalam bidang coding dan design."""
 messages = [
     {"role": "system", "content": SYSTEM_PROMPT},
@@ -112,61 +177,56 @@ response = processor.batch_decode(generated, skip_special_tokens=True)[0]
 print(response)
 ```
-### Inference Teks Saja
 ```python
 messages = [
     {"role": "system", "content": SYSTEM_PROMPT},
-    {"role": "user", "content": "Buatkan fungsi Python untuk validasi email."},
 ]
 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)
-response = processor.batch_decode(output_ids[:, inputs["input_ids"].shape[1]:], skip_special_tokens=True)[0]
 print(response)
 ```
 ---
-## 📊 Training Loss
-| Step | Loss |
-|------|------|
-| 5    | 2.419 |
-| 10   | 2.132 |
-| 15   | 1.918 |
-| 20   | 1.736 |
-| 25   | 1.640 |
-| 30   | 1.663 |
-| 35   | 1.584 |
-Loss turun konsisten dari **2.42 → 1.58** selama training.
----
 ## ⚠️ Limitasi
-- Model di-training pada dataset internal Snapgate yang relatif kecil — performa akan meningkat seiring bertambahnya data training
-- Dioptimalkan untuk Bahasa Indonesia dan Inggris
-- Performa terbaik pada task coding dan analisis UI; kurang optimal untuk domain lain
 ---
 ## 📄 Lisensi
-Model ini mengikuti lisensi **Apache 2.0** sesuai dengan base model Qwen3-VL-4B-Instruct.
 ---
 ## 🔗 Links
-- 🌐 Website: [snapgate.tech](https://snapgate.tech)
-- 🤗 Base Model: [Qwen/Qwen3-VL-4B-Instruct](https://huggingface.co/Qwen/Qwen3-VL-4B-Instruct)
 ---
-*Dibuat dengan ❤️ oleh tim Snapgate*

 pipeline_tag: image-text-to-text
 ---
+<div align="center">
+<img src="https://snapgate.tech/logo.png" alt="Snapgate Logo" width="120"/>
+# 🌐 snapgate-VL-4B
+### Vision-Language AI · Fine-tuned for Coding & Design
+[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
+[![Base Model](https://img.shields.io/badge/Base-Qwen3--VL--4B-orange)](https://huggingface.co/Qwen/Qwen3-VL-4B-Instruct)
+[![Language](https://img.shields.io/badge/Language-ID%20%7C%20EN-green)](https://huggingface.co/kadalicious22/snapgate-VL-4B)
+[![Website](https://img.shields.io/badge/Website-snapgate.tech-purple)](https://snapgate.tech)
+**snapgate-VL-4B** adalah model vision-language multimodal hasil fine-tuning dari [Qwen3-VL-4B-Instruct](https://huggingface.co/Qwen/Qwen3-VL-4B-Instruct) menggunakan **QLoRA**, dioptimalkan khusus untuk kebutuhan **developer** dan **desainer** — memahami gambar sekaligus teks dengan presisi tinggi.
+*Dikembangkan oleh [Snapgate](https://snapgate.tech) · Made with ❤️ in Indonesia 🇮🇩*
+</div>
+---
+## ✨ Highlights
+- 🏆 Fine-tuned dari Qwen3-VL-4B dengan QLoRA 4-bit — efisien & powerful
+- 🎯 Dioptimalkan untuk coding dan UI/UX analysis
+- 🌏 Bilingual — Bahasa Indonesia & English
+- 💡 Hanya 0.74% parameter yang ditraining — training ringan, hasil maksimal
+- 📦 200 samples · 10 kategori · 3 epochs · Final loss: **0.444**
+- ⚡ Siap pakai di Google Colab dengan T4 GPU
 ---
 ## 🧠 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
+<details>
+<summary><b>Klik untuk lihat detail training</b></summary>
 | 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`
+</details>
+---
+## 📊 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
 ```bash
 pip install transformers>=4.51.0 accelerate>=0.30.0 qwen-vl-utils
 ```
+### 2. Load Model
 ```python
 from transformers import Qwen3VLForConditionalGeneration, AutoProcessor
 import torch
 model_id = "kadalicious22/snapgate-VL-4B"
     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
+```python
+from qwen_vl_utils import process_vision_info
 messages = [
     {"role": "system", "content": SYSTEM_PROMPT},
 print(response)
 ```
+### 4. Inference Teks Saja
 ```python
 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](https://huggingface.co/Qwen/Qwen3-VL-4B-Instruct).
 ---
 ## 🔗 Links
+| | |
+|---|---|
+| 🌐 Website | [snapgate.tech](https://snapgate.tech) |
+| 🤗 Base Model | [Qwen/Qwen3-VL-4B-Instruct](https://huggingface.co/Qwen/Qwen3-VL-4B-Instruct) |
+| 📧 Contact | Via website Snapgate |
 ---
+<div align="center">
+*Dibuat dengan ❤️ oleh tim **Snapgate** · Indonesia 🇮🇩*
+</div>