Improve model card: Add `code-generation` tag and usage example
#2
by
nielsr
HF Staff
- opened
README.md
CHANGED
|
@@ -5,16 +5,18 @@ datasets:
|
|
| 5 |
- luzimu/WebGen-Bench
|
| 6 |
language:
|
| 7 |
- en
|
|
|
|
| 8 |
license: mit
|
| 9 |
metrics:
|
| 10 |
- accuracy
|
| 11 |
pipeline_tag: text-generation
|
| 12 |
-
|
|
|
|
| 13 |
---
|
| 14 |
|
| 15 |
# WebGen-LM
|
| 16 |
|
| 17 |
-
WebGen-LM is trained using the Bolt.diy trajectories generated from a subset of the training set of WebGen-Bench (🤗 [luzimu/WebGen-Bench](https://huggingface.co/datasets/luzimu/WebGen-Bench)). It has been introduced in the paper [WebGen-Bench: Evaluating LLMs on Generating Interactive and Functional Websites from Scratch](https://arxiv.org/abs/2505.03733).
|
| 18 |
|
| 19 |
The training data and code can be found at [WebGen-Bench (Github)](https://github.com/mnluzimu/WebGen-Bench).
|
| 20 |
|
|
@@ -30,6 +32,69 @@ The WebGen-LM family of models are as follows:
|
|
| 30 |
|
| 31 |
|
| 32 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 33 |
|
| 34 |
## Citation
|
| 35 |
|
|
|
|
| 5 |
- luzimu/WebGen-Bench
|
| 6 |
language:
|
| 7 |
- en
|
| 8 |
+
library_name: transformers
|
| 9 |
license: mit
|
| 10 |
metrics:
|
| 11 |
- accuracy
|
| 12 |
pipeline_tag: text-generation
|
| 13 |
+
tags:
|
| 14 |
+
- code-generation
|
| 15 |
---
|
| 16 |
|
| 17 |
# WebGen-LM
|
| 18 |
|
| 19 |
+
WebGen-LM is a code language model specifically trained for generating interactive and functional websites from scratch. It is trained using the Bolt.diy trajectories generated from a subset of the training set of WebGen-Bench (🤗 [luzimu/WebGen-Bench](https://huggingface.co/datasets/luzimu/WebGen-Bench)). It has been introduced in the paper [WebGen-Bench: Evaluating LLMs on Generating Interactive and Functional Websites from Scratch](https://arxiv.org/abs/2505.03733).
|
| 20 |
|
| 21 |
The training data and code can be found at [WebGen-Bench (Github)](https://github.com/mnluzimu/WebGen-Bench).
|
| 22 |
|
|
|
|
| 32 |
|
| 33 |
|
| 34 |
|
| 35 |
+
## Usage
|
| 36 |
+
|
| 37 |
+
You can use `WebGen-LM` with the `transformers` library to generate website code.
|
| 38 |
+
|
| 39 |
+
```python
|
| 40 |
+
from transformers import AutoModelForCausalLM, AutoTokenizer
|
| 41 |
+
import torch
|
| 42 |
+
|
| 43 |
+
model_id = "luzimu/WebGen-LM-32B" # You can also use WebGen-LM-7B or WebGen-LM-14B
|
| 44 |
+
|
| 45 |
+
tokenizer = AutoTokenizer.from_pretrained(model_id)
|
| 46 |
+
model = AutoModelForCausalLM.from_pretrained(
|
| 47 |
+
model_id,
|
| 48 |
+
torch_dtype=torch.bfloat16,
|
| 49 |
+
device_map="auto"
|
| 50 |
+
)
|
| 51 |
+
|
| 52 |
+
# Example for website generation
|
| 53 |
+
prompt = """Generate the complete HTML, CSS, and JavaScript code for a responsive website.
|
| 54 |
+
The website should be a simple landing page for a coffee shop.
|
| 55 |
+
It needs:
|
| 56 |
+
1. A navigation bar at the top with "Home", "Menu", "About Us", and "Contact" links.
|
| 57 |
+
2. A hero section with a background image, a title "Brewing Perfection", and a call-to-action button "View Our Menu".
|
| 58 |
+
3. A menu section displaying at least 3 coffee items with their names and prices.
|
| 59 |
+
4. An "About Us" section with a brief description of the coffee shop.
|
| 60 |
+
5. A "Contact" section with an address, phone number, and a simple contact form (Name, Email, Message, Submit button).
|
| 61 |
+
6. Basic responsive design for mobile views.
|
| 62 |
+
"""
|
| 63 |
+
|
| 64 |
+
messages = [
|
| 65 |
+
{"role": "user", "content": prompt}
|
| 66 |
+
]
|
| 67 |
+
|
| 68 |
+
text = tokenizer.apply_chat_template(
|
| 69 |
+
messages,
|
| 70 |
+
tokenize=False,
|
| 71 |
+
add_generation_prompt=True
|
| 72 |
+
)
|
| 73 |
+
|
| 74 |
+
model_inputs = tokenizer([text], return_tensors="pt").to(model.device)
|
| 75 |
+
|
| 76 |
+
generated_ids = model.generate(
|
| 77 |
+
model_inputs.input_ids,
|
| 78 |
+
max_new_tokens=2048, # Adjust as needed for full website code
|
| 79 |
+
do_sample=True,
|
| 80 |
+
temperature=0.7,
|
| 81 |
+
top_p=0.9,
|
| 82 |
+
repetition_penalty=1.05,
|
| 83 |
+
)
|
| 84 |
+
|
| 85 |
+
# Decode the generated output, skipping special tokens
|
| 86 |
+
response = tokenizer.batch_decode(generated_ids[0], skip_special_tokens=True)[0]
|
| 87 |
+
# The response will contain the full conversation history including the input prompt.
|
| 88 |
+
# To get only the newly generated text, you might need to slice it or use the appropriate
|
| 89 |
+
# tokenizer behavior based on how apply_chat_template adds prompt.
|
| 90 |
+
# For simplicity, if the model just appends to the prompt, direct decode might suffice.
|
| 91 |
+
# A more robust approach might be:
|
| 92 |
+
# generated_text_only = tokenizer.decode(generated_ids[0][len(model_inputs.input_ids[0]):], skip_special_tokens=True)
|
| 93 |
+
print(response)
|
| 94 |
+
|
| 95 |
+
# You might need to parse the output to separate HTML, CSS, and JS if the model outputs a combined file.
|
| 96 |
+
# For example, look for specific markers like <html>, <style>, <script>
|
| 97 |
+
```
|
| 98 |
|
| 99 |
## Citation
|
| 100 |
|