From f813b32220cbe52852376a5108a69e746c25f366 Mon Sep 17 00:00:00 2001 From: Unsloth Date: Sat, 25 Jul 2026 04:40:53 -0700 Subject: [PATCH] Video: same treatment as the Images tabs - No cards: the rail and the canvas sit on the page background, divided by a rule that runs the full page height, on the Hub's centered measure. - Wider rail, chat's sliders, hover-only scrollbars. - Every native title tooltip is now the app's tooltip, including the clip cards. - Reapply and Cancel are outline buttons, the empty state uses the Video nav icon, and the clip tiles are less rounded. --- .../src/features/video/video-page.tsx | 210 ++++++++++-------- 1 file changed, 115 insertions(+), 95 deletions(-) diff --git a/studio/frontend/src/features/video/video-page.tsx b/studio/frontend/src/features/video/video-page.tsx index 876cdd5b1d..9561743c59 100644 --- a/studio/frontend/src/features/video/video-page.tsx +++ b/studio/frontend/src/features/video/video-page.tsx @@ -7,8 +7,8 @@ import { Download01Icon, InformationCircleIcon, LayoutAlignRightIcon, + FlimSlateIcon, Settings02Icon, - Video01Icon, VolumeHighIcon, } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; @@ -33,9 +33,13 @@ import { SelectTrigger, SelectValue, } from "@/components/ui/select"; -import { Slider } from "@/components/ui/slider"; import { Spinner } from "@/components/ui/spinner"; import { Textarea } from "@/components/ui/textarea"; +import { + Tooltip, + TooltipContent, + TooltipTrigger, +} from "@/components/ui/tooltip"; import { InfoHint } from "@/components/ui/info-hint"; import { ModelSelector } from "@/features/model-picker/components/model-selector"; import { VIDEO_GEN_TASKS } from "@/features/model-picker/components/model-selector/pickers"; @@ -48,6 +52,7 @@ import type { ModelOption, ModelSelectorChangeMeta, } from "@/features/model-picker/components/model-selector/types"; +import { ParamSlider } from "@/features/chat"; import { ModelLoadDescription } from "@/features/chat/components/model-load-status"; import { getHfToken, hfApiToken } from "@/features/hub/stores/hf-token-store"; import { formatBytes, formatEta } from "@/features/hub/lib/format"; @@ -263,8 +268,8 @@ const IDLE_PROGRESS: VideoLoadProgress = { error: null, }; -// Mirrors the Train page's SliderRow: label + Slider + number input, same classes as the -// images page's SliderField. +// The chat composer's slider, so Video, Create and Chat all read the same. The +// {label, hint, ...} signature is kept for the call sites below. function SliderField({ label, hint, @@ -283,31 +288,15 @@ function SliderField({ onChange: (v: number) => void; }) { return ( -
- - {label} - {hint && {hint}} - -
- onChange(v)} - min={min} - max={max} - step={step} - className="w-32" - /> - onChange(Number(e.target.value))} - min={min} - max={max} - step={step} - className="w-14 text-right font-mono text-xs font-medium bg-muted/50 border border-border rounded-lg px-1.5 py-0.5 focus:outline-none focus:ring-1 focus:ring-primary/30 [appearance:textfield] [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none" - /> -
-
+ ); } @@ -355,14 +344,18 @@ function ResolvedBadge({ }) { const resolved = status?.resolved?.[controlKey]; if (!resolved || resolved.source !== "auto") return null; - return ( - + const badge = ( + Auto: {formatResolvedValue(resolved.value)} ); + if (!resolved.reason) return badge; + return ( + + {badge} + {resolved.reason} + + ); } // A compact labeled Select row for the Advanced Options panel. @@ -1370,15 +1363,19 @@ export function VideoPage({ active = true }: { active?: boolean }) { ]} /> {status?.loaded && canReapply && ( - + + + + + Reload the current model with these advanced options + )} ); @@ -1418,29 +1415,34 @@ export function VideoPage({ active = true }: { active?: boolean }) {
{/* Single fixed toggle for the right-docked Advanced panel (mirrors Chat's settings toggle, same icon in both states so it never moves). Highlighted when open. */} - + + + + + Advanced options +
- {/* ── Controls rail + preview canvas. Padding mirrors the other tabs. ── */} -
- {/* The controls rail. Plain card with no header -- the prompt + Generate button make - the panel self-explanatory. */} -
+ {/* ── Controls rail + preview canvas, matching the Images tabs: no cards, the Hub's + centered measure, and a rule that runs the full page height. ── */} +
+
+ {/* pl-0.5 keeps focus rings off the scroll container's edge. */} +