saadxsalman
/

Liquid-WebSight

@@ -1,21 +1,132 @@
 ---
-base_model: LiquidAI/LFM2.5-VL-450M
-tags:
-- text-generation-inference
-- transformers
-- unsloth
-- lfm2_vl
-license: apache-2.0
 language:
 - en
 ---
-# Uploaded finetuned  model
-- **Developed by:** saadxsalman
-- **License:** apache-2.0
-- **Finetuned from model :** LiquidAI/LFM2.5-VL-450M
-This lfm2_vl model was trained 2x faster with [Unsloth](https://github.com/unslothai/unsloth) and Huggingface's TRL library.
-[<img src="https://raw.githubusercontent.com/unslothai/unsloth/main/images/unsloth%20made%20with%20love.png" width="200"/>](https://github.com/unslothai/unsloth)

 ---
 language:
 - en
+license: apache-2.0
+base_model: LiquidAI/LFM-2.5-450M-Instruct
+tags:
+- vision-language
+- image-to-code
+- tailwind-css
+- web-development
+- unsloth
+- liquid-foundation-model
+model_name: Liquid-Web (LFM2.5-VL-450M-WebSight)
+datasets:
+- HuggingFaceM4/WebSight
 ---
+# Model Card: Liquid-Web (LFM2.5-VL-450M-WebSight)
+## Model Details
+* **Model Type:** Vision-Language Model (VLM)
+* **Base Model:** LiquidAI/LFM2.5-VL-450M
+* **Architecture:** Liquid Foundation Model (LFM) with SigLIP2 Vision Encoder.
+* **Fine-tuning Method:** LoRA (Low-Rank Adaptation)
+* **Task:** Image-to-HTML/Tailwind CSS Generation (UI-to-Code)
+* **Language:** English
+* **License:** Apache 2.0 (Inherited from base)
+## Intended Use
+### Primary Use Case
+This model is designed to take screenshots of web pages as input and generate the corresponding HTML code using Tailwind CSS utilities. It is intended for developers looking to automate the conversion of UI designs or existing web pages into clean, functional code.
+### Out-of-Scope Use
+* General-purpose image captioning (it is highly specialized for code).
+* Generating scripts for malicious web automation.
+* Production-ready code without human review (the model may hallucinate specific color shades or precise pixel alignments).
+## Training Data
+The model was fine-tuned on the **HuggingFaceM4/WebSight (v0.2)** dataset.
+* **Format:** Paired images (screenshots) and text (HTML + Tailwind CSS).
+* **Volume:** 1,000 high-quality samples (fine-tuned subset).
+* **Content:** Diverse layouts including landing pages, dashboards, and portfolio sites.
+## Training Procedure
+### Hyperparameters
+| Parameter | Value |
+| :--- | :--- |
+| LoRA Rank (r) | 64 |
+| LoRA Alpha | 64 |
+| Optimizer | AdamW (8-bit) |
+| Learning Rate | 2e-4 |
+| Batch Size | 1 (Per device) |
+| Gradient Accumulation | 8 |
+| Max Steps | 100 |
+| Precision | 4-bit Quantization (NormalFloat4) |
+**Frameworks Used:**
+* **Unsloth:** For memory-efficient training and fast kernels.
+* **TRL & PEFT:** For the Supervised Fine-Tuning (SFT) loop.
+## Performance & Limitations
+### Strengths
+* **Extreme Efficiency:** At only 450M parameters, this model provides high-speed inference on edge devices (Jetson Orin, Mobile).
+* **Modern CSS:** Specifically trained on Tailwind CSS v2.2+, avoiding bloated traditional CSS files.
+### Limitations
+* **Hallucinations:** The model may occasionally invent Tailwind classes that do not exist (e.g., `text-custom-500`).
+* **Complexity:** Very deep or complex nested layouts might result in truncated HTML due to the `max_seq_length` limit.
+* **Resolution:** Fine details in very small text within screenshots may be missed by the vision encoder.
+## Example Output: User Signup Component
+**Input Image:** A screenshot of a magenta-themed signup form.
+**Generated Code:**
+```html
+<body class="bg-pink-600 flex justify-center items-center h-screen">
+  <div class="bg-white p-8 rounded-lg shadow-xl w-full max-w-md text-center">
+    <h1 class="text-3xl font-semibold text-gray-800 mb-6">SignUp Form</h1>
+    <div class="space-y-4">
+      <div class="flex items-center border rounded p-2">
+        <span class="px-2 text-gray-500">👤</span>
+        <input type="text" placeholder="Enter Username" class="w-full outline-none">
+      </div>
+      <div class="flex items-center border rounded p-2">
+        <span class="px-2 text-gray-500">✉️</span>
+        <input type="email" placeholder="Enter Email" class="w-full outline-none">
+      </div>
+      <div class="flex items-center border rounded p-2">
+        <span class="px-2 text-gray-500">🔒</span>
+        <input type="password" placeholder="Create Password" class="w-full outline-none">
+      </div>
+      <div class="flex items-center border rounded p-2">
+        <span class="px-2 text-gray-500">🔒</span>
+        <input type="password" placeholder="Retype Password" class="w-full outline-none">
+      </div>
+    </div>
+    <button class="w-full bg-purple-700 text-white mt-6 py-2 rounded hover:bg-purple-800 transition">
+      SignUp
+    </button>
+  </div>
+</body>
+```
+## How to Get Started
+To use this model for inference, use the following code snippet:
+```python
+from unsloth import FastLanguageModel
+from transformers import AutoProcessor
+from PIL import Image
+model, tokenizer = FastLanguageModel.from_pretrained("saadxsalman/LFM-WebSight-Tailwind", load_in_4bit=True)
+processor = AutoProcessor.from_pretrained("saadxsalman/LFM-WebSight-Tailwind")
+# Inference logic goes here
+```
+## Citation
+If you use this model, please cite the original WebSight technical report:
+```bibtex
+@misc{laurençon2024unlocking,
+      title={Unlocking the conversion of Web Screenshots into HTML Code with the WebSight Dataset},
+      author={Hugo Laurençon and Léo Tronchon and Victor Sanh},
+      year={2024},
+      eprint={2403.09029},
+      archivePrefix={arXiv},
+      primaryClass={cs.HC}
+}
+```
+---
+```