or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

components.mdindex.mdremote-monitoring.mdstatistics.mdstorage.mdui-server.md
tile.json

components.mddocs/

Visualization Components

The DeepLearning4J UI components system provides a comprehensive set of Java classes for building custom visualizations, charts, and interactive displays. These components can be used to create standalone HTML reports or integrated into the web UI.

Core Component System

Component Base Class

The abstract base class for all UI components.

public abstract class Component {
    // Base properties and methods for all components
    protected String componentType;
    
    // Abstract methods implemented by subclasses
    public abstract String getComponentType();
}

Component Styling

Base styling system for customizing component appearance.

public class Style {
    // Base styling properties
    protected String backgroundColor;
    protected String color;
    protected String fontFamily;
    protected String fontSize;
    
    // Styling methods
    public Style backgroundColor(String color);
    public Style color(String color);
    public Style fontFamily(String family);
    public Style fontSize(String size);
}

Length Units

Enumeration for specifying measurement units in styling.

public enum LengthUnit {
    px,     // Pixels
    em,     // Em units
    percent, // Percentage
    pt,     // Points
    rem,    // Root em units
    vh,     // Viewport height
    vw      // Viewport width
}

Chart Components

Chart Base Class

Abstract base class for all chart components.

public abstract class Chart extends Component {
    protected String title;
    protected List<String> xAxisLabels;
    protected List<String> yAxisLabels;
    protected StyleChart style;
    
    // Chart configuration methods
    public Chart title(String title);
    public Chart setXAxisLabels(List<String> labels);
    public Chart setYAxisLabels(List<String> labels);
    public Chart setStyle(StyleChart style);
}

Line Chart

Component for creating line charts and time series plots.

public class ChartLine extends Chart {
    public ChartLine();
    public ChartLine(String title);
    
    // Data management
    public ChartLine addSeries(String seriesName, double[] x, double[] y);
    public ChartLine addSeries(String seriesName, Number[] x, Number[] y);
    public ChartLine addSeries(String seriesName, List<Number> x, List<Number> y);
    
    // Configuration
    public ChartLine setXMin(double xMin);
    public ChartLine setXMax(double xMax);
    public ChartLine setYMin(double yMin);
    public ChartLine setYMax(double yMax);
    public ChartLine setGridEnabled(boolean enabled);
}

Scatter Plot

Component for creating scatter plots and point charts.

public class ChartScatter extends Chart {
    public ChartScatter();
    public ChartScatter(String title);
    
    // Data management
    public ChartScatter addSeries(String seriesName, double[] x, double[] y);
    public ChartScatter addSeries(String seriesName, Number[] x, Number[] y);
    public ChartScatter addSeries(String seriesName, List<Number> x, List<Number> y);
    
    // Point styling
    public ChartScatter setPointSize(int size);
    public ChartScatter setPointShape(String shape);
}

Histogram Chart

Component for creating histograms and distribution plots.

public class ChartHistogram extends Chart {
    public ChartHistogram();
    public ChartHistogram(String title);
    
    // Data management
    public ChartHistogram addBin(double binMin, double binMax, double count);
    public ChartHistogram addBins(double[] binEdges, double[] counts);
    public ChartHistogram addBins(List<Double> binEdges, List<Double> counts);
    
    // Configuration
    public ChartHistogram setBinCount(int count);
    public ChartHistogram setNormalized(boolean normalized);
}

Bar Charts

Components for creating horizontal and vertical bar charts.

public class ChartHorizontalBar extends Chart {
    public ChartHorizontalBar();
    public ChartHorizontalBar(String title);
    
    // Data management
    public ChartHorizontalBar addSeries(String seriesName, List<String> labels, List<Number> values);
    public ChartHorizontalBar addSeries(String seriesName, String[] labels, double[] values);
    
    // Configuration
    public ChartHorizontalBar setStacked(boolean stacked);
    public ChartHorizontalBar setBarWidth(double width);
}

Stacked Area Chart

Component for creating stacked area charts and filled line plots.

public class ChartStackedArea extends Chart {
    public ChartStackedArea();
    public ChartStackedArea(String title);
    
    // Data management
    public ChartStackedArea addSeries(String seriesName, double[] x, double[] y);
    public ChartStackedArea addSeries(String seriesName, List<Number> x, List<Number> y);
    
    // Configuration
    public ChartStackedArea setFillOpacity(double opacity);
    public ChartStackedArea setStrokeWidth(double width);
}

Timeline Chart

Component for creating timeline and Gantt-style charts.

public class ChartTimeline extends Chart {
    public ChartTimeline();
    public ChartTimeline(String title);
    
