| --- |
| language: |
| - en |
| license: apache-2.0 |
| library_name: transformers |
| pipeline_tag: text-generation |
| tags: |
| - graphic-design |
| - design-generation |
| - layout-planning |
| - qwen3 |
| base_model: Qwen/Qwen3-8B |
| --- |
| |
| # DesignAsCode Semantic Planner |
|
|
| The Semantic Planner for the [DesignAsCode](https://github.com/liuziyuan1109/design-as-code) pipeline. Given a natural-language design request, it generates a structured design plan — including layout reasoning, layer grouping, image generation prompts, and text element specifications. |
|
|
| ## Model Details |
|
|
| | | | |
| |---|---| |
| | **Base Model** | Qwen3-8B | |
| | **Fine-tuning** | Supervised Fine-Tuning (SFT) | |
| | **Size** | 16 GB (fp16) | |
| | **Context Window** | 8,192 tokens | |
|
|
| ## Training Data |
|
|
| Trained on ~10k examples sampled from the [DesignAsCode Training Data](https://huggingface.co/datasets/Tony1109/DesignAsCode-training-data), which contains 19,479 design samples distilled from the [Crello](https://huggingface.co/datasets/cyberagent/crello) dataset using GPT-4o and GPT-o3. No additional data was used. |
|
|
| ### Training Format |
|
|
| - **Input:** `prompt` — natural-language design request |
| - **Output:** `layout_thought` + `grouping` + `image_generator` + `generate_text` |
|
|
| See the [training data repo](https://huggingface.co/datasets/Tony1109/DesignAsCode-training-data) for field details. |
|
|
| ## Training Configuration |
|
|
| | | | |
| |---|---| |
| | **Batch Size** | 1 | |
| | **Gradient Accumulation** | 2 | |
| | **Learning Rate** | 5e-5 (AdamW) | |
| | **Epochs** | 2 | |
| | **Max Sequence Length** | 8,192 tokens | |
| | **Precision** | bfloat16 | |
| | **Loss** | Completion-only (only on generated tokens) | |
|
|
| ## Usage |
|
|
| ```python |
| from transformers import AutoTokenizer, AutoModelForCausalLM |
| import torch |
| |
| model_path = "Tony1109/DesignAsCode-planner" |
| tokenizer = AutoTokenizer.from_pretrained(model_path) |
| model = AutoModelForCausalLM.from_pretrained( |
| model_path, |
| torch_dtype=torch.float16, |
| device_map="auto" |
| ) |
| ``` |
|
|
| For full pipeline usage (plan → implement → reflection), see the [project repo](https://github.com/liuziyuan1109/design-as-code) and [Quick Start](https://github.com/liuziyuan1109/design-as-code#quick-start). |
|
|
| ## Outputs |
|
|
| The model generates semi-structured text with XML tags: |
|
|
| - `<layout_thought>...</layout_thought>` — detailed layout reasoning |
| - `<grouping>...</grouping>` — JSON array grouping related layers with thematic labels |
| - `<image_generator>...</image_generator>` — JSON array of per-layer image generation prompts |
| - `<generate_text>...</generate_text>` — JSON array of text element specifications (font, size, alignment, etc.) |
|
|
| ## Ethical Considerations |
|
|
| - Designs should be reviewed by humans before production use. |
| - May reflect biases present in the training data. |
| - Generated content should be checked for copyright compliance. |
|
|
| ## Citation |
|
|
| ```bibtex |
| @article{liu2026designascode, |
| title = {DesignAsCode: Bridging Structural Editability and |
| Visual Fidelity in Graphic Design Generation}, |
| author = {Liu, Ziyuan and Sun, Shizhao and Huang, Danqing |
| and Shi, Yingdong and Zhang, Meisheng and Li, Ji |
| and Yu, Jingsong and Bian, Jiang}, |
| journal = {arXiv preprint arXiv:2602.17690}, |
| year = {2026}, |
| url = {https://arxiv.org/abs/2602.17690} |
| } |
| ``` |
|
|
