Instructions to use IFM/CrystalChat-7B-Web2Code with libraries, inference providers, notebooks, and local apps. Follow these links to get started.

Libraries

How to use IFM/CrystalChat-7B-Web2Code with Transformers:

# Use a pipeline as a high-level helper
from transformers import pipeline

pipe = pipeline("text-generation", model="IFM/CrystalChat-7B-Web2Code", trust_remote_code=True)

# Load model directly
from transformers import AutoModelForCausalLM
model = AutoModelForCausalLM.from_pretrained("IFM/CrystalChat-7B-Web2Code", trust_remote_code=True, device_map="auto")

Notebooks
Google Colab
Kaggle
Local Apps Settings

vLLM

How to use IFM/CrystalChat-7B-Web2Code with vLLM:

Install from pip and serve model

# Install vLLM from pip:
pip install vllm
# Start the vLLM server:
vllm serve "IFM/CrystalChat-7B-Web2Code"
# Call the server using curl (OpenAI-compatible API):
curl -X POST "http://localhost:8000/v1/completions" \
	-H "Content-Type: application/json" \
	--data '{
		"model": "IFM/CrystalChat-7B-Web2Code",
		"prompt": "Once upon a time,",
		"max_tokens": 512,
		"temperature": 0.5
	}'

Use Docker

docker model run hf.co/IFM/CrystalChat-7B-Web2Code

SGLang

How to use IFM/CrystalChat-7B-Web2Code with SGLang:

Install from pip and serve model

# Install SGLang from pip:
pip install sglang
# Start the SGLang server:
python3 -m sglang.launch_server \
    --model-path "IFM/CrystalChat-7B-Web2Code" \
    --host 0.0.0.0 \
    --port 30000
# Call the server using curl (OpenAI-compatible API):
curl -X POST "http://localhost:30000/v1/completions" \
	-H "Content-Type: application/json" \
	--data '{
		"model": "IFM/CrystalChat-7B-Web2Code",
		"prompt": "Once upon a time,",
		"max_tokens": 512,
		"temperature": 0.5
	}'

Use Docker images

docker run --gpus all \
    --shm-size 32g \
    -p 30000:30000 \
    -v ~/.cache/huggingface:/root/.cache/huggingface \
    --env "HF_TOKEN=<secret>" \
    --ipc=host \
    lmsysorg/sglang:latest \
    python3 -m sglang.launch_server \
        --model-path "IFM/CrystalChat-7B-Web2Code" \
        --host 0.0.0.0 \
        --port 30000
# Call the server using curl (OpenAI-compatible API):
curl -X POST "http://localhost:30000/v1/completions" \
	-H "Content-Type: application/json" \
	--data '{
		"model": "IFM/CrystalChat-7B-Web2Code",
		"prompt": "Once upon a time,",
		"max_tokens": 512,
		"temperature": 0.5
	}'

Docker Model Runner
How to use IFM/CrystalChat-7B-Web2Code with Docker Model Runner:
```
docker model run hf.co/IFM/CrystalChat-7B-Web2Code
```

victormiller commited on Oct 17, 2024

Commit

9209438

verified ·

1 Parent(s): 77ecb22

Update README.md

Browse files

Files changed (1) hide show

README.md +17 -18

README.md CHANGED Viewed