    // Data management
    public ChartTimeline addTimelineEvent(String label, long startTime, long endTime);
    public ChartTimeline addTimelineEvent(String label, long startTime, long endTime, String color);
    
    // Configuration
    public ChartTimeline setTimeFormat(String format);
    public ChartTimeline setShowLabels(boolean show);
}

Chart Styling

StyleChart

Styling configuration specific to chart components.

public class StyleChart extends Style {
    // Chart-specific styling
    protected String titleColor;
    protected String axisColor;
    protected String gridColor;
    protected String legendPosition;
    
    // Chart styling methods
    public StyleChart titleColor(String color);
    public StyleChart axisColor(String color);
    public StyleChart gridColor(String color);
    public StyleChart legendPosition(String position);
    public StyleChart width(double width, LengthUnit unit);
    public StyleChart height(double height, LengthUnit unit);
    public StyleChart margin(double top, double right, double bottom, double left, LengthUnit unit);
}

Layout Components

ComponentDiv

Container component for grouping and laying out other components.

public class ComponentDiv extends Component {
    public ComponentDiv();
    public ComponentDiv(StyleDiv style, Component... components);
    
    // Content management
    public ComponentDiv addComponent(Component component);
    public ComponentDiv addComponents(Component... components);
    public ComponentDiv addComponents(List<Component> components);
    
    // Styling
    public ComponentDiv setStyle(StyleDiv style);
}

StyleDiv

Styling configuration for div containers.

public class StyleDiv extends Style {
    // Layout properties
    protected String display;
    protected String flexDirection;
    protected String justifyContent;
    protected String alignItems;
    protected String padding;
    protected String margin;
    protected String border;
    
    // Layout methods
    public StyleDiv display(String display);
    public StyleDiv flexDirection(String direction);
    public StyleDiv justifyContent(String justify);
    public StyleDiv alignItems(String align);
    public StyleDiv padding(double padding, LengthUnit unit);
    public StyleDiv margin(double margin, LengthUnit unit);
    public StyleDiv border(String border);
}

Data Components

ComponentTable

Component for displaying tabular data.

public class ComponentTable extends Component {
    public ComponentTable();
    public ComponentTable(String[][] content, String[] header);
    
    // Content management
    public ComponentTable header(String... header);
    public ComponentTable content(String[][] content);
    public ComponentTable addRow(String... row);
    
    // Styling
    public ComponentTable setStyle(StyleTable style);
}

StyleTable

Styling configuration for table components.

public class StyleTable extends Style {
    // Table-specific styling
    protected String borderCollapse;
    protected String borderColor;
    protected String headerBackgroundColor;
    protected String evenRowColor;
    protected String oddRowColor;
    
    // Table styling methods
    public StyleTable borderCollapse(String collapse);
    public StyleTable borderColor(String color);
    public StyleTable headerBackgroundColor(String color);
    public StyleTable alternatingRowColors(String evenColor, String oddColor);
    public StyleTable width(double width, LengthUnit unit);
}

ComponentText

Component for displaying formatted text.

public class ComponentText extends Component {
    public ComponentText();
    public ComponentText(String text);
    public ComponentText(String text, StyleText style);
    
    // Content management
    public ComponentText setText(String text);
    public ComponentText append(String text);
    
    // Styling
    public ComponentText setStyle(StyleText style);
}

StyleText

Styling configuration for text components.

public class StyleText extends Style {
    // Text-specific styling
    protected String fontWeight;
    protected String textAlign;
    protected String textDecoration;
    protected String lineHeight;
    protected String whiteSpace;
    
    // Text styling methods
    public StyleText fontWeight(String weight);
    public StyleText textAlign(String align);
    public StyleText textDecoration(String decoration);
    public StyleText lineHeight(String height);
    public StyleText whiteSpace(String whiteSpace);
}

Interactive Components

DecoratorAccordion

Component for creating collapsible accordion interfaces.

public class DecoratorAccordion extends Component {
    public DecoratorAccordion();
    
    // Content management
    public DecoratorAccordion addSection(String title, Component content);
    public DecoratorAccordion addSection(String title, Component content, boolean defaultOpen);
    
    // Configuration
    public DecoratorAccordion setAllowMultipleOpen(boolean allow);
    public DecoratorAccordion setStyle(StyleAccordion style);
}

StyleAccordion

Styling configuration for accordion components.

public class StyleAccordion extends Style {
    // Accordion-specific styling
    protected String headerBackgroundColor;
    protected String headerColor;
    protected String contentBackgroundColor;
    protected String borderColor;
    
