Implementation:Hiyouga LLaMA Factory WebUI Data Component

Knowledge Sources	Hiyouga_LLaMA_Factory
Domains	WebUI, Data Preview, Gradio Components
Last Updated	2026-02-06 19:00 GMT

Overview

Dataset preview modal component that enables paginated inspection of local training and evaluation datasets within the WebUI.

Description

The data.py module creates a paginated preview box using Gradio components. It loads dataset samples from JSON or JSONL files referenced in dataset_info.json, displays them 2 samples per page (configured via PAGE_SIZE), and supports page navigation with previous/next/close buttons. The can_preview function checks whether a dataset is locally available and has a valid file path before enabling the preview button. The get_preview function reads the actual data file and returns the appropriate page slice along with a visibility toggle for the modal overlay.

Usage

Use this component when building dataset selection UI elements that need a preview capability. It is called by create_eval_tab and create_train_tab to provide inline dataset inspection before launching training or evaluation jobs.

Code Reference

Source Location

• Repository: Hiyouga_LLaMA_Factory
• File: src/llamafactory/webui/components/data.py
• Lines: 1-122

Signature

PAGE_SIZE = 2

def prev_page(page_index: int) -> int: ...

def next_page(page_index: int, total_num: int) -> int: ...

def can_preview(dataset_dir: str, dataset: list) -> "gr.Button": ...

def get_preview(dataset_dir: str, dataset: list, page_index: int) -> tuple[int, list, "gr.Column"]: ...

def create_preview_box(dataset_dir: "gr.Textbox", dataset: "gr.Dropdown") -> dict[str, "Component"]: ...

Import

from llamafactory.webui.components.data import create_preview_box, can_preview, get_preview

I/O Contract

Inputs

Name	Type	Required	Description
dataset_dir	gr.Textbox	Yes	Gradio textbox containing the path to the dataset directory
dataset	gr.Dropdown	Yes	Gradio dropdown for selecting which dataset to preview

Outputs

Name	Type	Description
elem_dict	dict[str, Component]	Dictionary containing: data_preview_btn, preview_count, page_index, prev_btn, next_btn, close_btn, preview_samples

Usage Examples

# Creating a preview box alongside dataset selection
from llamafactory.webui.components.data import create_preview_box

with gr.Row():
    dataset_dir = gr.Textbox(value="data", scale=2)
    dataset = gr.Dropdown(multiselect=True, scale=4)
    preview_elems = create_preview_box(dataset_dir, dataset)

Related Pages

• Implementation:Hiyouga_LLaMA_Factory_WebUI_Eval_Component - Evaluation tab that uses the preview box
• Implementation:Hiyouga_LLaMA_Factory_WebUI_Common - Provides DEFAULT_DATA_DIR and DATA_CONFIG constants
• Implementation:Hiyouga_LLaMA_Factory_WebUI_Control - Provides list_datasets used alongside preview