DevStudio-Coder-1.5B

An in-editor, low-latency coding assistant specialized strictly in generating and refactoring modern, responsive single-file HTML + Tailwind CSS templates.

DevStudio-Coder-1.5B is a parameter-efficient fine-tune (QLoRA SFT) of the Qwen2.5-Coder-1.5B-Instruct base model. It is optimized to run locally on consumer hardware to power the AI sidebar and inline layout commands within the DevStudio IDE.

• GitHub Workspace Subfolder: DEVSTUDIO-CODER-1.5B
• Hugging Face Hub Repository: DevStudio-AI/Devstudio-Coder-1.5B

📂 Project Directory Structure

DEVSTUDIO-CODER-1.5B/
│
├── configs/
│   ├── train.yaml              # Hyperparameters and dataset loading parameters
│   └── lora.yaml               # Adapter configuration parameters (r, alpha, modules)
│
├── data/
│   ├── train.jsonl             # Core training data (approx. 160 records)
│   ├── validation.jsonl        # Validation data (approx. 20 records)
│   └── test.jsonl              # Test set (approx. 20 records)
│
├── models/
│   ├── base/                   # Cached unquantized baseline model shards
│   ├── checkpoints/            # Intermediate training checkpoint directories
│   │   ├── checkpoint-50/      # Saved epoch-2 state
│   │   └── checkpoint-75/      # Saved epoch-3 state
│   ├── final/                  # Raw lightweight final adapter output
│   └── final_merged_model/     # Standalone fused 16-bit model weights
│
├── outputs/
│   └── predictions.json        # Test-set generation logs (prompts vs outputs)
│
└── scripts/
    ├── download_base_model.py  # Pulls flat baseline weights from HF Hub
    ├── load_initial_data.py    # Populates core identity and persona boundaries
    ├── scrape_flowbite.py      # Parses markdown elements from Flowbite Git
    ├── deduplicate.py          # Cleans exact conversational duplicates
    ├── split_dataset.py        # Randomly partitions data into 80/10/10 splits
    ├── train.py                # Main QLoRA SFT training controller
    ├── merge_lora.py           # Fuses base weights with trained adapters
    ├── evaluate.py             # Computes metrics and outputs evaluation logs
    └── compare.py              # Side-by-side terminal comparison arena

⚙️ Fine-Tuning Specifications & Hyperparameters

The model was adapted using QLoRA in 4-bit NormalFloat4 (NF4) precision, allowing training to complete with under 6 GB of VRAM.

LoRA Hyperparameters (configs/lora.yaml):

• Rank ($r$): 16
• Alpha ($\alpha$): 32 (Scaling factor)
• Dropout: 0.05
• Target Modules: ["q_proj", "k_proj", "v_proj", "o_proj", "gate_proj", "up_proj", "down_proj"] (Full-module target configuration)

SFT Trainer Settings (configs/train.yaml):

• Learning Rate: 2e-4
• Batch Size: 2 (With gradient_accumulation_steps=4 to simulate an effective batch of 8)
• Max Sequence Length: 2048 (Sufficient budget to fit detailed HTML documents)
• Epochs: 3 (Total of 75 global steps)
• Optimizer: paged_adamw_8bit (Conserves System RAM)

🏋️ Environment Setup and Execution

1. Installation

Clone the repository and install the fine-tuning dependencies:

git clone https://github.com/Raahim2/DevStudio.git
cd DevStudio/DEVSTUDIO-CODER-1.5B
pip uninstall -y torchao
pip install -r requirements.txt

2. Prepare the Data & Base Weights

Create the dataset splits and fetch the baseline weights:

# 1. Download flat baseline model weights
python scripts/download_base_model.py

# 2. Scrape Tailwind templates from Flowbite's LLM database
python scripts/scrape_flowbite.py

# 3. Append core identity and alignment queries
python scripts/load_initial_data.py

# 4. Clean out exact duplicates and partition splits (80/10/10)
python scripts/deduplicate.py
python scripts/split_dataset.py

3. Run the SFT Training

Kick off the training run. The script automatically monitors for saved checkpoints under models/checkpoints/ and resumes from the last step if interrupted:

python scripts/train.py

