Image-Text-to-Text
Safetensors
English
lfm2_vl
vision-language
image-to-code
tailwind-css
web-development
unsloth
liquid-foundation-model
conversational
Instructions to use saadxsalman/Liquid-WebSight with libraries, inference providers, notebooks, and local apps. Follow these links to get started.
- Local Apps
- Unsloth Studio new
How to use saadxsalman/Liquid-WebSight with Unsloth Studio:
Install Unsloth Studio (macOS, Linux, WSL)
curl -fsSL https://unsloth.ai/install.sh | sh # Run unsloth studio unsloth studio -H 0.0.0.0 -p 8888 # Then open http://localhost:8888 in your browser # Search for saadxsalman/Liquid-WebSight to start chatting
Install Unsloth Studio (Windows)
irm https://unsloth.ai/install.ps1 | iex # Run unsloth studio unsloth studio -H 0.0.0.0 -p 8888 # Then open http://localhost:8888 in your browser # Search for saadxsalman/Liquid-WebSight to start chatting
Using HuggingFace Spaces for Unsloth
# No setup required # Open https://huggingface.co/spaces/unsloth/studio in your browser # Search for saadxsalman/Liquid-WebSight to start chatting
Load model with FastModel
pip install unsloth from unsloth import FastModel model, tokenizer = FastModel.from_pretrained( model_name="saadxsalman/Liquid-WebSight", max_seq_length=2048, )
Update README.md
Browse files
README.md
CHANGED
|
@@ -68,38 +68,6 @@ The model was fine-tuned on the **HuggingFaceM4/WebSight (v0.2)** dataset.
|
|
| 68 |
* **Complexity:** Very deep or complex nested layouts might result in truncated HTML due to the `max_seq_length` limit.
|
| 69 |
* **Resolution:** Fine details in very small text within screenshots may be missed by the vision encoder.
|
| 70 |
|
| 71 |
-
## Example Output: User Signup Component
|
| 72 |
-
**Input Image:** A screenshot of a magenta-themed signup form.
|
| 73 |
-
|
| 74 |
-
**Generated Code:**
|
| 75 |
-
```html
|
| 76 |
-
<body class="bg-pink-600 flex justify-center items-center h-screen">
|
| 77 |
-
<div class="bg-white p-8 rounded-lg shadow-xl w-full max-w-md text-center">
|
| 78 |
-
<h1 class="text-3xl font-semibold text-gray-800 mb-6">SignUp Form</h1>
|
| 79 |
-
<div class="space-y-4">
|
| 80 |
-
<div class="flex items-center border rounded p-2">
|
| 81 |
-
<span class="px-2 text-gray-500">👤</span>
|
| 82 |
-
<input type="text" placeholder="Enter Username" class="w-full outline-none">
|
| 83 |
-
</div>
|
| 84 |
-
<div class="flex items-center border rounded p-2">
|
| 85 |
-
<span class="px-2 text-gray-500">✉️</span>
|
| 86 |
-
<input type="email" placeholder="Enter Email" class="w-full outline-none">
|
| 87 |
-
</div>
|
| 88 |
-
<div class="flex items-center border rounded p-2">
|
| 89 |
-
<span class="px-2 text-gray-500">🔒</span>
|
| 90 |
-
<input type="password" placeholder="Create Password" class="w-full outline-none">
|
| 91 |
-
</div>
|
| 92 |
-
<div class="flex items-center border rounded p-2">
|
| 93 |
-
<span class="px-2 text-gray-500">🔒</span>
|
| 94 |
-
<input type="password" placeholder="Retype Password" class="w-full outline-none">
|
| 95 |
-
</div>
|
| 96 |
-
</div>
|
| 97 |
-
<button class="w-full bg-purple-700 text-white mt-6 py-2 rounded hover:bg-purple-800 transition">
|
| 98 |
-
SignUp
|
| 99 |
-
</button>
|
| 100 |
-
</div>
|
| 101 |
-
</body>
|
| 102 |
-
```
|
| 103 |
|
| 104 |
## How to Get Started
|
| 105 |
To use this model for inference, use the following code snippet:
|
|
|
|
| 68 |
* **Complexity:** Very deep or complex nested layouts might result in truncated HTML due to the `max_seq_length` limit.
|
| 69 |
* **Resolution:** Fine details in very small text within screenshots may be missed by the vision encoder.
|
| 70 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 71 |
|
| 72 |
## How to Get Started
|
| 73 |
To use this model for inference, use the following code snippet:
|