    // Accordion styling methods
    public StyleAccordion headerBackgroundColor(String color);
    public StyleAccordion headerColor(String color);
    public StyleAccordion contentBackgroundColor(String color);
    public StyleAccordion borderColor(String color);
}

Standalone Component System

StaticPageUtil

Utility class for generating standalone HTML pages with components.

public class StaticPageUtil {
    // Generate standalone HTML
    public static String generateHTML(Component component);
    public static String generateHTML(List<Component> components);
    public static String generateHTML(Component component, String title);
    
    // File operations
    public static void writeHTMLToFile(Component component, File file) throws IOException;
    public static void writeHTMLToFile(List<Component> components, File file) throws IOException;
}

ComponentObject

Wrapper class for components in standalone mode.

public class ComponentObject {
    public ComponentObject(Component component);
    
    // Component access
    public Component getComponent();
    public String getComponentAsJson();
}

ClassPathResource

Utility for handling classpath resources in standalone components.

public class ClassPathResource {
    public ClassPathResource(String path);
    
    // Resource access
    public InputStream getInputStream() throws IOException;
    public String getAsString() throws IOException;
    public byte[] getAsBytes() throws IOException;
}

Component Utilities

Utils

General utility functions for UI components.

public class Utils {
    // Color utilities
    public static String rgb(int r, int g, int b);
    public static String rgba(int r, int g, int b, double alpha);
    public static String hex(String hexColor);
    
    // Data conversion utilities
    public static double[] listToDoubleArray(List<Number> list);
    public static String[] listToStringArray(List<String> list);
    
    // Formatting utilities
    public static String formatNumber(double number, int decimalPlaces);
    public static String formatPercent(double value);
}

Usage Examples

Creating a Basic Line Chart

import org.deeplearning4j.ui.components.chart.ChartLine;
import org.deeplearning4j.ui.components.chart.style.StyleChart;

// Create training loss chart
ChartLine lossChart = new ChartLine("Training Loss")
    .addSeries("Training Loss", trainingIterations, trainingLosses)
    .addSeries("Validation Loss", validationIterations, validationLosses)
    .setXMin(0)
    .setYMin(0)
    .setGridEnabled(true);

// Apply styling
StyleChart style = new StyleChart()
    .width(800, LengthUnit.px)
    .height(400, LengthUnit.px)
    .titleColor("#333333")
    .axisColor("#666666");

lossChart.setStyle(style);

Creating a Histogram

import org.deeplearning4j.ui.components.chart.ChartHistogram;

// Create weight distribution histogram
ChartHistogram weightHist = new ChartHistogram("Weight Distribution")
    .addBins(binEdges, binCounts)
    .setBinCount(50)
    .setNormalized(true);

Building a Dashboard Layout

import org.deeplearning4j.ui.components.component.ComponentDiv;
import org.deeplearning4j.ui.components.component.style.StyleDiv;
import org.deeplearning4j.ui.components.text.ComponentText;

// Create header
ComponentText header = new ComponentText("Training Dashboard")
    .setStyle(new StyleText().fontSize("24px").fontWeight("bold"));

// Create layout container
StyleDiv containerStyle = new StyleDiv()
    .display("flex")
    .flexDirection("column")
    .padding(20, LengthUnit.px);

ComponentDiv dashboard = new ComponentDiv(containerStyle)
    .addComponent(header)
    .addComponent(lossChart)
    .addComponent(weightHist);

Generating Standalone HTML Report

import org.deeplearning4j.ui.standalone.StaticPageUtil;

// Create components
List<Component> reportComponents = Arrays.asList(
    header,
    lossChart,
    weightHist,
    statisticsTable
);

// Generate HTML
String htmlReport = StaticPageUtil.generateHTML(reportComponents, "Training Report");

// Write to file
File reportFile = new File("training-report.html");
StaticPageUtil.writeHTMLToFile(reportComponents, reportFile);

Creating Data Tables

import org.deeplearning4j.ui.components.table.ComponentTable;
import org.deeplearning4j.ui.components.table.style.StyleTable;

// Create statistics table
String[] headers = {"Layer", "Parameters", "Mean", "Std Dev"};
String[][] data = {
    {"Layer 1", "1000", "0.15", "0.32"},
    {"Layer 2", "2000", "0.08", "0.28"},
    {"Layer 3", "500", "0.12", "0.25"}
};

ComponentTable statsTable = new ComponentTable(data, headers)
    .setStyle(new StyleTable()
        .borderColor("#cccccc")
        .headerBackgroundColor("#f5f5f5")
        .alternatingRowColors("#ffffff", "#f9f9f9"));