Trending Society

Segmented Mode Picker | UI components | Trending Society

More from @localmode, 105 components

All @localmode

Artifact component
@localmode
A Claude-style docked side-panel/canvas shell (header, title, description, copy/download/refresh/close toolbar, scrollable content) that renders generated code, docs, SVG, or HTML beside the chat. Presentational — driven by a local model via useGenerateText/useGenerateObject. No server, no sandbox.
2 registry deps · 1 package
Chart Artifact component
@localmode
A dependency-free inline-SVG chart (line / bar / area / scatter / radar / gauge) for local metrics — eval curves (precision/recall/F1 radar), 2D embedding projections (scatter), drift-over-time, latency/tok-s. Driven by useEvaluateModel/useReindex or any local numbers. No charting library, no server.
1 registry dep
Code Diff Viewer component
@localmode
A unified or side-by-side text/code diff of two local strings (before/after of redacted, translated, or transformed text). Additions/deletions highlighted, computed client-side via a dependency-free LCS line diff. The text analog of BeforeAfterImageViewer. No ML hook, no server.
1 registry dep
Data Table Artifact component
@localmode
A generic sortable data table for local row data — VectorDB results, model catalogs, evaluation rows, or generateObject() arrays. Click a column header to sort entirely client-side. A docked-canvas table, distinct from the inline ScoredResultBarList.
2 registry deps · 1 package
Audio Scrub Player component
@localmode
A composable scrubbable audio player for local Blob/object-URL audio (Kokoro TTS output or recordings) — play/pause, a draggable seek bar, and a time/duration readout, managing its own <audio> element and object-URL lifecycle. Ships a standalone, controlled ScrubBar seek sub-primitive (pointer + keyboard). Pairs with useSynthesizeSpeech output.
2 registry deps
Mic Selector component
@localmode
A microphone input-device picker with permission handling and live device enumeration — fully offline, using only browser device APIs (getUserMedia for the permission prompt, enumerateDevices for the list, a devicechange listener to stay current). Emits the chosen deviceId for a getUserMedia constraint; pairs with VoiceButton / VoiceOrb / useLiveTranscribe.
1 registry dep · 1 package
Streaming Speech Panel component
@localmode
A streaming-TTS status surface: active state (WaveformActivityBars + spinner, synthesizing/playing label, processed-clause count, highlighted now-playing clause box) and finished state (clause-count summary, a generated-locally privacy note, and a Download WAV action). Driven by useStreamSpeech (isSynthesizing/isPlaying/currentClause/clauses); download via downloadBlob.
2 registry deps
Synced Transcript Viewer component
@localmode
A karaoke-style transcript viewer that highlights words in lockstep with audio playback using word-level alignment timestamps — the playback-time -> word-index sync is pure client-side (binary search on timeupdate). Clicking a word seeks the audio to its start. Driven by useTranscribe word-level timestamps over a local audio Blob.
2 registry deps
Transcribed Note Card component
@localmode
A transcription list item pairing transcript text with inline <audio> playback — relative timestamp (hover -> absolute), transcribed body, and a hover-revealed delete — plus a transcribing… placeholder variant (WaveformActivityBars + label) that morphs into the populated card. The canonical useOperationList-backed STT list pattern; driven by useTranscribe.
3 registry deps
Voice Button component
@localmode
A press-to-record / release-to-transcribe push-to-talk button with an explicit visual state machine: idle -> recording (pulse rings + live waveform) -> processing (loader) -> success/error. Recording uses getUserMedia/MediaRecorder (useVoiceRecorder); transcription routes to local Whisper (useTranscribe). Controlled — the app advances the state.
2 registry deps
Voice Comparison Panel component
@localmode
A/B voice comparison — two labeled columns, each with a language-grouped voice select (VoicePicker) and a native <audio> player shown once audio is set, a shared comparison textarea, and a Compare button with a loading state. Wire onCompare to two useSynthesizeSpeech runs and pass the resulting Blobs back per column.
3 registry deps
Voice Orb component
@localmode
An animated Canvas 2D voice-agent orb/visualizer that reflects discrete agent states (idle/connecting/listening/thinking/speaking/muted) and pulses with input/output audio volume via getInputVolume()/getOutputVolume() callbacks, with color/glow variants. Visual state is fully decoupled from the audio source — feed volume from a local AnalyserNode. Driven by useLiveTranscribe / useTurnTaker.
1 registry dep

Segmented Mode Picker

Install

Live preview

Registry dependencies1

Packages0

Segmented Mode Picker

Install

Live preview

Registry dependencies1

Packages0

Source

More from @localmode, 105 components

The Signal

Install

Live preview

Registry dependencies1

Packages0

Install

Live preview

Registry dependencies1

Packages0

Source

More from @localmode105, 105 components

More from @localmode, 105 components