@@ -31,6 +31,22 @@ The Web2Code instruction tuning dataset was released in [Web2Code: A Large-scale
 ## Evaluations
 ## Webpage Code Generation Benchmark (WCGB)
 Utilizing the same images as the WUB, this benchmark evaluates a multimodal model tasked with generating HTML code from webpage images based on specific instructions. Unlike traditionalcode-level evaluations, this benchmark assesses the generated webpage’s fidelity at the image level. We convert the predicted HTML codes back into images using Selenium WebDriver to allow a direct visual comparison with the ground truth images. The evaluation, depicted on the left side of Figure 6, considers 10 different aspects, which are further categorized into four evaluation matrices using the GPT-4 Vision API.
@@ -48,24 +64,7 @@ Utilizing the same images as the WUB, this benchmark evaluates a multimodal mode
 |                        | ✓    | ✓   | ✓                | ✓                | **7.876**  | **7.687**  | **7.267**  | **7.563**  | **7.598**      |
 | **Llama3-8B**          | ✓    | ✓   | ✓                | ✓                | **8.522**  | **8.564**  | **8.421**  | **8.611**  | **8.530**      |
-**Table 1:** The performance of different LLM backbones under various data configurations on our Webpage Code Generation Benchmark (WCGB). "VSA" denotes Visual Structure and Alignment, "CAD" represents Color and Aesthetic Design, "TCC" represents Textual and Content Consistency, and "UII" denotes User Interface and Interactivity.
-## Webpage Understanding Benchmark (WUB)
-### Results
-| LLM Backbone           | DWCG | DWU | DWCG<sub>R</sub> | DWU<sub>R</sub> | Accuracy (%) |
-|------------------------|------|-----|------------------|------------------|--------------|
-| **CrystalChat-7B**     |      |     |                  |                  | 73.94        |
-|                        | ✓    | ✓   |                  |                  | 73.48        |
-|                        | ✓    | ✓   | ✓                | ✓                | **74.14**    |
-| **Vicuna-7B**          |      |     |                  |                  | 71.12        |
-|                        | ✓    |     |                  |                  | 68.11        |
-|                        |      | ✓   |                  |                  | 70.82        |
-|                        | ✓    | ✓   | ✓                | ✓                | **71.23**    |
-| **Llama3-8B**          | ✓    | ✓   | ✓                | ✓                | **74.84**    |
-**Table 2:** The accuracy of webpage understanding under various data configurations and LLM backbones.
-  All models are instruction-tuned and evaluated on our WUB benchmark. We note that the general domain data (i.e., LLaVA) is included in all data configuration as default.
 ### About CrystalChat-7B-Web2Code:
 * 7 billion parameter LLM

 ## Evaluations
+## Webpage Understanding Benchmark (WUB)
+### Results
+| LLM Backbone           | DWCG | DWU | DWCG<sub>R</sub> | DWU<sub>R</sub> | Accuracy (%) |
+|------------------------|------|-----|------------------|------------------|--------------|
+| **CrystalChat-7B**     |      |     |                  |                  | 73.94        |
+|                        | ✓    | ✓   |                  |                  | 73.48        |
+|                        | ✓    | ✓   | ✓                | ✓                | **74.14**    |
+| **Vicuna-7B**          |      |     |                  |                  | 71.12        |
+|                        | ✓    |     |                  |                  | 68.11        |
+|                        |      | ✓   |                  |                  | 70.82        |
+|                        | ✓    | ✓   | ✓                | ✓                | **71.23**    |
+| **Llama3-8B**          | ✓    | ✓   | ✓                | ✓                | **74.84**    |
+**Table 1:** The accuracy of webpage understanding under various data configurations and LLM backbones.
+  All models are instruction-tuned and evaluated on our WUB benchmark. We note that the general domain data (i.e., LLaVA) is included in all data configuration as default.
 ## Webpage Code Generation Benchmark (WCGB)
 Utilizing the same images as the WUB, this benchmark evaluates a multimodal model tasked with generating HTML code from webpage images based on specific instructions. Unlike traditionalcode-level evaluations, this benchmark assesses the generated webpage’s fidelity at the image level. We convert the predicted HTML codes back into images using Selenium WebDriver to allow a direct visual comparison with the ground truth images. The evaluation, depicted on the left side of Figure 6, considers 10 different aspects, which are further categorized into four evaluation matrices using the GPT-4 Vision API.
 |                        | ✓    | ✓   | ✓                | ✓                | **7.876**  | **7.687**  | **7.267**  | **7.563**  | **7.598**      |
 | **Llama3-8B**          | ✓    | ✓   | ✓                | ✓                | **8.522**  | **8.564**  | **8.421**  | **8.611**  | **8.530**      |
+**Table 2:** The performance of different LLM backbones under various data configurations on our Webpage Code Generation Benchmark (WCGB). "VSA" denotes Visual Structure and Alignment, "CAD" represents Color and Aesthetic Design, "TCC" represents Textual and Content Consistency, and "UII" denotes User Interface and Interactivity.
 ### About CrystalChat-7B-Web2Code:
 * 7 billion parameter LLM