4. Merge weights

Consolidate your adapters with the base model to output a standalone unquantized directory:

python scripts/merge_lora.py

📊 Benchmarks & Qualitative Comparisons

The fine-tuning process evaluated the model on a test set (unseen during training) of responsive layouts.

Metric Overview

• Training Loss: 0.254 (Epoch 3)
• Validation Loss: 0.194
• Mean Token Accuracy: 95.07% (Extremely precise Tailwind utility class syntax prediction)

Side-by-Side Code Gen Evaluation (Widescreen Footer Sample)

The following comparison illustrates how SFT training transformed the model's structural design, syntax, and error correction compared to the raw ground-truth dataset:

Expected Code (Ground Truth)

<footer class="fixed bottom-0 left-0 z-20 w-full p-4 bg-neutral-primary-soft border-t border-default shadow-sm md:flex md:items-center md:justify-between md:p-6">
  <!-- Double-encoded corrupted characters from web crawling (Mojibake) -->
  <span class="text-sm text-body sm:text-center">© 2023 <a href="https://flowbite.com/" class="hover:underline">Flowbite™</a>. All Rights Reserved.</span>
  <ul class="flex flex-wrap items-center mt-3 text-sm font-medium text-body sm:mt-0">
    <!-- Links... -->
  </ul>
</footer>

DevStudio-1.5B Output (Predicted Code)

<footer class="fixed bottom-0 z-0 start-0 end-0 p-4 bg-neutral-primary-soft border-t border-default">
  <!-- Responsive inner wrapper container for ultra-wide screen constraints -->
  <div class="flex items-center max-w-screen-xl mx-auto">
    <!-- Auto-healed Unicode encoding artifacts -->
    <span class="text-sm text-body sm:text-center">© 2023 <a href="https://flowbite.com/" class="hover:underline">Flowbite™. All Rights Reserved.</a></span>
    <ul class="flex flex-col font-medium text-body space-y-2 rtl:space-y-reverse mt-4 sm:flex-row sm:mt-0 sm:text-sm">
      <!-- Links... -->
    </ul>
  </div>
</footer>

Analysis of Fine-Tuned Improvements:

1. Unicode Healing: The scraped ground-truth dataset suffered from double-encoded UTF-8 errors (© and Flowbiteâ„¢). DevStudio-1.5B automatically recognized and corrected these into clean unicode symbols (© and ™).
2. Logical CSS Properties: The model replaced legacy absolute positioning (left-0 w-full) with modern logical positioning (start-0 end-0), natively supporting Right-to-Left (RTL) localization.
3. Responsive Widescreen Container: The model nested an inner container (max-w-screen-xl mx-auto) inside the fixed footer to prevent content from stretching to the extreme screen edges on widescreen desktop monitors.

🛠️ Local IDE Deployment (GGUF & Ollama)

To run the model locally inside your editor with low latency, convert your merged standalone folder (models/final_merged/) into a GGUF file:

1. Prepare llama.cpp tools:

   git clone https://github.com/ggerganov/llama.cpp.git
   pip install -r llama.cpp/requirements.txt
   

2. Quantize weights to 8-bit GGUF format:

   python llama.cpp/convert_hf_to_gguf.py ./models/final_merged/ \
       --outfile ./models/qwen-devstudio-1.5b.gguf \
       --outtype q8_0
   

3. Load into Ollama: Create a local file named Modelfile in the root folder:

   FROM ./models/qwen-devstudio-1.5b.gguf
   TEMPLATE "{{ if .System }}<|im_start|>system\n{{ .System }}<|im_end|>\n{{ end }}{{ if .Prompt }}<|im_start|>user\n{{ .Prompt }}<|im_end|>\n{{ end }}<|im_start|>assistant\n{{ .Response }}<|im_end|>"
   PARAMETER stop "<|im_start|>"
   PARAMETER stop "<|im_end|>"
   

   Compile your local runtime model:

   ollama create devstudio-1.5b -f Modelfile
   

You can now direct your DevStudio IDE's completion and sidebar integrations to query devstudio-1.5b over localhost:11434 for rapid, zero-preamble, single-file HTML + Tailwind CSS code generation.