STARK-WEB-12B-v1.7

<div style="background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); padding: 32px 20px; border-radius: 12px; margin-bottom: 24px; text-align: center; color: white; box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);"> <h1 style="color: white; margin: 0; font-size: 2.6em; font-weight: 800; letter-spacing: 1.5px; border-bottom: none; text-shadow: 0 2px 4px rgba(0,0,0,0.2);">⚡ STARK-WEB-12B v1.7</h1> <p style="margin: 8px 0 20px 0; opacity: 0.95; font-size: 1.15em; font-weight: 500; text-shadow: 0 1px 2px rgba(0,0,0,0.15);">The Premium Open-Source AI UI/UX Designer & Frontend Engineer</p> <!-- Badges --> <div style="display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;"> <a href="https://github.com/huggingface/transformers"><img src="https://img.shields.io/badge/Library-Transformers-blue?style=flat-square&logo=huggingface" alt="Transformers"></a> <a href="https://opensource.org/licenses/Apache-2.0"><img src="https://img.shields.io/badge/License-Apache_2.0-green?style=flat-square" alt="License"></a> <img src="https://img.shields.io/badge/Size-12B_Params-orange?style=flat-square" alt="Size"> <img src="https://img.shields.io/badge/Dataset-~16M_Tokens-purple?style=flat-square" alt="Dataset"> <img src="https://img.shields.io/badge/Optimization-LoRA-red?style=flat-square" alt="Optimization"> </div> </div>

⚡ Looking for local execution? The repository you are currently viewing contains the unquantized raw Safetensors weights. If you are looking to run this model locally via LM Studio, llama.cpp, or Ollama, Click here to visit the quantized GGUF repository (STARK-WEB-12B-v1.7-gguf).

---

🔍 Overview & Methodology

STARK-WEB-12B v1.7 is an advanced, highly specialized model fine-tuned on the Gemma 4 12B architecture. Engineered to act as a premium UI/UX designer and frontend developer, this model bridges the gap between raw code generation and artistic web design.

The training methodology behind STARK-WEB focuses on high-quality, synthetic web generation tasks derived from state-of-the-art models. The current iteration was fine-tuned on a heavily curated dataset comprising approximately 16 million tokens. This vast expansion from previous versions has drastically reduced overfitting and improved logical coherence in complex tasks.

Unlike standard coding assistants that output plain layouts, STARK-WEB-12B relies on a custom 9-step Chain-of-Thought (CoT) reasoning process. This explicit thinking phase allows the model to conceptualize physics, map custom color variables, and plan grid architectures before writing any code. The result is visually breathtaking interfaces featuring fluid transitions, advanced HSL color dynamics, glassmorphism, and highly robust logic.

---

📊 Technical Specifications

<div style="margin: 20px 0;"> <table style="width: 100%; border-collapse: collapse;"> <thead> <tr style="background-color: rgba(59, 130, 246, 0.1);"> <th style="padding: 10px; border: 1px solid #d1d5db; text-align: left;">Feature</th> <th style="padding: 10px; border: 1px solid #d1d5db; text-align: left;">Technical Details</th> </tr> </thead> <tbody> <tr> <td style="padding: 10px; border: 1px solid #d1d5db; font-weight: bold;">🧠 Base Architecture</td> <td style="padding: 10px; border: 1px solid #d1d5db;">Gemma 4 12B (via <code>google/gemma-4-12b-it</code>)</td> </tr> <tr> <td style="padding: 10px; border: 1px solid #d1d5db; font-weight: bold;">📈 Dataset Volume</td> <td style="padding: 10px; border: 1px solid #d1d5db;"><b>~16 Million Tokens</b> (highly-complex refined web app & game logic)</td> </tr> <tr> <td style="padding: 10px; border: 1px solid #d1d5db; font-weight: bold;">🎯 Target Capabilities</td> <td style="padding: 10px; border: 1px solid #d1d5db;">Single-file dashboards, canvas games, responsive tools, fluid animations</td> </tr> <tr> <td style="padding: 10px; border: 1px solid #d1d5db; font-weight: bold;">💾 Fine-Tuning Setup</td> <td style="padding: 10px; border: 1px solid #d1d5db;">LoRA (r=64, alpha=128) on RTX 5060 Ti 16GB</td> </tr> <tr> <td style="padding: 10px; border: 1px solid #d1d5db; font-weight: bold;">🌍 Language Support</td> <td style="padding: 10px; border: 1px solid #d1d5db;">~90% English, ~10% Polish (fully bilingual comprehension)</td> </tr> </tbody> </table> </div>

---

🛡️ Structured Chain-of-Thought (CoT) Workflow

To resolve logical hallucinations and infinite loops, STARK-WEB-12B v1.7 is constrained to reason through a strict 9-step algorithmic roadmap. This enforces cognitive staging, pushing the model to outline logic before generating syntax.

