ceos/unsloth
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Images and Video: tighten code comments

Browse source
This commit is contained in:
Unsloth 2026-07-25 05:00:49 -07:00
commit 917245e34a
4 changed files with 20 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

25
studio/frontend/src/features/images/images-page.tsx
View file

@ -23,8 +23,7 @@ import {
ZoomInAreaIcon,
} from "@hugeicons/core-free-icons";
import { HugeiconsIcon } from "@hugeicons/react";
// The raw Radix trigger: the app's TooltipTrigger adds a click-to-toggle handler that
// has no business inside a menu row.
// Raw Radix trigger: the app's adds a click-to-toggle, wrong inside a menu row.
import { Tooltip as TooltipPrimitive } from "radix-ui";
import { TestTubeOutlineIcon } from "@/lib/hugeicons-derived";
@ -2339,18 +2338,15 @@ export function ImagesPage({ active = true }: { active?: boolean }) {
onDeploy={handleDeployAdapter}
/>
) : (
/* ── Controls rail + preview canvas. No card: both sit on the page background
like the Hub, divided by a rule, so nothing is spent on box chrome. Same
centered measure as the Hub (mx-auto, max-w-1100, px-5 / sm:px-8). No bottom
padding, so the rule runs the full page height; the panes pad their own
content instead. ── */
/* ── Controls rail + preview canvas. No cards: both sit on the page background,
split by a rule, on the Hub's centered measure. No bottom padding, so the rule
runs the full page height; each pane pads its own content. ── */
<div className="mx-auto flex min-h-0 w-full min-w-0 max-w-[1100px] flex-1 overflow-hidden px-5 pt-9 sm:px-8">
<div className="flex w-[368px] shrink-0 flex-col overflow-hidden border-r border-border/60">
{/* pl-0.5 keeps focus rings off the scroll container's edge. */}
<div className="hover-scrollbar flex min-h-0 flex-col gap-4 overflow-y-auto pb-7 pl-0.5 pr-7">
{/* Workflow picker. Seven workflows don't fit a segmented strip in this rail,
so it's a dropdown; a row stays disabled until the loaded model supports
it (status.workflows). New workflows slot in without shrinking anything. */}
{/* Seven workflows don't fit a segmented strip in this rail, so: a dropdown.
A row stays disabled until the loaded model supports it (status.workflows). */}
<div className="grid gap-1.5">
<DropdownMenu>
<DropdownMenuTrigger asChild={true}>
@ -2376,10 +2372,8 @@ export function ImagesPage({ active = true }: { active?: boolean }) {
{WORKFLOW_TABS.map((t) => {
const enabled = workflowEnabled(t);
return (
// Rows stay one line; what the workflow does (or why it is
// unavailable) arrives as a tooltip after a short hover. The
// trigger wraps the row rather than being the row: a disabled item
// has pointer-events: none, so it would never hover.
// Rows stay one line; the description arrives on hover. The trigger
// wraps the row: a disabled item has pointer-events: none.
<Tooltip key={t.id} delayDuration={550}>
<TooltipPrimitive.Trigger asChild={true}>
<div>
@ -2851,8 +2845,7 @@ export function ImagesPage({ active = true }: { active?: boolean }) {
aria-label="Flip width and height"
onClick={flipDimensions}
>
{/* The arrows turn with the orientation, so the button shows
which way the flip goes. */}
{/* Arrows turn with the orientation, showing which way it flips. */}
<HugeiconsIcon
icon={ArrowLeftRightIcon}
className={cn(

14
studio/frontend/src/features/images/train/diffusion-train-panel.tsx
View file

@ -123,8 +123,8 @@ function repoIsPrequantized(baseModel: string): boolean {
// Dataset-select option value prefix for a not-yet-imported example; picking it imports.
const EXAMPLE_PREFIX = "example:";
const DATASET_FILE_ACCEPT = ".png,.jpg,.jpeg,.webp,.bmp,.txt,.caption,.jsonl";
// min-w-0 + a truncating value: without them a long option ("nf4 (4-bit QLoRA,
// lowest VRAM)") sets the grid column's min width and pushes into its neighbour.
// min-w-0 + a truncating value: a long option would otherwise set the grid
// column's min width and push into its neighbour.
const selectClass =
"h-8 w-full min-w-0 text-xs *:data-[slot=select-value]:min-w-0 *:data-[slot=select-value]:truncate";
// Every settings cell is a grid item, so it needs min-w-0 to be allowed to shrink.
@ -1029,8 +1029,8 @@ export function DiffusionTrainPanel({
return (
<div className="mx-auto flex min-h-0 w-full min-w-0 max-w-[1100px] flex-1 overflow-hidden px-5 pt-9 sm:px-8">
{/* Left: configure. No card here or on the right: both panes sit on the page
background like the Hub, divided by a rule that runs the full page height. */}
{/* Left: configure. No cards: both panes sit on the page background, split by a
rule that runs the full page height. */}
<div className="flex w-[392px] min-w-0 shrink-0 flex-col overflow-hidden border-r border-border/60">
{/* pl-0.5 keeps focus rings off the scroll container's edge. */}
<div className="hover-scrollbar flex min-h-0 flex-col gap-5 overflow-y-auto overflow-x-hidden pb-7 pl-0.5 pr-7">
@ -1107,8 +1107,7 @@ export function DiffusionTrainPanel({
<SelectValue />
</SelectTrigger>
<SelectContent>
{/* Rows stay short: name plus image count. Caption counts show under the
picker, and an example's license shows on its card below. */}
{/* Name plus image count only; captions and license show elsewhere. */}
{(info?.datasets ?? []).map((d) => (
<SelectItem key={d.name} value={d.name}>
{d.name} - {d.image_count} image{d.image_count === 1 ? "" : "s"}
@ -1168,8 +1167,7 @@ export function DiffusionTrainPanel({
>
Choose images
</Button>
{/* Nothing to upload until files are picked, so the count and Upload
only appear then. */}
{/* Count and Upload appear only once files are picked. */}
{pickedFileCount > 0 && (
<>
<span className="min-w-0 flex-1 truncate text-[11px] text-muted-foreground">

6
studio/frontend/src/features/images/train/example-dataset-cards.tsx
View file

@ -55,8 +55,7 @@ async function fetchPreviews(repo: string): Promise<string[]> {
return p;
}
// "Dog (DreamBooth subject)" -> "Dog". The parenthetical is context, not a name, so
// one-line picker rows and card titles drop it.
// "Dog (DreamBooth subject)" -> "Dog": one-line rows drop the parenthetical.
export function shortExampleLabel(label: string): string {
return label.replace(/\s*\(.*$/, "");
}
@ -135,8 +134,7 @@ export function ExampleDatasetCards({
<p className="line-clamp-2 text-[11px] leading-snug text-muted-foreground">
{ex.description}
</p>
{/* Import is the card's action, so it sits at the bottom right, on the
thumbnail row, instead of floating beside the text. */}
{/* The card's action, so: bottom right, on the thumbnail row. */}
<div className="flex min-w-0 items-end justify-between gap-3">
<ExamplePreviews repo={ex.repo} />
<Button

7
studio/frontend/src/features/video/video-page.tsx
View file

@ -268,8 +268,7 @@ const IDLE_PROGRESS: VideoLoadProgress = {
error: null,
};
// 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.
// Chat's slider, shared with Create. Signature kept for the call sites below.
function SliderField({
label,
hint,
@ -1437,8 +1436,8 @@ export function VideoPage({ active = true }: { active?: boolean }) {
</div>
</div>
{/* ── Controls rail + preview canvas, matching the Images tabs: no cards, the Hub's
centered measure, and a rule that runs the full page height. ── */}
{/* ── Controls rail + preview canvas, as on the Images tabs: no cards, the Hub's
centered measure, a rule that runs the full page height. ── */}
<div className="mx-auto flex min-h-0 w-full min-w-0 max-w-[1100px] flex-1 overflow-hidden px-5 pt-9 sm:px-8">
<div className="flex w-[368px] shrink-0 flex-col overflow-hidden border-r border-border/60">
{/* pl-0.5 keeps focus rings off the scroll container's edge. */}