or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.mdloading-components.mdstatus-tracking.mdtoast-notifications.md
tile.json

tessl/npm-gradio--statustracker

Svelte UI components for status tracking and user feedback in Gradio applications

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@gradio/statustracker@0.10.x

To install, run

npx @tessl/cli install tessl/npm-gradio--statustracker@0.10.0

index.mddocs/

@gradio/statustracker

@gradio/statustracker provides Svelte UI components for status tracking and user feedback in Gradio applications. It includes comprehensive status tracking with progress indicators, toast notifications, loading animations, and streaming progress bars designed to integrate seamlessly with Gradio interfaces.

Package Information

  • Package Name: @gradio/statustracker
  • Package Type: npm
  • Language: TypeScript
  • Installation: This package is part of the Gradio monorepo and typically installed via workspace dependencies
  • Peer Dependencies: Svelte ^4.0.0

Core Imports

import { StatusTracker, Toast, Loader, StreamingBar } from "@gradio/statustracker";
import type { LoadingStatus, ToastMessage } from "@gradio/statustracker";

For individual component imports:

import StatusTracker from "@gradio/statustracker"; // Default export
import { ToastContent } from "@gradio/statustracker"; // Individual toast component

Basic Usage

import { StatusTracker, Toast, type LoadingStatus, type ToastMessage } from "@gradio/statustracker";

// StatusTracker usage
const statusProps: Partial<LoadingStatus> = {
  status: "pending",
  queue_position: 2,
  queue_size: 5,
  eta: 10,
  show_progress: "full"
};

// Toast notifications
const toastMessages: ToastMessage[] = [
  {
    type: "success",
    title: "Success",
    message: "Operation completed successfully",
    id: 1,
    duration: 5,
    visible: true
  }
];

Architecture

@gradio/statustracker is built around several key components:

  • StatusTracker: Main component for comprehensive status display with queue information, progress tracking, and timer functionality
  • Toast System: Notification system with ToastContent and Toast container components supporting multiple message types
  • Loading Components: Loader and StreamingBar components for various loading states and progress indication
  • Type System: Complete TypeScript interfaces defining status data structures and message formats
  • Theming: Integrated CSS custom properties for light/dark theme support and responsive design

Capabilities

Status Tracking

Comprehensive status display component with progress indicators, queue information, ETA estimates, and timer functionality. Ideal for monitoring task progress in ML inference and asynchronous operations.

export interface StatusTrackerProps {
  i18n: I18nFormatter;
  eta?: number | null; // default: null
  queue_position?: number | null;
  queue_size?: number | null;
  status?: "complete" | "pending" | "error" | "generating" | "streaming" | null;
  scroll_to_output?: boolean; // default: false
  timer?: boolean; // default: true
  show_progress?: "full" | "minimal" | "hidden"; // default: "full"
  message?: string | null; // default: null
  progress?: LoadingStatus["progress"] | null | undefined; // default: null
  variant?: "default" | "center"; // default: "default"
  loading_text?: string; // default: "Loading..."
  absolute?: boolean; // default: true
  translucent?: boolean; // default: false
  border?: boolean; // default: false
  autoscroll?: boolean;
}

Status Tracking

Toast Notifications

Toast notification system for displaying success, error, warning, and info messages with auto-dismiss functionality and smooth animations.

export interface ToastProps {
  messages: ToastMessage[];
}

export interface ToastContentProps {
  title?: string;
  message?: string;
  type: "error" | "warning" | "info" | "success";
  id: number;
  duration?: number | null;
  visible?: boolean;
}

export interface ToastMessage {
  type: "error" | "warning" | "info" | "success";
  title: string;
  message: string;
  id: number;
  duration: number | null;
  visible: boolean;
}

Toast Notifications

Loading Components

Animated loading indicators and progress bars for various loading states and streaming operations.

export interface LoaderProps {
  margin?: boolean; // default: true
}

export interface StreamingBarProps {
  time_limit?: number | null;
}

Loading Components

Types

export interface LoadingStatus {
  eta: number;
  queue_position: number;
  queue_size: number;
  status: "pending" | "error" | "complete" | "generating" | "streaming";
  show_progress: "full" | "minimal" | "hidden";
  scroll_to_output: boolean;
  visible: boolean;
  fn_index: number;
  message?: string;
  progress?: {
    progress: number | null;
    index: number | null;
    length: number | null;
    unit: string | null;
    desc: string | null;
  }[];
  time_limit?: number | null;
}

export interface ToastMessage {
  type: "error" | "warning" | "info" | "success";
  title: string;
  message: string;
  id: number;
  duration: number | null;
  visible: boolean;
}

export type I18nFormatter = (key: string, params?: Record<string, any>) => string;