52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
import React, { use, useEffect } from 'react';
|
|
import { Button } from '@headlessui/react';
|
|
import { CaptionDatasetModal, openCaptionDatasetModal } from '@/components/CaptionDatasetModal';
|
|
import useJobByRef from '@/hooks/useJobByRef';
|
|
import Link from 'next/link';
|
|
import { Loader2 } from 'lucide-react';
|
|
|
|
type AutoCaptionButtonProps = {
|
|
datasetPath: string;
|
|
setIsAutoCaptioning?: (isAutoCaptioning: boolean) => void;
|
|
captionExt?: string;
|
|
};
|
|
|
|
export default function AutoCaptionButton({ datasetPath, setIsAutoCaptioning, captionExt }: AutoCaptionButtonProps) {
|
|
const { job, status, refreshJob } = useJobByRef(datasetPath, 5000);
|
|
useEffect(() => {
|
|
if (setIsAutoCaptioning) {
|
|
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-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" />
|
|
<span className="hidden sm:inline">Auto Captioning...</span>
|
|
<span className="sm:hidden">Captioning</span>
|
|
</Link>
|
|
);
|
|
}
|
|
return (
|
|
<Button
|
|
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();
|
|
},
|
|
{ defaultCaptionExt: captionExt },
|
|
)
|
|
}
|
|
>
|
|
<span className="hidden sm:inline">Auto Caption</span>
|
|
<span className="sm:hidden">Caption</span>
|
|
</Button>
|
|
);
|
|
}
|