Improve model card: Add project page, tags, and sample usage (#2)

- Improve model card: Add project page, tags, and sample usage (6bd771919f05b8bf356b129b8cd2bdf06a06634d)


Co-authored-by: Niels Rogge <[email protected]>

README.md

@@ -5,17 +5,20 @@ datasets:
 - luzimu/WebGen-Bench
 language:
 - en
+library_name: transformers
 license: mit
 metrics:
 - accuracy
-library_name: transformers
 pipeline_tag: text-generation
+tags:
+- code-generation
 ---
 
 # WebGen-LM
 
 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).
 
+Project page: https://webgen-bench.github.io/
 The training data and code can be found at [WebGen-Bench (Github)](https://github.com/mnluzimu/WebGen-Bench).
 
 The WebGen-LM family of models are as follows:
@@ -26,11 +29,52 @@ The WebGen-LM family of models are as follows:
 |WebGen-LM-14B | 🤗 [luzimu/WebGen-LM-14B](https://huggingface.co/luzimu/WebGen-LM-14B) |
 |WebGen-LM-32B | 🤗 [luzimu/WebGen-LM-32B](https://huggingface.co/luzimu/WebGen-LM-32B) |
 
+## Sample Usage
+
+You can use this model with the `transformers` library for text generation tasks, specifically for code generation based on instructions.
+
+```python
+from transformers import AutoModelForCausalLM, AutoTokenizer
+import torch
+
+model_id = "luzimu/WebGen-LM-32B"
+
+tokenizer = AutoTokenizer.from_pretrained(model_id)
+model = AutoModelForCausalLM.from_pretrained(
+    model_id,
+    torch_dtype=torch.bfloat16,
+    device_map="auto"
+)
+
+messages = [
+    {"role": "user", "content": "Write HTML, CSS, and JavaScript for a simple to-do list web application. The list should allow users to add and remove items."},
+]
+
+chat_input = tokenizer.apply_chat_template(
+    messages,
+    tokenize=False,
+    add_generation_prompt=True
+)
+
+model_inputs = tokenizer([chat_input], return_tensors="pt").to(model.device)
+
+generated_ids = model.generate(
+    model_inputs.input_ids,
+    max_new_tokens=2048,
+    do_sample=True,
+    temperature=0.7,
+    top_p=0.95
+)
+
+# Decode only the newly generated tokens
+output_text = tokenizer.decode(generated_ids[0][model_inputs.input_ids.shape[1]:], skip_special_tokens=False)
+print(output_text)
+```
+
 ## Performance on WebGen-Bench
 
 ![image/png](https://cdn-uploads.huggingface.co/production/uploads/64b0bfef2f2f9c345b87e673/ADt1JdvKw-IZ_xnS17adL.png)
 
-
 ## Citation
 
 If you find our project useful, please cite:
@@ -44,4 +88,5 @@ If you find our project useful, please cite:
       archivePrefix={arXiv},
       primaryClass={cs.CL},
       url={https://arxiv.org/abs/2505.03733}, 
-}
+}
+```