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

Made the UI mobile friendly, finally...

Browse Source
This commit is contained in:
Jaret Burkett
2026-05-19 09:27:36 -06:00
parent 6ecaf679dc
commit df851b3497
22 changed files with 325 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
ui/src/components/AutoCaptionButton.tsx
View File

@@ -1,4 +1,4 @@
import React, {use, useEffect} from 'react';
import React, { use, useEffect } from 'react';
import { Button } from '@headlessui/react';
import { CaptionDatasetModal, openCaptionDatasetModal } from '@/components/CaptionDatasetModal';
import useJobByRef from '@/hooks/useJobByRef';
@@ -14,26 +14,33 @@ export default function AutoCaptionButton({ datasetPath, setIsAutoCaptioning }:
const { job, status, refreshJob } = useJobByRef(datasetPath, 5000);
useEffect(() => {
if (setIsAutoCaptioning) {
setIsAutoCaptioning(!!(job && (job.status === 'running')));
setIsAutoCaptioning(!!(job && job.status === 'running'));
}
}, [job, setIsAutoCaptioning]);
if (job && (job.status === 'running' || job.status === 'queued')) {
return (
<Link href={`/jobs/${job.id}`} className="text-white bg-gray-400 px-3 py-1 rounded-md mr-2 inline-flex items-center gap-1.5">
<Link
href={`/jobs/${job.id}`}
className="text-white bg-gray-400 px-2 sm:px-3 py-1 rounded-md mr-1 sm:mr-2 inline-flex items-center gap-1 sm:gap-1.5 text-sm sm:text-base whitespace-nowrap"
>
<Loader2 className="w-4 h-4 animate-spin" />
Auto Captioning...
<span className="hidden sm:inline">Auto Captioning...</span>
<span className="sm:hidden">Captioning</span>
</Link>
);
}
return (
<Button
className="text-white bg-blue-600 px-3 py-1 rounded-md mr-2"
onClick={() => openCaptionDatasetModal(datasetPath, () => {
refreshJob();
})}
className="text-white bg-blue-600 px-2 sm:px-3 py-1 rounded-md mr-1 sm:mr-2 text-sm sm:text-base whitespace-nowrap"
onClick={() =>
openCaptionDatasetModal(datasetPath, () => {
refreshJob();
})
}
>
Auto Caption
<span className="hidden sm:inline">Auto Caption</span>
<span className="sm:hidden">Caption</span>
</Button>
);
}