<div style="border: 1px solid #e5e7eb; border-left: 4px solid #3b82f6; padding: 16px; border-radius: 8px; margin: 20px 0; background-color: rgba(59, 130, 246, 0.02);"> <h3 style="margin-top: 0; color: #1e3a8a; display: flex; align-items: center; gap: 8px;"> <span>⚙️</span> The 9 Reasoning Stages </h3> <ol style="line-height: 1.6; padding-left: 20px; margin-bottom: 0;"> <li><b>Understand the Goal:</b> Analyze request scope, interface goals, and overall user flow.</li> <li><b>Inputs:</b> Map variables, event triggers, user inputs, and storage needs.</li> <li><b>Output:</b> Establish DOM results, target screens, and state resets.</li> <li><b>Identify Key Constraints & Technologies:</b> Lock down browser APIs, grid constraints, and physics bounds.</li> <li><b>Design the HTML Structure:</b> Plan semantic tag hierarchies and container distributions.</li> <li><b>Design the CSS:</b> Map custom color variables (HSL), responsive layouts, transitions, and glow shadows.</li> <li><b>Design the JavaScript:</b> Lay out event handlers, physics intervals, and rendering cycles.</li> <li><b>Refinement & Implementation:</b> Synthesize code cleanups, performance tweaks, and responsiveness.</li> <li><b>Final Review:</b> Final validation checklist (errors, edge-case safety, formatting).</li> </ol> </div>

The thinking process executes exactly between the <|channel>thought and <channel|> tags.

---

⚠️ Limitations & Client Integration

<div style="border: 1px solid #f59e0b; border-left: 4px solid #f59e0b; padding: 16px; border-radius: 8px; margin: 20px 0; background-color: rgba(245, 158, 11, 0.03);"> <h3 style="margin-top: 0; color: #b45309; display: flex; align-items: center; gap: 8px;"> <span>🛠️</span> Known Limitations & Bug Fixing </h3> <p>While version 1.7 represents a massive leap forward, <b>it unfortunately may still make logical errors or typos that can break code rendering</b>. Generating complex HTML, CSS, and JS simultaneously in a single shot remains a significant challenge for 12B parameter models.</p> <p>If your application renders as a blank screen or has broken handlers, simply feed the code back into the model with the prompt: <i>"Review the generated code above. Identify any rendering or logical errors, and output a corrected version."</i></p> </div> <div style="border: 1px solid #ef4444; border-left: 4px solid #ef4444; padding: 16px; border-radius: 8px; margin: 20px 0; background-color: rgba(239, 68, 68, 0.03);"> <h3 style="margin-top: 0; color: #991b1b; display: flex; align-items: center; gap: 8px;"> <span>❌</span> IDE & OpenCode Compatibility </h3> <p>Please note that this version (v1.7) is heavily specialized for single-shot, web-based prototyping and utilizes custom reasoning tags (<code>&lt;|channel&gt;thought</code>). <b>It is currently NOT natively compatible with standard IDE plugins, AI assistants, or OpenCode ecosystems.</b> These integrations often fail to properly parse or hide the custom thinking blocks, resulting in raw tag output in your editor.</p> </div>

---

🚀 How to Use (Transformers)

The model is published in the secure safetensors format. It uses the standard Gemma format (<|turn|>) and is designed to run with an empty system prompt.

<details> <summary><b>💻 Click to expand Python Inference Snippet</b></summary> <br>

from transformers import AutoTokenizer, AutoModelForCausalLM

tokenizer = AutoTokenizer.from_pretrained("Situus/STARK-WEB-12B-v1.7")
model = AutoModelForCausalLM.from_pretrained("Situus/STARK-WEB-12B-v1.7", device_map="auto", torch_dtype="auto")

messages = [
    {"role": "user", "content": "Write a fully functional Canvas snake game in a single HTML file."}
]

prompt = tokenizer.apply_chat_template(messages, tokenize=False, add_generation_prompt=True)
inputs = tokenizer(prompt, return_tensors="pt").to("cuda")

outputs = model.generate(**inputs, max_new_tokens=4096, temperature=0.7)
print(tokenizer.decode(outputs[0], skip_special_tokens=False))

</details>

---

🔮 Future Roadmap: STARK-WEB v2-agentic

While v1.7 sets a strong foundation for single-file web prototyping, we are already hard at work on STARK-WEB v2-agentic.

The upcoming generation will feature:

• Full IDE & OpenCode Compatibility: Native support for seamless integration into your favorite code editors without reasoning tag leakage.
• Wider Scope: Moving beyond single-file applications to support multi-file React, Vue, and Node.js architectures.
• Advanced Graphics: Native training support for 3D games, Three.js, and WebGL experiences.

Stay tuned!

---

📜 Citation & License

This model is open-sourced under the Apache 2.0 license.

@misc{situus2026starkweb,
  author = {Situus},
  title = {STARK-WEB-12B v1.7: Optimizing Open Source Large Language Models for Structured Web Application Synthesis},
  year = {2026},
  publisher = {Hugging Face},
  journal = {Hugging Face Model Hub}
}