Principle:EvolvingLMMs Lab Lmms eval TUI Web Interface

Knowledge Sources	EvolvingLMMs_Lab_Lmms_eval
Domains	Web_UI, Evaluation, Frontend
Last Updated	2026-02-14 00:00 GMT

Overview

TUI Web Interface refers to the design and implementation patterns for building the browser-based graphical interface for LMMs-Eval. This interface provides an intuitive way to configure, launch, and monitor evaluation jobs without requiring command-line expertise.

Theoretical Basis

Architecture Overview

The TUI Web Interface follows modern single-page application (SPA) patterns:

Component-Based Design: React functional components with hooks for state management Real-Time Updates: EventSource (SSE) for live log streaming from backend Responsive Layout: Flexbox-based layout with resizable panels Minimal Dependencies: Uses React, TypeScript, and Tailwind CSS without heavy frameworks

UI Organization

The interface is divided into three main regions:

Header Bar: Displays version, git info, system info, and evaluation status Configuration Sidebar: Collapsible sections for model, tasks, and parameters Main Panel: Split view showing command preview and live log output

State Management

State is managed using React hooks with clear separation:

Configuration State: Model selection, arguments, tasks, environment variables, batch size, limits UI State: Panel expansion, task filtering, group collapsing, log maximization Runtime State: Job status, job ID, output lines, command preview Server Data: Models, tasks, version info (fetched on mount)

Real-Time Communication

The interface uses EventSource for real-time updates:

const eventSource = new EventSource(`${API_BASE}/eval/${jobId}/stream`)

eventSource.onmessage = (event) => {
  const data = JSON.parse(event.data)
  if (data.type === 'output') {
    setOutput(prev => [...prev, data.line])
  } else if (data.type === 'done') {
    setStatus(data.exit_code === 0 ? 'completed' : 'error')
  }
}

This provides:

Low-latency output streaming
Automatic reconnection handling
Event-driven architecture
No polling overhead

Task Selection Interface

The task selection UI implements a hierarchical structure:

Grouping: Tasks are organized into groups based on ID prefixes Filtering: Real-time search with highlight-on-match Bulk Selection: Group-level checkboxes for selecting all children Collapse/Expand: Groups can be collapsed to save space

The implementation uses computed properties (useMemo) to efficiently derive the tree structure:

const visibleNodes = useMemo(() => {
  // Filter leaves by search term
  const filteredLeaves = allLeaves.filter(t =>
    t.id.toLowerCase().includes(taskFilter.toLowerCase())
  )

  // Assign leaves to groups based on prefix matching
  for (const group of allGroups) {
    const children = filteredLeaves.filter(leaf =>
      leaf.id.startsWith(`${group.id}_`)
    )
    if (children.length > 0) {
      groupChildrenMap.set(group.id, children)
    }
  }

  // Return mixed list of groups and ungrouped leaves
}, [tasks, taskFilter])

Syntax Highlighting

The interface includes custom syntax highlighters:

Shell Highlighting: Highlights commands, arguments, strings, variables, operators ANSI Color Support: Parses ANSI escape sequences from log output and renders with CSS classes

Both use regex-based tokenization for performance:

function highlightShell(code: string) {
  // Match patterns: comments, strings, variables, flags, operators
  const tokens = []
  let remaining = code

  while (remaining.length > 0) {
    // Try to match each pattern type
    if (match = remaining.match(/^#.*/)) {
      // Comment
    } else if (match = remaining.match(/^(['"]).*\1/)) {
      // String
    } else if (match = remaining.match(/^\$[a-zA-Z_]/)) {
      // Variable
    }
    // ... more patterns
  }
  return tokens
}

Custom Components

The interface implements several custom components:

ShellEditor: Overlay-based syntax-highlighted textarea with synchronized scrolling Select: Searchable dropdown with keyboard navigation HighlightMatch: Inline search term highlighting

These components maintain consistent styling and behavior across the interface.

Environment Variable Editor

The ShellEditor component provides a specialized editing experience:

Real-time syntax highlighting for shell export statements
Synchronized scrolling between highlight layer and input layer
Transparent textarea with colored overlay for rendering
Preserves exact input including whitespace and formatting

Status Management

The interface tracks evaluation lifecycle through status states:

ready: Initial state, ready to start
running: Job executing, streaming output
stopped: User-initiated termination
completed: Successful completion (exit code 0)
error: Failure or connection error

Status is visually indicated through:

Badge in header with color coding
Animated progress bar during execution
Button enable/disable states

Command Preview

The interface provides real-time command preview:

Updates as configuration changes
Shows formatted command with line breaks
Includes environment variable exports
Copy-to-clipboard functionality

This is generated server-side via the /eval/preview endpoint to ensure consistency with execution.

Responsive Design

The interface adapts to different screen sizes:

Sidebar with responsive width breakpoints (320px min, 600px max)
Collapsible sections to maximize content area
Maximize mode for log output
Thin scrollbars for unobtrusive navigation

Visual Design

The interface follows a minimalist design language:

Neutral color palette (grays with black accents)
Monospace fonts for code/logs
Subtle borders and spacing
Hover states for interactive elements
Consistent uppercase labels with tracking

Integration Patterns

API Communication

The frontend communicates with the backend through REST endpoints:

// Fetch available models
fetch('/models').then(r => r.json()).then(setModels)

// Preview command
fetch('/eval/preview', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(config)
})

// Start evaluation
fetch('/eval/start', { method: 'POST', body: JSON.stringify(config) })

// Stream output
new EventSource(`/eval/${jobId}/stream`)

// Stop job
fetch(`/eval/${jobId}/stop`, { method: 'POST' })

Build Integration

The frontend is built using Vite and served statically:

TypeScript compilation
React JSX transformation
Tailwind CSS processing
Asset bundling and optimization
Output to dist/ directory

User Experience Patterns

Progressive Disclosure

The interface uses collapsible sections to reduce visual complexity:

Configuration sections can be expanded/collapsed
Task groups can be collapsed when not needed
Environment variables section collapsible by default

Immediate Feedback

User actions receive immediate visual feedback:

Hover states on interactive elements
Checkbox state changes on click
Real-time search filtering
Auto-scroll log output to latest

Error Handling

The interface handles errors gracefully:

Connection errors shown in log output
Failed API calls result in error status
Empty states with helpful messages
Validation feedback (e.g., "No tasks selected")

Performance Considerations

Memoization

Expensive computations are memoized:

Task tree construction (useMemo)
Filtered and grouped task nodes
Recalculated only when dependencies change

Efficient Rendering

React patterns for performance:

Key props on list items for efficient reconciliation
Stable references for event handlers
Conditional rendering to avoid unnecessary work
Auto-scrolling only on output changes

Scrolling Optimization

Custom scrollbar styling and thin scrollbars reduce visual weight while maintaining usability.

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment