task
real-time task status and output display with streaming support, status indicators, and logs viewer.
live demo
enter a task id to see real-time streaming output.
compact mode
use compact prop for embedding in tight spaces
components
status pills
display task status with optional elapsed time.
queued
running
completed
failed
time since
displays elapsed time, updating in real-time for live tasks.
live: 5.0s
completed: 30.0s
task states
completed task
(25.0s)
This is the generated output from the task.
0.95
demo
example
test
running task
running(8.0s)
failed task
failed(5.0s)
task error
Error: CUDA out of memory. Tried to allocate 2.00 GiB.
installation
bash
1npx shadcn@latest add https://ui.inference.sh/r/task.jsonusage
the easiest way to display task output is with the TaskOutputWrapper component.
tsx
1import { TaskOutputWrapper } from '@/components/task-output'2import { Inference } from '@inferencesh/sdk'34// Create a client5const client = new Inference({ apiKey: 'your-key' })6// Or use proxy for frontend apps7const client = new Inference({ proxyUrl: '/api/inference/proxy' })89// Display task output with automatic streaming10<TaskOutputWrapper11 client={client}12 taskId="your-task-id"13 onComplete={(task) => console.log('Task done:', task)}14/>for more control, use the useTask hook with the TaskOutput component.
tsx
1import { useTask } from '@/hooks/use-task'2import { TaskOutput } from '@/components/task-output'34function MyComponent({ taskId }: { taskId: string }) {5 const { task, isLoading, isStreaming } = useTask({6 client,7 taskId,8 onUpdate: (task) => console.log('Update:', task),9 onComplete: (task) => console.log('Done:', task),10 })1112 return (13 <TaskOutput14 task={task}15 isLoading={isLoading}16 isStreaming={isStreaming}17 />18 )19}features
- real-time streaming with automatic reconnection
- status indicators with elapsed time
- automatic output field rendering (text, images, video, audio, files)
- tabbed view: output, logs, json
- copy-to-clipboard for output and logs
- auto-scrolling log viewer
- compact mode for embedding