github/ai-toolkit
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

On the ui, keep the last caption job bar visible at the bottom of a dataset so it can be viewed and edited

Browse Source
This commit is contained in:
Jaret Burkett
2026-08-12 17:32:48 -06:00
parent 18645d93b7
commit e16e04f123
2 changed files with 14 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
ui/src/components/CaptionMonitor.tsx
View File

@@ -20,7 +20,8 @@ interface CaptionMonitorProps {
// info, and the live log.
export default function CaptionMonitor({ datasetPath, onHeightChange }: CaptionMonitorProps) {
const { job, status, refreshJob } = useJobByRef(datasetPath, 3000);
const [collapsed, setCollapsed] = useState(false);
// Start collapsed; an active run pops it open via the effect below.
const [collapsed, setCollapsed] = useState(true);
const isActive = !!(job && (job.status === 'running' || job.status === 'queued'));
@@ -68,12 +69,13 @@ export default function CaptionMonitor({ datasetPath, onHeightChange }: CaptionM
}, [log, isScrolledToBottom]);
// Animate the docked height instead of translating, so the collapsed panel
// never extends below the container and adds scroll. Inactive -> 0 (hidden),
// collapsed -> just the header bar, expanded -> full panel.
// never extends below the container and adds scroll. No job for this
// dataset -> 0 (hidden), collapsed -> just the header bar, expanded ->
// full panel. The most recent captioning job is shown even when finished.
const HEADER_HEIGHT = 44;
const PANEL_HEIGHT = 300;
let height = 0;
if (isActive) height = collapsed ? HEADER_HEIGHT : PANEL_HEIGHT;
if (job) height = collapsed ? HEADER_HEIGHT : PANEL_HEIGHT;
useEffect(() => {
onHeightChange?.(height);
@@ -107,7 +109,7 @@ export default function CaptionMonitor({ datasetPath, onHeightChange }: CaptionM
</span>
</div>
)}
<div className="flex items-center gap-3 flex-shrink-0">
<div className="flex items-center gap-3 flex-shrink-0 ml-auto">
{job && <JobActionBar job={job} onRefresh={refreshJob} autoStartQueue={true} menuAnchor="top end" />}
<button
onClick={() => setCollapsed(c => !c)}

8
ui/src/components/DatasetImageCard.tsx
View File

@@ -119,6 +119,12 @@ const DatasetImageCard: React.FC<DatasetImageCardProps> = ({
const [savedCaption, setSavedCaption] = useState<string>('');
const dirtyRef = useRef<boolean>(false);
// Cards are keyed by image path, so this never needs resetting. Once loaded,
// keep the textarea mounted through poll refreshes — swapping in the
// "Loading caption..." placeholder unmounts it and resets scroll.
const hasLoadedCaptionRef = useRef(false);
if (isCaptionLoaded) hasLoadedCaptionRef.current = true;
// Sync from the fetched caption, but don't clobber unsaved local edits.
useEffect(() => {
if (!isCaptionLoaded) return;
@@ -265,7 +271,7 @@ const DatasetImageCard: React.FC<DatasetImageCardProps> = ({
'border-transparent border-2': isCaptionCurrent,
})}
>
{isCaptionLoaded ? (
{isCaptionLoaded || hasLoadedCaptionRef.current ? (
<form
onSubmit={e => {
e.preventDefault();