task_categories:image-to-text language:en license:apache-2.0 size_categories:100K<n<1M region:us vision-language react frontend code-generation multimodal synthetic
---
license: apache-2.0
modality:
- Image
- Text
task_categories:
- image-to-text
language:
- en
tags:
- vision-language
- react
- frontend
- code-generation
- multimodal
- synthetic
pretty_name: Flame-Waterfall-React
size_categories:
- 100K<n<1M
---
# Flame-Waterfall-React: A Structured Data Synthesis Dataset for Multimodal React Code Generation

Flame-Waterfall-React is a dataset synthesized using the Waterfall-Model-Based Synthesis method, Advancing Vision-Language Models in Front-End Development via Data Synthesis. This dataset is designed to train vision-language models (VLMs) for React code generation from UI design mockups and specifications.

The Waterfall synthesis approach mimics real-world software development by systematically generating logically coherent and interconnected code components. The dataset follows a structured sequence of Requirement Analysis → UI & Architectural Design → System Design → Coding, ensuring modularity and reusability.

This dataset also contains the multi-image dataset which extends the Waterfall-Model-Based Synthesis method into the multi-image scenario.

# Usage

Here we provide the code guidance to convert the dataset into the format of Flame, and conduct the training of the Flame model with converted dataset.
```Python
data = load_dataset("Flame-Code-VLM/Flame-Waterfall-React", data_files="single-image/Flame-Waterfall-React-Single-Image.parquet")

batch_size = 1000
with open(output_jsonl_file, 'w', encoding='utf-8') as jsonl_file:
    for batch in parquet_file.iter_batches(batch_size=batch_size):
        df = batch.to_pandas()

        for _, record in df.iterrows():
            record_dict = record.to_dict()

            if "image" in record_dict and isinstance(record_dict["image"], bytes):
                try:
                    image = Image.open(io.BytesIO(record_dict["image"]))
                    if "meta_data" in record_dict and isinstance(record_dict["meta_data"], dict):
                        image_name = f"{record_dict['meta_data']['repo_name']}-_-_-{record_dict['meta_data']['component_name']}.png"
                    else:
                        if "problem_id" in record_dict:
                            image_name = f'{record_dict["problem_id"]}.png'
                        elif "id" in record_dict:
                            image_name = f'{record_dict["id"]}.png'
                        else:
                            image_name = "unknown.png"

                    image_path = os.path.join(TMP_DIR, image_name)
                    image.save(image_path)
                    record_dict["image"] = image_path 

                except Exception as e:
                    print(f"{e}")

            if "meta_data" in record_dict and isinstance(record_dict["meta_data"], dict) and 'preview' in record_dict["meta_data"]:
                try:
                    preview_data = record_dict["meta_data"]['preview']
                    if isinstance(preview_data, bytes):
                        preview_image = Image.open(io.BytesIO(preview_data))
                        
                        preview_name = f"cropped_{record_dict['meta_data']['repo_name']}-_-_-{record_dict['meta_data']['component_name']}.png"
                        preview_path = os.path.join(TMP_DIR, preview_name)
                        preview_image.save(preview_path)
                        record_dict["meta_data"]["preview"] = preview_path

                except Exception as e:
                    print(f"{e}")

            jsonl_file.write(json.dumps(record_dict, ensure_ascii=False) + '\n')
```